:root {
    --ink: #e9efff;
    --muted: #aeb9d2;
    --dim: #6f7b99;
    --night: #070b17;
    --panel: rgba(12, 19, 39, 0.78);
    --line: rgba(168, 197, 255, 0.17);
    --glow: #80e8d5;
    --gold: #f4d38b;
    --violet: #9e78ff;
    --blue: #65b8ff;
    --red: #ff866f;
    --green: #7bddae;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 1180px;
    min-height: 100vh;
    overflow-x: auto;
    color: var(--ink);
    background:
        radial-gradient(circle at 48% 38%, rgba(44, 71, 121, .18), transparent 32rem),
        radial-gradient(circle at 80% 0%, rgba(82, 31, 122, .21), transparent 28rem),
        linear-gradient(145deg, #050812, #0a1022 48%, #070a17);
    font-family: "DM Sans", sans-serif;
}

button { color: inherit; font: inherit; cursor: pointer; }

.aurora {
    position: fixed;
    z-index: -1;
    width: 80vw;
    height: 17rem;
    filter: blur(70px);
    opacity: .18;
    transform: rotate(-10deg);
    pointer-events: none;
}
.aurora-one { top: -6rem; left: 3rem; background: linear-gradient(90deg, transparent, #3ce0cb, #7247f0, transparent); }
.aurora-two { right: -8rem; bottom: 3rem; background: linear-gradient(90deg, transparent, #2379e8, #914df0, transparent); }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: "Cinzel", serif; letter-spacing: .03em; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 76px;
    padding: 0 28px;
    border-bottom: 1px solid var(--line);
    background: rgba(6, 10, 22, .74);
    backdrop-filter: blur(16px);
}

.brand, .player-profile, .top-actions, .loot-slots, .pile-group, .source-row {
    display: flex;
    align-items: center;
}
.brand { gap: 12px; }
.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(128, 232, 213, .5);
    border-radius: 50%;
    color: var(--glow);
    box-shadow: 0 0 22px rgba(128, 232, 213, .22), inset 0 0 16px rgba(128, 232, 213, .1);
    font-family: "Cinzel", serif;
    font-size: 23px;
}
.brand h1 { font-size: 18px; }
.brand p, .player-profile p { color: var(--muted); font-size: 11px; }
.top-actions { gap: 8px; }
.mode-badge {
    padding: 6px 9px;
    border: 1px solid rgba(128,232,213,.25);
    border-radius: 20px;
    color: var(--glow);
    background: rgba(128,232,213,.07);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.login-shell,
.portal-shell {
    width: min(900px, calc(100vw - 40px));
    margin: 0 auto;
    padding: 12vh 0 42px;
}
.portal-shell:has(#deckViewerPanel:not(.hidden)) {
    width: min(1440px, calc(100vw - 40px));
    padding-top: 7vh;
}
.login-shell {
    display: grid;
    min-height: calc(100vh - 76px);
    place-items: start center;
}
.login-panel {
    width: min(390px, 100%);
    padding: 26px;
    border-radius: 14px;
}
.login-panel h2 {
    margin: 8px 0 20px;
    color: var(--gold);
    font-size: 28px;
}
.login-panel form { display: grid; gap: 14px; }
.login-panel form.hidden { display: none; }
.login-panel label {
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.login-panel .primary-button { margin-top: 4px; }
.login-switch { justify-self: center; }
.portal-hero { width: min(650px, 100%); margin-bottom: 28px; }
.portal-hero h2, .portal-panel h2 { margin: 8px 0; color: var(--gold); font-size: 28px; }
.portal-hero p, .portal-panel p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.portal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.portal-card {
    display: grid;
    min-height: 230px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--ink);
    background: var(--panel);
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 40px rgba(0,0,0,.12);
    text-align: left;
}
.portal-card:hover { border-color: rgba(128,232,213,.52); background: rgba(128,232,213,.07); }
.portal-card b { align-self: end; color: var(--gold); font-family: "Cinzel", serif; font-size: 24px; }
.portal-card small { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.portal-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(128,232,213,.4);
    border-radius: 50%;
    color: var(--glow);
    font-family: "Cinzel", serif;
    font-size: 19px;
}
.portal-panel { padding: 24px; border-radius: 14px; }
.username-field, .room-option label { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.username-field { display: block; margin-top: 22px; }
.play-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.room-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.room-option { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); }
.room-option h3 { margin: 8px 0 6px; color: var(--gold); font-size: 15px; }
.room-option p { min-height: 42px; margin-bottom: 12px; font-size: 11px; }
.room-option label { display: block; margin-bottom: 12px; }
.room-option button { margin-top: auto; }
.login-panel input, .username-field input, .username-field select, .room-option input, .room-option select, #historySearch {
    display: block;
    width: 100%;
    margin-top: 7px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 5px;
    outline: 0;
    color: var(--ink);
    background: rgba(4,8,20,.62);
    font: inherit;
    font-size: 12px;
}
.login-panel input:focus, .username-field input:focus, .username-field select:focus, .room-option input:focus, .room-option select:focus, #historySearch:focus { border-color: rgba(128,232,213,.52); }
.username-field input[readonly] { color: var(--glow); }
.portal-divider { display: flex; align-items: center; gap: 10px; margin: 19px 0; color: var(--dim); font-size: 10px; text-transform: uppercase; }
.portal-divider span { height: 1px; flex: 1; background: var(--line); }
.text-button.portal-back {
    display: block;
    min-width: 132px;
    margin: 24px auto 0;
    padding: 12px 22px;
    border: 1px solid rgba(128,232,213,.38);
    border-radius: 7px;
    color: var(--glow);
    background: rgba(128,232,213,.08);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-align: center;
    text-transform: uppercase;
}
.text-button.portal-back:hover { color: var(--ink); background: rgba(128,232,213,.17); }

.deck-viewer-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.deck-viewer-heading .username-field { width: 260px; margin-top: 0; }
.deck-viewer-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.deck-pill {
    padding: 6px 9px;
    border: 1px solid rgba(128,232,213,.22);
    border-radius: 20px;
    color: var(--muted);
    background: rgba(255,255,255,.025);
    font-size: 10px;
}
.keyword-glossary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 20px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(128,232,213,.18);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
}
.keyword-entry { display: flex; flex-direction: column; gap: 2px; }
.keyword-entry dt {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent, #80e8d5);
}
.keyword-entry dd {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}
.deck-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(168px, 15vw, 220px), 1fr));
    gap: clamp(14px, 1.4vw, 22px);
    max-height: 68vh;
    margin-top: 18px;
    overflow-y: auto;
    padding: 3px 4px 10px;
}
.deck-card-entry { position: relative; justify-self: center; }
.deck-card-entry .game-card {
    width: clamp(168px, 15vw, 220px);
    height: calc(clamp(168px, 15vw, 220px) * 1.431);
}
.deck-card-entry .card-topline,
.deck-card-entry .stats { padding: 8px 9px; font-size: 9px; }
.deck-card-entry .card-topline b { font-size: 15px; }
.deck-card-entry .card-art { height: calc(clamp(168px, 15vw, 220px) * .56); margin: 0 8px; }
.deck-card-entry .card-copy { padding: 8px 9px; }
.deck-card-entry .card-copy h3 { font-size: 13px; line-height: 1.2; }
.deck-card-entry .card-copy p { margin-top: 6px; font-size: 10px; line-height: 1.45; }
.copy-badge {
    position: absolute;
    z-index: 2;
    top: -6px;
    right: -6px;
    display: grid;
    min-width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid rgba(244,211,139,.45);
    border-radius: 50%;
    color: var(--gold);
    background: rgba(7,11,24,.95);
    font-size: 10px;
    font-weight: 700;
}
.deck-card-entry .game-card { pointer-events: none; }

