:root{
    --bg:#0a0e0a; --fg:#33ff66; --dim:#1f7a3c; --sys:#7fd0ff;
    --warn:#ff5544; --item:#ffd24a; --room:#67e8f9; --gold:#ffd700;
    --panel:#0e160e;
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  html,body{ margin:0; height:100%; background:var(--bg); }
  body{
    font-family:"D2Coding","SFMono-Regular",Menlo,Consolas,"Courier New",monospace;
    color:var(--fg); display:flex; justify-content:center;
    overflow:hidden;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }
  /* 토스 TDS Provider가 body에 기본 텍스트색(#212529 진회색)을 주입해서,
     색 클래스 없는 본문(방 묘사·아이템 설명 등)이 검정 배경에 묻혀 안 보이던 문제.
     게임 컨테이너에 형광 그린을 '상속 기본색'으로 깔아 해결 — 자식은 이를 상속받고,
     색 클래스(.room/.item/.dimt 등 직접 지정)는 상속보다 우선이라 자기 색을 유지한다. */
  #app, #overlay, #adOverlay, #credits{ color:var(--fg); }
  /* 스캔라인·비네트 모두 제거(사용자: 선명 우선 + 균일 단색 배경).
     배경 얼룩/그라데이션 없이 html·body·#root 단색으로 꽉 채운다. */
  #app{
    width:100%; max-width:680px; height:100dvh; display:flex; flex-direction:column;
    padding:10px 12px 8px; position:relative; z-index:1;
  }
  header{
    border-bottom:1px solid var(--dim); padding-bottom:6px; margin-bottom:8px;
    flex:0 0 auto; display:flex; gap:8px; align-items:flex-start;
  }
  .hleft{ flex:1 1 auto; min-width:0; }
  #minimap{ flex:0 0 auto; width:104px; border:1px solid var(--dim); border-radius:5px;
    background:rgba(6,16,10,.5); padding:4px; }
  .mmtitle{ font-size:9px; color:var(--dim); text-align:center; letter-spacing:2px; margin-bottom:1px; }
  #mmbody svg{ display:block; width:100%; height:auto; max-height:98px; }
  h1{
    font-size:18px; margin:0; letter-spacing:1px;
    text-shadow:0 0 2px rgba(51,255,102,.3);
  }
  h1 .roar{ filter:saturate(0); }
  .sub{ font-size:11px; color:var(--dim); margin-top:2px; }
  .bars{
    display:flex; gap:14px; font-size:12px; margin-top:6px; flex-wrap:wrap;
  }
  .bars b{ color:var(--sys); font-weight:normal; }
  .hpbar{
    display:inline-block; width:90px; height:9px; border:1px solid var(--dim);
    vertical-align:middle; margin-left:2px; background:#10210f;
  }
  .hpbar i{ display:block; height:100%; background:var(--fg); transition:width .25s ease-out; }
  .hpbar i.low{ background:var(--warn); }
  .xpbar{ display:inline-block; width:56px; height:7px; border:1px solid var(--dim); vertical-align:middle; margin-left:3px; background:#10210f; }
  .xpbar i{ display:block; height:100%; background:var(--item); transition:width .25s; }

  /* 전투 배너 (적 HP 게이지) */
  #combat{ display:none; margin-top:7px; font-size:12px; padding:5px 8px;
    border:1px solid var(--warn); border-radius:4px; background:rgba(255,85,68,.08);
    box-shadow:0 0 10px rgba(255,85,68,.2); }
  #combat .ename{ color:var(--warn); font-weight:bold; }
  #combat .ehp{ display:inline-block; width:130px; height:10px; border:1px solid var(--warn);
    vertical-align:middle; margin:0 7px; background:#210f0f; }
  #combat .ehp i{ display:block; height:100%; width:100%; background:var(--warn);
    transition:width .3s ease-out; box-shadow:0 0 6px rgba(255,85,68,.6); }

  #log{
    flex:1 1 auto; overflow-y:auto; font-size:14.5px; line-height:1.6;
    padding-right:4px; white-space:pre-wrap; word-break:break-word;
  }
  #log .ln{ animation:fade .18s ease-out; }
  @keyframes fade{ from{opacity:0; transform:translateY(2px);} to{opacity:1;} }
  .echo{ color:var(--dim); }
  .echo::before{ content:""; }
  .sys{ color:var(--sys); }
  .warn{ color:var(--warn); }
  .item{ color:var(--item); }
  .use{ color:#c792ea; font-weight:bold; }
  .room{ color:var(--room); font-weight:bold; }
  .gold{ color:var(--gold); }
  .dimt{ color:var(--dim); }
  .hr{ color:var(--dim); }

  /* 입력 영역 */
  footer{ flex:0 0 auto; padding-top:6px; }
  .quick{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
  .quick button{
    flex:1 1 auto; min-width:46px; background:var(--panel); color:var(--fg);
    border:1px solid var(--dim); padding:8px 4px; font-family:inherit; font-size:13px;
    border-radius:4px; cursor:pointer;
  }
  .quick button:active{ background:var(--dim); color:#000; }
  .quick .dir{ color:var(--room); }
  .quick .atk{ color:var(--warn); }
  .quick .hint{ color:var(--item); border-color:var(--item); }
  .quick .heal{ color:var(--fg); border-color:var(--fg); }
  .inputrow{ display:flex; gap:6px; align-items:center; }
  .prompt{ color:var(--fg); font-size:15px; }
  #cmd{
    flex:1; background:#06100a; border:1px solid var(--dim); color:var(--fg);
    font-family:inherit; font-size:15px; padding:9px 8px; border-radius:4px; outline:none;
  }
  #cmd:focus{ border-color:var(--fg); box-shadow:0 0 6px rgba(51,255,102,.3); }
  #send{
    background:var(--dim); color:#04140a; border:none; padding:9px 14px;
    font-family:inherit; font-size:14px; border-radius:4px; cursor:pointer; font-weight:bold;
  }

  /* 오버레이 (승/패) */
  #overlay{
    position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
    background:rgba(2,6,3,.92); padding:24px;
  }
  #overlay .box{ max-width:420px; text-align:center; }
  #overlay h2{ font-size:24px; margin:0 0 12px; }
  #overlay p{ font-size:14px; line-height:1.6; color:var(--sys); }
  #overlay button{
    margin-top:18px; background:var(--fg); color:#04140a; border:none; padding:11px 22px;
    font-family:inherit; font-size:15px; font-weight:bold; border-radius:4px; cursor:pointer;
  }
  #overlay .ovsub{ background:transparent; color:var(--dim); border:1px solid var(--dim); margin-left:8px; font-weight:normal; }

  /* 엔딩 크레딧: 롤 → 글리치 → 타이핑 */
  #credits{ position:fixed; inset:0; z-index:200; display:none; background:#000; overflow:hidden; cursor:pointer; }
  #credits .roll{ position:absolute; left:0; right:0; top:100%; text-align:center; padding:0 16px; line-height:1.7; color:var(--fg); }
  #credits .rolling{ animation:creditroll 15.5s linear forwards; }
  @keyframes creditroll{ from{ top:100%; } to{ top:-150%; } }
  #credits .glitch{ animation:glitchfx .26s steps(2,end) infinite; }
  @keyframes glitchfx{ 0%{transform:translate(0);filter:none} 30%{transform:translate(-5px,2px);filter:hue-rotate(90deg) saturate(4)} 55%{transform:translate(4px,-3px);filter:invert(.12)} 80%{transform:translate(-2px,-2px);filter:contrast(2)} 100%{transform:translate(0)} }
  #credits .typed{ display:none; position:absolute; left:0; right:0; top:36%; text-align:center; font-size:16px; line-height:2; color:var(--room); padding:0 18px; text-shadow:0 0 6px rgba(103,232,249,.5); }
  #credits .typed .cur{ color:var(--fg); animation:blink .6s step-end infinite; }
  #credits .skip{ position:absolute; bottom:12px; right:14px; font-size:11px; color:var(--dim); }
  @keyframes blink{ 50%{ opacity:0; } }
  /* 모의 광고 모달 (토스 미니앱 광고 SDK 자리) */
  #adOverlay{ position:fixed; inset:0; z-index:110; display:none; align-items:center; justify-content:center;
    background:rgba(0,0,0,.95); padding:24px; }
  #adOverlay .adbox{ max-width:320px; text-align:center; border:1px solid var(--dim);
    padding:28px 22px; border-radius:8px; background:var(--panel); }
  #adOverlay .adtag{ font-size:11px; color:var(--dim); letter-spacing:3px; }
  #adOverlay .adart{ font-size:52px; margin:14px 0; }
  #adOverlay .admsg{ font-size:13px; color:var(--fg); }
  #adOverlay #adTimer{ font-size:12px; color:var(--sys); margin-top:12px; }
  #adOverlay #adBtn{ display:none; margin-top:16px; background:var(--fg); color:#04140a; border:none;
    padding:10px 22px; font-family:inherit; font-size:14px; font-weight:bold; border-radius:4px; cursor:pointer; }

  /* 오프닝 인트로 (타이틀 + 스토리 타이핑 + 시작 버튼) — 엔딩 크레딧과 대칭 */
  #intro{ position:fixed; inset:0; z-index:150; display:none; background:#0a0e0a;
    flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px 22px; }
  #intro .ititle{ font-size:30px; color:var(--fg); letter-spacing:2px; text-shadow:0 0 5px rgba(51,255,102,.45); }
  #intro .isub{ font-size:12px; color:var(--dim); letter-spacing:5px; margin-top:8px; }
  #intro .istory{ margin-top:30px; max-width:540px; font-size:15px; line-height:2; color:var(--room); min-height:170px; }
  #intro .istory .cur{ color:var(--fg); animation:blink .6s step-end infinite; }
  #intro .istart{ margin-top:24px; background:var(--fg); color:#04140a; border:none;
    padding:13px 36px; font-family:inherit; font-size:16px; font-weight:bold; border-radius:5px; cursor:pointer; letter-spacing:2px; }
  #intro .istart:active{ opacity:.8; }

  ::-webkit-scrollbar{ width:6px; }
  ::-webkit-scrollbar-thumb{ background:var(--dim); border-radius:3px; }