/* ===================================================================
   우리학교 탈출 DOOM - 둠 느낌 덧칠 (style.css 위에 덮어씁니다)
   철판 회색 · 벽돌 빨강 · 경고 호박색 · 칠판 초록
   =================================================================== */
:root{
 --steel:#26262a;--steel2:#34343a;--steel3:#4a4a52;--rivet:#6a6a72;
 --blood:#b8281c;--blood2:#7e140c;--amber:#e8a040;--gold:#ffe066;--bone:#e8dfc8;--bone2:#b9ae96;
 --chalk:#2f5a3a;--chalk2:#3f7a50;
 --leaf:#b8281c;--leaf2:#7e140c;--cream:#26262a;--paper:#1f1f23;--line:#4a4a52;--line2:#5a5a62;
 --bark:#e8dfc8;--bark2:#f2ead6;--mute:#a49a84;--sun:#e8a040;--sun2:#a86a1c;
 --berry:#d84a3a;--berry2:#ff6a5a;--mint:#3f7a50;
 --fh:"Black Han Sans","Do Hyeon","Malgun Gothic",sans-serif;
 --fu:"Do Hyeon","Black Han Sans","Malgun Gothic",sans-serif;
 --fb:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
 --sbar:64px}
html,body{background:#0d0d0f;color:var(--bone)}

/* ---------- 헤더 : 철판 ---------- */
header{background:linear-gradient(#3a3a40,#26262a);border-bottom:3px solid var(--blood);box-shadow:0 2px 0 #000}
.title{font-family:var(--fh);color:var(--bone);font-size:21px;letter-spacing:0;display:flex;align-items:center;gap:7px}
.doomtag{font-family:var(--fh);font-size:15px;padding:2px 7px 1px;border-radius:3px;color:#ffd84a;
 background:linear-gradient(#c8321c,#6e0e06);border:1px solid #ff8a4a;text-shadow:0 1px 0 #000;letter-spacing:1px}
#place{background:var(--chalk);border:2px solid var(--chalk2);color:#eaf6e8;font-family:var(--fu)}
#mini .chip{background:#1b1b1f;border:2px solid var(--steel3);color:var(--bone2)}
#mini .chip b{color:var(--gold)}
#mini .chip.who{background:#1b1b1f;border-color:var(--chalk2);color:#cfe8d0}
#mini .msn{color:var(--amber)}
.ver{border-color:var(--steel3);color:var(--bone2)}
header button{background:linear-gradient(#4a4a52,#2c2c32);color:var(--bone);border:2px solid #15151a;
 border-radius:6px;box-shadow:inset 0 1px 0 #6a6a72,0 2px 0 #000;font-family:var(--fu);font-size:14px}
header button:hover{background:linear-gradient(#5a5a62,#34343a)}
header button:active{box-shadow:inset 0 1px 0 #6a6a72;transform:translateY(2px)}
.copy{color:#7a7468}

/* ---------- 게임 화면 ---------- */
#stage,#frame,#frame.sky,#frame.indoor,#frame.sky.high{background:#000}
.clouds{display:none!important}
#game{image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair}
#labels{bottom:auto}
#sbar{position:absolute;left:0;bottom:0;z-index:4;display:block;width:100%;height:var(--sbar)}
#prompt{position:absolute;left:50%;bottom:calc(var(--sbar) + 18px);transform:translateX(-50%);z-index:7;display:none;
 font-family:var(--fu);font-size:19px;color:var(--gold);white-space:nowrap;pointer-events:none;
 background:#000000a8;border:2px solid #ffe06655;border-radius:6px;padding:6px 14px 5px;
 text-shadow:0 2px 0 #000}
#msg{position:absolute;left:12px;top:58px;z-index:7;max-width:70%;pointer-events:none;opacity:0;transition:opacity .25s;
 font-family:var(--fu);font-size:17px;color:#ff7a5a;text-shadow:2px 2px 0 #000,-1px -1px 0 #000}
#msg.on{opacity:1}
#notice{top:12px;bottom:auto;background:#18181cee;color:var(--gold);border:2px solid var(--blood);border-radius:6px;
 font-family:var(--fu);font-size:16px;white-space:normal;text-align:center;line-height:1.4;max-width:min(680px,92%);
 box-shadow:0 4px 0 #000,0 0 24px #b8281c44}
body.overlay #notice{top:12px}
body:not(.overlay).small #notice{top:8px;bottom:auto}
#rotate{background:var(--steel);border-color:var(--steel3)}
#rotate .tx{color:var(--bone)}
#sysmsg .sbox{background:var(--steel);border-color:var(--blood)}
#sysmsg b{font-family:var(--fh);color:#ff8a5a}
#sysmsg p{color:var(--bone)}
#sysmsg.info{background:#000a}

/* ---------- 1인칭 화면 위 글자 ---------- */
.lbl{transform-origin:50% 100%}
.lbl.sign{font-family:var(--fu);font-size:14px;color:#f2e2b8;background:#2a2620ee;border:2px solid #8a6a3a;border-radius:4px;
 box-shadow:0 2px 0 #000;padding:4px 9px 3px}
.lbl.sign.seen{background:#1e2a36ee;border-color:#3aa0ff;color:#cfe6ff}
.lbl.sign.clear{background:#163a22ee;border-color:#3cff6a;color:#c8ffd4}
.lbl.sign.exit{background:#4a1a10ee;border-color:#ff6a3a;color:#ffd0b0}
.lbl.sign.exit.clear{background:#163a22ee;border-color:#3cff6a}
.lbl.name{font-family:var(--fu);font-size:12.5px;background:#000000b0;color:var(--bone);border:1px solid #ffffff33;border-radius:4px}
.lbl.name.npc::before{background:#3cff6a}
.lbl.name.chest{background:#3a2a0ccc;color:var(--gold);border-color:#e8a04088}
.lbl.bubble{font-family:var(--fb);font-weight:600;background:#fffbea;color:#2a2018;border:3px solid #111;border-radius:12px}
.lbl.bubble .who{font-family:var(--fu);background:var(--chalk);color:#fff;border-color:#111}

/* ---------- 창 (철판 상자) ---------- */
.modal{background:#000000a8}
.box{background:linear-gradient(#2a2a2f,#1d1d21);color:var(--bone);border:3px solid #55555c;border-radius:8px;
 box-shadow:inset 0 0 0 2px #111,0 10px 0 #000,0 20px 50px #000c;position:relative}
.box::before,.box::after{content:"";position:absolute;top:7px;width:7px;height:7px;border-radius:50%;
 background:radial-gradient(circle at 35% 35%,#9a9aa2,#3a3a40);pointer-events:none}
.box::before{left:7px}.box::after{right:7px}
.head{border-bottom:2px solid #3a3a40}
.head b{font-family:var(--fh);color:#ff8a5a;font-weight:400}
.head button{background:#3a3a40;color:var(--bone);border-radius:5px}
.head button:hover{background:var(--blood)}
.num{background:#111;color:var(--gold);font-family:var(--fu)}
.q{color:var(--bone);font-family:var(--fb)}
.box #dialogText{color:var(--bone);font-family:var(--fb)}
.opt{background:#2c2c31;color:var(--bone);border:2px solid #4a4a52;border-radius:6px;box-shadow:0 3px 0 #000;font-family:var(--fb)}
.opt:hover:not(:disabled){border-color:var(--amber);box-shadow:0 3px 0 var(--sun2)}
.opt .no{background:var(--gold);color:#1a1a1a;font-family:var(--fu)}
.opt.right{background:#173a22;border-color:#3cff6a;color:#d4ffe0;box-shadow:0 3px 0 #0a5a22}
.opt.right .no{background:#3cff6a}
.opt.wrong{background:#3a1414;border-color:#ff4a3a;box-shadow:0 3px 0 #6a0a0a}
.opt.wrong .no{background:#ff4a3a;color:#fff}
.opt.on{background:#1e2a36;border-color:#3aa0ff;color:#d8ecff;box-shadow:0 3px 0 #0a3a6a}
.opt.on .no{background:#3aa0ff;color:#fff}
.opt.locked .tx{color:#7a7468}
.opt.locked .no{background:#4a4a52;color:#aaa}
.feed .ok{color:#5aff8a}
.feed .no2{color:#ff6a5a}
.feed .exp{color:var(--bone2)}
.feed .digit{background:#2e2410;border-color:var(--amber);color:var(--bone)}
.feed .digit b{color:var(--gold)}
.feed .hint{color:var(--mute)}
.magic{background:#241a3a;border-color:#7a5ad8;color:#ddd0ff}
.magic b{color:#fff}
.friend{background:#14263a;border-color:#3a7ac0;color:#cfe6ff}
.friend b{color:#fff}
.teamnote{background:#14263a;border-color:#3a7ac0;color:#cfe6ff}
.teamnote b{color:var(--gold)}
.multinote{background:#2e2410;border-color:var(--amber);color:var(--bone)}
.okbtn{background:linear-gradient(#d0321e,#8e1a10);color:#fff;border-radius:6px;font-family:var(--fu);font-size:17px;
 box-shadow:inset 0 1px 0 #ff8a6a,0 4px 0 #3a0804;text-shadow:0 1px 0 #000}
.okbtn:active{box-shadow:inset 0 1px 0 #ff8a6a,0 1px 0 #3a0804}
.okbtn.alt{background:linear-gradient(#f0b040,#a86a1c);color:#1a1208;box-shadow:0 4px 0 #4a2a04;text-shadow:none}
.okbtn.gray{background:linear-gradient(#4a4a52,#2c2c32);color:var(--bone);box-shadow:0 4px 0 #000}
.okbtn.danger{background:linear-gradient(#ff4a3a,#a8140a)}
.padinput,.ansinput,.sinput{background:#111114;color:var(--gold);border:3px solid #4a4a52;border-radius:6px}
.padinput:focus,.ansinput:focus,.sinput:focus{border-color:var(--amber);background:#16161a;outline:none}
.ansinput::placeholder,.sinput::placeholder{color:#6a6458}
.ansinput.right{background:#173a22;border-color:#3cff6a;color:#d4ffe0}
.ansinput.wrongin{background:#3a1414;border-color:#ff4a3a}
.padhint{color:var(--bone2)}
.rsum{color:var(--bone2)}.rsum b{color:var(--gold)}
.ritem,.eq{background:#26262b;border-color:#3a3a42;border-radius:6px}
.eq.ok{background:#16281c;border-color:#2f8a4a}
.eq.bad{background:#2e1616;border-color:#a83a2a}
.rq,.eqq{color:var(--bone)}
.rop{background:#1c1c20;color:var(--bone2)}
.rop.ok{background:#173a22;color:#c8ffd4}
.rexp{color:var(--bone2)}
.rno,.eqhead .rno{background:var(--blood);color:#fff;font-family:var(--fu)}
.rtry{border-color:#3a3a42}
.rtry.good{color:#5aff8a;border-color:#2f8a4a}.rtry.bad{color:#ff6a5a;border-color:#a83a2a}
.eop{background:#1c1c20;color:var(--bone);border-color:#3a3a42}
.eop .no{background:#3a3a42;color:var(--bone)}
.eop.sel{background:#1e2a36;border-color:#3aa0ff}.eop.sel .no{background:#3aa0ff;color:#fff}
.eop.right{background:#173a22;border-color:#3cff6a}.eop.right .no{background:#3cff6a;color:#111}
#examMsg .score{color:var(--gold)}
.qimg{border-color:#4a4a52}

/* ---------- 시작 화면 : 학교 괴담 포스터 ---------- */
#startScreen{background:radial-gradient(ellipse at 50% 35%,#4a0e08 0%,#1a0604 55%,#050505 100%)}
#startScreen::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(0deg,#0000 0 3px,#0000002a 3px 4px)}
.scard{position:relative;background:linear-gradient(#2a2a2f,#1a1a1e);border:3px solid #55555c;border-radius:8px;color:var(--bone);
 box-shadow:inset 0 0 0 2px #111,0 12px 0 #000,0 0 60px #b8281c55}
.sicon{font-size:44px;filter:drop-shadow(0 0 12px #ff4a2a)}
.stitle{font-family:var(--fh);font-size:clamp(30px,8vw,44px);line-height:1.05;margin-top:6px;letter-spacing:-.5px;
 background:linear-gradient(#ffe066 0%,#ff9a2a 45%,#c8281c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 filter:drop-shadow(0 3px 0 #2a0402) drop-shadow(0 0 1px #000)}
.stitle::after{content:"DOOM";display:block;font-size:.62em;letter-spacing:.35em;margin-top:2px;text-indent:.35em}
.ssub{color:var(--bone2);font-family:var(--fb);font-weight:600}
.slabel{color:var(--amber);font-family:var(--fu);font-size:15px}
.schip{background:#16161a;color:var(--bone2);border:2px solid #3a3a42;border-radius:6px;font-family:var(--fu)}
.schip:hover{border-color:var(--amber)}
.sradio:checked + .schip{background:var(--blood);border-color:#ff8a5a;color:#fff}
.smore{background:#16161a;color:var(--amber);border-color:#5a4a2a;border-radius:6px}
.sgo{background:linear-gradient(#d0321e,#8e1a10);color:#fff;border-radius:6px;font-family:var(--fh);font-size:21px;
 box-shadow:inset 0 1px 0 #ff8a6a,0 5px 0 #3a0804;text-shadow:0 2px 0 #000}
.sgo:hover:not(:disabled){background:linear-gradient(#e8402a,#a01e12)}
.sgo:disabled{background:#2c2c32;color:#6a6458;box-shadow:0 5px 0 #000;text-shadow:none}
.stip{color:var(--bone2);font-family:var(--fb);font-weight:600}
.stip b{color:var(--gold)}
.shelp,.sver{color:var(--mute)}
.smsg{color:#ff6a5a}
.sfs{background:#3a3a40;color:var(--bone);border-radius:5px}
.sask{background:#000a}
.sabox{background:var(--steel);border:3px solid #55555c;border-radius:8px;color:var(--bone)}
.satitle{color:var(--amber);font-family:var(--fh)}
.satext{color:var(--bone)}.satext b{color:var(--gold)}
.sno{background:#3a3a40;color:var(--bone);border-radius:6px;box-shadow:0 4px 0 #000}
.syes{background:linear-gradient(#d0321e,#8e1a10);color:#fff;border-radius:6px;box-shadow:0 4px 0 #3a0804}
.sdiff{margin-top:6px;font-size:12px;color:var(--mute);text-align:left;font-weight:600}

/* ---------- 불러오는 중 ---------- */
#loading{background:radial-gradient(ellipse at 50% 40%,#3a0a06,#050505 70%)}
#loading .lbox{background:var(--steel);border:3px solid #55555c;border-radius:8px;color:var(--bone)}
#loading .lspin{border-color:#4a4a52;border-top-color:var(--blood)}
#loading .lsub{color:var(--bone2)}

/* ---------- 전체 지도 버튼 ---------- */
#wmBtn{background:linear-gradient(#4a4a52,#2c2c32);color:var(--bone);border:2px solid #111;border-radius:6px;font-family:var(--fu);
 box-shadow:inset 0 1px 0 #6a6a72,0 2px 0 #000}
#wmBtn.on{background:var(--blood)}
.wmGoalText{background:#2e2410;border-color:var(--amber);color:var(--gold)}
.wmStat{color:var(--bone2)}.wmStat b{color:var(--bone)}
.wmRoute{color:var(--amber)}
.wmTools button{background:#2c2c32;color:var(--bone);border-color:#4a4a52}
.wmTools span{color:var(--bone2)}
.wmWrap{background:#e9e2cf;border-radius:6px}

/* ---------- 조작 버튼 (스마트폰) ---------- */
body.overlay #controls{bottom:var(--sbar);height:200px}
body.bar #controls{background:linear-gradient(#2a2a2f,#18181c);border-top:3px solid var(--blood)}
body.bar #ctrlMsg{color:var(--amber);font-family:var(--fu)}
body.bar #ctrlStat span{background:#16161a;border-color:#3a3a42;color:var(--bone2)}
body.bar #ctrlStat b{color:var(--gold)}
.round{background:#1a1a1ec8;border:3px solid #4a4a52;box-shadow:inset 0 0 0 2px #000}
.round.grab{background:#2a2a30d8;border-color:var(--amber)}
.round .w{color:#8a8478}
.round .hub{background:radial-gradient(circle at 38% 34%,#7a7a82,#3a3a42);border-color:#111}
.round.grab .hub{background:radial-gradient(circle at 38% 34%,#ffb060,#c8601c)}
.cross button{background:#1a1a1ed8;color:var(--bone2);border:2px solid #4a4a52;border-radius:6px;box-shadow:0 3px 0 #000}
.cross button:active,.cross button.held{background:#3a3a42;color:var(--gold);border-color:var(--amber)}
#acts{display:none;flex:none;align-items:flex-end;gap:12px}
body.ctrl #acts{display:flex}
body.overlay #acts{pointer-events:auto}
#acts button{touch-action:none;-webkit-tap-highlight-color:transparent;cursor:pointer;font-family:var(--fu);border:3px solid #111;color:#fff;text-shadow:0 1px 0 #000}
#e{position:static;width:calc(var(--pad)*.66);height:calc(var(--pad)*.66);border-radius:50%;
 background:radial-gradient(circle at 38% 32%,#ffd060,#c8801c);color:#1a1208;text-shadow:none;font-size:calc(var(--pad)*.22);
 box-shadow:0 4px 0 #4a2a04;border:3px solid #111}
#e:active,#e.held{background:#ffb02e;transform:translateY(3px);box-shadow:0 1px 0 #4a2a04}
body.ctrl #e{display:block}
@media (prefers-reduced-motion:reduce){ .sicon{animation:none} #msg{transition:none} }

/* ---------- 세로 화면 : 조작 버튼이 화면 밖으로 나가지 않게 ---------- */
body.bar #pads{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
body.bar .round{width:calc(var(--pad)*.9);height:calc(var(--pad)*.9)}
body.bar #e{width:calc(var(--pad)*.58);height:calc(var(--pad)*.58);font-size:calc(var(--pad)*.2)}
.scard{z-index:1}
.sask{z-index:5}
.ssub,.stip{color:var(--bone)}
.slabel{color:#ffb860}

/* ---------- 대화창 : 1인칭 화면 아래쪽 (내가 보고 있는 화면 안) ---------- */
#talk{position:absolute;left:50%;bottom:calc(var(--sbar) + 14px);transform:translate(-50%,8px);z-index:8;
 width:min(640px,calc(100% - 28px));display:none;opacity:0;pointer-events:none;
 background:linear-gradient(#24242aee,#16161aee);border:3px solid #55555c;border-radius:8px;
 box-shadow:inset 0 0 0 2px #000,0 6px 0 #000a;padding:16px 18px 13px;
 transition:opacity .18s,transform .18s}
#talk.on{display:block;opacity:1;transform:translate(-50%,0)}
#talk .who{position:absolute;left:14px;top:-14px;font-family:var(--fu);font-weight:400;font-size:15px;color:#fff;
 background:var(--chalk);border:2px solid #111;border-radius:5px;padding:3px 10px 2px}
#talk .say{display:block;font-family:var(--fb);font-weight:600;font-size:17px;line-height:1.55;color:var(--bone);word-break:keep-all}
body.small #talk{padding:13px 13px 10px}
body.small #talk .say{font-size:14.5px}
body.overlay #talk{bottom:calc(var(--sbar) + 12px);width:min(520px,calc(100% - 2*var(--pad) - 60px))}
@media (prefers-reduced-motion:reduce){ #talk{transition:none} }

/* ---------- 시작 화면 : 이어하기 안내 ---------- */
.sresume{margin:12px 0 4px;padding:10px 12px;border-radius:6px;background:#173a22;border:2px solid #3cff6a88;
 color:#d4ffe0;font-family:var(--fb);font-weight:600;font-size:13.5px;line-height:1.55;text-align:left}
.sresume b{color:#ffe066}
.sresume.fresh{background:#2e2410;border-color:#e8a04099;color:var(--bone)}