.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;font-family:Nunito,system-ui,sans-serif;color:#eef1ff}.screen.visible{display:flex}#hud{position:absolute;top:0;left:0;right:0;height:60px;display:none;align-items:center;gap:6px;padding:8px 10px max(8px,env(safe-area-inset-top,8px)) 10px;padding-top:max(8px,env(safe-area-inset-top,8px));font-family:Nunito,system-ui,sans-serif;z-index:5}#hud.visible{display:flex}.hud-chip{display:flex;align-items:center;gap:5px;background:#100b26d1;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px 10px;font-weight:800;font-size:13px;color:#eef1ff;white-space:nowrap}.hud-chip .hint{font-size:10px;font-weight:700;color:#9aa3c0}.hud-spacer{flex:1}.icon-btn{display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:#100b26d1;color:#eef1ff;font-size:16px;cursor:pointer;padding:0;line-height:1}.icon-btn:active{transform:scale(.92)}#pity{flex-direction:column;gap:2px;padding:4px 9px}#pity .pips{display:flex;gap:3px}#pity .pip{width:9px;height:9px;border-radius:50%;background:#ffffff29;border:1px solid rgba(255,255,255,.2);transition:background .15s}#pity .pip.full{background:#ffd66e;box-shadow:0 0 6px #ffd66e}#pity.charged{border-color:#ffd66e;background:#402c04d9;animation:pityPulse .9s ease-in-out infinite}#pity .charge-label{display:none;color:#ffd66e;font-size:10px;font-weight:800;letter-spacing:.05em}#pity.charged .charge-label{display:inline}@keyframes pityPulse{0%,to{box-shadow:0 0 4px #ffd66e66}50%{box-shadow:0 0 14px #ffd66ee6}}.panel{margin-top:max(76px,env(safe-area-inset-top,0px) + 64px);width:min(88%,336px);background:linear-gradient(180deg,#1e163ef5,#140e2ef7);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:0 22px 60px #00000080}.game-title{font-family:Fredoka,Nunito,system-ui,sans-serif;font-size:40px;font-weight:600;letter-spacing:.02em;color:#ffd66e;text-shadow:0 0 22px rgba(255,214,110,.35),0 3px 0 rgba(20,14,46,.6);margin-bottom:-6px}.game-sub{font-size:12.5px;font-weight:700;color:#9aa3c0;margin-bottom:4px}.machine-card{width:100%;border:1.5px solid rgba(255,255,255,.14);background:#ffffff0d;border-radius:14px;padding:12px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;color:inherit;font:inherit;text-align:left;transition:transform .12s,border-color .12s,background .12s}.machine-card:active{transform:scale(.98)}.machine-card.locked{opacity:.55;cursor:default}.machine-card .swatch{width:40px;height:40px;border-radius:12px;flex:none;border:2px solid rgba(255,255,255,.25)}.machine-card .name{font-family:Fredoka,sans-serif;font-size:19px;font-weight:600}.machine-card .tag{font-size:11px;font-weight:700;color:#9aa3c0}.machine-card .meta{font-size:11px;font-weight:800;color:#ffd66e;margin-top:2px}.machine-card .progress{margin-top:4px;height:5px;border-radius:3px;background:#ffffff1a;overflow:hidden;width:130px}.machine-card .progress>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#ffd66e,#ff9ec4)}.machine-card .lock-note{font-size:10.5px;font-weight:700;color:#9aa3c0}.btn{border:none;border-radius:14px;background:linear-gradient(180deg,#ffd66e,#f0a840);color:#241a4d;font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:18px;padding:12px 30px;cursor:pointer;box-shadow:0 6px #b0761f}.btn:active{transform:translateY(3px);box-shadow:0 3px #b0761f}.btn.ghost{background:#ffffff14;color:#eef1ff;box-shadow:none;border:1px solid rgba(255,255,255,.18);font-size:14px;padding:9px 18px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}#screen-shelf .panel{padding-top:16px;max-height:78%}.shelf-tabs{display:flex;gap:6px}.shelf-tab{border:1px solid rgba(255,255,255,.16);background:#ffffff0f;color:#eef1ff;border-radius:999px;font-weight:800;font-size:11px;padding:5px 14px;min-height:44px;display:inline-flex;align-items:center;cursor:pointer}.shelf-tab.active{background:#ffd66e;color:#241a4d;border-color:#ffd66e}.shelf-count{font-size:12px;font-weight:800;color:#9aa3c0}#shelf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;overflow-y:auto;padding:2px}.shelf-cell{aspect-ratio:1;border-radius:12px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;position:relative}.shelf-cell canvas{width:82%;height:82%}.shelf-cell.owned{background:#ffd66e14;border-color:#ffd66e66}.shelf-cell .rar{position:absolute;top:4px;right:6px;font-size:9px;font-weight:800;letter-spacing:.04em}.rar.common{color:#b9c4e0}.rar.rare{color:#7ee0ff}.rar.legendary{color:#ffd66e}.modal-wrap{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0a071aa8;backdrop-filter:blur(3px);z-index:8}.modal-wrap.visible{display:flex}.modal{width:min(84%,300px);background:linear-gradient(180deg,#261c4cfa,#160f32fa);border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;animation:modalPop .28s cubic-bezier(.34,1.56,.64,1)}@keyframes modalPop{0%{transform:scale(.7);opacity:0}}.modal h2{margin:0;font-family:Fredoka,sans-serif;font-weight:600;font-size:24px}.modal .prize-img{width:104px;height:104px}.modal .rarity-tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.modal .sub{font-size:13px;font-weight:700;color:#c6cdea}.modal .new-tag{background:#7dffb0;color:#123324;font-size:11px;font-weight:800;border-radius:999px;padding:3px 10px;letter-spacing:.08em}.modal .coins-tag{background:#ffd66e29;color:#ffd66e;font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px}#banner{position:absolute;top:72px;left:50%;transform:translate(-50%);display:none;flex-direction:column;align-items:center;gap:6px;z-index:7;pointer-events:none}#banner.visible{display:flex}.banner-chip{background:#100b26eb;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 18px;font-weight:800;font-size:13px;color:#eef1ff;animation:bannerDrop .25s ease-out;pointer-events:auto}.banner-chip.action{border-color:#7ee0ff;color:#7ee0ff;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}@keyframes bannerDrop{0%{transform:translateY(-12px);opacity:0}}#drop-btn{position:absolute;bottom:max(88px,env(safe-area-inset-bottom,0px) + 88px);left:50%;transform:translate(-50%);display:none;border-radius:999px;border:2px solid rgba(255,255,255,.5);background:linear-gradient(180deg,#ffd66e,#f0a840);color:#241a4d;font-family:Fredoka,sans-serif;font-weight:600;font-size:16px;padding:10px 28px;min-height:48px;z-index:4;box-shadow:0 4px #b0761f}#drop-btn.visible{display:block}.hint-line{font-size:11.5px;font-weight:700;color:#9aa3c0;text-align:center;line-height:1.5}