/* 먹빛 바탕 · 한지색 글자 · 1920×1080 스테이지 */
:root{
  --ink0:#0c0b09; --ink1:#16140f; --ink2:#221e17; --line:#4a4133;
  --paper:#ddd2b9; --paper2:#9b907c; --gold:#c09a5c; --seal:#9a2f22; --bad:#d9775f;
  --f-disp:"Song Myung","Gowun Batang",serif;
  --f-body:"Gowun Batang","Noto Serif KR","Apple SD Gothic Neo",serif;
  --f-brush:"Nanum Brush Script","Song Myung",cursive;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink0);color:var(--paper);font-family:var(--f-body)}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 로그인 */
.auth{min-height:100%;display:grid;place-items:center;padding:32px max(16px,env(safe-area-inset-left,0px))}
.auth-box{width:100%;max-width:380px}
.logo{font-family:var(--f-disp);font-weight:400;font-size:44px;margin:0;text-align:center;letter-spacing:.04em}
.logo span,.big span{color:var(--seal)}
.dev{text-align:center;color:var(--paper2);font-size:14px;margin:8px 0 28px}
.form{display:flex;flex-direction:column;gap:8px}
.form label{font-size:15px;color:var(--paper2);margin-top:6px}
.form small{font-size:12px;opacity:.8}
.form input{font:inherit;font-size:17px;padding:10px 12px;background:var(--ink1);color:var(--paper);border:1px solid var(--line)}
.err{color:var(--bad);font-size:14px;min-height:1.2em;margin:4px 0 0}
.primary{background:var(--paper);color:var(--ink0);border:0;padding:12px 18px;font-size:17px}
.primary:disabled{opacity:.5;cursor:wait}
.link{background:none;border:0;color:var(--paper2);text-decoration:underline;padding:8px}
.small{background:var(--ink2);color:var(--paper);border:1px solid var(--line);padding:6px 12px;font-size:18px}

/* 게임 */
.game{padding:16px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:10px;align-items:center}
.viewport{position:relative;width:100%;max-width:calc((100vh - 70px) * 16 / 9);aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line)}
.stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;font-size:22px;
  background:radial-gradient(1200px 700px at 60% 50%,#2a241b,transparent 70%),var(--ink0)}
.top{position:absolute;left:0;right:0;top:0;height:96px;display:flex;align-items:center;padding:0 72px;border-bottom:1px solid #2c271f}
.tabs{display:flex;gap:6px;isolation:isolate}
.tab{position:relative;background:none;border:0;color:var(--paper2);font-size:27px;padding:12px 30px;letter-spacing:.08em}
.tab[aria-selected="true"]{color:var(--ink0)}
.tab[aria-selected="true"]::before{content:"";position:absolute;inset:6px -6px;z-index:-1;background:var(--paper);
  clip-path:polygon(1% 18%,7% 8%,20% 12%,36% 4%,55% 10%,72% 5%,90% 11%,99% 22%,97% 48%,100% 76%,92% 90%,74% 95%,52% 88%,33% 96%,14% 90%,3% 94%,0% 70%,2% 44%)}
.who{margin-left:auto;display:flex;gap:16px;align-items:center}
.scene{position:absolute;inset:96px 0 80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px}
.big{font-family:var(--f-brush);font-weight:400;font-size:200px;margin:0;line-height:1}
.sub{color:var(--paper2);font-size:30px;margin:0;letter-spacing:.1em}
.ttl{font-family:var(--f-disp);font-weight:400;font-size:64px;margin:0}
.ph{width:1100px;height:520px;border:3px dashed var(--line);display:grid;place-items:center;text-align:center;color:var(--paper2);font-size:28px;line-height:1.8}
.wide{font-size:30px;padding:16px 60px}
.foot{position:absolute;left:72px;right:72px;bottom:24px;display:flex;justify-content:flex-end;gap:20px;align-items:center;color:var(--paper2);font-size:19px}
.note{color:var(--paper2);font-size:13px;margin:0}

/* ---------- 탐사 ---------- */
.scene.full{display:block}
.explore-cv{position:absolute;left:0;top:0;width:1920px;height:904px;display:block;outline:none}
.loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--paper2);font-size:30px;background:var(--ink0)}
.pad{position:absolute;left:0;right:0;bottom:36px;display:none;justify-content:space-between;padding:0 72px;pointer-events:none}
.pad>div{display:flex;gap:24px;pointer-events:auto}
.pad button{min-width:150px;height:150px;border-radius:50%;border:2px solid rgba(221,210,185,.35);background:rgba(12,11,9,.45);
  color:var(--paper);font-size:34px;touch-action:none;user-select:none;-webkit-user-select:none}
