/* Zelus Space Survivors - clean-tech UI (white / cyan) */
:root { --cy: #2fe4ff; --cy2: #00a8d6; --ink: #0b1a2e; --pan: rgba(246, 251, 255, 0.97); --gold: #ffc94a; --red: #ff3b5c; --green: #3ee08a; --sat: env(safe-area-inset-top, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1424; font-family: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif; color: var(--ink); touch-action: none; overscroll-behavior: none; }
#game { position: fixed; inset: 0; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#xpbar { position: absolute; left: 8px; right: 8px; top: calc(6px + var(--sat)); height: 20px; border-radius: 10px; background: rgba(10, 24, 44, 0.75); border: 2px solid rgba(255, 255, 255, 0.85); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
#xpfill { height: 100%; width: 0; background: linear-gradient(90deg, #22b8ff, var(--cy)); box-shadow: 0 0 12px var(--cy); transition: width 0.12s linear; }
#lvl { position: absolute; inset: 0; text-align: center; font: 900 13px/16px inherit; font-family: inherit; color: #fff; text-shadow: 0 1px 2px #000; }
#toprow { position: absolute; left: 8px; right: 8px; top: calc(32px + var(--sat)); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#timer { font-size: 28px; font-weight: 900; color: #fff; text-shadow: 0 0 10px rgba(47, 228, 255, 0.8), 0 2px 3px #000; letter-spacing: 1px; position: absolute; left: 50%; transform: translateX(-50%); }
.chip { display: flex; align-items: center; gap: 5px; background: rgba(10, 24, 44, 0.7); border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 14px; padding: 3px 10px 3px 6px; color: #fff; font-weight: 800; font-size: 15px; min-width: 64px; }
.chip img { width: 20px; height: 20px; }
.ico.skull { width: 18px; height: 18px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 35% 45%, #0b1a2e 18%, transparent 20%), radial-gradient(circle at 65% 45%, #0b1a2e 18%, transparent 20%), #e8f6ff; display: inline-block; }
#coins { margin-left: auto; margin-right: 50px; }
.iconbtn { pointer-events: auto; width: 42px; height: 42px; border-radius: 12px; border: 2px solid #fff; background: linear-gradient(#e9fbff, #b9eefc); box-shadow: 0 3px 0 #5ab8d0, 0 4px 10px rgba(0, 0, 0, 0.35); position: absolute; right: 0; top: -4px; display: flex; align-items: center; justify-content: center; }
.iconbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #5ab8d0; }
.pz { width: 14px; height: 16px; border-left: 5px solid var(--ink); border-right: 5px solid var(--ink); }
#slots { position: absolute; left: 8px; top: calc(70px + var(--sat)); display: flex; flex-direction: column; gap: 4px; }
#wslots, #pslots { display: flex; gap: 3px; }
.slot { width: 34px; height: 34px; border-radius: 8px; background: rgba(246, 251, 255, 0.92); border: 2px solid var(--cy); position: relative; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }
.slot.p { width: 28px; height: 28px; border-color: #9fb6cc; }
.slot.evo { border-color: var(--gold); box-shadow: 0 0 10px var(--gold); }
.slot img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.slot b { position: absolute; right: -3px; bottom: -4px; font-size: 10px; background: var(--ink); color: #fff; border-radius: 6px; padding: 0 3px; line-height: 13px; }
#bossbar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(84px + var(--sat)); width: min(520px, 84vw); }
.bname { text-align: center; color: #fff; font-weight: 900; font-size: 15px; text-shadow: 0 0 8px #ff3bd2, 0 1px 2px #000; margin-bottom: 2px; }
.btrack { height: 14px; border-radius: 7px; background: rgba(30, 0, 30, 0.8); border: 2px solid #fff; overflow: hidden; }
.bfill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3b9a, #ff7be6); transition: width 0.15s; }
#banner { position: absolute; left: 0; right: 0; top: 15%; pointer-events: none; text-align: center; font-size: clamp(26px, 6vw, 48px); font-weight: 900; color: #fff; letter-spacing: 2px; text-shadow: 0 0 18px var(--cy), 0 3px 4px #000; animation: bannerIn 0.35s ease-out; }
#banner.red { text-shadow: 0 0 20px var(--red), 0 3px 4px #000; color: #ffe8ec; }
@keyframes bannerIn { from { transform: scale(1.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#tut { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); max-width: min(560px, 90vw); text-align: center; background: var(--pan); border: 2px solid var(--cy); border-radius: 16px; padding: 12px 18px; font-weight: 800; font-size: 17px; box-shadow: 0 0 20px rgba(47, 228, 255, 0.5), 0 6px 18px rgba(0, 0, 0, 0.4); animation: pulse 1.4s ease-in-out infinite; }
#tut .step { display: block; font-size: 11px; color: var(--cy2); letter-spacing: 2px; margin-bottom: 4px; }
@keyframes pulse { 50% { box-shadow: 0 0 34px rgba(47, 228, 255, 0.9), 0 6px 18px rgba(0, 0, 0, 0.4); } }
#joy { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.55); background: rgba(47, 228, 255, 0.12); pointer-events: none; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #bdf3ff); box-shadow: 0 0 14px var(--cy); }

/* ---------- screens & modals ---------- */
#ov > * { position: absolute; inset: 0; }
.screen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(ellipse at 50% 30%, #17375a 0%, #0b1424 70%); }
.logo { display: flex; flex-direction: column; align-items: center; line-height: 0.95; }
.logo .l1 { font-size: clamp(18px, 4vw, 26px); font-weight: 900; letter-spacing: 10px; color: var(--cy); text-shadow: 0 0 12px var(--cy); }
.logo .l2 { font-size: clamp(34px, 8vw, 64px); font-weight: 900; color: #fff; text-align: center; letter-spacing: 1px; text-shadow: 0 0 22px rgba(47, 228, 255, 0.85), 0 4px 0 #0e5f80, 0 6px 12px #000; }
.loadtrack { width: min(360px, 70vw); height: 14px; border-radius: 7px; border: 2px solid #fff; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
#loadfill { width: 0; height: 100%; background: linear-gradient(90deg, #22b8ff, var(--cy)); transition: width 0.15s; }
.sub { color: #bfe9ff; font-weight: 700; }
#menu { overflow: hidden; }
.menubg { position: absolute; inset: -10%; background: url(../img/floor_1.jpg) center/420px; opacity: 0.22; filter: blur(1px); animation: drift 40s linear infinite; }
@keyframes drift { to { background-position: 420px 420px; } }
#menu > *:not(.menubg) { position: relative; }
.herohero { height: min(28vh, 220px); filter: drop-shadow(0 0 20px rgba(47, 228, 255, 0.6)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); animation: float 2.6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.records { display: flex; gap: 10px; }
.records div { background: rgba(246, 251, 255, 0.1); border: 1.5px solid rgba(47, 228, 255, 0.5); border-radius: 12px; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; min-width: 86px; }
.records b { color: #fff; font-size: 20px; }
.records span { color: #9fd8ef; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.menurow { display: flex; gap: 10px; }
.ver { position: absolute !important; bottom: 8px; right: 10px; color: rgba(255, 255, 255, 0.35); font-size: 11px; }
.btn { pointer-events: auto; position: relative; border: 2px solid #fff; border-radius: 14px; padding: 10px 20px; min-width: 120px; font-size: 17px; font-weight: 900; color: var(--ink); background: linear-gradient(#ffffff, #d9f1fa); box-shadow: 0 4px 0 #7fb3c6, 0 6px 14px rgba(0, 0, 0, 0.35); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #7fb3c6; }
.btn.primary { background: linear-gradient(#7ff3ff, #1cc6f0); color: #04263a; box-shadow: 0 4px 0 #0a7ea3, 0 6px 16px rgba(47, 228, 255, 0.45); }
.btn.danger { background: linear-gradient(#ff8597, #ff3b5c); color: #fff; box-shadow: 0 4px 0 #a3172f, 0 6px 14px rgba(0, 0, 0, 0.35); }
.btn.ghost { background: rgba(255, 255, 255, 0.6); }
.btn.big { font-size: 24px; padding: 12px 44px; border-radius: 18px; }
.btn:disabled { opacity: 0.45; }
.dot::after { content: ''; position: absolute; top: -5px; right: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--red); border: 2px solid #fff; box-shadow: 0 0 6px var(--red); }
.modal { display: flex; align-items: center; justify-content: center; background: rgba(4, 12, 26, 0.6); backdrop-filter: blur(2px); padding: 10px; }
.panel { background: var(--pan); border-radius: 22px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--cy), 0 0 40px rgba(47, 228, 255, 0.45), 0 12px 30px rgba(0, 0, 0, 0.5); padding: 18px 20px; width: min(420px, 94vw); max-height: 96vh; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: pop 0.22s ease-out; }
.panel.wide { width: min(760px, 96vw); }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } }
.ptitle { font-size: 30px; font-weight: 900; color: var(--ink); letter-spacing: 1px; text-align: center; }
.ptitle.glow { color: #0aa6d6; text-shadow: 0 0 14px rgba(47, 228, 255, 0.7); }
.ptitle.gold { color: #d48a00; }
.psub { color: #4c6680; font-weight: 700; text-align: center; }
.prow { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#cards { display: flex; gap: 10px; width: 100%; justify-content: center; }
.card { pointer-events: auto; flex: 1 1 0; max-width: 230px; border: 3px solid #cfe3ee; border-radius: 18px; background: linear-gradient(#ffffff, #eef8fd); padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; position: relative; box-shadow: 0 5px 0 #b6cfdc, 0 8px 16px rgba(0, 0, 0, 0.15); transition: transform 0.1s; text-align: center; }
.card:hover { transform: translateY(-4px); border-color: var(--cy); }
.card:active { transform: translateY(2px); }
.card.evo { border-color: var(--gold); background: linear-gradient(#fffaf0, #ffeec2); box-shadow: 0 5px 0 #d6a43c, 0 0 24px rgba(255, 201, 74, 0.7); }
.card .ci { width: 72px; height: 72px; border-radius: 16px; background: radial-gradient(circle, #e6fbff, #c6eefb); display: flex; align-items: center; justify-content: center; }
.card .ci img { width: 64px; height: 64px; object-fit: contain; }
.card .cn { font-weight: 900; font-size: 17px; }
.card .cl { font-size: 12px; font-weight: 900; color: #fff; background: var(--cy2); border-radius: 8px; padding: 1px 8px; }
.card .cl.new { background: var(--green); }
.card .cl.evo { background: #e09a00; }
.card .cd { font-size: 14px; color: #34506a; font-weight: 700; min-height: 36px; }
.card .ch { font-size: 11px; color: #8a6a10; font-weight: 700; }
.card .key { position: absolute; top: 6px; left: 8px; font-size: 11px; color: #9ab; font-weight: 900; }
.pips { display: flex; gap: 3px; }
.pips i { width: 10px; height: 10px; border-radius: 3px; background: #d4e2ea; }
.pips i.on { background: var(--cy2); }
.pips i.nx { background: var(--cy); animation: blink 0.6s infinite alternate; }
@keyframes blink { to { opacity: 0.35; } }
.chestimg { width: 120px; animation: float 2s ease-in-out infinite; filter: drop-shadow(0 0 16px var(--gold)); }
#chestItems { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.citem { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; border: 2px solid #d6e6ee; padding: 6px 10px; font-weight: 800; }
.citem img { width: 40px; height: 40px; }
.citem.evo { border-color: var(--gold); background: #fff6dc; }
#build { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#build .slot { width: 46px; height: 46px; }
#statlist { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 18px; width: 100%; max-width: 460px; font-size: 14px; font-weight: 700; color: #34506a; }
#statlist div { display: flex; justify-content: space-between; border-bottom: 1px solid #e0ebf1; }
#statlist b { color: var(--ink); }
#setList { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.setrow { display: flex; align-items: center; justify-content: space-between; font-weight: 800; gap: 10px; }
.tog { pointer-events: auto; min-width: 84px; padding: 6px 10px; border-radius: 12px; border: 2px solid #fff; font-weight: 900; background: #d4e2ea; color: #4c6680; box-shadow: 0 3px 0 #9fb6cc; }
.tog.on { background: linear-gradient(#7ff3ff, #1cc6f0); color: #04263a; box-shadow: 0 3px 0 #0a7ea3; }
select.tog { appearance: none; text-align: center; }
.endstats { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.endstats div { background: #fff; border: 2px solid #d6e6ee; border-radius: 12px; padding: 4px 12px; display: flex; flex-direction: column; align-items: center; min-width: 80px; }
.endstats b { font-size: 20px; }
.endstats span { font-size: 11px; color: #4c6680; font-weight: 800; text-transform: uppercase; }
#endTitle.win { color: #0aa6d6; text-shadow: 0 0 18px rgba(47, 228, 255, 0.8); font-size: 40px; }
#endTitle.lose { color: var(--red); font-size: 40px; }
.newrec { font-weight: 900; color: #d48a00; animation: blink 0.5s infinite alternate; }
#endTable { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 700; }
#endTable th { font-size: 11px; color: #4c6680; text-transform: uppercase; text-align: right; padding: 3px 6px; }
#endTable th:nth-child(2), #endTable td:nth-child(2) { text-align: left; }
#endTable td { text-align: right; padding: 3px 6px; border-top: 1px solid #e0ebf1; }
#endTable td img { width: 30px; height: 30px; vertical-align: middle; }
#endTable .bar { height: 5px; border-radius: 3px; background: var(--cy); margin-top: 2px; }
@media (orientation: portrait) {
  #cards { flex-direction: column; align-items: stretch; }
  .card { max-width: none; flex-direction: row; text-align: left; padding: 10px; }
  .card .ci { width: 60px; height: 60px; flex: none; } .card .ci img { width: 54px; height: 54px; }
  .card .cbody { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
  .card .key { display: none; }
  #timer { font-size: 24px; }
}
@media (max-height: 520px) and (orientation: landscape) { .panel { padding: 10px 14px; gap: 6px; } .ptitle { font-size: 22px; } .card .cd { min-height: 0; } .herohero { height: 22vh; } }
.card .cbody { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* ---------- Phase 2: meta menu ---------- */
#menu { justify-content: flex-start; padding: calc(10px + var(--sat)) 10px 12px; gap: 10px; }
.mtop { display: flex; width: 100%; max-width: 760px; gap: 8px; align-items: center; }
.chip.big { font-size: 17px; padding: 4px 12px 4px 6px; }
.chip.big img { width: 24px; height: 24px; }
.btn.sq { min-width: 0; width: 46px; height: 46px; padding: 0; margin-left: auto; font-size: 24px; line-height: 1; }
.logo.small .l1 { font-size: clamp(14px, 3vw, 20px); letter-spacing: 8px; }
.logo.small .l2 { font-size: clamp(26px, 6vw, 46px); }
#menu .herohero { height: min(22vh, 180px); }
.chcard { display: flex; align-items: center; gap: 8px; background: rgba(246, 251, 255, 0.1); border: 2px solid rgba(47, 228, 255, 0.6); border-radius: 18px; padding: 8px; width: min(420px, 92vw); box-shadow: 0 0 24px rgba(47, 228, 255, 0.25) inset; }
.charr { pointer-events: auto; width: 40px; height: 56px; border-radius: 12px; border: 2px solid #fff; background: linear-gradient(#e9fbff, #b9eefc); font-size: 30px; font-weight: 900; color: var(--ink); line-height: 1; }
.charr:disabled { opacity: 0.3; }
.chmid { flex: 1; text-align: center; }
.chnum { color: var(--cy); font-weight: 900; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.chname { color: #fff; font-weight: 900; font-size: 22px; text-shadow: 0 0 10px rgba(47, 228, 255, 0.7); }
.chstars { font-size: 20px; letter-spacing: 4px; color: rgba(255, 255, 255, 0.25); }
.chstars .on { color: var(--gold); text-shadow: 0 0 8px var(--gold); }
.chlock { color: #ffb0bd; font-weight: 800; font-size: 13px; }
.navrow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: auto; }
.btn.nav { min-width: 0; width: 86px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.btn.nav img { width: 38px; height: 38px; object-fit: contain; }
.records div { padding: 4px 10px; min-width: 76px; }
.records b { font-size: 17px; }
.uplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; width: 100%; }
.uprow { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #d6e6ee; border-radius: 14px; padding: 6px 8px; }
.uprow img { width: 42px; height: 42px; flex: none; }
.uprow .ub { flex: 1; min-width: 0; }
.uprow .un { font-weight: 900; font-size: 14px; }
.uprow .ud { font-size: 12px; color: #4c6680; font-weight: 700; }
.uprow .btn { min-width: 78px; padding: 6px 8px; font-size: 14px; display: flex; align-items: center; gap: 3px; justify-content: center; }
.uprow .btn img { width: 16px; height: 16px; }
.uprow.max { border-color: var(--gold); }
.eqslots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.gslot { pointer-events: auto; position: relative; aspect-ratio: 1; border-radius: 14px; border: 3px solid #cfe3ee; background: radial-gradient(circle, #ffffff, #e3f2fa); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.gslot img { width: 80%; height: 80%; object-fit: contain; }
.gslot.empty img { opacity: 0.22; filter: grayscale(1); }
.gslot.sel { outline: 3px solid var(--cy); outline-offset: 1px; }
.gslot .rt { position: absolute; left: 3px; bottom: 2px; font-size: 9px; font-weight: 900; color: #fff; border-radius: 6px; padding: 0 4px; }
.gslot .eqm { position: absolute; right: 3px; top: 2px; font-size: 10px; font-weight: 900; color: #fff; background: var(--ink); border-radius: 6px; padding: 0 4px; }
.invgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; width: 100%; max-height: 32vh; overflow-y: auto; padding: 4px; background: #eef6fb; border-radius: 12px; min-height: 64px; }
.invgrid .empty-note { grid-column: 1 / -1; text-align: center; color: #6b8299; font-weight: 700; padding: 12px; }
.geardetail { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; border: 2px solid #d6e6ee; padding: 6px 10px; }
.geardetail img { width: 48px; height: 48px; }
.geardetail .gd { flex: 1; font-weight: 800; }
.geardetail small { color: #4c6680; display: block; }
.geardetail .btn { min-width: 0; padding: 6px 12px; font-size: 14px; }
.odds { font-size: 11px; color: #4c6680; font-weight: 700; text-align: center; }
.mislist { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mis { display: flex; align-items: center; gap: 8px; background: #fff; border: 2px solid #d6e6ee; border-radius: 14px; padding: 8px 10px; }
.mis .mb { flex: 1; }
.mis .mt { font-weight: 800; font-size: 14px; }
.mis .mbar { height: 8px; border-radius: 4px; background: #d4e2ea; overflow: hidden; margin-top: 4px; }
.mis .mbar i { display: block; height: 100%; background: linear-gradient(90deg, #22b8ff, var(--cy)); }
.mis .btn { min-width: 86px; padding: 6px 8px; font-size: 14px; display: flex; gap: 3px; align-items: center; justify-content: center; }
.mis .btn img { width: 16px; height: 16px; }
.mis.done { opacity: 0.6; }
.misbonus { width: 100%; }
.rwitems { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rwitem { width: 92px; border-radius: 14px; border: 3px solid #cfe3ee; background: #fff; padding: 6px; display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 900; text-align: center; animation: pop 0.3s ease-out; }
.rwitem img { width: 56px; height: 56px; object-fit: contain; }
.endrewards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; font-weight: 800; }
.endrewards .rwitem { width: 70px; }
.endrewards .rwitem img { width: 40px; height: 40px; }
.endrewards .star { color: #d48a00; font-weight: 900; }
.adtag { display: inline-block; font-size: 10px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 5px; padding: 1px 5px; vertical-align: middle; }
.ptitle.lose { color: var(--red); }
#toast { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); background: rgba(10, 24, 44, 0.92); color: #fff; font-weight: 800; padding: 10px 18px; border-radius: 14px; border: 2px solid var(--cy); z-index: 50; pointer-events: none; max-width: 90vw; text-align: center; }
@media (max-height: 560px) and (orientation: landscape) { #menu .herohero { display: none; } .logo.small .l2 { font-size: 26px; } #menu { gap: 6px; } }
@media (orientation: portrait) { .eqslots { grid-template-columns: repeat(3, 1fr); } .uplist { grid-template-columns: 1fr; } }
/* phase 2 fixes */
.uprow .un { font-size: 13px; line-height: 1.12; overflow-wrap: break-word; hyphens: auto; }
.uprow .btn { min-width: 66px; }
.prow .btn { display: inline-flex; align-items: center; gap: 4px; justify-content: center; }
.prow .btn img { width: 18px; height: 18px; flex: none; }
.gslot .rt { right: 3px; max-width: calc(100% - 6px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.btn.nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
@media (max-width: 520px) { .ver { display: none; } .navrow { gap: 6px; } .btn.nav { width: 70px; } .btn.nav span { font-size: 10.5px; letter-spacing: -0.2px; } }
.uprow.hero img { width: 54px; height: 64px; object-fit: contain; }

/* Phase 4: modes, AI ranking, achievements, supply drop */
.mtop .btn.sq + .btn.sq { margin-left: 0; }
.playrow { display: flex; gap: 10px; align-items: center; justify-content: center; }
#modesBtn { background: linear-gradient(#ffd36b, #ff9f2e); color: #3a1c00; }
.uprow.lock { opacity: 0.6; }
.uprow .mico { width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.uprow.you { border-color: var(--gold); background: #fff8e0; }
.uprow .rk { width: 30px; flex: none; text-align: center; font-weight: 900; font-size: 18px; color: #2b4a66; }
.aitag { display: inline-block; background: #4c6680; color: #fff; border-radius: 6px; padding: 0 5px; font-size: 11px; font-weight: 900; margin-right: 4px; }
.logingrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 6px 0 10px; }
.logingrid > div { background: #fff; border: 2px solid #d6e6ee; border-radius: 10px; padding: 4px 2px; text-align: center; font-size: 11px; font-weight: 900; color: #2b4a66; }
.logingrid > div img { width: 22px; height: 22px; display: block; margin: 2px auto; }
.logingrid > div.got { opacity: 0.45; }
.logingrid > div.today { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 190, 40, 0.7); }
.endscore { font-weight: 900; font-size: 18px; color: #2b4a66; text-align: center; margin: 4px 0; }
.mutag { color: #c2410c; font-weight: 900; }

/* BUG-005/006 (marathon, real Chrome): menu fit on 390px-wide phones and 390px-tall landscape phones, all 13 languages */
.playrow { width: 100%; max-width: 460px; }
.playrow .btn.big { flex: 1 1 0; min-width: 0; padding: 12px 8px; white-space: nowrap; font-size: clamp(18px, 5.4vw, 24px); }
.navrow { flex-wrap: nowrap; width: 100%; max-width: 480px; }
.navrow .btn.nav { flex: 1 1 0; width: auto; max-width: 86px; }
@media (max-height: 560px) and (orientation: landscape) {
  #menu { gap: 5px; padding-top: calc(6px + var(--sat)); padding-bottom: 6px; }
  #menu .logo.small .l1 { display: none; }
  #menu .logo.small .l2 { font-size: 22px; }
  #menu .chcard { padding-top: 4px; padding-bottom: 4px; }
  .playrow .btn.big { padding: 8px 8px; font-size: 20px; }
  .navrow .btn.nav { padding: 3px 1px; }
  .navrow .btn.nav img { width: 28px; height: 28px; }
  .records div { padding: 2px 10px; } .records b { font-size: 15px; }
}
@media (max-width: 520px) { #menu { padding-left: 5px; padding-right: 5px; } .navrow { gap: 4px; } .navrow .btn.nav { border-left-width: 2px; border-right-width: 2px; } }
.invgrid .gslot .rt, .gslot .rt { padding: 0 2px; left: 2px; right: 2px; max-width: calc(100% - 4px); letter-spacing: -0.2px; }
canvas.grade { filter: saturate(1.25) contrast(1.14) brightness(0.98); }
/* BUG-015: portrait phone menu left ~45% of the screen empty between records and nav: bigger hero, spread content */
@media (orientation: portrait) and (min-height: 740px) { #menu .herohero { height: min(34vh, 330px); margin: 3vh 0 1vh; } #menu .logo.small { margin-top: 2vh; } }
/* smallest phones (320 wide, e.g. iPhone SE 1st gen): long FR/IT/PL/TR/DE strings must not push the nav row off screen */
@media (max-width: 340px) and (orientation: portrait) {
  #menu .herohero { height: min(15vh, 90px); }
  #menu .logo.small .l2 { font-size: 22px; }
  .chname { font-size: 17px; line-height: 1.1; }
  .chnum { letter-spacing: 1px; font-size: 11px; }
  .records { gap: 5px; } .records div { min-width: 0; flex: 1; padding: 2px 4px; } .records b { font-size: 15px; } .records span { font-size: 9px; letter-spacing: 0; text-align: center; line-height: 1.1; }
  .uprow { gap: 5px; padding: 5px 6px; } .uprow.hero img { width: 40px; height: 52px; } .uprow .ud { font-size: 11px; }
  .uprow .btn { min-width: 0; max-width: 84px; padding: 5px 5px; font-size: 12px; } .uprow .newrec { font-size: 11px; max-width: 76px; overflow-wrap: anywhere; text-align: center; }
  .panel { padding: 12px 10px; width: 96vw; } .ptitle { font-size: 22px; letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; }
  .btn.big { font-size: 18px; padding-left: 12px; padding-right: 12px; max-width: 100%; }
  #endTable { font-size: 12px; } #endTable th { font-size: 9px; padding: 2px 3px; letter-spacing: 0; } #endTable td { padding: 2px 3px; } #endTable td img { width: 22px; height: 22px; }
  .logingrid { gap: 2px; grid-template-columns: repeat(7, minmax(0, 1fr)); } .logingrid > div { min-width: 0; padding-left: 0; padding-right: 0; font-size: 9px; overflow: hidden; } .logingrid > div img { width: 18px; height: 18px; }
  .geardetail { flex-wrap: wrap; } .geardetail .btn { font-size: 13px; padding: 6px 8px; min-width: 0; }
}
#skipBtn.arm { background: linear-gradient(#fff3e0, #ffd59a); border-color: #ffb02e; color: #7a4300; }
/* ---------- abilities v3: Ability Codex ---------- */
.cxpanel { gap: 8px; }
.cxtop { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cxtop .chip { background: var(--ink); color: #fff; border-radius: 12px; padding: 3px 10px; font-weight: 900; display: inline-flex; align-items: center; gap: 4px; }
.cxtop .chip img { width: 18px; height: 18px; }
.cxtop .chip small { font-size: 11px; opacity: 0.8; font-weight: 700; }
.psub.small { font-size: 13px; }
.tokico { font-style: normal; color: #2fe4ff; text-shadow: 0 0 6px #2fe4ff; margin-right: 3px; }
.cxgrid { width: 100%; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; max-height: 56vh; padding: 6px 4px; }
.cxfam { display: flex; flex-direction: column; gap: 4px; }
.cxfh { font-weight: 900; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px 0 #0b1a2e, 0 0 6px rgba(11, 26, 46, 0.6); }
.cxrow { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.cxt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; border-radius: 12px; border: 2px solid var(--fc, var(--cy)); background: linear-gradient(#ffffff, #e4f3fb); box-shadow: 0 3px 0 #9cc3d3; font: inherit; color: var(--ink); cursor: pointer; min-width: 0; }
.cxt img { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 0 4px var(--fc, #2fe4ff)); }
.cxt span { font-size: 11.5px; font-weight: 800; line-height: 1.1; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cxt.lock { background: linear-gradient(#dfe6ee, #c5d0dc); border-color: #8fa3b8; }
.cxt.lock img { filter: grayscale(1) brightness(0.55); opacity: 0.85; }
.cxt .cxlk { position: absolute; top: 4px; left: 4px; display: flex; align-items: center; gap: 1px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: rgba(11, 26, 46, 0.85); border-radius: 8px; padding: 1px 4px 1px 2px; }
.cxt .cxlk img { width: 13px; height: 16px; filter: none; opacity: 1; }
.cxt .cxnew { position: absolute; top: -6px; left: -4px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: var(--green); border-radius: 7px; padding: 0 5px; }
.cxt.soon { border-style: dashed; border-color: #9fb3c6; background: rgba(255, 255, 255, 0.5); box-shadow: none; justify-content: center; color: #6c8299; cursor: default; }
.cxt.soon b { font-size: 20px; }
.cxdpanel { width: min(520px, 96vw); gap: 8px; }
.cxdhead { display: flex; align-items: center; gap: 12px; align-self: stretch; }
.cxdhead img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 6px #2fe4ff); }
.cxdhead .ptitle { text-align: left; font-size: 26px; }
.cxdhead .psub { text-align: left; }
.cxcv { width: 100%; aspect-ratio: 2 / 1; border-radius: 14px; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--cy), 0 4px 12px rgba(0, 0, 0, 0.35); background: #070d1a; }
.cxlv { margin: 0; padding-left: 0; list-style: none; align-self: stretch; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; font-weight: 700; color: #34506b; }
.cxlv b { display: inline-block; min-width: 46px; color: var(--cy2); }
.cxsec { align-self: stretch; font-weight: 900; color: #d48a00; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; }
.cxevos { align-self: stretch; display: flex; flex-direction: column; gap: 6px; }
.cxevo { display: flex; gap: 8px; align-items: center; background: linear-gradient(#fffaf0, #ffeec2); border: 2px solid var(--gold); border-radius: 12px; padding: 5px 8px; }
.cxevo img { width: 34px; height: 34px; object-fit: contain; }
.cxevo div { display: flex; flex-direction: column; min-width: 0; }
.cxevo b { font-size: 14px; }
.cxevo span { font-size: 12.5px; color: #4c6680; font-weight: 700; }
.cxevo small { font-size: 11px; color: #b27300; font-weight: 800; }
.cxbuy { display: flex; flex-direction: column; align-items: center; gap: 6px; align-self: stretch; }
.cxbuy .prow { flex-wrap: wrap; justify-content: center; }
.cxbuy .btn { min-width: 0; display: inline-flex; align-items: center; gap: 4px; }
.cxbuy .btn img { width: 20px; height: 20px; }
.cxok { font-weight: 900; color: #10a060; font-size: 18px; }
@media (orientation: portrait) { .cxrow { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; } .cxt.soon b { font-size: 16px; } .cxt img { width: 40px; height: 40px; } .cxt span { font-size: 10.5px; } .cxgrid { max-height: 62vh; } .cxdhead .ptitle { font-size: 22px; } .cxlv { font-size: 12.5px; } }
@media (max-height: 560px) and (orientation: landscape) { .cxgrid { max-height: 48vh; } .cxcv { max-height: 34vh; width: auto; } }
@media (max-width: 420px) { .navrow { gap: 3px; } .navrow .btn.nav span { font-size: 9.5px; letter-spacing: -0.3px; } } /* v3: 6 nav buttons (Codex) on narrow phones */