:root{--navy:#12233f;--sea:#1d3a6b;--gold:#f2b632;--ink:#0b1528;--paper:#fff8e7;--red:#e2504a;--blue:#4aa3f0;--green:#56c271}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);color:#fff;font-family:"Galmuri11","DungGeunMo","Noto Sans KR",monospace;font-size:14px;overflow:hidden;touch-action:manipulation}
.hidden{display:none!important}
.screen{height:100dvh;display:flex;flex-direction:column}
#login{align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#12233f 0 16px,#152a4b 16px 32px)}
.title-card{background:var(--navy);border:4px solid var(--gold);box-shadow:8px 8px 0 #000;padding:36px 32px;text-align:center;max-width:340px;width:88%}
.title-card .tag{color:var(--gold);letter-spacing:.3em;font-size:12px}
.title-card h1{font-size:40px;line-height:1.2;margin:14px 0 18px;text-shadow:3px 3px 0 #000}
.title-card p{color:#c9d3e6;line-height:1.7;margin:18px 0 22px}
.dice-row{display:flex;gap:10px;justify-content:center}
.small{font-size:12px;color:#ffb4b0;margin-top:10px;min-height:16px}
.btn{font-family:inherit;border:3px solid #000;background:var(--gold);color:#111;padding:8px 14px;cursor:pointer;box-shadow:3px 3px 0 #000;font-size:14px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn:disabled{background:#6b7280;color:#d1d5db;cursor:default}
.btn.big{font-size:18px;padding:12px 22px}
.btn.tiny{font-size:11px;padding:3px 7px;background:#cbd5e1;box-shadow:2px 2px 0 #000}
.btn.sell{background:#fca5a5}.btn.buy{background:#86efac}
/* pixel dice */
.pd{display:inline-block;width:44px;height:44px;background:#fff;border:3px solid #000;box-shadow:3px 3px 0 #000;
 background-image:radial-gradient(circle,#111 0 4px,transparent 4.5px);background-repeat:no-repeat}
.pd.d1{background-position:center;background-size:100% 100%}
.pd.d2{background-image:radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px);background-size:38px 38px;background-position:-9px -9px,9px 9px}
.pd.d3{background-image:radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px);background-size:38px 38px;background-position:-10px -10px,0 0,10px 10px}
.pd.d4{background-image:radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px);background-size:38px 38px;background-position:-9px -9px,9px -9px,-9px 9px,9px 9px}
.pd.d5{background-image:radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px);background-size:38px 38px;background-position:-10px -10px,10px -10px,0 0,-10px 10px,10px 10px}
.pd.d6{background-image:radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px),radial-gradient(circle,#111 0 4px,transparent 4.5px);background-size:38px 38px;background-position:-9px -11px,9px -11px,-9px 0,9px 0,-9px 11px,9px 11px}
/* game */
#hud{display:flex;align-items:center;gap:10px;background:var(--navy);border-bottom:3px solid #000;padding:7px 10px;flex-wrap:wrap}
#hud .hud-c{display:flex;gap:12px;flex:1;justify-content:center;flex-wrap:wrap}
#hud .stat b{color:var(--gold)}#hud small{color:#9fb0cf;margin-left:4px;font-size:11px}
#hName{color:var(--gold)}#hDest{font-size:12px;color:#ffe9a8}
main{flex:1;display:flex;min-height:0}
#boardWrap{flex:1;position:relative;min-width:0;background:var(--sea)}
#board{width:100%;height:100%;display:block;image-rendering:pixelated;cursor:grab}
#side{width:310px;background:var(--paper);color:#1d2330;border-left:3px solid #000;display:flex;flex-direction:column;min-height:0}
#tabs{display:flex}#tabs button{flex:1;font-family:inherit;font-size:14px;padding:9px 0;border:0;border-bottom:3px solid #000;background:#e7dcc0;cursor:pointer}
#tabs button.on{background:var(--paper);border-bottom-color:var(--paper);font-weight:bold}
#side section{padding:12px;overflow:auto;flex:1;line-height:1.6}
#side h3{font-size:18px;margin-bottom:2px}#side .sub{color:#6b7280;font-size:12px;margin-bottom:8px}
.kv{display:flex;justify-content:space-between;border-bottom:1px dashed #c9bd9c;padding:3px 0}
.meter{height:12px;border:2px solid #000;background:#fff;margin:6px 0 10px}.meter i{display:block;height:100%;background:var(--gold)}
.row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.note{font-size:12px;color:#6b7280;margin-top:10px}
.feed li,.rank li{list-style:none;border-bottom:1px dashed #c9bd9c;padding:5px 0;font-size:13px}
.rank li{display:flex;justify-content:space-between}.rank li.me{background:#fde68a}
.npc{font-size:10px;background:#94a3b8;color:#fff;padding:0 4px;margin-left:4px}
#bar{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--navy);border-top:3px solid #000;padding:8px 12px}
#hint{color:#ffe9a8;font-size:13px}
#toasts{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:6px;pointer-events:none;max-width:80%}
.toast{background:#000c;border:2px solid var(--gold);padding:6px 10px;font-size:13px;animation:pop .2s}
.toast.bad{border-color:var(--red)}.toast.good{border-color:var(--green)}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
#diceBox{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%) scale(2);pointer-events:none}
@media (max-width:760px){
  main{flex-direction:column}
  #side{width:100%;height:38dvh;border-left:0;border-top:3px solid #000}
  #hud .hud-l,#hud .hud-r{font-size:12px}
}
.btn{white-space:nowrap}
#hint{flex:1}
@media (max-width:760px){
  #hud{gap:4px 8px;padding:6px 8px}
  #hud .hud-c{order:3;flex-basis:100%;justify-content:space-between;gap:6px;flex-wrap:nowrap;font-size:13px}
  #hud .hud-r{margin-left:auto}
  #side{height:34dvh}
  .btn.big{font-size:16px;padding:10px 14px}
}