:root{ --vw:1vw; --vh:1vh; } /* JS가 게임 화면(stage) 기준으로 덮어쓴다 */
:root{
    --void:#060a14; --panel:#0d1526; --panel2:#121c33;
    --line:rgba(140,170,255,.14);
    --ink:#dfe8ff; --ink-dim:#8fa0c4;
    --me:#3ae0ff; --foe:#ff5c6a; --foe2:#c07bff; --neu:#8a94a6;
    --gold:#ffc94d;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  /* 📱 폰 미리보기 (테스트용) — transform이 걸린 조상은 fixed 자식의 기준이 되므로 전체 UI가 프레임 안에 갇힘 */
  #stage{position:fixed; inset:0;}
  body.phone{background:#01030a;}
  body.phone #stage{
    inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
    overflow:hidden; border:10px solid #1b2436; border-radius:24px;
    box-shadow:0 0 50px rgba(0,0,0,.7), 0 0 26px rgba(58,224,255,.14);
  }
  #btnPhone{
    position:fixed; top:10px; right:10px; z-index:70; cursor:pointer;
    appearance:none; font:inherit; font-size:12px; font-weight:700; color:#dfe8ff;
    background:rgba(13,21,38,.85); border:1px solid rgba(140,170,255,.3); border-radius:999px;
    padding:7px 13px;
  }
  body.phone #btnPhone{border-color:rgba(58,224,255,.6); color:#3ae0ff;}
  #btnArt{
    position:fixed; top:10px; right:126px; z-index:70; cursor:pointer;
    appearance:none; font:inherit; font-size:12px; font-weight:700; color:#dfe8ff;
    background:rgba(13,21,38,.85); border:1px solid rgba(140,170,255,.3); border-radius:999px;
    padding:7px 13px;
  }
  html,body{height:100%; overflow:hidden; background:var(--void);}
  body{
    font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
    color:var(--ink); user-select:none; touch-action:none;
  }
  #cv{position:fixed; inset:0; width:100%; height:100%; display:block;}
  .num{font-variant-numeric:tabular-nums;}

  /* ---------- overlay screens ---------- */
  .screen{
    position:fixed; inset:0; display:none; flex-direction:column; align-items:center;
    justify-content:center; gap:18px; padding:24px; z-index:30; text-align:center;
    background:radial-gradient(120% 90% at 50% 0%, rgba(20,34,70,.55), rgba(6,10,20,.92) 70%);
    backdrop-filter:blur(7px); overflow-y:auto;
  }
  .screen.on{display:flex;}
  /* 내용이 넘칠 때 위쪽이 잘리지 않게 (스크롤 가능한 중앙정렬) */
  .screen{justify-content:safe center;}

  /* ---------- 컴팩트 모드: 폰 미리보기·낮은 화면에서 전부 한 화면에 ---------- */
  body.compact .screen{gap:8px; padding:10px 16px;}
  body.compact .eyebrow{font-size:9px; letter-spacing:.28em;}
  body.compact h1.logo{font-size:clamp(15px,calc(5.5 * var(--vh)),22px);}
  body.compact .sub{font-size:10.5px; line-height:1.5; max-width:440px;}
  body.compact .btn{padding:8px 14px; font-size:12.5px; min-width:180px;}
  body.compact .seg .btn, body.compact .cum-row .btn{min-width:0; padding:6px 12px; font-size:12px;}
  body.compact .shard-chip{padding:4px 10px; font-size:11px;}
  body.compact .orbit-map{width:96%;}
  body.compact .orbit-sun{font-size:26px;}
  body.compact .op .opicon{font-size:19px;}
  body.compact .op .opname{font-size:8.5px;}
  body.compact .op .opprog{font-size:7.5px;}
  body.compact .bonus-row .bchip{font-size:9.5px; padding:4px 9px;}
  body.compact .lvl-grid{gap:5px; max-width:calc(60 * var(--vw));}
  body.compact .lvl{border-radius:8px; gap:1px;}
  body.compact .lvl .dots i{width:4px; height:4px;}
  body.compact #plIcon{font-size:24px !important;}
  body.compact #plName{font-size:14px !important;}
  body.compact .mpanel{max-height:88%; overflow-y:auto; padding:14px; gap:8px; width:min(calc(92 * var(--vw)),320px);}
  body.compact .adbox{padding:14px 10px; font-size:11px;}
  body.compact .cards{max-height:calc(40 * var(--vh)); overflow-y:auto; gap:7px;}
  body.compact .card{padding:8px 10px; gap:8px;}
  body.compact .card .t{font-size:12px;}
  body.compact .card .d{font-size:10px;}
  body.compact .card .ico{font-size:17px; width:26px;}
  body.compact .plaza-banner{font-size:10px; padding:6px 12px; line-height:1.5;}
  body.compact .guide-char{font-size:62px;}
  body.compact .guide-text{font-size:12px; line-height:1.55;}
  body.compact .guide-wrap{margin-bottom:calc(2 * var(--vh));}
  body.compact .diff-btn{min-width:150px; font-size:12px; gap:8px;}
  body.compact .diff-list{gap:6px;}
  body.compact .boostchip{font-size:10.5px; padding:6px 10px;}
  body.compact .brand .sub{display:none;}
  body.compact .menu-col{gap:8px;}
  body.compact .planet-head{gap:8px;}
  body.compact #edPanel, body.compact #edLanePanel{padding:8px 10px; gap:5px; max-width:200px;}
  body.compact #edPanel .btn, body.compact #edLanePanel .btn{padding:6px 8px; font-size:11px;}
  body.compact .pdesc{font-size:9.5px; max-width:180px;}
  .eyebrow{font-size:11px; letter-spacing:.42em; color:var(--ink-dim); text-transform:uppercase;}
  h1.logo{
    font-size:clamp(30px,calc(8 * var(--vw)),54px); font-weight:800; letter-spacing:.14em; line-height:1.15;
    color:#fff; text-shadow:0 0 22px rgba(58,224,255,.55), 0 0 60px rgba(58,224,255,.25);
  }
  #scTitle h1.logo{animation:logoPulse 3.6s ease-in-out infinite;}
  @keyframes logoPulse{
    0%,100%{text-shadow:0 0 22px rgba(58,224,255,.55), 0 0 60px rgba(58,224,255,.25);}
    50%{text-shadow:0 0 30px rgba(58,224,255,.9), 0 0 95px rgba(58,224,255,.45);}
  }
  h1.logo em{font-style:normal; color:var(--me);}
  .sub{color:var(--ink-dim); font-size:13px; line-height:1.7; max-width:340px;}
  .btn{
    appearance:none; border:1px solid var(--line); border-radius:10px; cursor:pointer;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    color:var(--ink); font:inherit; font-size:15px; font-weight:700;
    padding:13px 20px; min-width:230px; letter-spacing:.06em;
    transition:transform .08s ease, border-color .15s;
  }
  .btn:active{transform:scale(.97);}
  .btn:hover:not([disabled]){border-color:rgba(58,224,255,.5); box-shadow:0 0 14px rgba(58,224,255,.15);}
  .btn.gold:hover:not([disabled]){border-color:rgba(255,201,77,.7); box-shadow:0 0 14px rgba(255,201,77,.18);}
  .btn.primary{border-color:rgba(58,224,255,.6); box-shadow:0 0 18px rgba(58,224,255,.18) inset, 0 0 14px rgba(58,224,255,.12);}
  .btn.gold{border-color:rgba(255,201,77,.55); color:var(--gold);}
  .btn:focus-visible{outline:2px solid var(--me); outline-offset:2px;}
  .btn[disabled]{opacity:.4; cursor:default;}
  .shard-chip{
    display:inline-flex; align-items:center; gap:7px; padding:6px 14px; border-radius:999px;
    border:1px solid rgba(255,201,77,.4); color:var(--gold); font-weight:700; font-size:14px;
    background:rgba(255,201,77,.07);
  }

  /* 타이틀 가로 레이아웃 */
  .brand{display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center;}
  .menu-col{display:flex; flex-direction:column; gap:12px;}
  /* 가로형 타이틀 배치 — 실제 화면이 아니라 게임 화면(stage) 비율로 판단해야 강제 가로 회전에서도 맞는다 */
  body.wide #scTitle{flex-direction:row; gap:56px;}
  body.wide .brand{align-items:flex-start; text-align:left;}
  body.wide .brand .sub{max-width:300px;}
  }

  /* 행성 선택 — 태양 중심 궤도 맵 (화면을 꽉 채움) */
  #scPlanets{justify-content:flex-start; padding:8px 14px; gap:6px;}
  .sec-head{display:flex; align-items:center; gap:14px; justify-content:center;}
  .orbit-map{
    position:relative; width:96%; flex:1 1 auto; min-height:110px;
  }
  #scPlanets > div:last-of-type{margin-top:0;}
  .orbit-ring{
    position:absolute; border:1px dashed rgba(140,170,255,.16); border-radius:50%;
    pointer-events:none;
  }
  .orbit-sun{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    font-size:38px; line-height:1; filter:drop-shadow(0 0 18px rgba(255,200,80,.8));
    pointer-events:none;
  }
  .op{
    position:absolute; transform:translate(-50%,-50%); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:2px;
    background:none; border:none; color:var(--ink); font:inherit; padding:4px;
  }
  .op .opicon{
    font-size:26px; line-height:1.25; position:relative;
    filter:drop-shadow(0 0 8px rgba(120,170,255,.5));
    transition:transform .12s;
  }
  .op:hover:not(.locked) .opicon{transform:scale(1.25);}
  .op .opname{font-size:10px; font-weight:700; text-shadow:0 1px 4px #000;}
  .op .opprog{font-size:9px; color:var(--ink-dim);}
  .op.locked{opacity:.4; cursor:default;}
  .op.next .opicon{animation:opPulse 1.5s ease-in-out infinite;}
  /* 준비중 섹터: 행성 실루엣 미리보기 + 배지 */
  .orbit-map.soon .op{cursor:default;}
  .orbit-map.soon .op .opicon{filter:grayscale(1) brightness(.6) drop-shadow(0 0 6px rgba(120,140,180,.4));}
  .orbit-map.soon .op .opname{opacity:.55;}
  .orbit-map.soon .orbit-ring{border-color:rgba(140,170,255,.09);}
  .soon-badge{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:5px; pointer-events:none; text-align:center;
    z-index:5;
  }
  .soon-badge .stag{
    font-size:10px; font-weight:800; letter-spacing:.28em; color:#0a1120;
    background:var(--gold); padding:3px 12px; border-radius:999px;
  }
  .soon-badge .st{
    font-size:17px; font-weight:800; letter-spacing:.08em; color:#fff;
    padding:9px 20px; border:1px dashed rgba(255,255,255,.5); border-radius:12px;
    background:rgba(8,13,26,.78); animation:soonGlow 2.4s ease-in-out infinite;
  }
  .soon-badge .ss{font-size:11px; color:var(--ink-dim);}
  @keyframes soonGlow{
    0%,100%{border-color:rgba(255,255,255,.35); box-shadow:0 0 8px rgba(255,201,77,.15);}
    50%{border-color:rgba(255,201,77,.8); box-shadow:0 0 22px rgba(255,201,77,.35);}
  }
  @keyframes opPulse{
    0%,100%{filter:drop-shadow(0 0 6px rgba(58,224,255,.6));}
    50%{filter:drop-shadow(0 0 18px rgba(58,224,255,1)); transform:scale(1.18);}
  }
  /* 보너스 스테이지 (별 수집 게이트) */
  .bonus-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
  .bchip{
    display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
    border:1px solid rgba(255,201,77,.4); background:rgba(255,201,77,.06);
    color:var(--gold); font-size:12px; font-weight:700; cursor:pointer; font-family:inherit;
  }
  .bchip.locked{opacity:.45; cursor:default; border-style:dashed;}
  .bchip.ready{animation:bPulse 1.6s infinite;}
  @keyframes bPulse{0%,100%{box-shadow:0 0 4px rgba(255,201,77,.2);}50%{box-shadow:0 0 16px rgba(255,201,77,.55);}}

  /* 스테이지 선택 — 좌측 정보 + 우측 풀스크린 그리드 (바운스볼식) */
  #scLevels{flex-direction:row; gap:calc(3 * var(--vw)); padding:12px calc(3 * var(--vw));}
  .lv-left{display:flex; flex-direction:column; gap:12px; align-items:center; flex:0 0 auto;}
  #scRandom{flex-direction:row; gap:calc(6 * var(--vw));}
  .planet-head{display:flex; align-items:center; gap:10px; justify-content:center;}
  .lvl-grid{
    display:grid; grid-template-columns:repeat(7, minmax(0,1fr));
    gap:clamp(5px, calc(1.4 * var(--vh)), 12px);
    flex:1 1 auto; max-width:min(calc(64 * var(--vw)), calc(150 * var(--vh)));
    align-self:center;
  }
  .lvl{
    aspect-ratio:1; border-radius:10px; border:1px solid var(--line); cursor:pointer;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    color:var(--ink); font-weight:800; font-size:clamp(12px, calc(3.2 * var(--vh)), 19px); padding:0;
    transition:border-color .15s, box-shadow .15s;
  }
  .lvl:hover:not(.locked){border-color:var(--me); box-shadow:0 0 10px rgba(58,224,255,.25);}
  .lvl .dots{display:flex; gap:3px; font-size:9px;}
  .lvl .dots i{width:6px; height:6px; border-radius:50%;}
  .lvl.locked{opacity:.32; cursor:default;}
  .lvl.cleared{border-color:rgba(58,224,255,.5);}
  .lvl.mboss{border-color:rgba(255,164,71,.55);}
  .lvl.fboss{border-color:rgba(255,92,106,.65); box-shadow:0 0 10px rgba(255,92,106,.2);}
  .lvl.next{border-color:var(--me); animation:lvlPulse 1.5s ease-in-out infinite;}
  @keyframes lvlPulse{
    0%,100%{box-shadow:0 0 4px rgba(58,224,255,.25);}
    50%{box-shadow:0 0 16px rgba(58,224,255,.7);}
  }

  /* 난이도 선택 — 이모지 대신 육각 계급장 + 위협도 게이지 (전장 HUD 톤) */
  .diff-list{display:flex; flex-direction:column; gap:8px; width:100%;}
  .diffrow{display:flex; gap:6px; align-items:stretch;}
  .diff-btn{
    display:flex; justify-content:flex-start; align-items:center; gap:10px; min-width:210px;
    position:relative; overflow:hidden; border-color:var(--dc-line);
    background:
      linear-gradient(90deg, var(--dc-wash), transparent 46%),
      linear-gradient(180deg, var(--panel2), var(--panel));
    transition:transform .08s ease, border-color .15s, box-shadow .18s, background .18s;
  }
  /* 좌측 액센트 — 난이도 색 띠 */
  .diff-btn::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--dc); opacity:.85;}
  .diff-btn:hover:not([disabled]){
    border-color:var(--dc);
    box-shadow:0 0 16px var(--dc-glow), 0 0 22px rgba(0,0,0,.3) inset;
  }
  /* 육각 계급장 — 겉테두리(색) 안에 패널색을 겹쳐 테두리만 남긴다 */
  .drank{
    position:relative; width:24px; height:27px; flex:0 0 auto; display:grid; place-items:center;
  }
  .drank::before, .drank::after{
    content:""; position:absolute; inset:0;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  .drank::before{background:var(--dc); opacity:.9;}
  .drank::after{inset:1.6px; background:#0a1120;}
  .drank b{
    position:relative; z-index:1; color:var(--dc); font-size:11px; font-weight:800;
    letter-spacing:0; text-shadow:0 0 8px var(--dc-glow);
  }
  .dname{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; flex:1; min-width:0;}
  .dname b{color:var(--dc); font-weight:800; letter-spacing:.04em;}
  .dname small{font-size:8px; letter-spacing:.22em; color:var(--ink-dim); font-weight:600;}
  /* 위협도 게이지 — 난이도만큼 채워지는 기울어진 막대 */
  .dmeter{display:flex; gap:3px; flex:0 0 auto;}
  .dmeter i{
    display:block; width:4px; height:13px; border-radius:1px;
    background:var(--dc); opacity:.16; transform:skewX(-14deg);
  }
  .dmeter i.on{opacity:1; box-shadow:0 0 7px var(--dc-glow);}
  .dstars{font-size:10px; letter-spacing:.08em; color:rgba(140,150,170,.4); flex:0 0 auto;}
  .dstars.got{color:var(--gold); text-shadow:0 0 8px rgba(255,201,77,.45);}
  .dmult{
    font-size:10.5px; font-weight:700; color:var(--ink-dim); flex:0 0 auto;
    padding:2px 6px; border-radius:5px; border:1px solid var(--line); background:rgba(6,10,20,.5);
  }
  .spdchip{min-width:0; padding:8px 9px; font-size:12px;}

  /* hangar cards — 넓은 화면에선 2열로 꽉 채움 */
  .cards{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
    gap:10px; width:min(calc(94 * var(--vw)), 720px);
  }
  .card{
    display:flex; align-items:center; gap:12px; text-align:left;
    border:1px solid var(--line); border-radius:12px; padding:12px 14px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
  }
  .card .ico{font-size:22px; width:34px; text-align:center;}
  .card .t{font-weight:700; font-size:14px;}
  .card .d{font-size:12px; color:var(--ink-dim); line-height:1.5;}
  .card .act{margin-left:auto;}
  .card .act .btn{min-width:0; padding:8px 12px; font-size:12px;}
  .card.owned{border-color:rgba(58,224,255,.45);}

  .seg{display:flex; gap:8px;}
  .seg .btn{min-width:0; padding:10px 16px; font-size:13px;}
  .seg .btn.sel{border-color:var(--me); color:var(--me);}

  /* ---------- battle HUD ---------- */
  #hud{position:fixed; inset:0; z-index:20; display:none; pointer-events:none;}
  #hud.on{display:block;}
  #hud .bar-top{
    position:absolute; top:0; left:0; right:0; padding:10px 12px calc(10px);
    display:flex; align-items:center; gap:10px;
  }
  .hbtn{
    pointer-events:auto; appearance:none; cursor:pointer; font:inherit;
    border:1px solid var(--line); border-radius:9px; color:var(--ink);
    background:rgba(13,21,38,.72); backdrop-filter:blur(8px); font-size:13px; font-weight:700; padding:8px 12px;
    letter-spacing:.04em;
  }
  .hbtn[disabled]{opacity:.35; cursor:default;}
  #ratio{flex:1; height:6px; border-radius:3px; overflow:hidden; display:flex; background:rgba(138,148,166,.25);}
  #ratio i{display:block; height:100%; transition:width .4s;}
  #banner{
    position:absolute; top:56px; left:50%; transform:translateX(-50%);
    padding:8px 18px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap;
    background:rgba(13,21,38,.92); border:1px solid rgba(255,201,77,.5); color:var(--gold);
    opacity:0; transition:opacity .3s; max-width:calc(92 * var(--vw));
  }
  #banner.on{opacity:1;}
  #hud .bar-bot{
    position:absolute; left:0; right:0; bottom:0; padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    display:flex; align-items:flex-end; gap:8px; justify-content:center;
  }
  .skill{
    pointer-events:auto; position:relative; width:58px; height:58px; border-radius:14px; cursor:pointer;
    border:1px solid var(--line); background:rgba(13,21,38,.75); backdrop-filter:blur(8px);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    color:var(--ink); font-size:20px; overflow:hidden;
  }
  #skillSlots{display:flex; gap:8px; pointer-events:none;} /* 장착한 스킬 3칸 */
  .skill small{font-size:9px; color:var(--ink-dim); letter-spacing:.02em;}
  .skill .cd{position:absolute; inset:0; background:rgba(6,10,20,.78); transform-origin:bottom; transform:scaleY(0);}
  .skill.arm{border-color:var(--gold); box-shadow:0 0 14px rgba(255,201,77,.3);}
  .skill.lock{opacity:.35; cursor:default;}
  /* 선택한 항성계 패널 — 화면 구석 고정이 아니라 노드 옆에 뜬다(위치는 JS).
     배경은 클릭을 통과시켜(pointer-events:none) 패널에 가려진 노드도 그대로 누를 수 있다. */
  #nodePanel{
    position:absolute; left:0; top:0;
    display:none; flex-direction:column; gap:5px; pointer-events:none;
    background:rgba(13,21,38,.94); border:1px solid rgba(140,170,255,.22); border-radius:11px;
    padding:7px 9px; font-size:12px; white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
  }
  #nodePanel.on{display:flex;}
  #nodePanel .np-line{display:flex; align-items:baseline; gap:8px;}
  #nodePanel .t{font-weight:800; font-size:12px;}
  #nodePanel #npInfo{font-size:10.5px; color:var(--ink-dim);}
  /* 버튼은 폭을 반씩 나눠 가져 정보 줄 아래에 가운데로 꽉 차게 놓인다 */
  #nodePanel .np-btns{display:flex; gap:5px; justify-content:center;}
  #nodePanel .np-btns .btn{flex:1;}
  #nodePanel .btn{
    pointer-events:auto; min-width:0; padding:5px 9px; font-size:11px; line-height:1.25;
    /* justify-content가 없으면 고정 높이일 때 글자가 위로 붙는다 */
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  }
  #nodePanel .btn small{font-size:8.5px; font-weight:600; color:var(--ink-dim);}
  #nodePanel .btn:disabled small{color:inherit;}
  #hint{
    position:absolute; bottom:calc(84px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
    font-size:12px; color:var(--gold); background:rgba(13,21,38,.85); border-radius:999px; padding:6px 14px;
    opacity:0; transition:opacity .2s; white-space:nowrap;
  }
  #hint.on{opacity:1;}

  /* result */
  #result .medal{font-size:44px; letter-spacing:6px; color:var(--gold);}
  #result h2{font-size:30px; letter-spacing:.2em; font-weight:800;}
  #result h2.win{color:var(--me); text-shadow:0 0 18px rgba(58,224,255,.5);}
  #result h2.lose{color:var(--foe);}
  .rew{font-size:14px; color:var(--ink-dim); line-height:1.9;}
  .rew b{color:var(--gold);}

  /* ---------- 멀티 대전 (고스트 매치) ----------
     크기는 전부 --vh에 비례한다 (breakpoint 없이 어떤 폰에서도 한 화면).
     ⚠ 상대의 AI 난이도는 화면에 절대 노출하지 않는다 — 다른 지휘관과의 대전으로 읽혀야 한다. */
  #scMulti{gap:clamp(5px, calc(2 * var(--vh)), 18px);}
  #scMulti .logo{font-size:clamp(15px, min(4.2 * var(--vw), calc(4.6 * var(--vh))), 26px);}

  /* 탐색 중 화면이 조여드는 연출 */
  .mm-vig{
    position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0; transition:opacity .7s;
    background:radial-gradient(72% 60% at 50% 46%, transparent 40%, rgba(3,6,14,.82) 100%);
  }
  #scMulti.hunting .mm-vig{opacity:1;}
  #scMulti.hunting .eyebrow, #scMulti.hunting .logo{opacity:.35;}
  #scMulti.hunting .mm-controls{opacity:.25; pointer-events:none;}
  #scMulti.hunting .mm-back{opacity:.28; pointer-events:none;}
  #scMulti.shake{animation:mmShake .42s cubic-bezier(.36,.07,.19,.97);}
  @keyframes mmShake{
    10%,90%{transform:translate(-2px,1px)} 20%,80%{transform:translate(4px,-2px)}
    30%,50%,70%{transform:translate(-7px,2px)} 40%,60%{transform:translate(7px,-1px)}
  }
  .mm-flash{
    position:fixed; inset:0; pointer-events:none; z-index:2; opacity:0;
    background:radial-gradient(60% 50% at 50% 46%, rgba(255,92,106,.55), transparent 70%);
  }
  .mm-flash.on{animation:mmFlash .5s ease-out;}
  @keyframes mmFlash{0%{opacity:1}100%{opacity:0}}
  /* 콘텐츠만 쌓임 순서를 올린다 (배경·오버레이·뒤로가기는 각자 position을 유지해야 하므로 제외) */
  #scMulti > .eyebrow, #scMulti > .logo, #scMulti > .mm-controls,
  #scMulti > .mm-area, #scMulti > .mm-hud, #scMulti > .mm-acts{position:relative; z-index:1;}

  /* 좌상단 뒤로가기 */
  #scMulti .mm-back{
    position:absolute; top:12px; left:12px; z-index:3;
    appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:700;
    display:flex; align-items:center; gap:6px; padding:8px 14px 8px 12px;
    color:var(--ink-dim); background:rgba(13,21,38,.75);
    border:1px solid var(--line); border-radius:999px; transition:.2s;
  }
  .mm-back:hover{color:var(--ink); border-color:rgba(140,170,255,.32);}
  .mm-back .ar{font-size:14px; line-height:1;}

  /* 모드 선택 + 칭호 도감 (한 행) */
  .mm-controls{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; transition:opacity .5s;}
  .codexbtn{
    appearance:none; cursor:pointer; font:inherit; font-weight:700; letter-spacing:.04em;
    display:flex; align-items:center; gap:6px;
    font-size:clamp(10.5px, calc(2.2 * var(--vh)), 12.5px);
    padding:clamp(5px, calc(1.5 * var(--vh)), 8px) clamp(11px, calc(3 * var(--vh)), 16px);
    color:var(--gold); background:rgba(255,201,77,.08);
    border:1px solid rgba(255,201,77,.42); border-radius:999px; transition:.2s;
  }
  .codexbtn:hover{background:rgba(255,201,77,.16); border-color:rgba(255,201,77,.7);}
  .codexbtn .cg{filter:drop-shadow(0 0 6px currentColor);}

  /* 대진 + 릴 묶음 — 세로 화면은 위아래, 가로 화면은 좌우 */
  .mm-area{display:flex; flex-direction:column; align-items:center; gap:clamp(8px, calc(2 * var(--vh)), 16px);}
  .vs-wrap{display:flex; align-items:center; justify-content:center; gap:clamp(8px, calc(2.4 * var(--vw)), 26px);}
  .vs-card{
    position:relative;
    width:clamp(104px, min(calc(17 * var(--vw)), calc(30 * var(--vh))), 164px);
    padding:clamp(9px, calc(2.8 * var(--vh)), 20px) clamp(7px, calc(1.6 * var(--vw)), 14px) clamp(7px, calc(2.2 * var(--vh)), 15px);
    border:1px solid var(--line); border-radius:4px 16px 4px 16px;
    background:linear-gradient(170deg,var(--panel2),var(--panel));
    display:flex; flex-direction:column; gap:clamp(3px, calc(1.3 * var(--vh)), 9px); align-items:center;
    transition:.35s;
  }
  .vs-card::after{
    content:""; position:absolute; left:10px; right:10px; bottom:8px; height:1px;
    background:linear-gradient(90deg,transparent,var(--line),transparent);
  }
  .vs-card.me{border-color:rgba(58,224,255,.42); box-shadow:0 0 30px rgba(58,224,255,.12), inset 0 0 30px rgba(58,224,255,.05);}
  .vs-card.foe{border-color:rgba(255,92,106,.42); box-shadow:0 0 30px rgba(255,92,106,.12), inset 0 0 30px rgba(255,92,106,.05);}
  .vs-card.empty{opacity:.62; border-style:dashed;}

  /* 함대 문장 (이모지 대신 SVG 엠블럼) */
  .sigil{position:relative; width:clamp(34px, calc(13 * var(--vh)), 66px); aspect-ratio:1;}
  .sigil svg{width:100%; height:100%; display:block; overflow:visible;}
  .sigil .ring{transform-origin:50% 50%; animation:spin 14s linear infinite;}
  .sigil .ring.rev{animation-duration:22s; animation-direction:reverse;}

  .vs-name{
    font-weight:800; font-size:clamp(11px, calc(2.6 * var(--vh)), 14px); letter-spacing:.02em;
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .vs-sub{font-size:clamp(9px, calc(2.2 * var(--vh)), 11px); color:var(--ink-dim); letter-spacing:.06em;}
  .vs-sub b{color:var(--ink); font-weight:700;}
  /* 칭호 뱃지 — 색은 칭호별로 JS가 인라인 지정 */
  .vs-tier{
    font-size:clamp(8px, calc(2 * var(--vh)), 10px); font-weight:700; letter-spacing:.1em;
    white-space:nowrap; border:1px solid currentColor; border-radius:3px;
    padding:clamp(1px, calc(.6 * var(--vh)), 3px) clamp(6px, calc(1.2 * var(--vw)), 9px);
  }
  .vs-card.empty .vs-tier{color:var(--ink-dim); border-style:dashed;}
  .me .vs-tier{cursor:pointer;}
  .me .vs-tier::after{content:"ⓘ"; font-size:.85em; opacity:.55; margin-left:5px;}
  .te{margin-right:5px; font-size:1.1em; vertical-align:-1px;}
  .tg{font-style:normal; margin-right:5px; filter:drop-shadow(0 0 5px currentColor);}

  /* 다음 칭호까지 진행도 (내 카드만) */
  .vs-prog{width:100%; display:flex; flex-direction:column; gap:4px; margin-top:2px;}
  .vs-prog .pbar{height:3px; border-radius:2px; background:rgba(140,170,255,.14); overflow:hidden;}
  .vs-prog .pbar i{display:block; height:100%; border-radius:2px; transition:width .5s;}
  .vs-prog .pnote{
    display:flex; flex-direction:column; gap:1px; text-align:center; word-break:keep-all; white-space:nowrap;
    font-size:clamp(7.5px, calc(1.9 * var(--vh)), 9.5px); line-height:1.5; color:var(--ink-dim);
  }
  .vs-prog .pnote b{color:var(--ink); font-weight:800;}

  .vs-mid{display:flex; flex-direction:column; align-items:center; gap:clamp(3px, calc(1 * var(--vh)), 6px); color:var(--gold);}
  .vs-mid .bar{width:1px; height:clamp(10px, calc(3 * var(--vh)), 22px); background:linear-gradient(180deg,transparent,var(--gold)); opacity:.5;}
  .vs-mid .bar.b{background:linear-gradient(0deg,transparent,var(--gold));}
  .vs-mid .gl{
    font-size:clamp(9px, calc(2 * var(--vh)), 11px); font-weight:800; letter-spacing:.26em;
    text-shadow:0 0 14px rgba(255,201,77,.6);
  }

  /* 레이더 스캔 상태 — 상대 정보는 일절 노출하지 않는다 */
  .vs-card.scan{
    opacity:1; border-style:solid; border-color:rgba(255,201,77,.45);
    box-shadow:0 0 34px rgba(255,201,77,.14), inset 0 0 26px rgba(255,201,77,.05);
  }
  .vs-card.scan .vs-name{color:var(--gold); font-family:ui-monospace,Consolas,monospace;}
  .vs-card.scan .vs-tier{color:var(--gold); border-style:solid;}
  .sigil .sweep{transform-origin:50% 50%; animation:spin var(--sw,1.5s) linear infinite;}
  .sigil .blip{opacity:0; animation:mmBlip 1.8s ease-out infinite;}
  @keyframes mmBlip{0%{opacity:0}6%{opacity:1}60%{opacity:0}100%{opacity:0}}
  .vs-brk{position:absolute; top:12px; bottom:12px; width:10px; opacity:0; transition:.5s cubic-bezier(.2,.9,.2,1);}
  .vs-brk.l{left:6px; border-left:1.5px solid var(--gold); border-top:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:translateX(-16px);}
  .vs-brk.r{right:6px; border-right:1.5px solid var(--gold); border-top:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold); transform:translateX(16px);}
  .vs-card.aim .vs-brk{opacity:.95; transform:none;}
  .vs-card.aim{animation:mmAim .34s steps(2) infinite;}
  @keyframes mmAim{50%{box-shadow:0 0 46px rgba(255,201,77,.3);}}
  .vs-card.hit{animation:mmSlam .5s cubic-bezier(.2,1.4,.3,1);}
  @keyframes mmSlam{0%{transform:scale(1.5); filter:blur(6px); opacity:0}55%{transform:scale(.96); filter:none; opacity:1}100%{transform:scale(1)}}
  .vs-wave{
    position:absolute; left:50%; top:44%; width:40px; height:40px; margin:-20px 0 0 -20px;
    border-radius:50%; border:2px solid var(--foe); opacity:0; pointer-events:none;
  }
  .vs-wave.on{animation:mmWave .7s ease-out;}
  @keyframes mmWave{0%{transform:scale(.3); opacity:.9}100%{transform:scale(5); opacity:0}}
  .vs-stamp{
    position:absolute; top:-9px; left:50%; transform:translateX(-50%);
    font-size:9px; font-weight:800; letter-spacing:.24em; padding:3px 10px;
    color:#1a0509; background:var(--foe); border-radius:2px; opacity:0;
  }
  .vs-stamp.on{animation:mmStamp .5s cubic-bezier(.2,1.5,.3,1) forwards;}
  @keyframes mmStamp{0%{opacity:0; transform:translateX(-50%) scale(2.2)}100%{opacity:1; transform:translateX(-50%) scale(1)}}

  /* 스캔 HUD */
  .mm-hud{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:clamp(4px, calc(1.2 * var(--vh)), 7px);
    height:clamp(22px, calc(6.6 * var(--vh)), 38px); opacity:0; transition:opacity .4s;
  }
  .mm-hud.on{opacity:1;}
  .mm-hud .hudline{
    display:flex; align-items:center; gap:12px; letter-spacing:.2em; text-transform:uppercase;
    font-size:clamp(8.5px, calc(1.9 * var(--vh)), 10.5px);
    color:var(--gold); font-family:ui-monospace,Consolas,monospace;
  }
  .mm-hud .dot{width:5px; height:5px; border-radius:50%; background:var(--gold); animation:mmAim .5s steps(2) infinite;}
  .mm-hud .bar-wrap{width:min(calc(88 * var(--vw)),420px); height:2px; background:rgba(255,201,77,.14); overflow:hidden;}
  .mm-hud .bar-fill{height:100%; width:0%; background:linear-gradient(90deg,rgba(255,201,77,.3),var(--gold)); transition:width .25s linear;}

  /* 전장 릴 — 접혀 있다가 펼쳐지며 대진을 밀어낸다 */
  .reel-shell{
    width:min(calc(94 * var(--vw)),660px); display:flex; flex-direction:column; gap:10px;
    max-height:0; opacity:0; overflow:hidden; pointer-events:none;
    transition:max-height .6s cubic-bezier(.22,.9,.25,1), opacity .4s ease .15s;
  }
  .reel-shell.on{max-height:calc(34 * var(--vh)); opacity:1; pointer-events:auto;}
  .mm-area:has(.reel-shell:not(.on)){gap:0;}
  .reel-label{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-dim);
  }
  #mmPick{color:var(--gold); letter-spacing:.1em;}
  #mmPoolNote{color:var(--ink-dim); letter-spacing:.14em; margin-left:8px; opacity:.75;}
  .reel{
    --cw:clamp(92px, min(calc(20 * var(--vw)), calc(24 * var(--vh))), 132px);
    --gapx:clamp(7px, calc(1.4 * var(--vw)), 12px);
    flex:0 0 auto; position:relative; overflow:hidden;
    height:clamp(76px, calc(21 * var(--vh)), 120px);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,rgba(18,28,51,.5),rgba(6,10,20,.5));
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  }
  .track{position:absolute; top:0; left:0; height:100%; display:flex; gap:var(--gapx); will-change:transform;}
  .mcard{
    width:var(--cw); height:100%; flex:0 0 var(--cw); padding:9px;
    display:flex; flex-direction:column; gap:6px; justify-content:space-between;
    border:1px solid var(--line); border-radius:10px; background:rgba(13,21,38,.85);
    transition:border-color .18s, box-shadow .18s, transform .18s;
  }
  .mcard.hot{border-color:rgba(255,201,77,.55); box-shadow:0 0 22px rgba(255,201,77,.16);}
  .mcard.locked{border-color:var(--gold); box-shadow:0 0 30px rgba(255,201,77,.3); transform:scale(1.04);}
  .mthumb{flex:1; border-radius:6px; overflow:hidden; background:radial-gradient(90% 90% at 30% 20%, rgba(58,224,255,.07), rgba(6,10,20,.9));}
  .mthumb svg{width:100%; height:100%; display:block;}
  .mname{font-size:clamp(9.5px, calc(2.2 * var(--vh)), 11.5px); font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mmeta{font-size:clamp(8px, calc(1.8 * var(--vh)), 9.5px); color:var(--ink-dim); letter-spacing:.04em;}
  .mmeta .sz{color:var(--gold); font-weight:800; margin-right:4px;}
  .gate{position:absolute; top:0; bottom:0; left:50%; width:calc(var(--cw) + 16px); transform:translateX(-50%); pointer-events:none;}
  .gate::before,.gate::after{content:""; position:absolute; left:0; right:0; height:8px; border-left:1px solid var(--gold); border-right:1px solid var(--gold);}
  .gate::before{top:0; border-top:1px solid var(--gold);}
  .gate::after{bottom:0; border-bottom:1px solid var(--gold);}
  .gate .tip{
    position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:0; height:0;
    border-left:5px solid transparent; border-right:5px solid transparent; border-top:7px solid var(--gold);
  }
  .reel.spinning .gate{animation:mmGate .09s linear infinite;}
  @keyframes mmGate{50%{opacity:.45;}}

  .mm-acts{display:flex; flex-direction:column; align-items:center; gap:clamp(5px, calc(1.6 * var(--vh)), 9px); width:min(calc(92 * var(--vw)),420px);}
  .mm-status{
    font-size:clamp(9px, calc(2.2 * var(--vh)), 11px); line-height:1.5;
    color:var(--ink-dim); letter-spacing:.08em; min-height:1.5em; text-align:center;
  }
  .mm-status b{color:var(--gold);}

  /* 가로 화면이면 릴을 대진 옆에 세로로 세운다 — 아래 한 줄을 통째로 아끼고 대진 카드를 크게 쓴다.
     게임은 모바일에서 가로 고정이므로 이쪽이 사실상 기본 레이아웃이다.
     ⚠ 예전에 max-height:640px을 함께 걸었더니 태블릿 가로·데스크톱에서 가로 릴로 떨어졌다. */
  @media (orientation:landscape){
    #scMulti .eyebrow{display:none;}
    .mm-area{flex-direction:row; align-items:center; gap:clamp(10px, calc(2 * var(--vw)), 18px);}
    .mm-back{top:10px; left:10px;}
    .vs-card{width:clamp(112px, min(calc(16 * var(--vw)), calc(34 * var(--vh))), 150px);}
    .sigil{width:clamp(40px, calc(15 * var(--vh)), 58px);}
    .reel-shell{
      width:0; max-height:none; gap:5px;
      transition:width .6s cubic-bezier(.22,.9,.25,1), opacity .4s ease .15s;
    }
    .reel-shell.on{width:clamp(140px, min(calc(24 * var(--vw)), calc(46 * var(--vh))), 186px);}
    .reel-label{justify-content:center; font-size:8.5px; text-align:center;}
    .reel-label > div:first-child{display:none;}
    #mmPick{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .reel{
      --ch:clamp(38px, calc(12.5 * var(--vh)), 56px); --gapx:clamp(5px, calc(1.8 * var(--vh)), 8px);
      width:clamp(140px, min(calc(24 * var(--vw)), calc(46 * var(--vh))), 186px);
      height:clamp(118px, calc(46 * var(--vh)), 206px);
      border:1px solid var(--line); border-radius:12px;
      -webkit-mask-image:linear-gradient(180deg,transparent,#000 17%,#000 83%,transparent);
              mask-image:linear-gradient(180deg,transparent,#000 17%,#000 83%,transparent);
    }
    .track{flex-direction:column; width:100%; height:auto;}
    .mcard{
      width:100%; height:var(--ch); flex:0 0 var(--ch);
      flex-direction:row; align-items:center; gap:8px; padding:7px; border-radius:8px;
    }
    .mthumb{flex:0 0 clamp(38px, calc(12 * var(--vh)), 54px); height:100%;}
    .mcard .mtext{flex:1; min-width:0;}
    .gate{left:0; right:0; width:auto; top:50%; bottom:auto; height:calc(var(--ch) + 12px); transform:translateY(-50%);}
    .gate .tip{
      top:50%; left:-1px; transform:translateY(-50%);
      border-top:5px solid transparent; border-bottom:5px solid transparent;
      border-left:7px solid var(--gold); border-right:0;
    }
  }
  @media (orientation:landscape) and (max-height:420px){
    .mm-back .lb{display:none;}
    .vs-prog{display:none;}
  }

  /* 오프라인 — 멀티 대전은 연결됐을 때만 */
  #scTitle .menu-col .btn.offline{opacity:.5;}
  #scTitle .menu-col .btn.offline .s{color:var(--foe);}
  #scTitle .menu-col .btn.checking{opacity:.7;}
  #scTitle .menu-col .btn.checking .s{color:var(--gold);}

  /* ---------- 대전 신청 (전투 중 도착) ---------- */
  .invite{
    width:min(calc(94 * var(--vw)),392px); max-height:calc(94 * var(--vh)); overflow-y:auto;
    border:1px solid rgba(255,92,106,.4); border-radius:16px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    box-shadow:0 26px 60px rgba(0,0,0,.7), 0 0 40px rgba(255,92,106,.12);
    animation:inviteIn .38s cubic-bezier(.2,1.3,.3,1);
  }
  @keyframes inviteIn{from{opacity:0; transform:translateY(18px) scale(.95)}}
  .inv-head{
    display:flex; align-items:center; gap:8px; padding:9px 14px;
    background:rgba(255,92,106,.1); border-bottom:1px solid rgba(255,92,106,.25);
    font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--foe);
  }
  .inv-head .live{width:6px; height:6px; border-radius:50%; background:var(--foe); animation:invBlink .9s steps(2) infinite;}
  @keyframes invBlink{50%{opacity:.25}}
  .inv-head .timer{margin-left:auto; letter-spacing:.06em; color:var(--ink-dim); font-weight:700;}
  .inv-bar{height:2px; background:rgba(255,92,106,.15); overflow:hidden;}
  .inv-bar i{display:block; height:100%; background:var(--foe); width:100%;}
  .inv-body{
    padding:clamp(10px,calc(2.6 * var(--vh)),16px) 18px 14px;
    display:flex; flex-direction:column; align-items:center; gap:clamp(6px,calc(1.8 * var(--vh)),11px);
  }
  .inv-sig{width:clamp(38px,calc(11 * var(--vh)),58px); aspect-ratio:1;}
  .inv-sig svg{width:100%; height:100%; display:block; overflow:visible;}
  .inv-who{font-size:clamp(13px,calc(3 * var(--vh)),16px); font-weight:800; line-height:1.5;}
  .inv-who b{color:var(--foe);}
  .inv-tier{font-size:10px; font-weight:700; letter-spacing:.1em; padding:3px 9px; border:1px solid currentColor; border-radius:3px; white-space:nowrap;}
  .inv-meta{font-size:11px; color:var(--ink-dim); letter-spacing:.04em;}
  .inv-meta b{color:var(--ink);}
  .inv-field{
    width:100%; display:flex; align-items:center; justify-content:center; gap:10px; padding:9px 11px;
    border:1px solid var(--line); border-radius:10px; background:rgba(6,10,20,.5);
  }
  .inv-field .ftext{flex:0 1 auto; min-width:0; text-align:center;}
  .inv-field .fname{font-size:12px; font-weight:800;}
  .inv-field .fmeta{font-size:9.5px; color:var(--ink-dim);}
  .inv-field .fmeta .sz{color:var(--gold); font-weight:800;}
  /* 두 문장을 각각 한 줄로 — 문장 중간에서 넘어가지 않게 */
  .inv-warn{
    width:100%; display:flex; flex-direction:column; gap:2px;
    font-size:10.5px; line-height:1.6; color:var(--gold); text-align:left;
    background:rgba(255,201,77,.07); border:1px dashed rgba(255,201,77,.35);
    border-radius:9px; padding:9px 11px; word-break:keep-all;
  }
  .inv-warn .wl{text-wrap:pretty;}
  .inv-warn b{color:#ffe6a8;}
  .inv-btns{display:flex; gap:8px; padding:0 18px 16px;}
  .invite .inv-btns .btn{flex:1 1 0; min-width:0; width:auto; padding:12px 8px; font-size:13px; white-space:nowrap;}
  .invite .inv-btns .btn.accept{
    color:#06101f; border-color:transparent;
    background:linear-gradient(180deg,#ff8b96,var(--foe)); box-shadow:0 0 22px rgba(255,92,106,.3);
  }

  /* ---------- 멀티방 접속 ---------- */
  .lobby{width:min(calc(94 * var(--vw)),470px); display:flex; flex-direction:column; align-items:center; gap:clamp(9px,calc(2.4 * var(--vh)),16px);}
  .lob-title{font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); display:flex; align-items:center; gap:9px;}
  .lob-title i{width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--line));}
  .lob-title i:last-child{background:linear-gradient(90deg,var(--line),transparent);}
  .lob-vs{display:flex; align-items:center; gap:16px;}
  .lob-card{
    width:clamp(98px,calc(24 * var(--vh)),118px); padding:14px 10px 11px;
    display:flex; flex-direction:column; align-items:center; gap:6px;
    border:1px solid var(--line); border-radius:4px 14px 4px 14px;
    background:linear-gradient(170deg,var(--panel2),var(--panel));
  }
  .lob-card.me{border-color:rgba(58,224,255,.42); box-shadow:0 0 26px rgba(58,224,255,.12);}
  .lob-card.foe{border-color:rgba(255,92,106,.42); box-shadow:0 0 26px rgba(255,92,106,.12);}
  .lob-card .sg{width:clamp(32px,calc(9 * var(--vh)),42px); aspect-ratio:1;}
  .lob-card .sg svg{width:100%; height:100%; display:block; overflow:visible;}
  .lob-card .nm{font-size:12.5px; font-weight:800; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .lob-card .tr{font-size:9px; font-weight:700; letter-spacing:.08em; padding:2px 7px; border:1px solid currentColor; border-radius:3px; white-space:nowrap;}
  .lob-mid{font-size:11px; font-weight:800; letter-spacing:.24em; color:var(--gold); text-shadow:0 0 14px rgba(255,201,77,.55);}
  .steps{width:100%; display:flex; flex-direction:column; gap:7px;}
  .step{
    display:grid; grid-template-columns:16px 1fr auto; gap:10px; align-items:center;
    font-size:11.5px; color:var(--ink-dim); letter-spacing:.04em; transition:.25s; text-align:left;
  }
  .step .ic{width:16px; height:16px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:9px;}
  .step.doing{color:var(--ink);}
  .step.doing .ic{border-color:var(--gold); color:var(--gold); animation:invBlink .7s steps(2) infinite;}
  .step.done{color:var(--ink);}
  .step.done .ic{border-color:var(--me); color:var(--me); background:rgba(58,224,255,.12); animation:none;}
  .step .ms{font-size:10px; color:var(--ink-dim); font-variant-numeric:tabular-nums;}
  .lob-bar{width:100%; height:3px; border-radius:2px; background:rgba(140,170,255,.14); overflow:hidden;}
  .lob-bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--me),var(--gold)); transition:width .3s;}
  .lob-note{font-size:10.5px; color:var(--ink-dim); letter-spacing:.1em; min-height:1.4em;}

  /* ---------- 멀티 출격 준비 (스킬 장착 · 5초) ---------- */
  .prep{
    width:min(calc(94 * var(--vw)),392px); max-height:calc(94 * var(--vh)); overflow-y:auto;
    border:1px solid var(--line); border-radius:16px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    box-shadow:0 26px 60px rgba(0,0,0,.7);
    animation:prepIn .34s cubic-bezier(.2,1.25,.3,1);
  }
  @keyframes prepIn{from{opacity:0; transform:translateY(16px) scale(.96)}}
  .prep-head{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line);}
  .prep-head .t{font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-dim);}
  .prep-head .f{margin-left:auto; font-size:11px; font-weight:800; color:var(--gold);}
  .prep-head .timer{font-size:13px; font-weight:800; color:var(--ink-dim); min-width:16px; text-align:right;}
  .prep-head .timer.hot{color:var(--foe); animation:prepPulse .5s steps(2) infinite;}
  @keyframes prepPulse{50%{opacity:.35}}
  .prep-bar{height:2px; background:rgba(255,201,77,.14); overflow:hidden;}
  .prep-bar i{display:block; height:100%; width:100%; background:var(--gold);}
  .prep-bar i.hot{background:var(--foe);}
  .prep-body{
    padding:clamp(9px,calc(2.4 * var(--vh)),14px) 16px 12px;
    display:flex; flex-direction:column; gap:9px;
  }
  .prep-note{font-size:9.5px; color:var(--ink-dim); text-align:center; min-height:13px; line-height:1.6;}
  .prep-note b{color:var(--gold);}
  .prep .skillchip.rand{animation:prepRand .45s cubic-bezier(.2,1.4,.3,1);}
  @keyframes prepRand{0%{transform:scale(.82); opacity:.4}100%{transform:scale(1); opacity:1}}
  .prep-foot{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:11px 16px calc(15px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line); font-size:10.5px; color:var(--ink-dim); letter-spacing:.04em;
  }
  .dots{display:inline-flex; gap:3px;}
  .dots i{width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:.3; animation:prepDot 1.1s infinite;}
  .dots i:nth-child(2){animation-delay:.16s}
  .dots i:nth-child(3){animation-delay:.32s}
  @keyframes prepDot{0%,60%,100%{opacity:.25}30%{opacity:1}}

  /* ---------- 매칭 이탈 확인 ---------- */
  .mpanel.mmleave{gap:10px; width:min(calc(92 * var(--vw)),330px);}
  .mml-ico{font-size:30px; filter:drop-shadow(0 0 14px rgba(255,201,77,.5));}
  .mml-title{font-size:15px; font-weight:800; letter-spacing:.04em; text-wrap:balance;}
  /* 문장은 JS가 <br>로 나눈다. 그래도 넘칠 땐 단어 단위로만 접히게 */
  .mml-text{font-size:12px; line-height:1.75; color:var(--ink-dim); word-break:keep-all; text-wrap:balance;}
  .mml-btns{display:flex; gap:8px; width:100%; margin-top:4px;}
  /* body.compact .btn{min-width:180px} 보다 특이도가 높아야 두 버튼이 패널 안에 들어온다 */
  .mpanel.mmleave .mml-btns .btn{
    flex:1 1 0; min-width:0; width:auto; padding:11px 8px;
    font-size:clamp(11.5px, calc(2.6 * var(--vh)), 13px); white-space:nowrap;
  }
  .btn.danger{border-color:rgba(255,92,106,.55); color:var(--foe);}
  .btn.danger:hover:not([disabled]){border-color:rgba(255,92,106,.8); box-shadow:0 0 14px rgba(255,92,106,.18);}

  /* ---------- 칭호 도감 ---------- */
  .tsheet{
    width:min(calc(94 * var(--vw)),460px); max-height:calc(88 * var(--vh));
    display:flex; flex-direction:column; overflow:hidden;
    border:1px solid var(--line); border-radius:16px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    box-shadow:0 24px 60px rgba(0,0,0,.6);
    animation:tsheetIn .32s cubic-bezier(.2,1.2,.3,1);
  }
  @keyframes tsheetIn{from{opacity:0; transform:translateY(14px) scale(.97)}}
  .tsheet-head{display:flex; align-items:center; gap:10px; padding:15px 16px 12px; border-bottom:1px solid var(--line);}
  .tsheet-head h2{font-size:15px; font-weight:800; letter-spacing:.1em;}
  .tsheet-head p{flex:1; font-size:10.5px; color:var(--ink-dim); letter-spacing:.04em; text-align:left;}
  .tsheet-body{overflow-y:auto; padding:8px;}
  .trow{display:grid; grid-template-columns:3px 1fr auto; gap:12px; align-items:center; padding:9px 10px; border-radius:9px;}
  .trow .rail{width:3px; height:100%; min-height:30px; border-radius:2px;}
  .trow.cur{background:rgba(255,201,77,.07); box-shadow:inset 0 0 0 1px rgba(255,201,77,.28);}
  .tname{font-size:13px; font-weight:800; display:flex; align-items:center; gap:7px; text-align:left;}
  .tname .tg{font-size:1.05em; margin-right:6px; opacity:.8;}
  .tmed{
    display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; margin-right:9px; font-size:15px;
    border:1px solid currentColor; border-radius:50%;
    background:rgba(255,255,255,.04); box-shadow:0 0 12px -2px currentColor;
  }
  .tnow{font-size:8.5px; font-weight:800; letter-spacing:.14em; color:#1a1200; background:var(--gold); border-radius:3px; padding:2px 6px;}
  .tmeta{font-size:10px; color:var(--ink-dim); letter-spacing:.03em; margin-top:2px; text-align:left;}
  .trange{font-size:11px; color:var(--ink-dim); text-align:right; white-space:nowrap;}
  .trange b{display:block; color:var(--ink); font-size:12px; font-weight:800;}
  .tsheet-foot{padding:11px 16px; border-top:1px solid var(--line);}
  .tsheet-foot .note{font-size:10px; color:var(--ink-dim); line-height:1.6; text-align:left;}
  .tsheet-foot .note b{color:var(--gold);}

  /* ---------- 맵 공방 (에디터 + 광장) ---------- */
  .plaza-banner{
    font-size:12px; line-height:1.8; color:var(--gold); text-align:center;
    border:1px dashed rgba(255,201,77,.45); border-radius:12px; padding:10px 18px;
    background:rgba(255,201,77,.05);
  }
  .prow{display:flex; align-items:center; gap:10px; text-align:left;}
  .prow .rk{font-weight:800; font-size:16px; width:30px; text-align:center; color:var(--gold);}
  .prow .pm{flex:1; min-width:0;}
  .prow .pm .t{font-weight:800; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .prow .pm .d{font-size:11px; color:var(--ink-dim);}
  .prow .btn{min-width:0; padding:8px 12px; font-size:12px;}
  .chal{color:#ff8c5a; font-weight:700;}
  #edHud{position:fixed; inset:0; z-index:22; display:none; pointer-events:none;}
  #edHud.on{display:block;}
  #edHud .bar-top{
    position:absolute; top:0; left:0; right:0; padding:10px 12px;
    display:flex; align-items:center; gap:6px;
  }
  .ed-title{flex:1; text-align:center; font-weight:800; font-size:13px; color:var(--dev, #5cffb0);}
  #edProb{
    position:absolute; top:56px; left:50%; transform:translateX(-50%);
    display:none; flex-direction:column; gap:4px; max-width:calc(92 * var(--vw));
    background:rgba(13,21,38,.94); border:1px solid var(--line); border-radius:12px;
    padding:10px 16px; font-size:12px; line-height:1.6; pointer-events:auto; z-index:5;
  }
  #edProb.on{display:flex;}
  /* 테스트 플레이 배너 — 편집 복귀 경로를 상시 노출 (예전엔 이기거나 져야만 돌아올 수 있었다) */
  #testBar{
    position:absolute; top:46px; left:50%; transform:translateX(-50%); z-index:6;
    display:none; align-items:center; gap:8px; pointer-events:auto;
    background:rgba(6,10,20,.88); border:1px solid rgba(255,201,77,.42); border-radius:999px;
    padding:5px 7px 5px 13px; font-size:11.5px; font-weight:700; color:var(--gold);
  }
  #testBar.on{display:flex;}
  #testBar button{
    appearance:none; font:inherit; cursor:pointer; font-size:11px; font-weight:800; color:var(--ink);
    border:1px solid var(--line); border-radius:999px; padding:5px 11px;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
  }
  #testBar button:hover{border-color:rgba(58,224,255,.5); color:var(--me);}
  /* 저장 상태 — 편집 중 항상 보이는 자리 (우하단, 조작 패널과 겹치지 않게) */
  #edSaveState{
    position:absolute; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:5;
    font-size:10.5px; color:var(--ink-dim); pointer-events:none;
    background:rgba(6,10,20,.75); border:1px solid var(--line); border-radius:999px; padding:5px 11px;
  }
  #edSaveState b{color:#5cff8a;}
  #edSaveState.dirty b{color:var(--gold);}

  /* ---------- 제작 슬롯 선택 ---------- */
  #scSlots{justify-content:flex-start; align-items:stretch; gap:12px; padding:16px 18px; text-align:left;}
  .sl-head{display:flex; align-items:flex-start; gap:12px; flex:none;}
  .sl-title{font-size:17px; font-weight:800; margin-top:3px;}
  .sl-sub{font-size:11.5px; color:var(--ink-dim); margin-top:4px;}
  .sl-head .hbtn{margin-left:auto; flex:none;}
  .slots{
    flex:1; min-height:0; overflow-y:auto; display:grid; gap:11px; align-content:start;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  }
  .slot{
    border:1px solid var(--line); border-radius:14px; overflow:hidden; cursor:pointer;
    background:linear-gradient(180deg,var(--panel2),var(--panel));
    display:flex; flex-direction:column; transition:border-color .15s, transform .1s;
  }
  .slot:hover{border-color:rgba(58,224,255,.5); transform:translateY(-2px);}
  .slot .sthumb{height:96px; position:relative; background:#070c18; border-bottom:1px solid var(--line);}
  .slot .sthumb canvas{position:absolute; inset:0; width:100%; height:100%;}
  .slot .sno{
    position:absolute; top:7px; left:8px; font-size:9px; font-weight:800; letter-spacing:.14em;
    color:var(--ink-dim); background:rgba(6,10,20,.7); border:1px solid var(--line);
    border-radius:5px; padding:2px 6px;
  }
  .slot .sbody{padding:10px 12px 11px;}
  .slot .sname{font-size:13px; font-weight:800; display:flex; align-items:center; gap:6px; min-width:0;}
  .slot .sname span.t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .slot .smeta{font-size:10.5px; color:var(--ink-dim); margin-top:4px; line-height:1.6;}
  .slot .sacts{display:flex; gap:5px; margin-top:9px;}
  .slot .sacts .btn{flex:1; min-width:0; padding:7px 8px; font-size:11.5px;}
  .slot .sacts .btn.del{flex:0 0 auto; color:var(--foe); border-color:rgba(255,92,106,.4);}
  .slot.empty .sthumb{display:grid; place-items:center;}
  .slot.empty .eico{font-size:26px; opacity:.35;}
  .spill{font-size:8.5px; font-weight:800; padding:1px 5px; border-radius:4px; border:1px solid currentColor; flex:none;}
  .spill.ok{color:#5cff8a;}
  .spill.warn{color:var(--gold);}
  body.compact #scSlots{padding:10px 12px; gap:9px;}
  body.compact .slot .sthumb{height:76px;}
  #edPanel, #edLanePanel{
    position:absolute; left:12px; bottom:calc(46px + env(safe-area-inset-bottom));
    display:none; flex-direction:column; gap:6px; pointer-events:auto;
    background:rgba(13,21,38,.94); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
    max-width:min(calc(66 * var(--vw)), 300px);
  }
  #edLanePanel{left:auto; right:12px;}
  #edPanel.on, #edLanePanel.on{display:flex;}
  #edPanel .btn, #edLanePanel .btn{min-width:0; padding:8px 10px; font-size:12px;}
  #edPanel .t, #edLanePanel .t{font-weight:800; font-size:13px;}
  .lane-btns{display:grid; grid-template-columns:1fr 1fr; gap:5px;}
  .lane-btns .btn.sel{border-color:var(--dev); color:var(--dev);}
  .pdesc{font-size:11px; color:var(--ink-dim); line-height:1.55; max-width:230px;}
  #edHint{
    position:absolute; bottom:calc(8px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
    font-size:10.5px; color:var(--ink-dim); background:rgba(13,21,38,.8); border-radius:999px;
    padding:5px 14px; white-space:nowrap; max-width:calc(96 * var(--vw)); overflow:hidden; text-overflow:ellipsis;
  }

  /* ---------- 사령관 가이드 & 인터랙티브 튜토리얼 ---------- */
  .guide-wrap{display:flex; align-items:flex-end; gap:10px; width:min(calc(94 * var(--vw)),560px); margin-bottom:calc(4 * var(--vh));}
  .guide-char{
    font-size:min(110px,calc(20 * var(--vw))); line-height:1;
    filter:drop-shadow(0 0 24px rgba(58,224,255,.55));
    animation:gBob 2.4s ease-in-out infinite;
  }
  @keyframes gBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .guide-bubble{
    flex:1; background:linear-gradient(180deg,var(--panel2),var(--panel));
    border:1px solid rgba(58,224,255,.45); border-radius:16px 16px 16px 4px;
    padding:14px 16px; text-align:left; box-shadow:0 0 26px rgba(58,224,255,.16);
  }
  .guide-name{font-weight:800; font-size:13px; color:var(--me); margin-bottom:6px;}
  .guide-tag{font-size:10px; color:#0a1120; background:var(--gold); border-radius:999px; padding:2px 8px; letter-spacing:.08em; margin-left:6px;}
  .guide-text{font-size:14px; line-height:1.7;}
  .guide-next{margin-top:10px; font-size:11px; color:var(--ink-dim); animation:gBlink 1.2s infinite;}
  @keyframes gBlink{50%{opacity:.35}}
  #tutBar{
    position:absolute; bottom:calc(122px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
    display:none; align-items:center; gap:8px; z-index:6; pointer-events:auto; cursor:pointer;
    background:rgba(13,21,38,.93); border:1px solid rgba(58,224,255,.5); border-radius:999px;
    padding:9px 16px; font-size:13px; font-weight:700; max-width:calc(92 * var(--vw));
    box-shadow:0 0 18px rgba(58,224,255,.18);
  }
  #tutBar.on{display:flex;}
  #tutBar .tchar{font-size:20px;}
  .tut-glow{
    border-color:var(--gold) !important;
    animation:tutGlow 1s ease-in-out infinite !important;
  }
  @keyframes tutGlow{
    0%,100%{box-shadow:0 0 6px rgba(255,201,77,.35);}
    50%{box-shadow:0 0 20px rgba(255,201,77,.85);}
  }
  /* 아이템 (소모품) */
  .boost-row{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; width:100%;}
  .boostchip{min-width:0; padding:8px 12px; font-size:12px;}
  .boostchip.sel{border-color:var(--gold); color:var(--gold); box-shadow:0 0 10px rgba(255,201,77,.25);}

  /* ---------- 출격 준비 팝업 (가로 844×390 — 세로가 귀하므로 2단) ---------- */
  /* body.compact .mpanel(320px 고정)보다 구체적이어야 2단이 유지된다 */
  .mpanel.launch, body.compact .mpanel.launch{
    width:min(calc(97 * var(--vw)), 830px); max-width:none;
    max-height:calc(97 * var(--vh)); padding:10px 12px; gap:7px;
    align-items:stretch; text-align:left; overflow:hidden;
  }
  .launch-head{display:flex; align-items:center; gap:12px;}
  .launch-title{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .launch-stage{font-size:15px; font-weight:800; letter-spacing:.04em; color:#fff; line-height:1.25;}
  .fogbadge{
    display:none; align-items:center; gap:6px; margin-left:auto; white-space:nowrap;
    padding:6px 12px; border-radius:999px; font-size:11.5px; font-weight:700; color:#a8c6ee;
    border:1px solid rgba(122,166,232,.45); background:rgba(60,96,150,.18);
  }
  .fogbadge.on{display:inline-flex;}
  .fogbadge span{font-weight:400; font-size:10.5px; color:#7f9ac4;}
  .xbtn{
    width:28px; height:28px; flex:0 0 auto; border-radius:8px; border:1px solid var(--line);
    background:var(--panel); color:var(--ink-dim); font-size:13px; cursor:pointer; margin-left:auto;
  }
  .fogbadge.on + .xbtn{margin-left:0;}
  .launch-body{display:flex; gap:12px; align-items:stretch; min-height:0;}
  .launch-map{
    width:min(46%, 380px); flex:0 0 auto; position:relative; display:flex; flex-direction:column;
    border:1px solid var(--line); border-radius:11px; overflow:hidden;
    background:linear-gradient(180deg,#080e1c,#050912);
  }
  .launch-map canvas{display:block; width:100%; flex:1; min-height:0;}
  .maptag{position:absolute; top:6px; left:8px; font-size:8.5px; letter-spacing:.16em; color:var(--ink-dim);}
  /* 보상 배율 — 미리보기 우측 상단 (LIVE PREVIEW 태그와 마주보는 자리) */
  .mapmult{
    position:absolute; top:5px; right:7px; z-index:2;
    font-size:9.5px; font-weight:800; color:var(--gold); letter-spacing:.02em;
    padding:2px 7px; border-radius:999px;
    border:1px solid rgba(255,201,77,.3); background:rgba(255,201,77,.08);
  }
  .maplegend{
    display:flex; gap:8px; flex-wrap:wrap; justify-content:center; font-size:9px; color:var(--ink-dim);
    padding:4px 5px; border-top:1px solid var(--line);
  }
  .launch-ctl{flex:1; display:flex; flex-direction:column; gap:8px; min-width:0;}
  .lsect{display:flex; flex-direction:column; gap:5px;}
  .lsect-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px;}
  .lsect-t{font-size:10px; font-weight:700; letter-spacing:.14em; color:var(--ink-dim);}
  .lsect-n{font-size:9.5px; color:var(--gold); font-weight:700;}
  .launch-note{font-size:9.5px; color:var(--ink-dim); text-align:center; margin-top:auto; min-height:13px;}
  .launch .diff-list, body.compact .launch .diff-list{gap:4px;}
  .launch .diff-btn, body.compact .launch .diff-btn{
    min-width:0; font-size:11.5px; gap:6px; padding:5px 10px; letter-spacing:.02em;
  }
  .launch .diff-btn small{font-size:9px;}
  .launch .spdchip, body.compact .launch .spdchip{min-width:0; padding:6px 8px; font-size:10.5px;}
  .launch .boost-row{justify-content:flex-start;}
  /* min-width를 0으로 눌러야 칩이 내용 크기로 줄어 한 줄에 더 들어간다 (body.compact .btn = 180px) */
  .launch .boostchip, body.compact .launch .boostchip{
    min-width:0; padding:5px 7px; font-size:10px; letter-spacing:0; white-space:nowrap;
  }
  /* 스킬 장착 칩 — 아이템(금색)과 구분되게 시안 계열 */
  .skillchip.sel{border-color:var(--me); color:var(--me); box-shadow:0 0 10px rgba(58,224,255,.22);}
  .skillchip.base{border-style:dashed;}
  /* 이번 맵에 쓸모 있는 항목 강조 (예: 안개 맵의 탐사 위성) */
  .boostchip.rec{border-color:rgba(122,166,232,.5); box-shadow:0 0 10px rgba(122,166,232,.16);}
  @keyframes chipShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
  .chipShake{animation:chipShake .3s;}

  /* ---------- 전투 생성기 (랜덤 전투) — 출격 준비 팝업과 같은 2단 문법 ---------- */
  .gen-panel{
    width:min(calc(97 * var(--vw)), 920px); max-height:calc(96 * var(--vh));
    display:flex; flex-direction:column; gap:10px; padding:13px 16px; text-align:left;
    border:1px solid var(--line); border-radius:16px; overflow:hidden;
    background:linear-gradient(180deg, rgba(18,28,51,.97), rgba(10,17,32,.98));
    box-shadow:0 0 50px rgba(0,0,0,.5);
  }
  .gen-head{display:flex; align-items:center; gap:12px; flex:0 0 auto;}
  /* .gen-left와 같은 폭 규칙(min(42%,380px)) — 요약 칩 우측 끝이 미리보기 패널 우측 끝과 일치한다 */
  .gen-headleft{
    width:min(42%, 380px); flex:0 0 auto; min-width:0;
    display:flex; align-items:center; gap:10px;
  }
  .gen-headleft .gen-summary{margin-left:auto;}
  .gen-headleft .eyebrow{white-space:nowrap; letter-spacing:.2em;}
  .gen-title-wrap{display:flex; flex-direction:column; gap:1px;}
  .gen-title{font-size:16px; font-weight:800; letter-spacing:.05em; color:#fff; line-height:1.2;}
  /* 요약은 타이틀 바로 옆에 붙여 "무엇을 만들고 있는지"를 한 덩어리로 읽히게 하고,
     조작 버튼(다시 생성·전투 개시·✕)은 오른쪽 끝으로 몰아 역할을 분리한다 */
  .gen-summary{
    font-size:11px; font-weight:700; color:var(--ink-dim); white-space:nowrap;
    padding:6px 13px; border-radius:999px; border:1px solid var(--line); background:rgba(6,10,20,.5);
  }
  .gen-summary b{color:var(--me); font-weight:800;}
  .gen-body{display:flex; gap:16px; min-height:0; flex:1;}
  /* 좌측은 맵 전용 — 버튼을 아래 붙이지 않아야 미리보기가 세로를 다 쓴다 */
  .gen-left{width:min(42%, 380px); flex:0 0 auto; display:flex; min-height:0;}
  .gen-left .launch-map{flex:1; min-height:130px;}
  .gen-right{flex:1; display:flex; flex-direction:column; gap:7px; min-width:0;}
  .gen-grid{display:flex; flex-direction:column; gap:7px;}
  /* 라벨을 칩 왼쪽에 세워 한 줄씩 읽히게 — 2단 그리드는 칩이 접혀 오히려 답답해진다 */
  .gen-right .lsect{flex-direction:row; align-items:flex-start; gap:10px;}
  /* 라벨 폭은 "특수 항성계"가 한 줄로 들어가는 최소치 — 나머지는 칩 줄 여유로 넘긴다 */
  .gen-right .lsect-h{
    flex:0 0 74px; flex-direction:column; align-items:flex-start; gap:1px; padding-top:7px;
  }
  .gen-right .lsect-t{white-space:nowrap;}
  .grow{display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0;}
  /* 헤더 우측에 둔다 — 미리보기 아래에 붙이면 맵이 눌리고 버튼이 몰려 보인다 */
  .gen-actions{display:flex; gap:7px; flex:0 0 auto; margin-left:auto;}
  /* ✕는 조작 버튼 묶음의 일부 — auto 마진을 또 주면 버튼과 ✕ 사이가 벌어진다 */
  .gen-head .xbtn{margin-left:4px;}
  /* 생성기 패널은 폭이 고정이라 칩 여백이 넓으면 기믹 줄이 넘친다 — 여기서만 조금 조인다 */
  .gen-right .gchip{padding:7px 9px; gap:4px;}
  /* 한 줄 안에서 칩 묶음을 나눠 배치 (적 세력 | 난이도) */
  .ginline{display:flex; gap:6px; flex:0 0 auto;}
  /* 난이도 묶음은 줄 오른쪽 끝으로 밀어 적 세력과 확실히 떨어뜨린다 (margin-left:auto) */
  .gsub{
    font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--ink-dim);
    align-self:center; white-space:nowrap;
    margin-left:auto; padding-left:14px; margin-right:5px;
    border-left:1px solid var(--line);
  }
  /* 난이도 칩은 계급 숫자만 담아 좁다 — 최소 폭을 줘 눌리지 않게 */
  #segDiff .gchip{min-width:34px; justify-content:center; font-size:12px;}
  .gen-actions .btn, body.compact .gen-actions .btn{
    min-width:0; padding:9px 14px; font-size:12px; letter-spacing:.05em; white-space:nowrap;
  }
  .gen-actions .gen-go{padding-left:20px; padding-right:20px;}
  /* 설정 칩 — 단일선택은 시안, 다중선택(장치·기믹)은 금색으로 성격을 구분한다 */
  .gchip{
    appearance:none; border:1px solid var(--line); border-radius:8px; cursor:pointer;
    background:linear-gradient(180deg, var(--panel2), var(--panel));
    color:var(--ink); font:inherit; font-size:11.5px; font-weight:700; letter-spacing:0;
    padding:8px 11px; min-width:0; white-space:nowrap;
    display:inline-flex; align-items:center; gap:5px;
    transition:transform .08s ease, border-color .15s, box-shadow .18s, color .15s;
  }
  .gen-right .lsect{gap:7px;}
  .gen-right .lsect-t{font-size:11px; letter-spacing:.16em;}
  .gen-right .lsect-n{font-size:10px;}
  .gchip:active{transform:scale(.96);}
  .gchip:hover:not([disabled]){border-color:rgba(58,224,255,.45);}
  .gchip .gs{font-size:9.5px; font-weight:600; color:var(--ink-dim);}
  .gchip.sel{border-color:var(--me); color:var(--me); box-shadow:0 0 10px rgba(58,224,255,.22);}
  .gchip.sel .gs{color:rgba(58,224,255,.72);}
  .gchip.on{border-color:var(--gold); color:var(--gold); box-shadow:0 0 10px rgba(255,201,77,.2);}
  /* 옵션 설명 — 누르거나 올려둔 칩의 효과를 한 줄로 알려준다 */
  .gen-desc{
    margin-top:auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:7px;
    min-height:34px; padding:8px 12px; border-radius:10px;
    border:1px solid var(--line); background:rgba(6,10,20,.5);
    font-size:11px; line-height:1.6;
  }
  .gen-desc .gd-t{font-weight:800; color:var(--me); font-size:11.5px; white-space:nowrap;}
  .gen-desc .gd-d{color:var(--ink-dim); flex:1; min-width:140px;}
  .gen-desc .gd-hint{color:var(--ink-dim); opacity:.6;}
  .gen-desc .gd-state{
    font-size:9px; font-weight:800; padding:1px 6px; border-radius:99px;
    border:1px solid currentColor; white-space:nowrap;
  }
  .gen-desc .gd-state.on{color:var(--gold);}
  .gen-desc .gd-state.off{color:var(--ink-dim);}
  body.compact .gen-desc{min-height:0; padding:7px 10px; font-size:10.5px; gap:5px;}
  body.compact .gen-desc .gd-t{font-size:11px;}
  .gchip.on .gs{color:rgba(255,201,77,.7);}
  .gchip[disabled]{opacity:.3; cursor:default;}

  /* ---------- modals (광고/결제 목업) ---------- */
  .modal{
    position:fixed; inset:0; z-index:50; display:none; align-items:center; justify-content:center;
    background:rgba(3,6,12,.85); padding:24px;
  }
  .modal.on{display:flex;}
  .mpanel{
    display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
    background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
    border-radius:16px; padding:26px 22px; width:min(calc(92 * var(--vw)),340px);
  }
  .adbox{
    width:100%; border-radius:12px; padding:26px 14px; font-size:13px; color:var(--ink-dim); line-height:1.6;
    background:repeating-linear-gradient(45deg, #101a30 0 14px, #0c1425 14px 28px);
    border:1px dashed rgba(140,170,255,.35);
  }
  .adbox .adspin{font-size:34px; animation:spin 3s linear infinite; display:inline-block;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .adcount{font-size:22px; font-weight:800; color:var(--gold);}

  /* ---------- 기간 종료 안내 (체험·대여 만료 → 구매 유도) ---------- */
  /* 구매 확인(#buyOverlay)·광고(#adOverlay)가 이 위에 겹쳐 떠야 한다 */
  #expOverlay{z-index:48;}
  .mpanel.exp{gap:10px;}
  .exp-top{display:flex; align-items:center; justify-content:center; gap:9px; width:100%;}
  .exp-count{
    font-size:10px; font-weight:800; color:var(--ink-dim);
    border:1px solid var(--line); border-radius:99px; padding:2px 8px;
  }
  .exp-pv{
    width:74px; height:74px; border-radius:14px; overflow:hidden;
    background:#0a1120; border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:36px;
  }
  .exp-pv canvas{width:100%; height:100%; object-fit:cover;}
  .exp-name{font-size:15px; font-weight:800;}
  .exp-price{font-size:19px; font-weight:800; color:var(--gold);}
  /* .btn 기본 min-width(230px)는 이 좁은 패널에서 넘치므로 전부 해제한다 */
  #expOverlay .btn{min-width:0; width:100%; padding:11px 12px; font-size:13px; letter-spacing:.02em;}
  .exp-btns{display:flex; gap:8px; width:100%;}
  .exp-btns .btn{flex:1;}
  #expOverlay .btn.ad{
    border-color:rgba(58,224,255,.34); color:var(--me);
    background:linear-gradient(180deg, rgba(58,224,255,.13), rgba(58,224,255,.05));
  }
  #expOverlay .btn.ghost{background:transparent; color:var(--ink-dim); border-color:transparent; font-size:12.5px;}
  #expOverlay .btn:disabled{opacity:.45; cursor:default;}
  @media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important;} }

/* 실기기(터치)에서는 폰 미리보기 버튼 불필요 */
@media (pointer: coarse) { #btnPhone { display: none; } }

/* 📱 강제 가로 — 네이티브 회전 잠금이 거부되는 모바일 브라우저에서 화면 자체를 90° 돌린다.
   (포인터 좌표 역변환은 game.js의 cpos()에서 처리) */
body.force-landscape{ overflow:hidden; }
body.force-landscape #stage{
  position:fixed; top:0; left:100%;
  transform-origin:0 0; transform:rotate(90deg);
}
/* 상단 테스트 버튼(폰 미리보기·아트 전환)은 #stage 밖이라 회전에서 제외됨 → 모바일에서는 숨김 */
@media (pointer: coarse){ #btnPhone, #btnArt{ display:none; } }

/* 🎬 타이틀 뒤에서 데모 전투가 돌아가므로 배경을 옅게 — 전장이 비쳐 보이게 한다 */
body.demo #scTitle{
  background:radial-gradient(120% 90% at 50% 0%, rgba(6,10,20,.10), rgba(6,10,20,.40) 70%);
  backdrop-filter:none;
}
/* 전장 위에서도 글씨가 묻히지 않도록 */
body.demo #scTitle .eyebrow, body.demo #scTitle .sub{text-shadow:0 1px 7px rgba(0,0,0,.95);}
body.demo #scTitle .shard-chip{background:rgba(8,12,24,.72);}

/* 가로 배치에서는 로고·문구가 놓이는 왼쪽만 어둡게 깔아 전장 위에서도 또렷하게 */
body.demo.wide #scTitle{
  background:
    linear-gradient(90deg, rgba(6,10,20,.88), rgba(6,10,20,.62) 26%, rgba(6,10,20,.16) 48%, rgba(6,10,20,.08)),
    radial-gradient(120% 90% at 50% 0%, rgba(6,10,20,.05), rgba(6,10,20,.26) 70%);
}

/* ══════════════════════════════════════════════════════════════
   타이틀 화면 (확정 디자인) — 유리판 메뉴 + 그라데이션 로고
   배경에서는 데모 전투가 돌아가므로 왼쪽만 어둡게 깔아 가독성을 잡는다.
   ══════════════════════════════════════════════════════════════ */
#scTitle{justify-content:space-evenly; gap:3%; padding-left:4%; padding-right:4%;}

/* ── 로고 블록 ── */
#scTitle .brand{gap:9px; position:relative; padding-left:18px;}
#scTitle .brand::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:3px; border-radius:3px;
  background:linear-gradient(180deg, transparent, var(--me) 20%, var(--me) 70%, transparent);
  box-shadow:0 0 14px rgba(58,224,255,.55);
}
#scTitle .eyebrow{font-size:9.5px; letter-spacing:.56em; color:rgba(223,232,255,.45);}
#scTitle h1.logo{
  font-size:clamp(34px, calc(14.5 * var(--vh)), 68px);
  line-height:1.02; margin:0; letter-spacing:normal; text-shadow:none; font-weight:400;
}
#scTitle h1.logo .l1{
  display:block; font-weight:200; letter-spacing:.5em; text-indent:.5em;
  font-size:.52em; color:rgba(200,225,255,.78); margin-bottom:3px;
}
#scTitle h1.logo .l2{
  display:block; font-weight:900; letter-spacing:.02em;
  background:linear-gradient(100deg,#ffffff 0%,#bff2ff 25%,#3ae0ff 55%,#7fe9ff 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 20px rgba(58,224,255,.6));
  animation:lgSheen 7s ease-in-out infinite;
}
@keyframes lgSheen{0%,100%{background-position:0% 0;}50%{background-position:100% 0;}}
#scTitle .rule{
  display:flex; align-items:center; gap:10px; width:100%; margin-top:2px;
  font-size:11px; letter-spacing:.5em; color:rgba(180,205,255,.55); font-weight:700;
}
#scTitle .rule::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(58,224,255,.5), transparent);
}
#scTitle .shard-chip{
  border:1px solid rgba(255,201,77,.35); border-radius:999px;
  background:rgba(255,201,77,.08); font-size:12.5px; padding:6px 15px; letter-spacing:.02em;
}

