/* ---------- 카운트다운 / 결과 / 일시정지 ---------- */
  #count{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
    z-index:15;pointer-events:none;font-family:'Jua';font-size:150px;color:#fff;
    text-shadow:0 4px 0 rgba(0,0,0,.25)}
  /* 🏆 시상식 오버레이 — 3D 시상대를 가리지 않는 화면 위 순위 표시 */
  #ceremony{position:fixed;inset:0;z-index:15;pointer-events:none}
  #ceremony::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
    background:radial-gradient(ellipse 48% 62% at 50% 53%,rgba(7,16,28,.03) 24%,rgba(7,16,28,.16) 62%,rgba(4,10,18,.48) 100%);
    transition:opacity .8s ease}
  #ceremony:not(.hidden)::before{opacity:1}
  #ceremonyRank{position:absolute;top:44px;left:50%;transform:translateX(-50%);
    font-size:42px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.28);white-space:nowrap;
    padding:7px 18px 9px;border-radius:16px;background:rgba(13,21,31,.30);
    border:1px solid rgba(255,255,255,.10);box-shadow:0 6px 22px rgba(0,0,0,.12);
    backdrop-filter:blur(3px);
    opacity:0}
  #ceremony.showBtn #ceremonyRank{opacity:1;animation:cerPop .5s ease}
  @keyframes cerPop{0%{transform:translateX(-50%) scale(.6);opacity:0}
    70%{transform:translateX(-50%) scale(1.08)}100%{transform:translateX(-50%) scale(1);opacity:1}}
  #ceremonyPanel{position:absolute;right:clamp(36px,4vw,56px);top:110px;background:rgba(20,26,36,.76);
    border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px 14px;color:#fff;font-size:13px;backdrop-filter:blur(4px);
    max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px);overflow:hidden;display:flex;flex-direction:column;
    opacity:0;transition:opacity .5s}
  #ceremony.showBtn #ceremonyPanel{opacity:1}
  #ceremonyList{display:flex;flex-direction:column;gap:5px;min-width:200px;min-height:0;overflow-y:auto;
    overscroll-behavior:contain;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
  #ceremony.showBtn #ceremonyList{pointer-events:auto}
  #ceremonyList .row{display:flex;gap:8px;align-items:center}
  #ceremonyList .row.me{color:#ffd23f;font-weight:700}
  #ceremonyList .rank{font-family:'Jua';width:20px;text-align:right;color:#ffd23f}
  #ceremonyList .cerFace{width:34px;height:34px;flex:none;border-radius:8px;background:#fff;box-shadow:0 2px 7px rgba(0,0,0,.25)}
  #ceremonyList .who{flex:1}
  #ceremonyList .t{font-variant-numeric:tabular-nums;color:#c9ced6;font-size:12px}
  #ceremonyBest{margin-top:8px;font-size:12px;color:#c9ced6;text-align:right}
  #ceremonyActions{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);display:flex;gap:10px;
    align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .4s}
  #ceremonyActions button{border:none;border-radius:12px;padding:12px 24px;color:#fff;cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.3);white-space:nowrap}
  #ceremonyRetry{font-size:19px;background:var(--accent)}
  #ceremonyHome,#ceremonyRecords{font-size:16px;background:rgba(28,32,40,.82)}
  #ceremonyActions button:hover{transform:translateY(-2px)}
  #ceremonySaveRecording{background:#267a52}
  #ceremonySaveRecording[aria-disabled="true"]{opacity:.55;cursor:wait}
  #ceremonyActions button:focus-visible{outline:3px solid #63e5ff;outline-offset:3px}
  #ceremony.showBtn #ceremonyActions{opacity:1;pointer-events:auto}
  @media(max-width:640px){#ceremonyPanel{right:18px}}
  @media(max-width:640px){#ceremonyActions{bottom:18px;width:calc(100% - 24px);gap:7px;flex-wrap:wrap}#ceremonyActions button{padding:10px 15px}}
  @media(orientation:landscape) and (max-height:600px){
    #ceremonyRank{top:14px;font-size:30px;padding:4px 13px 6px;border-radius:13px}
    #ceremonyPanel{top:82px;padding:7px 10px;font-size:11px;max-height:calc(100vh - 158px);max-height:calc(100dvh - 158px)}
    #ceremonyList{gap:2px;min-width:200px}
    #ceremonyList .row{gap:6px;min-height:22px}
    #ceremonyList .rank{width:16px}
    #ceremonyList .cerFace{width:22px;height:22px;border-radius:6px}
    #ceremonyList .t{font-size:10px}
    #ceremonyBest{margin-top:4px;font-size:10px}
    #ceremonyActions{bottom:8px;gap:7px}
    #ceremonyActions button{padding:7px 14px}
    #ceremonyRetry{font-size:16px}
    #ceremonyHome,#ceremonyRecords{font-size:14px}
  }
  /* 이름 입력 + 기록 보기 */
  .nameRow{display:flex;gap:14px;align-items:center;justify-content:center;margin:10px 0 2px;flex-wrap:wrap}
  .nameRow label{font-size:14px;color:#6b6a63;display:flex;gap:8px;align-items:center}
  .nameRow input{font-family:inherit;font-size:15px;padding:7px 12px;width:130px;
    border:2px solid var(--line);border-radius:9px;background:#fff;outline:none}
  .nameRow input:focus{border-color:var(--accent)}
  .nameRow button{font-family:inherit;font-size:14px;padding:8px 16px;border:2px solid var(--line);
    border-radius:9px;background:#fff;cursor:pointer}
  .nameRow button:hover{border-color:var(--accent)}
  #records{background:rgba(28,36,48,.8);z-index:40;pointer-events:auto}
  .recPanel{background:var(--paper);border-radius:16px;padding:26px 30px;min-width:520px;max-width:86vw;
    max-height:78vh;display:flex;flex-direction:column;gap:12px}
  .recPanel h2{font-size:26px}
  #recordsBody{overflow-y:auto;flex:1}
  .recTable{border-collapse:collapse;font-size:13px;width:100%}
  .recTable th{font-size:12px;color:#8a887f;font-weight:600;text-align:left;padding:4px 10px;border-bottom:2px solid var(--line)}
  .recTable td{padding:6px 10px;border-bottom:1px solid var(--line)}
  .recTable tr.best td{color:#b8860b;font-weight:700}
  .recEmpty{color:#8a887f;font-size:14px;text-align:center;padding:26px 0}
  .recBtns{display:flex;justify-content:space-between;align-items:center}
  .recBtns #recordsClose{font-size:16px;padding:10px 34px;border:none;border-radius:10px;
    background:var(--ink);color:#fff;cursor:pointer}
  .recBtns #recordsClear{font-size:13px;padding:8px 14px;border:1px solid var(--line);border-radius:8px;
    background:#fff;color:#a33;cursor:pointer}
  #pause{background:rgba(28,36,48,.7);color:#fff;font-family:'Jua';font-size:40px;letter-spacing:4px}
  #pause p{font-size:15px;font-family:'IBM Plex Sans KR';margin-top:10px;color:#cfd6df;letter-spacing:0}
  #photo{position:fixed;inset:0;z-index:25;pointer-events:none;border:18px solid rgba(255,255,255,.28);
    color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5);font-family:'Jua';letter-spacing:2px}
  #photo span{position:absolute;left:24px;top:22px;font-size:28px}
  #photo small{position:absolute;right:24px;bottom:22px;font-family:'IBM Plex Sans KR';font-size:13px;letter-spacing:0}
  #thunderFx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;
    background:
      radial-gradient(circle at 50% 42%,rgba(255,255,255,1),rgba(213,244,255,.88) 22%,rgba(105,142,255,.48) 58%,rgba(40,54,120,.18) 82%);
    mix-blend-mode:screen;opacity:0}
  #thunderFx::before,#thunderFx::after{content:"";position:absolute;left:50%;top:50%;
    background:linear-gradient(180deg,#fff 0%,#f9ff91 45%,#8deaff 100%);
    filter:drop-shadow(0 0 12px #fff) drop-shadow(0 0 34px #8deaff) drop-shadow(0 0 70px #637cff);
    opacity:0;transform-origin:50% 0}
  #thunderFx::before{width:min(43vw,520px);height:118vh;transform:translate(-48%,-54%) rotate(5deg);
    clip-path:polygon(51% 0,77% 0,60% 31%,86% 31%,43% 100%,54% 54%,24% 54%)}
  #thunderFx::after{width:min(27vw,340px);height:72vh;transform:translate(-5%,-36%) rotate(29deg);
    clip-path:polygon(46% 0,74% 0,57% 34%,88% 34%,32% 100%,48% 57%,16% 57%)}
  #thunderFx.on{animation:thunderFlash .72s ease-out}
  #thunderFx.on::before{animation:thunderBoltMain .72s cubic-bezier(.18,.78,.3,1)}
  #thunderFx.on::after{animation:thunderBoltBranch .72s .035s cubic-bezier(.18,.78,.3,1)}
  @keyframes thunderFlash{
    0%{opacity:0}
    4%{opacity:1;background-color:rgba(255,255,255,.96)}
    13%{opacity:.24}
    20%{opacity:1;background-color:rgba(215,241,255,.82)}
    36%{opacity:.68}
    100%{opacity:0}
  }
  @keyframes thunderBoltMain{
    0%,3%{opacity:0;transform:translate(-48%,-72%) rotate(5deg) scaleY(.35)}
    7%{opacity:1;transform:translate(-48%,-54%) rotate(5deg) scaleY(1.06)}
    15%{opacity:.26}22%{opacity:1}50%{opacity:.68}100%{opacity:0;transform:translate(-48%,-51%) rotate(5deg) scaleY(1.02)}
  }
  @keyframes thunderBoltBranch{
    0%,10%{opacity:0;transform:translate(-5%,-52%) rotate(29deg) scaleY(.35)}
    15%{opacity:.92;transform:translate(-5%,-36%) rotate(29deg) scaleY(1)}
    28%{opacity:.22}38%{opacity:.82}100%{opacity:0}
  }