:root{
    --bg:#0d2422; --ink:#f4efe2; --sub:#a9c4bf;
    --good:#ff9b42;
    --btn:#ffd34d; --btnInk:#23351f;
    --game-scale:1;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; height:100%;}
  body{
    background:radial-gradient(120% 90% at 50% 0%, #12302e 0%, #0a1d1b 100%);
    color:var(--ink);
    font-family:'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',system-ui,sans-serif;
    display:flex; align-items:center; justify-content:center;
    min-height:100%; padding:0; overflow:hidden;
  }
  #wrap{
    width:100vw;
    height:100vh;
    position:fixed;
    inset:0;
    overflow:hidden;
  }
  #bar{
    position:fixed; top:calc(10px * var(--game-scale)); left:calc(10px * var(--game-scale)); z-index:5;
    display:flex; align-items:baseline; gap:calc(6px * var(--game-scale));
    padding:calc(6px * var(--game-scale)) calc(12px * var(--game-scale)); background:rgba(252,248,238,.92);
    color:#23351f; border-radius:calc(10px * var(--game-scale)); border:calc(2px * var(--game-scale)) solid #4e8fa8;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  #bar .lab{font-size:clamp(12px, calc(12px * var(--game-scale)), 20px); color:#5a6b66;}
  #bar .val{font-size:clamp(17px, calc(17px * var(--game-scale)), 28px); font-weight:800; line-height:1;}
  #controlPanel{
    position:fixed; top:calc(10px * var(--game-scale)); right:calc(10px * var(--game-scale)); z-index:5;
    display:flex; flex-direction:column; align-items:flex-end; gap:calc(5px * var(--game-scale));
    max-width:calc(470px * var(--game-scale));
    padding:calc(6px * var(--game-scale)) calc(12px * var(--game-scale)); background:rgba(252,248,238,.92);
    color:#23351f; border-radius:calc(10px * var(--game-scale)); border:calc(2px * var(--game-scale)) solid #4e8fa8;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
  }
  #stage{position:absolute; top:0; left:0; width:100vw; height:100vh; border-radius:0; overflow:hidden;
    box-shadow:none; background:#0d2422;}
  #cv{display:block; width:100%; height:100%;}
  #hint{text-align:right; font-size:clamp(15px, calc(15px * var(--game-scale)), 26px); color:#5a6b66; min-height:calc(20px * var(--game-scale)); white-space:nowrap;}
  #speedRow{display:flex; align-items:center; justify-content:center; gap:clamp(8px, calc(8px * var(--game-scale)), 16px); font-size:clamp(13px, calc(13px * var(--game-scale)), 22px); color:#23351f;}
  #speedRow input{width:clamp(170px, calc(170px * var(--game-scale)), 300px);}
  .overlay{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    background:rgba(8,22,21,.80); backdrop-filter:blur(2px);
    gap:calc(18px * var(--game-scale)); padding:calc(24px * var(--game-scale)); opacity:0; pointer-events:none; transition:opacity .25s;
  }
  .overlay.show{opacity:1; pointer-events:auto;}
  .title{font-size:clamp(54px, calc(54px * var(--game-scale)), 96px); font-weight:800;}
  .big{font-size:clamp(60px, calc(60px * var(--game-scale)), 108px); font-weight:800; line-height:.95;}
  .sub{font-size:clamp(20px, calc(20px * var(--game-scale)), 34px); color:var(--sub);}
  /* 점수 박스 카드 */
  .scoreCard{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:linear-gradient(180deg,#fffdf5,#fdf0d0);
    border:5px solid #f5c542; border-radius:28px;
    padding:30px 60px; box-shadow:0 12px 0 #c9982a, 0 20px 40px rgba(0,0,0,.4);
    animation:pop .4s cubic-bezier(.18,1.4,.4,1);
  }
  .scoreCard .num{font-size:96px; font-weight:900; line-height:.9; color:#e8612d;
    text-shadow:0 4px 0 rgba(0,0,0,.12);}
  .scoreCard .num .unit{font-size:46px; color:#b8742a; margin-left:4px;}
  .scoreCard .cap{font-size:26px; font-weight:800; color:#7a8a5a; letter-spacing:2px;}
  .scoreCard.strike{border-color:#34c759; box-shadow:0 12px 0 #248a3d, 0 20px 40px rgba(0,0,0,.4);}
  .scoreCard.strike .num{color:#34c759;}
  .scoreCard .strikeLabel{font-size:54px; font-weight:900; color:#34c759;
    text-shadow:0 4px 0 rgba(0,0,0,.15); animation:wiggle .5s ease-in-out 2;}
  @keyframes pop{0%{transform:scale(.4);opacity:0;}100%{transform:scale(1);opacity:1;}}
  @keyframes wiggle{0%,100%{transform:rotate(-4deg);}50%{transform:rotate(4deg);}}
  .btn{
    min-width:calc(230px * var(--game-scale)); padding:calc(20px * var(--game-scale)) calc(34px * var(--game-scale)); border-radius:calc(18px * var(--game-scale));
    background:var(--btn); color:var(--btnInk); font-size:clamp(30px, calc(30px * var(--game-scale)), 54px); font-weight:800;
    border:none; box-shadow:0 calc(6px * var(--game-scale)) 0 #c9a32f; animation:blink 1.1s ease-in-out infinite;
  }
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.5;}}
  @media (prefers-reduced-motion: reduce){.btn{animation:none;}}
  .focusable:focus-visible{outline:3px solid var(--btn); outline-offset:3px;}
  #err{display:none; padding:40px; text-align:center; color:var(--sub); font-size:16px;}