@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;700&display=swap');

:root { --ink: #111729; --night: #182451; --paper: #edf0f7; --mist: #c8d3e6; --coral: #f1574d; --gold: #f4b942; --mint: #63c99a; --sky: #4ba5e6; }
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; color: var(--ink); background-color: var(--night); background-image: radial-gradient(circle at 12% 18%, #ffffff70 0 1px, transparent 2px), radial-gradient(circle at 82% 7%, #85d9ff70 0 1px, transparent 2px), linear-gradient(165deg, #182451, #263a73 55%, #1e2855); background-size: 31px 31px, 47px 47px, auto; font-family: "Space Grotesk", sans-serif; }
.site-header { min-height: 56px; display: flex; justify-content: space-between; align-items: center; padding: 0 5vw; color: #fff; border-bottom: 1px solid #ffffff36; }
.site-header span, .eyebrow, small { font-family: "DM Mono", monospace; font-size: .75rem; letter-spacing: 0; }.wordmark { color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: 700; }
.app-shell { max-width: 1380px; margin: 0 auto; padding: 32px 5vw 56px; }.lobby-hero { color: #fff; max-width: 640px; padding: 48px 0 30px; }.lobby-hero h1 { margin: 4px 0; font-size: 5rem; line-height: .95; }.lead { font-size: 1.15rem; line-height: 1.5; }.eyebrow { margin: 0 0 8px; color: var(--sky); text-transform: uppercase; }
.lobby-actions, .action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.panel { background: #f4f6fb; border: 1px solid #fff; border-radius: 6px; padding: 24px; box-shadow: 0 15px 35px #06102f55; }.panel h2 { margin-top: 0; } label { display: grid; gap: 6px; margin: 12px 0; font-weight: 500; } input, select { width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid #a6b5cd; border-radius: 3px; background: #fff; font: inherit; } fieldset { margin: 18px 0; padding: 8px 12px; border: 1px solid #b8c4d7; } legend { font-weight: 700; font-size: .9rem; }.choice { display: flex; gap: 8px; align-items: center; font-weight: 400; }.choice input { width: auto; min-height: 0; }.choice small { margin-left: auto; color: #5c6d88; }
button, .button-link { border: 0; border-radius: 3px; padding: 11px 16px; background: var(--coral); color: #fff; font: 700 .95rem "Space Grotesk", sans-serif; cursor: pointer; text-decoration: none; display: inline-block; } button.secondary { background: var(--night); } button:disabled { cursor: not-allowed; opacity: .45; }.join-button { margin-top: 8px; }.notice { padding: 12px; background: #dce5f4; border-left: 4px solid var(--sky); }.notice.error { border-color: var(--coral); background: #ffe9e6; }.waiting { max-width: 640px; margin: 8vh auto; }.waiting strong { font: 700 2rem "DM Mono", monospace; }.player-list { display: grid; gap: 8px; margin: 24px 0; }.player-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--mint); }
.game-board { display: grid; gap: 22px; }.game-status { display: flex; justify-content: space-between; gap: 16px; align-items: center; color: #fff; }.game-status strong { font-size: 1.5rem; }.token-row { display: flex; flex-wrap: wrap; gap: 8px; }.token-row span { background: #ffffff1f; border: 1px solid #ffffff36; padding: 8px; font-family: "DM Mono", monospace; }.other-hands { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }.opponent { padding: 12px; color: #fff; border-top: 3px solid #ffffff45; }.opponent.is-current { border-color: var(--gold); background: #ffffff12; }.opponent h2 { margin: 0 0 8px; font-size: 1rem; }.card-row { display: flex; flex-wrap: wrap; gap: 8px; }.card { width: 64px; aspect-ratio: 5 / 7; display: grid; align-content: space-between; padding: 6px; border: 2px solid #fff; border-radius: 5px; box-shadow: 3px 4px 0 #07102d; }.face { color: #0d1527; background: #fff; }.face b { font-size: 2rem; }.red, .vörös { border-color: var(--coral); }.yellow, .sárga { border-color: var(--gold); }.green, .zöld { border-color: var(--mint); }.blue, .kék { border-color: var(--sky); }.white, .fehér { border-color: #fff; }.rainbow, .tarka { border-color: #ef73d0; background: repeating-linear-gradient(135deg, #f1574d 0 10px, #f4b942 10px 20px, #63c99a 20px 30px, #4ba5e6 30px 40px); }.face.red, .face.vörös { background: linear-gradient(to bottom, #fff 0 50%, var(--coral) 50% 100%); }.face.yellow, .face.sárga { background: linear-gradient(to bottom, #fff 0 50%, var(--gold) 50% 100%); }.face.green, .face.zöld { background: linear-gradient(to bottom, #fff 0 50%, var(--mint) 50% 100%); }.face.blue, .face.kék { background: linear-gradient(to bottom, #fff 0 50%, var(--sky) 50% 100%); }.face.white, .face.fehér { background: linear-gradient(to bottom, #fff 0 50%, #d9e0eb 50% 100%); }.face.rainbow, .face.tarka { background: linear-gradient(to bottom, #fff 0 50%, transparent 50%), repeating-linear-gradient(135deg, #f1574d 0 10px, #f4b942 10px 20px, #63c99a 20px 30px, #4ba5e6 30px 40px); }
.table-center { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 20px; }.fireworks { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }.firework { min-height: 140px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: #fff; border-top: 8px solid; }.firework.red, .firework.vörös { background: linear-gradient(to bottom, #fff 0 50%, var(--coral) 50% 100%); }.firework.yellow, .firework.sárga { background: linear-gradient(to bottom, #fff 0 50%, var(--gold) 50% 100%); }.firework.green, .firework.zöld { background: linear-gradient(to bottom, #fff 0 50%, var(--mint) 50% 100%); }.firework.blue, .firework.kék { background: linear-gradient(to bottom, #fff 0 50%, var(--sky) 50% 100%); }.firework.white, .firework.fehér { background: linear-gradient(to bottom, #fff 0 50%, #d9e0eb 50% 100%); }.firework.rainbow, .firework.tarka { background: linear-gradient(to bottom, #fff 0 50%, transparent 50%), repeating-linear-gradient(135deg, #f1574d 0 10px, #f4b942 10px 20px, #63c99a 20px 30px, #4ba5e6 30px 40px); }.firework strong { font-size: 4rem; line-height: .9; }.discard { padding: 14px; background: #ffffffdf; }.discard h2, .own-hand h2, .game-log h2 { margin: 0; font-size: 1rem; }.mini-cards { display: flex; flex-wrap: wrap; gap: 3px; }.mini { width: 24px; height: 32px; color: #0d1527; padding: 4px; background: #fff; border: 1px solid; }.mini.red, .mini.vörös { background: linear-gradient(to bottom, #fff 0 50%, var(--coral) 50% 100%); }.mini.yellow, .mini.sárga { background: linear-gradient(to bottom, #fff 0 50%, var(--gold) 50% 100%); }.mini.green, .mini.zöld { background: linear-gradient(to bottom, #fff 0 50%, var(--mint) 50% 100%); }.mini.blue, .mini.kék { background: linear-gradient(to bottom, #fff 0 50%, var(--sky) 50% 100%); }.mini.white, .mini.fehér { background: linear-gradient(to bottom, #fff 0 50%, #d9e0eb 50% 100%); }.mini.rainbow, .mini.tarka { background: linear-gradient(to bottom, #fff 0 50%, transparent 50%), repeating-linear-gradient(135deg, #f1574d 0 4px, #f4b942 4px 8px, #63c99a 8px 12px, #4ba5e6 12px 16px); }.own-hand { padding: 18px; background: #0f1734c9; color: #fff; }.section-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }.back { width: 128px; color: #eaf1fe; background: linear-gradient(135deg, #273b75, #15234d); border-color: #91b7ee; box-shadow: none; font: .7rem "DM Mono", monospace; }.card-index { font-size: 1rem; color: var(--gold); }.possible-colors { display: flex; flex-direction: column; gap: 3px; width: 100%; overflow: hidden; }.possible-colors i { width: 100%; min-height: 12px; background: #6f809f; }.possible-colors .vörös { background: var(--coral); }.possible-colors .sárga { background: var(--gold); }.possible-colors .zöld { background: var(--mint); }.possible-colors .kék { background: var(--sky); }.possible-colors .fehér { background: #eef3fb; }.possible-colors .tarka { background: repeating-linear-gradient(135deg, #f1574d 0 5px, #f4b942 5px 10px, #63c99a 10px 15px, #4ba5e6 15px 20px); }.possible-ranks { color: #dce7fa; text-align: center; white-space: nowrap; }.actions .action-grid { grid-template-columns: 1fr 1fr 1.4fr; }.actions .action-grid > form { min-width: 0; }.actions form { border-left: 2px solid var(--sky); padding-left: 12px; }.actions fieldset { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }.actions legend { margin-bottom: 6px; }.radio-options { display: flex; flex-wrap: wrap; gap: 5px; }.radio-options label { display: block; margin: 0; }.radio-options input { position: absolute; opacity: 0; pointer-events: none; }.radio-options span { min-width: 30px; min-height: 30px; display: grid; place-items: center; padding: 5px 8px; border: 1px solid #b4c3da; border-radius: 3px; background: #fff; color: var(--ink); font: 500 .78rem "DM Mono", monospace; cursor: pointer; }.radio-options input:checked + span { border-color: var(--night); background: var(--night); color: #fff; box-shadow: inset 0 0 0 1px #fff; }.radio-options input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }.radio-options.players span { max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.radio-options.cards span { min-width: 36px; font-size: .95rem; }.radio-options.rank-values { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }.radio-options.rank-values label { min-width: 0; }.radio-options.rank-values span { min-width: 0; width: 100%; padding-inline: 2px; }.color-choice { width: 32px; padding: 0 !important; }.color-choice.vörös { background: var(--coral) !important; }.color-choice.sárga { background: var(--gold) !important; }.color-choice.zöld { background: var(--mint) !important; }.color-choice.kék { background: var(--sky) !important; }.color-choice.fehér { background: #e8eef8 !important; }.color-choice.tarka { background: repeating-linear-gradient(135deg, #f1574d 0 5px, #f4b942 5px 10px, #63c99a 10px 15px, #4ba5e6 15px 20px) !important; }.radio-options input:checked + .color-choice { box-shadow: inset 0 0 0 2px var(--night), 0 0 0 1px #fff; }.game-log { color: #e3eaf8; }.game-log ol { margin: 8px 0; padding-left: 20px; font-family: "DM Mono", monospace; font-size: .78rem; }.result-banner { padding: 28px; text-align: center; color: #10162b; background: #fff5cf; border: 2px solid var(--gold); }.result-banner h1 { font-size: 4rem; margin: 0; }
@media (max-width: 720px) { .site-header span { display: none; }.app-shell { padding: 20px 16px; }.lobby-hero { padding-top: 28px; }.lobby-hero h1 { font-size: 3.6rem; }.lobby-actions, .action-grid, .actions .action-grid, .table-center { grid-template-columns: 1fr; }.game-status, .section-heading { align-items: flex-start; flex-direction: column; }.card { width: 55px; }.back { width: 115px; }.fireworks { grid-template-columns: repeat(2, 1fr); }.firework { min-height: 110px; }.firework strong { font-size: 3rem; } }
@media (max-width: 420px) { body { overflow-x: hidden; }.site-header { min-height: 48px; padding: 0 14px; }.wordmark { font-size: 1.3rem; }.app-shell { width: 100%; max-width: 100%; min-width: 0; padding: 16px 12px 36px; }.app-shell main, .game-board, .lobby-actions, .waiting, .panel, .game-status, .other-hands, .table-center, .own-hand, .actions, .game-log { width: 100%; max-width: 100%; min-width: 0; }.lobby-hero { padding: 20px 0; }.lobby-hero h1 { font-size: 3rem; }.lead { font-size: 1rem; }.panel { padding: 16px; }.choice { align-items: flex-start; }.choice small { max-width: 140px; margin-left: auto; text-align: right; }.waiting { margin: 20px auto; }.waiting h1 { font-size: 1.25rem; }.waiting strong { font-size: 1.55rem; }.game-board { gap: 16px; }.game-status { gap: 10px; }.game-status strong { font-size: 1.2rem; }.token-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; }.token-row span { min-width: 0; padding: 7px 5px; overflow-wrap: anywhere; text-align: center; font-size: .68rem; }.token-row span:last-child { grid-column: 1 / -1; }.other-hands { grid-template-columns: minmax(0, 1fr); }.opponent { min-width: 0; padding: 8px 0; }.opponent .card-row { flex-wrap: nowrap; overflow-x: auto; padding: 3px 3px 8px; }.opponent .card { flex: 0 0 50px; width: 50px; }.opponent .face b { font-size: 1.5rem; }.table-center { gap: 12px; }.fireworks { gap: 7px; }.firework { min-width: 0; min-height: 92px; padding: 9px; }.firework strong { font-size: 2.35rem; }.discard { padding: 12px; }.own-hand { padding: 14px; }.own-cards { flex-wrap: nowrap; overflow-x: auto; padding: 3px 2px 8px; }.own-cards .back { flex: 0 0 92px; width: 92px; min-height: 129px; }.possible-colors i { min-height: 10px; }.actions { padding: 16px; }.actions .action-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 20px; }.actions form { width: 100%; min-width: 0; padding-left: 10px; }.actions .action-grid > form:first-child, .actions .action-grid > form:nth-child(2) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }.actions .action-grid > form:first-child fieldset, .actions .action-grid > form:nth-child(2) fieldset { margin-bottom: 0; }.actions button { min-height: 42px; }.radio-options.players { gap: 4px; }.radio-options.players span { max-width: 96px; }.radio-options.rank-values { gap: 3px; }.radio-options.rank-values span { min-height: 34px; }.result-banner { padding: 20px 14px; }.result-banner h1 { font-size: 3rem; }.game-log ol { font-size: .7rem; overflow-wrap: anywhere; } }