/* ── 유리판 메뉴 ── */
#scTitle .menu-col{
  gap:0; padding:10px 6px; border-radius:16px;
  background:linear-gradient(180deg, rgba(18,28,51,.5), rgba(9,14,26,.42));
  border:1px solid rgba(160,190,255,.10);
  backdrop-filter:blur(14px); box-shadow:0 18px 50px rgba(0,0,0,.45);
}
#scTitle .menu-col .btn{
  position:relative; min-width:230px; border:0; border-radius:10px; background:none; box-shadow:none;
  padding:9px 14px; display:flex; align-items:center; gap:10px; text-align:left;
  border-bottom:1px solid rgba(160,190,255,.07);
}
#scTitle .menu-col .btn.last-item{border-bottom:0;}
#scTitle .menu-col .btn:hover{background:rgba(160,190,255,.06);}
#scTitle .menu-col .btn .k{font-size:14px; font-weight:700;}
#scTitle .menu-col .btn .s{font-size:10px; color:var(--ink-dim); margin-left:auto;}
#scTitle .menu-col .btn .ch{font-size:15px; color:rgba(160,190,255,.35); margin-left:6px;}
#scTitle .menu-col .btn.primary{
  background:linear-gradient(90deg, rgba(58,224,255,.16), rgba(58,224,255,.02));
  border-bottom-color:transparent;
}
#scTitle .menu-col .btn.primary .k{color:var(--me);}
#scTitle .menu-col .btn.gold .k{color:var(--gold);}
#scTitle .menu-col > a,
#scTitle .foot-row a{
  text-align:center; font-size:9px; color:var(--ink-dim); text-decoration:none;
  padding:2px; opacity:.35; margin-top:6px;
}
/* 격납고 안에 받을 일일 상자가 있으면 알림 점 */
#scTitle .btn .dot{
  position:absolute; top:6px; right:8px; width:7px; height:7px; border-radius:50%;
  background:#ff5c6a; box-shadow:0 0 8px rgba(255,92,106,.9); animation:dotPulse 1.6s infinite;
}
@keyframes dotPulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ══════════════════════════════════════════════════════════════
   격납고 — 상단 고정(제목·재화) + 탭 + 가운데만 스크롤
   가로 화면에서 세로 공간이 귀하므로 헤더를 한 줄로 눌러 카드 영역을 최대한 넓힌다.
   ══════════════════════════════════════════════════════════════ */