.history-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
#historySearch { width: 260px; margin-top: 0; }
.history-list { display: grid; gap: 8px; max-height: 55vh; margin-top: 20px; overflow-y: auto; }
.history-row {
    display: grid;
    grid-template-columns: 90px minmax(180px, 1fr) auto auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    background: rgba(255,255,255,.02);
    font-size: 11px;
    text-align: left;
}
.history-row:hover { border-color: rgba(128,232,213,.42); background: rgba(128,232,213,.06); }
.history-row b { color: var(--gold); font-family: "Cinzel", serif; }
.history-row i { color: var(--glow); font-style: normal; }
.history-view-button { min-width: 74px; padding: 9px 14px; justify-self: end; }
.history-delete-button { min-width: 74px; padding: 9px 14px; justify-self: end; border-color: rgba(255,123,123,.38); color: #ffc7c7; }
.empty-message { color: var(--muted); font-size: 12px; }

.game-shell {
    display: grid;
    grid-template-columns: 184px minmax(790px, 1fr) 210px;
    gap: 14px;
    max-width: 1600px;
    margin: auto;
    padding: 14px;
}

.glass-panel, .player-row, .field, .hand-zone {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 40px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
}

.turn-panel, .action-panel {
    position: sticky;
    top: 14px;
    height: calc(100vh - 28px);
    min-height: 680px;
    padding: 18px 14px;
    border-radius: 16px;
}
.turn-panel { display: flex; flex-direction: column; }
.action-panel { display: flex; flex-direction: column; }
.room-share { margin-top: 18px; padding: 11px; border: 1px solid rgba(128,232,213,.25); border-radius: 6px; background: rgba(128,232,213,.06); text-align: center; }
.room-share b { display: block; margin: 7px 0 8px; color: var(--gold); font-family: "Cinzel", serif; font-size: 20px; letter-spacing: .12em; }
.room-link-button { width: 100%; margin-bottom: 8px; padding: 9px 8px; font-size: 10px; }
.room-share p { color: var(--muted); font-size: 10px; line-height: 1.45; }
.eyebrow, .zone-label {
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.zone-label b { color: var(--gold); }
.turn-heading h2, .action-panel h2 { margin: 8px 0; color: var(--gold); font-size: 20px; }
.turn-heading p, .action-panel > p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.turn-panel .battle-log { margin-top: auto; flex: 1; overflow-y: auto; }

.primary-button, .secondary-button, .quiet-button, .text-button {
    border: 1px solid rgba(128, 232, 213, .35);
    border-radius: 5px;
    background: rgba(128, 232, 213, .09);
    transition: .2s;
}
.primary-button { padding: 11px 8px; color: var(--glow); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.secondary-button { padding: 10px 8px; border-color: rgba(244,211,139,.28); color: var(--gold); background: rgba(244,211,139,.06); font-size: 11px; }
.quiet-button { padding: 8px 12px; color: var(--muted); font-size: 11px; }
.text-button { margin-top: 7px; border: 0; background: transparent; color: var(--dim); font-size: 10px; }
button:hover:not(:disabled) { border-color: var(--glow); background: rgba(128, 232, 213, .15); transform: translateY(-1px); }
button:disabled { cursor: default; opacity: .4; }

.board { display: flex; flex-direction: column; gap: 8px; }
.player-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    min-height: 74px;
    padding: 8px 14px;
    border-radius: 12px;
}
.player-profile { gap: 10px; }
.player-profile h2 { margin: 2px 0; font-size: 15px; }
.avatar {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 50%;
    font-size: 8px;
    text-align: center;
}
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 9px var(--gold);
}
.your-status { background: var(--glow); box-shadow: 0 0 9px var(--glow); }
.loot-group { margin-right: 22px; text-align: center; }
.loot-slots { gap: 5px; margin-top: 4px; }
.pile-group { gap: 12px; text-align: center; }

.mini-card {
    width: 25px;
    height: 34px;
    border: 1px solid rgba(168,197,255,.22);
    border-radius: 3px;
    background: #121b36;
}
.card-back {
    background: url("/static/cards/card-back.png") center / cover, linear-gradient(145deg, rgba(53,117,139,.5), rgba(35,22,77,.72));
    box-shadow: inset 0 0 0 2px #10182f, inset 0 0 0 3px rgba(128,232,213,.25);
}
.claimed { display: grid; place-items: center; color: var(--gold); background: rgba(244,211,139,.08); }
.discard { display: grid; place-items: center; color: var(--dim); background: rgba(255,255,255,.025); }
.stacked { box-shadow: 3px 2px 0 #0e152b, 6px 4px 0 rgba(72,88,131,.55), inset 0 0 0 2px #10182f, inset 0 0 0 3px rgba(128,232,213,.25); }

.field {
    display: grid;
    grid-template-columns: 150px 1fr 96px 150px;
    align-items: center;
    min-height: 207px;
    padding: 10px;
    border-radius: 12px;
}
.site-zone, .source-zone, .creature-zone { text-align: center; }
.site-card {
    margin-top: 8px;
    border: 1px solid rgba(244,211,139,.22);
    border-radius: 6px;
    background: rgba(244,211,139,.045);
    overflow: hidden;
}
.site-art { display: block; height: 74px; overflow: hidden; font-size: 9px; background: url("/static/cards/default.png") center / cover; }
.site-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.site-card div:last-child { padding: 7px; }
.site-card h3 { color: var(--gold); font-size: 10px; }
.site-card p { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.site-empty { display: grid; height: 124px; margin-top: 8px; place-items: center; border-radius: 6px; font-size: 9px; line-height: 1.6; }

.card-row { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.game-card {
    position: relative;
    width: 116px;
    height: 166px;
    overflow: hidden;
    border: 1px solid rgba(101,184,255,.42);
    border-radius: 7px;
    background: linear-gradient(160deg, rgba(17,28,58,.98), rgba(7,11,24,.98));
    box-shadow: 0 5px 14px rgba(0,0,0,.24);
    text-align: left;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.card-topline, .stats { display: flex; justify-content: space-between; padding: 5px 6px; font-size: 7px; font-weight: 700; letter-spacing: .1em; }
.card-topline b { color: var(--gold); font-size: 11px; }
.card-art { display: block; height: 68px; margin: 0 5px; overflow: hidden; font-size: 8px; background: url("/static/cards/default.png") center / cover; }
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art-slot {
    border: 1px dashed rgba(174,185,210,.25);
    color: rgba(174,185,210,.56);
    background:
        linear-gradient(135deg, rgba(128,232,213,.05), rgba(158,120,255,.07)),
        repeating-linear-gradient(-45deg, transparent 0 7px, rgba(255,255,255,.018) 7px 8px);
}
.card-art.art-slot, .site-art.art-slot {
    background: url("/static/cards/default.png") center / cover;
}
.card-copy { padding: 5px 6px; }
.card-copy h3 { color: var(--ink); font-size: 9px; }
.card-copy p { margin-top: 4px; color: var(--muted); font-size: 7px; line-height: 1.45; }
.stats { position: absolute; right: 0; bottom: 0; left: 0; color: var(--gold); border-top: 1px solid var(--line); }
.red { border-color: rgba(255,134,111,.55); }
.green { border-color: rgba(123,221,174,.55); }
.violet { border-color: rgba(158,120,255,.55); }
.selectable { cursor: pointer; }
.selectable:hover, .selectable.selected { border-color: var(--glow); box-shadow: 0 0 22px rgba(128,232,213,.24); transform: translateY(-5px); }
.unavailable { opacity: .58; filter: saturate(.7); }
.unavailable:hover { opacity: .8; }
.targetable { border-color: var(--gold); box-shadow: 0 0 19px rgba(244,211,139,.24); animation: targetPulse 1.2s ease-in-out infinite; }
.awakening::after {
    position: absolute;
    top: 25px;
    right: 4px;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--gold);
    background: rgba(7,11,24,.88);
    content: "DELAY";
    font-size: 6px;
    letter-spacing: .1em;
}
.item-count { position: absolute; right: 5px; bottom: 24px; color: var(--glow); font-size: 7px; }
.readiness { position: absolute; left: 5px; bottom: 24px; color: var(--glow); font-size: 6px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.exhausted { opacity: .62; transform: rotate(-7deg); filter: saturate(.65); }
.empty-slot {
    display: grid;
    width: 116px;
    height: 166px;
    place-items: center;
    border: 1px dashed rgba(174,185,210,.15);
    border-radius: 7px;
    color: rgba(174,185,210,.36);
    font-size: 9px;
    text-transform: uppercase;
}
.source-row { justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.source-gem, .key-dot {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 8px 50% 50%;
    transform: rotate(45deg);
    box-shadow: inset 0 0 9px rgba(255,255,255,.21), 0 0 12px rgba(128,232,213,.15);
}
.source-gem:hover:not(:disabled) { transform: rotate(45deg) scale(1.1); }
.red-source { background: linear-gradient(135deg, #ff997a, #9e3d50); }
.blue-source { background: linear-gradient(135deg, #87dbff, #3450ad); }
.green-source { background: linear-gradient(135deg, #97e6a4, #277e6e); }
.violet-source { background: linear-gradient(135deg, #cd9cff, #673bae); }
.source-gem.exhausted { opacity: .32; transform: rotate(135deg); }

.battle-divider { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; }
.battle-divider span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line), transparent); }

.played-zone {
    display: grid;
    justify-content: center;
    justify-items: center;
    align-self: center;
    gap: 4px;
    padding: 4px 0;
}
.side-played-zone {
    min-width: 86px;
}
.played-zone .zone-label {
    max-width: 86px;
    font-size: 8px;
    line-height: 1.25;
    text-align: center;
}
.played-row {
    display: grid;
    width: 86px;
    min-height: 116px;
    height: auto;
    place-items: center;
    border: 1px dashed rgba(244,211,139,.28);
    border-radius: 7px;
    background: rgba(244,211,139,.035);
}
.lingering-stack { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; }
.lingering-tab {
    width: 76px;
    padding: 3px 6px;
    border: 1px solid rgba(244,211,139,.45);
    border-radius: 4px;
    background: rgba(244,211,139,.06);
    color: var(--gold);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.played-card {
    width: 76px;
    height: 108px;
    border-color: var(--gold);
    box-shadow: 0 0 24px rgba(244,211,139,.25);
    animation: playedPulse 1.4s ease-in-out infinite;
}
.played-card .card-topline {
    padding: 3px 4px;
    font-size: 6px;
}
.played-card .card-art { height: 42px; }
.played-card .card-copy { padding: 4px; }
.played-card .card-copy h3 { font-size: 7px; line-height: 1.1; }
.played-card .card-copy p,
.played-card .stats,
.played-card .item-count,
.played-card .readiness { display: none; }
.empty-played {
    color: var(--dim);
    font-size: 8px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hand-zone { padding: 10px 12px 17px; border-radius: 12px; }
.hand-heading { display: flex; align-items: center; justify-content: space-between; }
.hand-heading p { color: var(--dim); font-size: 10px; }
.hand { display: flex; justify-content: center; gap: 10px; margin-top: 8px; overflow-x: auto; padding: 5px 2px 7px; }
.hand-card { width: 106px; height: 152px; }
.hand-card .card-art { height: 59px; }
.game-card.red { border-color: rgba(255,134,111,.65); }
.game-card.blue { border-color: rgba(101,184,255,.65); }
.game-card.green { border-color: rgba(123,221,174,.65); }
.game-card.violet { border-color: rgba(158,120,255,.72); }
.game-card.red .card-topline b, .game-card.red .stats { color: var(--red); }
.game-card.blue .card-topline b, .game-card.blue .stats { color: var(--blue); }
.game-card.green .card-topline b, .game-card.green .stats { color: var(--green); }
.game-card.violet .card-topline b, .game-card.violet .stats { color: var(--violet); }

.action-buttons { display: grid; gap: 8px; margin-top: 20px; }
.tip { display: flex; gap: 8px; margin-top: 28px; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.tip > span { color: var(--gold); }
.tip p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.color-key { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 4px; margin-top: 25px; color: var(--muted); font-size: 10px; }
.color-key .zone-label { grid-column: 1 / -1; }
.key-dot { width: 11px; height: 11px; margin: 0 6px 0 2px; border-radius: 4px 50% 50%; }
.battle-log { margin-top: 25px; }
.battle-log p { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.battle-log .ai-status { color: var(--glow); }
.hidden { display: none; }

.modal-backdrop {
    position: fixed;
    z-index: 10;
    inset: 0;
    display: none;
    place-items: center;
    padding: 24px;
    background: rgba(2,4,12,.77);
    backdrop-filter: blur(8px);
}
.modal-backdrop.open { display: grid; }
.rules-modal { position: relative; width: min(920px, 96vw); max-height: 90vh; padding: 28px; border-radius: 15px; }
.rules-modal h2 { margin: 8px 0 20px; color: var(--gold); }
.close-button { position: absolute; top: 12px; right: 14px; border: 0; color: var(--muted); background: transparent; font-size: 24px; }
.rules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rules-grid article { padding: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.rules-grid b { color: var(--glow); font-size: 10px; }
.rules-grid h3 { margin: 7px 0 5px; color: var(--gold); font-size: 13px; }
.rules-grid p, .rules-note { color: var(--muted); font-size: 11px; line-height: 1.55; }
.rules-note { margin-top: 15px; }
.rules-toolbar { display: flex; gap: 8px; margin-bottom: 14px; }
.rules-tab {
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--muted);
    background: rgba(255,255,255,.025);
    font-size: 10px;
}
.rules-tab.active { border-color: rgba(128,232,213,.42); color: var(--glow); background: rgba(128,232,213,.09); }
#rulesSearch {
    min-width: 220px;
    margin-left: auto;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 4px;
    outline: 0;
    color: var(--ink);
    background: rgba(4,8,20,.62);
    font: inherit;
    font-size: 11px;
}
#rulesSearch:focus { border-color: rgba(128,232,213,.52); }
.rules-scroll { max-height: 66vh; overflow-y: auto; padding-right: 8px; }
.rule-section { padding: 14px 4px; border-top: 1px solid var(--line); }
.rule-section:first-child { border-top: 0; }
.rule-section h3 { color: var(--gold); font-size: 15px; }
.rule-section h4 { margin: 12px 0 0; color: var(--glow); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.rule-section p, .rule-section li { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.rule-section ul { margin: 4px 0 0; padding-left: 18px; }
.rules-note code { color: var(--glow); }
#decisionModal {
    position: fixed;
    z-index: 20;
    bottom: 0;
    left: 0;
    right: 0;
    inset: auto 0 0;
    display: none;
    justify-content: center;
    padding: 0 16px 16px;
    background: linear-gradient(to top, rgba(2,4,12,.96) 60%, transparent);
    pointer-events: none;
}
#decisionModal.open { display: flex; pointer-events: auto; }
.decision-modal { width: min(560px, 100%); padding: 20px 24px; border-radius: 14px 14px 10px 10px; text-align: center; }
.decision-modal h2 { margin: 4px 0 2px; color: var(--gold); font-size: 15px; }
.decision-modal p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.decision-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; justify-content: center; }
.result-modal .primary-button { margin-top: 18px; }
.welcome-modal { width: min(520px, 92vw); }
.welcome-steps { display: grid; gap: 8px; margin: 18px 0; text-align: left; }
.welcome-steps span { padding: 9px 10px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.025); font-size: 11px; }
.welcome-steps b { display: inline-grid; width: 19px; height: 19px; margin-right: 7px; place-items: center; border-radius: 50%; color: var(--glow); background: rgba(128,232,213,.1); font-size: 10px; }
.toss-modal { width: min(390px, 90vw); }
.toss-coin {
    display: grid;
    width: 86px;
    height: 86px;
    margin: 8px auto 14px;
    place-items: center;
    border: 2px solid rgba(244,211,139,.72);
    border-radius: 50%;
    color: var(--gold);
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.2), rgba(244,211,139,.13) 42%, rgba(6,14,30,.9) 72%);
    box-shadow: 0 0 34px rgba(244,211,139,.22), inset 0 0 18px rgba(128,232,213,.18);
    font-family: "Cinzel", serif;
    font-size: 34px;
    font-weight: 700;
    animation: tossFlip 1.15s cubic-bezier(.18,.82,.3,1.08) both, tossGlow 1.15s ease-in-out both;
}
.toss-modal h2 { animation: tossReveal .38s ease .78s both; }
.toss-modal p { animation: tossReveal .38s ease .9s both; }
.history-modal { position: relative; width: min(760px, 94vw); padding: 25px; border-radius: 15px; }
.history-modal h2 { margin: 7px 0; color: var(--gold); }
.history-event { color: var(--muted); font-size: 12px; line-height: 1.55; }
.replay-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0; }
.replay-controls span { min-width: 130px; color: var(--glow); font-size: 11px; text-align: center; }
.replay-turn-select {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.replay-turn-select select {
    min-width: 120px;
    padding: 8px 9px;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--ink);
    background: rgba(4,8,20,.72);
    font: inherit;
    font-size: 10px;
    letter-spacing: 0;
}
.export-button { display: block; margin: 0 auto 14px; }
.replay-players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.replay-player { padding: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.replay-player h3 { color: var(--gold); font-size: 14px; }
.replay-player p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.replay-log { max-height: 170px; margin-top: 12px; overflow-y: auto; }
.replay-log p { padding: 7px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

.toast {
    position: fixed;
    z-index: 20;
    right: 20px;
    bottom: 20px;
    padding: 11px 14px;
    border: 1px solid rgba(128,232,213,.32);
    border-radius: 5px;
    color: var(--glow);
    background: rgba(9,17,31,.95);
    font-size: 11px;
    opacity: 0;
    transform: translateY(7px);
    transition: .2s;
    pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

@keyframes targetPulse {
    50% { box-shadow: 0 0 28px rgba(244,211,139,.42); }
}

@keyframes playedPulse {
    0%, 100% { transform: translateY(-2px); }
    50% { transform: translateY(-6px); }
}

@keyframes tossFlip {
    0% { transform: translateY(26px) rotateY(0deg) scale(.82); opacity: .2; }
    44% { transform: translateY(-20px) rotateY(720deg) scale(1.05); opacity: 1; }
    100% { transform: translateY(0) rotateY(1080deg) scale(1); opacity: 1; }
}

@keyframes tossGlow {
    45% { box-shadow: 0 0 54px rgba(128,232,213,.38), inset 0 0 24px rgba(244,211,139,.24); }
}

@keyframes tossReveal {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-height: 850px) {
    .game-shell { transform: scale(.88); transform-origin: top center; width: 113.6%; margin-left: -6.8%; }
}