/* ---------- 2D + 3D 프레젠테이션 레이어 ---------- */
  #screenFx{position:fixed;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
  #select.screen{
    background-color:#15191f;
    background-image:
      linear-gradient(rgba(19,23,29,.90),rgba(19,23,29,.82)),
      url('../../assets/textures/asphalt-arcade.webp');
    background-size:auto,520px 520px;
    color:#f7f6f1
  }
  #select h1{color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.32)}
  #select h1 .brandMain{color:#ff5e4a}
  #select h1 .brandMain b{color:#fff}
  #select h1 .brandPrefix{color:#aeb7c2;text-shadow:none}
  #select .secLabel{color:#aeb7c2}
  #select .voicePreviewHint{color:#c8d0da}
  #select .pickTitle{background:#222832;border-color:#3b4552;color:#ff745f}
  #select .card,#select .tcard,#select .mcard,#select .ocard,#select .nameRow input,#select .nameRow button{
    background:rgba(249,248,244,.96);border-color:#d9d8d2;color:#1c2430;
    box-shadow:0 8px 24px rgba(0,0,0,.16)
  }
  #select .card,#select .tcard,#select .mcard,#select .ocard{border-radius:8px}
  #select .card,#select .tcard,#select .mcard,#select .ocard{position:relative}
  #select .card:hover,#select .tcard:hover,#select .mcard:hover,#select .ocard:hover{
    box-shadow:0 12px 30px rgba(0,0,0,.24)
  }
  #select .card.sel{border-color:#ff5e4a;box-shadow:0 0 0 4px rgba(255,94,74,.28),0 12px 30px rgba(0,0,0,.28)}
  #select .tcard.sel{border-color:#4ccfe8;box-shadow:0 0 0 4px rgba(76,207,232,.28),0 12px 30px rgba(0,0,0,.28)}
  #select .mcard.sel{border-color:#45b876;box-shadow:0 0 0 4px rgba(69,184,118,.28),0 12px 30px rgba(0,0,0,.28)}
  #select .ocard.sel{border-color:#e7ae24;box-shadow:0 0 0 4px rgba(231,174,36,.30),0 12px 30px rgba(0,0,0,.28)}
  #select .card.sel::after,#select .tcard.sel::after,#select .mcard.sel::after,#select .ocard.sel::after{
    content:'✓';position:absolute;top:7px;right:7px;width:24px;height:24px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:700;
    border:2px solid #fff;box-shadow:0 3px 9px rgba(0,0,0,.28)
  }
  #select .card.sel::after{background:#ff5e4a}
  #select .card::before{content:'🔊';position:absolute;top:8px;left:9px;font-size:13px;opacity:.58}
  #select .tcard.sel::after{background:#269fbc}
  #select .mcard.sel::after{background:#31995f}
  #select .ocard.sel::after{background:#c98c08}
  #select .card.sel canvas.face{transform:scale(1.04)}
  #select .nameRow label,#select .padHint,#select .keys{color:#aeb7c2}
  #select kbd{background:#2a313b;border-color:#53606d;color:#fff}
  .card canvas.face{display:block;padding:0;overflow:hidden;border:0;background:transparent;
    width:92px;height:92px;border-radius:12px;box-shadow:0 5px 12px rgba(16,24,32,.12),inset 0 0 0 1px rgba(28,36,48,.08)}
  .tcard canvas{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

  /* 시스템/사용자 테마 모두에서 카드와 안내 문구가 배경 대비를 유지한다. */
  html[data-ui-theme="dark"] #select .selectHeader,
  html[data-ui-theme="dark"] #select .selectFooter{background:rgba(20,26,33,.95);border-color:#39434e;color:#edf2f6}
  html[data-ui-theme="dark"] #select .selectProgress button{color:#9ba7b2;border-color:#46505a}
  html[data-ui-theme="dark"] #select .selectProgress button.current{color:#fff}
  html[data-ui-theme="dark"] #select .selectUtilityBar button{background:#27313b;border-color:#4b5864;color:#f5f8fa}
  html[data-ui-theme="dark"] #select .card,
  html[data-ui-theme="dark"] #select .tcard,
  html[data-ui-theme="dark"] #select .mcard,
  html[data-ui-theme="dark"] #select .ocard,
  html[data-ui-theme="dark"] #select .nameRow input,
  html[data-ui-theme="dark"] #select .nameRow button{background:rgba(36,44,53,.98);border-color:#56616c;color:#f5f7f8}
  html[data-ui-theme="dark"] #select .card h3,
  html[data-ui-theme="dark"] #select .tcard h3,
  html[data-ui-theme="dark"] #select .mcard h3,
  html[data-ui-theme="dark"] #select .ocard h3{color:#f5f7f8}
  html[data-ui-theme="dark"] #select .card .desc,
  html[data-ui-theme="dark"] #select .tcard .desc,
  html[data-ui-theme="dark"] #select .mcard .desc,
  html[data-ui-theme="dark"] #select .ocard .desc{color:#bcc6cf}
  html[data-ui-theme="dark"] #select .bar{background:#4b5661}
  html[data-ui-theme="dark"] #select .bar i{background:#d8e1e8}
  html[data-ui-theme="dark"] #select .selectStepHeading p{color:#bdc6ce}
  html[data-ui-theme="dark"] #select .selectStepActions .secondary,
  html[data-ui-theme="dark"] #select .startActions .secondary{background:#27313b;border-color:#56616c;color:#f5f7f8}

  html[data-ui-theme="light"] #select.screen{background-color:#eef1f0;background-image:linear-gradient(rgba(246,244,238,.92),rgba(231,235,236,.86)),url('../../assets/textures/asphalt-arcade.webp');color:#1c2430}
  html[data-ui-theme="light"] #select h1{color:#1c2430;text-shadow:none}
  html[data-ui-theme="light"] #select h1 .brandMain b{color:#1c2430}
  html[data-ui-theme="light"] #select h1 .brandPrefix,
  html[data-ui-theme="light"] #select .secLabel{color:#59646d}
  html[data-ui-theme="light"] #select .selectStepHeading p,
  html[data-ui-theme="light"] #select .voicePreviewHint,
  html[data-ui-theme="light"] #select .nameRow label,
  html[data-ui-theme="light"] #select .padHint{color:#626b72}

  #hud::before{content:'';position:absolute;inset:0;pointer-events:none;
    box-shadow:inset 0 0 100px rgba(7,10,14,.18)}
  .hudBox{color:#f8fafc;background:rgba(17,22,29,.74);border:1px solid rgba(255,255,255,.16);
    border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.20);backdrop-filter:blur(8px)}
  #trackRibbon{position:absolute;top:16px;left:210px;min-width:190px;height:54px;padding:8px 15px 8px 18px;
    color:#fff;background:linear-gradient(90deg,rgba(17,22,29,.92),rgba(17,22,29,.48));
    border-left:4px solid #ff5e4a;clip-path:polygon(0 0,100% 0,92% 100%,0 100%);
    text-shadow:0 2px 6px rgba(0,0,0,.45)}
  #trackRibbon small{display:block;font-size:9px;font-weight:700;color:#ffcc52;line-height:1.15}
  #trackRibbon strong{display:block;font-family:'Jua';font-size:20px;line-height:1.2;white-space:nowrap}
  #driverHud{position:absolute;left:204px;bottom:20px;width:238px;height:92px;display:flex;align-items:center;
    background:rgba(17,22,29,.76);border:1px solid rgba(255,255,255,.16);border-left:4px solid #ff5e4a;
    color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.25);backdrop-filter:blur(8px);
    overflow:hidden;transform:skewX(-4deg)}
  #driverHud::after{content:'';position:absolute;right:-15px;top:-35px;width:78px;height:150px;
    background:rgba(255,94,74,.12);transform:rotate(22deg)}
  #driverPortrait{width:92px;height:92px;flex:none;transform:skewX(4deg)}
  .driverCopy{position:relative;z-index:1;min-width:0;padding:8px 10px 8px 2px;transform:skewX(4deg)}
  .driverCopy small{display:block;color:#ffcc52;font-size:9px;font-weight:700}
  .driverCopy strong{display:block;font-family:'Jua';font-size:24px;line-height:1.15;white-space:nowrap}
  .driverCopy span{display:inline-block;margin-top:3px;color:#b9c7d6;font-size:10px;font-weight:700}
  #driverHud.boost{border-left-color:#4ce8ff;box-shadow:0 0 28px rgba(76,232,255,.30)}
  #driverHud.drift{border-left-color:#ffcc52;box-shadow:0 0 28px rgba(255,204,82,.26)}
  #driverHud.danger{border-left-color:#ff4262;animation:driverHit .16s linear 2}
  @keyframes driverHit{50%{transform:skewX(-4deg) translateX(-5px)}}

  #modeBox{border-left:3px solid #ff5e4a}
  #lapBox{border-left:3px solid #ffcc52}
  #rankBox,#rankBox2{background:rgba(17,22,29,.80);border-top:3px solid #ff5e4a;
    color:#ff674f;min-width:104px;text-align:center}
  #timeBox{border-right:3px solid #4ce8ff}
  #itemBox,#p2ItemBox{background:rgba(17,22,29,.76);border-color:rgba(255,255,255,.22)}
  .itemSlot{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
  .itemSlot.filled{background:rgba(13,18,25,.94)}
  #speedBox,#p2SpeedBox{--speed-angle:0deg;bottom:18px;right:18px;width:126px;height:126px;padding:0;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;
    background:conic-gradient(from -150deg,#4ce8ff 0deg,var(--speed-angle),rgba(255,255,255,.12) var(--speed-angle),300deg,transparent 300deg)}
  #speedBox::before,#p2SpeedBox::before{content:'';position:absolute;inset:8px;border-radius:50%;background:rgba(13,18,24,.90);
    box-shadow:inset 0 0 22px rgba(0,0,0,.45)}
  #speedVal,#p2SpeedVal,#speedBox small,#p2SpeedBox small{position:relative;z-index:1}
  #speedVal,#p2SpeedVal{font-size:42px;color:#fff;text-shadow:0 0 16px rgba(76,232,255,.34)}
  #speedBox small,#p2SpeedBox small{color:#9eb0c2}
  #speedBox .speedPlayer,#p2SpeedBox .speedPlayer{position:absolute;top:17px;font-size:10px;font-weight:800;color:#4ce8ff;letter-spacing:.08em}
  #p2SpeedBox .speedPlayer{color:#5df08a}
  body.split-wide #speedBox{right:calc(50% + 18px)}
  body.split-wide #p2SpeedBox{right:18px}
  body.split-tall #speedBox{right:18px;bottom:calc(50% + 18px)}
  body.split-tall #p2SpeedBox{right:18px;bottom:18px}
  #driftMeter{bottom:154px;right:21px;width:120px;height:10px;background:rgba(17,22,29,.72);
    border:1px solid rgba(255,255,255,.22)}
  #minimap,#minimap2{background:rgba(17,22,29,.72);border:1px solid rgba(255,255,255,.18);
    box-shadow:0 8px 24px rgba(0,0,0,.22);backdrop-filter:blur(6px)}
  #worldBox{bottom:198px;background:rgba(17,22,29,.72)}
  #audioBox{left:456px;background:rgba(17,22,29,.72)}
  #audioBox label,#audioBox small,#modeBox small,#worldBox small,#koBox small,#lapBox small,#timeBox small,
  #rankBox small,#rankBox2 small,#p2Box small{color:#9eb0c2}
  #padHud{background:rgba(17,22,29,.72);border:1px solid rgba(255,255,255,.14)}
  #toast{padding:7px 14px;background:rgba(17,22,29,.62);border-radius:6px}

  @media (max-width:900px){
    #trackRibbon{top:76px;left:110px;min-width:160px}
    #driverHud{left:154px;width:214px}
    #minimap{width:126px;height:126px}
    #worldBox{bottom:156px}
    #audioBox{display:none}
  }
  @media (max-width:640px){
    #select.screen{overflow-x:hidden;padding-left:8px;padding-right:8px}
    #select h1{font-size:clamp(30px,10vw,42px);text-align:center}
    #select .nameRow{width:100%;padding:0 4px;gap:8px}
    #select .nameRow label{justify-content:center}
    #select .voicePreviewHint{max-width:calc(100vw - 24px);line-height:1.45;white-space:normal}
    #select .playerPick,#select .charGrid,#select .kartGrid,#select .trackGrid,#select .modeGrid,#select .optionGrid{width:100%;max-width:100%}
    #select .charGrid{gap:8px;padding:0 2px}
    #select .kartGrid{gap:8px;padding:0 2px}
    #select .kartCard{width:min(168px,calc(50% - 6px))}
    #select .kartGarage{grid-template-columns:104px 1fr;width:calc(100% - 4px);padding:10px;gap:10px}
    #select .kartGarageVisual{height:92px}#select .kartGarageVisual .kartModel{transform:scale(.73)}
    #select .kartGarageCopy h3{font-size:18px}.kartPerformance{grid-column:1/-1;grid-template-columns:repeat(2,1fr)}
    #select .card{width:min(148px,calc(50% - 6px));padding-left:7px;padding-right:7px}
    #select .trackGrid,#select .modeGrid,#select .optionGrid{padding-left:4px;padding-right:4px;gap:8px}
    #select .tcard,#select .mcard{width:min(200px,calc(50% - 6px))}
    #trackRibbon{top:70px;left:10px;height:44px;min-width:144px;padding:6px 12px}
    #trackRibbon strong{font-size:16px}
    #modeBox,#worldBox,#audioBox,#padHud{display:none}
    #lapBox{top:10px;left:10px;font-size:17px;padding:6px 10px}
    #rankBox{top:10px;font-size:24px;min-width:80px;padding:5px 8px}
    #timeBox{top:10px;right:10px;font-size:13px;padding:6px 9px}
    #itemBox{top:auto;bottom:118px;left:10px;width:142px;height:50px;padding:4px;align-items:center}
    #itemBox::after,#p2ItemBox::after,.itemSlot small{display:none}
    .itemSlot{height:40px}
    #minimap,#minimap2{left:10px;bottom:10px;width:98px;height:98px;border-radius:8px}
    body.split-tall #minimap{bottom:calc(50% + 10px)}
    body.split-tall #minimap2{bottom:10px}
    #driverHud{left:114px;bottom:10px;width:174px;height:70px}
    #driverPortrait{width:70px;height:70px}
    .driverCopy strong{font-size:19px}
    #speedBox,#p2SpeedBox{width:94px;height:94px;right:10px;bottom:10px}
    #speedBox::before,#p2SpeedBox::before{inset:6px}
    #speedVal,#p2SpeedVal{font-size:31px}
    #speedBox .speedPlayer,#p2SpeedBox .speedPlayer{top:10px;font-size:8px}
    body.split-wide #speedBox{right:calc(50% + 10px)}
    body.split-wide #p2SpeedBox{right:10px}
    body.split-tall #speedBox{right:10px;bottom:calc(50% + 10px)}
    body.split-tall #p2SpeedBox{right:10px;bottom:10px}
    #driftMeter{right:12px;bottom:112px;width:90px}
    #wrongWay{font-size:26px;padding:10px 18px}
    #count{font-size:96px}
    #actionCam{border-width:2px}
    .actionCamTop,.actionCamBottom{padding:4px 7px}
    .actionCamTop b{font-size:13px}
    .actionCamBottom{font-size:9px}
    .recPanel{min-width:0;width:92vw;padding:20px}
  }
  body.split-wide #audioBox,body.split-tall #audioBox,
  body.split-wide #driverHud,body.split-tall #driverHud,
  body.split-wide #trackRibbon,body.split-tall #trackRibbon{display:none}
  body.split-tall #itemBox{top:76px;bottom:auto;left:50%;transform:translateX(-50%)}
  body.split-tall #p2ItemBox{top:calc(50% + 76px);bottom:auto;left:50%;right:auto;transform:translateX(-50%)}
  body.split-tall #p2Box{top:calc(50% + 10px);left:10px;right:auto;min-width:0;padding:6px 9px;text-align:left}
  body.split-tall #p2Box #p2Val{display:none}
  body.split-tall #p2Box b{margin-top:0}
  body.split-tall #driftMeter{bottom:calc(50% + 86px)}
  @media (max-width:640px){
    body.split-tall #itemBox{top:70px}
    body.split-tall #p2ItemBox{top:calc(50% + 72px);width:142px;height:50px;padding:4px;align-items:center}
    body.split-tall #speedBox{bottom:calc(50% + 8px)}
    body.split-tall #driftMeter{bottom:calc(50% + 112px)}
  }