*{box-sizing:border-box}html,body{color:#f7f1d7;background:#000;min-height:100%;margin:0;font-family:Arial,Microsoft JhengHei,sans-serif;overflow:auto}button,select{font:inherit}#app{place-items:start center;min-height:100vh;padding:12px 10px;display:grid}.machine-shell{--theme-accent:#f7d275;--panel-bg:#080a14d1;background:url(/games/slot/assets/wl_1001_piggy_rich/img/game-bg.webp) 50%/100% 100% no-repeat,#07081a;border:2px solid #ffffff80;border-radius:0;width:min(430px,100vw - 20px);max-height:932px;padding:0;transition:width .32s,padding .32s;position:relative;overflow:visible}.machine-shell[data-view=desktop]{width:min(620px,100vw - 28px);overflow:visible}.h5-content{grid-template-rows:auto auto auto;gap:0;width:100%;padding:0;display:grid}.dome-placeholder{background:0 0;width:100%;height:40px}.fg-counter{text-align:center;color:#67e8ff;text-shadow:0 1px 4px #000c;background:#00000080;width:100%;padding:6px 0;font-size:14px;font-weight:800}.fg-counter strong{color:#ffe86a;font-size:20px}.fg-counter span{color:#aeb8cb}.deco-placeholder{background:0 0;grid-column:1/-1;height:80px}.machine-shell[data-view=desktop] .h5-content{aspect-ratio:auto;grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px}.playfield-shell{min-height:0;box-shadow:none;background:0 0;border:none;border-radius:0;place-items:center;display:grid;overflow:hidden}.machine-shell[data-view=desktop] .playfield-shell{grid-area:3/1/4/2}#game{aspect-ratio:756/800;background:0 0;align-self:center;width:100%;overflow:hidden;box-shadow:0 18px 70px #00000061}.machine-shell[data-view=mobile] #game{transform-origin:50%;width:100%;box-shadow:none;margin:0 auto;transform:none}#game canvas{display:block}.side-actions{grid-area:4/1/5/-1;grid-template-columns:repeat(5,1fr);place-items:center;gap:4px;padding:0 4px;display:grid}.machine-shell[data-view=desktop] .side-actions{grid-area:auto/1/auto/-1;grid-template-columns:repeat(4,minmax(64px,1fr))}.side-actions button{color:#f7d275;cursor:pointer;background:radial-gradient(circle at 50% 18%,#f7d2751f,#0000 42%),#0a0a10e0;border:1px solid #f7d275b8;border-radius:999px;place-items:center;gap:1px;width:clamp(42px,11vw,50px);min-height:clamp(42px,11vw,50px);font-weight:900;display:grid;box-shadow:0 0 0 2px #0000008f,0 0 12px #f7d27529}.side-actions button:first-child{grid-column:1}.side-actions button:nth-child(2){grid-column:2}.side-actions button:nth-child(3){grid-column:4}.side-actions button:nth-child(4){grid-column:5}.side-actions button.is-active{color:#08101b;background:radial-gradient(circle at 50% 18%,#ffffff47,#0000 42%),linear-gradient(#ffe58a,#d69d22);border-color:#fff0a8;box-shadow:0 0 0 2px #0000008f,0 0 16px #f7d27575}.side-actions button.is-active small{color:#111827}.side-actions span{font-size:10px;line-height:1}.side-actions small{color:#fff;font-size:8px;font-weight:600}.view-switch{z-index:40;background:#060a12d1;border:1px solid #f7f1d729;grid-template-columns:1fr;gap:6px;padding:4px;display:none;position:fixed;top:18px;left:calc(50% + 246px)}.dev-panel{z-index:40;color:#d9e2ef;background:#060a12c7;border:1px solid #f7f1d729;gap:6px;width:160px;padding:8px;display:none;position:fixed;top:96px;left:calc(50% + 246px)}.dev-panel label{gap:4px;display:grid}.dev-panel span{color:#aeb8cb;font-size:11px}.dev-panel select{color:#f7f1d7;background:#151b29;border:1px solid #f7f1d733;min-height:30px}.view-button{color:#d9e2ef;cursor:pointer;background:#20283a;border:1px solid #f7f1d729;min-height:30px;padding:0 12px}@media (width<=720px){.view-switch,.dev-panel{opacity:.82;top:auto;left:auto;right:8px}.view-switch{bottom:8px}.dev-panel{display:none}}.view-button.is-active{color:#09101c;background:#f2c14e;border-color:#f2c14e;font-weight:800}.select-field,.bottom-console{pointer-events:auto}.select-field{background:#060a125c;border:1px solid #f7f1d738;gap:8px;padding:10px;display:grid}.select-field span{color:#aeb8cb;text-transform:uppercase;font-size:12px}.select-field select{color:#f7f1d7;background:#151b29;border:1px solid #f7f1d740;width:100%;min-height:34px}.quick-config{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.config-button{color:#d9e2ef;cursor:pointer;background:#151b29;border:1px solid #f7f1d72e;min-height:28px;padding:0 4px}.config-button.is-active{color:#09101c;background:#f2c14e;border-color:#f2c14e}body[data-theme=ocean] .config-button.is-active{background:#67e8f9;border-color:#67e8f9}body[data-theme=space] .config-button.is-active{background:#a78bfa;border-color:#a78bfa}body[data-theme=gems] .config-button.is-active{background:#34d399;border-color:#34d399}.bottom-console{z-index:3;background:0 0;border:none;grid-template-rows:auto auto auto 76px;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch;gap:4px;width:100%;min-height:0;padding:0 4px 6px;display:grid;position:static}.machine-shell[data-view=desktop] .bottom-console{grid-column:1/-1;grid-template-rows:auto auto 76px;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;padding:0 6px 6px}.promo-strip{color:#67e8ff;background:url(/games/slot/assets/wl_1001_piggy_rich/img/promo-banner.webp) 50%/100% 100% no-repeat;border:none;grid-column:1/-1;grid-template-columns:90px minmax(0,1fr) 36px;align-items:center;min-width:0;min-height:48px;margin:0;display:grid;overflow:hidden}.buy-feature-button,.promo-info-button{color:#ffe86a;cursor:pointer;background:linear-gradient(#cc68ff,#7c2fb3);border:1px solid #fff4ce75;height:100%;font-weight:900}.buy-feature-button{background:url(/games/slot/assets/wl_1001_piggy_rich/img/buy-btn.webp) 50%/contain no-repeat;border:none;min-width:80px;font-size:0;line-height:1.1;transform:scale(1.05)translate(-3px)}.promo-strip strong{color:#67e8ff;letter-spacing:0;text-align:center;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 0 8px #67e8ffbf;min-width:0;padding:0 8px;font-size:clamp(15px,4.5vw,18px);font-weight:900;overflow:hidden}.promo-info-button{color:#0000;background:0 0;border:none;font-size:16px}.bet-bar{color:#f7f1d7;grid-column:1/-1;grid-template-columns:1fr auto 1.2fr auto 1fr;align-items:center;gap:6px;padding:4px 2px;display:grid}.bet-bar-stat{background:#1e0f32d9;border:1px solid #a064c859;border-radius:999px;justify-content:center;align-items:baseline;gap:4px;min-width:0;padding:6px 8px;display:flex}.bet-bar-stat span{color:#aeb8cb;font-size:9px;font-weight:800}.bet-bar-stat strong{color:#fff4ce;font-size:13px;font-weight:900}.bet-bar-minus,.bet-bar-plus{color:#f7f1d7;cursor:pointer;background:radial-gradient(circle at 50% 40%,#a050dc80,#501e8ce6);border:2px solid #b478f099;border-radius:50%;place-items:center;width:36px;height:36px;font-size:20px;font-weight:900;display:grid;box-shadow:0 0 8px #a050dc4d}.bet-bar-amount{background:#140a28e6;border:1px solid #a064c84d;border-radius:999px;place-items:center;padding:6px 12px;display:grid}.bet-bar-amount strong{color:#fff4ce;font-size:16px;font-weight:900}.console-button,.maxbet-button,.spin-button{color:#f7f1d7;cursor:pointer;background:#140c23e6;border:1px solid #a064c859;border-radius:8px;min-width:0;min-height:0}.hidden-control{display:none!important}.spin-button{z-index:2;grid-area:4/3/5/4}.machine-shell[data-view=desktop] .maxbet-button,.machine-shell[data-view=desktop] .spin-button{grid-row:auto}.machine-shell[data-view=mobile] .spin-button{place-self:center;width:96px;height:96px;margin:0;padding:0}.machine-shell[data-view=mobile] .console-meter strong{font-size:20px}.demo-modal{color:#eef4fb;background:#1a1030;border:2px solid #a855f7;width:min(380px,100vw - 28px);padding:0;overflow:hidden}.demo-modal::backdrop{background:#03070fb8}.demo-header{background:#1a1030;border-bottom:1px solid #a855f78c;justify-content:space-between;align-items:center;min-height:52px;padding:12px 18px;display:flex}.demo-header h2{color:#a855f7;margin:0;font-size:22px}.demo-close{color:#eef4fb;cursor:pointer;background:0 0;border:0;min-height:36px;font-size:24px}.demo-body{gap:8px;padding:16px;display:grid}.demo-option{color:#fff4ce;text-align:left;cursor:pointer;background:#a855f726;border:1px solid #a855f766;border-radius:8px;min-height:48px;padding:10px 16px;font-size:15px;font-weight:700;transition:background .15s,border-color .15s}.demo-option:hover{background:#a855f759;border-color:#a855f7b3}.settings-modal{color:#eef4fb;background:#172233;border:2px solid #f59e0b;width:min(460px,100vw - 28px);max-height:min(680px,100vh - 28px);padding:0;overflow:hidden}.settings-modal::backdrop{background:#03070fb8}.settings-header{z-index:2;background:#172233;border-bottom:1px solid #f59e0b8c;grid-template-columns:1fr 40px;align-items:center;gap:12px;min-height:62px;padding:14px 18px;display:grid;position:sticky;top:0}.settings-header h2{color:#f59e0b;margin:0;font-size:24px}.settings-close{color:#eef4fb;cursor:pointer;background:0 0;border:0;min-height:36px;font-size:24px}.settings-body{gap:14px;max-height:calc(min(680px,100vh - 28px) - 62px);padding:16px;display:grid;overflow-y:auto}.setting-group{background:#060a126b;border:1px solid #f7f1d724;gap:10px;padding:12px;display:grid}.setting-group h3{color:#f7f1d7;text-transform:uppercase;margin:0 0 2px;font-size:15px}.setting-row{color:#eef4fb;cursor:pointer;background:#20283a;border:1px solid #f7f1d729;justify-content:space-between;align-items:center;gap:12px;min-height:46px;padding:0 12px;display:flex}.setting-row:disabled{opacity:.48;cursor:not-allowed}.setting-row strong{color:#f59e0b}.setting-action{color:#fff4ce;cursor:pointer;background:linear-gradient(#a855f759,#6428b480);border:2px solid #a855f799;border-radius:12px;place-items:center;min-height:48px;font-size:16px;font-weight:800;transition:background .15s;display:grid}.setting-action:hover{background:linear-gradient(#a855f78c,#6428b4b3)}.setting-action-back{background:linear-gradient(#ef44444d,#b41e1e73);border-color:#ef444480}.setting-action-back:hover{background:linear-gradient(#ef444480,#b41e1ea6)}.help-modal{color:#eef4fb;background:#2e4357;border:2px solid #f59e0b;width:min(790px,100vw - 28px);height:min(730px,100vh - 28px);padding:0;overflow:hidden}.help-modal::backdrop{background:#03070fb8}.help-header{z-index:2;background:#2e4357;border-bottom:2px solid #f59e0b;grid-template-columns:1fr auto 40px;align-items:center;gap:16px;min-height:66px;padding:14px 20px;display:grid;position:sticky;top:0}.help-header h2{color:#f59e0b;margin:0;font-size:26px}.help-tabs{gap:8px;display:flex}.help-tab,.help-close{color:#eef4fb;cursor:pointer;background:#23384d;border:1px solid #ffffff1f;min-height:36px}.help-tab{min-width:94px}.help-tab.is-active{color:#10121a;background:#f59e0b;border-color:#f59e0b;font-weight:800}.help-close{background:0 0;border:0;font-size:24px}.help-body{height:calc(100% - 118px);padding:26px;overflow-y:auto}.help-panel{display:none}.help-panel.is-active{display:block}.help-panel h3{color:#eef4fb;margin:0 0 22px;font-size:20px}.symbol-grid,.payline-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.symbol-card,.payline-card{background:#30495f;border:1px solid #adcde759;grid-template-columns:128px 1fr;min-height:142px;display:grid;overflow:hidden}.symbol-face{background:#ffffff21;place-items:center;font-size:42px;font-weight:900;display:grid}.symbol-card h4,.payline-card h4{color:#f59e0b;margin:12px 12px 8px;font-size:18px}.symbol-card p{border-top:1px dashed #ffffff1f;justify-content:space-between;margin:0 12px;padding:5px 0;display:flex}.symbol-card span{color:#f59e0b;font-weight:800}.symbol-card strong{color:#35e978}.payline-card{grid-template-columns:1fr;padding:12px 16px 16px}.payline-card h4{text-align:center;margin:0 0 10px}.mini-grid{gap:3px;display:grid}.mini-grid span{aspect-ratio:1/.82;background:#ffffff08;border:1px solid #adcde747}.help-panel li{margin:0 0 14px;line-height:1.55}.help-panel p{line-height:1.65}.help-note{color:#d9e2ef}.help-footer{border-top:1px solid #ffffff29;justify-content:flex-end;align-items:center;min-height:52px;padding:10px 20px;display:flex}.help-footer label{align-items:center;gap:12px;display:flex}.help-footer input{accent-color:#f59e0b;width:26px;height:26px}.console-meter{display:none}.spin-button{color:#0000;box-shadow:none;background:0 0;border:none;border-radius:50%;place-items:center;padding:0;font-size:0;display:grid;position:relative;overflow:visible}.spin-img{object-fit:contain;pointer-events:none;border-radius:50%;width:100%;height:100%;display:block}.spin-button:disabled{opacity:.85;cursor:wait}.spin-img{animation:6.6s linear infinite spin-rotate}.spin-button.is-spinning .spin-img{animation:.11s linear infinite spin-rotate}.spin-button.is-settling .spin-img{animation:none}@keyframes spin-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fg-overlay{z-index:300;background:#000000d9;place-items:center;display:grid;position:absolute;inset:0}.fg-img-wrap{aspect-ratio:941/1672;width:100%;max-height:100%;margin:auto;position:relative}.fg-img-wrap img{object-fit:fill;width:100%;height:100%;position:absolute;inset:0}.fg-overlay strong{color:#ffe86a;text-shadow:0 3px 8px #000c;font-size:clamp(28px,8vw,48px);font-weight:900;position:absolute;top:55%;left:50%;transform:translate(-50%)}.fg-action-btn{color:#0000;cursor:pointer;z-index:301;background:0 0;border:none;border-radius:24px;width:35%;height:7%;font-size:0;position:absolute;top:67%;left:50%;transform:translate(-50%)}@media (width<=900px){.quick-config{grid-template-columns:1fr}.help-header{grid-template-columns:1fr 40px}.help-tabs{order:3;grid-column:1/-1}.symbol-grid,.payline-grid{grid-template-columns:1fr}}
