:root{
  --bg:#12141a; --panel:#1b1f27; --panel2:#232833; --line:#2f3642;
  --tx:#eef2f7; --tx2:#9aa5b4; --tx3:#6b7684;
  --pt:#ff6b35; --ok:#2dd4a7; --bad:#ff5c5c; --gold:#ffc53d; --gut:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--tx);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif}
#app{position:fixed;inset:0;display:flex;flex-direction:column;max-width:560px;margin:0 auto;
  padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
button{font:inherit;border:0;cursor:pointer;border-radius:12px;color:inherit}
.hide{display:none!important}

.top{display:flex;align-items:center;gap:10px;padding:10px var(--gut) 8px;flex:0 0 auto}
.back{width:32px;height:32px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--tx2);font-size:16px}
.cash{flex:1;min-width:0}
.cash b{display:block;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.cash span{display:block;font-size:11.5px;color:var(--ok);font-weight:700;margin-top:1px}
.grade{flex:0 0 auto;padding:6px 11px;border-radius:999px;font-size:11.5px;font-weight:800;
  background:linear-gradient(135deg,#ffd76b,#ff9a3d);color:#3a2400}

/* 마당 */
.yard{flex:1;position:relative;margin:0 var(--gut);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#2b3340 0%,#232a35 40%,#4a3d2c 40.5%,#33291d 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:34px}
.sky{position:absolute;left:0;right:0;top:0;height:41%;
  background:radial-gradient(120% 90% at 50% 100%, rgba(255,200,140,.16), transparent 70%)}
.pilebox{position:absolute;top:12px;left:14px;right:14px;z-index:3}
.pilenum{display:flex;align-items:baseline;gap:5px;justify-content:center}
.pilenum b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.pilenum span{font-size:11.5px;color:var(--tx3)}
.pilebar{height:6px;border-radius:3px;background:rgba(0,0,0,.35);margin-top:6px;overflow:hidden}
.pilebar i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--ok),var(--gold) 65%,var(--bad));transition:width .25s}
.chokemsg{text-align:center;font-size:11px;color:var(--bad);font-weight:700;margin-top:5px}

.pile{position:relative;z-index:2;background:transparent;width:86%;max-width:330px;height:56%;
  display:flex;align-items:flex-end;justify-content:center;transition:transform .08s}
.pile::after{content:'';position:absolute;left:8%;right:8%;bottom:-6px;height:16px;border-radius:50%;
  background:rgba(0,0,0,.35);filter:blur(5px)}
.pile:active{transform:scale(.965)}
.pile span{display:block;width:100%;height:100%;position:relative}
.pileitem{position:absolute;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
.tapinfo{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--tx3);z-index:3}
.tapinfo b{color:var(--tx2);font-weight:800}

.fx{position:absolute;inset:0;pointer-events:none;z-index:5}
.pop{position:absolute;font-weight:800;font-size:15px;color:var(--ok);pointer-events:none;
  text-shadow:0 2px 6px rgba(0,0,0,.7);animation:popup .85s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes popup{0%{opacity:0;transform:translate(-50%,0) scale(.8)}
  16%{opacity:1;transform:translate(-50%,-10px) scale(1.12)}
  100%{opacity:0;transform:translate(-50%,-62px) scale(1)}}
.chip{position:absolute;pointer-events:none;font-size:20px;animation:chip .5s ease-in forwards}
@keyframes chip{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.3) rotate(220deg)}}

/* 상점 */
.shop{flex:0 0 auto;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom))}
.shoprow{display:flex;flex-direction:column;gap:7px}
.buy{display:flex;align-items:center;gap:11px;padding:11px 12px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;width:100%;text-align:left;transition:.12s}
.buy:disabled{opacity:.42}
.buy:not(:disabled):active{transform:scale(.985);background:var(--panel2)}
.buy .e{font-size:23px;flex:0 0 auto;width:30px;text-align:center}
.buy .mid{flex:1;min-width:0}
.buy .nm{font-size:14px;font-weight:800}
.buy .nm i{font-style:normal;color:var(--tx3);font-weight:700;font-size:11.5px;margin-left:5px}
.buy .ds{font-size:11px;color:var(--tx3);margin-top:1px}
.buy .pr{flex:0 0 auto;text-align:right}
.buy .pr b{display:block;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.buy .pr span{display:block;font-size:10.5px;color:var(--ok);font-weight:700;margin-top:1px}
.buy.can .pr b{color:var(--gold)}

/* 시트 */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  display:none;align-items:flex-end;justify-content:center;z-index:60}
.sheet.on{display:flex}
.sheet-in{background:var(--panel);width:100%;max-width:560px;border-radius:20px 20px 0 0;
  padding:18px var(--gut) calc(20px + env(safe-area-inset-bottom));animation:up .24s cubic-bezier(.2,.9,.3,1)}
@keyframes up{from{transform:translateY(26px);opacity:.5}}
.apTop{text-align:center;font-size:12.5px;font-weight:800;color:var(--gold);letter-spacing:.3px}
.apItem{text-align:center;margin:10px 0 14px}
.apItem .ic{font-size:52px}
.apItem .nm{font-size:17px;font-weight:800;margin-top:4px}
.apItem .sub{font-size:11.5px;color:var(--tx3);margin-top:3px}
.q-opts{display:flex;flex-direction:column;gap:8px}
.q-opts button{padding:15px;background:var(--panel2);border:1px solid var(--line);
  font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.q-opts button.right{background:rgba(45,212,167,.22);border-color:var(--ok);color:var(--ok)}
.q-opts button.wrong{background:rgba(255,92,92,.18);border-color:var(--bad);color:var(--bad)}
.apSrc{font-size:10.5px;color:var(--tx3);margin-top:9px;text-align:center}
.verdict{margin-top:12px;padding:12px;border-radius:12px;font-size:13.5px;font-weight:700;text-align:center}
.v-ok{background:rgba(45,212,167,.18);color:var(--ok)}
.v-no{background:rgba(255,92,92,.14);color:var(--bad)}
.offMoney{font-size:30px;font-weight:800;color:var(--gold);margin:10px 0 3px}
.offSub{font-size:12.5px;color:var(--tx3);margin-bottom:16px}
.big{width:100%;padding:15px;background:var(--pt);color:#fff;font-size:15px;font-weight:800}

.toast{position:fixed;left:50%;bottom:calc(90px + env(safe-area-inset-bottom));transform:translateX(-50%);
  background:var(--tx);color:var(--bg);padding:10px 17px;border-radius:999px;font-size:12.5px;font-weight:700;
  opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:90vw;text-align:center}
.toast.on{opacity:1}
.gradeup{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.gradeup.on{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.gu-in{text-align:center;animation:gpop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes gpop{from{transform:scale(0) rotate(-30deg)}}
.gu-t{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:1px}
.gu-g{font-size:40px;font-weight:800;margin:6px 0;
  background:linear-gradient(135deg,#ffd76b,#ff9a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.gu-d{font-size:12.5px;color:var(--tx2)}