#scHangar{
  justify-content:flex-start; align-items:stretch; gap:8px;
  padding:10px 3% calc(10px + env(safe-area-inset-bottom));
}
#scHangar .pane-top{display:flex; align-items:center; gap:10px; flex:none;}
#scHangar .pane-top .hbtn{pointer-events:auto; padding:6px 12px; font-size:15px;}
#scHangar .pane-title{font-size:16px; font-weight:800; letter-spacing:.16em; color:#fff;}
#scHangar .pane-top .shard-chip{margin-left:auto;}
#scHangar .tabs{display:flex; gap:6px; flex:none;}
#scHangar .tabs .tab{
  flex:1; cursor:pointer; appearance:none; font:inherit; font-size:12px; font-weight:700;
  padding:8px 6px; border-radius:10px; letter-spacing:.04em; position:relative;
  color:var(--ink-dim); background:rgba(13,21,38,.55); border:1px solid var(--line);
  transition:.15s;
}
#scHangar .tabs .tab:hover{color:var(--ink); border-color:rgba(58,224,255,.35);}
#scHangar .tabs .tab.on{
  color:var(--me); border-color:rgba(58,224,255,.6); background:rgba(58,224,255,.10);
  box-shadow:0 0 12px rgba(58,224,255,.15) inset;
}
#scHangar .tabs .tab .dot{
  position:absolute; top:5px; right:7px; width:6px; height:6px; border-radius:50%;
  background:#ff5c6a; box-shadow:0 0 8px rgba(255,92,106,.9); animation:dotPulse 1.6s infinite;
}
/* 카드 영역만 스크롤 — 남은 높이를 전부 차지 */
#scHangar .cards{
  flex:1 1 auto; min-height:0; max-height:none; width:100%; overflow-y:auto;
  align-content:start; padding-right:2px;
}
body.compact #scHangar .cards{max-height:none;}
#scHangar .cards::-webkit-scrollbar{width:5px;}
#scHangar .cards::-webkit-scrollbar-thumb{background:rgba(140,170,255,.25); border-radius:3px;}

