/* GKaZe77 Minigames design system — derived from the arcade index */
* { box-sizing: border-box; }
html { color-scheme: dark; }
:root {
  --rose: #f43f5e;
  --rose-dim: rgba(244,63,94,.14);
  --cyan: #22d3ee;
  --cyan-dim: rgba(34,211,238,.10);
  --navy: #060d1a;
  --panel: rgba(6,13,26,.88);
  --surface: rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --line: rgba(255,255,255,.09);
  --text: #e2e8f0;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --shadow: rgba(0,0,0,.45);
}
html[data-theme="light"] {
  color-scheme: light;
  --navy: #eef3f9;
  --panel: rgba(255,255,255,.88);
  --surface: rgba(15,23,42,.035);
  --surface-2: rgba(15,23,42,.065);
  --line: rgba(15,23,42,.12);
  --text: #0f172a;
  --muted: #475569;
  --muted-2: #64748b;
  --shadow: rgba(15,23,42,.13);
}
html, body { margin: 0; min-height: 100%; background: var(--navy); }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.page-shell { min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--navy); }
.retro-grid, .scanlines, .glow-blob { position: fixed; pointer-events: none; }
.retro-grid {
  inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(244,63,94,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(244,63,94,.055) 1px,transparent 1px);
  background-size: 44px 44px; animation: grid-scroll 28s linear infinite;
}
.scanlines {
  inset: 0; z-index: 2; opacity: .5;
  background: repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px);
}
.glow-blob { z-index: 0; border-radius: 999px; filter: blur(90px); animation: blob-breathe 9s ease-in-out infinite; }
.glow-rose { width: 520px; height: 520px; top: -210px; left: -180px; background: var(--rose); opacity: .22; }
.glow-cyan { width: 420px; height: 420px; right: -160px; bottom: -140px; background: var(--cyan); opacity: .14; animation-delay: 3.5s; }
@keyframes grid-scroll { to { background-position: 44px 44px; } }
@keyframes blob-breathe { 50% { opacity: .34; transform: scale(1.08); } }

.topbar, .game-shell, footer { position: relative; z-index: 3; }
.topbar {
  min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; border-bottom: 1px solid rgba(244,63,94,.12);
  background: color-mix(in srgb, var(--navy) 88%, transparent); backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; letter-spacing: -.01em; }
