:root { color-scheme:dark; --bg:#090b10; --surface:#121722; --line:#283142; --text:#f3f5f9; --muted:#a6b0c0; --accent:#d6e4ff; font-family:system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); line-height:1.5; }
a { color:inherit; }
.focused { isolation:isolate; background:radial-gradient(ellipse at center,#0e172b,#030610 75%); }
.space-background { position:fixed; z-index:-2; inset:0; width:100%; height:100%; pointer-events:none; }
.focused::after { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at center,#03061030 0,transparent 45%,#01030a80 100%); }
.site-header { position:absolute; z-index:1; inset:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:.5rem; padding:1rem clamp(1.25rem,4vw,3rem); background:transparent; }
.header-brand { position:absolute; left:50%; transform:translateX(-50%); margin:0; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:.08em; white-space:nowrap; }
.header-brand-preview { margin:0; font-size:clamp(1.4rem,3vw,2rem); letter-spacing:.08em; }
.site-header form .button { margin-top:0; }
.language-switch { position:relative; display:flex; }
.language-feedback { position:absolute; z-index:2; top:100%; right:0; padding:.4rem .6rem; border:1px solid var(--line); border-radius:.4rem; background:var(--surface); color:var(--text); font-size:.75rem; white-space:nowrap; }
.language-feedback:empty { display:none; }
.flag-button { display:grid; place-items:center; width:66px; height:66px; padding:0; border:1px solid transparent; border-radius:.6rem; background:transparent; cursor:pointer; }
.flag-button:hover:not(:disabled) { border-color:var(--accent); }
.flag-button:disabled { cursor:default; }
.flag-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.flag-icon { display:block; width:39px; height:30px; border-radius:3px; object-fit:cover; }
.focused main { position:relative; display:flex; min-height:100vh; padding:5rem clamp(1.25rem,4vw,3rem); }
.page-content { width:min(100%,1200px); margin:auto; }
.title-with-icon { display:flex; align-items:center; justify-content:center; gap:.55em; }
.title-icon { width:1em; height:1em; flex:none; color:var(--accent); }
.game-title-button { display:inline-flex; align-items:center; gap:.55em; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.game-title-button:disabled { cursor:default; }
.game-title-button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.lobby { width:min(100%,960px); margin:auto; }
.hero { max-width:760px; margin:auto; text-align:center; }
.hero input { display:block; margin-inline:auto; }
.page-content > .back { display:block; width:max-content; margin:0 auto 1.5rem; }
h1 { margin:.25rem 0 1rem; font-size:clamp(2rem,4vw,3rem); line-height:1.15; }
h2 { margin:0 0 1.5rem; font-size:1.2rem; }
p { color:var(--muted); }
.eyebrow { color:var(--accent); font-size:.85rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cards { display:grid; grid-template-columns:1fr; gap:1rem; }
.card { display:flex; flex-direction:column; align-items:center; min-width:0; padding:1.5rem; border:1px solid var(--line); border-radius:.85rem; background:var(--surface); text-align:center; }
.card.is-art-of-jigsaw { border-color:#d6e4ff32; background:linear-gradient(145deg,#cadcff0d,#101a3026); backdrop-filter:blur(5px); box-shadow:0 14px 36px #01040d24,inset 0 1px #ffffff18; }
.mode-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem; margin-top:auto; }
.mode-actions form .button { margin-top:0; }
.card form { margin-top:auto; }
.card .mode-actions form { margin-top:0; }
.card > .button { margin-top:auto; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.45em; min-height:44px; padding:.7rem 1.2rem; border:1px solid var(--accent); border-radius:.6rem; background:var(--accent); color:#111827; font:inherit; font-weight:750; text-decoration:none; cursor:pointer; }
.button .title-icon { color:currentColor; }
.button:hover { filter:brightness(1.08); }
.button:focus-visible, input:focus-visible, a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.button.secondary { background:transparent; color:var(--accent); }
.button.danger { border-color:#b72f42; background:#b72f42; color:#fff; }
.dialog-backdrop { position:fixed; z-index:3; inset:0; display:grid; place-items:center; padding:1.25rem; background:#01030ac9; }
.dialog { width:min(100%,520px); max-height:calc(100vh - 2.5rem); overflow:auto; padding:clamp(1.25rem,4vw,2rem); border:1px solid var(--line); border-radius:.85rem; background:var(--surface); }
.dialog-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.dialog-actions .button { margin-top:0; }
.privacy-dialog { position:fixed; inset:0; width:min(94vw,760px); height:min(88dvh,760px); max-width:none; max-height:none; margin:auto; padding:1rem; overflow:hidden; border-color:#a8aa9f; background:#f3eddf; color:#1d2420; }
.privacy-dialog::backdrop { background:#01030ae6; }
.privacy-dialog[open] { display:flex; flex-direction:column; gap:.75rem; }
.privacy-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.privacy-dialog-header h2 { margin:0; }
.privacy-dialog-header .button.secondary { border-color:#1d2420; color:#1d2420; }
.privacy-dialog iframe { flex:1; width:100%; min-height:0; border:0; border-top:1px solid #a8aa9f; background:#f3eddf; }
.privacy-dialog .back { align-self:flex-end; margin:0; color:#1d2420; }
.legal-links { position:fixed; z-index:1; bottom:1rem; left:50%; transform:translateX(-50%); font-size:.75rem; color:var(--muted); }
.legal-links a:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.button:disabled { opacity:.5; cursor:not-allowed; }
label { display:block; margin:1rem 0 .3rem; font-weight:700; }
input { width:min(100%,420px); min-height:44px; padding:.65rem; border:1px solid var(--line); border-radius:.5rem; background:var(--surface); color:var(--text); font:inherit; }
form .button { margin-top:1rem; }
.back { display:inline-block; margin-top:1rem; color:var(--accent); }
.empty { padding:1.5rem; border:1px dashed var(--line); border-radius:1rem; }
@media (max-width:640px) { .site-header:has(.header-brand) { padding-top:3.5rem; } .header-brand { top:.75rem; } }
@media (min-width:641px) and (max-width:1280px) { .cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1281px) { .cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }