/* Rajyam UI (canvas game + DOM overlays). Touch-first: all targets >= 48px. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#1a1430;color:#fff;font:16px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}
#app{position:fixed;inset:0}
#cv{position:absolute;inset:0;display:block;touch-action:none}
button,.btn{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 16px;border-radius:14px;border:2px solid rgba(255,255,255,.18);background:#3a2f5c;color:#fff;font-weight:700;text-decoration:none;text-align:center}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(#ffb347,#e2782a);border-color:#ffd18a;color:#2a1400}
.btn.real{background:linear-gradient(#5ad0a0,#2a9a70);border-color:#9affd0;color:#032a1a}
.btn.ghost{background:transparent}
.btn.on{background:#2f6b4a;border-color:#7affb0}
.btn.sm{min-height:48px;padding:6px 12px;font-size:14px;border-radius:12px}
.btn.big{min-height:64px;font-size:22px;flex-direction:column;gap:0;width:100%}
.btn.big small{font-size:14px;font-weight:600;opacity:.8}
.btn[aria-disabled=true]{opacity:.45}
.btn svg{flex:none}
/* HUD */
#hud .top{position:absolute;left:0;right:0;top:0;display:flex;gap:8px;align-items:center;padding:8px calc(8px + env(safe-area-inset-right)) 0 calc(8px + env(safe-area-inset-left));pointer-events:none}
#hud .top>*{pointer-events:auto}
.ib{min-width:48px;height:48px;border-radius:14px;border:2px solid rgba(255,255,255,.25);background:rgba(20,14,40,.72);color:#fff;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;font-weight:700}
.ib.shop{margin-left:auto;background:rgba(120,70,20,.85)}
.chip{background:rgba(20,14,40,.72);border:2px solid rgba(255,255,255,.15);border-radius:12px;padding:8px 10px;font-weight:700;font-size:15px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip.foe{color:#ffb0a0}.chip.coinc b{color:#ffd84a}
#weap{position:absolute;left:0;right:0;bottom:0;display:flex;gap:8px;justify-content:center;padding:0 8px calc(8px + env(safe-area-inset-bottom));overflow-x:auto;pointer-events:auto;scrollbar-width:none}
.wb{position:relative;flex:none;width:92px;min-height:76px;border-radius:16px;border:3px solid rgba(255,255,255,.25);background:rgba(20,14,40,.8);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px;overflow:hidden}
.wb .wn{font-size:11px;font-weight:700;line-height:1.1;text-align:center;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb .ws{font-size:12px;font-weight:800;color:#ffe46b}
.wb.sel{border-color:#ffd84a;box-shadow:0 0 0 3px rgba(255,216,74,.35)}
.wb.off{filter:saturate(.4)}
.wb .cdv{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.6) calc(var(--cd,0)*360deg),transparent 0);pointer-events:none}
.wb.k-special{border-color:#b58aff}.wb.k-special.sel{border-color:#ffd84a}
.wb svg{position:relative}
#banner{position:absolute;left:50%;top:70px;transform:translate(-50%,-10px);background:rgba(20,14,40,.85);border:2px solid #ffd84a;border-radius:14px;padding:10px 18px;font-weight:800;font-size:20px;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
#banner.show{opacity:1;transform:translate(-50%,0)}
#banner.warn{border-color:#ffa04a;color:#ffd0a0}#banner.danger{border-color:#ff3a3a;background:rgba(120,10,10,.9)}
#tip{position:absolute;left:50%;top:124px;transform:translateX(-50%);width:min(560px,92vw);background:#fff8e0;color:#2a1a00;border-radius:16px;padding:12px 16px;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:.3s;display:flex;gap:10px;align-items:center}
#tip.show{opacity:1}
#tip .hand{flex:none;width:34px;height:34px;border-radius:50%;background:#ffb347;animation:hand 1.4s infinite}
@keyframes hand{0%{transform:translate(0,0)}50%{transform:translate(-14px,10px) scale(.85)}100%{transform:translate(0,0)}}
#toast{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);background:rgba(0,0,0,.85);padding:10px 16px;border-radius:12px;font-weight:700;opacity:0;transition:.2s;pointer-events:none;max-width:92vw;text-align:center;z-index:30}
#toast.show{opacity:1}
/* overlays */
#ov{position:absolute;inset:0;z-index:10;overflow:auto;-webkit-overflow-scrolling:touch;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));display:flex;touch-action:pan-y}
#ov.full{background:rgba(14,10,30,.78)}
#ov.center{background:rgba(14,10,30,.45);align-items:center;justify-content:center}
#ov.center.low{align-items:flex-end;background:linear-gradient(transparent 30%,rgba(14,10,30,.6))}
#ov.side{align-items:center}
.panel{background:rgba(30,22,58,.94);border:2px solid rgba(255,255,255,.15);border-radius:22px;padding:18px;width:min(560px,100%);margin:auto;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.panel.wide{width:min(1100px,100%)}
.panel.small{width:min(460px,100%)}
#ov.side .panel{margin:auto auto auto 2vw;width:min(440px,100%)}
#ov.side-left{justify-content:flex-start}
#ov.side-left .panel{margin:auto auto 0 2vw}
.panel h2{margin:0 0 8px;font-size:24px}.panel h3{margin:14px 0 8px}
.panel h2 small{font-size:14px;opacity:.7}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:8px}.phead h2{margin:0;flex:1}
.menu .logo{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.menu h1{margin:0;font-size:30px;letter-spacing:.5px;color:#ffd84a;text-shadow:0 3px 0 #7a2a1a}
.menu .logo p{margin:2px 0 0;opacity:.85}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.meta{opacity:.8;font-size:14px;margin:12px 0 0}
.coin{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#ffd84a;vertical-align:middle}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{min-width:48px;min-height:48px;border-radius:12px;border:3px solid var(--c);background:#2a2048;color:#fff;font-weight:800}
.tab.on{background:var(--c)}.tab.soon{opacity:.55}
.lvgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.lv{min-height:72px;border-radius:14px;border:2px solid rgba(255,255,255,.2);background:#3a2f5c;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lv b{font-size:24px}.lv small{font-size:12px;opacity:.85}
.lv.done{background:#2f6b4a;border-color:#7affb0}.lv.locked{opacity:.4}
.soonbox{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
canvas.wprev{width:min(100%,420px);aspect-ratio:1.6;border-radius:14px;border:2px solid rgba(255,255,255,.2);display:block;margin:8px auto}
.note{font-size:14px;opacity:.85;margin:4px 0 12px}
.bal{font-size:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.card{background:#2a2048;border:2px solid rgba(255,255,255,.12);border-radius:16px;padding:12px}
.card.own{border-color:rgba(122,255,176,.4)}.card.locked{opacity:.92}
.card p{margin:6px 0;font-size:14px}.card .stat{font-size:13px;color:#cfe0ff}
.chead{display:flex;gap:10px;align-items:center}.chead b{display:block}
.kind{display:inline-block;font-size:12px;padding:2px 8px;border-radius:8px;background:#4a3a7a;margin-top:2px}
.kind.k-special{background:#6a3aa8}.kind.k-barrier{background:#7a5530}.kind.k-auto{background:#2a5a8a}.kind.k-summon{background:#2f4f98}
.acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}
.tracks{width:100%;display:flex;flex-direction:column;gap:6px}
.track{display:flex;align-items:center;gap:8px;font-size:13px}.track>span:first-child{width:92px}
.pips{display:flex;gap:3px}.pips i{width:12px;height:12px;border-radius:3px;background:#1a1430;border:1px solid #6a5a9a}.pips i.f{background:#ffd84a}
.lvl{width:58px;opacity:.8}
.track .btn,.track .pill{margin-left:auto}
.pill{display:inline-block;padding:6px 10px;border-radius:10px;background:#4a3a7a;font-size:13px;font-weight:700}
.pill.ok{background:#2f6b4a}.pill.lock{background:#5a3a3a}.pill.warn{background:#8a5a1a;color:#ffe0a0}
.realrow{display:flex;gap:6px;width:100%}.realrow .real{flex:1}.qm{width:48px}
.box{background:#2a2048;border-radius:14px;padding:12px;margin:10px 0}.box.ok{border:2px solid #4a9a6a}
.rowsb{display:flex;justify-content:space-between;align-items:center;gap:8px}
.small{font-size:13px;opacity:.85}
.fl{display:flex;flex-direction:column;gap:4px;margin:8px 0;font-weight:700;font-size:14px}
.fl input[type=email],.fl input[inputmode=numeric]{min-height:48px;border-radius:12px;border:2px solid #6a5a9a;background:#1a1430;color:#fff;padding:8px 12px;font:inherit;user-select:text;-webkit-user-select:text}
input[type=range]{width:100%;height:48px;accent-color:#ffb347}
.msg{color:#ffd0a0;min-height:1em}
.result{text-align:center;position:relative}
.result .stamp{position:absolute;top:-18px;right:14px;transform:rotate(8deg);background:#2f9a5a;border:3px solid #bfffd0;border-radius:10px;padding:4px 12px;font-weight:900;letter-spacing:1px}
.sum{background:#2a2048;border-radius:14px;padding:10px;margin:10px 0;display:flex;flex-direction:column;gap:4px}
.sum div{display:flex;justify-content:space-between;gap:8px}.sum .tot{border-top:1px solid rgba(255,255,255,.2);padding-top:6px}
.result.lose h2{color:#ff9a8a}.why{font-size:17px}
.preview{text-align:center}.kicker{margin:0;text-transform:uppercase;letter-spacing:2px;font-size:12px;color:#ffd84a}
.finale ul{margin:6px 0 0;padding-left:20px;text-align:left}
#finroy{width:100%;height:auto}
/* dialogs */
#dlg{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
#dlg[hidden],#ov[hidden],#hud[hidden]{display:none}
.dbox{background:#231a44;border:2px solid #6a5a9a;border-radius:20px;padding:18px;width:min(440px,100%);max-height:90vh;overflow:auto}
.dbox h2{margin:0 0 8px}.dbox .price{font-size:40px;font-weight:900;color:#7affb0;margin:4px 0}
.dbox .dev{font-size:13px;background:#1a3a2a;border-radius:10px;padding:8px}
.dbtns{display:flex;gap:10px;margin-top:12px}.dbtns .btn{flex:1}
.ptab{width:100%;border-collapse:collapse;margin:8px 0}.ptab td,.ptab th{padding:6px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left}.ptab tr.me{color:#ffd84a;font-weight:800}
/* phone portrait */
body.portrait .chip{font-size:13px;padding:6px 8px}
body.portrait #hWave{display:none}
body.portrait .ib.shop span{display:none}
body.portrait .wb{width:72px;min-height:72px}
body.portrait #weap{justify-content:flex-start}
body.portrait #ov.side{align-items:flex-end}
body.portrait #ov.side .panel{margin:auto 0 0}
body.portrait .lvgrid{grid-template-columns:repeat(3,1fr)}
@media (max-width:420px){.panel{padding:14px}.menu h1{font-size:24px}.cards{grid-template-columns:1fr}}
@media (min-width:1600px){html,body{font-size:18px}.wb{width:110px;min-height:88px}}
.card .btn.real{background:transparent;color:#9affd0;border-color:#3a9a70;font-weight:700}

/* ===== v0.4 depth pass: chunky metallic "dollhouse" UI (sizes/layout unchanged; all targets stay >=48px) ===== */
:root{--metal1:#8a8fa6;--metal2:#4a4e66;--metal3:#2a2c40;--rivet:#c9cde0;--gold:#ffd84a}
.btn{background:linear-gradient(#5b5f7e,#3a3d58 55%,#2d2f46);border:3px solid #15101f;box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -3px 0 rgba(0,0,0,.35),0 3px 0 #0e0a18,0 6px 10px rgba(0,0,0,.35);text-shadow:0 2px 0 rgba(0,0,0,.55);letter-spacing:.2px}
.btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.2),inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 #0e0a18}
.btn.primary{background:linear-gradient(#ffd070,#f0932f 55%,#c8661a);border-color:#3a1c06;color:#2a1400;text-shadow:0 1px 0 rgba(255,255,255,.45);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(120,50,0,.4),0 3px 0 #3a1c06,0 6px 10px rgba(0,0,0,.35)}
.btn.real{background:linear-gradient(#7ae8b8,#34b484 55%,#1f8a62);border-color:#06301e;box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,60,30,.4),0 3px 0 #06301e,0 6px 10px rgba(0,0,0,.35);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn.ghost{background:linear-gradient(#34364e,#26283c);border-color:#15101f}
.btn.on{background:linear-gradient(#4ba878,#2f6b4a);border-color:#0c2a1a}
.ib{background:linear-gradient(#5b5f7e,#33364f);border:3px solid #15101f;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 3px 0 #0e0a18,0 5px 8px rgba(0,0,0,.35)}
.ib.shop{background:linear-gradient(#c08a4a,#8a5a26);border-color:#2a1606}
.chip{background:linear-gradient(#4a4e68,#2f3248);border:3px solid #15101f;box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 3px 0 #0e0a18;position:relative}
.chip::before,.chip::after,.wb::before,.wb::after,.panel::before,.panel::after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--rivet) 40%,#6a6e86);box-shadow:0 1px 0 rgba(0,0,0,.6)}
.chip::before{left:3px;top:3px}.chip::after{right:3px;top:3px}
.chip.coinc b{text-shadow:0 2px 0 #3a2a00;font-size:1.1em}
.chip.foe{color:#ffb0a0}
#weap{padding-top:10px;background:linear-gradient(transparent,rgba(10,6,24,.55))}
.wb{background:linear-gradient(#585c7a,#34374e 60%,#262840);border:3px solid #15101f;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.35),0 3px 0 #0e0a18,0 6px 10px rgba(0,0,0,.4)}
.wb::before{left:3px;top:3px}.wb::after{right:3px;top:3px}
.wb svg{filter:drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 1px #15101f)}
.wb.sel{border-color:var(--gold);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 0 0 3px rgba(255,216,74,.4),0 0 16px rgba(255,200,60,.55),0 3px 0 #0e0a18}
.wb.k-special{border-color:#8a6ad0}
.panel,.dbox{background:linear-gradient(#3b3f5e,#262840 35%,#1d1c34);border:4px solid #15101f;box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 0 0 3px #50557a,0 8px 0 rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.55)}
.panel{position:relative}.panel::before{left:8px;top:8px}.panel::after{right:8px;top:8px}
.panel h2,.dbox h2{text-shadow:0 2px 0 rgba(0,0,0,.6)}
.menu h1{color:#ffd84a;-webkit-text-stroke:2px #3a1408;paint-order:stroke fill;text-shadow:0 4px 0 #7a2a1a,0 8px 14px rgba(0,0,0,.5)}
.box,.card,.sum{background:linear-gradient(#2c2f4a,#232540);border:2px solid #15101f;box-shadow:inset 0 2px 0 rgba(255,255,255,.1)}
.card.own{border-color:#3a8a5a}
.lv{background:linear-gradient(#4c5070,#33364f);border:3px solid #15101f;box-shadow:inset 0 2px 0 rgba(255,255,255,.2),0 3px 0 #0e0a18}
.lv.done{background:linear-gradient(#4ba878,#2f6b4a)}
.tab{border:3px solid #15101f;box-shadow:0 3px 0 #0e0a18,inset 0 2px 0 rgba(255,255,255,.2)}
#banner{background:linear-gradient(#4a4e68,#2a2c44);border:3px solid #15101f;box-shadow:inset 0 0 0 2px #ffd84a,0 6px 12px rgba(0,0,0,.45)}
#tip{border:3px solid #15101f;box-shadow:0 5px 0 rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.4)}
canvas.wprev{border:4px solid #15101f;box-shadow:0 0 0 2px #50557a,0 6px 12px rgba(0,0,0,.4)}
input[type=range]{accent-color:#ffb347}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:none}}