.logo-ping { width: 10px; height: 10px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 7px var(--rose); position: relative; flex: 0 0 auto; }
.logo-ping::before { content: ""; position: absolute; inset: -4px; border: 1.5px solid var(--rose); border-radius: 50%; animation: logo-ring 1.8s ease-out infinite; }
@keyframes logo-ring { from { transform: scale(.8); opacity:.7; } to { transform: scale(2.3); opacity:0; } }
.rose { color: var(--rose); }
.muted { color: var(--muted); font-weight: 500; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn, .text-btn {
  border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 8px; cursor: pointer;
  transition: .16s ease; text-decoration: none;
}
.icon-btn { padding: 7px 10px; font-size: 12px; line-height: 1; }
.icon-btn:hover, .text-btn:hover { border-color: rgba(244,63,94,.45); color: var(--rose); }
.link-btn { display: inline-flex; align-items: center; min-height: 28px; }
.text-btn { padding: 5px 8px; color: var(--cyan); border-color: rgba(34,211,238,.18); }

.game-shell { width: min(1180px, calc(100% - 32px)); margin: 34px auto 52px; flex: 1; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 18px 50px var(--shadow); }
.hero { padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; position: relative; overflow: hidden; }
.hero::before { content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--rose),var(--cyan),transparent); }
.section-label { font-family: "Press Start 2P", monospace; font-size: 9px; line-height: 1.6; letter-spacing: .08em; color: var(--rose); }
.glitch-title { margin: 11px 0 0; font-family: "Press Start 2P", monospace; font-size: clamp(34px, 8vw, 74px); letter-spacing: .04em; color: var(--text); position: relative; display: inline-block; line-height: 1; }
.glitch-title::before, .glitch-title::after { content: attr(data-text); position:absolute; inset:0; pointer-events:none; }
.glitch-title::before { color:var(--cyan); clip-path:polygon(0 0,100% 0,100% 34%,0 34%); animation:glitch-top 5.5s steps(2,end) infinite; }
.glitch-title::after { color:var(--rose); clip-path:polygon(0 66%,100% 66%,100% 100%,0 100%); animation:glitch-bottom 5.5s steps(2,end) infinite .22s; }
@keyframes glitch-top { 0%,91%,100%{transform:none} 93%{transform:translate(-4px,1px)} 96%{transform:translate(3px,-1px)} }
@keyframes glitch-bottom { 0%,91%,100%{transform:none} 93%{transform:translate(4px,1px)} 96%{transform:translate(-3px,-1px)} }
.lede { max-width: 690px; margin: 14px 0 0; color: var(--muted); line-height: 1.7; }
.lede strong { color: var(--text); }
.hero-status { min-width: 220px; padding: 15px 16px; border: 1px solid rgba(34,211,238,.16); border-radius: 12px; background: color-mix(in srgb, var(--panel) 82%, transparent); font-family: "Courier New", monospace; color: var(--muted); }
.hero-status > div:first-child { display:flex; align-items:center; gap:9px; color:var(--text); font-size:12px; margin-bottom:6px; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.rose-dot { background:var(--rose); box-shadow:0 0 8px var(--rose); }
.tiny { font-size: 11px; color: var(--muted-2); }
.upper { text-transform: uppercase; letter-spacing: .12em; }

.screen { display:none; padding-top: 30px; }
.screen.active { display:block; animation: screen-in .22s ease both; }
@keyframes screen-in { from { opacity:0; transform:translateY(8px); } }
.section-heading, .round-topline { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:18px; }
.section-heading h2, .round-topline h2 { margin:8px 0 0; font-size: clamp(24px,4vw,38px); letter-spacing:-.04em; }
.section-heading > p { max-width: 520px; margin:0; color:var(--muted); line-height:1.6; font-size:14px; }
.setup-grid { display:grid; grid-template-columns: 1fr 1fr .78fr; gap:18px; align-items:start; }
.card-block { padding: 20px; }
.card-title-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-title-row h3, .settings-card h3 { margin:0; font-size:15px; }
.stack { display:grid; gap:9px; margin-top:16px; }
.list-row { display:flex; gap:8px; align-items:center; }
.arcade-input {
  width:100%; min-width:0; padding:11px 12px; border-radius:9px; border:1px solid rgba(34,211,238,.2);
  background: color-mix(in srgb, var(--panel) 72%, transparent); color:var(--text); outline:none; font-family:"Courier New",monospace;
}
.arcade-input:focus { border-color:rgba(34,211,238,.58); box-shadow:0 0 0 3px rgba(34,211,238,.08),0 0 14px rgba(34,211,238,.12); }
.remove-btn { width:37px; height:37px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--muted-2); cursor:pointer; flex:0 0 auto; }
.remove-btn:hover { color:var(--rose); border-color:rgba(244,63,94,.38); }
.field-label { display:block; color:var(--muted); font-size:12px; margin:20px 0 9px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.segmented button { border:1px solid var(--line); background:var(--surface-2); color:var(--muted); padding:9px 5px; border-radius:8px; cursor:pointer; font-weight:700; }
.segmented button.selected { border-color:var(--rose); color:var(--rose); background:var(--rose-dim); box-shadow:0 0 12px rgba(244,63,94,.16); }
.check-row { display:flex; align-items:center; gap:10px; color:var(--muted); margin-top:21px; font-size:13px; }
.check-row input { accent-color:var(--rose); width:17px; height:17px; }
.action-row { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.action-row.center { justify-content:center; }
.action-row.split { justify-content:space-between; }
.arcade-btn {
  display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 18px; border-radius:9px;
  border:1px solid var(--rose); background:var(--rose); color:#fff; box-shadow:0 0 16px rgba(244,63,94,.28);
  text-decoration:none; font-weight:800; letter-spacing:.02em; cursor:pointer; transition:.18s ease;
}
.arcade-btn:hover { transform:translateY(-2px); background:#e11d48; box-shadow:0 0 26px rgba(244,63,94,.48); }
.arcade-btn.secondary { background:transparent; border-color:var(--line); color:var(--muted); box-shadow:none; }
.arcade-btn.secondary:hover { border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 16px rgba(34,211,238,.13); }
.score-chip, .letter-mini { padding:9px 12px; border:1px solid rgba(34,211,238,.16); border-radius:9px; color:var(--muted); font-size:12px; background:var(--surface); }
.score-chip strong, .letter-mini strong { color:var(--cyan); }
.round-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:18px; }
.letter-panel, .prompt-panel { padding:24px; }
.letter-panel { text-align:center; }
.letter-display { font-family:"Press Start 2P", monospace; font-size:clamp(86px,16vw,160px); line-height:1; margin:18px 0; color:var(--text); text-shadow:5px 0 rgba(34,211,238,.4),-5px 0 rgba(244,63,94,.32); }
.timer-wrap { margin: 8px 0 20px; }
.timer-meta { display:flex; justify-content:space-between; font-family:"Courier New",monospace; color:var(--muted); font-size:12px; margin-bottom:7px; }
.timer-meta strong { color:var(--text); }
.timer-track { height:8px; border-radius:99px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); }
.timer-bar { height:100%; width:100%; background:linear-gradient(90deg,var(--rose),var(--cyan)); transition:width .2s linear; }
.basta-btn { width:100%; min-height:72px; border-radius:14px; border:2px solid var(--rose); background:var(--rose); color:white; font-family:"Press Start 2P",monospace; font-size:clamp(16px,3vw,24px); cursor:pointer; box-shadow:0 0 22px rgba(244,63,94,.35); transition:.14s ease; }
.basta-btn:hover { transform:scale(1.015); box-shadow:0 0 34px rgba(244,63,94,.6); }
.basta-btn:active { transform:scale(.99); }
.center-text { text-align:center; margin:12px auto 0; line-height:1.5; }
.category-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.category-tile { min-height:66px; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); }
.category-index { font-family:"Press Start 2P",monospace; font-size:9px; color:var(--rose); }
.category-tile strong { font-size:14px; }
.paper-note { margin-top:16px; padding:13px 14px; border:1px dashed rgba(34,211,238,.22); border-radius:11px; display:flex; gap:11px; align-items:flex-start; color:var(--muted); }
.paper-note span { color:var(--cyan); font-size:20px; }
.paper-note p { margin:0; font-size:12px; line-height:1.55; }
.badge { font-size:10px; padding:3px 7px; border-radius:99px; border:1px solid; font-weight:800; letter-spacing:.06em; }
.badge.live { color:#86efac; background:rgba(34,197,94,.1); border-color:rgba(34,197,94,.25); }
.review-panel { padding:18px; overflow:hidden; }
.review-help { color:var(--muted); font-size:12px; line-height:1.6; margin-bottom:14px; }
.answer-grid-wrap { overflow:auto; border:1px solid var(--line); border-radius:12px; }
.answer-table { width:100%; min-width:760px; border-collapse:collapse; font-size:12px; }
.answer-table th, .answer-table td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:9px; text-align:left; vertical-align:top; }
.answer-table th:last-child, .answer-table td:last-child { border-right:none; }
.answer-table tr:last-child td { border-bottom:none; }
.answer-table th { background:var(--surface-2); color:var(--muted); position:sticky; top:0; z-index:1; }
.answer-table th:first-child { min-width:150px; }
.answer-cell { min-width:170px; }
.answer-cell .arcade-input { padding:8px 9px; }
.validity-row { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:6px; }
.score-preview { font-family:"Press Start 2P",monospace; font-size:8px; color:var(--cyan); }
.invalid-toggle { border:1px solid var(--line); background:transparent; color:var(--muted-2); padding:4px 6px; border-radius:6px; cursor:pointer; font-size:10px; }
.invalid-toggle.active { border-color:rgba(244,63,94,.5); color:var(--rose); background:var(--rose-dim); }
.letter-mini { font-family:"Courier New",monospace; }
.letter-mini strong { font-family:"Press Start 2P",monospace; font-size:18px; margin-left:7px; }
.score-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; }
.scoreboard-card, .round-breakdown-card { padding:19px; }
.scoreboard { display:grid; gap:8px; }
.score-row { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.score-rank { font-family:"Press Start 2P",monospace; font-size:9px; color:var(--muted-2); }
.score-name { font-weight:800; overflow:hidden; text-overflow:ellipsis; }
.score-total { font-family:"Press Start 2P",monospace; font-size:12px; color:var(--cyan); }
.score-row.leader { border-color:rgba(244,63,94,.38); background:linear-gradient(90deg,var(--rose-dim),transparent); }
.letter-badge { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--rose); border-radius:8px; color:var(--rose); font-family:"Press Start 2P",monospace; font-size:12px; }
.round-breakdown { display:grid; gap:9px; margin-top:14px; }
.breakdown-row { display:grid; grid-template-columns:1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.breakdown-row:last-child { border-bottom:none; }
.breakdown-row strong { color:var(--text); }
.breakdown-row span { color:var(--muted); }
.breakdown-points { color:var(--rose) !important; font-family:"Press Start 2P",monospace; font-size:9px; }
.final-card { max-width:720px; margin:0 auto; padding:34px; text-align:center; }
.trophy { font-size:64px; margin:18px 0 8px; filter:drop-shadow(0 0 18px rgba(244,63,94,.3)); }
.final-card h2 { margin:0; font-size:clamp(26px,5vw,44px); }
.winner-text { font-family:"Press Start 2P",monospace; color:var(--cyan); font-size:clamp(11px,2.6vw,18px); line-height:1.7; margin:16px 0 22px; }
.final-scoreboard { text-align:left; }
.toast { position:fixed; z-index:20; left:50%; bottom:22px; transform:translate(-50%,18px); opacity:0; pointer-events:none; padding:10px 13px; border-radius:9px; background:var(--panel); border:1px solid rgba(244,63,94,.35); box-shadow:0 14px 35px var(--shadow); color:var(--text); font-size:12px; transition:.18s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
footer { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:20px 0 24px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted-2); font-size:12px; }

.no-motion *, .no-motion *::before, .no-motion *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }
@media (max-width: 900px) {
  .setup-grid { grid-template-columns:1fr 1fr; }
  .settings-card { grid-column:1 / -1; }
  .round-layout, .score-layout { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .topbar { padding:0 14px; }
  .brand .muted { display:none; }
  .link-btn { display:none; }
  .game-shell { width:min(100% - 20px,1180px); margin-top:18px; }
  .hero { padding:22px 18px; align-items:flex-start; flex-direction:column; }
  .hero-status { width:100%; min-width:0; }
  .setup-grid { grid-template-columns:1fr; }
  .settings-card { grid-column:auto; }
  .section-heading, .round-topline { align-items:flex-start; flex-direction:column; }
  .category-board { grid-template-columns:1fr; }
  .letter-panel, .prompt-panel { padding:18px; }
  .review-panel { padding:10px; }
  .action-row.split { flex-direction:column-reverse; }
  .action-row.split .arcade-btn { width:100%; }
  footer { flex-direction:column; gap:5px; }
}