/* COSMOS: Alishans expansion preview */
:root { --teal: #35f0d0; --gold: #ffd36b; --navy: #0a1030; --ink: #e9f3ff; --dim: #8fa3c7; --red: #ff5d6c; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #05060f; color: var(--ink); font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
html body { box-sizing: border-box !important; padding: 0 !important; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; }

main.cosmos-shell { position: fixed; inset: 0; overflow: hidden; background: #05060f url("../../assets/cosmos/nebula.jpg") center / cover no-repeat; }
main.cosmos-shell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 40%, transparent 0, rgba(3, 4, 14, .55) 75%); pointer-events: none; }
.cos-app { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 390px); gap: 14px; height: 100%; box-sizing: border-box; padding: 14px; }
.cos-app.locked { filter: blur(6px) brightness(.5); pointer-events: none; }

/* ---------- board ---------- */
.cos-board-wrap { position: relative; min-width: 0; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.cos-board { position: relative; width: min(100cqw, calc(100cqh * 650 / 540)); aspect-ratio: 650 / 540; container-type: inline-size; border-radius: 22px; background: radial-gradient(circle at 50% 48%, rgba(40, 30, 90, .55), rgba(5, 7, 22, .82) 70%); box-shadow: 0 0 0 1px rgba(185, 221, 237, .18), 0 20px 60px rgba(0, 0, 0, .55), inset 0 0 80px rgba(53, 240, 208, .06); user-select: none; -webkit-user-select: none; }
.cos-board::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("../../assets/cosmos/board.jpg") center / 100% 100% no-repeat; opacity: .13; mix-blend-mode: screen; pointer-events: none; }
.cos-board.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.cos-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cos-lines .ln { stroke: rgba(185, 221, 237, .32); stroke-width: 2.2; stroke-linecap: round; transition: stroke .2s; }
.cos-lines .ln.hot { stroke: var(--teal); stroke-width: 3.2; stroke-dasharray: 7 6; animation: flow 1s linear infinite; filter: drop-shadow(0 0 4px var(--teal)); }
.cos-lines .tl { stroke: #ff9ad5; stroke-width: 2.4; stroke-dasharray: 3 9; opacity: 0; transition: opacity .3s; stroke-linecap: round; }
.cos-lines .tl.on { opacity: .9; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -26; } }
.cos-nodes, .cos-pawns { position: absolute; inset: 0; }
.cos-pawns { pointer-events: none; }