/* 꾸미기 카드 — 실제 렌더링 미리보기 썸네일 + 장착 배지 */
#scHangar .card .ico.prev{width:auto; display:flex; align-items:center;}
#scHangar .card .ico.prev{width:auto; flex:none;}
#scHangar .cos-prev{border-radius:9px; border:1px solid rgba(140,170,255,.22); display:block; box-shadow:0 2px 10px rgba(0,0,0,.4);}
#scHangar .onbadge{
  font-size:9px; font-weight:800; letter-spacing:.06em; color:#04121a;
  background:var(--me); border-radius:999px; padding:2px 7px; margin-left:5px; vertical-align:2px;
}

/* 상점 안내 문구 + 메뉴 화면 토스트 */
#scHangar .shop-note{
  grid-column:1/-1; font-size:11px; color:var(--ink-dim); line-height:1.7;
  border-left:2px solid rgba(58,224,255,.35); padding:8px 12px;
  background:rgba(58,224,255,.05); border-radius:0 8px 8px 0;
}
#scHangar .card .act{display:flex; gap:5px; align-items:center;}
#scHangar .card .act .btn{min-width:0; padding:7px 10px; font-size:11.5px; line-height:1.3; text-align:center;}
#uiToast{
  position:fixed; left:50%; bottom:14px; transform:translateX(-50%) translateY(10px);
  z-index:260; max-width:88%; text-align:center;
  padding:10px 18px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:rgba(13,21,38,.96); border:1px solid rgba(255,201,77,.5); color:var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
}
#uiToast.on{opacity:1; transform:translateX(-50%) translateY(0);}

