/* ---------- HUD ---------- */
  #hud{position:fixed;inset:0;pointer-events:none;z-index:10}
  .hudBox{position:absolute;background:rgba(255,255,255,.92);border-radius:10px;
    padding:8px 14px;font-weight:700}
  #modeBox{top:16px;left:16px;font-family:'Jua';font-size:18px;min-width:120px}
  #modeBox small,#worldBox small,#koBox small{font-size:11px;color:#8a887f;font-family:'IBM Plex Sans KR';font-weight:500;display:block}
  #lapBox{top:76px;left:16px;font-family:'Jua';font-size:22px}
  #lapBox small{font-size:13px;color:#8a887f;font-family:'IBM Plex Sans KR';font-weight:500;display:block}
  #rankBox{top:16px;left:50%;transform:translateX(-50%);font-family:'Jua';font-size:30px;color:var(--accent)}
  #rankBox small{font-size:12px;color:#8a887f;font-family:'IBM Plex Sans KR';font-weight:500}
  #rankBox2{top:16px;left:50%;transform:translateX(-50%);font-family:'Jua';font-size:30px;color:var(--accent)}
  #rankBox2 small{font-size:12px;color:#8a887f;font-family:'IBM Plex Sans KR';font-weight:500}
  .pTag{display:none}
  body.split-wide .pTag,body.split-tall .pTag{display:inline}
  /* 분할 화면: 순위를 각 플레이어 화면 상단 중앙에 표시 */
  body.split-wide #rankBox{left:25%}
  body.split-wide #rankBox2{left:75%}
  body.split-tall #rankBox2{top:calc(50% + 14px)}
  #timeBox{top:16px;right:16px;font-size:16px;font-variant-numeric:tabular-nums;text-align:right}
  #timeBox small{display:block;font-size:11px;color:#8a887f;font-weight:500}
  #itemBox{top:136px;left:16px;width:174px;height:72px;display:grid;grid-template-columns:repeat(3,1fr);
    gap:6px;align-items:start;justify-content:center;font-size:26px;border:2px dashed #c9c5ba;padding:6px 6px 20px}
  #itemBox.has{border:2px solid var(--accent)}
  .itemSlot{height:44px;border-radius:10px;background:rgba(238,233,221,.8);display:flex;position:relative;
    flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(216,211,198,.9);overflow:hidden}
  .itemSlot.filled{background:rgba(15,21,29,.94);border-color:var(--item-color);color:#fff;
    box-shadow:inset 0 0 0 1px var(--item-color),0 3px 10px rgba(0,0,0,.28)}
  .itemSlot.filled::before{content:'';position:absolute;inset:0;background:var(--item-color);opacity:.17}
  .itemSlot.primary{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--item-color),0 0 13px var(--item-color)}
  .itemGlyph{position:relative;z-index:1;font-size:23px;line-height:23px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.42))}
  .itemSlot small{position:relative;z-index:1;margin-top:1px;font:700 9px 'IBM Plex Sans KR';letter-spacing:.04em;color:#fff}
  #itemBox::after,#p2ItemBox::after{content:attr(data-active-name);position:absolute;left:7px;right:7px;bottom:3px;
    color:#fff;font:700 10px 'IBM Plex Sans KR';text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #worldBox{bottom:204px;left:16px;font-size:13px;min-width:170px}
  #audioBox{bottom:20px;left:204px;font-size:11px;min-width:160px;pointer-events:auto}
  #audioBox small{font-size:11px;color:#8a887f;font-family:'IBM Plex Sans KR';font-weight:500;display:block}
  #audioBox label{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:#6b6a63}
  #audioBox input{width:92px;accent-color:var(--accent)}
  #p2Box{top:136px;right:16px;font-size:13px;text-align:right;min-width:170px}
  #p2Box small{font-size:11px;color:#8a887f;font-family:'IBM Plex Sans KR';font-weight:500;display:block}
  #p2Box b{display:block;font-size:12px;color:#6b6a63;margin-top:2px}
  #p2ItemBox{top:214px;right:16px;width:174px;height:72px;display:grid;grid-template-columns:repeat(3,1fr);
    gap:6px;align-items:start;justify-content:center;font-size:26px;border:2px dashed #c9c5ba;padding:6px 6px 20px}
  #p2ItemBox.has{border:2px solid #2f9e63}
  #splitDivider{position:fixed;z-index:9;pointer-events:none;background:rgba(255,255,255,.7);box-shadow:0 0 14px rgba(0,0,0,.25)}
  body.split-wide #splitDivider{display:block !important;left:50%;top:0;width:3px;height:100%;transform:translateX(-50%)}
  body.split-tall #splitDivider{display:block !important;left:0;top:50%;width:100%;height:3px;transform:translateY(-50%)}
  #koBox{top:76px;right:16px;font-size:14px;text-align:right;min-width:160px}
  #speedBox,#p2SpeedBox{bottom:20px;right:16px;text-align:right;font-family:'Jua'}
  #speedVal,#p2SpeedVal{font-size:44px;line-height:1}
  #speedBox small,#p2SpeedBox small{font-size:12px;color:#8a887f;font-family:'IBM Plex Sans KR'}
  #driftMeter{position:absolute;bottom:86px;right:16px;width:120px;height:8px;
    background:rgba(255,255,255,.5);border-radius:4px;overflow:hidden;opacity:0;transition:opacity .2s}
  #driftMeter i{display:block;height:100%;width:0%;background:#3aa0ff;border-radius:4px}
  #minimap,#minimap2{position:absolute;bottom:20px;left:16px;width:170px;height:170px;
    background:rgba(255,255,255,.85);border-radius:12px}
  #minimap2{display:none}
  body.split-wide #minimap2{display:block;left:calc(50% + 16px)}
  body.split-tall #minimap{bottom:calc(50% + 16px)}
  body.split-tall #minimap2{display:block;bottom:16px}
  #padHud{position:absolute;top:64px;right:16px;font-size:12px;color:#fff;
    background:rgba(28,36,48,.55);padding:4px 10px;border-radius:8px;display:flex;gap:6px;align-items:center}
  #recordPanel{position:fixed;z-index:45;left:50%;bottom:18px;transform:translateX(-50%);pointer-events:auto;
    display:flex;align-items:center;gap:7px;padding:0;background:transparent;color:#fff;font-size:11px;box-shadow:none}
  #recordStatus{position:fixed;z-index:44;top:18px;right:18px;max-width:min(360px,calc(100vw - 36px));padding:7px 11px;
    border:1px solid rgba(255,255,255,.2);border-radius:9px;background:rgba(12,17,23,.84);color:#fff;
    font:700 10px/1.35 'IBM Plex Sans KR';text-align:right;box-shadow:0 4px 14px rgba(0,0,0,.24);pointer-events:none}
  #recordStatus:empty{display:none!important}
  #select:not(.hidden) ~ #recordPanel{left:auto;right:18px;top:calc(116px + env(safe-area-inset-top));bottom:auto;transform:none}
  #select:not(.hidden) ~ #recordPanel #recordStatus{display:block;top:calc(116px + env(safe-area-inset-top));right:112px}
  #gameSettings:not(.hidden) ~ #recordPanel,
  #myGarage:not(.hidden) ~ #recordPanel,
  #lanLobby:not(.hidden) ~ #recordPanel{display:none}
  body.race-finished #recordPanel{left:18px;transform:none}
  #recordPanel button,#recordPanel a{border:1px solid rgba(255,255,255,.24);border-radius:7px;padding:6px 10px;
    background:#26313d;color:#fff;font:700 11px 'IBM Plex Sans KR';text-decoration:none;cursor:pointer}
  #recordPanel.recording button{background:#d9364d;border-color:#ff8191;animation:recordPulse 1s ease-in-out infinite}
  #recordPanel a{background:#267a52}
  #recordPanel button:disabled{opacity:.5;cursor:not-allowed}
  @media(max-width:760px){
    #recordPanel{max-width:calc(100vw - 20px);flex-wrap:wrap}
    #select:not(.hidden) ~ #recordPanel{right:10px;top:calc(112px + env(safe-area-inset-top))}
    #recordStatus{top:10px;right:10px;max-width:calc(100vw - 20px);font-size:9px}
    #select:not(.hidden) ~ #recordPanel #recordStatus{top:calc(112px + env(safe-area-inset-top));right:104px;max-width:calc(100vw - 124px)}
  }
  @keyframes recordPulse{50%{box-shadow:0 0 0 4px rgba(255,70,87,.2)}}
  #attackWarn{position:absolute;top:68px;left:50%;transform:translateX(-50%) translateY(-8px);
    display:flex;align-items:center;gap:10px;font-family:'Jua';color:#fff;
    background:rgba(232,78,60,.92);border:2px solid rgba(255,255,255,.7);
    border-radius:12px;padding:8px 16px 8px 10px;text-shadow:0 2px 0 rgba(0,0,0,.25);
    box-shadow:0 4px 18px rgba(0,0,0,.3);
    opacity:0;transition:opacity .18s,transform .18s;pointer-events:none}
  #attackWarn.on{opacity:1;transform:translateX(-50%) translateY(0);animation:awShake .45s ease}
  .awFace{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;
    justify-content:center;font-size:23px;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
  .awInfo{display:flex;flex-direction:column;text-align:left;line-height:1.2;white-space:nowrap}
  .awInfo b{font-size:16px}
  .awInfo i{font-style:normal;font-size:14px;opacity:.95}
  .awRole{display:block;font-family:'IBM Plex Sans KR';font-size:9px;color:#ffdf70;font-weight:700}
  #actionCam{position:absolute;z-index:11;pointer-events:none;color:#fff;border:3px solid #ff5e4a;
    background:transparent;box-shadow:0 10px 32px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.35);
    overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
  #actionCam::before{content:'';position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 48px rgba(0,0,0,.32)}
  #actionCam.incoming{border-color:#ff4262}
  #actionCam.leader{border-color:#ffcc52}
  #actionCam.impact{border-color:#4ce8ff;animation:actionImpact .22s ease 2}
  .actionCamTop,.actionCamBottom{position:absolute;left:0;right:0;z-index:2;display:flex;align-items:center;
    justify-content:space-between;padding:6px 10px;background:rgba(12,17,23,.78);text-shadow:0 2px 5px rgba(0,0,0,.7)}
  .actionCamTop{top:0;border-bottom:1px solid rgba(255,255,255,.22)}
  .actionCamBottom{bottom:0;border-top:1px solid rgba(255,255,255,.18);font-size:11px}
  .actionCamTop span{font-size:9px;font-weight:700;color:#ffdf70}
  .actionCamTop b{font-family:'Jua';font-size:16px}
  .actionCamBottom span{color:#d8e0e8}
  .actionCamBottom b{color:#fff;font-variant-numeric:tabular-nums}
  @keyframes actionImpact{50%{transform:translateX(4px)}}
  @keyframes awShake{
    0%,100%{transform:translateX(-50%) translateY(0)}
    20%{transform:translateX(calc(-50% - 5px)) translateY(0)}
    40%{transform:translateX(calc(-50% + 5px)) translateY(0)}
    60%{transform:translateX(calc(-50% - 3px)) translateY(0)}
    80%{transform:translateX(calc(-50% + 3px)) translateY(0)}
  }
  /* 역주행 경고 — 화면 중앙에 크게 */
  #wrongWay{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);
    font-family:'Jua';font-size:44px;color:#fff;background:rgba(220,50,40,.93);
    padding:16px 38px;border-radius:16px;border:3px solid #fff;white-space:nowrap;
    text-shadow:0 3px 0 rgba(0,0,0,.3);box-shadow:0 6px 26px rgba(0,0,0,.4);
    opacity:0;pointer-events:none;transition:opacity .2s;z-index:14}
  #wrongWay.on{opacity:1;animation:wwPulse .7s ease-in-out infinite}
  @keyframes wwPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
  /* 피격 카드 피드 — 우측에 얼굴로 표시 */
  #hitFeed{position:absolute;right:16px;top:290px;display:flex;flex-direction:column;gap:8px;
    z-index:12;pointer-events:none;align-items:flex-end}
  .hitCard{display:flex;align-items:center;gap:9px;background:rgba(28,32,40,.8);
    border:2px solid rgba(255,120,90,.65);border-radius:12px;padding:8px 12px;color:#fff;
    font-size:12px;box-shadow:0 4px 14px rgba(0,0,0,.3);
    animation:hcIn .25s ease;transition:opacity .4s,transform .4s}
  .hitCard.blocked{border-color:rgba(120,200,255,.65)}
  .hitCard.out{opacity:0;transform:translateX(30px)}
  .hcFace{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
    justify-content:center;font-size:21px;border:2px solid #fff;flex:none}
  .hcItem{font-size:19px;flex:none}
  .hcVicWrap{position:relative;flex:none}
  .hcVicWrap .hcFace{animation:hcShake .4s ease 3}
  .hcVicWrap i{position:absolute;right:-7px;top:-9px;font-style:normal;font-size:16px;
    animation:hcSpin 1.1s linear infinite}
  .hitCard.blocked .hcVicWrap .hcFace{animation:none}
  .hitCard.blocked .hcVicWrap i{animation:none}
  .hcText{font-family:'Jua';line-height:1.25;text-align:left}
  .hcText b{color:#ffd23f}
  @keyframes hcIn{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
  @keyframes hcShake{0%,100%{transform:none}25%{transform:translateX(-3px) rotate(-9deg)}
    75%{transform:translateX(3px) rotate(9deg)}}
  @keyframes hcSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
  #toast{position:absolute;top:120px;left:50%;transform:translateX(-50%);
    font-family:'Jua';font-size:22px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);
    opacity:0;transition:opacity .25s}