.cos-planet, .cos-nz { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; aspect-ratio: 1; touch-action: manipulation; }
.cos-planet { width: 12.3%; }
.cos-planet.qm { width: 13.4%; }
.cos-planet img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--el) 55%, transparent)); transition: transform .2s; pointer-events: none; z-index: 1; }
.cos-planet:hover img, .cos-planet.sel img { transform: scale(1.07); }
.cos-planet .pn { position: absolute; left: 50%; top: 88%; transform: translateX(-50%); z-index: 3; white-space: nowrap; font-size: 1.62cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .12em .55em; border-radius: 99px; background: rgba(5, 8, 24, .82); color: var(--el); border: 1px solid color-mix(in srgb, var(--el) 60%, transparent); pointer-events: none; }
.cos-planet .own { position: absolute; inset: -7%; border-radius: 50%; border: .55cqw solid var(--own); box-shadow: 0 0 1.4cqw var(--own), inset 0 0 1.2cqw var(--own); display: none; z-index: 2; pointer-events: none; }
.cos-planet.owned .own { display: block; }
.cos-planet .tok { position: absolute; left: -4%; top: -4%; width: 30%; height: 30%; border-radius: 50%; background: var(--own); color: #071022; font-size: 1.8cqw; font-style: normal; font-weight: 900; display: grid; place-items: center; z-index: 4; box-shadow: 0 0 0 2px rgba(5, 8, 24, .9); pointer-events: none; }
.cos-planet .badge { position: absolute; right: -10%; top: -6%; z-index: 4; font-style: normal; font-size: 1.5cqw; font-weight: 900; padding: .1em .4em; border-radius: 99px; background: rgba(5, 8, 24, .9); color: var(--gold); border: 1px solid var(--gold); white-space: nowrap; pointer-events: none; }
.cos-planet::after { content: ""; position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 0; }
.cos-planet.reach::after, .cos-planet.tele::after, .cos-planet.target::after, .cos-planet.can-settle::after, .cos-planet.can-attack::after { opacity: 1; animation: pulse 1.3s ease-in-out infinite; }
.cos-planet.reach::after { border: .45cqw dashed var(--teal); box-shadow: 0 0 2cqw rgba(53, 240, 208, .55); }
.cos-planet.tele::after { border: .5cqw solid #ff9ad5; box-shadow: 0 0 2.6cqw #ff9ad5, inset 0 0 1.5cqw #ff9ad5; }
.cos-planet.target::after { border: .5cqw solid var(--gold); box-shadow: 0 0 2.4cqw var(--gold); }
.cos-planet.can-settle::after { border: .55cqw solid var(--gold); box-shadow: 0 0 2.6cqw var(--gold), inset 0 0 1.6cqw rgba(255, 211, 107, .6); }
.cos-planet.can-attack::after { border: .55cqw solid var(--red); box-shadow: 0 0 2.6cqw var(--red), inset 0 0 1.6cqw rgba(255, 93, 108, .6); }
@keyframes pulse { 50% { transform: scale(1.07); opacity: .65; } }
.cos-planet.burst::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: .6cqw solid var(--burst); animation: burst .9s ease-out forwards; pointer-events: none; z-index: 5; }
@keyframes burst { from { transform: scale(.8); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.cos-nz { width: 19%; display: grid; place-items: center; background: radial-gradient(circle, rgba(255, 211, 107, .16), rgba(255, 211, 107, .03) 62%, transparent 70%); border: 1px dashed rgba(255, 211, 107, .35); }
.cos-nz span { font-size: 1.45cqw; font-weight: 800; letter-spacing: .16em; color: rgba(255, 211, 107, .8); line-height: 1.3; pointer-events: none; }
.cos-nz.reach { border: .45cqw dashed var(--teal); box-shadow: 0 0 2cqw rgba(53, 240, 208, .45); }

.cos-pawn { position: absolute; width: 5.4%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #0b1030; border: .42cqw solid var(--c); box-shadow: 0 0 1.4cqw var(--c), 0 .4cqw .8cqw rgba(0, 0, 0, .6); transition: left .36s cubic-bezier(.3, 1.3, .5, 1), top .36s cubic-bezier(.3, 1.3, .5, 1), transform .2s; z-index: 6; overflow: hidden; }
.cos-pawn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cos-pawn.turn { transform: translate(-50%, -50%) scale(1.22); z-index: 7; animation: pawnglow 1.1s ease-in-out infinite; }
@keyframes pawnglow { 50% { box-shadow: 0 0 2.6cqw var(--c), 0 0 0 .5cqw rgba(255, 255, 255, .25); } }

/* info card */
.cos-pinfo { position: absolute; top: 3%; width: 36%; max-height: 94%; overflow: auto; z-index: 20; box-sizing: border-box; padding: 1.6cqw 1.8cqw; border-radius: 14px; background: rgba(8, 13, 40, .94); border: 1px solid rgba(185, 221, 237, .3); box-shadow: 0 12px 30px rgba(0, 0, 0, .6); font-size: max(11px, 1.7cqw); line-height: 1.35; }
.cos-pinfo.right { right: 2%; }
.cos-pinfo.left { left: 2%; }
.cos-pinfo.low:not(.x) { top: auto; bottom: 3%; }
.pi-head { display: flex; align-items: center; gap: .7em; }
.pi-head img { width: 3.2em; height: 3.2em; object-fit: contain; }
.pi-head b { display: block; font-size: 1.35em; color: var(--el); letter-spacing: .04em; }
.pi-head small { color: var(--dim); font-weight: 700; letter-spacing: .12em; font-size: .78em; }
.pi-own { margin: .45em 0 .2em; font-weight: 800; }
.pi-req { list-style: none; margin: .2em 0; padding: 0; }
.pi-req li { margin: .12em 0; }
.pi-req .y { color: #8ff0b0; }
.pi-req .n { color: #ff9aa5; }
.pi-req .f { color: var(--gold); }
.pi-b, .pi-d { margin: .35em 0 0; color: #cfe0f6; }
.pi-b b { color: var(--gold); font-size: .8em; letter-spacing: .12em; margin-right: .3em; }
.pi-d { color: #ffb3bb; }
.pi-btns { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .7em; align-items: center; }
.why { color: #ff9aa5; font-size: .9em; }

.cos-mini { border: 0; border-radius: 99px; padding: .5em 1em; font-weight: 900; letter-spacing: .06em; font-size: .9em; background: linear-gradient(180deg, #5ff8de, #1fbfa5); color: #062420; cursor: pointer; box-shadow: 0 3px 0 #0d6d5e; }
.cos-mini.red { background: linear-gradient(180deg, #ff8a95, #e2384b); color: #2a0509; box-shadow: 0 3px 0 #8d1d2b; }
.cos-mini.alt { background: rgba(185, 221, 237, .14); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(185, 221, 237, .35); }
.cos-mini:active { transform: translateY(2px); box-shadow: none; }

/* banner + dice */
.cos-banner { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; text-align: center; pointer-events: none; width: 90%; }
.cos-banner b { display: block; font-size: 7cqw; letter-spacing: .14em; color: #fff; text-shadow: 0 0 2cqw var(--teal), 0 0 5cqw #8a5cff; font-family: Impact, "Arial Black", sans-serif; font-weight: 400; }
.cos-banner span { display: inline-block; margin-top: 1cqw; font-size: max(11px, 1.8cqw); font-weight: 800; letter-spacing: .1em; color: var(--gold); background: rgba(5, 8, 24, .8); padding: .4em 1em; border-radius: 99px; }
.cos-banner.go { animation: bannerIn .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes bannerIn { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
.cos-dice { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); z-index: 25; min-width: 52%; max-width: 92%; box-sizing: border-box; padding: 1.2cqw 1.8cqw; border-radius: 14px; background: rgba(8, 13, 40, .95); border: 1px solid rgba(255, 211, 107, .45); box-shadow: 0 12px 34px rgba(0, 0, 0, .65); font-size: max(11px, 1.7cqw); }
.cos-dice .dh { margin: 0 0 .4em; font-weight: 900; letter-spacing: .12em; color: var(--gold); font-size: .9em; text-align: center; }
.cos-dice .dr { display: flex; align-items: center; gap: .45em; margin: .25em 0; padding: .15em .4em; border-radius: 10px; }
.cos-dice .dr.good { background: rgba(53, 240, 208, .14); }
.cos-dice .dr.bad { background: rgba(255, 93, 108, .14); }
.cos-dice .dl { font-weight: 900; min-width: 5.5em; }
.cos-dice .die { font-style: normal; font-size: 2.1em; line-height: 1; color: #fff; }
.cos-dice.roll .die { animation: roll .45s ease-out; }
@keyframes roll { from { transform: rotate(-200deg) scale(.4); opacity: 0; } }
.cos-dice em { font-style: normal; font-size: .72em; font-weight: 800; color: var(--gold); border: 1px solid rgba(255, 211, 107, .5); border-radius: 99px; padding: .1em .5em; white-space: nowrap; }
.cos-dice .dt { margin-left: auto; font-size: 1.5em; min-width: 1.6em; text-align: right; }
.cos-dice .df { display: flex; flex-wrap: wrap; gap: .4em; justify-content: center; align-items: center; margin-top: .45em; }
.cos-dice .ok { color: var(--teal); font-weight: 900; letter-spacing: .14em; }
.cos-dice .no { color: var(--red); font-weight: 900; letter-spacing: .14em; }

/* ---------- side panel ---------- */
.cos-side { display: flex; flex-direction: column; gap: 9px; min-height: 0; min-width: 0; padding: 12px; box-sizing: border-box; border-radius: 20px; background: rgba(8, 12, 36, .78); border: 1px solid rgba(185, 221, 237, .2); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 14px; }
.cos-top { display: flex; align-items: center; gap: 10px; padding-right: 46px; min-height: 30px; }
.cos-top .arcade-back { position: static; margin: 0; }
.cos-round { margin-left: auto; font-weight: 900; letter-spacing: .1em; font-size: 12px; color: var(--gold); white-space: nowrap; }
.cos-prompt { margin: 0; padding: 8px 11px; border-radius: 12px; background: rgba(185, 221, 237, .08); box-shadow: inset 3px 0 0 var(--dim); font-weight: 700; line-height: 1.3; min-height: 2.6em; box-sizing: border-box; }
.cos-prompt.mine { box-shadow: inset 3px 0 0 var(--teal); background: rgba(53, 240, 208, .1); }
.cos-prompt.warn { box-shadow: inset 3px 0 0 #ff9ad5; background: rgba(255, 154, 213, .12); }
.cos-factions { display: grid; gap: 5px; }
.cos-factions .fr { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid transparent; }
.cos-factions .fr.now { border-color: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 40%, transparent); }
.cos-factions img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); background: #0b1030; box-sizing: border-box; }
.cos-factions .fn { min-width: 0; display: flex; flex-direction: column; }
.cos-factions .fn b { color: var(--c); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-factions .fn small { color: var(--ink); font-size: 9px; letter-spacing: .1em; opacity: .7; }
.cos-factions .pw { font-size: 9px; font-weight: 900; letter-spacing: .12em; color: var(--dim); opacity: .55; }
.cos-factions .pw.on { color: var(--gold); opacity: 1; }
.cos-factions .fs { display: flex; gap: 7px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.cos-factions .fs .pts { color: var(--gold); }
.cos-res { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 800; font-size: 13px; color: #cfe0f6; }
.cos-res .en { color: var(--gold); letter-spacing: 1px; font-size: 15px; }
.cos-res .en i { font-style: normal; opacity: .2; }
.cos-res .en.dim { opacity: .5; }
.cos-res .cos-mini { margin-left: auto; padding: .35em .9em; }
.cos-hand { display: flex; flex-wrap: wrap; gap: 5px; align-content: flex-start; max-height: 128px; min-height: 56px; flex: 0 1 auto; overflow: auto; }
.cos-hand .empty { margin: 0; color: var(--dim); font-size: 12px; }
.hc { display: flex; align-items: center; gap: 5px; padding: 4px 9px 4px 4px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 14%, rgba(8, 12, 36, .9)); cursor: pointer; font-size: 12px; font-weight: 700; max-width: 100%; touch-action: manipulation; }
.hc i { font-style: normal; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 6px; background: var(--k); color: #071022; font-weight: 900; font-size: 11px; flex: none; }
.hc span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc:hover { filter: brightness(1.2); }
.hc.pick { animation: glowk 1s infinite; border-color: #ff9ad5; }
.cos-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cos-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 8px 2px; border: 0; border-radius: 12px; cursor: pointer; font-weight: 900; letter-spacing: .06em; color: #0a1030; box-shadow: 0 4px 0 rgba(0, 0, 0, .35); touch-action: manipulation; }
.cos-act b { font-size: 13px; }
.cos-act small { font-size: 10px; font-weight: 800; opacity: .75; }
.cos-act.learn { background: linear-gradient(180deg, #a9c8ff, #6d8dff); }
.cos-act.settle { background: linear-gradient(180deg, #ffe39a, #ffc14a); }
.cos-act.attack { background: linear-gradient(180deg, #ff9aa3, #ff4f63); }
.cos-act.end { background: linear-gradient(180deg, #7ff8e3, #24c7ab); }
.cos-act.end.glow { animation: glowk 1.1s infinite; }
@keyframes glowk { 50% { box-shadow: 0 0 14px 2px rgba(255, 154, 213, .75); } }
.cos-act:disabled { filter: grayscale(1) brightness(.55); cursor: default; box-shadow: none; }
.cos-act:not(:disabled):active { transform: translateY(3px); box-shadow: none; }
.cos-log { list-style: none; margin: 0; padding: 0 2px 0 0; flex: 1 1 0; min-height: 0; overflow: auto; font-size: 12.5px; line-height: 1.35; color: #c9d7ee; }
.cos-log li { padding: 4px 0 4px 13px; position: relative; border-bottom: 1px solid rgba(185, 221, 237, .07); }
.cos-log li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.cos-log li:first-child { color: #fff; }

/* card popup */
.cos-cardpop { position: absolute; z-index: 40; right: 22px; bottom: 22px; width: min(320px, 80vw); }
.cp { padding: 14px 16px; border-radius: 16px; background: rgba(8, 13, 40, .97); border: 1px solid var(--k); box-shadow: 0 0 24px color-mix(in srgb, var(--k) 40%, transparent), 0 18px 40px rgba(0, 0, 0, .6); font-size: 14px; }
.cp-c { margin: 0; color: var(--k); font-size: 11px; font-weight: 900; letter-spacing: .16em; }
.cp h3 { margin: .2em 0 .35em; font-size: 20px; color: #fff; }
.cp p { margin: .3em 0; line-height: 1.35; }
.cp .cp-n { color: var(--dim); font-size: 12px; }

/* ---------- overlays ---------- */
.cos-ov { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; overflow: auto; }
.cos-ov .overlay-card { max-width: min(720px, 94vw); width: auto; margin: auto; text-align: center; box-sizing: border-box; }
html body .cos-ov .overlay-card { padding-left: 28px !important; padding-right: 28px !important; }
.cos-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 99px; padding: 12px 26px; min-height: 44px; font-weight: 900; letter-spacing: .1em; text-decoration: none; cursor: pointer; background: linear-gradient(180deg, #ffbe8a, #efa066); color: #2b1203; box-shadow: 0 4px 0 #a85d26, 0 0 22px rgba(239, 160, 102, .35); font-size: 15px; box-sizing: border-box; }
.cos-btn.alt { background: rgba(185, 221, 237, .12); color: #eaf4ff; box-shadow: inset 0 0 0 1px rgba(185, 221, 237, .4); }
.cos-btn:active { transform: translateY(3px); box-shadow: none; }
.cos-startbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
html body .overlay-card h2.cos-title { font-family: Impact, "Arial Black", sans-serif !important; font-size: clamp(54px, 9vw, 96px) !important; letter-spacing: .22em !important; margin: 4px 0 0 .22em !important; color: #fff !important; text-shadow: 0 0 12px var(--teal), 0 0 34px #8a5cff, 0 0 2px #fff !important; -webkit-text-stroke: 0 !important; line-height: 1 !important; }
.cos-type { font-family: Consolas, "Courier New", monospace; color: var(--teal) !important; letter-spacing: .16em; min-height: 1.3em; }
.cos-type:not(.done)::after { content: "▌"; animation: blink .7s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.cos-classified { display: inline-block; margin: 10px 0 4px; padding: 4px 12px; border: 2px solid #ff5d6c; color: #ff8a95; font-weight: 900; letter-spacing: .2em; font-size: 13px; transform: rotate(-2deg); border-radius: 4px; }
.cos-intro { display: flex; align-items: center; gap: 16px; text-align: left; margin: 10px auto 4px; max-width: 560px; }
.cos-intro p { margin: 0; line-height: 1.4; }
.cos-intro b { color: var(--teal); }
.cos-emblem { background: url("../../assets/cosmos/alishans.svg") center / contain no-repeat; flex: none; }
.cos-emblem.big { width: 84px; height: 84px; filter: drop-shadow(0 0 10px rgba(53, 240, 208, .6)); animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.cos-choice { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 12px; }
.cos-choice span { font-weight: 900; letter-spacing: .14em; font-size: 12px; opacity: .8; margin-right: 4px; }
.cos-chip { border: 1px solid rgba(185, 221, 237, .4); background: rgba(185, 221, 237, .08); border-radius: 99px; padding: 8px 16px; font-weight: 900; letter-spacing: .08em; cursor: pointer; min-height: 38px; }
.cos-chip.active { background: var(--teal); color: #062420; border-color: var(--teal); box-shadow: 0 0 14px rgba(53, 240, 208, .5); }
.cos-rules .rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; text-align: left; margin: 12px 0 6px; }
.cos-rules .rules div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(185, 221, 237, .15); }
.cos-rules .rules strong { display: block; color: var(--gold); letter-spacing: .08em; margin-bottom: 3px; font-size: 13px; }
.cos-rules .rules span { font-size: 13px; line-height: 1.4; }
.cos-lock h2 { color: #ff8a95 !important; }
.cos-lock p { max-width: 420px; margin: 10px auto 16px; line-height: 1.45; }
.cos-store { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 12px 0 0; }
.sc { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--k); background: color-mix(in srgb, var(--k) 12%, rgba(8, 12, 36, .92)); cursor: pointer; transition: transform .15s; }
.sc:hover { transform: translateY(-3px); box-shadow: 0 0 18px color-mix(in srgb, var(--k) 45%, transparent); }
.sc i { font-style: normal; font-size: 10px; letter-spacing: .16em; font-weight: 900; color: var(--k); }
.sc b { font-size: 15px; }
.sc span { font-size: 12px; line-height: 1.35; color: #cfe0f6; }
.cos-modal { width: min(720px, 94vw) !important; }
html body .overlay-card h2.cos-evname { color: #ff9ad5 !important; text-shadow: 2px 2px 0 #5a2a8a, 0 0 18px rgba(255, 154, 213, .5) !important; }
html body .overlay-card h2#endTitle { font-size: clamp(22px, 2.6vw, 34px) !important; max-width: 640px; margin-left: auto !important; margin-right: auto !important; }
.cos-evtext { font-size: 16px; line-height: 1.4; margin: 6px auto; max-width: 480px; }
.cos-evrolls { color: var(--gold); font-weight: 800; margin: 6px 0; }
.cos-evres { list-style: none; padding: 0; margin: 8px auto 0; max-width: 480px; text-align: left; font-size: 14px; }
.cos-evres li { padding: 4px 0; border-bottom: 1px solid rgba(185, 221, 237, .1); }
.cos-table-wrap { overflow: auto; margin: 12px 0 4px; }
.cos-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cos-table th { font-size: 11px; letter-spacing: .12em; color: var(--dim); padding: 6px 8px; }
.cos-table td { padding: 8px; border-top: 1px solid rgba(185, 221, 237, .14); text-align: center; }
.cos-table td:first-child { text-align: left; font-weight: 800; white-space: nowrap; }
.cos-table tr.me td { background: rgba(53, 240, 208, .1); }
.cos-table td b { color: var(--gold); font-size: 18px; }
.cos-table .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; }

/* ---------- rotate prompt ---------- */
.cos-rotate { display: none !important; }
@media (max-width: 760px) and (orientation: portrait) {
  .cos-rotate { display: grid !important; position: fixed; inset: 0; z-index: 9999; place-items: center; background: #05060f url("../../assets/cosmos/nebula-sm.jpg") center / cover; text-align: center; }
  .cos-rotate b { display: block; font-family: Impact, "Arial Black", sans-serif; font-size: 44px; letter-spacing: .2em; color: #fff; text-shadow: 0 0 12px var(--teal), 0 0 30px #8a5cff; font-weight: 400; }
  .cos-rotate span { display: block; margin-top: 10px; padding: 0 30px; font-weight: 700; }
  main.cosmos-shell { display: none; }
}

/* ---------- medium desktop ---------- */
@media (max-height: 760px) {
  .cos-app { gap: 10px; padding: 10px; }
  .cos-side { gap: 7px; padding: 10px; font-size: 13px; }
  .cos-factions.four { grid-template-columns: 1fr 1fr; }
  .cos-factions.four .fr { grid-template-columns: 26px 1fr; gap: 6px; }
  .cos-factions.four .fs { grid-column: 1 / -1; justify-content: space-between; }
  .cos-factions.four img { width: 26px; height: 26px; }
  .cos-hand { max-height: 96px; }
}

/* ---------- short landscape (phones) ---------- */
@media (max-height: 520px) {
  .cos-app { grid-template-columns: minmax(0, 1fr) clamp(260px, 36vw, 330px); gap: 6px; padding: 6px max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left)); }
  .cos-board { border-radius: 14px; }
  .cos-side { gap: 5px; padding: 7px 8px; border-radius: 14px; font-size: 12px; }
  .cos-top { min-height: 24px; padding-right: 48px; gap: 6px; }
  .cos-top .arcade-back { font-size: 11px; padding: 4px 9px; min-height: 0; }
  .cos-round { font-size: 10px; }
  .cos-prompt { padding: 5px 8px; font-size: 11.5px; min-height: 0; border-radius: 9px; }
  .cos-factions { gap: 3px; }
  .cos-factions .fr { padding: 3px 6px; gap: 6px; grid-template-columns: 22px 1fr auto; border-radius: 9px; }
  .cos-factions img { width: 22px; height: 22px; }
  .cos-factions .fn b { font-size: 12px; }
  .cos-factions .fn small { display: none; }
  .cos-factions .fs { font-size: 11px; gap: 5px; }
  .cos-factions.four .fr { grid-template-columns: 20px 1fr; padding: 2px 5px; gap: 2px 5px; }
  .cos-factions.four img { width: 20px; height: 20px; }
  .cos-factions.four .fn b { font-size: 11px; }
  .cos-factions.four .pw { display: none; }
  .cos-factions.four .fs { font-size: 10px; }
  .cos-res { gap: 7px; font-size: 11px; }
  .cos-res .en { font-size: 12px; }
  .cos-hand { gap: 3px; max-height: 106px; min-height: 53px; display: grid; grid-template-columns: 1fr 1fr; }
  .hc { padding: 2px 6px 2px 2px; font-size: 10.5px; border-radius: 7px; gap: 3px; min-width: 0; }
  html.arcade-touch .hc { min-height: 25px; min-width: 0; }
  .hc i { width: 15px; height: 15px; font-size: 9px; border-radius: 4px; }
  .cos-actions { gap: 4px; }
  .cos-act { padding: 4px 1px; border-radius: 9px; min-height: 40px; }
  .cos-act b { font-size: 11px; }
  .cos-act small { font-size: 9px; }
  .cos-log { font-size: 10.5px; }
  .cos-log li { padding: 2px 0 2px 11px; }
  .cos-pinfo { width: 44%; padding: 7px 9px; font-size: 11px; border-radius: 10px; }
  .cos-pinfo .cos-mini { padding: .45em .8em; min-height: 32px; }
  .cos-dice { font-size: 11px; padding: 5px 9px; }
  .cos-cardpop { right: 8px; bottom: 8px; width: min(290px, 60vw); }
  .cp { padding: 10px 12px; font-size: 12px; }
  .cp h3 { font-size: 16px; }
  .cos-ov { padding: 6px; align-items: flex-start; }
  html body .cos-ov .overlay-card { padding: 12px 18px !important; max-width: 96vw; }
  html body .overlay-card h2.cos-title { font-size: 46px !important; }
  .cos-ov .overlay-card h2 { font-size: 26px !important; margin: 2px 0 !important; }
  .cos-classified { margin: 4px 0 0; font-size: 11px; }
  .cos-intro { margin: 6px auto 0; font-size: 12.5px; gap: 10px; }
  .cos-emblem.big { width: 56px; height: 56px; }
  .cos-choice { margin-top: 6px; }
  .cos-chip { min-height: 34px; padding: 5px 13px; font-size: 12px; }
  .cos-startbtns { margin-top: 8px; gap: 8px; }
  .cos-btn { padding: 8px 20px; font-size: 13px; }
  .cos-rules .rules { gap: 5px; margin: 6px 0 2px; grid-template-columns: repeat(3, 1fr); }
  .cos-rules .rules div { padding: 5px 8px; }
  .cos-rules .rules strong { font-size: 11px; }
  .cos-rules .rules span { font-size: 10.5px; line-height: 1.3; display: block; }
  .cos-store { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
  .sc { padding: 6px 8px; gap: 2px; border-radius: 10px; }
  .sc b { font-size: 12px; }
  .sc span { font-size: 10.5px; line-height: 1.25; }
  .cos-evtext { font-size: 13px; margin: 2px auto; }
  .cos-evres { font-size: 12px; }
  .cos-evres li { padding: 2px 0; }
  .cos-table { font-size: 12px; }
  .cos-table td { padding: 4px 6px; }
  .cos-table th { padding: 2px 6px; font-size: 9px; }
  .cos-table-wrap { margin: 6px 0 2px; }
}