/* 결제 확인 팝업 — 상품 구성(혜택) 목록 */
#payPerks{list-style:none; margin:2px 0 4px; padding:0; display:flex; flex-direction:column; gap:6px; width:100%;}
#payPerks li{
  font-size:11.5px; line-height:1.55; color:var(--ink); text-align:left;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:9px;
  padding:7px 11px 7px 26px; position:relative;
}
#payPerks li::before{content:'✓'; position:absolute; left:10px; top:7px; color:var(--me); font-weight:800; font-size:11px;}
#payPerks li b{color:var(--gold);}

/* 결제/구매 팝업 — 내용이 길어도 버튼이 항상 화면 안에 남게 (가로 화면은 세로가 좁다) */
#payOverlay .mpanel, #buyOverlay .mpanel{
  max-height:94%; display:flex; flex-direction:column; gap:9px;
}
#payPerks{
  flex:0 1 auto; min-height:0; overflow-y:auto;
  max-height:calc(34 * var(--vh));
}
#payOverlay .mpanel > div:last-of-type,
#buyOverlay .mpanel > div:last-of-type{flex:none;}
body.compact #payOverlay .sub, body.compact #buyOverlay .sub{font-size:9.5px; line-height:1.4;}
#payPerks::-webkit-scrollbar, #scHangar .cards::-webkit-scrollbar{width:5px;}
#payPerks::-webkit-scrollbar-thumb{background:rgba(140,170,255,.25); border-radius:3px;}

