* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05070a; color: #cfe3d0; font: 13px/1.35 "Trebuchet MS", "Segoe UI", system-ui, sans-serif; user-select: none; -webkit-user-select: none; }
button, select { font: inherit; }

/* ---------- lobby ---------- */
#lobby { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto;
  background: radial-gradient(ellipse at 50% 20%, #17243a 0%, #080c14 55%, #020305 100%); }
#lobby::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 70% 12%, #cde 50%, transparent 51%), radial-gradient(1.5px 1.5px at 85% 60%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 40% 80%, #abd 50%, transparent 51%), radial-gradient(1px 1px at 10% 65%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 55% 45%, #9bf 50%, transparent 51%);
  background-size: 310px 270px, 420px 380px, 530px 470px, 260px 330px, 370px 290px, 610px 520px; opacity: .7; }
.lobby-box { position: relative; margin: auto; width: min(860px, 94vw); padding: 26px 30px 22px; background: linear-gradient(#0e1622ee, #0a0f18ee); border: 1px solid #2c4a6e; box-shadow: 0 0 0 1px #000, 0 20px 80px #000c, inset 0 0 40px #0b2238; border-radius: 4px; }
.lobby-box h1 { margin: 0; font-size: 46px; letter-spacing: 10px; color: #e8f2ff; text-shadow: 0 0 18px #3a8cff; font-weight: 800; }
.lobby-box h1 span { color: #5ab0ff; }
.lobby-box .sub { color: #7f9bb8; margin: 2px 0 18px; letter-spacing: 1px; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.presets button, .panel button { background: #14263c; color: #bcd8ff; border: 1px solid #2f5686; padding: 6px 12px; cursor: pointer; border-radius: 2px; }
.presets button:hover, .panel button:hover { background: #1d3a5c; color: #fff; }
.slots { border: 1px solid #1d3048; }
.slot { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr 1fr; gap: 8px; padding: 7px 10px; align-items: center; border-top: 1px solid #142236; }
.slot.head { border-top: 0; color: #6f8cab; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; background: #0b1420; }
.slot.closed { opacity: .5; }
.slot select, .opts select { width: 100%; background: #0a121c; color: #d6e6ff; border: 1px solid #2a4566; padding: 5px 6px; border-radius: 2px; }
.colsel { display: flex; gap: 6px; align-items: center; }
.colsel i { flex: 0 0 18px; height: 18px; border: 1px solid #000; box-shadow: 0 0 0 1px #445; }
.opts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 14px 0 8px; color: #9db6d2; align-items: center; }
.opts label { display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.opts select { width: auto; }
.mapinfo { color: #7f9bb8; margin: 6px 0 14px; }
.start { width: 100%; padding: 13px; font-size: 18px; letter-spacing: 4px; font-weight: 700; color: #eaffea; cursor: pointer; background: linear-gradient(#1f7a36, #114d20); border: 1px solid #3fd066; border-radius: 2px; text-shadow: 0 0 8px #0f0; }
.start:hover { background: linear-gradient(#28a046, #166428); }
.err { color: #ff6a5a; min-height: 18px; margin-top: 6px; }
.gallery { color: #5ab0ff; text-decoration: none; font-size: 12px; }
.gallery:hover { text-decoration: underline; }
#loading { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; font-size: 20px; letter-spacing: 3px; color: #8fc0ff; background: #05070a; z-index: 50; }

/* ---------- game ---------- */
#game { display: none; position: fixed; inset: 0; --accent: #36d05a; --panel: #1a2026; --panel2: #0c1014; --edge: #56636e; }
#gl, #ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ov { cursor: default; }
body.targeting #ov { cursor: crosshair; }
#topleft { position: absolute; left: 8px; top: 6px; display: flex; gap: 10px; align-items: center; color: #9fb; text-shadow: 0 1px 2px #000; }
#topleft button { background: #0c1218cc; color: #bfe; border: 1px solid #4a6a5a; padding: 3px 9px; cursor: pointer; }
#fps { color: #6a8; font-size: 11px; }
#score { position: absolute; left: 8px; top: 36px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 2px #000; pointer-events: none; }
#score div { display: flex; gap: 10px; align-items: center; background: #05080ccc; padding: 2px 8px; border-left: 3px solid #333; }
#score div.dead { opacity: .45; text-decoration: line-through; }
#score i { width: 10px; height: 10px; display: inline-block; }
#score b { min-width: 130px; color: #fff; font-weight: 600; }
#res { position: absolute; right: 14px; top: 6px; display: flex; gap: 22px; font-size: 15px; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
#res span { display: flex; align-items: center; gap: 6px; }
#res b { font-weight: 700; min-width: 34px; }
.ico { width: 14px; height: 14px; display: inline-block; }
.ico.min { background: linear-gradient(135deg, #9fd4ff, #2a6fe0); transform: rotate(45deg) scale(.8); box-shadow: 0 0 6px #4a9cff; }
.ico.gas { background: radial-gradient(circle at 35% 35%, #c8ffd0, #1fa040); border-radius: 50%; box-shadow: 0 0 6px #3c6; }
.ico.sup { background: linear-gradient(#ddd, #888); clip-path: polygon(50% 0, 100% 40%, 82% 100%, 18% 100%, 0 40%); }
.c-min { color: #8fd0ff; } .c-gas { color: #7fe89a; } .c-sup { color: #e8e8e8; } .c-en { color: #d09aff; }
#r-sup.capped { color: #ff5a4a; }
#hint { position: absolute; left: 50%; top: 44px; transform: translateX(-50%); max-width: min(620px, calc(100% - 32px)); padding: 10px 34px 10px 14px; background: #0d1620ee; border: 1px solid #3a6a8f; border-radius: 6px; font-size: 14px; line-height: 1.45; color: #dbe9f5; z-index: 6; box-shadow: 0 4px 18px #0008; }
#hint[hidden] { display: none; }
#hint .hint-n { color: #7fd0ff; margin-right: 4px; }
#hint .hint-x { position: absolute; top: 4px; right: 6px; background: none; border: 0; color: #8aa3b8; font-size: 18px; cursor: pointer; padding: 2px 6px; }
#hint .hint-off { display: block; margin-top: 6px; background: none; border: 0; padding: 0; color: #6f8aa0; font-size: 12px; text-decoration: underline; cursor: pointer; }
#msgs { position: absolute; left: 50%; bottom: 218px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; text-shadow: 0 1px 2px #000, 0 0 8px #000; font-size: 15px; }
.msg { transition: opacity .8s; } .msg.fade { opacity: 0; }
.msg.error { color: #ff6a5a; } .msg.alert { color: #ffd84a; } .msg.info { color: #9fffb0; }

#console { position: absolute; left: 0; right: 0; bottom: 0; height: 204px; display: grid; grid-template-columns: 216px 1fr 216px; gap: 10px; padding: 12px 12px 8px; pointer-events: none;
  background: linear-gradient(to top, var(--panel2) 0, var(--panel2) 62%, transparent 62%); }
#console::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 128px; border-top: 2px solid var(--edge); background: linear-gradient(var(--panel), var(--panel2)); box-shadow: 0 -6px 18px #000a, inset 0 2px 0 #fff1; z-index: -1; }
#console > * { pointer-events: auto; }
#mm-wrap { background: #000; border: 3px solid var(--edge); box-shadow: 0 0 0 2px #000, 0 0 14px #000; height: 184px; width: 216px; padding: 0; outline: 1px solid var(--accent); outline-offset: -5px; }
#minimap { width: 100%; height: 100%; display: block; cursor: crosshair; image-rendering: auto; }
#info { align-self: end; height: 118px; margin: 0 auto; width: min(560px, 100%); background: linear-gradient(#070b0e, #0d1318); border: 2px solid var(--edge); box-shadow: inset 0 0 18px #000; padding: 8px 10px; overflow: hidden; color: var(--accent); }
#card { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; height: 184px; width: 216px; padding: 6px; background: linear-gradient(#070b0e, #0d1318); border: 3px solid var(--edge); box-shadow: 0 0 0 2px #000, 0 0 14px #000; }
.cbtn { position: relative; background: linear-gradient(#1b232b, #0e1318); border: 1px solid #47525c; color: var(--accent); cursor: pointer; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cbtn:hover { border-color: var(--accent); box-shadow: inset 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent); }
.cbtn:active { transform: translateY(1px); }
.cbtn.empty { visibility: hidden; }
.cbtn.disabled { filter: grayscale(1) brightness(.5); }
.cbtn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.cbtn svg { width: 60%; height: 60%; pointer-events: none; }
.cbtn .txt { font-weight: 800; font-size: 15px; letter-spacing: 1px; }
.cbtn.abil { color: #ffd060; }
.cbtn .hk { position: absolute; left: 3px; top: 1px; font-style: normal; font-size: 10px; color: #fff; opacity: .8; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
#tip { display: none; position: absolute; right: 12px; bottom: 214px; width: 250px; background: #05080bf2; border: 1px solid var(--edge); padding: 7px 10px; color: #dfe; box-shadow: 0 4px 16px #000; z-index: 5; }
#tip .hk { color: #ffd060; } #tip .cost { margin-top: 3px; display: flex; gap: 12px; } #tip .desc { color: #9ab; margin-top: 3px; } #tip .req { color: #ff7a6a; margin-top: 3px; }

.single { display: flex; gap: 12px; height: 100%; }
.portrait { flex: 0 0 96px; height: 96px; border: 2px solid #555; background: radial-gradient(#1c2a36, #05080b); display: flex; align-items: center; justify-content: center; }
.portrait img { width: 100%; height: 100%; object-fit: contain; }
.stats { flex: 1; min-width: 0; }
.stats .name { font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line { margin-top: 2px; } .line.small { font-size: 12px; color: #9fb7a5; } .line.small b { color: #fff; } .line.dim { color: #889; }
.hp.ok { color: #40e050; } .hp.mid { color: #e8d830; } .hp.low { color: #ff4a3a; }
.hp .sh { color: #5ab0ff; margin-left: 8px; } .hp .en { color: #d09aff; margin-left: 8px; }
.warn { color: #ff7a6a !important; }
.pbar { height: 8px; background: #111; border: 1px solid #444; margin-top: 3px; } .pbar i { display: block; height: 100%; background: linear-gradient(#7dff8f, #1ea13a); }
.queue { display: flex; gap: 4px; margin-top: 4px; }
.qslot { width: 30px; height: 30px; border: 1px solid #555; background: #0a0f14; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.qslot:hover { border-color: #ff6a5a; } .qslot img { width: 100%; height: 100%; object-fit: contain; }
.multi { display: grid; grid-template-columns: repeat(6, 46px); grid-auto-rows: 46px; gap: 4px; justify-content: center; align-content: center; height: 100%; }
.multi.many { grid-template-columns: repeat(12, 34px); grid-auto-rows: 34px; }
.wire { border: 2px solid #444; background: #0a0f14; cursor: pointer; }
.wire img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.wire.ok { border-color: #2fb040; } .wire.mid { border-color: #d8c820; } .wire.low { border-color: #e03a2a; }

.race-T { --accent: #38e060; --panel: #2a3138; --panel2: #10151a; --edge: #6d7a86; }
.race-P { --accent: #6fd0ff; --panel: #3a3212; --panel2: #171308; --edge: #c8a030; }
.race-Z { --accent: #ffb060; --panel: #36182c; --panel2: #150910; --edge: #8a4a6a; }
#game:has(#console.race-P) { --accent: #6fd0ff; --edge: #c8a030; }
#game:has(#console.race-Z) { --accent: #ffb060; --edge: #8a4a6a; }

#menu .ver { margin-top: 10px; text-align: center; font-size: 11px; color: #6b7d8f; }
.overlay { display: none; position: absolute; inset: 0; background: #000a; align-items: center; justify-content: center; z-index: 20; }
.panel { background: linear-gradient(#111a24, #0a1018); border: 1px solid #3a5a80; padding: 18px 22px; width: 460px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 20px 80px #000; color: #cfe; }
.panel.wide { width: min(900px, 94vw); }
.panel h2 { margin: 0 0 6px; letter-spacing: 4px; text-align: center; color: #fff; }
.panel h2.win { color: #5dff7a; text-shadow: 0 0 20px #2f6; font-size: 34px; } .panel h2.lose { color: #ff5a4a; text-shadow: 0 0 20px #f33; font-size: 34px; }
.panel label { display: flex; justify-content: space-between; align-items: center; }
.panel select { background: #0a121c; color: #d6e6ff; border: 1px solid #2a4566; padding: 4px 6px; }
.panel .help { font-size: 12px; color: #9ab; border-top: 1px solid #234; padding-top: 8px; line-height: 1.6; }
.panel .danger { border-color: #a33; color: #fbb; }
.panel .row { display: flex; gap: 10px; justify-content: center; }
#e-stats { border-collapse: collapse; width: 100%; } #e-stats th, #e-stats td { padding: 5px 8px; border-bottom: 1px solid #234; text-align: right; } #e-stats th:first-child, #e-stats td:first-child { text-align: left; }
#e-stats i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; } #e-stats tr.w td { color: #8f8; }

/* ---------- multiplayer ---------- */
.mpbtn { width: 100%; margin-top: 8px; padding: 9px; letter-spacing: 2px; color: #cfe4ff; cursor: pointer; background: linear-gradient(#1c3f6e, #122a4c); border: 1px solid #4a8fe0; border-radius: 2px; }
.mpbtn:hover { background: linear-gradient(#2656a0, #173a6a); }
.start.small { font-size: 14px; padding: 9px; letter-spacing: 3px; }
.mp-join { display: flex; flex-direction: column; gap: 10px; max-width: 420px; margin: 10px 0; color: #9db6d2; }
.mp-join label { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mp-join input, .share, .mp-chat input { background: #0a121c; color: #d6e6ff; border: 1px solid #2a4566; padding: 6px 8px; border-radius: 2px; font: inherit; user-select: text; -webkit-user-select: text; }
.mp-or { text-align: center; color: #56708c; margin-top: 6px; }
.sub .code { color: #ffd060; font-size: 18px; letter-spacing: 3px; } .share { width: 300px; }
.pname { color: #fff; font-weight: 600; padding: 5px 6px; }
.slot select:disabled { opacity: .65; }
.mp-chat { margin: 6px 0 12px; } .mp-chat .log { height: 70px; overflow: auto; background: #070c13; border: 1px solid #1d3048; padding: 4px 8px; color: #b8cbe0; } .mp-chat input { width: 100%; margin-top: 4px; }
.msg.chat { color: #e8e8ff; }
#netstat { color: #fc6; font-size: 11px; }

.race-S { --accent: #b9a2ff; --panel: #2a1f52; --panel2: #120d26; --edge: #7b4dff; }
#game:has(#console.race-S) { --accent: #b9a2ff; --edge: #7b4dff; }

.pname-in { display: flex; align-items: center; gap: 12px; color: #9db6d2; margin: 0 0 12px; }
.pname-in input { flex: 0 1 260px; background: #0a121c; color: #fff; border: 1px solid #3c5d86; padding: 7px 10px; border-radius: 2px; font: inherit; user-select: text; -webkit-user-select: text; }

.saves { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 14px; max-height: 50vh; overflow: auto; }
.save { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid #1d3048; background: #0a121c; }
.save .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.save .info b { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .save .info span { color: #7f9bb8; font-size: 12px; }
.save button { background: #14263c; color: #bcd8ff; border: 1px solid #2f5686; padding: 6px 12px; cursor: pointer; }
.save button.del { border-color: #6a2a2a; color: #f0b0a8; background: #2a1212; }
.mpbtn.loadbtn { background: linear-gradient(#253244, #18212e); border-color: #4c6a90; }
.slot.resume { grid-template-columns: 1.3fr 0.8fr 0.8fr 0.3fr 2fr; } .slot .rstate { color: #9db6d2; font-size: 12.5px; } .slot .rstate b { color: #fff; }
#btn-fs { background: #0c1218cc; color: #bfe; border: 1px solid #4a6a5a; padding: 3px 9px; cursor: pointer; }
.panel .confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px solid #a33; background: #200c0c; }
.panel .confirm[hidden] { display: none; } .panel .confirm span { color: #f0c8c0; font-size: 13px; } .panel .confirm .row { display: flex; gap: 8px; flex-wrap: wrap; }
.panel button[hidden] { display: none; }
/* dropdowns: own arrow with some breathing room from the right edge */
#lobby select, .panel select {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%239fc0e6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px 7px;
}
#lobby select:disabled { opacity: .55; }
#chatlog { position: absolute; left: 12px; bottom: 214px; width: min(520px, 60vw); display: flex; flex-direction: column; gap: 2px; pointer-events: none; z-index: 4; text-shadow: 0 1px 2px #000, 0 0 6px #000; font-size: 14px; }
#chatlog .cl { color: #e8eef6; transition: opacity .9s; } #chatlog .cl.fade { opacity: 0; } #chatlog i { font-style: normal; color: #9db6d2; font-size: 12px; }
#chatbar { display: none; position: absolute; left: 12px; bottom: 214px; transform: translateY(100%); width: min(560px, 70vw); gap: 6px; z-index: 6; }
#chatbar select { background: #05080bee; color: #cfe; border: 1px solid var(--edge); padding: 5px 6px; font: inherit; }
#chatbar input { flex: 1; min-width: 0; background: #05080bee; color: #dfe; border: 1px solid var(--edge); padding: 6px 10px; font: inherit; user-select: text; -webkit-user-select: text; }
#e-stats tr.dead td { color: #8a7a7a; text-decoration: line-through; } #e-stats tr.dead td:first-child { text-decoration: none; }
.upl { color: #7dff9a; font-weight: bold; font-size: 11px; margin-left: 2px; }
#e-more { margin: 10px 0 4px; text-align: left; } #e-more summary { cursor: pointer; color: #9db6d2; }
#e-detail { max-height: 46vh; overflow-y: auto; font-size: 13px; } #e-detail .pd { border-top: 1px solid #234; padding: 8px 2px; line-height: 1.5; }
#e-detail .spark { font-family: monospace; letter-spacing: 1px; color: #7dff9a; }
#btn-voice.on { border-color: #5ad17a; color: #9fffb0; }
#voice-who { color: #9fffb0; font-size: 12px; margin-left: 6px; }
.mapsel { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #9db6d2; }
.mapsel select { flex: 0 1 300px; background-color: #0a121c; color: #fff; border: 1px solid #3c5d86; padding: 7px 30px 7px 10px; border-radius: 2px; font: inherit; }
.mapcard { display: flex; gap: 12px; align-items: flex-start; }
.mapprev { width: 160px; height: 160px; flex: none; border: 1px solid #3c5d86; border-radius: 4px; box-shadow: 0 0 0 1px #000, 0 4px 14px rgba(0,0,0,.55); }
.mapcard .legend { display: inline-block; margin-top: 6px; color: #8aa0b6; font-size: 11px; line-height: 1.8; }
.mapcard .lg { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin: 0 2px 0 8px; border-radius: 2px; }
.mapcard .lg:first-child { margin-left: 0; }
.lg.s { background: linear-gradient(#ffe68a, #d99a17); border-radius: 50%; box-shadow: 0 0 0 1px #1b1406; } .lg.m { background: #8fdcff; transform: rotate(45deg) scale(.8); } .lg.g { background: #6dffa6; border-radius: 50%; box-shadow: 0 0 0 2px #2a3a2c; } .lg.e { background: none; border: 1px dashed rgba(255,255,255,.7); border-radius: 50%; } .lg.h { background: #a48c60; }
@media (max-width: 560px) { .mapcard { flex-direction: column; } }
#e-stats td.score { font-weight: bold; color: #ffe08a; } #e-stats td.score.top::before { content: "★ "; color: #ffd34d; }
.resume { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 10px 12px; background: #2a2208; border: 1px solid #b08a2a; border-radius: 3px; color: #f1dfa8; }
.resume > div { flex: 1; min-width: 0; } .resume small { color: #c9b27a; }
.resume .resumebtn { background: #c9961f; color: #1a1205; border: 0; padding: 9px 16px; font-weight: bold; letter-spacing: 1px; cursor: pointer; border-radius: 2px; }
.resume .resumebtn:hover { background: #e3ae2c; }
.resume .resumedel { background: none; border: 1px solid #6b5520; color: #c9b27a; padding: 7px 10px; cursor: pointer; border-radius: 2px; }
.slot.resume .takeseat { margin-left: 8px; background: #1c3a5c; color: #d6e6ff; border: 1px solid #3c6d9e; padding: 3px 8px; cursor: pointer; border-radius: 2px; font: inherit; font-size: 12px; } .slot.resume .takeseat:hover { background: #26507e; }
#replaybar { position: fixed; top: 40px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #05080bdd; border: 1px solid #2a4566; border-radius: 4px; width: min(860px, 94vw); box-sizing: border-box; }
#replaybar button { background: #0f1c2b; color: #d6e6ff; border: 1px solid #2a4566; padding: 4px 7px; font: inherit; font-size: 12px; cursor: pointer; border-radius: 2px; white-space: nowrap; }
#replaybar button:hover { background: #1a2f48; } #replaybar button.on { background: #2d5d93; border-color: #5ab0ff; color: #fff; }
#replaybar .rb-track { flex: 1; min-width: 60px; height: 10px; background: #13202f; border: 1px solid #2a4566; border-radius: 5px; cursor: pointer; overflow: hidden; margin: 0 6px; }
#replaybar .rb-fill { height: 100%; width: 0; background: linear-gradient(90deg, #2d6fb3, #5ab0ff); }
#replaybar .rb-time { color: #9fc0e6; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---------- touch devices: desktop notice + confirmation sheet ---------- */
.slot .slotno { display: none; }
.mnote { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; background: #0f2236; border: 1px solid #2f5686; border-radius: 4px; color: #bcd3ee; font-size: 13px; line-height: 1.45; }
.mnote b { color: #fff; }
.mhint { text-align: center; color: #8fb0d4; font-size: 12px; margin: 6px 0 2px; }
.mhint::before { content: "🖥️ "; }
.mgate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: #000a; animation: mgfade .18s ease-out; }
.mgate-box { width: min(480px, 100%); padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(#122033, #0a111b); border: 1px solid #2f5686; border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px #000c; text-align: center; color: #bcd3ee; animation: mgup .22s ease-out; }
.mgate-ico { font-size: 38px; line-height: 1; margin-bottom: 8px; }
.mgate-box > b { display: block; font-size: 20px; color: #fff; letter-spacing: .5px; }
.mgate-box p { margin: 10px 0; font-size: 14px; line-height: 1.5; }
.mgate-url { color: #9fc8ff; } .mgate-url b { color: #fff; }
.mgate-box button { display: block; width: 100%; margin-top: 10px; padding: 14px; font-size: 15px; border-radius: 6px; cursor: pointer; }
.mgate-go { background: linear-gradient(#1f7a36, #114d20); border: 1px solid #3fd066; color: #eaffea; font-weight: 700; letter-spacing: 2px; }
.mgate-share { background: #14263c; border: 1px solid #2f5686; color: #d6e6ff; }
.mgate-no { background: none; border: 1px solid #2a3c52; color: #8fa6c0; }
@keyframes mgfade { from { opacity: 0; } } @keyframes mgup { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 700px) { .mgate { align-items: center; } .mgate-box { border-radius: 10px; border-bottom: 1px solid #2f5686; } }

/* ---------- phone layout of the lobby ---------- */
@media (max-width: 700px) {
  #lobby { align-items: flex-start; padding: 0; }
  .lobby-box { width: 100%; min-height: 100%; margin: 0; padding: calc(18px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; background: linear-gradient(#0e1622f2, #0a0f18f2); }
  .lobby-box h1 { font-size: clamp(26px, 9vw, 38px); letter-spacing: 4px; text-align: center; }
  .lobby-box .sub { text-align: center; font-size: 12px; letter-spacing: .3px; margin-bottom: 16px; }
  #lobby input, #lobby select { font-size: 16px; } /* no zoom-on-focus on iOS */
  .pname-in, .mapsel { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-bottom: 14px; color: #9db6d2; }
  .pname-in input { flex: none; width: 100%; padding: 11px 12px; }
  .mapsel select { flex: none; width: 100%; padding: 11px 34px 11px 12px; }
  .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .presets button { padding: 11px 8px; font-size: 14px; border-radius: 4px; }
  .presets button:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .slots { border: 0; display: flex; flex-direction: column; gap: 10px; }
  .slot.head { display: none; }
  .slot { grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border: 1px solid #1d3048; border-radius: 6px; background: #0b1420cc; }
  .slot .slotno { display: block; grid-column: 1 / -1; color: #6f8cab; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; margin-bottom: -4px; }
  .slot > select { grid-column: 1 / -1; }
  .slot select { padding: 10px 30px 10px 10px; }
  .slot .cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .slot .cell[data-l]::before { content: attr(data-l); color: #6f8cab; font-size: 11px; }
  .slot .cell.empty { display: none; }
  .slot .colsel { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
  .slot .colsel::before { flex-basis: 100%; }
  .slot .colsel select { flex: 1; min-width: 0; }
  .slot .colsel i { height: 38px; flex-basis: 12px; }
  .slot.closed { padding: 10px 12px; }
  .opts { flex-direction: column; align-items: stretch; gap: 12px; }
  .opts label { white-space: normal; }
  .opts label:has(select) { flex-direction: column; align-items: stretch; gap: 6px; }
  .opts select { width: 100%; padding: 10px 30px 10px 10px; }
  .opts input[type=checkbox] { width: 20px; height: 20px; }
  .mapcard { flex-direction: column; align-items: center; text-align: center; }
  .mapprev { width: min(260px, 70vw); height: auto; aspect-ratio: 1; }
  .start { padding: 16px; font-size: 17px; letter-spacing: 3px; border-radius: 4px; }
  .mpbtn { width: 100%; padding: 14px 10px; font-size: 13px; }
  .resume { flex-wrap: wrap; }
  .resume > div { flex-basis: 100%; }
  .resume .resumebtn { flex: 1; padding: 12px; }
  .lobby-box > .gallery { display: inline-block; padding: 6px 0; font-size: 14px; }
  .save { flex-wrap: wrap; } .save .info { flex-basis: 100%; } .save button { flex: 1; padding: 10px; }
  .mp-join { max-width: none; } .mp-join label { flex-direction: column; align-items: stretch; gap: 6px; } .mp-join input { padding: 11px 12px; }
  .start.small { padding: 13px; }
}
.stat { cursor: help; } .stat:hover b { text-decoration: underline dotted; }
#stattip { display: none; position: fixed; z-index: 50; max-width: 340px; background: #05080bf2; border: 1px solid var(--edge); padding: 7px 10px; color: #dfe; box-shadow: 0 4px 16px #000; font-size: 12.5px; line-height: 1.5; pointer-events: none; } #stattip div { color: #9ab; white-space: pre-line; margin-top: 2px; }