*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface2: #334155;
  --surface3: #475569;
  --accent: #6366f1;
  --accent-hover: #818cf8;
  --success: #22c55e;
  --danger: #ef4444;
  --warn: #f59e0b;
  --info: #38bdf8;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --radius: 12px;
}

body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; }
#app { min-height: 100vh; }

.language-screen { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 28px 20px; overflow-y: auto; background: radial-gradient(ellipse at 15% 20%, #37628d 0, transparent 50%), radial-gradient(ellipse at 90% 90%, #234c77 0, transparent 45%), #102a50; isolation: isolate; }
.language-screen::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(#c5e6ef26 1px, transparent 1px); background-size: 24px 24px; }
.language-panel { position: relative; width: min(100%, 660px); padding: 30px 42px 24px; text-align: center; color: #17345c; background: #fffaf0; border: 1px solid #fff; border-radius: 28px; box-shadow: 0 30px 90px #06162e66, 0 8px 0 #b9c9d329; animation: languageEntrance .55s ease-out both; }
.language-cover { display: block; width: min(100%, 290px); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 8px 5px #17345c12); }
.language-kicker { color: #ab4b13; font-size: .68rem; font-weight: 800; letter-spacing: .22em; margin-bottom: 12px; }
.language-panel h1 { font-size: clamp(1.65rem, 4.5vw, 2.25rem); line-height: 1.15; font-weight: 850; letter-spacing: -.035em; }
.language-panel h1 > span { display: block; margin-top: 8px; color: #526b84; font-size: .53em; font-weight: 500; letter-spacing: 0; }
.language-subtitle { margin: 18px 0 26px; color: #526b84; font-size: .9rem; line-height: 1.55; }
.language-subtitle > span { display: block; font-size: .85em; }
.language-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
.language-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px 20px; color: #17345c; background: #fff; border: 2px solid #dce3e7; border-radius: 18px; box-shadow: 0 5px 0 #e6e9e9; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.language-option:hover { transform: translateY(-5px); border-color: #a9bac9; box-shadow: 0 9px 0 #e6e9e9, 0 12px 25px #17345c12; }
.language-option[aria-pressed="true"] { background: #fff5e7; border-color: #f47b20; box-shadow: 0 5px 0 #f47b2026; }
.language-option:focus-visible { outline: 3px solid #f47b20; outline-offset: 4px; }
.language-option:active { transform: translateY(0); box-shadow: 0 2px 0 #f47b2026; }
.language-option:disabled { cursor: wait; opacity: .65; }
.language-flag { display: block; border-radius: 7px; overflow: hidden; border: 1px solid #17345c16; box-shadow: 0 4px 8px #17345c14; }
.language-flag img { display: block; width: 72px; height: 48px; object-fit: cover; }
.language-option-copy { display: flex; flex-direction: column; gap: 6px; }
.language-option-copy strong { font-size: 1.05rem; font-weight: 800; }
.language-option-copy > span { color: #526b84; font-size: .8rem; }
.language-arrow { position: absolute; top: 22px; right: 18px; display: grid; place-items: center; width: 30px; height: 30px; color: transparent; background: #f1f5f7; border: 1px solid #dce3e7; border-radius: 50%; font-size: 1.1rem; transition: color .18s ease, background .18s ease; }
.language-option[aria-pressed="true"] .language-arrow { color: #fff; background: #f47b20; border-color: #f47b20; }
.language-submit { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; margin-top: 24px; padding: 15px 20px; border: none; border-radius: 12px; background: #f47b20; color: #17345c; font-size: .95rem; font-weight: 800; box-shadow: 0 4px 0 #b95311; transition: background .18s ease; }
.language-submit:hover:not(:disabled) { background: #ffab57; }
.language-submit:focus-visible { outline: 3px solid #f47b20; outline-offset: 5px; }
.language-submit:disabled { background: #e3e8ec; color: #748596; box-shadow: none; cursor: not-allowed; }
.language-footer { margin-top: 26px; color: #617890; font-size: .65rem; font-weight: 700; letter-spacing: .08em; }
.language-footer > span { margin: 0 6px; color: #c2ccd5; }
@keyframes languageEntrance { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .language-screen { padding: 18px 14px; }
  .language-panel { padding: 24px 20px 20px; border-radius: 22px; }
  .language-cover { width: 220px; }
  .language-actions { grid-template-columns: 1fr; gap: 12px; }
  .language-option { flex-direction: row; align-items: center; gap: 16px; padding: 18px 16px; }
  .language-option-copy strong { font-size: .95rem; }
  .language-arrow { top: 50%; right: 12px; transform: translateY(-50%); width: 25px; height: 25px; }
  .language-option-copy { padding-right: 20px; }
  .language-flag { flex-shrink: 0; }
  .language-flag img { width: 57px; height: 38px; }
  .language-subtitle { margin: 16px 0 22px; }
  .language-footer { margin-top: 22px; }
}
@media (max-height: 600px) and (min-width: 481px) {
  .language-panel { padding-top: 20px; }
  .language-cover { width: 150px; margin-bottom: 6px; }
  .language-subtitle { margin: 12px 0 18px; }
  .language-option { flex-direction: row; align-items: center; gap: 12px; padding: 20px 16px; }
  .language-option-copy { padding-right: 12px; }
  .language-option-copy strong { font-size: .9rem; }
  .language-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .language-panel { animation: none; }
  .language-option, .language-arrow { transition: none; }
}

/* ── Screens ── */
.screen { display: none; padding: 20px; min-height: 100vh; }
.screen.active { display: block; }

/* ── Card panel ── */
.card-panel { background: var(--surface); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; }
.card-panel.center { max-width: 540px; margin: 40px auto; text-align: center; }
.card-panel h1 { font-size: 1.9rem; margin-bottom: 8px; }
.card-panel h2 { font-size: 1.35rem; margin-bottom: 14px; }
.card-panel h3 { font-size: 0.95rem; color: var(--muted); margin-bottom: 10px; }

.subtitle { color: var(--muted); margin-bottom: 18px; font-size: 0.93rem; }

/* ── Layout ── */
.main-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; max-width: 960px; margin: 0 auto; }
@media (max-width: 680px) { .main-layout { grid-template-columns: 1fr; } }

/* ── Top bar ── */
.top-bar { display: flex; align-items: center; gap: 10px; max-width: 960px; margin: 0 auto 14px; flex-wrap: wrap; }
.round-label { color: var(--muted); font-size: 0.88rem; }
.demand-badge { background: var(--accent); color: #fff; padding: 5px 16px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }
.room-chip { background: var(--surface2); color: var(--muted); padding: 4px 12px; border-radius: 999px; font-size: 0.76rem; font-family: monospace; letter-spacing: 0.05em; }
.money-chip { background: var(--surface2); color: var(--success); padding: 4px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; }

/* ── Home ── */
.home-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.divider { color: var(--muted); font-size: 0.82rem; position: relative; text-align: center; }
.divider::before, .divider::after { content: ''; position: absolute; top: 50%; width: 42%; height: 1px; background: var(--surface2); }
.divider::before { left: 0; } .divider::after { right: 0; }
.join-row { display: flex; gap: 8px; }
.join-row .code-input { flex: 1; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
#room-list-section { text-align: left; margin-top: 8px; }
.room-list-item { display: flex; align-items: center; justify-content: space-between; background: var(--surface2); border-radius: 8px; padding: 9px 12px; margin-bottom: 6px; font-size: 0.88rem; }
.room-list-code { font-family: monospace; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); }
.room-list-meta { color: var(--muted); font-size: 0.78rem; }
.btn-join-quick { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 5px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.btn-join-quick:hover { background: var(--accent-hover); }
.btn-join-quick:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Room code ── */
.room-code-display { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--surface2); border-radius: 10px; padding: 12px 18px; margin-bottom: 18px; }
.room-label { color: var(--muted); font-size: 0.78rem; }
.room-code-value { font-family: monospace; font-size: 1.5rem; font-weight: 800; letter-spacing: 0.15em; color: var(--accent); }

/* ── Forms ── */
.form-group { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; text-align: left; }
.form-label { font-size: 0.82rem; color: var(--muted); margin-bottom: 5px; display: block; }
input[type="text"], input[type="number"] { background: var(--surface2); border: 1px solid #475569; color: var(--text); border-radius: 8px; padding: 9px 12px; font-size: 1rem; width: 100%; outline: none; transition: border-color 0.15s; }
input:focus { border-color: var(--accent); }
.form-group label { font-size: 0.82rem; color: var(--muted); }

.number-row { display: flex; align-items: center; gap: 7px; }
.number-row input { text-align: center; width: 76px; flex-shrink: 0; }
.btn-num { background: var(--surface2); border: none; color: var(--text); border-radius: 8px; padding: 7px 12px; cursor: pointer; font-size: 0.92rem; transition: background 0.15s; }
.btn-num:hover { background: #475569; }
.btn-num:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Buttons ── */
button { cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 10px 24px; font-size: 0.97rem; font-weight: 600; transition: background 0.15s, opacity 0.15s; margin-top: 8px; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-secondary { background: var(--surface2); color: var(--text); border: none; border-radius: 8px; padding: 10px 20px; font-size: 0.97rem; font-weight: 600; transition: background 0.15s; margin-top: 8px; }
.btn-secondary:hover { background: #475569; }
.btn-ghost { background: transparent; color: var(--muted); border: 1px solid #475569; border-radius: 8px; padding: 6px 14px; font-size: 0.83rem; transition: border-color 0.15s, color 0.15s; margin-top: 4px; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost.small { padding: 3px 9px; font-size: 0.72rem; margin-top: 0; }
.hidden { display: none !important; }
.hint { color: var(--muted); font-size: 0.8rem; margin-top: 8px; }

/* ── Player list ── */
.player-list { display: flex; flex-direction: column; gap: 7px; }
.player-row { display: flex; align-items: flex-start; justify-content: space-between; background: var(--surface2); border-radius: 8px; padding: 9px 12px; font-size: 0.88rem; }
.player-row.bankrupt { opacity: 0.45; }
.player-row .pname { font-weight: 600; }
.player-row .pmeta { color: var(--muted); font-size: 0.77rem; margin-top: 2px; }
.badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.badge-ready { background: var(--success); color: #fff; }
.badge-waiting { background: var(--surface); color: var(--muted); border: 1px solid #475569; }
.badge-host { background: var(--warn); color: #000; }
.badge-bankrupt { background: var(--danger); color: #fff; }
.badge-boikot { background: #7c3aed; color: #fff; }
.badge-kppu-out { background: var(--danger); color: #fff; }

/* ── Info / warn boxes ── */
.warn-box { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 9px 13px; color: var(--danger); font-size: 0.88rem; margin-bottom: 10px; }
.info-box { background: rgba(56,189,248,0.09); border: 1px solid rgba(56,189,248,0.25); border-radius: 8px; padding: 9px 13px; color: var(--info); font-size: 0.85rem; }

/* ── Cost preview ── */
.cost-preview { background: var(--surface2); border-radius: 8px; padding: 9px 12px; font-size: 0.85rem; color: var(--muted); margin-bottom: 10px; min-height: 36px; }

/* ── Demand card big ── */
.demand-card-big { background: linear-gradient(135deg, var(--accent) 0%, #7c3aed 100%); border-radius: 16px; padding: 36px 48px; display: inline-block; margin: 16px auto; }
.demand-card-big .demand-num { font-size: 5rem; font-weight: 900; line-height: 1; }
.demand-card-big .demand-sub { font-size: 0.95rem; color: rgba(255,255,255,0.75); margin-top: 4px; }

/* ── Action cards / hand ── */
.hand-display { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hand-display.inline-hand { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.action-card {
  background: var(--surface2);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 11px 13px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.82rem;
  width: 200px;
  text-align: left;
  user-select: none;
}
.action-card:hover { border-color: var(--accent); }
.action-card.selected { border-color: var(--accent); background: rgba(99,102,241,0.18); }
.action-card.kppu-card { border-color: var(--warn); }
.action-card.kppu-card:hover, .action-card.kppu-card.selected { background: rgba(245,158,11,0.15); }
.action-card .card-label { font-weight: 700; color: var(--text); margin-bottom: 3px; font-size: 0.88rem; }
.action-card .card-type { color: var(--muted); font-size: 0.7rem; margin-bottom: 6px; }
.action-card .card-desc { color: #cbd5e1; font-size: 0.75rem; line-height: 1.4; border-top: 1px solid #475569; padding-top: 6px; margin-top: 4px; }
.card-type-kartel    { color: #f472b6; }
.card-type-monopoli  { color: #fb923c; }
.card-type-oligopoli { color: #a78bfa; }
.card-type-kppu      { color: var(--warn); }
.no-cards-hint { color: var(--muted); font-size: 0.82rem; padding: 8px 0; }
.action-card.card-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Turn indicator ── */
.turn-indicator { background: var(--surface2); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 0.9rem; }
.turn-indicator.my-turn { background: rgba(99,102,241,0.2); border: 1px solid var(--accent); color: var(--accent); font-weight: 700; }

/* ── Target picker ── */
.target-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.target-btn { background: var(--surface2); border: 2px solid transparent; border-radius: 8px; padding: 8px 12px; text-align: left; font-size: 0.88rem; color: var(--text); cursor: pointer; transition: border-color 0.15s; }
.target-btn:hover { border-color: var(--accent); }
.target-btn.selected { border-color: var(--accent); background: rgba(99,102,241,0.15); }

/* ── KPPU banner ── */
.kppu-banner { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.4); border-radius: 10px; padding: 14px 18px; margin-bottom: 14px; max-width: 960px; margin-left: auto; margin-right: auto; }
.kppu-banner strong { color: var(--warn); display: block; margin-bottom: 4px; }

/* ── Violation display ── */
.violation-box { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 8px; padding: 10px 13px; font-size: 0.85rem; color: var(--danger); }

/* ── Results ── */
#results-table { margin: 14px 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
th { text-align: left; padding: 7px 10px; color: var(--muted); border-bottom: 1px solid #334155; }
td { padding: 9px 10px; border-bottom: 1px solid #1e293b; }
tr:last-child td { border-bottom: none; }
.win-row { background: rgba(34,197,94,0.07); }
.profit-pos { color: var(--success); font-weight: 600; }
.profit-neg { color: var(--danger); font-weight: 600; }

/* ── Scoreboard ── */
#scoreboard, #final-scoreboard { margin: 16px 0; }
.score-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--surface2); border-radius: 8px; margin-bottom: 7px; }
.score-row.bankrupt-row { opacity: 0.45; }
.score-rank { color: var(--muted); font-size: 0.82rem; width: 26px; }
.score-name { font-weight: 600; flex: 1; text-align: left; padding: 0 8px; font-size: 0.9rem; }
.score-money { font-weight: 700; font-size: 0.9rem; }
.score-money.positive { color: var(--success); }
.score-money.negative { color: var(--danger); }

/* ── Toast ── */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--danger); color: #fff; padding: 11px 22px; border-radius: 8px; font-size: 0.92rem; z-index: 999; animation: fadeIn 0.2s; white-space: nowrap; }
.toast.success { background: var(--success); }

/* Immersive market-board theme */
:root {
  --bg: #070b14;
  --surface: rgba(17, 25, 42, .92);
  --surface2: #18243a;
  --surface3: #263650;
  --accent: #f4b942;
  --accent-hover: #ffd36e;
  --success: #37d996;
  --danger: #ff5d6c;
  --warn: #f4b942;
  --info: #54c7ec;
  --text: #f7f4ec;
  --muted: #91a0b9;
  --radius: 18px;
}

body {
  background:
    radial-gradient(circle at 15% 5%, rgba(39, 111, 126, .22), transparent 30rem),
    radial-gradient(circle at 90% 85%, rgba(244, 185, 66, .12), transparent 34rem),
    #070b14;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.ambient-grid { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.ambient-grid::before, .ambient-grid::after { content: ""; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(84,199,236,.12); border-radius: 50%; filter: blur(1px); }
.ambient-grid::before { top: -280px; right: -90px; box-shadow: 0 0 80px rgba(84,199,236,.08); }
.ambient-grid::after { bottom: -310px; left: -100px; border-color: rgba(244,185,66,.12); }

.screen { padding: clamp(16px, 3vw, 36px); animation: screenIn .36s ease both; }
.screen.active { display: block; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } }

.card-panel {
  position: relative; background: linear-gradient(145deg, rgba(24,36,58,.96), rgba(12,19,33,.96));
  border: 1px solid rgba(255,255,255,.09); box-shadow: 0 24px 70px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px); overflow: hidden;
}
.card-panel::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; }
.card-panel.center { max-width: 620px; margin: clamp(24px, 7vh, 72px) auto; padding: clamp(24px, 5vw, 46px); }
.card-panel h1 { font-size: clamp(2rem, 6vw, 3.6rem); letter-spacing: -.055em; line-height: .95; }
.card-panel h1 span { display: block; color: var(--accent); }
.card-panel h2 { font-size: clamp(1.35rem, 3vw, 2rem); }
.eyebrow { color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .22em; margin: 14px 0 10px; }
.brand-mark { width: 68px; height: 68px; margin: 0 auto; display: grid; place-items: center; border: 1px solid rgba(244,185,66,.45); transform: rotate(45deg); background: linear-gradient(145deg,#24344e,#101827); box-shadow: 0 0 40px rgba(244,185,66,.14); }
.brand-mark span { transform: rotate(-45deg); color: var(--accent); font: 900 2rem Georgia, serif; }
.subtitle { max-width: 430px; margin: 18px auto 22px; line-height: 1.65; }
.feature-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.feature-strip span { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); color: #bac5d7; font-size: .72rem; }

.main-layout { max-width: 1120px; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr); gap: 20px; }
.top-bar { max-width: 1120px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(12,19,33,.78); backdrop-filter: blur(14px); }
.top-bar > :last-child { margin-left: auto; }
.round-label { color: var(--text); font-weight: 800; letter-spacing: .03em; }
.room-chip, .money-chip, .demand-badge { border: 1px solid rgba(255,255,255,.08); padding: 7px 13px; }
.money-chip { color: var(--success); }
.demand-badge { background: rgba(244,185,66,.12); color: var(--accent); }

input[type="text"], input[type="number"] { background: rgba(4,8,16,.58); border: 1px solid rgba(145,160,185,.25); padding: 12px 14px; border-radius: 10px; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,185,66,.12); }
button { letter-spacing: .01em; }
.btn-primary { color: #181109; background: linear-gradient(135deg, #ffd36e, #e5a72d); border-radius: 10px; box-shadow: 0 8px 24px rgba(244,185,66,.18); }
.btn-primary:hover { background: linear-gradient(135deg,#ffe49b,#f4b942); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(244,185,66,.25); }
.btn-secondary, .btn-num { background: #22314b; border: 1px solid rgba(255,255,255,.08); }
.btn-secondary:hover, .btn-num:hover { background: #30425f; transform: translateY(-1px); }
.btn-primary, .btn-secondary, .btn-num, .btn-ghost { transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.button-pop { animation: buttonPop .22s ease; }
@keyframes buttonPop { 50% { transform: scale(.96); } }

.player-row { align-items: center; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 11px 13px; transition: transform .18s, border-color .18s; }
.player-row:hover { transform: translateX(3px); border-color: rgba(244,185,66,.25); }
.player-row .pname::before { content: "●"; color: var(--success); margin-right: 8px; font-size: .55rem; vertical-align: middle; }
.badge { padding: 4px 8px; letter-spacing: .035em; }
.badge-turn { color: #1b1205; background: var(--accent); box-shadow: 0 0 16px rgba(244,185,66,.28); }
.player-row.active-turn-player { position: relative; border-color: var(--accent); background: linear-gradient(90deg,rgba(244,185,66,.16),rgba(255,255,255,.035)); box-shadow: 0 0 0 1px rgba(244,185,66,.13),0 8px 24px rgba(0,0,0,.2); animation: activePlayerPulse 1.7s ease-in-out infinite; }
.player-row.active-turn-player::before { content: ""; position: absolute; left: -4px; top: 20%; bottom: 20%; width: 3px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.player-row.active-turn-player .pname::before { color: var(--accent); box-shadow: 0 0 8px var(--accent); }
@keyframes activePlayerPulse { 50% { border-color: #ffe093; box-shadow: 0 0 22px rgba(244,185,66,.16); } }

.last-card-panel { margin-top: 16px; padding: 14px; border: 1px solid rgba(84,199,236,.26); border-radius: 12px; background: linear-gradient(145deg,rgba(31,61,77,.55),rgba(10,21,34,.72)); animation: lastCardIn .36s ease both; }
.last-card-kicker { display: block; margin-bottom: 12px; color: var(--info); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.last-card-content { display: flex; align-items: center; gap: 10px; }
.last-card-symbol { width: 38px; height: 48px; display: grid; place-items: center; flex: 0 0 38px; color: var(--info); font-size: 1.3rem; border: 1px solid currentColor; border-radius: 6px; background: rgba(0,0,0,.2); }
.last-card-content div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.last-card-content strong { color: var(--text); font: 700 1.28rem Georgia,serif; }
.last-card-content div span { color: var(--muted); font-size: .88rem; line-height:1.45; }.last-card-content div span b { color:var(--text); }.last-card-content .last-card-target { margin-top:3px; color:#ffbd70; }
.last-card-panel p { margin-top: 12px; padding-top: 11px; color: #c1cad8; font-size: .86rem; line-height: 1.55; border-top: 1px solid rgba(255,255,255,.08); }
.last-card-panel.dangerous { border-color: rgba(255,93,108,.35); background: linear-gradient(145deg,rgba(86,25,37,.52),rgba(25,9,15,.7)); }
.last-card-panel.dangerous .last-card-kicker,.last-card-panel.dangerous .last-card-symbol { color: var(--danger); }
.last-card-panel.kppu { border-color: rgba(84,199,236,.5); box-shadow: 0 0 22px rgba(84,199,236,.08); }
@keyframes lastCardIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.action-card { position: relative; width: 210px; min-height: 188px; padding: 17px; border-radius: 14px; background: linear-gradient(145deg,#263650,#121b2c); border: 1px solid rgba(255,255,255,.13); box-shadow: 0 12px 24px rgba(0,0,0,.25); overflow: hidden; }
.action-card::after { content: "KPPU"; position: absolute; right: -11px; bottom: 8px; font-size: 2.1rem; font-weight: 900; color: rgba(255,255,255,.035); transform: rotate(-90deg); }
.action-card:hover { transform: translateY(-7px) rotate(-1deg); border-color: var(--accent); box-shadow: 0 20px 35px rgba(0,0,0,.35), 0 0 0 1px rgba(244,185,66,.12); }
.action-card.selected { transform: translateY(-8px); border-color: var(--accent); background: linear-gradient(145deg,#3a3a3c,#2a2215); box-shadow: 0 0 0 3px rgba(244,185,66,.15),0 20px 35px rgba(0,0,0,.35); }
.action-card .card-label { font-family: Georgia, serif; font-size: 1.08rem; color: #fff8e8; }
.action-card .card-type { text-transform: uppercase; letter-spacing: .13em; font-weight: 800; }
.action-card .card-desc { border-color: rgba(255,255,255,.1); color: #b8c4d6; line-height: 1.52; }
.action-card.kppu-card { background: linear-gradient(145deg,#57431b,#17140d); }

.demand-card-big { position: relative; min-width: 230px; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(145deg,#176676,#0b2837); box-shadow: 0 24px 60px rgba(15,129,151,.28); transform: rotate(-1deg); }
.demand-card-big::before { content: "MARKET DEMAND"; display: block; color: rgba(255,255,255,.55); font-size: .65rem; font-weight: 800; letter-spacing: .2em; margin-bottom: 12px; }
.demand-card-big .demand-num { color: #fff; text-shadow: 0 5px 20px rgba(0,0,0,.3); }

/* Action cards are visibly dealt after the market demand is revealed. */
#screen-demand_reveal .card-panel { max-width: 880px; }
.action-card-deal { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(12px); transition: max-height .45s ease, opacity .35s ease, transform .45s ease; }
.action-card-deal.active { max-height: 520px; margin-top: 18px; opacity: 1; transform: none; }
.deal-heading { display: flex; flex-direction: column; gap: 4px; }
.deal-heading span { color: var(--accent); font-size: .63rem; font-weight: 900; letter-spacing: .2em; }
.deal-heading strong { color: var(--text); font-size: clamp(.95rem,2.5vw,1.15rem); }
.deal-stage { position: relative; min-height: 210px; margin-top: 12px; padding: 94px 8px 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 16px; background: radial-gradient(circle at 50% 33%,rgba(244,185,66,.1),transparent 28%),rgba(3,8,16,.3); }
.deal-deck { position: absolute; top: 18px; left: 50%; width: 48px; height: 66px; transform: translateX(-50%); }
.deal-deck i, .dealt-action-card, .deal-player-hand i { display: block; border: 2px solid #ffe49a; border-radius: 6px; background: repeating-linear-gradient(45deg,#146878 0 5px,#0a3545 5px 10px); box-shadow: 0 5px 12px rgba(0,0,0,.35),inset 0 0 0 2px rgba(255,255,255,.08); }
.deal-deck i { position: absolute; inset: 0; }
.deal-deck i:nth-child(1) { transform: translate(-5px,3px) rotate(-5deg); }
.deal-deck i:nth-child(2) { transform: translate(4px,2px) rotate(4deg); }
.deal-deck span { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; color: #ffe49a; font-size: .5rem; font-weight: 900; letter-spacing: .08em; }
.deal-players { display: flex; justify-content: center; align-items: stretch; gap: 9px; flex-wrap: wrap; }
.deal-player { position: relative; width: min(142px,29%); min-width: 105px; padding: 10px 7px 8px; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.035); transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.deal-player.received-card { border-color: rgba(84,199,236,.38); background: rgba(84,199,236,.08); animation: dealPlayerPulse .38s ease; }
.deal-player-me { border-color: rgba(244,185,66,.35); background: rgba(244,185,66,.07); }
.deal-player-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #132033; font-size: .67rem; font-weight: 900; background: var(--accent); }
.deal-player strong { overflow: hidden; color: var(--text); font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.deal-player-hand { grid-column: 1 / -1; min-height: 27px; display: flex; justify-content: center; align-items: end; }
.deal-player-hand i { width: 19px; height: 27px; margin-left: -7px; transform: rotate(-5deg); animation: dealtCardLand .3s ease both; }
.deal-player-hand i:first-child { margin-left: 0; }
.deal-player-hand i:nth-child(even) { transform: rotate(5deg); }
.dealt-action-card { position: absolute; z-index: 20; left: 0; top: 0; width: 32px; height: 45px; pointer-events: none; animation: dealCardFly .68s cubic-bezier(.2,.72,.2,1) forwards; }
.deal-status { min-height: 18px; margin-top: 10px; color: var(--muted); font-size: .72rem; }
.deal-complete .deal-status { color: var(--success); font-weight: 700; }
@keyframes dealCardFly {
  0% { opacity: 0; transform: translate(calc(var(--deal-start-x) - 16px),calc(var(--deal-start-y) - 22px)) rotate(-12deg) scale(1.25); }
  15% { opacity: 1; }
  65% { transform: translate(calc(var(--deal-mid-x) - 16px),calc(var(--deal-mid-y) - 62px)) rotate(8deg) scale(1.08); }
  100% { opacity: 1; transform: translate(calc(var(--deal-end-x) - 16px),calc(var(--deal-end-y) - 22px)) rotate(var(--deal-rotate)) scale(.72); }
}
@keyframes dealPlayerPulse { 50% { transform: translateY(-3px) scale(1.025); } }
@keyframes dealtCardLand { from { opacity: 0; transform: translateY(-9px) scale(1.3); } }
@media (max-width: 520px) {
  .action-card-deal.active { max-height: 650px; }
  .deal-stage { min-height: 250px; padding-top: 91px; }
  .deal-player { width: 46%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dealt-action-card { animation-duration: .01ms; }
  .deal-player.received-card, .deal-player-hand i { animation: none; }
}
.turn-indicator.my-turn { color: var(--accent); border-color: rgba(244,185,66,.5); background: rgba(244,185,66,.1); animation: turnPulse 2s infinite; }
@keyframes turnPulse { 50% { box-shadow: 0 0 24px rgba(244,185,66,.12); } }

.room-code-display { background: rgba(4,8,16,.48); border: 1px dashed rgba(244,185,66,.35); }
.room-code-value { color: var(--accent); }
.score-row { border: 1px solid rgba(255,255,255,.06); margin-bottom: 6px; border-radius: 10px; background: rgba(255,255,255,.035); }
th { color: var(--accent); text-transform: uppercase; font-size: .68rem; letter-spacing: .08em; }
.toast { border: 1px solid rgba(255,255,255,.15); box-shadow: 0 18px 45px rgba(0,0,0,.4); }

@media (max-width: 680px) {
  .main-layout { grid-template-columns: 1fr; }
  .top-bar > :last-child { margin-left: 0; }
  .card-panel { padding: 19px; }
  .action-card { width: min(100%, 260px); min-height: 164px; }
  .hand-display { flex-wrap: nowrap; overflow-x: auto; padding: 6px 2px 18px; scroll-snap-type: x mandatory; }
  .action-card { flex: 0 0 230px; scroll-snap-align: start; }
  .number-row { flex-wrap: wrap; justify-content: center; }
  .feature-strip span { font-size: .66rem; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Live production warehouse */
.production-warehouse { margin: 18px 0 12px; padding: 16px 16px 10px; border: 1px solid rgba(84,199,236,.2); border-radius: 14px; background: linear-gradient(180deg,rgba(7,16,28,.88),rgba(13,24,39,.7)); box-shadow: inset 0 0 35px rgba(84,199,236,.035); }
.warehouse-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.warehouse-head > div { display: flex; flex-direction: column; gap: 3px; }
.warehouse-kicker { color: var(--info); font-size: .62rem; font-weight: 900; letter-spacing: .18em; }
#product-count-label { font-size: 1.08rem; }
.factory-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .7rem; padding: 5px 9px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; }
.factory-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.factory-status.running { color: var(--success); border-color: rgba(55,217,150,.24); background: rgba(55,217,150,.06); }
.factory-status.running::before { background: var(--success); box-shadow: 0 0 9px var(--success); animation: statusBlink 1.15s infinite; }
.factory-status.locked { color: var(--accent); }
.factory-status.locked::before { background: var(--accent); }
@keyframes statusBlink { 50% { opacity: .35; } }
.product-visual { min-height: 112px; display: grid; grid-template-columns: repeat(auto-fill,minmax(62px,1fr)); align-content: center; gap: 9px; }
.product-visual.empty { display: grid; place-items: center; }
.empty-production { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--muted); font-size: .76rem; }
.empty-factory { font-size: 2rem; filter: grayscale(.35); opacity: .55; }
.product-box { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--text); border: 1px solid rgba(244,185,66,.22); border-radius: 9px; background: linear-gradient(145deg,rgba(244,185,66,.14),rgba(122,77,20,.08)); animation: productArrive .38s cubic-bezier(.2,.9,.3,1.25) both; animation-delay: var(--product-delay); transition: transform .15s,border-color .15s,background .15s; }
.product-box:hover:not(:disabled) { transform: translateY(-4px) scale(1.04); border-color: var(--accent); background: rgba(244,185,66,.18); }
.product-box:active:not(:disabled) { transform: scale(.92); }
.product-box:disabled { cursor: default; opacity: .72; }
.product-icon { font-size: 1.7rem; line-height: 1; filter: drop-shadow(0 5px 5px rgba(0,0,0,.32)); }
.product-number { color: #c8b58c; font: 800 .58rem ui-monospace,monospace; }
.product-overflow { min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed rgba(145,160,185,.25); border-radius: 9px; color: var(--muted); }
.product-overflow strong { color: var(--accent); font-size: 1.1rem; }
.product-overflow span { font-size: .58rem; }
@keyframes productArrive { from { opacity: 0; transform: translateX(-16px) translateY(-8px) rotate(-8deg) scale(.72); } }
.conveyor { height: 13px; display: flex; justify-content: space-around; align-items: center; margin: 8px -5px 0; border-radius: 4px; background: linear-gradient(#35445b,#1b2739); border-top: 2px solid #53647d; overflow: hidden; }
.conveyor span { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #09101c; border: 1px solid #718198; }
.production-warehouse:has(.factory-status.running) .conveyor span { animation: conveyorRoll .8s linear infinite; }
@keyframes conveyorRoll { to { transform: rotate(360deg); } }
.warehouse-hint { margin-top: 7px; color: #697991; font-size: .64rem; text-align: center; }
.product-visual.locked + .conveyor { opacity: .55; }

@media (max-width: 480px) { .product-visual { grid-template-columns: repeat(4,1fr); } .warehouse-head { align-items: flex-start; } }

/* Dramatic action-card reveal */
.card-effect { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; visibility: hidden; pointer-events: none; }
.card-effect.active { visibility: visible; }
.effect-backdrop { position: absolute; inset: 0; background: radial-gradient(circle,rgba(16,26,43,.72),rgba(1,3,8,.94)); opacity: 0; }
.card-effect.active .effect-backdrop { animation: effectFadeIn .25s ease forwards; }
.effect-rays { position: absolute; width: min(90vw,700px); aspect-ratio: 1; opacity: 0; background: repeating-conic-gradient(from 0deg,rgba(244,185,66,.13) 0deg 5deg,transparent 5deg 15deg); mask-image: radial-gradient(circle,black 0 22%,transparent 68%); }
.card-effect.active .effect-rays { animation: rayReveal 1.9s ease-out forwards, raySpin 12s linear infinite; }
.effect-card { position: relative; width: min(78vw,340px); min-height: 430px; padding: 42px 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: white; border: 2px solid var(--accent); border-radius: 22px; background: linear-gradient(145deg,#293b58,#101827); box-shadow: 0 35px 100px rgba(0,0,0,.7),0 0 55px rgba(244,185,66,.3),inset 0 0 50px rgba(255,255,255,.04); opacity: 0; overflow: hidden; }
.effect-card::before { content: ""; position: absolute; inset: -60% -100%; background: linear-gradient(110deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%); transform: translateX(-45%); }
.card-effect.active .effect-card { animation: cardSlam .62s cubic-bezier(.16,.9,.25,1.2) forwards; }
.card-effect.active .effect-card::before { animation: cardShine 1s .4s ease forwards; }
.effect-kicker { color: var(--accent); font-size: .65rem; font-weight: 900; letter-spacing: .22em; }
.effect-icon { margin: 32px 0 24px; font-size: 5rem; line-height: 1; color: var(--accent); text-shadow: 0 0 30px currentColor; }
.effect-title { max-width: 100%; font: 800 clamp(2rem,7vw,3.2rem)/.98 Georgia,serif; text-wrap: balance; }
.effect-player { margin-top: 22px; color: #d7deea; font-size: 1.05rem; font-weight:600; }
.effect-target { margin-top:10px; padding:8px 16px; color:#221506; font-size:1.08rem; font-weight:900; border-radius:999px; background:var(--accent); box-shadow:0 5px 18px rgba(244,185,66,.25); }
.effect-danger .effect-target { color:#fff; background:#d93649; }.effect-kppu .effect-target { color:#06212b; background:#65ddff; }
.effect-danger .effect-card { border-color: #ff5d6c; background: linear-gradient(145deg,#4b1d28,#160b12); box-shadow: 0 35px 100px rgba(0,0,0,.7),0 0 65px rgba(255,40,65,.38); }
.effect-danger .effect-icon,.effect-danger .effect-kicker { color: #ff6977; }
.effect-danger .effect-rays { background: repeating-conic-gradient(rgba(255,55,75,.17) 0deg 5deg,transparent 5deg 15deg); }
.effect-kppu .effect-card { border-color: #54c7ec; background: linear-gradient(145deg,#164658,#071a26); box-shadow: 0 35px 100px rgba(0,0,0,.7),0 0 70px rgba(84,199,236,.45); }
.effect-kppu .effect-icon,.effect-kppu .effect-kicker { color: #65ddff; }
.card-effect.leaving { animation: effectLeave .35s ease forwards; }
@keyframes cardSlam { 0% { opacity: 0; transform: perspective(800px) translateY(-90px) rotateX(55deg) scale(1.7); } 65% { opacity: 1; transform: perspective(800px) translateY(8px) rotateX(-4deg) scale(.96); } 100% { opacity: 1; transform: none; } }
@keyframes cardShine { to { transform: translateX(65%); } }
@keyframes effectFadeIn { to { opacity: 1; } }
@keyframes rayReveal { 20% { opacity: 1; transform: scale(.6); } 100% { opacity: .3; transform: scale(1.25); } }
@keyframes raySpin { to { rotate: 360deg; } }
@keyframes effectLeave { to { opacity: 0; transform: scale(1.08); } }
@media (max-width:480px) { .effect-card { min-height: 390px; } }

/* Personal round reward reveal */
.round-reward { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; visibility: hidden; overflow: hidden; background: radial-gradient(circle at center,#172c3c 0,#070b14 63%); opacity: 0; }
.round-reward.active { visibility: visible; animation: rewardBackdropIn .35s ease forwards; }
.reward-content { position: relative; z-index: 2; width: min(88vw,520px); padding: 40px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.reward-kicker { color: var(--accent); font-size: .7rem; font-weight: 900; letter-spacing: .28em; }
.reward-emblem { width: 112px; height: 112px; margin: 25px 0; display: grid; place-items: center; color: #1a1205; font-size: 3.5rem; border: 4px solid #ffe297; border-radius: 50%; background: linear-gradient(145deg,#ffe68d,#d99618); box-shadow: 0 0 0 10px rgba(244,185,66,.08),0 0 70px rgba(244,185,66,.42); animation: rewardMedal 1s cubic-bezier(.16,.9,.25,1.2) both; }
.reward-content h2 { color: #fff; font-size: clamp(1.5rem,5vw,2.4rem); }
.reward-value { margin: 10px 0 24px; color: var(--success); font: 900 clamp(3.2rem,12vw,6.3rem)/1 ui-monospace,monospace; letter-spacing: -.08em; text-shadow: 0 0 35px rgba(55,217,150,.36); }
.reward-balance { min-width: min(82vw,320px); display: flex; justify-content: space-between; gap: 25px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.045); }
.reward-balance span { color: var(--muted); font-size: .75rem; }
.reward-balance strong { color: var(--text); }
.reward-progress { width: min(80vw,340px); height: 3px; margin-top: 30px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.1); }
.reward-progress span { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--accent); animation: rewardProgress 4s linear forwards; }
.reward-content > p { margin-top: 10px; color: var(--muted); font-size: .68rem; }
.reward-particles { position: absolute; inset: 0; background-image: radial-gradient(circle,var(--accent) 0 2px,transparent 3px),radial-gradient(circle,var(--success) 0 2px,transparent 3px); background-position: 10% 20%,80% 70%; background-size: 95px 95px,135px 135px; opacity: .18; animation: rewardParticles 5s linear infinite; }
.reward-negative { background: radial-gradient(circle at center,#35141b 0,#070b14 63%); }
.reward-negative .reward-emblem { color: #fff; border-color: #ff8994; background: linear-gradient(145deg,#ff6977,#8e1d2b); box-shadow: 0 0 0 10px rgba(255,93,108,.08),0 0 70px rgba(255,93,108,.35); }
.reward-negative .reward-value { color: var(--danger); text-shadow: 0 0 35px rgba(255,93,108,.36); }
.reward-negative .reward-kicker,.reward-negative .reward-progress span { color: var(--danger); background: var(--danger); }
.round-reward.leaving { animation: rewardLeave .45s ease forwards; }
@keyframes rewardBackdropIn { to { opacity: 1; } }
@keyframes rewardMedal { from { opacity: 0; transform: translateY(-80px) rotate(-25deg) scale(1.8); } 65% { transform: translateY(8px) rotate(4deg) scale(.92); } }
@keyframes rewardProgress { to { transform: scaleX(0); } }
@keyframes rewardParticles { to { background-position: 10% 115%,80% 165%; } }
@keyframes rewardLeave { to { opacity: 0; transform: scale(1.06); } }

/* Synchronized dice tie-break reveal */
.dice-reveal { position: fixed; inset: 0; z-index: 1350; display: grid; place-items: center; visibility: hidden; opacity: 0; overflow: hidden; background: radial-gradient(circle at 50% 35%,#25364f,#070b14 68%); }
.dice-reveal.active { visibility: visible; animation: rewardBackdropIn .3s ease forwards; }
.dice-content { width: min(92vw,760px); padding: 32px 20px; text-align: center; }
.dice-kicker { color: var(--accent); font-size: .65rem; font-weight: 900; letter-spacing: .23em; }
.dice-content h2 { margin: 8px 0; font-size: clamp(1.8rem,5vw,3rem); }
.dice-reason { color: var(--muted); font-size: .82rem; }
.dice-players { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 14px; margin: 30px 0; }
.dice-player { width: min(42vw,180px); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.045); opacity: 0; animation: dicePlayerIn .35s var(--dice-delay) ease forwards; }
.dice-player-name { max-width: 100%; color: var(--text); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dice-rolls { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.die { display: inline-block; color: #f7f4ec; font-size: 5rem; line-height: 1; filter: drop-shadow(0 12px 18px rgba(0,0,0,.5)); animation: diceRoll .85s cubic-bezier(.2,.8,.25,1) both; }
.die.reroll { margin-left: -6px; color: #aebbd0; font-size: 3rem; }
.die.reroll::before { content: "↻"; display: inline-block; margin-right: 2px; color: var(--muted); font: 700 .65rem sans-serif; vertical-align: middle; }
.dice-player strong { min-height: 17px; color: var(--muted); font-size: .67rem; }
.dice-player.dice-winner { border-color: var(--accent); background: rgba(244,185,66,.1); box-shadow: 0 0 35px rgba(244,185,66,.13); }
.dice-player.dice-winner .die { color: var(--accent); }
.dice-player.dice-winner strong { color: var(--accent); }
.dice-reveal:not(.dice-settled) .dice-player strong { opacity: 0; }
.dice-settled .dice-winner { animation: winnerDicePulse .7s ease both; }
.dice-progress { width: min(72vw,340px); height: 3px; margin: 0 auto; overflow: hidden; background: rgba(255,255,255,.1); border-radius: 5px; }
.dice-progress span { display: block; width: 100%; height: 100%; transform-origin: left; background: var(--accent); animation: diceProgress 3.5s linear forwards; }
.dice-note { margin-top: 10px; color: var(--muted); font-size: .68rem; }
.dice-reveal.leaving { animation: rewardLeave .4s ease forwards; }
@keyframes dicePlayerIn { from { transform: translateY(15px); } to { opacity: 1; transform: none; } }
@keyframes diceRoll { 0% { opacity: 0; transform: translateY(-120px) rotate(420deg) scale(.5); } 75% { opacity: 1; transform: translateY(7px) rotate(-18deg) scale(1.12); } 100% { opacity: 1; transform: none; } }
@keyframes winnerDicePulse { 50% { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 65px rgba(244,185,66,.28); } }
@keyframes diceProgress { to { transform: scaleX(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Multiplayer game table */
.game-table { width: min(960px, 100%); margin: 0 auto 22px; perspective: 1000px; }
.table-felt { position: relative; min-height: clamp(420px, 48vw, 480px); overflow: hidden; border: 10px solid #4a2d18; border-radius: 32px; background: radial-gradient(ellipse at center, rgba(255,235,194,.18), transparent 62%), repeating-linear-gradient(92deg, rgba(74,45,24,.13) 0 2px, transparent 2px 34px), linear-gradient(145deg,#ad7948,#82532e); box-shadow: inset 0 0 0 3px #d1a064, inset 0 0 65px rgba(51,28,12,.38), 0 22px 45px rgba(0,0,0,.35); transform: rotateX(2deg); }
.table-felt::after { content: ""; position: absolute; inset: 16px; pointer-events: none; border: 2px solid rgba(255,226,177,.3); border-radius: 20px; }
.table-center-card { position: absolute; z-index: 6; left: 50%; top: 50%; width: 170px; min-height: 108px; padding: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translate(-50%,-50%) rotate(-2deg); border: 3px solid #f4ead6; border-radius: 11px; color: #17231e; text-align: center; background: #fffaf0; box-shadow: 0 12px 24px rgba(0,0,0,.3); }
.table-center-card span { color: #9c332d; font-size: .6rem; font-weight: 900; letter-spacing: .18em; }
.table-center-card strong { margin: 4px 0; font: 800 1.25rem Georgia,serif; }
.table-center-card small { color: #52615a; }.table-center-card b { color: #087a4c; font-size: 1rem; }
.market-deck { display: none; }
.market-deck i { display:none }.table-seats { position:absolute; inset:0; z-index:3; }
.table-seat { position: absolute; left: var(--seat-x); top: var(--seat-y); width: 154px; display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 7px; transform: translate(-50%,-50%); transition: filter .2s; }
.seat-avatar { width: 42px; height: 42px; display:grid; place-items:center; border:3px solid rgba(255,255,255,.8); border-radius:50%; color:#fff; font-weight:900; background:linear-gradient(145deg,#ed9b3f,#a84433); box-shadow:0 5px 12px rgba(0,0,0,.35); }
.seat-info { min-width:0; padding:7px 9px; border-radius:9px; color:white; background:rgba(5,21,17,.82); box-shadow:0 5px 15px rgba(0,0,0,.25); }
.seat-info strong,.seat-info span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.seat-info strong { font-size:.76rem }.seat-info span { margin-top:2px; color:#bfdbce; font-size:.58rem; }
.seat-cards { position:absolute; left:50%; bottom:48px; display:flex; transform:translateX(-50%); }.seat-cards i { width:24px; height:34px; margin-left:-14px; border:2px solid #f4e7cf; border-radius:4px; background:repeating-linear-gradient(45deg,#9c332d 0 3px,#f3d9ca 3px 5px); box-shadow:0 3px 5px rgba(0,0,0,.25); }.seat-cards i:first-child { margin-left:0 }
.seat-products { position:absolute; z-index:0; left:50%; top:49px; min-width:90px; height:43px; display:flex; justify-content:center; align-items:flex-start; transform:translateX(-50%); pointer-events:none; }
.seat-lower .seat-products { top:auto; bottom:49px; align-items:flex-end; }.seat-lower .seat-cards { top:48px; bottom:auto; }
.seat-avatar,.seat-info { position:relative; z-index:1; }
.product-card { position:relative; width:30px; height:40px; margin-left:-17px; display:grid; place-items:center; border:2px solid #fff5d9; border-radius:5px; color:#674411; background:linear-gradient(145deg,#fff8d7,#efc861); box-shadow:0 4px 8px rgba(0,0,0,.35); transform:rotate(calc((var(--product-index) - 4) * 2deg)); transform-origin:50% 120%; }
.product-card:first-child { margin-left:0 }.product-card span { font-size:.85rem; filter:drop-shadow(0 1px #fff); }.seat-products b { position:absolute; right:-4px; bottom:-4px; min-width:23px; padding:3px 5px; border-radius:999px; color:#2a1b08; font-size:.58rem; background:#ffd766; box-shadow:0 3px 8px rgba(0,0,0,.3); }
.product-card-new { opacity:0; animation:dealProduct .62s cubic-bezier(.18,.75,.24,1.25) forwards; animation-delay:calc(var(--new-index) * 110ms); }
.seat-products.products-hidden em { width:30px; height:40px; display:grid; place-items:center; border:2px dashed rgba(255,255,255,.45); border-radius:5px; color:rgba(255,255,255,.7); font-style:normal; font-weight:900; background:rgba(3,32,21,.55); }
@keyframes dealProduct { 0% { opacity:0; transform:translate(-50vw,-120px) rotate(-24deg) scale(1.5); } 65% { opacity:1; transform:translateY(7px) rotate(calc((var(--product-index) - 4) * 2deg)) scale(.94); } 100% { opacity:1; transform:rotate(calc((var(--product-index) - 4) * 2deg)); } }
.seat-me .seat-avatar { background:linear-gradient(145deg,#f3cf67,#a26a16); }.seat-me .seat-info { outline:2px solid #f4c85b; }.seat-active { filter:drop-shadow(0 0 10px #ffe271); animation:seatTurn 1.4s ease-in-out infinite; }.seat-active .seat-info::before { content:"GILIRAN"; color:#ffd766; font-size:.48rem; font-weight:900; letter-spacing:.12em; }.seat-bankrupt { filter:grayscale(1); opacity:.55; }
@keyframes seatTurn { 50% { transform:translate(-50%,-50%) scale(1.05); } }
@media (max-width:760px) { .table-felt { min-height:360px; border-width:7px; border-radius:34px; }.table-seat { width:118px; grid-template-columns:34px 1fr; }.seat-avatar{width:34px;height:34px;font-size:.72rem}.seat-info{padding:5px}.seat-info span{display:none}.seat-cards{bottom:38px}.seat-lower .seat-cards{top:38px;bottom:auto}.seat-cards i{width:19px;height:28px}.seat-products{top:40px}.seat-lower .seat-products{top:auto;bottom:40px}.product-card{width:24px;height:33px;margin-left:-14px}.table-center-card{width:132px;min-height:90px}.market-deck{display:none}@keyframes seatTurn { 50% { transform:translate(-50%,-50%) scale(1.04); } } }
@media (max-width:480px) { .screen{padding:10px}.table-felt{min-height:330px}.table-seat{width:98px;grid-template-columns:30px 1fr;gap:3px}.seat-avatar{width:30px;height:30px;border-width:2px}.seat-info strong{font-size:.6rem}.table-center-card{width:112px;padding:9px}.table-center-card strong{font-size:1rem} }

/* Five-second profit calculation transition */
.profit-calculation { position:fixed; inset:0; z-index:1325; display:grid; place-items:center; visibility:hidden; opacity:0; color:#fff; background:radial-gradient(circle at 50% 42%,#123e36,#071019 68%); }
.profit-calculation.active { visibility:visible; animation:calculationIn .3s ease forwards; }.profit-calculation.leaving { animation:calculationOut .4s ease forwards; }
.calculation-content { width:min(88vw,560px); padding:36px 22px; text-align:center; }.calculation-kicker { color:var(--success); font-size:.65rem; font-weight:900; letter-spacing:.23em; }
.calculation-content h2 { margin:13px 0 9px; font-size:clamp(1.8rem,6vw,3.2rem); }.calculation-content p { color:#9ebbb2; font-size:.82rem; }
.calculation-coins { position:relative; width:130px; height:105px; margin:0 auto 25px; }.calculation-coins i { position:absolute; left:50%; bottom:0; width:62px; height:62px; border:4px solid #ffe39a; border-radius:50%; background:linear-gradient(145deg,#ffe27c,#c98713); box-shadow:0 0 30px rgba(244,185,66,.28); animation:coinCount 1.15s ease-in-out infinite; }.calculation-coins i::after { content:"Rp"; display:grid; height:100%; place-items:center; color:#55340a; font-weight:900; }.calculation-coins i:nth-child(2) { margin-left:-34px; animation-delay:.18s }.calculation-coins i:nth-child(3) { margin-left:34px; animation-delay:.36s }
.calculation-dots::after { content:""; animation:countingDots 1.2s steps(4,end) infinite; }.calculation-progress { width:min(75vw,380px); height:5px; margin:30px auto 0; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.1); }.calculation-progress span { display:block; width:100%; height:100%; transform-origin:left; background:linear-gradient(90deg,var(--success),var(--accent)); animation:profitProgress 5s linear forwards; }
@keyframes coinCount { 0%,100% { transform:translate(-50%,0) rotateY(0); } 50% { transform:translate(-50%,-22px) rotateY(180deg); } } @keyframes countingDots { 0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."} } @keyframes profitProgress { to{transform:scaleX(0)} } @keyframes calculationIn { to{opacity:1} } @keyframes calculationOut { to{opacity:0;transform:scale(1.04)} }

/* Reveal every player's production only after all players lock it */
.production-reveal { position:fixed; inset:0; z-index:1250; padding:clamp(12px,3vw,34px); visibility:hidden; opacity:0; overflow:auto; color:#fff; background:radial-gradient(circle at 50% 35%,#122b25,#050b12 72%); }
.production-reveal.active { visibility:visible; animation:calculationIn .3s ease forwards; }.production-reveal.leaving { animation:calculationOut .4s ease forwards; }
.production-reveal-head { margin-bottom:18px; text-align:center; }.production-reveal-head span { color:#ffd766; font-size:.65rem; font-weight:900; letter-spacing:.23em; }.production-reveal-head h2 { margin-top:7px; font-size:clamp(1.5rem,5vw,2.6rem); }
.production-reveal .game-table { margin-bottom:0; }.production-reveal .table-felt { min-height:min(62vh,520px); }.production-reveal .product-card-new { animation-duration:.7s; }
@media(max-width:600px){.production-reveal{padding:12px 8px}.production-reveal-head{margin-bottom:10px}.production-reveal .table-felt{min-height:390px}}

/* Playful tabletop presentation inspired by a friendly family board game. */
.game-table { width: min(1040px,100%); }
.table-felt {
  min-height: clamp(460px,52vw,570px);
  border: 8px solid #0874b9;
  border-radius: 34px;
  background:
    radial-gradient(circle at 20% 18%,rgba(255,255,255,.24) 0 2px,transparent 3px),
    radial-gradient(circle at 76% 25%,rgba(255,255,255,.16) 0 2px,transparent 3px),
    repeating-linear-gradient(3deg,transparent 0 31px,rgba(139,81,23,.055) 32px 34px),
    linear-gradient(145deg,#ffc878,#eaaa5d 55%,#f5bd70);
  box-shadow: inset 0 0 0 5px #69c6f0,inset 0 0 38px rgba(119,64,14,.18),0 22px 48px rgba(0,0,0,.35);
  transform: none;
}
.table-felt::before { content:""; position:absolute; inset:9px; z-index:0; pointer-events:none; border:2px solid rgba(255,247,218,.72); border-radius:24px; box-shadow:inset 0 0 30px rgba(255,255,255,.13); }
.table-felt::after { inset:19px; z-index:0; border:1px dashed rgba(146,78,22,.18); border-radius:20px; }
.board-decoration { position:absolute; z-index:8; pointer-events:none; filter:drop-shadow(0 5px 4px rgba(0,0,0,.18)); }
.board-leaves { top:-16px; left:-10px; font-size:4.4rem; transform:rotate(22deg); }
.board-cup { top:-8px; right:18px; font-size:3.4rem; transform:rotate(14deg); }
.board-pencil { bottom:-8px; left:8px; font-size:3.3rem; transform:rotate(-28deg); }
.board-note { right:-2px; bottom:-3px; padding:13px 11px; color:#2871a8; font:900 .62rem/1.05 "Comic Sans MS",cursive; text-align:center; background:#fff9dd; border-radius:4px 4px 15px 4px; transform:rotate(-9deg); box-shadow:0 5px 12px rgba(0,0,0,.2); }
.table-center-card { width:178px; min-height:132px; padding:18px 14px; border:0; border-radius:15px 15px 20px 20px; color:#102b4e; background:#fffdf2; box-shadow:0 7px 0 #e8e0bd,0 14px 24px rgba(74,43,16,.24); transform:translate(-50%,-50%) rotate(-1deg); }
.table-center-card::before,.table-center-card::after { content:""; position:absolute; top:-8px; width:35px; height:17px; background:#fffdf2; border-radius:50% 50% 0 0; }
.table-center-card::before { left:13px; transform:rotate(-11deg); }.table-center-card::after { right:13px; transform:rotate(11deg); }
.table-center-card span { color:#113963; font-size:.68rem; }
.table-center-card strong { margin:7px 0; color:#123b6b; font:900 1.35rem/1.05 "Segoe UI",sans-serif; }
.table-center-card small { color:#29496c; line-height:1.25; }.table-center-card b { display:inline-block; margin:1px 3px 0; color:#078753; font-size:1.75rem; line-height:1; }
.board-card-pile { position:absolute; z-index:5; top:50%; width:54px; height:76px; transform:translate(-50%,-50%); }
.board-card-pile i { position:absolute; inset:0; border:3px solid #fff; border-radius:8px; box-shadow:0 5px 10px rgba(65,35,12,.28); }
.board-card-pile span { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:1.35rem; }
.board-card-pile small { position:absolute; top:82px; left:50%; color:#5b3c20; font-size:.58rem; font-weight:800; transform:translateX(-50%); }
.board-discard { left:71%; border:3px dashed rgba(255,255,255,.75); border-radius:8px; }
.board-discard i { inset:auto; left:0; top:0; width:100%; height:100%; border-color:#fff; background:repeating-linear-gradient(45deg,#e53449 0 5px,#087b47 5px 9px,#fff1a8 9px 11px); transform:translate(calc(var(--discard-index) * 2px),calc(var(--discard-index) * -2px)) rotate(calc((var(--discard-index) - 2) * 2deg)); }
.board-discard.has-cards { border-color:transparent; }
.board-discard span{z-index:4;opacity:.8}.board-discard.has-cards span{opacity:1;text-shadow:0 2px 3px rgba(0,0,0,.35)}
.board-discard b { position:absolute; z-index:6; right:-12px; top:-12px; min-width:25px; height:25px; display:grid; place-items:center; padding:0 5px; border:2px solid #fff; border-radius:99px; color:#fff; font-size:.68rem; background:#ef3e55; box-shadow:0 3px 7px rgba(0,0,0,.28); }
.discard-card-new { animation:discardCardDrop .55s cubic-bezier(.2,.85,.25,1.18) both; }
@keyframes discardCardDrop { from { opacity:0; transform:translate(-90px,-110px) rotate(-28deg) scale(1.45); } }
.table-seat { z-index:7; width:166px; grid-template-columns:36px 1fr; gap:0; }
.seat-avatar { z-index:3; width:38px; height:38px; margin-right:-5px; border:3px solid #fff; color:#fff; font-size:.68rem; background:var(--player-color)!important; box-shadow:0 4px 8px rgba(55,30,13,.28); }
.seat-info { padding:7px 10px 7px 13px; border:2px solid rgba(255,255,255,.72); border-radius:8px 14px 14px 8px; color:#fff; background:#0c3158; box-shadow:0 5px 10px rgba(55,30,13,.24); }
.seat-info strong { font-size:.72rem; }.seat-info span { color:#d6ecff; font-size:.53rem; }
.seat-me .seat-info { outline:3px solid rgba(255,231,91,.75); box-shadow:0 0 0 5px rgba(255,240,116,.2),0 5px 10px rgba(55,30,13,.24); }
.seat-cards { bottom:51px; z-index:2; }
.seat-cards i { width:27px; height:39px; margin-left:-12px; border:2px solid #fff; border-radius:5px; background:repeating-linear-gradient(45deg,#087b47 0 4px,#f23645 4px 7px,#fff2b2 7px 9px); box-shadow:0 3px 6px rgba(0,0,0,.28); }
.seat-cards i:nth-child(even){transform:rotate(6deg)}.seat-cards i:nth-child(odd){transform:rotate(-5deg)}
.seat-products { top:52px; }.seat-lower .seat-products{bottom:52px}.seat-lower .seat-cards{top:51px}
.product-card { border-color:#fff; background:linear-gradient(145deg,#fff,#ffe46c); }
.action-card { border:4px solid #fff; border-radius:18px; background:linear-gradient(155deg,#25a96a,#087548); box-shadow:0 8px 0 #075b39,0 16px 28px rgba(0,0,0,.25); }
.action-card:nth-child(3n+2){background:linear-gradient(155deg,#2a9fd6,#176aa8);box-shadow:0 8px 0 #105381,0 16px 28px rgba(0,0,0,.25)}
.action-card:nth-child(3n){background:linear-gradient(155deg,#f05b61,#bd2943);box-shadow:0 8px 0 #8f1c30,0 16px 28px rgba(0,0,0,.25)}
.action-card::before { content:"★"; display:grid; width:34px; height:34px; margin-bottom:12px; place-items:center; border-radius:50%; color:#fff; background:rgba(255,255,255,.18); font-size:1rem; }
.action-card::after { color:rgba(255,255,255,.09); }
.action-card .card-label { color:#fff; font-family:"Segoe UI",sans-serif; font-size:1.05rem; font-weight:900; }
.action-card .card-type { color:#fff1a8; }.action-card .card-desc { color:#effff8; border-color:rgba(255,255,255,.25); }
.action-card.kppu-card { background:linear-gradient(155deg,#ffb82e,#ef7419); box-shadow:0 8px 0 #bc5410,0 16px 28px rgba(0,0,0,.25); }
@media(max-width:760px){
  .table-felt{min-height:410px;border-width:6px}.table-seat{width:125px;grid-template-columns:31px 1fr}.seat-avatar{width:33px;height:33px;font-size:.57rem}.seat-info{padding:5px 7px 5px 9px}.seat-info strong{font-size:.6rem}.board-card-pile{width:41px;height:58px}.board-card-pile small{top:63px}.board-discard{left:75%}.table-center-card{width:132px;min-height:108px;padding:12px}.table-center-card b{font-size:1.3rem}.board-leaves{font-size:3rem}.board-cup{font-size:2.5rem}.board-note{font-size:.48rem;padding:9px 7px}
}
@media(max-width:480px){
  .table-felt{min-height:380px}.table-seat{width:104px;grid-template-columns:27px 1fr}.seat-avatar{width:29px;height:29px;border-width:2px}.seat-info{padding:4px 5px 4px 7px}.seat-info strong{font-size:.53rem}.table-center-card{width:112px;min-height:94px}.board-card-pile{width:34px;height:49px}.board-card-pile small{top:53px}.board-pencil,.board-note{display:none}
}
/* Opening splash */
.splash-screen {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center;
  min-height: 100vh; overflow: hidden; color: #f8fafc;
  background: linear-gradient(rgba(3,10,23,.34),rgba(3,10,23,.72)), radial-gradient(circle at 50% 28%,#174d67 0,#081a2a 38%,#030913 76%);
  animation: splashEnter .55s ease both; isolation: isolate;
}
.splash-screen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .34;
  background-image: linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size: 54px 54px; mask-image: radial-gradient(circle at center,#000 8%,transparent 74%);
}
.splash-screen::after {
  content: ""; position: absolute; bottom: -28vh; left: 50%; z-index: -1;
  width: min(1150px,120vw); aspect-ratio: 1; border: 1px solid rgba(92,215,240,.16); border-radius: 50%;
  transform: translateX(-50%) rotateX(72deg); box-shadow: 0 0 90px rgba(46,190,221,.08),inset 0 0 90px rgba(46,190,221,.06);
}
.splash-content { width: min(92vw,920px); padding: 36px 20px; text-align: center; animation: splashContentIn .8s .12s cubic-bezier(.16,.9,.25,1) both; }
.splash-hero-image { display: block; width: 100%; height: auto; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 24px 48px rgba(0,0,0,.52)); animation: splashHeroFloat 2.4s ease-in-out infinite; }
.splash-logos { display: flex; align-items: center; justify-content: center; gap: clamp(14px,3vw,24px); min-height: 58px; margin-bottom: clamp(18px,3vh,30px); animation: splashLogosIn .7s .25s ease both; }
.splash-logo-leg { width: clamp(145px,27vw,210px); height: auto; object-fit: contain; }
.splash-logo-kppu { width: clamp(50px,9vw,70px); height: auto; object-fit: contain; }
.splash-logo-divider { width: 1px; height: 44px; background: rgba(255,255,255,.22); }
.splash-kicker { margin-bottom: 14px; color: #69d7ef; font-size: clamp(.62rem,1.5vw,.76rem); font-weight: 900; letter-spacing: .32em; }
.splash-content h1 { color: #fff; font-size: clamp(2.7rem,9vw,6.7rem); font-weight: 900; letter-spacing: -.065em; line-height: .88; text-wrap: balance; text-shadow: 0 18px 60px rgba(0,0,0,.5); }
.splash-content h1 span { display: block; color: #f5bd45; }
.splash-tagline { margin-top: 24px; color: #b8c9d8; font-size: clamp(.85rem,2vw,1.04rem); letter-spacing: .08em; }
.splash-loader { width: min(240px,58vw); height: 3px; margin: clamp(32px,7vh,64px) auto 14px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.12); }
.splash-loader span { display: block; width: 100%; height: 100%; transform-origin: left; background: linear-gradient(90deg,#52cce8,#f5bd45); animation: splashProgress 3.2s linear forwards; }
.splash-actions { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.splash-landscape { display: flex; align-items: center; justify-content: center; gap: 9px; min-width: min(290px,80vw); padding: 13px 22px; border: 1px solid #ffd36e; border-radius: 12px; color: #17233a; background: linear-gradient(135deg,#ffd36e,#f4b942); box-shadow: 0 9px 28px rgba(244,185,66,.25); font-size: .9rem; font-weight: 850; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.splash-landscape span { font-size: 1.25rem; line-height: .7; }
.splash-landscape:hover, .splash-landscape:focus-visible { transform: translateY(-2px); box-shadow: 0 13px 34px rgba(244,185,66,.34); outline: none; }
.splash-landscape:focus-visible { box-shadow: 0 0 0 4px rgba(105,215,239,.28),0 13px 34px rgba(244,185,66,.34); }
.splash-landscape:disabled { cursor: wait; opacity: .72; }
.splash-landscape.is-loading span { animation: landscapeSpin .75s linear infinite; }
.splash-skip { padding: 8px 16px; border: 0; color: #90a7ba; font: 600 .72rem/1 'Segoe UI',system-ui,sans-serif; letter-spacing: .08em; background: transparent; cursor: pointer; transition: color .2s ease; }
.splash-skip:hover, .splash-skip:focus-visible { color: #fff; outline: none; }
.landscape-hint { margin-top: 2px; color: #71899c; font-size: .66rem; }
.landscape-hint-warning { color: #ffd16b; }
.splash-glow { position: absolute; z-index: -1; width: 34vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .2; }
.splash-glow-one { top: -12vw; left: -8vw; background: #38bde1; }
.splash-glow-two { right: -10vw; bottom: -15vw; background: #e6a72a; }
.splash-screen.splash-leaving { pointer-events: none; animation: splashLeave .72s cubic-bezier(.55,0,1,.45) forwards; }
@keyframes splashEnter { from { opacity: 0; } }
@keyframes splashContentIn { from { opacity: 0; transform: translateY(22px) scale(.97); } }
@keyframes splashLogosIn { from { opacity: 0; transform: translateY(-14px); } }
@keyframes splashHeroFloat { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.012); } }
@keyframes splashProgress { from { transform: scaleX(0); } }
@keyframes landscapeSpin { to { transform: rotate(360deg); } }
@keyframes splashLeave { to { opacity: 0; transform: scale(1.035); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .splash-screen, .splash-content, .splash-logos, .splash-hero-image, .splash-loader span { animation-duration: .01ms; } }
@media (max-width: 480px) { .splash-logos { margin-bottom: 16px; } .splash-content { padding-inline: 12px; } }
@media (orientation: landscape) and (max-height: 600px) {
  .splash-content { padding: 10px 16px; }
  .splash-logos { min-height: 36px; margin-bottom: 5px; }
  .splash-logo-leg { width: clamp(100px,18vw,145px); }
  .splash-logo-kppu { width: clamp(35px,6vw,48px); }
  .splash-logo-divider { height: 30px; }
  .splash-hero-image { width: min(58vw,520px); }
  .splash-loader { margin: 10px auto 8px; }
  .splash-landscape { min-height: 38px; padding: 9px 18px; }
  .splash-skip { padding: 5px 12px; }
}