/* 꾸미기 미리보기 — 격납고를 잠시 감추고 뒤에서 도는 전투에 스타일을 입혀 보여준다 */
body.previewing #scHangar{opacity:0; pointer-events:none;}
#prevBar{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(12px);
  z-index:240; display:none; align-items:center; gap:10px;
  padding:9px 12px 9px 16px; border-radius:999px;
  background:rgba(9,14,26,.94); border:1px solid rgba(58,224,255,.45);
  box-shadow:0 14px 40px rgba(0,0,0,.55); opacity:0; transition:opacity .2s, transform .2s;
}
#prevBar.on{display:flex; opacity:1; transform:translateX(-50%) translateY(0);}
#prevBar .pv-t{font-size:10px; letter-spacing:.24em; color:var(--ink-dim); font-weight:700;}
#prevBar .pv-n{font-size:13px; font-weight:800; color:var(--me);}
#prevBar .btn{min-width:0; padding:7px 14px; font-size:12px;}

/* 상점 카드 버튼 — 줄바꿈 금지(줄바꿈되면 카드가 세로로 커진다) + 미리보기는 아이콘만 */
#scHangar .card .act .btn{white-space:nowrap;}
#scHangar .card .act .btn.eye{
  min-width:0; width:34px; padding:7px 0; font-size:14px; line-height:1;
  border-color:rgba(140,170,255,.28); color:var(--ink-dim);
}
#scHangar .card .act .btn.eye:hover{border-color:rgba(58,224,255,.6); color:var(--me);}
/* 📺 리워드 광고 무료 지급 — 유료(gold) 버튼과 구분되게 청록 계열 + 폭을 좁게(카드 글 영역을 뺏지 않게) */
#scHangar .card .act .btn.ad{
  min-width:0; width:44px; padding:6px 0; font-size:13px; line-height:1.15;
  border-color:rgba(58,224,255,.34); color:var(--me);
  background:linear-gradient(180deg, rgba(58,224,255,.13), rgba(58,224,255,.05));
}
#scHangar .card .act .btn.ad:hover:not(:disabled){border-color:rgba(58,224,255,.7);}
#scHangar .card .act .btn.ad .num{display:block; font-size:9.5px; font-weight:800; letter-spacing:0;}
/* 📺 안내문은 설명과 섞이지 않게 항상 새 줄로 */
#scHangar .card .d .adline{display:block; margin-top:2px; color:var(--me);}
#scHangar .card .d .adline b{color:var(--me);}
#scHangar .card{padding:9px 11px; gap:10px;}
#scHangar .card .d{font-size:11px; line-height:1.5;}

