/* MEKARA — single committed "hangar at dusk" look: deep ink-navy glass, warm core orange, cyan tech. */
:root {
  color-scheme: dark;
  --ink: #0B1026;
  --ink2: #121A3A;
  --panel: rgba(18, 26, 62, .78);
  --panel-solid: #172150;
  --line: rgba(160, 190, 255, .22);
  --text: #F2F5FF;
  --muted: #9EABD6;
  --core: #FF9A2E;
  --core2: #FFD27A;
  --tech: #37E0FF;
  --good: #5CF08A;
  --bad: #FF4F5E;
  --gold: #FFD24A;
  --disp: "Lilita One", "Chakra Petch", system-ui, sans-serif;
  --body: "Chakra Petch", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 14px;
}
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--ink); color: var(--text); font: 500 15px/1.4 var(--body); overflow: hidden; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--tech); outline-offset: 2px; }
#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; }
.menu-screen { overflow-y: auto; padding: calc(70px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(120% 90% at 50% 0%, #1E2C6A 0%, var(--ink) 60%); }
.scr-title { font: 400 clamp(26px, 4vw, 40px)/1 var(--disp); letter-spacing: .02em; margin: 0 0 14px; text-shadow: 0 3px 0 #05081a; }
.note { color: var(--muted); margin: -6px 0 14px; max-width: 70ch; font-size: 14px; }
h3, .sub { font: 700 13px/1 var(--body); letter-spacing: .14em; color: var(--muted); margin: 18px 0 10px; text-transform: uppercase; }

/* ---------- boot ---------- */
#boot { display: grid; place-items: center; background: var(--ink); }
.boot-art { position: absolute; inset: 0; background: url(../assets/boot_portrait_blur.jpg) center/cover; }
.boot-art::after { content: ""; position: absolute; left: 50%; top: 42%; width: min(106vw, 102vh); aspect-ratio: 1122 / 1402; transform: translate(-50%, -42%);
  background: url(../assets/boot_portrait.jpg) center/cover no-repeat;
  -webkit-mask-image: linear-gradient(transparent 0, #000 7%, #000 90%, transparent 100%); mask-image: linear-gradient(transparent 0, #000 7%, #000 90%, transparent 100%); }
@media (min-aspect-ratio: 4/5) { .boot-art::after { top: 0; height: 100%; width: auto; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } }
@media (orientation: landscape) and (max-height: 500px) { #boot .tap-start { font-size: 18px; padding: 9px 20px; } .boot-box { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); } }
.boot-box { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6%); text-align: center; padding: 0 16px; }
.tap-start { border: 0; background: rgba(8,12,34,.72); color: #fff; font: 400 clamp(22px, 5vw, 34px)/1 var(--disp); letter-spacing: .08em; padding: 14px 30px; border-radius: 40px;
  border: 2px solid rgba(255,210,122,.8); box-shadow: 0 0 20px rgba(255,160,40,.5); animation: tapPulse 1.6s ease-in-out infinite; }
@keyframes tapPulse { 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,180,60,.8); } }
@media (prefers-reduced-motion: reduce) { .tap-start { animation: none; } }
.logo { font: 400 clamp(56px, 12vw, 120px)/.9 var(--disp); color: #fff; letter-spacing: .02em;
  text-shadow: 0 4px 0 #1B3A8C, 0 8px 0 #0B1026, 0 0 40px rgba(55,224,255,.5); }
.boot-sub { color: var(--core2); letter-spacing: .2em; font-weight: 700; font-size: 13px; text-transform: uppercase; margin-top: 8px; }
.bootbar { width: min(360px, 80vw); height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); margin: 22px auto 8px; overflow: hidden; }
.bootbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--core), var(--core2)); transition: width .2s; }
.boot-text { color: var(--muted); font-size: 13px; }

/* ---------- top bar ---------- */
#topbar { position: absolute; z-index: 20; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(8,12,32,.9), rgba(8,12,32,0)); pointer-events: none; }
#topbar > * { pointer-events: auto; }
.tb-profile { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 40px; padding: 4px 14px 4px 4px; min-width: 0; }
.tb-rank { width: 40px; height: 40px; display: grid; place-items: center; background: #0B1026; border-radius: 50%; border: 2px solid var(--frame, var(--line)); flex: none; }
.tb-rank svg { width: 34px; height: 34px; }
.tb-id { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.tb-id b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 30vw; }
.tb-id small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.stars { color: var(--gold); }
.tb-cur { display: flex; gap: 8px; align-items: center; }
.cur { display: flex; align-items: center; gap: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 30px; padding: 5px 12px 5px 5px; font-variant-numeric: tabular-nums; }
.cur i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 12px; color: #1B1030; }
.credits i { background: linear-gradient(#FFE08A, #F2A81E); }
.crystal i { background: linear-gradient(#C9F6FF, #5E8CFF); }
.tb-back { background: var(--core); color: #1B1030; border: 0; border-radius: 30px; padding: 7px 14px; font-weight: 700; letter-spacing: .06em; }

/* ---------- home ---------- */
.home-menu { display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.btn-play { text-align: left; border: 0; border-radius: 18px; padding: 14px 20px; background: linear-gradient(135deg, #FFB347, #FF7A1A); color: #2A1000;
  box-shadow: 0 5px 0 #B04A00, 0 10px 24px rgba(255,122,26,.35); transition: transform .08s; }
.btn-play span { display: block; font: 400 38px/1 var(--disp); letter-spacing: .03em; }
.btn-play small { font-weight: 700; opacity: .75; }
.btn-play:active, .btn-m:active, .menu-grid button:active, .btn-go:active { transform: translateY(3px); }
.btn-m { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: var(--panel); font: 400 20px/1 var(--disp); letter-spacing: .04em; text-align: left; backdrop-filter: blur(6px); }
.btn-m.ghost { background: transparent; }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.menu-grid button { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: rgba(12,18,48,.72); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-align: left; }
.menu-grid button:hover, .btn-m:hover { border-color: var(--tech); }
.dot { position: absolute; top: 8px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--bad); }
@media (max-height: 460px) and (orientation: landscape) {
  .btn-play { padding: 8px 16px; } .btn-play span { font-size: 28px; } .btn-m { padding: 8px 14px; font-size: 16px; }
  .menu-grid button { padding: 7px 10px; font-size: 12px; } .home-menu { gap: 5px; }
}

/* ---------- generic ---------- */
.btn-go { border: 0; border-radius: 14px; padding: 14px 22px; font: 400 22px/1 var(--disp); letter-spacing: .04em; color: #0B1026;
  background: linear-gradient(135deg, #7CF7FF, #37A8FF); box-shadow: 0 4px 0 #1452A8; }
.btn-s { border: 1px solid var(--line); background: var(--panel-solid); border-radius: 10px; padding: 7px 12px; font-weight: 700; font-size: 13px; }
.btn-s.primary { background: var(--core); color: #1B1030; border-color: transparent; }
.btn-s.danger { border-color: rgba(255,79,94,.6); color: #FFB3BA; }
.btn-s:disabled { opacity: .45; cursor: not-allowed; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; background: rgba(0,0,0,.25); padding: 4px; border-radius: 12px; }
.seg button { border: 0; background: transparent; border-radius: 9px; padding: 7px 12px; font-weight: 700; color: var(--muted); }
.seg button.sel { background: var(--tech); color: #0B1026; }
.seg.small { align-items: center; } .seg.small span { color: var(--muted); padding: 0 6px; font-size: 13px; }
.chk { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0; font-weight: 600; }
.chk input { width: 18px; height: 18px; accent-color: var(--core); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tabs button { border: 1px solid var(--line); background: var(--panel); padding: 8px 12px; border-radius: 10px; font-weight: 700; font-size: 13px; letter-spacing: .08em; }
.tabs button.sel { background: var(--core); color: #1B1030; border-color: transparent; }
select { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: 13px; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: #0B1026; border: 1px solid var(--tech); padding: 10px 16px; border-radius: 12px; font-weight: 700; max-width: calc(100vw - 32px); }

/* ---------- mode select ---------- */
.mode-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mode { position: relative; text-align: left; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; min-height: 96px; background: linear-gradient(160deg, rgba(40,56,130,.7), rgba(16,22,56,.85)); overflow: hidden; }
.mode b { display: block; font: 400 22px/1 var(--disp); letter-spacing: .03em; }
.mode small { display: block; color: var(--muted); margin-top: 6px; font-size: 12.5px; }
.mode .tag { position: absolute; top: 10px; right: 10px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--core2); }
.mode.sel { border-color: var(--core); box-shadow: 0 0 0 2px var(--core) inset; }
.setup { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-top: 8px; background: rgba(10,14,40,.5); border: 1px solid var(--line); border-radius: 18px; padding: 4px 16px 16px; }
@media (max-width: 760px) { .setup { grid-template-columns: 1fr; } }
.map-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.map-card { border: 2px solid transparent; border-radius: 12px; padding: 0; overflow: hidden; background: #000; text-align: left; position: relative; }
.map-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.map-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font: 400 16px/1 var(--disp); }
.map-card.sel { border-color: var(--core); }
.map-card.rand img { filter: grayscale(.6) brightness(.6); }
.setup-mech { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,.2); border-radius: 12px; padding: 8px; }
.setup-mech img { width: 64px; height: 64px; object-fit: contain; }
.setup-mech b { font: 400 20px/1 var(--disp); display: block; }
.setup-mech small { color: var(--muted); }
.setup-mech .btn-s { margin-left: auto; }
#startBtn { width: 100%; margin-top: 6px; }

/* ---------- lobby ---------- */
.room-wrap { display: grid; grid-template-columns: minmax(260px, 1fr) 1.6fr; gap: 14px; }
@media (max-width: 820px) { .room-wrap { grid-template-columns: 1fr; } }
.rl-head { display: flex; justify-content: space-between; align-items: center; }
.room-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; }
.room-row.sel { border-color: var(--core); }
.room-row b { font-size: 15px; } .room-row small { color: var(--muted); font-size: 12px; grid-column: 1; }
.pill { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: 20px; align-self: start; }
.pill.waiting { background: rgba(255,210,74,.2); color: var(--gold); }
.pill.ready { background: rgba(92,240,138,.2); color: var(--good); }
.pill.playing { background: rgba(55,224,255,.2); color: var(--tech); }
.room-view { background: rgba(10,14,40,.55); border: 1px solid var(--line); border-radius: 18px; padding: 14px; min-height: 200px; }
.room-view .empty { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.form-grid input[type=text], .form-grid input[type=password] { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 520px) { .slots { grid-template-columns: 1fr; } }
.team-col h4 { margin: 0 0 6px; font: 400 18px/1 var(--disp); }
.slot { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; background: var(--panel); border-radius: 12px; padding: 6px 8px; margin-bottom: 6px; border-left: 4px solid var(--tc, #fff); }
.slot img { width: 44px; height: 44px; object-fit: contain; }
.slot select { font-size: 12px; padding: 5px 6px; }
.slot .sname { font-weight: 700; font-size: 13px; }
.slot .sname small { display: block; color: var(--muted); font-weight: 500; }
.room-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- mech hangar ---------- */
.mech-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; }
@media (max-width: 820px) { .mech-wrap { grid-template-columns: 1fr; } }
.mech-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; align-content: start; }
.mcard { border: 2px solid transparent; border-radius: 14px; padding: 6px 6px 8px; background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 35%, #172150), #121A3A); text-align: center; }
.mcard img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.mcard b { display: block; font: 400 14px/1.05 var(--disp); }
.mcard small { color: var(--muted); font-size: 11px; }
.mcard.sel { border-color: var(--mc); }
.mcard.active::after { content: "ACTIVE"; display: block; margin-top: 4px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--core2); }
.mech-detail { background: rgba(10,14,40,.6); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.md-head { display: grid; grid-template-columns: 170px 1fr; gap: 14px; align-items: center; }
@media (max-width: 420px) { .md-head { grid-template-columns: 1fr; } }
.md-head canvas { width: 170px; height: 170px; max-width: 100%; }
.md-head h2 { margin: 0; font: 400 32px/1 var(--disp); color: var(--mc); text-shadow: 0 3px 0 #05081a; }
.md-head p { color: var(--muted); margin: 6px 0; }
.stat { display: grid; grid-template-columns: 64px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin: 5px 0; }
.stat .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--mc); }
.stat span:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.shot-list { display: grid; gap: 6px; margin-top: 12px; }
.shot-item { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; background: var(--panel); border-radius: 12px; padding: 8px 10px; }
.shot-item .k { font: 400 16px/1 var(--disp); color: #0B1026; background: var(--mc); border-radius: 8px; text-align: center; padding: 6px 0; }
.shot-item b { font-size: 14px; } .shot-item small { display: block; color: var(--muted); font-size: 12px; }

/* ---------- customize / shop / inventory ---------- */
.cust-wrap { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 16px; }
@media (max-width: 760px) { .cust-wrap { grid-template-columns: 1fr; } }
.cust-preview { background: radial-gradient(circle at 50% 60%, #2C3F8C, #111838 70%); border: 1px solid var(--line); border-radius: 18px; padding: 10px; text-align: center; }
#custCanvas { width: 100%; max-width: 420px; aspect-ratio: 1; }
.rot { display: flex; justify-content: center; align-items: center; gap: 12px; }
.rot button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel-solid); font-size: 20px; }
.rot span { font-weight: 700; letter-spacing: .12em; min-width: 70px; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.icard { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.icard.eq { border-color: var(--core); box-shadow: 0 0 0 1px var(--core) inset; }
.icard .thumb { height: 84px; border-radius: 10px; display: grid; place-items: center; background: rgba(0,0,0,.25); overflow: hidden; }
.icard .thumb img, .icard .thumb canvas { max-height: 84px; max-width: 100%; }
.icard b { font-size: 14px; }
.icard small { color: var(--muted); font-size: 11.5px; letter-spacing: .06em; }
.icard .price { display: flex; gap: 6px; align-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.icard .row { display: flex; gap: 6px; flex-wrap: wrap; }
.icard .fav { position: absolute; top: 8px; right: 8px; border: 0; background: rgba(0,0,0,.4); border-radius: 50%; width: 28px; height: 28px; color: var(--muted); }
.icard .fav.on { color: var(--gold); }
.emote-bub { background: #fff; color: #1B2250; font-weight: 700; padding: 6px 12px; border-radius: 14px; }
.inv-tools { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: start; }
.inv-filters { display: flex; gap: 6px; }

/* ---------- missions / rank / profile ---------- */
.mission-list { display: grid; gap: 8px; max-width: 760px; }
.mission { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; align-items: center; }
.mission .bar { grid-column: 1; height: 8px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.mission .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--tech), var(--good)); }
.mission small { color: var(--muted); font-variant-numeric: tabular-nums; }
.mission button { grid-row: 1 / span 3; grid-column: 2; }
.badge-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; max-width: 900px; }
.badge { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; background: var(--panel); border-radius: 12px; padding: 10px; opacity: .45; }
.badge.got { opacity: 1; border: 1px solid var(--gold); }
.badge i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(var(--gold), #C57A00); color: #2A1000; font-style: normal; font-weight: 700; }
.badge small { display: block; color: var(--muted); font-size: 12px; }
.rank-hero { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; background: linear-gradient(135deg, rgba(55,224,255,.12), rgba(255,154,46,.12)); border: 1px solid var(--line); border-radius: 18px; padding: 16px; max-width: 760px; }
.rank-hero svg { width: 120px; height: 120px; }
.rank-hero h2 { margin: 0; font: 400 32px/1 var(--disp); }
.rank-hero .bar { height: 12px; border-radius: 6px; background: rgba(255,255,255,.1); overflow: hidden; margin: 10px 0 4px; }
.rank-hero .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--core), var(--gold)); }
.rank-hero small { color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 14px; }
.rk { text-align: center; background: var(--panel); border-radius: 12px; padding: 10px 6px; border: 1px solid transparent; }
.rk svg { width: 54px; height: 54px; }
.rk b { display: block; font-size: 13px; } .rk small { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.rk.cur { border-color: var(--core); background: rgba(255,154,46,.14); }
.rk.locked { opacity: .5; }
.profile-box { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 16px; max-width: 980px; }
@media (max-width: 720px) { .profile-box { grid-template-columns: 1fr; } }
.pcard { background: var(--panel); border: 3px solid var(--frame, var(--line)); border-radius: 18px; padding: 16px; text-align: center; }
.pcard img { width: 150px; height: 150px; object-fit: contain; }
.pcard input { width: 100%; box-sizing: border-box; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 8px; font: inherit; font-weight: 700; text-align: center; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stat-grid div { background: var(--panel); border-radius: 12px; padding: 10px 12px; }
.stat-grid b { display: block; font: 400 26px/1.1 var(--disp); font-variant-numeric: tabular-nums; }
.stat-grid small { color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.settings-box { display: grid; gap: 10px; max-width: 820px; }
.set-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; background: var(--panel); border-radius: 14px; padding: 12px 14px; }
.set-row > span { font-weight: 700; letter-spacing: .08em; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.set-row.help { align-items: start; } .set-row.help p { margin: 0 0 8px; color: #D6DDF5; max-width: 70ch; }
kbd { background: #0B1026; border: 1px solid var(--line); border-radius: 5px; padding: 0 5px; font: 600 12px var(--body); }
@media (max-width: 520px) { .set-row { grid-template-columns: 1fr; } }

/* ---------- modal / results ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(5,7,20,.7); backdrop-filter: blur(4px); padding: 16px; }
.modal-box { background: linear-gradient(180deg, #1E2A66, #111838); border: 1px solid var(--line); border-radius: 20px; padding: 20px; width: min(420px, 100%); display: flex; flex-direction: column; gap: 10px; max-height: 90vh; overflow-y: auto; box-sizing: border-box; }
.modal-box h2 { margin: 0 0 6px; font: 400 34px/1 var(--disp); text-align: center; }
.results-box { width: min(560px, 100%); }
.res-title { font: 400 clamp(40px, 8vw, 60px)/1 var(--disp); text-align: center; margin: 0; }
.res-title.win { color: var(--gold); text-shadow: 0 4px 0 #8A4A00; } .res-title.lose { color: #FF9AA2; text-shadow: 0 4px 0 #5A0A1A; }
.res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.res-grid div { background: rgba(0,0,0,.25); border-radius: 12px; padding: 8px; text-align: center; }
.res-grid b { display: block; font: 400 24px/1.1 var(--disp); font-variant-numeric: tabular-nums; }
.res-grid small { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.res-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.res-table td, .res-table th { padding: 5px 6px; text-align: right; border-bottom: 1px solid var(--line); }
.res-table td:first-child, .res-table th:first-child { text-align: left; }
.res-table th { color: var(--muted); font-size: 11px; letter-spacing: .08em; }
.res-actions { display: flex; gap: 8px; } .res-actions > * { flex: 1; }
.levelup { text-align: center; color: var(--good); font-weight: 700; }

/* ---------- battle HUD (mobile-first, portrait + landscape) ---------- */
#battle { position: absolute; inset: 0; background: #000; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden;
  --gl: max(8px, env(safe-area-inset-left, 0px)); --gr: max(8px, env(safe-area-inset-right, 0px));
  --btn: clamp(40px, 11.5vw, 52px); --fire: clamp(68px, 19vw, 80px); --glass: rgba(9, 14, 36, .62); --edge: rgba(255, 255, 255, .16); }
@media (orientation: landscape) { #battle { --btn: clamp(34px, 9.6vh, 48px); --fire: clamp(56px, 16.5vh, 76px); } }
#bc { position: absolute; inset: 0; display: block; }
.glass { background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* top */
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: grid; gap: 5px 6px; align-items: start; pointer-events: none;
  padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--gr) 0 var(--gl);
  grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; grid-template-areas: "pause a strip b map"; }
.hud-top > * { pointer-events: auto; }
.hud-top > [data-act="pause"] { grid-area: pause; } #teamA { grid-area: a; } #teamB { grid-area: b; } .status-strip { grid-area: strip; } #mapBtn { grid-area: map; }
@media (orientation: portrait) {
  .hud-top { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto; grid-template-areas: "pause a b map" ". strip strip ."; }
  .status-strip { justify-self: center; }
}
.hud-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #DDE6FF; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 0; }
.hud-icon.on { background: var(--tech); color: #0B1026; }
.team-panel { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.team-panel.right { align-items: flex-end; }
.tcard { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px; align-items: center; width: min(196px, 100%); box-sizing: border-box;
  padding: 2px 8px 3px 2px; border-radius: 10px; background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  filter: brightness(.86); transition: filter .2s, box-shadow .2s; }
.team-panel.right .tcard { grid-template-columns: minmax(0, 1fr) 26px; padding: 2px 2px 3px 8px; text-align: right; }
.team-panel.right .tcard .por { order: 2; }
.tcard.turn { filter: none; border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc), 0 0 10px color-mix(in srgb, var(--tc) 45%, transparent); }
.tcard.turn::after { content: ""; position: absolute; top: 50%; left: -5px; margin-top: -4px; border: 4px solid transparent; border-left: 5px solid var(--tc); border-right: 0; }
.team-panel.right .tcard.turn::after { left: auto; right: -5px; border-left: 0; border-right: 5px solid var(--tc); }
.tcard.dead { opacity: .45; filter: grayscale(1); }
.por { width: 26px; height: 26px; border-radius: 8px; background: #1B2250 center 8%/175% no-repeat; box-shadow: inset 0 0 0 1.5px var(--tc); }
.tline { display: flex; flex-wrap: wrap; column-gap: 5px; align-items: baseline; min-width: 0; line-height: 1.12; }
.team-panel.right .tline { justify-content: flex-end; }
.tline b { font-size: 11px; white-space: nowrap; }
.tline small { font-size: 8.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; white-space: nowrap; flex: none; }
.hprow { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.team-panel.right .hprow { flex-direction: row-reverse; }
.hpbar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.hpbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(90deg, #3DDC74, #A6FFC0); transition: width .3s; }
.team-panel.right .hpbar i { left: auto; right: 0; }
.hpbar em { position: absolute; left: 0; bottom: 0; height: 1.5px; width: 0; background: var(--gold); }
.team-panel.right .hpbar em { left: auto; right: 0; }
.hpnum { font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; color: #E6ECFF; white-space: nowrap; }
.team-panel.dense { gap: 2px; } .team-panel.dense .tcard { padding-block: 2px; } .team-panel.dense .tline small { display: none; } .team-panel.dense .por { width: 20px; height: 20px; border-radius: 6px; }
.team-panel.dense .tline b { font-size: 10px; } .team-panel.dense .hprow { margin-top: 1px; } .team-panel.dense .hpnum { position: absolute; top: 3px; right: 8px; font-size: 8.5px; } .team-panel.right.dense .hpnum { right: auto; left: 8px; }
.team-panel.dense .tcard { grid-template-columns: 20px minmax(0, 1fr); } .team-panel.right.dense .tcard { grid-template-columns: minmax(0, 1fr) 20px; }
.status-strip { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 13px; white-space: nowrap;
  background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-variant-numeric: tabular-nums; }
.status-strip small { font-size: 8.5px; letter-spacing: .14em; color: var(--muted); font-weight: 700; margin-right: 3px; }
.status-strip b { font: 400 15px/1 var(--disp); }
.ss-sep { width: 1px; height: 12px; background: rgba(255,255,255,.2); }
.warrow { display: inline-block; color: var(--tech); font-size: 13px; margin-right: 2px; transition: transform .3s; }
.ss-who { display: flex; align-items: center; gap: 5px; }
.ss-who b { max-width: 84px; overflow: hidden; text-overflow: ellipsis; font: 700 11px/1 var(--body); letter-spacing: .04em; }
.timer { font: 400 14px/1 var(--disp); min-width: 26px; text-align: right; }
.timer::after { content: "s"; font-size: 10px; margin-left: 1px; opacity: .7; }
.timer.low { color: #FF7070; } .timer.paused { color: var(--muted); } .timer.paused::after { content: ""; }
.mini-wrap { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--th, 80px) + 4px); z-index: 4; padding: 5px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; gap: 3px; }
#minimap { width: min(240px, 68vw); height: auto; aspect-ratio: 240 / 72; border-radius: 8px; display: block; }
.mini-wrap small { font-size: 9.5px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.mini-wrap i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .dot-me { background: #49A8FF; } .dot-foe { background: #FF4F5E; margin-left: 6px; }
.practice-info { position: absolute; left: 50%; transform: translateX(-50%); top: calc(var(--th, 80px) + 4px); font-weight: 700; font-size: 12px; color: var(--gold); text-shadow: 0 1px 3px #000; pointer-events: none; }

/* bottom */
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 6px 8px; align-items: end;
  padding: 18px var(--gr) calc(env(safe-area-inset-bottom, 0px) + 8px) var(--gl);
  background: linear-gradient(to top, rgba(6,10,28,.78) 0%, rgba(6,10,28,.55) 60%, rgba(6,10,28,0) 100%);
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "power power power" "move shots fire" "angle shots fire";
  transition: opacity .2s ease; }
@media (orientation: landscape) {
  .hud-bottom { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "move power shots fire" "angle power shots fire"; padding-top: 14px; }
  .c-power { align-self: end; justify-self: center; width: 100%; max-width: 440px; }
}
.c-power { grid-area: power; min-width: 0; } .c-move { grid-area: move; } .c-angle { grid-area: angle; } .c-shots { grid-area: shots; min-width: 0; } .c-fire { grid-area: fire; align-self: center; }
.kb-hint { grid-column: 1 / -1; font-size: 10px; color: var(--muted); text-align: center; margin-top: -2px; }
@media (hover: none), (orientation: portrait) { .kb-hint { display: none; } }
.cbtn { width: var(--btn); height: var(--btn); border-radius: 12px; border: 1px solid var(--edge); background: var(--glass); color: #fff; font-size: calc(var(--btn) * .36); padding: 0;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .12s, transform .08s; }
.cbtn.sm { width: calc(var(--btn) * .8); height: calc(var(--btn) * .8); font-size: calc(var(--btn) * .42); font-weight: 700; }
.cbtn.on { background: var(--tech); color: #0B1026; transform: scale(.95); }
.move-btns { display: flex; gap: 6px; }
.move-gauge { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #BFE9CF; }
.segs { display: flex; gap: 3px; }
.segs i { width: calc((var(--btn) * 2 - 44px) / 5); min-width: 7px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; position: relative; }
.segs i::after { content: ""; position: absolute; inset: 0; width: var(--f, 0%); background: #5CF08A; }
.move-gauge b { font-size: 9.5px; font-variant-numeric: tabular-nums; color: #DFFBE8; min-width: 28px; text-align: right; }
.c-angle { display: flex; align-items: center; gap: 4px; }
.ang-val { min-width: 44px; text-align: center; line-height: 1; }
.ang-val small { display: block; font-size: 8px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.ang-val b { font: 400 19px/1.05 var(--disp); font-variant-numeric: tabular-nums; }
.pw-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.pw-head small { font-size: 8.5px; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.pw-zone { font-size: 9px; font-weight: 700; letter-spacing: .1em; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--muted); }
.pw-head b { margin-left: auto; font: 400 20px/1 var(--disp); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.power-track { position: relative; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); }
.zone { position: absolute; top: 0; bottom: 0; opacity: .22; }
.z1 { left: 0; width: 30%; background: #37E0FF; } .z2 { left: 30%; width: 30%; background: #5CF08A; } .z3 { left: 60%; width: 20%; background: #FFD24A; } .z4 { left: 80%; width: 20%; background: #FF5A3C; }
.zone + .zone { box-shadow: inset 1px 0 0 rgba(255,255,255,.35); }
.power-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, #37E0FF 0%, #5CF08A 35%, #FFD24A 65%, #FF5A3C 95%); background-size: 100vw 100%; }
.power-track i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 6px, transparent 6px 14px); opacity: 0; }
.charging .power-track i::after { opacity: 1; animation: stripes .5s linear infinite; }
@keyframes stripes { to { background-position: 30px 0; } }
.power-track em { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 4px #fff; }
.pw-labels { position: relative; height: 10px; font-size: 7.5px; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
.pw-labels span { position: absolute; top: 2px; }
.pw-labels span:nth-child(1) { left: 0; } .pw-labels span:nth-child(2) { left: 31%; } .pw-labels span:nth-child(3) { left: 61%; } .pw-labels span:nth-child(4) { left: 81%; }
.shots-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.shots-secondary { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 5px; }
.sbtn { position: relative; min-width: 0; height: calc(var(--btn) * .78); border-radius: 11px; border: 1px solid var(--edge); background: var(--glass); padding: 2px 4px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1.05; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sbtn.big { height: calc(var(--btn) * 1.12); border-radius: 13px; }
.sbtn b { font: 400 13px/1 var(--disp); letter-spacing: .03em; }
.sbtn.big b { font-size: 18px; }
.sbtn small { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; color: #C9D3F2; white-space: nowrap; margin-top: 2px; }
.sbtn.big small { font-size: 9.5px; }
.sbtn.sel { background: color-mix(in srgb, var(--mc, var(--core)) 88%, #fff 0%); border-color: #fff; box-shadow: 0 0 10px color-mix(in srgb, var(--mc, var(--core)) 50%, transparent); }
.sbtn.sel b, .sbtn.sel small { color: #0B1026; }
.sbtn.cool { opacity: .5; }
.sbtn.ult { background: linear-gradient(0deg, rgba(255,210,74,.42) var(--en, 0%), var(--glass) var(--en, 0%)); }
.sbtn.ult.ready { border-color: var(--gold); box-shadow: 0 0 8px rgba(255,210,74,.55); }
.sbtn.ult.ready::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 10px rgba(255,210,74,.6); animation: breathe 2.4s ease-in-out infinite; }
.sbtn.ult.ready small { color: var(--gold); }
.sbtn.ult.ready.sel small { color: #0B1026; }
@keyframes breathe { 50% { opacity: .35; } }
.fire { position: relative; width: var(--fire); height: var(--fire); border-radius: 50%; border: 2px solid rgba(255,255,255,.85); color: #2A1000; padding: 0;
  background: radial-gradient(circle at 40% 32%, #FFD27A, #FF7A1A 72%); box-shadow: 0 4px 0 #A04000, 0 0 14px rgba(255,122,26,.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font: 400 calc(var(--fire) * .25)/1 var(--disp); transition: transform .08s, box-shadow .12s; }
.fire small { font: 700 8.5px var(--body); letter-spacing: .14em; opacity: .75; margin-top: 2px; }
.fire.on { transform: translateY(3px) scale(.96); box-shadow: 0 1px 0 #A04000, 0 0 22px rgba(255,210,74,.8); }
.fire-ring { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; }
.fire-ring circle { fill: none; stroke: #FFE58A; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p, 0)); opacity: 0; transition: opacity .15s; filter: drop-shadow(0 0 3px rgba(255,210,74,.9)); }
.charging .fire-ring circle { opacity: 1; }
.emote-btn { position: absolute; right: var(--gr); bottom: calc(var(--bh, 170px) + 6px); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; padding: 0; color: #DDE6FF;
  background: var(--glass); border: 1px solid var(--edge); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: opacity .2s; }
.botturn .ctrl { opacity: .45; pointer-events: none; }
.proj-mode .ctrl { opacity: .12 !important; pointer-events: none; }
.shot-tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--bh, 170px) + 8px); width: min(300px, calc(100vw - 32px)); box-sizing: border-box; z-index: 6;
  background: rgba(9,14,36,.94); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; pointer-events: none; }
.shot-tip b { display: block; font: 400 17px/1.1 var(--disp); color: var(--mc, var(--core2)); }
.shot-tip small { display: block; color: #D6DDF5; font-size: 12px; margin-top: 3px; }
.item-menu { position: absolute; right: var(--gr); bottom: calc(var(--bh, 170px) + 8px); display: flex; flex-direction: column; gap: 6px; background: rgba(9,14,36,.92); padding: 8px; border-radius: 14px; border: 1px solid var(--line); z-index: 5; }
.item-opt { display: flex; gap: 10px; align-items: center; text-align: left; border: 1px solid var(--line); background: var(--panel-solid); border-radius: 10px; padding: 8px 10px; min-width: 190px; }
.item-opt b { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--core); color: #1B1030; }
.item-opt small { display: block; color: var(--muted); font-size: 11px; }
.item-opt:disabled { opacity: .4; }
.btoast { position: absolute; left: 50%; top: calc(var(--th, 80px) + 34px); transform: translateX(-50%); background: rgba(9,14,36,.9); border: 1px solid var(--line); padding: 7px 12px; border-radius: 10px; font-weight: 700; font-size: 12.5px; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.train-panel { position: absolute; right: var(--gr); top: calc(var(--th, 80px) + 6px); background: rgba(9,14,36,.8); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; width: 158px; font-size: 11px; }
.train-panel h4 { margin: 0; font: 400 14px/1 var(--disp); color: var(--gold); }
.train-panel label { display: flex; flex-direction: column; font-weight: 700; color: var(--muted); }
.train-panel .chk { flex-direction: row; margin: 2px 0; }
.train-panel input[type=range] { width: 100%; accent-color: var(--tech); }
.train-panel .btn-s { padding: 4px 8px; font-size: 11px; }
@media (prefers-reduced-motion: reduce) { .sbtn.ult.ready::before, .charging .power-track i::after { animation: none; } }
@media (max-height: 460px) { .res-title { font-size: 38px; } .results-box { gap: 6px; padding: 14px; } .res-grid b { font-size: 20px; } }

/* ---------- battle HUD skin v3 (matches the MEKARA UI sheets) ---------- */
#battle { --panel-bg: rgba(10, 20, 54, .84); --panel-edge: rgba(70, 150, 255, .6); --panel-glow: 0 0 10px rgba(40, 120, 255, .35), inset 0 0 10px rgba(40, 120, 255, .14); }
.tcard, .status-strip, .mini-wrap { background: var(--panel-bg); border: 1.5px solid var(--panel-edge); box-shadow: var(--panel-glow); }
.tcard { filter: brightness(.88); }
.tcard.turn { border-color: var(--tc); box-shadow: 0 0 0 1px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 55%, transparent), inset 0 0 10px rgba(40,120,255,.14); }
.por { border-radius: 7px; box-shadow: 0 0 0 2px var(--tc), 0 0 6px color-mix(in srgb, var(--tc) 60%, transparent); }
.hpbar { height: 6px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 0 1px rgba(120,170,255,.25); }
.hpbar i { background: linear-gradient(90deg, #22C55E, #86EFAC 70%, #D9F99D); }
.ss-ico { width: 16px; height: 16px; margin-right: 3px; border-radius: 4px; }
.status-strip .warrow { color: #3FC8FF; }
/* image buttons from the button sheet */
.img-btn { border: 0; padding: 0; background: center / contain no-repeat; width: 36px; height: 36px; -webkit-tap-highlight-color: transparent; }
.img-btn:disabled { cursor: default; }
.ib-pause { background-image: url(../assets/ui/pause_n.webp); } .ib-pause:hover, .ib-pause:active { background-image: url(../assets/ui/pause_h.webp); }
.ib-map { background-image: url(../assets/ui/map_n.webp); } .ib-map.on, .ib-map:active { background-image: url(../assets/ui/map_h.webp); }
.ib-emote { background-image: url(../assets/ui/emote_n.webp); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .ib-emote:active { background-image: url(../assets/ui/emote_h.webp); }
.botturn .ib-emote { background-image: url(../assets/ui/emote_d.webp); }
.emote-btn.img-btn { background-color: transparent; border: 0; width: 38px; height: 38px; }
.ib-left, .ib-right { width: calc(var(--btn) * 1.02); height: calc(var(--btn) * 1.02); }
.ib-left { background-image: url(../assets/ui/left_n.webp); } .ib-left.on { background-image: url(../assets/ui/left_a.webp); transform: scale(.96); }
.ib-right { background-image: url(../assets/ui/right_n.webp); } .ib-right.on { background-image: url(../assets/ui/right_a.webp); transform: scale(.96); }
.botturn .ib-left { background-image: url(../assets/ui/left_d.webp); } .botturn .ib-right { background-image: url(../assets/ui/right_d.webp); }
.botturn .ctrl, .botturn .ctrl.img-btn { opacity: .8; }
/* move energy: boot badge + glowing pills */
.move-gauge { gap: 5px; }
.move-gauge .boot { width: 20px; height: 20px; }
.segs { gap: 4px; }
.segs i { height: 7px; border-radius: 4px; background: rgba(90,110,150,.45); box-shadow: inset 0 0 0 1px rgba(150,180,230,.2); }
.segs i::after { background: linear-gradient(180deg, #7FE3FF, #2FB6FF); box-shadow: 0 0 6px rgba(55,200,255,.8); }
.move-gauge b { font: 400 13px/1 var(--disp); color: #fff; }
/* angle widget with semicircle meter */
.c-angle { flex-direction: column; gap: 0; align-items: center; }
.ang-meter { width: calc(var(--btn) * 1.5); height: auto; margin-bottom: 1px; filter: drop-shadow(0 0 3px rgba(60,160,255,.6)); }
.ang-row { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 12px; background: var(--panel-bg); border: 1.5px solid var(--panel-edge); box-shadow: var(--panel-glow); }
.c-angle .cbtn.sm { background: linear-gradient(180deg, #16305F, #0C1C40); border: 1.5px solid rgba(80,170,255,.7); box-shadow: inset 0 0 8px rgba(60,150,255,.3); color: #EAF4FF; }
.c-angle .cbtn.sm.on { background: linear-gradient(180deg, #2B6BD6, #1A4AA8); }
.ang-val b { font-size: 21px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.ang-val small { color: #AFC6F0; }
/* power gauge: segmented rainbow with a glowing marker */
.c-power { background: var(--panel-bg); border: 1.5px solid var(--panel-edge); box-shadow: var(--panel-glow); border-radius: 14px; padding: 5px 10px 3px; box-sizing: border-box; }
.pw-head small { color: #AFC6F0; font-size: 10px; }
.pw-zone { background: none; padding: 0; font-size: 10.5px; }
.power-track { height: 13px; border-radius: 7px; border: 1px solid rgba(120,180,255,.45); background: rgba(0,0,0,.35); }
.power-track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .38;
  background: linear-gradient(90deg, #2F8BFF 0%, #22D3EE 18%, #34D399 38%, #A3E635 55%, #FACC15 70%, #FB923C 84%, #EF4444 100%); }
.power-track::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(16.66% - 1px), rgba(10,20,54,.7) calc(16.66% - 1px) 16.66%); }
.zone { display: none; }
.power-track i { border-radius: 7px 0 0 7px; background: linear-gradient(90deg, #2F8BFF 0%, #22D3EE 18%, #34D399 38%, #A3E635 55%, #FACC15 70%, #FB923C 84%, #EF4444 100%); background-size: var(--tw, 300px) 100%; box-shadow: 0 0 8px rgba(255,255,255,.25); }
.power-track em { width: 6px; margin-left: -3px; top: -3px; bottom: -3px; border-radius: 3px; background: linear-gradient(180deg, #FFF3C4, #FFC53D); box-shadow: 0 0 8px rgba(255,200,60,.95); }
.pw-labels { color: #AFC6F0; } .pw-labels span:nth-child(4) { color: #FFB020; }
/* shot buttons: A orange, B blue, secondary navy; selected = cyan glow */
.sbtn { border-width: 1.5px; }
#bShotA { background: linear-gradient(180deg, #FFC15A 0%, #FF9A1F 55%, #F07A10 100%); border-color: #FFD89A; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 #9A4A00; }
#bShotA b, #bShotA small { color: #3A1600; }
#bShotB { background: linear-gradient(180deg, #2E6BE0 0%, #1B4DB8 55%, #123A92 100%); border-color: #7FB2FF; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 3px 0 #0B2566; }
#bShotB b, #bShotB small { color: #F2F7FF; }
#bShotA.sel, #bShotB.sel { border-color: #9FF3FF; box-shadow: 0 0 0 2px #37E0FF, 0 0 14px rgba(55,224,255,.8), inset 0 2px 0 rgba(255,255,255,.4); }
#bShotA.sel b, #bShotA.sel small { color: #3A1600; } #bShotB.sel b, #bShotB.sel small { color: #fff; }
#bShotB.cool { background: linear-gradient(180deg, #56607A, #3A4258); border-color: #7A849C; opacity: 1; box-shadow: none; } #bShotB.cool b, #bShotB.cool small { color: #B8C0D6; }
#bSkill, #bItem { background: linear-gradient(180deg, #14285A, #0C1A3E); border-color: rgba(80,160,255,.75); box-shadow: inset 0 0 8px rgba(60,140,255,.25); }
#bSkill.sel, #bItem.sel { box-shadow: 0 0 10px rgba(55,180,255,.8); }
#bSkill.cool { background: linear-gradient(180deg, #4A5570, #343C52); border-color: #6C7690; opacity: 1; }
#bUlt { background: #121426; border-color: #FFB020; box-shadow: 0 0 8px rgba(255,170,30,.35); }
#bUlt::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #FFB020 var(--en, 0%), rgba(255,255,255,.12) var(--en, 0%)); }
#bUlt.ready { background: linear-gradient(180deg, #3A2400, #1E1206); box-shadow: 0 0 12px rgba(255,176,32,.75); }
#bUlt.sel { background: linear-gradient(180deg, #FFC15A, #F07A10); } #bUlt.sel b, #bUlt.sel small { color: #3A1600; }
/* FIRE: sheet art per state + live chip */
.fire { background: url(../assets/ui/fire_n.webp) center / contain no-repeat; border: 0; box-shadow: none; border-radius: 50%; }
.fire.on { background-image: url(../assets/ui/fire_p.webp); box-shadow: none; }
.charging .fire { background-image: url(../assets/ui/fire_c.webp); }
.botturn .fire, .proj-mode .fire { background-image: url(../assets/ui/fire_d.webp); }
.fire-ring { inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }
.c-fire { position: relative; }
.fire-chip { position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding: 4px 10px; border-radius: 10px; background: rgba(20,10,0,.85); border: 1.5px solid #FFB020; box-shadow: 0 0 10px rgba(255,176,32,.6); white-space: nowrap; pointer-events: none; }
.fire-chip b { font: 400 18px/1 var(--disp); color: #FFE08A; }
.fire-chip small { font: 700 8px var(--body); letter-spacing: .14em; color: #FFC76A; margin-top: 2px; }
.fire-chip small:empty { display: none; }
.train-panel h4 { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.train-panel h4::after { content: "▾"; font-size: 12px; color: var(--muted); }
.train-panel.collapsed h4::after { content: "▸"; }
.train-panel.collapsed > :not(h4) { display: none; }

/* =================== HOME LOBBY =================== */
#home { --navh: 62px; overflow: hidden; background: #6FB8F0; }
.glass { background: rgba(10, 20, 54, .72); border: 1.5px solid rgba(90, 180, 255, .55); box-shadow: 0 0 10px rgba(40, 130, 255, .22), inset 0 0 12px rgba(60, 150, 255, .12);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 14px; }
.rdot { position: absolute; top: 3px; right: 3px; width: 9px; height: 9px; border-radius: 50%; background: #FF3B4E; box-shadow: 0 0 0 2px #0B1026; pointer-events: none; }
/* parallax background: sky, far islands, drifting clouds, castle layer, floating isles */
.hl-bg { position: absolute; inset: 0; overflow: hidden; --px: 0; }
.hl-l1, .hl-l2, .hl-l3 { position: absolute; inset: -6%; background: url(../assets/bg/sky_menu.jpg) center/cover; }
.hl-l1 { filter: blur(8px) saturate(1.1) brightness(1.08); transform: translateX(calc(var(--px) * -0.15px)) scale(1.15); }
.hl-l2 { filter: blur(2.5px) saturate(1.05); opacity: .8; transform: translateX(calc(var(--px) * -0.35px)) scale(1.05); mask-image: linear-gradient(transparent 0%, #000 30%, #000 75%, transparent 100%); -webkit-mask-image: linear-gradient(transparent 0%, #000 30%, #000 75%, transparent 100%); }
.hl-l3 { background: linear-gradient(180deg, rgba(8,16,48,.55) 0%, rgba(8,16,48,0) 22%, rgba(8,16,48,0) 58%, rgba(8,16,48,.7) 100%); inset: 0; }
.hl-clouds i { position: absolute; width: 60vmax; height: 18vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); animation: cloudDrift 60s linear infinite; }
.hl-clouds i:nth-child(1) { top: 18%; left: -40%; } .hl-clouds i:nth-child(2) { top: 42%; left: -60%; animation-duration: 85s; animation-delay: -30s; opacity: .7; } .hl-clouds i:nth-child(3) { top: 8%; left: -50%; animation-duration: 110s; animation-delay: -70s; opacity: .5; }
@keyframes cloudDrift { to { transform: translateX(200vw); } }
.hl-isle { position: absolute; opacity: .55; filter: blur(1px) saturate(.9); animation: isleFloat 7s ease-in-out infinite; pointer-events: none; }
.hl-isle.a { width: 18vmin; top: 30%; left: 4%; transform: translateX(calc(var(--px) * -0.6px)); }
.hl-isle.b { width: 24vmin; top: 22%; right: 2%; animation-delay: -3s; opacity: .45; }
@keyframes isleFloat { 50% { translate: 0 -10px; } }
.hl-canvas { position: absolute; inset: 0; display: block; }

.hl-grid { position: absolute; inset: 0; display: grid; gap: 8px 8px; z-index: 1;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) max(10px, env(safe-area-inset-right, 0px)) calc(var(--navh) + env(safe-area-inset-bottom, 0px) + 8px) max(10px, env(safe-area-inset-left, 0px));
  grid-template-columns: 78px minmax(0, 1fr) minmax(170px, 46%); grid-template-rows: auto minmax(0, 1fr) auto auto; pointer-events: none; }
.hl-grid > * { pointer-events: auto; }
.hl-top { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.hl-left { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 8px; align-self: start; z-index: 2; }
.hl-rightcol { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: 7px; align-self: start; z-index: 2; min-width: 0; }
.hl-stage { grid-column: 1 / -1; grid-row: 2; position: relative; pointer-events: auto; }
.hl-plate-row { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hl-modes { grid-column: 1 / -1; grid-row: 4; }

/* profile */
.hl-profile { display: flex; gap: 8px; align-items: center; padding: 5px 10px 5px 5px; border-radius: 40px 16px 16px 40px; min-width: 0; flex: 0 1 230px; }
.hl-avatar { flex: none; width: 50px; height: 50px; border-radius: 50%; border: 2.5px solid var(--fr, #37E0FF); box-shadow: 0 0 10px color-mix(in srgb, var(--fr, #37E0FF) 60%, transparent);
  background: #1B2250 center 6% / 175% no-repeat; padding: 0; }
.hl-pinfo { min-width: 0; flex: 1; line-height: 1.1; }
.hl-pinfo > small { font-size: 10px; font-weight: 700; color: #BFD4FF; }
.hl-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hl-name b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-edit { border: 0; background: none; color: #9FC4FF; padding: 4px; margin: -4px 0; display: grid; place-items: center; min-width: 28px; min-height: 28px; }
.hl-uid { display: block; font-size: 9.5px !important; color: #8FA6D6 !important; }
.hl-exp { position: relative; height: 12px; margin-top: 3px; border-radius: 6px; background: rgba(0,0,0,.45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(120,170,255,.3); }
.hl-exp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #22D3EE, #60A5FA); }
.hl-exp span { position: relative; display: block; text-align: right; padding-right: 5px; font-size: 8.5px; line-height: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hl-right-top { display: grid; grid-template-columns: auto 40px; grid-template-rows: auto auto; grid-auto-flow: column; gap: 5px; align-items: center; flex: none; }
.hl-cur { display: flex; align-items: center; gap: 4px; height: 32px; padding: 0 3px 0 5px; border-radius: 16px; min-width: 104px; }
.hl-cur .ci { display: grid; place-items: center; }
.hl-cur b { flex: 1; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.hl-cur .plus { width: 24px; height: 24px; border-radius: 8px; border: 0; background: linear-gradient(180deg, #3B82F6, #1D4ED8); color: #fff; font-weight: 700; font-size: 16px; line-height: 1; padding: 0; position: relative; }
.hl-cur .plus::before { content: ""; position: absolute; inset: -8px; }
.hl-ico { position: relative; width: 38px; height: 38px; display: grid; place-items: center; color: #EAF2FF; padding: 0; border-radius: 12px; }
/* rank card */
.hl-rank { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px 7px; color: #fff; }
.hl-rank b { font-size: 10px; text-align: center; line-height: 1.1; }
.hl-rank small { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .hl-rank .st { color: var(--gold); }
/* quick menu */
.hl-quick { display: flex; flex-direction: column; gap: 6px; }
.hl-quick button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; min-height: 52px; border-radius: 13px; color: #fff;
  background: rgba(10,20,54,.72); border: 1.5px solid rgba(90,180,255,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hl-quick button svg { color: #FFC84A; }
.hl-quick span { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; }
.hl-quick button:active, .hl-card:active, .hl-rank:active { transform: scale(.96); }
/* event banner */
.hl-banner { position: relative; overflow: hidden; padding: 0; border-color: rgba(200,160,255,.6); touch-action: pan-y; }
.hl-slides { display: flex; will-change: transform; }
.hl-slide { position: relative; flex: 0 0 100%; height: clamp(96px, 15vh, 128px); border: 0; padding: 0; text-align: left; color: #fff; overflow: hidden;
  background: radial-gradient(120% 90% at 80% 20%, var(--c2), var(--c1) 55%, #140A32 100%); }
.hl-slide img { position: absolute; right: -6%; bottom: -14%; height: 128%; filter: drop-shadow(0 4px 8px rgba(0,0,0,.4)); animation: slideFloat 4s ease-in-out infinite; }
@keyframes slideFloat { 50% { transform: translateY(-4px); } }
.hl-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,6,34,.75) 0%, rgba(10,6,34,.2) 58%, transparent); }
.ev-tag { position: absolute; z-index: 1; left: 10px; top: 10px; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; padding: 2px 7px; border-radius: 10px; background: rgba(255,255,255,.9); color: #4B1FA8; }
.hl-slide .ev-txt { position: absolute; z-index: 1; left: 10px; bottom: 14px; max-width: 70%; display: flex; flex-direction: column; gap: 2px; }
.hl-slide b { white-space: nowrap; font: 400 clamp(15px, 4.2vw, 22px)/1 var(--disp); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.hl-slide small { font-size: 10px; font-weight: 600; color: #EDE3FF; line-height: 1.15; }
.hl-slide .rdot { z-index: 2; top: 8px; right: 8px; }
.hl-dots { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; justify-content: center; gap: 5px; z-index: 2; }
.hl-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.45); transition: width .2s; cursor: pointer; }
.hl-dots i.on { width: 14px; background: #fff; }
/* cards */
.hl-card { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 8px; color: #fff; text-align: left; min-height: 48px; }
.hc-ico { color: #FFC84A; display: grid; place-items: center; flex: none; }
.hc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hc-body b { font-size: 11.5px; letter-spacing: .04em; }
.hc-row { display: flex; align-items: center; gap: 6px; } .hc-row small { font-size: 11px; font-weight: 700; color: #7FE3FF; font-variant-numeric: tabular-nums; }
.hc-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(0,0,0,.45); overflow: hidden; } .hc-bar i { display: block; height: 100%; background: linear-gradient(90deg, #22D3EE, #34D399); }
.hc-chev { color: #9FC4FF; flex: none; }
.hl-login { flex-direction: column; align-items: stretch; gap: 5px; }
.hl-login-head { display: flex; align-items: center; gap: 6px; color: #FFC84A; } .hl-login-head b { color: #fff; font-size: 11.5px; letter-spacing: .04em; }
.hl-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.day .dbox { width: 100%; aspect-ratio: 1; max-width: 40px; border-radius: 8px; display: grid; place-items: center; background: rgba(0,0,0,.35); border: 1.5px solid rgba(120,160,220,.35); color: #7B87A8; }
.day.got .dbox { background: linear-gradient(180deg, #3A2A06, #20180A); border-color: #D4A017; color: #FFD24A; }
.day.today .dbox { border-color: #7FE3FF; background: linear-gradient(180deg, #1B4D9A, #0E2A60); box-shadow: 0 0 10px rgba(80,200,255,.7); }
.day small { font-size: 8px; color: #BFD0F0; font-weight: 700; white-space: nowrap; }
.day em { font-style: normal; font-size: 10px; color: #DDE7FF; text-align: center; }
/* stage arrows */
.hl-arrow { width: 44px; height: 44px; border: 1.5px solid rgba(90,180,255,.5); border-radius: 50%; background: rgba(10,20,54,.55); color: #fff; font-size: 30px; line-height: 1; padding: 0 0 4px; flex: none; }
/* selected mech plate */
.hl-plate { display: flex; align-items: center; gap: 8px; padding: 4px 5px 4px 5px; border-radius: 26px; min-width: 210px; }
.pl-ico { width: 34px; height: 34px; border-radius: 50%; background: #1B2250 center 8% / 175% no-repeat; box-shadow: 0 0 0 2px var(--mc, #FFC84A); flex: none; }
.pl-txt { display: flex; flex-direction: column; align-items: center; flex: 1; line-height: 1.05; }
.pl-stars { color: #FFD24A; font-size: 11px; letter-spacing: 1px; } .pl-stars .off, .mstars .off { color: rgba(255,255,255,.22); }
.pl-txt b { font: 400 17px/1 var(--disp); letter-spacing: .04em; }
.pl-change { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 38px; border-radius: 19px; border: 1.5px solid rgba(90,180,255,.7); background: rgba(20,50,110,.8); color: #fff; padding: 0; }
.pl-change svg { transform: rotate(90deg); } .pl-change small { font-size: 8.5px; font-weight: 700; }
/* primary modes */
.hl-modes { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 7px; align-items: stretch; }
.hl-modes button { position: relative; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; transition: transform .08s; }
.hl-modes button:active { transform: scale(.95); }
.hm-side { border-radius: 18px; min-height: 84px; }
.hm-side b { font: 400 clamp(13px, 3.6vw, 17px)/1.05 var(--disp); letter-spacing: .03em; text-align: center; }
.hm-side small { font-size: 9px; font-weight: 600; opacity: .85; white-space: nowrap; }
.hm-ico { display: grid; place-items: center; height: 34px; }
.hm-ranked { background: linear-gradient(180deg, #1E4FB8, #0D2A6B); box-shadow: inset 0 0 0 1.5px #62B4FF, 0 0 12px rgba(60,160,255,.4); }
.hm-room { background: linear-gradient(180deg, #6D3BD8, #3A1A86); box-shadow: inset 0 0 0 1.5px #C9A2FF, 0 0 12px rgba(160,100,255,.4); }
.hm-room .hm-ico { color: #E9DAFF; }
.hm-play { min-height: 92px; clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); color: #3A1600 !important;
  background: radial-gradient(120% 90% at 50% 10%, #FFE9A0, #FFB938 45%, #F0850A 100%); box-shadow: inset 0 0 0 2px #FFF0B8; animation: playGlow 2.8s ease-in-out infinite; }
@keyframes playGlow { 50% { filter: brightness(1.08) drop-shadow(0 0 6px rgba(255,190,60,.7)); } }
.hm-play-row { display: flex; align-items: center; gap: 6px; }
.hm-play b { font: 400 clamp(30px, 9vw, 42px)/1 var(--disp); letter-spacing: .03em; }
.hm-play small { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #5A2A00; }
/* bottom navigation */
.bottom-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px;
  padding: 5px max(8px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 5px) max(8px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(14,26,70,.94), rgba(8,14,40,.97)); border-top: 1.5px solid rgba(90,180,255,.5); box-shadow: 0 -4px 16px rgba(0,0,0,.35); }
.bottom-nav button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; border: 0; background: transparent; color: #A9C4F2; border-radius: 12px; padding: 0; }
.bottom-nav button span { font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.bottom-nav button.on { color: #FFD36B; background: radial-gradient(90% 90% at 50% 100%, rgba(255,170,40,.35), rgba(255,170,40,0)); box-shadow: inset 0 -2px 0 #FFB020; }
.bottom-nav button.on svg { filter: drop-shadow(0 0 5px rgba(255,190,60,.8)); }
.bottom-nav .rdot { top: 5px; right: calc(50% - 18px); }
body.has-nav .menu-screen { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
body.has-nav .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
/* modals used by home */
.login-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.login-grid .dbox { max-width: none; }
.cur-list, .mail-list { display: flex; flex-direction: column; gap: 8px; }
.cur-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; background: rgba(0,0,0,.25); border-radius: 12px; padding: 8px 10px; }
.cur-row small { display: block; color: var(--muted); font-size: 12px; }
.mail-row { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px 12px; border-left: 3px solid transparent; }
.mail-row.unread { border-left-color: #FF3B4E; }
.mail-row p { margin: 4px 0; font-size: 13px; color: #D6DDF5; } .mail-row small { color: var(--muted); font-size: 11px; } .mail-row .rw { color: var(--gold); display: block; }
.m-input { width: 100%; box-sizing: border-box; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: inherit; font-weight: 700; }
/* matchmaking */
.mm-box { align-items: center; text-align: center; }
.mm-kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #7FE3FF; }
.mm-radar { position: relative; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(55,224,255,.18), rgba(55,224,255,0) 70%); }
.mm-radar img { width: 100px; height: 100px; object-fit: contain; z-index: 1; }
.mm-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(55,224,255,.6); animation: ping 1.8s ease-out infinite; }
.mm-radar i + i { animation-delay: .9s; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.15); opacity: 0; } }
.mm-time { margin: 0; font: 400 22px/1 var(--disp); font-variant-numeric: tabular-nums; }
.mm-vs { display: flex; align-items: center; gap: 10px; }
.mm-vs div { display: flex; flex-direction: column; align-items: center; width: 110px; } .mm-vs img { width: 90px; height: 90px; object-fit: contain; }
.mm-vs span { font: 400 30px/1 var(--disp); color: #FFB020; } .mm-vs small { color: var(--muted); font-size: 11px; }
/* events page */
.event-list { display: grid; gap: 12px; max-width: 760px; }
.ev-card { border-radius: 16px; overflow: hidden; border: 1.5px solid rgba(255,255,255,.18); background: var(--panel); }
.ev-card.focus { box-shadow: 0 0 0 2px var(--c2); }
.ev-art { position: relative; height: 120px; background: radial-gradient(120% 90% at 80% 20%, var(--c2), var(--c1) 55%, #140A32 100%); overflow: hidden; }
.ev-art img { position: absolute; right: 2%; bottom: -12%; height: 120%; }
.ev-art b { position: absolute; left: 14px; bottom: 32px; font: 400 26px/1 var(--disp); text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.ev-art small { position: absolute; left: 14px; bottom: 14px; color: #EDE3FF; font-weight: 600; }
.ev-body { padding: 10px 14px 12px; } .ev-body p { margin: 0 0 8px; }
.ev-body .bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; } .ev-body .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); }
.ev-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; } .ev-foot small { color: var(--muted); }
/* rank season, mech cards, bundles */
.rank-season { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; max-width: 760px; margin-top: 10px; }
.rank-season div { background: var(--panel); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.rank-season small { font-size: 10px; letter-spacing: .12em; color: var(--muted); font-weight: 700; } .rank-season b { font-size: 15px; } .rank-season span { font-size: 11.5px; color: #BFD0F0; }
.mcard { position: relative; } .mcard .own { position: absolute; top: 6px; left: 6px; font-size: 8px; font-weight: 700; letter-spacing: .1em; padding: 2px 5px; border-radius: 6px; background: rgba(92,240,138,.2); color: var(--good); }
.mstars { color: var(--gold); letter-spacing: 0; }
.bundle-thumb { display: flex !important; flex-direction: column; gap: 3px; padding: 6px; } .bundle-thumb span { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.08); border-radius: 6px; padding: 2px 6px; }

/* home: landscape / desktop */
@media (orientation: landscape) {
  #home { --navh: 52px; }
  .hl-grid { grid-template-columns: minmax(170px, 22%) minmax(0, 1fr) minmax(220px, 27%); grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px 10px; }
  .hl-left { grid-row: 2 / 5; overflow-y: auto; }
  .hl-rightcol { grid-row: 2 / 5; overflow-y: auto; }
  .hl-stage, .hl-plate-row, .hl-modes { grid-column: 2; }
  .hl-rank { flex-direction: row; gap: 8px; justify-content: flex-start; padding: 5px 10px; } .hl-rank b { font-size: 12px; text-align: left; }
  .hl-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .hl-quick button { flex-direction: row; min-height: 40px; gap: 6px; padding: 4px 8px; justify-content: flex-start; } .hl-quick span { font-size: 9.5px; }
  .hl-quick button:last-child { grid-column: 1 / -1; }
  .hm-side { min-height: 64px; } .hm-play { min-height: 70px; } .hm-ico { height: 26px; }
  .hl-profile { flex-basis: 260px; }
  .hl-right-top { grid-template-columns: auto auto 40px 40px; grid-template-rows: auto; grid-auto-flow: row; }
  .bottom-nav { left: 50%; right: auto; transform: translateX(-50%); width: min(620px, 100%); border-radius: 18px 18px 0 0; border: 1.5px solid rgba(90,180,255,.5); border-bottom: 0; box-sizing: border-box; }
  .bottom-nav button { min-height: 40px; }
}
@media (orientation: landscape) and (max-height: 460px) {
  .hl-slide { height: 84px; } .hl-days .day small { display: none; } .hm-side small, .hm-play small { display: none; }
  .hl-avatar { width: 40px; height: 40px; } .hl-exp { display: none; }
}
@media (max-width: 360px) { .hl-cur { min-width: 92px; } .hl-cur b { font-size: 12px; } .hl-grid { grid-template-columns: 70px minmax(0, 1fr) minmax(150px, 46%); } }
@media (prefers-reduced-motion: reduce) { .hl-clouds i, .hl-isle, .hm-play, .hl-slide img, .mm-radar i { animation: none; } }
.hl-rank svg { width: 54px; height: 54px; }
@media (orientation: portrait) and (max-height: 740px) {
  .hl-grid { gap: 6px; }
  .hl-rank { padding: 4px; } .hl-rank svg { width: 38px; height: 38px; }
  .hl-quick { gap: 4px; } .hl-quick button { min-height: 44px; padding: 4px 2px; } .hl-quick button svg { width: 18px; height: 18px; }
  .hl-slide { height: 92px; } .hl-card { min-height: 42px; padding: 5px 8px; } .hl-days .day small { display: none; }
  .hm-side { min-height: 72px; } .hm-play { min-height: 78px; } .hm-ico { height: 28px; }
}
@media (orientation: landscape) {
  .hl-quick { grid-template-columns: 1fr; gap: 4px; } .hl-quick button { min-height: 36px; } .hl-quick button:last-child { grid-column: auto; }
  .hl-rank svg { width: 40px; height: 40px; }
}
@media (orientation: landscape) and (max-height: 460px) { .hl-slide small, .hl-slide .ev-tag { display: none; } }
.mode-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .mode-pick .btn-s { min-height: 44px; } .mm-quick { font-size: 20px; }
.own-tag { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/1 "Lilita One", sans-serif; color: #9DB9FF; letter-spacing: .05em; }
.own-tag .ck { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: #9DB9FF; color: #0C1840; }
.icard .fav.mk-ic { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; }
.icard .row { align-items: center; }
.mode-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .mode-pick .mk { font-size: 17px; min-height: 50px; padding: 0 8px; }
.mk.mm-quick { font-size: clamp(17px, 5vw, 24px); padding: 0 12px; }
.mission .mk { grid-row: 1 / span 3; grid-column: 2; }
.res-actions { display: flex; gap: 10px; } .res-actions > .mk { flex: 1; }

/* HOME + top bar using the UI kit */
.mk-pill.hl-pill { height: 34px; gap: 6px; padding: 0 16px 0 3px; font-size: 16px; min-width: 104px; }
.mk-pill.hl-pill b { flex: 1; text-align: right; font-weight: 400; }
.mk-pill.hl-pill .coin, .mk-pill.hl-pill .gem { width: 26px; height: 26px; font-size: 14px; } .mk-pill.hl-pill .gem::before { width: 10px; height: 10px; }
.mk-pill.hl-pill .add { width: 24px; height: 24px; margin-right: -12px; position: relative; } .hl-pill .add::before { content: ""; position: absolute; inset: -8px; }
.mk-ic.hl-ic { width: 40px; height: 40px; } .mk-ic.hl-ic .rdot { width: 11px; height: 11px; top: -1px; right: -1px; }
.hl-plate-row .mk-ic { width: 44px; height: 44px; flex: none; }
.mk.pl-change2 { font-size: 13px; min-height: 34px; padding: 0 12px; }
.hl-modes .hm-kit { display: flex; flex-direction: column; gap: 3px; min-height: 84px; padding: 6px 6px; white-space: normal; text-align: center; --c: 12px; }
.hm-kit b { font: 400 clamp(13px, 3.6vw, 18px)/1.05 "Lilita One", sans-serif; }
.hm-kit small { font: 700 9px/1 "Chakra Petch", sans-serif; letter-spacing: .04em; opacity: .85; text-transform: none; }
.hm-kit .hm-ico { height: 30px; display: grid; place-items: center; }
.hm-play2 { min-height: 94px !important; --c: 16px; }
.hm-play2 b { font-size: clamp(32px, 9vw, 44px) !important; }
.hm-play2 .hm-play-row { display: flex; align-items: center; gap: 6px; }
.hm-play2 small { font-size: 10px !important; letter-spacing: .1em !important; }
.mk-pill.tb-pill { height: 34px; font-size: 16px; padding: 0 12px 0 3px; gap: 6px; } .mk-pill.tb-pill .coin, .mk-pill.tb-pill .gem { width: 26px; height: 26px; font-size: 14px; } .mk-pill.tb-pill .gem::before { width: 10px; height: 10px; }
.tb-pill b { font-weight: 400; }
.mk.tb-home { min-height: 34px; }
@media (orientation: landscape) { .hl-modes .hm-kit { min-height: 64px; } .hm-play2 { min-height: 70px !important; } .hm-kit .hm-ico { height: 22px; } }
@media (orientation: portrait) and (max-height: 740px) { .hl-modes .hm-kit { min-height: 70px; } .hm-play2 { min-height: 78px !important; } }

/* =================== COMPETITIVE RANK =================== */
.stars5 { display: inline-flex; gap: 2px; align-items: center; }
.stars5 .st { font-style: normal; color: rgba(255,255,255,.2); font-size: 18px; line-height: 1; transition: color .3s, transform .3s; }
.stars5 .st.on { color: #FFD24A; text-shadow: 0 0 6px rgba(255,200,60,.8); }
.stars5.mini .st { font-size: 11px; } .stars5.big .st { font-size: 30px; }
.stars5 .lp, .lp { font: 400 18px/1 "Lilita One", sans-serif; color: #FFD86B; text-shadow: 0 0 8px rgba(255,200,60,.6); }
.stars5.mini .lp { font-size: 11px; }
.st.gain { animation: stGain .9s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stGain { 0% { transform: scale(0) rotate(-90deg); color: #fff; } 60% { transform: scale(1.7); text-shadow: 0 0 22px #FFE39A; } 100% { transform: scale(1); } }
.st.lose { animation: stLose .9s ease both; }
@keyframes stLose { 0% { color: #FFD24A; transform: scale(1.3); } 40% { color: #FF4F5E; text-shadow: 0 0 14px #FF4F5E; } 100% { color: rgba(255,255,255,.2); transform: translateY(8px) scale(.8); text-shadow: none; } }
.lp.pop { animation: stGain .8s ease both; }
.hl-rank img { filter: drop-shadow(0 0 6px rgba(120,180,255,.5)); }
.hl-rank b { font-size: 11px; letter-spacing: .06em; }
.tb-rank img { display: block; }

.rk-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rk-head .scr-title { margin: 0; } .rk-head .scr-title span { color: #3FC8FF; }
.rk-head p { margin: 0; color: #8FA6D6; letter-spacing: .16em; font-size: 11px; text-transform: uppercase; font-weight: 700; }
.rk-hero { display: grid; grid-template-columns: minmax(130px, 200px) 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; max-width: 760px;
  background: radial-gradient(90% 120% at 18% 50%, color-mix(in srgb, var(--tg) 28%, transparent), rgba(10,20,54,.85) 70%); border: 1.5px solid color-mix(in srgb, var(--tc) 70%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--tg) 35%, transparent); }
.rk-badge { display: grid; place-items: center; } .rk-badge img { width: 100%; max-width: 180px; height: auto; filter: drop-shadow(0 0 16px var(--tg)); animation: badgeFloat 4s ease-in-out infinite; }
@keyframes badgeFloat { 50% { transform: translateY(-6px); } }
.rk-info small { font-size: 10px; letter-spacing: .16em; color: #8FA6D6; font-weight: 700; }
.rk-info h2 { margin: 2px 0 6px; font: 400 clamp(30px, 8vw, 44px)/1 "Lilita One", sans-serif; color: var(--tc); text-shadow: 0 0 14px color-mix(in srgb, var(--tg) 70%, transparent); }
.rk-info .stars5 .st { font-size: 26px; }
.rk-sub { margin: 4px 0 8px; color: #D6DDF5; font-weight: 600; }
.rk-next { display: flex; align-items: center; gap: 8px; } .rk-next span { font-size: 10px; letter-spacing: .14em; color: #8FA6D6; font-weight: 700; } .rk-next b { font: 400 16px/1 "Lilita One", sans-serif; }
.rk-bar { height: 12px; border-radius: 6px; background: rgba(0,0,0,.45); overflow: hidden; margin-top: 8px; box-shadow: inset 0 0 0 1px rgba(120,170,255,.3); }
.rk-bar i { display: block; height: 100%; background: linear-gradient(90deg, #3FC8FF, var(--tc)); box-shadow: 0 0 10px var(--tg); }
.rk-pct { display: block; text-align: right; color: #fff !important; letter-spacing: 0 !important; font-size: 12px !important; margin-top: 2px; }
.rk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.chip { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 4px 9px; border-radius: 10px; }
.chip.prot { background: rgba(63,200,255,.15); color: #7FE8FF; border: 1px solid rgba(63,200,255,.5); }
.chip.streak { background: rgba(255,120,40,.18); color: #FFB070; border: 1px solid rgba(255,140,60,.55); }
.rk-rules { max-width: 760px; margin-top: 14px; background: var(--panel); border-radius: 14px; padding: 4px 14px 10px; border: 1px solid var(--line); }
.rk-rules ul { margin: 0; padding-left: 18px; color: #D6DDF5; font-size: 13px; line-height: 1.6; }
@media (max-width: 520px) { .rk-hero { grid-template-columns: 1fr; text-align: center; } .rk-next, .rk-chips { justify-content: center; } .rk-badge img { max-width: 150px; } }
/* ladder */
.ladder { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.ld-row { display: grid; grid-template-columns: 30px 64px 1fr auto; gap: 10px; align-items: center; padding: 6px 12px 6px 8px; border-radius: 16px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 16%, #0C1636), #0C1636 60%); border: 1.5px solid color-mix(in srgb, var(--tc) 55%, transparent); }
.ld-no { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font: 400 15px/1 "Lilita One", sans-serif; border: 1.5px solid var(--tc); color: var(--tc); background: #0B1026; }
.ld-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ld-txt b { font: 400 18px/1 "Lilita One", sans-serif; color: var(--tc); } .ld-txt small { color: #BFD0F0; font-size: 11.5px; }
.ld-txt .stars5 .st { font-size: 14px; } .ld-txt .stars5 .st.on { color: var(--tc); text-shadow: 0 0 6px var(--tg); }
.ld-state { font-size: 10px; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.ld-row.done .ld-state { color: #5CF08A; }
.ld-row.cur { box-shadow: 0 0 0 1px var(--tc), 0 0 18px color-mix(in srgb, var(--tg) 60%, transparent); transform: scale(1.015); }
.ld-row.cur .ld-state { color: #fff; background: color-mix(in srgb, var(--tc) 40%, #0B1026); padding: 4px 8px; border-radius: 8px; }
.ld-row.locked { filter: brightness(.55) saturate(.7); } .ld-row.locked .ld-state { color: #8FA6D6; }
.ld-row .tbadge { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 6px var(--tg)); }
@media (max-width: 420px) { .ld-row { grid-template-columns: 26px 50px 1fr; } .ld-row .tbadge { width: 50px; height: 50px; } .ld-state { grid-column: 2 / -1; justify-self: start; } .ld-txt small { display: none; } }
/* rewards + leaderboard */
.rw-list, .lb { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.rw-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 14px; background: var(--panel); border: 1px solid color-mix(in srgb, var(--tc) 45%, transparent); }
.rw-row b { font: 400 16px/1 "Lilita One", sans-serif; color: var(--tc); } .rw-row small { display: block; color: #BFD0F0; font-size: 12px; } .rw-row:not(.got) { opacity: .7; }
.rw-row .tbadge { width: 48px; height: 48px; object-fit: contain; }
.lb-row { display: grid; grid-template-columns: 42px 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); max-width: 760px; box-sizing: border-box; }
.lb-pos { font: 400 18px/1 "Lilita One", sans-serif; color: #9FB4D8; } .lb-row b { font-size: 14px; } .lb-lp { font: 400 15px/1 "Lilita One", sans-serif; color: #FFD86B; text-align: right; }
.lb-row .tbadge { width: 32px; height: 32px; object-fit: contain; }
.lb-row.top1 .lb-pos { color: #FFD24A; } .lb-row.top2 .lb-pos { color: #D6E4FF; } .lb-row.top3 .lb-pos { color: #E08A4E; }
.lb-row.me { border-color: #3FC8FF; box-shadow: 0 0 12px rgba(63,200,255,.45); } .lb-row.out { margin-top: 10px; } .lb-row.out .lb-lp { color: #9FB4D8; font: 700 12px/1.2 "Chakra Petch", sans-serif; }
/* ranked result block */
.rres { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px;
  background: radial-gradient(100% 140% at 0% 50%, color-mix(in srgb, var(--tg) 30%, transparent), rgba(0,0,0,.25) 70%); border: 1.5px solid color-mix(in srgb, var(--tc) 60%, transparent); }
.rres-badge { width: 84px; height: 84px; object-fit: contain; filter: drop-shadow(0 0 10px var(--tg)); }
.rres-info b#rresName { font: 400 22px/1 "Lilita One", sans-serif; color: var(--tc); display: block; margin-bottom: 4px; }
.rres-lines { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.rd { font: 400 14px/1 "Lilita One", sans-serif; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.08); }
.rd.up { color: #FFD24A; background: rgba(255,200,60,.14); } .rd.down { color: #FF7A85; background: rgba(255,79,94,.14); }
.rd.bonus { color: #FFB070; background: rgba(255,140,60,.16); } .rd.prot { color: #7FE8FF; background: rgba(63,200,255,.14); }
.rres small { color: #BFD0F0; font-size: 12px; }
/* full-screen rank change */
.rank-fx { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tg) 35%, #050818) 0%, #050818 70%); overflow: hidden; }
.rank-fx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rf-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: -4vh; }
.rf-inner img { width: min(56vw, 240px); height: auto; }
#rfOld { position: absolute; top: 0; animation: rfOld 1s ease-in both; filter: drop-shadow(0 0 12px #fff); }
@keyframes rfOld { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(1.12); filter: brightness(2.5) drop-shadow(0 0 30px #fff); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; filter: brightness(4); } }
#rfNew { animation: rfNew 1.1s .95s cubic-bezier(.2,1.5,.4,1) both; filter: drop-shadow(0 0 22px var(--tg)); }
@keyframes rfNew { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.rank-fx.down #rfNew { animation-name: rfDown; } @keyframes rfDown { 0% { transform: translateY(-40px); opacity: 0; } 100% { transform: none; opacity: 1; } }
#rfTitle { font: 400 clamp(40px, 12vw, 68px)/1 "Lilita One", sans-serif; letter-spacing: .04em; color: #fff; text-shadow: 0 0 20px var(--tg), 0 4px 0 rgba(0,0,0,.4); animation: rfText .6s 1.5s ease both; }
.rank-fx.down #rfTitle { color: #FF8F8F; text-shadow: 0 0 16px rgba(255,79,94,.7); }
#rfName { font: 400 clamp(26px, 8vw, 40px)/1 "Lilita One", sans-serif; color: var(--tc); animation: rfText .6s 1.7s ease both; }
.rf-stars { animation: rfText .6s 1.9s ease both; } .rf-stars .st { font-size: 28px; }
#rfOk { margin-top: 12px; min-width: 200px; animation: rfText .5s 2.2s ease both; }
@keyframes rfText { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
.rank-fx.epic #rfNew { width: min(66vw, 290px); animation-duration: 1.4s; }
.rank-fx.epic #rfTitle { background: linear-gradient(90deg, #fff, var(--tc), #fff); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: rfText .6s 1.5s ease both, shine 2s 2.1s linear infinite; }
@keyframes shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rk-badge img, .rank-fx.epic #rfTitle { animation: none; } }

/* ---------- PROFILE (compact, fits one mobile screen) ---------- */
#profile .scr-title { margin-bottom: 10px; }
.profile-box { display: flex; flex-direction: column; gap: 10px; max-width: 720px; margin: 0 auto; min-width: 0; }
.profile-box > * { min-width: 0; }
.pf-hero { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(40,60,140,.55), rgba(14,20,52,.85)); border: 2px solid var(--frame, var(--line)); box-shadow: 0 0 18px rgba(55,224,255,.08) inset; }
.pf-av { position: relative; height: 118px; border-radius: 14px; background: radial-gradient(circle at 50% 60%, rgba(55,224,255,.22), transparent 70%), rgba(8,12,34,.6); display: grid; place-items: center; overflow: hidden; }
.pf-av img { width: 100%; height: 100%; object-fit: contain; }
.pf-av span { position: absolute; left: 0; right: 0; bottom: 0; font: 700 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 4px 2px; background: rgba(5,8,26,.7); color: var(--core2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-name { position: relative; display: block; }
.pf-name input { width: 100%; box-sizing: border-box; background: rgba(5,8,26,.55); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 6px 28px 6px 10px; font: 400 20px/1.1 var(--disp); letter-spacing: .02em; }
.pf-name i { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--muted); pointer-events: none; }
.pf-lv { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 8px; align-items: center; font-size: 12px; }
.pf-lv b { color: var(--tech); font-size: 12px; }
.pf-xp { height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.pf-xp i { display: block; height: 100%; background: linear-gradient(90deg, #37E0FF, #5CF08A); }
.pf-lv small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.pf-rank { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 12px; background: rgba(5,8,26,.55); border: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); text-align: left; min-width: 0; }
.pf-rank img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tc) 70%, transparent)); flex: none; }
.pf-rank > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-rank b { font: 400 16px/1 var(--disp); color: var(--tc); letter-spacing: .03em; }
.pf-rank .stars5 .st { font-size: 13px; }
.pf-rank small { color: #FFD86B; font-weight: 700; }
.pf-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.pf-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px 2px 4px; border-radius: 20px; background: rgba(255,255,255,.07); color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-tag svg { flex: none; }
.pf-tag.gold { color: var(--gold); background: rgba(255,210,74,.12); padding-left: 8px; }
.pf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pf-stats div { background: var(--panel); border: 1px solid rgba(160,190,255,.1); border-radius: 10px; padding: 7px 6px; text-align: center; min-width: 0; }
.pf-stats b { display: block; font: 400 18px/1.1 var(--disp); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stats small { display: block; color: var(--muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bh { display: flex; align-items: baseline; justify-content: space-between; }
.pf-bh h3 { margin: 2px 0 0; font: 400 16px/1 var(--disp); letter-spacing: .06em; color: var(--muted); }
.pf-bh small { color: var(--gold); font-weight: 700; }
.pf-badges { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.pf-badges::-webkit-scrollbar { display: none; }
.pf-bdg { scroll-snap-align: start; display: grid; grid-template-columns: 26px minmax(0,1fr); column-gap: 6px; align-items: center; padding: 7px 8px; border-radius: 10px; background: var(--panel); opacity: .45; }
.pf-bdg.got { opacity: 1; border: 1px solid var(--gold); }
.pf-bdg i { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(var(--gold), #C57A00); color: #2A1000; font-style: normal; font-size: 13px; }
.pf-bdg b { font-size: 11px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bdg small { color: var(--muted); font-size: 9px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 350px) { .pf-hero { grid-template-columns: 88px minmax(0,1fr); } .pf-av { height: 100px; } .pf-stats b { font-size: 16px; } }
/* landscape phones: hero left, stats + badges right */
@media (orientation: landscape) and (max-height: 520px) {
  .profile-box { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); max-width: 900px; align-items: start; column-gap: 12px; row-gap: 8px; }
  .profile-box { grid-template-rows: auto auto 1fr; }
  .pf-hero { grid-row: 1 / span 3; grid-template-columns: 96px minmax(0,1fr); align-self: start; }
  .pf-av { height: 120px; }
  .pf-stats { grid-template-columns: repeat(6, minmax(0,1fr)); }
}

/* drone / aura rarity */
.icard .rar { display: inline-block; margin: 2px auto 0; font: 700 10px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--rc); padding: 3px 8px; border-radius: 20px; background: color-mix(in srgb, var(--rc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent); }
.icard .gstat { display: block; color: #CFF6FF; font-weight: 700; font-size: 11px; line-height: 1.3; margin-top: 3px; }
.icard .thumb canvas { max-width: 100%; }

/* ---------- mech mastery ---------- */
.mbadge { display: inline-flex; align-items: center; gap: 2px; font: 400 13px/1 var(--disp); color: #10142c; background: var(--mc); padding: 2px 7px 2px 5px; border-radius: 10px; box-shadow: 0 0 0 1.5px rgba(0,0,0,.35) inset, 0 0 8px color-mix(in srgb, var(--mc) 60%, transparent); vertical-align: middle; }
.mbadge i { font-style: normal; font-size: 10px; }
.mbadge.sm { font-size: 11px; padding: 1px 6px 1px 4px; }
.mbadge.master { background: linear-gradient(110deg, #FF7AE0 0%, #FFE27A 35%, #7CF7FF 55%, #FF7AE0 80%); background-size: 250% 100%; animation: mshine 2.4s linear infinite; }
@keyframes mshine { to { background-position: -250% 0; } }
.mastery-box { margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: rgba(5,8,26,.45); border: 1px solid var(--line); }
.mb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.mb-row small { color: var(--muted); }
.mb-bar { height: 7px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; margin: 5px 0 7px; }
.mb-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--mc, #37E0FF), #FFE27A); }
.mb-rewards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mb-rewards span { font-size: 9px; line-height: 1.15; text-align: center; padding: 4px 2px; border-radius: 8px; background: rgba(255,255,255,.05); color: var(--muted); opacity: .6; overflow: hidden; text-overflow: ellipsis; }
.mb-rewards span.got { opacity: 1; color: #fff; background: color-mix(in srgb, var(--mc, #37E0FF) 25%, transparent); }
.mb-rewards em { display: block; font: 400 13px/1 var(--disp); font-style: normal; color: var(--core2); }
.res-mastery { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 6px 0; text-align: left; }
.res-mastery small { display: block; color: var(--muted); font-size: 11px; }
.res-mvp { text-align: center; font: 400 18px/1.2 var(--disp); color: #FFD24A; letter-spacing: .06em; margin: 4px 0; }

/* ---------- highlight replay ---------- */
.replay { position: fixed; inset: 0; z-index: 300; background: #05061a; }
.replay canvas { width: 100%; height: 100%; display: block; }
.replay .rp-top { position: absolute; top: calc(8px + env(safe-area-inset-top, 0px)); left: 0; right: 0; text-align: center; font: 400 14px/1.2 var(--disp); color: #FFD24A; letter-spacing: .12em; pointer-events: none; }
.replay .rp-top span { display: block; font-size: 22px; color: #fff; letter-spacing: .04em; text-shadow: 0 2px 0 #05081a; }
.replay .rp-speed { position: absolute; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font: 400 16px var(--disp); color: #7CF7FF; }
.replay .rp-skip { position: absolute; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
.best-shot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,210,74,.16), rgba(55,224,255,.1)); border: 1px solid rgba(255,210,74,.45); text-align: left; }
.best-shot b { font: 400 16px/1 var(--disp); color: #FFD24A; letter-spacing: .06em; }
.best-shot small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.bs-btns { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- main modes ---------- */
.mode-grid { display: flex; flex-direction: column; gap: 8px; }
.mode2 { position: relative; display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; min-height: 74px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--mc) 50%, transparent);
  background: linear-gradient(90deg, rgba(8,12,34,.94) 40%, rgba(8,12,34,.25)), var(--poster, linear-gradient(135deg, color-mix(in srgb, var(--mc) 30%, #0B1026), #0B1026)) center 30% / cover; overflow: hidden; }
.mode2.sel { border-color: var(--mc); box-shadow: 0 0 0 2px var(--mc), 0 0 18px color-mix(in srgb, var(--mc) 50%, transparent); }
.m2-ico { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; background: color-mix(in srgb, var(--mc) 25%, rgba(0,0,0,.4)); border: 1px solid var(--mc); }
.m2-txt b { display: block; font: 400 18px/1.1 var(--disp); color: var(--mc); letter-spacing: .03em; }
.m2-txt small { display: block; color: #DDE6FF; font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
.m2-txt em { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin-top: 3px; }
.mode-sub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; }
#setupExtra .seg { flex-wrap: wrap; }
.mods { margin: 8px 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 10px; }
.mods h4 { grid-column: 1 / -1; margin: 4px 0 0; font-size: 12px; color: var(--muted); letter-spacing: .1em; }
.res-pve { display: flex; flex-direction: column; gap: 2px; align-items: center; margin: 6px 0; padding: 6px; border-radius: 10px; background: rgba(155,224,90,.08); }
.res-pve b { color: #9BE05A; font: 400 15px var(--disp); } .res-pve span { font-size: 12px; color: #DDE6FF; } .res-pve em { font-style: normal; color: #FFD24A; font-weight: 700; font-size: 12px; } .res-pve small { color: var(--muted); font-size: 11px; }
/* survival buff pick */
.buff-pick { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(5,6,20,.6); padding: 16px; }
.bp-box { width: min(360px, 100%); background: #10183E; border: 1.5px solid #9BE05A; border-radius: 16px; padding: 14px; text-align: center; }
.bp-box > b { font: 400 22px var(--disp); color: #9BE05A; } .bp-box > small { display: block; color: var(--muted); margin-bottom: 10px; }
.bp-list { display: flex; flex-direction: column; gap: 8px; }
.bp-opt { display: flex !important; flex-direction: column; align-items: flex-start !important; text-align: left; padding: 10px 14px !important; height: auto !important; }
.bp-opt span { font: 400 16px var(--disp); } .bp-opt small { font-size: 11px; color: var(--muted); text-transform: none; letter-spacing: 0; }

/* ---------- Phase 5: Battle Pass / Achievements ---------- */
.bp-head { display: grid; grid-template-columns: 1fr auto; gap: 8px 10px; align-items: center; background: linear-gradient(135deg, rgba(124,247,255,.16), rgba(166,92,255,.16)); border: 1px solid rgba(124,247,255,.35); border-radius: 16px; padding: 12px 14px; }
.bp-head > div { grid-row: span 2; min-width: 0; }
.bp-head small { color: #7CF7FF; font-weight: 700; letter-spacing: .08em; font-size: 11px; }
.bp-head b { display: block; font: 400 24px/1.1 'Lilita One', sans-serif; }
.bp-head b em { font-style: normal; font-size: 15px; opacity: .6; }
.bp-head .bar { height: 9px; background: rgba(255,255,255,.12); border-radius: 5px; overflow: hidden; margin: 6px 0 4px; }
.bp-head .bar i { display: block; height: 100%; background: linear-gradient(90deg, #7CF7FF, #C9A2FF); }
.bp-head span { font-size: 11px; color: var(--muted); }
.bp-prem.on { font: 400 13px 'Lilita One', sans-serif; color: #FFD24A; padding: 6px 10px; border: 1px solid #FFD24A; border-radius: 10px; text-align: center; }
.bp-cols { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); padding: 2px 0; text-align: center; }
.bp-cols span:last-child { color: #FFD24A; }
.bp-row { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; align-items: stretch; }
.bp-lv { display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.06); font: 400 16px 'Lilita One', sans-serif; color: var(--muted); }
.bp-row.reached .bp-lv { background: linear-gradient(180deg, #7CF7FF, #4A7BFF); color: #0B1026; }
.bp-row.next .bp-lv { outline: 2px solid #7CF7FF; }
.bp-cell { position: relative; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bp-cell.prem { background: linear-gradient(135deg, rgba(255,210,74,.12), rgba(255,122,31,.08)); border-color: rgba(255,210,74,.3); }
.bp-cell i { flex: none; width: 28px; height: 28px; display: grid; place-items: center; font-style: normal; font-size: 16px; border-radius: 8px; background: rgba(0,0,0,.25); }
.bp-cell small { font-size: 11px; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bp-cell:disabled { cursor: default; }
.bp-cell.ready { border-color: #9BE05A; box-shadow: 0 0 0 1px #9BE05A inset, 0 0 12px rgba(155,224,90,.35); animation: bpPulse 1.4s ease-in-out infinite; }
.bp-cell.got { opacity: .55; }
.bp-cell.lock { opacity: .7; }
.bp-cell .ck, .bp-cell > svg { position: absolute; right: 6px; top: 6px; color: #9BE05A; }
.bp-cell.lock > svg { color: #FFD24A; width: 13px; height: 13px; }
@keyframes bpPulse { 50% { box-shadow: 0 0 0 1px #9BE05A inset, 0 0 20px rgba(155,224,90,.6); } }
.mission.ach b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ach-ico { font-style: normal; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.3); border: 2px solid var(--tc); font-size: 14px; }
.ach-pips { display: inline-flex; gap: 3px; }
.ach-pips em { width: 14px; height: 5px; border-radius: 3px; }
.mission.ach.done { border-color: rgba(255,210,74,.5); }
.res-pass { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; margin: 6px 0; border-radius: 12px; background: linear-gradient(90deg, rgba(124,247,255,.15), rgba(166,92,255,.15)); border: 1px solid rgba(124,247,255,.3); }
.res-pass b { font: 400 13px 'Lilita One', sans-serif; color: #7CF7FF; }
.res-pass span { font-size: 12px; font-weight: 700; }
#misTabs button { padding-left: 10px; padding-right: 10px; }
.bp-gem { color: #7FD8FF; font-size: 16px; text-shadow: 0 0 6px rgba(127,216,255,.6); }
.bp-coin { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(#FFE27A, #F2A516); color: #7A4A00; font: 700 12px 'Chakra Petch', sans-serif; }
/* staged post-match reveal */
.results-box .st-hide { opacity: 0; transform: translateY(10px) scale(.97); }
.results-box .st-in { animation: stIn .38s cubic-bezier(.2,1.4,.4,1) both; }
.results-box .res-title.st-in { animation: stTitle .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stIn { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes stTitle { 0% { opacity: 0; transform: scale(1.8); letter-spacing: .3em; } 60% { opacity: 1; transform: scale(.95); } 100% { transform: none; } }
.res-skip { display: block; text-align: center; font-size: 10px; letter-spacing: .15em; color: var(--muted); margin-top: 6px; animation: skipBlink 1.2s ease-in-out infinite; }
@keyframes skipBlink { 50% { opacity: .35; } }

/* ---------- LOGIN / ACCOUNT ---------- */
#login { position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #0B1026; display: flex; align-items: center; justify-content: center; }
.lg-bg { position: absolute; inset: 0; overflow: hidden; }
.lg-sky { position: absolute; inset: -4%; background: url(../assets/bg/sky_menu.jpg) 50% 40% / cover; animation: lgPan 38s ease-in-out infinite alternate; }
.lg-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,16,38,.15) 0%, rgba(11,16,38,.05) 35%, rgba(11,16,38,.72) 70%, rgba(8,12,34,.95) 100%); }
@keyframes lgPan { from { transform: scale(1.06) translateX(-2%); } to { transform: scale(1.06) translateX(2%); } }
.lg-clouds i { position: absolute; width: 70vmax; height: 16vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); filter: blur(4px); animation: lgCloud 60s linear infinite; will-change: transform; }
.lg-clouds i:nth-child(1) { top: 8%; left: -70vmax; animation-duration: 70s; }
.lg-clouds i:nth-child(2) { top: 26%; left: -70vmax; animation-duration: 95s; animation-delay: -40s; opacity: .7; }
.lg-clouds i:nth-child(3) { top: 50%; left: -70vmax; animation-duration: 80s; animation-delay: -15s; opacity: .45; }
.lg-clouds i:nth-child(4) { top: 64%; left: -70vmax; animation-duration: 110s; animation-delay: -70s; opacity: .35; }
@keyframes lgCloud { to { transform: translateX(calc(100vw + 140vmax)); } }
.lg-isle { position: absolute; width: 26vmin; opacity: .9; filter: drop-shadow(0 10px 18px rgba(0,0,0,.3)); animation: lgFloat 7s ease-in-out infinite; }
.lg-isle.a { right: -4vmin; top: 16%; }
.lg-isle.b { left: -2vmin; top: 40%; width: 18vmin; animation-delay: -3s; }
@keyframes lgFloat { 50% { transform: translateY(-12px); } }
.lg-light { position: absolute; inset: -30%; background: conic-gradient(from 200deg at 60% 0%, transparent 0 30deg, rgba(255,240,200,.14) 38deg, transparent 50deg, rgba(255,240,200,.1) 62deg, transparent 72deg); animation: lgRays 18s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes lgRays { to { transform: rotate(6deg) translateX(2%); } }
#lgCanvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .lg-sky, .lg-clouds i, .lg-isle, .lg-light { animation: none; } }
.lg-wrap { position: relative; box-sizing: border-box; width: min(420px, 100%); padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 14px); display: flex; flex-direction: column; align-items: center; max-height: 100%; overflow-y: auto; }
.lg-logo { width: min(330px, 84%); height: auto; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(55,224,255,.35)); animation: lgLogo 4s ease-in-out infinite; }
@keyframes lgLogo { 50% { transform: translateY(-4px); } }
.lg-welcome { margin: 6px 0 14px; font: 400 clamp(20px, 6vw, 26px)/1 var(--disp); letter-spacing: .14em; color: #fff; text-shadow: 0 2px 0 #1B3A8C, 0 0 18px rgba(124,247,255,.7); }
.lg-panel { box-sizing: border-box; width: 100%; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(20,30,70,.78), rgba(10,16,42,.86)); border: 1px solid rgba(124,247,255,.4);
  box-shadow: 0 0 0 1px rgba(124,247,255,.08) inset, 0 0 28px rgba(55,224,255,.22), 0 18px 40px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 10px; }
.lg-panel.busy { opacity: .85; }
.lg-panel h3 { margin: 0; text-align: center; font: 400 20px var(--disp); letter-spacing: .08em; color: #7CF7FF; }
.lg-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 16px; border-radius: 14px; border: 0; cursor: pointer;
  font: 700 15px 'Chakra Petch', sans-serif; letter-spacing: .06em; color: #0B1026; transition: transform .12s, filter .12s; }
.lg-btn:active { transform: scale(.97); }
.lg-btn:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }
.lg-btn.google { background: #fff; box-shadow: 0 3px 0 #B8C4D8, 0 6px 16px rgba(0,0,0,.25); }
.lg-btn.email { background: linear-gradient(180deg, #7CF7FF, #28B8E8); box-shadow: 0 3px 0 #147AA8, 0 0 16px rgba(55,224,255,.35); }
.lg-btn.guest { background: rgba(255,255,255,.08); color: #E6EEFF; border: 1px solid rgba(255,255,255,.28); }
.lg-btn.primary { background: linear-gradient(180deg, #FFD36B, #FF9E2C); box-shadow: 0 3px 0 #B8621A, 0 0 16px rgba(255,170,60,.35); margin-top: 4px; }
.lg-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.lg-or i { flex: 1; height: 1px; background: rgba(255,255,255,.15); }
.lg-form { display: flex; flex-direction: column; gap: 10px; }
.lg-form label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #9FB3E0; }
.lg-form input { height: 46px; border-radius: 12px; border: 1px solid rgba(124,247,255,.3); background: rgba(4,8,26,.65); color: #fff; padding: 0 14px; font: 500 16px 'Chakra Petch', sans-serif; outline: none; }
.lg-form input:focus { border-color: #7CF7FF; box-shadow: 0 0 0 3px rgba(124,247,255,.18); }
.lg-links { display: flex; justify-content: space-between; gap: 8px; }
.lg-links button, .lg-back { background: none; border: 0; color: #7CF7FF; font: 700 12px 'Chakra Petch', sans-serif; letter-spacing: .06em; padding: 6px 2px; cursor: pointer; }
.lg-back { align-self: flex-start; color: #C8D6FF; }
.lg-sub, .lg-note { margin: 0; font-size: 12px; color: #B8C6EA; text-align: center; line-height: 1.45; }
.lg-msg { margin: 0; min-height: 1.2em; font-size: 13px; text-align: center; line-height: 1.35; }
.lg-msg.err { color: #FF9AA4; } .lg-msg.ok { color: #9BE05A; } .lg-msg.info { color: #BFE9FF; }
.lg-legal { margin: 14px 0 0; font-size: 11px; color: rgba(220,230,255,.75); text-align: center; line-height: 1.6; }
.lg-legal a { color: #7CF7FF; font-weight: 700; text-decoration: none; }
.link-panel { background: none; border: 0; box-shadow: none; padding: 6px 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.legal { max-height: 50vh; overflow-y: auto; text-align: left; font-size: 13px; line-height: 1.5; color: #C8D6FF; }
.boot-who { display: block; margin-top: 10px; color: #E6EEFF; font-size: 12px; letter-spacing: .06em; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.hl-top { position: relative; }
.hl-guest { position: absolute; left: 0; top: calc(100% + 4px); z-index: 3; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; max-width: 230px; padding: 5px 6px 5px 10px; border-radius: 12px;
  background: rgba(10,16,42,.85); border: 1px solid rgba(255,196,80,.55); color: #fff; text-align: left; cursor: pointer; }
.hl-guest b { font-size: 10px; letter-spacing: .1em; color: #FFC450; }
.hl-guest span { grid-column: 1; font-size: 9.5px; line-height: 1.2; color: #C8D6FF; }
.hl-guest em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font: 700 10px 'Chakra Petch', sans-serif; padding: 6px 8px; border-radius: 8px; background: linear-gradient(180deg, #7CF7FF, #28B8E8); color: #0B1026; white-space: nowrap; }
.acct b { display: block; } .acct-sub { display: block; color: var(--muted); font-size: 11px; margin: 2px 0 6px; } .acct-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.hl-guest { max-width: 250px; padding: 4px 5px 4px 9px; }
.hl-guest span { white-space: nowrap; }
@media (orientation: portrait) { #home.is-guest .hl-left { margin-top: 44px; } .hl-guest { max-width: 62vw; } .hl-guest span { white-space: normal; } }