.pad button.on{background:rgba(221,210,185,.35)}
@media (hover:none),(pointer:coarse){.pad{display:flex}}
.ink-cv{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:50;pointer-events:none}

/* ---------- 대전 (임시 화면) ---------- */
.battle-root{position:absolute;inset:0}
.bt-idle{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:var(--paper2);font-size:30px}
.bt{position:absolute;inset:0;display:grid;grid-template-columns:420px 1fr 420px;grid-template-rows:96px 1fr 168px;
  gap:18px 48px;padding:24px 72px 28px;
  background:radial-gradient(900px 500px at 50% 40%,#2a241b,transparent 70%)}
.bt-start{grid-column:2;grid-row:1;align-self:center;display:flex;gap:20px;align-items:baseline;justify-content:center}
.bt-start b{font-family:var(--f-brush);font-weight:400;font-size:72px;line-height:1}
.bt-start span{color:var(--paper2);font-size:24px}
.bt-preemptive b{color:var(--gold)} .bt-ambushed b{color:var(--bad)}
.bt-card{grid-row:1/3;display:flex;flex-direction:column;gap:14px}
.bt-card.me{grid-column:1} .bt-card.foe{grid-column:3}
.bt-art{flex:none;height:560px;aspect-ratio:2/3;align-self:center;border:2px solid var(--line);display:flex;flex-direction:column;
  justify-content:flex-end;padding:22px;gap:4px;
  background:linear-gradient(180deg,transparent 55%,rgba(12,11,9,.9)),radial-gradient(circle at 50% 38%,var(--look,#6b6250) 0 22%,transparent 60%),var(--ink1)}
.bt-art span{font-family:var(--f-disp);font-size:44px}
.bt-art small{color:var(--paper2);font-size:18px}
.bt-bar{position:relative;height:30px;background:var(--ink2);border:1px solid var(--line)}
.bt-bar i{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width .4s}
.bt-bar.foe i{background:var(--seal)}
.bt-card.me .bt-bar em{color:var(--ink0);text-shadow:none}
.bt-bar em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:19px;color:var(--paper);text-shadow:0 1px 2px #000}
.bt-gi{display:flex;gap:8px;align-items:center}
.bt-gi i{width:26px;height:26px;border-radius:50%;border:2px solid var(--gold)}
.bt-gi i.on{background:var(--gold)}
.bt-gi em{font-style:normal;color:var(--paper2);font-size:19px;margin-left:6px}
.bt-tag{margin:0;color:var(--gold);font-size:20px}
.bt-log{grid-column:2;grid-row:2;list-style:none;margin:0;padding:24px 32px;border:1px solid #2c271f;background:rgba(12,11,9,.5);
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;font-size:25px;overflow:hidden}
.bt-log li{color:var(--paper2)} .bt-log li:last-child{color:var(--paper)}
.bt-acts{grid-column:1/4;grid-row:3;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.bt-acts button{position:relative;background:var(--ink1);color:var(--paper);border:1px solid var(--line);padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left}
.bt-acts button:not([disabled]):hover{border-color:var(--gold)}
.bt-acts button[disabled]{opacity:.38;cursor:default}
.bt-acts b{font-family:var(--f-disp);font-weight:400;font-size:32px}
.bt-acts small{color:var(--paper2);font-size:18px}
.bt-acts kbd{position:absolute;right:12px;top:10px;font:inherit;font-size:16px;color:var(--paper2)}
.bt-turn{position:absolute;left:50%;top:106px;transform:translateX(-50%);margin:0;color:var(--paper2);font-size:20px;pointer-events:none}
.bt-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:rgba(10,9,8,.82);z-index:5}
.bt-end h4{margin:0;font-family:var(--f-brush);font-weight:400;font-size:150px;line-height:1}
.bt-end.win h4{color:var(--gold)} .bt-end.lose h4{color:var(--bad)}
.bt-end p{margin:0;color:var(--paper);font-size:30px}
.bt-end .primary{font-size:28px;padding:14px 48px}

dialog{background:var(--ink1);color:var(--paper);border:1px solid var(--line);padding:24px;width:min(360px,90vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h3{margin:0 0 8px;font-family:var(--f-disp);font-weight:400;font-size:26px}
.code{font-size:26px;letter-spacing:.1em;color:var(--gold);min-height:1.3em;margin:8px 0 0;user-select:all}
.row{display:flex;gap:12px;align-items:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}