/* 미리보기 바 — 내 함대 색상 표시 */
#prevBar .pv-me{
  display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--ink-dim);
  padding-left:10px; border-left:1px solid rgba(140,170,255,.22);
}
#prevBar .pv-me i{width:11px; height:11px; border-radius:50%; display:inline-block;}

/* ⚙ 설정 화면 */
#scTitle .foot-row{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px;}
#scTitle .foot-btn{
  appearance:none; cursor:pointer; font:inherit; font-size:10px; font-weight:700; letter-spacing:.04em;
  background:none; border:1px solid var(--line); border-radius:999px; color:var(--ink-dim); padding:4px 12px;
}
#scTitle .foot-btn:hover{border-color:rgba(58,224,255,.5); color:var(--me);}
#setOverlay .set-panel{width:min(94vw,420px); max-height:94%; display:flex; flex-direction:column; gap:8px;}
#setOverlay .set-title{font-size:16px; font-weight:800; letter-spacing:.1em;}
#setOverlay .set-body{flex:1 1 auto; min-height:0; overflow-y:auto; width:100%; text-align:left; padding-right:4px;}
#setOverlay .set-body::-webkit-scrollbar{width:5px;}
#setOverlay .set-body::-webkit-scrollbar-thumb{background:rgba(140,170,255,.25); border-radius:3px;}
#setOverlay .set-sec{font-size:11.5px; font-weight:800; color:var(--ink); margin:12px 0 6px; letter-spacing:.04em;}
#setOverlay .set-sec:first-child{margin-top:0;}
.vol-row{display:flex; gap:4px;}
.vol-row .vol{
  flex:1; appearance:none; cursor:pointer; font:inherit; font-size:12px; font-weight:800;
  padding:8px 0; border-radius:8px; border:1px solid var(--line);
  background:rgba(13,21,38,.6); color:var(--ink-dim);
}
.vol-row .vol.on{background:rgba(58,224,255,.16); border-color:rgba(58,224,255,.6); color:var(--me);}
.vol-row .vol.off{flex:0 0 42px;}
#setOverlay .acc-box{
  font-size:11px; line-height:1.7; border-radius:10px; padding:9px 12px; margin:2px 0 8px;
  border:1px solid var(--line); background:rgba(255,255,255,.03);
}
#setOverlay .acc-box.warn{border-color:rgba(255,201,77,.45); background:rgba(255,201,77,.06); color:#e6d9b8;}
#setOverlay .acc-box.on{border-color:rgba(58,224,255,.45); background:rgba(58,224,255,.06);}
#setOverlay .acc-code{
  font-size:22px; font-weight:900; letter-spacing:.3em; text-align:center; color:var(--me);
  margin:8px 0 4px; font-variant-numeric:tabular-nums;
}
#setOverlay .acc-sub{font-size:10px; color:var(--ink-dim); text-align:center;}
#setOverlay .set-btns{display:flex; gap:6px; margin-bottom:8px;}
#setOverlay .set-btns .btn{flex:1; min-width:0; padding:9px 10px; font-size:12px; text-decoration:none; text-align:center;}
#setOverlay .set-btns input{
  flex:1; min-width:0; padding:9px 11px; border-radius:10px; border:1px solid var(--line);
  background:var(--void); color:var(--ink); font:inherit; font-size:13px;
}
#setOverlay .biz{
  font-size:9.5px; line-height:1.75; color:var(--ink-dim); margin-top:12px;
  border:1px solid var(--line); border-radius:9px; padding:8px 11px; background:rgba(255,255,255,.02);
}

/* 타이틀 하단 — 설정 버튼과 방침 링크를 같은 톤으로 */
#scTitle .foot-row a{
  font-size:10px; letter-spacing:.04em; opacity:.55; padding:4px 6px; margin-top:0;
  color:var(--ink-dim); text-decoration:none; border-bottom:1px solid transparent;
}
#scTitle .foot-row a:hover{color:var(--me); border-bottom-color:rgba(58,224,255,.4);}
#scTitle .foot-btn{opacity:.75;}

/* ==================================================================
   맵 광장 개편 — ①지도/세력  ②주간챌린지+맵목록 2단 대시보드
   화면 전체를 쓰므로 .screen의 중앙정렬을 덮어쓴다.
   ================================================================== */
#scPlaza.plaza{
  justify-content:flex-start; align-items:stretch; gap:12px;
  padding:14px 18px 16px; text-align:left; overflow:hidden;
}
body.compact #scPlaza.plaza{padding:10px 12px 12px; gap:9px;}

