* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #10203a;
    font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
    user-select: none; -webkit-user-select: none; touch-action: none; }
  canvas { display: block; }
  button { font-family: inherit; }
  #game { position: fixed; inset: 0; z-index: 1; touch-action: none; }

  /* ===== HUD ===== */
  #hud { position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: none;
    align-items: center; gap: 7px; padding: 8px 202px 8px 10px; pointer-events: none;
    flex-wrap: wrap; }
  body.playing #hud { display: flex; }
  .chip { color: #fff; font-weight: 900; font-size: 15px; background: rgba(24,18,40,.55);
    padding: 5px 12px; border-radius: 16px; white-space: nowrap;
    border: 1px solid rgba(255,255,255,.2); text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
  #hStage { color: #ffe28a; }
  #hudBtns { position: fixed; right: 10px; top: 8px; z-index: 6; display: none; gap: 7px; }
  body.playing #hudBtns { display: flex; }
  .iconbtn { width: 42px; height: 42px; border-radius: 12px; font-size: 19px; cursor: pointer;
    color: #fff; background: rgba(24,18,40,.6); border: 1px solid rgba(255,255,255,.28); }
  .iconbtn:active { background: rgba(255,255,255,.3); }

  /* ===== 문제 배너 ===== */
  #topui { position: fixed; left: 50%; transform: translateX(-50%); top: 46px; z-index: 5;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    pointer-events: none; width: 100%; }
  #quiz { display: none; flex-direction: column; align-items: center; gap: 6px;
    background: rgba(255,253,247,.95); border: 3px solid #f0b429; border-radius: 18px;
    padding: 10px 22px; max-width: 94vw; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
  body.quizon #quiz { display: flex; }
  #qConcept { font-size: 13px; font-weight: 800; color: #b45309; letter-spacing: .02em; }
  #qText { font-size: 27px; font-weight: 900; color: #2c1810; line-height: 1.25; text-align: center; }
  #qPic { font-size: 25px; letter-spacing: 3px; line-height: 1.15; text-align: center; max-width: 88vw; }
  #qHint { font-size: 13px; color: #6b7280; font-weight: 700; }

  /* ===== 말풍선(나레이션 자막) ===== */
  #say { display: none; background: rgba(20,14,34,.9); color: #fff; font-size: 16px; font-weight: 700;
    line-height: 1.55; padding: 11px 20px; border-radius: 16px; max-width: 88vw; text-align: center;
    border: 2px solid rgba(255,226,138,.6); }
  #say.on { display: block; }
  #say.good { border-color: #7ee08a; }
  #say.bad { border-color: #ff9a8a; }

  /* ===== 메뉴 ===== */
  .screen { position: fixed; inset: 0; z-index: 10; display: none; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px;
    background: rgba(14,10,28,.6); backdrop-filter: blur(3px); padding: 16px; }
  .screen h1 { color: #fff; font-size: 46px; font-weight: 900; text-align: center; line-height: 1.2;
    text-shadow: 3px 3px 0 #d4762a, 6px 6px 0 rgba(0,0,0,.45); }
  .screen h1 span { display: block; font-size: 14px; letter-spacing: 6px; color: #ffe28a;
    margin-top: 10px; text-shadow: 1px 1px 0 rgba(0,0,0,.6); }
  .screen h2 { color: #ffe28a; font-size: 24px; text-align: center; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
  .bigbtn { padding: 14px 34px; font-size: 18px; font-weight: 900; cursor: pointer; color: #fff;
    background: #e08a2c; border: 2px solid #8a4a10; border-bottom-width: 5px; border-radius: 8px; }
  .bigbtn:hover { background: #f2a044; }
  .graybtn { padding: 10px 20px; font-size: 14px; font-weight: bold; cursor: pointer; color: #fff;
    background: #4a5a7a; border: 2px solid #263349; border-bottom-width: 4px; border-radius: 6px; }
  .graybtn:hover { background: #5a6e96; }
  .btnrow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
  .help { color: #eee; font-size: 14px; line-height: 1.95; background: rgba(0,0,0,.42);
    padding: 12px 22px; border-radius: 10px; max-width: 92vw; text-align: center; }
  .help b { color: #ffe28a; }
  .credit { color: #cfd6dd; font-size: 12px; background: rgba(0,0,0,.4);
    padding: 6px 14px; border-radius: 20px; text-align: center; }
  #stagePick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 560px; }
  .stbtn { width: 92px; padding: 9px 4px; border-radius: 10px; cursor: pointer; font-size: 12px;
    font-weight: 800; color: #fff; background: rgba(255,255,255,.14);
    border: 2px solid rgba(255,255,255,.3); line-height: 1.35; }
  .stbtn .n { display: block; font-size: 17px; color: #ffe28a; }
  .stbtn.locked { opacity: .38; cursor: not-allowed; }
  .stbtn.cleared { background: rgba(126,224,138,.25); border-color: #7ee08a; }
  #resStats { color: #fff; font-size: 18px; font-weight: 800; text-align: center; line-height: 1.9;
    background: rgba(0,0,0,.5); padding: 14px 30px; border-radius: 14px; }
  #resStats .big { font-size: 32px; color: #ffe28a; }

  /* ===== 터치 ===== */
  /* ⚠️화면 조작 버튼은 '터치 기기 감지'에 맡기지 않는다 — 태블릿·노트북 겸용 기기에서
     감지가 어긋나면 아이는 조작할 방법이 아예 없어진다. body.pad 로 사람이 켜고 끈다. */
  #touch { display: none; }
  body.pad.playing #touch { display: block; }
  #touch .tbtn { position: fixed; z-index: 7; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5); background: rgba(24,18,40,.42); color: #fff;
    font-weight: 900; display: flex; align-items: center; justify-content: center;
    touch-action: none; -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 3px 10px rgba(0,0,0,.25); transition: transform .06s ease, background .06s ease; }
  #touch .tbtn.on { background: rgba(255,255,255,.4); transform: scale(.94); }
  /* ⚠️손가락 크기는 화면 크기와 상관없다 — 태블릿이라고 버튼이 작아지면 안 된다.
     기본을 넉넉히 잡고, 아주 좁은 화면에서만 줄인다. */
  #tLeft  { left: 20px;  bottom: 26px; width: 88px; height: 88px; font-size: 34px; }
  #tRight { left: 122px; bottom: 26px; width: 88px; height: 88px; font-size: 34px; }
  #tJump  { right: 22px; bottom: 26px; width: 104px; height: 104px; font-size: 30px;
    background: rgba(80,170,90,.52); }
  @media (max-width: 520px) {
    #tLeft  { left: 14px; bottom: 18px; width: 74px; height: 74px; font-size: 29px; }
    #tRight { left: 96px; bottom: 18px; width: 74px; height: 74px; font-size: 29px; }
    #tJump  { right: 16px; bottom: 18px; width: 86px; height: 86px; font-size: 26px; }
  }
  @media (min-width: 1000px) and (min-height: 700px) {
    #tLeft  { left: 26px;  bottom: 34px; width: 104px; height: 104px; font-size: 40px; }
    #tRight { left: 146px; bottom: 34px; width: 104px; height: 104px; font-size: 40px; }
    #tJump  { right: 28px; bottom: 34px; width: 124px; height: 124px; font-size: 34px; }
  }
  #padBtn.on { background: rgba(126,224,138,.5); border-color: #7ee08a; }
  #padToggle.on { background: #3f8a44; border-color: #276b2c; }

  #err { display: none; position: fixed; left: 10px; bottom: 10px; z-index: 99; color: #fff;
    background: #b32; padding: 8px 12px; border-radius: 6px; font-size: 13px; max-width: 90vw; }
  @media (max-width: 560px) {
    .screen h1 { font-size: 34px; }
    .chip { font-size: 11px; padding: 3px 8px; }
    .iconbtn { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
    #hud { padding-right: 168px; }
    #qText { font-size: 20px; }
    #say { font-size: 14px; }
  }