/* ---------- 상단 바 ---------- */
.pz-topbar{display:flex; align-items:center; gap:14px; flex:none;}
.pz-brand{min-width:0;}
.pz-title{
  font-size:21px; font-weight:800; letter-spacing:.02em; line-height:1.25;
  background:linear-gradient(92deg,#fff 10%, var(--me) 55%, var(--foe2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pz-actions{margin-left:auto; display:flex; align-items:center; gap:8px;}
.pz-chip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-size:11.5px; font-weight:700; color:var(--gold);
  border:1px solid rgba(255,201,77,.32); border-radius:999px;
  padding:6px 12px; background:rgba(255,201,77,.06);
}
.pz-actions .btn{min-width:0; padding:9px 15px; font-size:12.5px; white-space:nowrap;}
.pz-actions .btn.ghost{background:transparent; color:var(--ink-dim);}
.pz-actions .btn.ghost:hover{color:var(--ink);}

/* ---------- 본문 2단 ---------- */
.pz-body{flex:1; min-height:0; display:grid; grid-template-columns:1fr 380px; gap:12px;}
.pz-side{display:flex; flex-direction:column; gap:9px; min-height:0; min-width:0;}

/* ===== ① 지도 & 세력 ===== */
.pz-stage{
  position:relative; min-width:0; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,rgba(18,28,51,.75),rgba(9,14,26,.9));
}
.pz-head{
  flex:none; display:flex; align-items:flex-start; gap:12px;
  padding:13px 16px 11px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(58,224,255,.06),transparent);
}
.pz-mapname{font-size:17px; font-weight:800; display:flex; align-items:center; gap:8px; min-width:0;}
.pz-mapname > span:first-child{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pz-sub{
  font-size:11.5px; color:var(--ink-dim); margin-top:4px; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pz-sub .dot{opacity:.4; margin:0 5px;}
.pz-act{margin-left:auto; display:flex; gap:7px; flex:none;}
.pz-act .btn{min-width:0; padding:9px 14px; font-size:12.5px;}
.pz-tag{
  font-size:9.5px; font-weight:800; letter-spacing:.06em; padding:3px 7px;
  border-radius:5px; border:1px solid currentColor; flex:none;
}
.pz-tag.mine{color:var(--me);}
.pz-tag.hard{color:#ff8c5a;}

/* 지도는 이 화면의 주인공 — 어떤 높이에서도 최소 영역을 확보한다 */
.pz-canvas{flex:1; min-height:150px; position:relative;}
#pzPrev{position:absolute; inset:0; width:100%; height:100%;}
.pz-grid{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 60% at 50% 45%, transparent 40%, rgba(6,10,20,.55) 100%),
    repeating-linear-gradient(0deg,rgba(140,170,255,.045) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,rgba(140,170,255,.045) 0 1px,transparent 1px 34px);
}
/* 제작자 서명 — 지도 우하단 구석 (헤더 공간을 지도에 돌려준다) */
.pz-author{
  position:absolute; right:11px; bottom:9px; z-index:2; pointer-events:none;
  max-width:55%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-size:11px; color:var(--ink-dim); letter-spacing:.02em;
  padding:3px 9px; border-radius:99px;
  border:1px solid rgba(140,170,255,.16); background:rgba(6,10,20,.55);
}
.pz-author b{color:var(--me); font-weight:800;}
.pz-empty{
  position:absolute; inset:0; display:none; flex-direction:column; gap:6px;
  align-items:center; justify-content:center; text-align:center;
  font-size:13px; font-weight:700; color:var(--ink-dim);
}
.pz-empty span{font-size:11px; font-weight:600; opacity:.75;}
.pz-canvas.empty .pz-empty{display:flex;}
.pz-canvas.empty #pzPrev, .pz-canvas.empty .pz-author{display:none;}

/* 세력 바 */
.pz-forces{flex:none; padding:11px 16px 13px; border-top:1px solid var(--line); background:rgba(6,10,20,.4);}
.pz-fhead{
  display:flex; align-items:center; justify-content:space-between;
  font-size:10px; letter-spacing:.18em; color:var(--ink-dim); font-weight:700; margin-bottom:8px;
}
.pz-fbar{display:flex; height:8px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.05);}
.pz-fbar i{display:block; height:100%;}
.pz-flist{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px;}
.pz-fchip{
  display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700;
  border:1px solid var(--line); border-radius:9px; padding:5px 9px 5px 7px; background:rgba(13,21,38,.75);
}
.pz-fchip .sw{width:9px; height:9px; border-radius:3px;}
.pz-fchip .n{color:var(--ink-dim); font-weight:600;}
.pz-legend{display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; font-size:10.5px; color:var(--ink-dim);}

/* ===== ② 주간 사활 챌린지 (컴팩트) ===== */
.pz-weekly{
  flex:none; position:relative; overflow:hidden;
  display:flex; align-items:center; gap:10px;
  border:1px solid rgba(255,201,77,.34); border-radius:13px; padding:9px 11px;
  background:
    radial-gradient(90% 200% at 0% 50%, rgba(255,201,77,.14), transparent 60%),
    linear-gradient(180deg,rgba(28,22,8,.9),rgba(13,21,38,.92));
}
.pz-weekly::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,231,168,.11) 48%,transparent 62%);
  transform:translateX(-60%); animation:pzSheen 5.5s ease-in-out infinite;
}
@keyframes pzSheen{0%,72%{transform:translateX(-60%)}100%{transform:translateX(140%)}}
.pz-weekly .wk-badge{
  flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  font-size:16px; background:rgba(255,201,77,.12); border:1px solid rgba(255,201,77,.3);
}
.pz-weekly .wk-main{flex:1; min-width:0;}
.pz-weekly .wk-line1{display:flex; align-items:center; gap:6px; min-width:0;}
.pz-weekly .wk-tag{
  flex:none; font-size:8px; font-weight:800; letter-spacing:.14em; color:var(--gold);
  border:1px solid rgba(255,201,77,.4); border-radius:4px; padding:1px 4px;
}
.pz-weekly .wk-name{font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pz-weekly .wk-meta{
  font-size:10px; color:var(--ink-dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pz-weekly .wk-meta b{color:#ff9d6a;}
.pz-weekly .wk-go{flex:none; min-width:0; padding:7px 11px; font-size:11.5px;}
.wk-hall{
  appearance:none; font:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:6px; width:100%;
  font-size:10.5px; color:var(--gold); margin-top:5px; padding:4px 7px;
  border:1px solid rgba(255,201,77,.22); border-radius:7px;
  background:rgba(255,201,77,.05); transition:.15s;
}
.wk-hall:hover{border-color:rgba(255,201,77,.55); background:rgba(255,201,77,.11);}
.wk-hall #wkHallTxt{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wk-hall .more{flex:none; font-weight:800; opacity:.85;}
.wk-hall .empty{color:var(--ink-dim);}
/* 낮은 화면에서 명예의 전당 줄을 접을 때 대신 노출되는 아이콘 진입점 */
.wk-hall-sm{
  display:none; flex:none; appearance:none; font:inherit; cursor:pointer;
  width:32px; height:32px; border-radius:9px; place-items:center; font-size:15px;
  border:1px solid rgba(255,201,77,.4); background:rgba(255,201,77,.09); color:var(--gold);
  position:relative; transition:.15s;
}
.wk-hall-sm:hover{background:rgba(255,201,77,.2);}
.wk-hall-sm::after{
  content:attr(data-n); position:absolute; top:-5px; right:-5px;
  font-size:8px; font-weight:800; color:#1b1200; background:var(--gold);
  border-radius:99px; padding:1px 4px; line-height:1.3;
}

/* ===== ② 맵 목록 ===== */
.pz-list-panel{
  flex:1; display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,rgba(18,28,51,.7),rgba(9,14,26,.88));
}
.pz-lhead{flex:none; padding:11px 13px 9px; border-bottom:1px solid var(--line);}
.pz-ltitle{font-size:12px; font-weight:800; letter-spacing:.06em; display:flex; align-items:center; gap:7px;}
.pz-ltitle small{margin-left:auto; font-size:10px; color:var(--ink-dim); font-weight:600; letter-spacing:0;}
.pz-reward{font-size:10px; color:var(--gold); margin-top:6px; display:none;}
.pz-segs{display:flex; gap:5px; margin-top:9px;}
.pz-seg{
  flex:1; appearance:none; font:inherit; cursor:pointer;
  font-size:10.5px; font-weight:700; color:var(--ink-dim);
  border:1px solid var(--line); border-radius:8px; padding:6px 0;
  background:rgba(13,21,38,.6); transition:.15s;
}
.pz-seg.on{color:var(--me); border-color:rgba(58,224,255,.5); background:rgba(58,224,255,.09);}
.pz-scroll{flex:1; min-height:0; overflow-y:auto; padding:9px 10px 12px; display:flex; flex-direction:column; gap:7px;}
.pz-scroll::-webkit-scrollbar{width:5px;}
.pz-scroll::-webkit-scrollbar-thumb{background:rgba(140,170,255,.22); border-radius:3px;}
.pz-none{padding:22px 10px; text-align:center; font-size:11.5px; color:var(--ink-dim); line-height:1.7;}

.pz-row{
  position:relative; display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:11px; padding:9px 11px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  transition:border-color .15s, background .15s, transform .1s;
}
.pz-row:hover{border-color:rgba(140,170,255,.36); transform:translateX(2px);}
.pz-row.on{
  border-color:rgba(58,224,255,.55);
  background:linear-gradient(180deg,rgba(58,224,255,.13),rgba(13,21,38,.9));
}
.pz-row.on::before{
  content:""; position:absolute; left:0; top:11px; bottom:11px; width:3px;
  border-radius:0 3px 3px 0; background:var(--me); box-shadow:0 0 10px var(--me);
}
.pz-row .rk{flex:none; width:24px; text-align:center; font-size:14px; font-weight:800; color:var(--ink-dim);}
.pz-row.r1 .rk{color:var(--gold);}
.pz-row.r2 .rk{color:#dfe8ff;}
.pz-row.r3 .rk{color:#e0a06a;}
.pz-thumb{
  flex:none; width:46px; height:36px; border-radius:8px; overflow:hidden;
  border:1px solid var(--line); background:#070c18;
}
.pz-thumb canvas{width:100%; height:100%; display:block;}
.pz-rmain{flex:1; min-width:0;}
.pz-rname{
  font-size:12.5px; font-weight:800; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; display:flex; align-items:center; gap:5px;
}
.pz-rmeta{
  font-size:10.5px; color:var(--ink-dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pz-rmeta .sep{opacity:.35; margin:0 5px;}
.pz-pill{font-size:8.5px; font-weight:800; padding:1px 5px; border-radius:4px; border:1px solid currentColor; flex:none;}
.pz-pill.mine{color:var(--me);}
.pz-pill.hot{color:#ff8c5a;}
.pz-pill.gold{color:var(--gold);}
.pz-rplay{
  flex:none; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  font-size:11px; color:var(--ink-dim); border:1px solid var(--line); background:rgba(6,10,20,.5); transition:.15s;
}
.pz-row:hover .pz-rplay, .pz-row.on .pz-rplay{color:var(--me); border-color:rgba(58,224,255,.5);}

/* ==================== 명예의 전당 모달 ==================== */
.hall-bd{
  position:fixed; inset:0; z-index:45; display:none;
  align-items:center; justify-content:center; padding:22px;
  background:rgba(3,6,14,.72); backdrop-filter:blur(6px);
}
.hall-bd.on{display:flex;}
.hall-modal{
  width:min(94vw,470px); max-height:min(86vh,660px); display:flex; flex-direction:column;
  border:1px solid rgba(255,201,77,.3); border-radius:18px; overflow:hidden; text-align:left;
  background:linear-gradient(180deg,rgba(24,20,10,.97),rgba(9,14,26,.98));
  box-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 40px rgba(255,201,77,.08);
  animation:hallPop .2s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes hallPop{from{transform:translateY(10px) scale(.97); opacity:0}to{transform:none; opacity:1}}
.hall-head{
  flex:none; display:flex; align-items:flex-start; gap:10px; padding:15px 16px 13px;
  border-bottom:1px solid rgba(255,201,77,.18);
  background:radial-gradient(90% 200% at 0% 0%, rgba(255,201,77,.14), transparent 60%);
}
.hall-eyebrow{font-size:8.5px; letter-spacing:.24em; font-weight:800; color:var(--gold); opacity:.8;}
.hall-title{font-size:15.5px; font-weight:800; margin-top:4px;}
.hall-sub{font-size:11px; color:var(--ink-dim); margin-top:4px;}
.hall-x{
  margin-left:auto; flex:none; appearance:none; cursor:pointer; font:inherit;
  width:28px; height:28px; border-radius:8px; color:var(--ink-dim); font-size:12px;
  border:1px solid var(--line); background:rgba(6,10,20,.5);
}
.hall-x:hover{color:var(--ink);}
.hall-body{flex:1; min-height:0; overflow-y:auto; padding:13px 14px;}
.hall-body::-webkit-scrollbar{width:5px;}
.hall-body::-webkit-scrollbar-thumb{background:rgba(255,201,77,.25); border-radius:3px;}
.hall-podium{display:grid; grid-template-columns:1fr 1.14fr 1fr; gap:7px; align-items:end; margin-bottom:13px;}
.hall-pod{
  border:1px solid var(--line); border-radius:12px; padding:10px 7px 9px; text-align:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.hall-pod .medal{font-size:20px; line-height:1;}
.hall-pod .pname{font-size:11.5px; font-weight:800; margin-top:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hall-pod .ptime{font-size:12.5px; font-weight:800; margin-top:3px;}
.hall-pod .prize{font-size:9.5px; color:var(--ink-dim); margin-top:3px;}
.hall-pod.p1{
  border-color:rgba(255,201,77,.55); padding-bottom:15px;
  background:linear-gradient(180deg,rgba(255,201,77,.16),rgba(13,21,38,.9));
  box-shadow:0 0 22px rgba(255,201,77,.12);
}
.hall-pod.p1 .medal{font-size:26px;}
.hall-pod.p1 .ptime{color:var(--gold); font-size:14px;}
.hall-pod.p2{border-color:rgba(223,232,255,.35);}
.hall-pod.p3{border-color:rgba(224,160,106,.35);}
.hall-row{
  display:flex; align-items:center; gap:10px; padding:8px 11px; border-radius:10px;
  border:1px solid transparent; font-size:12px;
}
.hall-row + .hall-row{margin-top:3px;}
.hall-row:nth-child(odd){background:rgba(255,255,255,.025);}
.hall-row .hr{flex:none; width:26px; text-align:center; font-weight:800; color:var(--ink-dim); font-size:11.5px;}
.hall-row .hn{flex:1; min-width:0; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hall-row .ht{flex:none; font-weight:800; color:var(--ink-dim);}
.hall-row.me{border-color:rgba(58,224,255,.5); background:rgba(58,224,255,.1);}
.hall-row.me .ht{color:var(--me);}
.hall-row .meb{
  font-size:8.5px; font-weight:800; color:var(--me);
  border:1px solid currentColor; border-radius:4px; padding:1px 4px; margin-left:6px;
}
.hall-gap{text-align:center; font-size:11px; color:var(--ink-dim); padding:7px 0 4px; opacity:.55;}
.hall-empty{text-align:center; padding:26px 12px;}
.hall-empty .big{font-size:40px;}
.hall-empty .t{font-size:13.5px; font-weight:800; margin-top:10px;}
.hall-empty .d{font-size:11.5px; color:var(--ink-dim); margin-top:6px; line-height:1.7;}
.hall-foot{
  flex:none; display:flex; align-items:center; gap:10px; padding:11px 14px;
  border-top:1px solid var(--line); background:rgba(6,10,20,.55);
}
.hall-foot .mf{flex:1; min-width:0; font-size:11.5px; color:var(--ink-dim); line-height:1.55;}
.hall-foot .mf b{color:var(--me); font-size:13px;}
.hall-foot .btn{flex:none; min-width:0; padding:9px 14px; font-size:12.5px;}

/* ==================== 맵 광장 반응형 ==================== */
/* 낮은 화면(가로모드·작은 창) — 지도 영역을 지키려고 주변을 조인다 */
@media (max-height:620px){
  #scPlaza.plaza{padding:9px 12px 10px; gap:8px;}
  .pz-title{font-size:17px;}
  .pz-head{padding:9px 12px 8px;}
  .pz-mapname{font-size:14.5px;}
  .pz-forces{padding:8px 12px 9px;}
  .pz-fhead{margin-bottom:6px;}
  .pz-flist{margin-top:7px; gap:5px;}
  .pz-fchip{padding:4px 8px 4px 6px; font-size:10px;}
  .pz-legend{display:none;}
  .pz-weekly .wk-meta{display:none;}
  .pz-segs{margin-top:7px;}
  .pz-row{padding:7px 9px;}
}
@media (max-height:470px){
  .pz-flist{display:none;}
  .pz-weekly .wk-hall{display:none;}   /* 긴 줄 대신 🏅 아이콘 — 랭킹 진입점 자체는 유지 */
  .pz-weekly .wk-hall-sm{display:grid;}
  .pz-canvas{min-height:120px;}
}
/* 세로 화면 — 지도 먼저, 그 아래 주간 챌린지 + 목록 */
/* 좁은 화면 — 크기만 줄이고 좌우 2단은 유지한다 */
@media (max-width:1000px){
  #scPlaza.plaza{padding:10px 12px 12px; gap:9px;}
  .pz-topbar{gap:8px;}
  .pz-brand .eyebrow{font-size:8px; letter-spacing:.18em; white-space:nowrap;}
  .pz-title{font-size:17px;}
  .pz-actions{gap:6px;}
  .pz-chip{display:none;}
  .pz-actions .btn{padding:8px 11px; font-size:11.5px;}
  .pz-actions .btn span{display:none;}
  /* 우측 컬럼을 화면 폭에 맞춰 줄인다 (고정 380px이면 좁은 화면에서 지도가 눌린다) */
  .pz-body{grid-template-columns:1fr minmax(240px, 34%);}
  .pz-head{padding:10px 12px 9px;}
  .pz-mapname{font-size:14.5px;}
  .pz-sub{font-size:10.5px;}
  .pz-act .btn{padding:8px 11px; font-size:11.5px;}
  .pz-forces{padding:9px 12px 11px;}
  .pz-thumb{width:40px; height:32px;}
  .pz-weekly .wk-name{font-size:12px;}
  .pz-reward{display:block;}
  /* 우측 컬럼이 좁아지면 WEEKLY 태그부터 버린다 — 안 그러면 챌린지 이름이 0px로 눌려 사라진다 */
  .pz-weekly .wk-tag{display:none;}
  .pz-weekly{gap:8px; padding:8px 9px;}
  .pz-weekly .wk-main{min-width:64px;}
  .pz-weekly .wk-go{padding:6px 9px; font-size:11px;}
  .wk-hall-sm{margin-right:3px;}   /* 인원 뱃지가 옆 버튼에 겹치지 않게 */
}
/* 세로로 쌓는 건 진짜 세로 화면일 때만.
   가로로 넓고 낮은 화면(예: 866×400)까지 쌓으면 스크롤해야 해서 오히려 불편하다 */
@media (max-width:900px) and (orientation:portrait), (max-width:620px){
  /* grid는 고정 높이 컨테이너에서 행이 겹치므로 세로 배치는 flex + 전체 스크롤로 */
  .pz-body{display:flex; flex-direction:column; gap:10px; overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .pz-body::-webkit-scrollbar{width:5px;}
  .pz-body::-webkit-scrollbar-thumb{background:rgba(140,170,255,.22); border-radius:3px;}
  .pz-stage, .pz-side, .pz-list-panel{flex:none;}
  .pz-canvas{height:32vh; min-height:180px; flex:none;}
  .pz-scroll{overflow:visible;}
}