/* Trükk: quiet monochrome, generous touch targets, restrained Wordle color. */
:root {
 color-scheme:dark;
 --bg:#171817; --surface:#20211f; --ink:#eeeee7; --muted:#a1a49a;
 --line:#363831; --accent:#eeeee7; --correct:#398457; --present:#dfba4f; --absent:#2b2d29;
 --hatch:repeating-linear-gradient(135deg,#ffffff18 0 1px,transparent 1px 5px);
 font-family:Arial,Helvetica,sans-serif; font-size:19.2px; font-synthesis:none; color:var(--ink); background:var(--bg);
}
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:radial-gradient(ellipse at 30% 0,#25262255,transparent 65%); }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; touch-action:manipulation; }
button:disabled { cursor:default; }
button,a { transition:background-color .15s,color .15s,border-color .15s; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
a { color:inherit; text-underline-offset:4px; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:38.4px; line-height:1.15; font-weight:600; letter-spacing:-1.2px; margin-bottom:0; }
h2 { font-size:31.2px; line-height:1.2; letter-spacing:-.8px; font-weight:600; margin-bottom:12px; overflow-wrap:anywhere; }
h3 { font-size:19.2px; }
.site-header,.main-nav,main,footer { width:min(100% - 48px,720px); margin-inline:auto; }
.site-header { height:104px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { color:var(--ink); font-size:57.6px; font-weight:800; letter-spacing:-3px; line-height:1; white-space:nowrap; text-decoration:none; }
.header-actions { display:flex; align-items:center; gap:12px; min-width:0; }
.icon-button { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:1px solid var(--line); border-radius:50%; background:transparent; font-size:20.4px; color:var(--muted); }
.account-button { min-height:44px; max-width:150px; padding:10px 16px; border:1px solid var(--line); background:transparent; border-radius:4px; color:var(--ink); font-size:15.6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.main-nav { display:flex; border-block:1px solid var(--line); gap:28px; }
.nav-link { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; position:relative; background:transparent; border:0; min-height:48px; padding:0 2px; color:var(--muted); font-size:15.6px; }
.nav-link.active { color:var(--ink); }
.nav-link.active::after { content:''; height:2px; position:absolute; bottom:-1px; left:0; right:0; background:var(--ink); }
main { min-height:360px; }
.view { padding:32px 0 8px; }
#play-view { padding-top:20px; }
.game-shell { max-width:520px; margin:0 auto; --board-width:clamp(210px,calc((100svh - 450px)*.81),300px); }
.league-picker { display:flex; align-items:center; gap:16px; margin:0 0 14px; }
.league-picker select { margin:0; min-width:0; border:0; background:transparent; padding:10px 24px 10px 0; font-size:15.6px; font-weight:600; }
.league-picker .text-button { flex-shrink:0; color:var(--muted); }
.game-meta { width:var(--board-width); max-width:100%; display:flex; justify-content:space-between; gap:16px; margin:0 auto 12px; color:var(--muted); font:13.2px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; }
.game-meta #attempts-label { margin-left:auto; }
.timer { color:var(--ink); font-variant-numeric:tabular-nums; }
.board { width:var(--board-width); max-width:100%; margin:auto; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.tile { display:grid; place-items:center; aspect-ratio:1; position:relative; border:1px solid #32342e; border-bottom-color:#55584e; background:#1f211d55; font-size:33.6px; font-weight:500; text-transform:uppercase; border-radius:2px; }
.tile.current { border-bottom:2px solid #a9ac9f; }
.tile.filled { background:#2c2e28; border-color:#777b6c; }
.tile.correct,.key.correct { background-color:var(--correct); border-color:var(--correct); color:#ffffff; }
.tile.present,.key.present { background-color:var(--present); border-color:var(--present); color:#211b0b; }
.tile.absent { background:var(--absent); border-color:var(--absent); color:#b0b3a8; }
.tile.correct,.tile.present,.key.correct,.key.present,.help-key.correct,.help-key.present { background-image:var(--hatch); }
.tile.reveal { animation:reveal .22s ease; }
.game-actions { min-height:56px; display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 0; }
body.playing .game-actions:has(.game-message:empty) { min-height:20px; padding:8px 0; }
.game-message { font-size:15.6px; line-height:1.5; text-align:center; }
.game-message:empty { display:none; }
.game-message.error,.form-error { color:#e6cfaa; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:44px; padding:12px 18px; background:transparent; border:1px solid #56594e; border-radius:4px; color:var(--ink); font-size:15.6px; line-height:1.3; font-weight:500; }
.button.primary { background:var(--accent); color:#20221c; border-color:var(--accent); font-weight:600; }
.button:disabled { opacity:.5; }
.button.small { min-height:44px; padding:10px 14px; }
.button-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#start-area { display:flex; gap:10px; }
#start, #risk-start { min-width:120px; }
.game-meta { gap:8px; flex-wrap:wrap; }
.risk-label { font:600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.03em; color:var(--ink); white-space:nowrap; }
.game-meta .risk-label { order:1; flex-basis:100%; text-align:center; }
.risk-summary { display:flex; gap:40px; padding:22px 0; margin:20px 0; border-block:1px solid var(--line); }
.risk-summary span { display:grid; gap:6px; color:var(--muted); }
.risk-summary b { color:var(--ink); font-size:36px; line-height:1; }
.risk-actions { display:flex; gap:12px; }
.risk-actions .button { flex:1; }
.keyboard { width:100%; margin:0 auto; }
.keyboard-row { display:flex; justify-content:center; gap:5px; margin-bottom:6px; }
.keyboard-row:nth-child(2) { padding:0; }
.key { height:56px; min-width:0; flex:1; padding:0; border:1px solid #73786b; border-bottom-width:2px; border-radius:4px; background:#42463c; color:#fafbf5; font-size:17px; font-weight:600; user-select:none; }
.key.wide { flex:1.5; font-size:21px; }
.key[data-key="Enter"] { flex:2.6; font-size:15px; letter-spacing:.3px; background:#eeeee7; border-color:#eeeee7; color:#20221c; }
.key:disabled { opacity:1; }
.key.absent { background:#151713; color:#8e9387; border-color:#30342b; text-decoration:line-through; text-decoration-thickness:2px; }
.key:not(:disabled):active { filter:brightness(1.4); }
.result { text-align:center; padding:16px 0; }
.result h3 { font-size:26.4px; letter-spacing:3px; margin:0 0 16px; }
.result .points { font-size:50.4px; letter-spacing:-2px; }
.result .points small { font-size:19.2px; letter-spacing:0; }
.result p { font-size:15.6px; line-height:1.7; color:var(--muted); margin:12px 0; }
.result .button { margin:4px 0; }
.no-league { max-width:480px; margin:auto; text-align:center; padding:58px 0 64px; }
.empty-mark { display:flex; justify-content:center; gap:5px; margin:0 auto 30px; }
.empty-mark span { display:grid; place-items:center; width:40px; height:44px; border:1px solid var(--line); border-bottom-color:#75796b; font-size:21.6px; color:#afb3a5; }
.empty-mark span:first-child { background:repeating-linear-gradient(135deg,transparent 0 8px,#b6b2a033 8px 9px); }
.no-league h1 { font-size:33.6px; letter-spacing:-1px; margin-bottom:26px; text-wrap:balance; }
.no-league .button-row { justify-content:center; }
.no-league>.text-button { margin-top:16px; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 28px; }
.competition-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; }
.competition-list { display:flex; flex-direction:column; gap:8px; }
.competition-item { padding:18px; text-align:left; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--ink); }
.competition-item.selected { border-color:#8a8e7e; background:linear-gradient(135deg,#2c2f26,#23251f); }
.competition-item strong { display:block; font-size:19.2px; line-height:1.4; font-weight:500; margin:10px 0 12px; overflow-wrap:anywhere; }
.competition-item small { font-size:14.4px; color:var(--muted); }
.eyebrow { font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.6px; color:var(--muted); }
.full-ranking { min-width:0; }
.league-detail-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.status-pill { flex-shrink:0; border:1px solid var(--line); padding:5px 8px; border-radius:3px; color:var(--muted); font-size:12px; }
.full-ranking h2 { font-size:36px; }
.full-ranking p { font-size:15.6px; color:var(--muted); line-height:1.6; }
.league-actions { display:flex; flex-wrap:wrap; gap:10px; padding:4px 0 24px; border-bottom:1px solid var(--line); }
.invite-control { display:flex; align-items:stretch; max-width:100%; }
.invite-code { width:calc(12ch + 32px); min-width:0; min-height:44px; margin:0; border-color:#56594e; border-right:0; border-radius:4px 0 0 4px; font:14.4px ui-monospace,SFMono-Regular,Consolas,monospace; text-align:center; cursor:text; }
.invite-control .button { border-radius:0 4px 4px 0; min-width:44px; font-size:20px; padding:8px; }
.ranking-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:28px 0 8px; }
.ranking-heading h3 { margin:0; font-size:21.6px; font-weight:500; letter-spacing:-.4px; }
.ranking-live { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); }
.ranking-live::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--ink); box-shadow:0 0 0 3px #eeeee710; }
.ranking-live.stale::before { background:transparent; border:1px solid var(--muted); box-shadow:none; }
.ranking-table { table-layout:fixed; }
.ranking-table th,.ranking-table td { padding:16px 6px; }
.ranking-table thead th:first-child { width:60px; }
.ranking-table thead .rank-wins { width:48px; }
.ranking-table thead .rank-points { width:78px; }
.ranking-table .rank-name { color:var(--ink); font-size:15.6px; font-weight:400; overflow-wrap:anywhere; }
.rank-name small { display:block; margin-top:4px; color:var(--muted); font-size:12px; }
.rank-place { display:flex; align-items:center; gap:8px; color:var(--muted); font:13.2px ui-monospace,SFMono-Regular,Consolas,monospace; }
.cup-icon { width:23px; height:23px; flex:none; }
.rank-1 .cup-icon { color:#d3b66d; }
.rank-1 .cup-bowl { fill:#d3b66d30; }
.rank-2 .cup-icon { color:#c4ccd3; }
.rank-2 .cup-bowl { fill:#c4ccd31c; }
.rank-3 .cup-icon { color:#c48e68; }
.rank-3 .cup-bowl { fill:#c48e6826; }
.rank-wins,.rank-points { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
td.rank-wins { color:var(--muted); }
td.rank-points { font-weight:600; }
.self-row { background:linear-gradient(90deg,#eeeee70b,#eeeee704); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.text-button { min-height:44px; padding:10px 0; border:0; background:transparent; color:var(--muted); font-size:14.4px; text-underline-offset:4px; }
.empty-state { padding:48px 0; text-align:center; font-size:16.8px; color:var(--muted); }
.empty-copy { color:var(--muted); font-size:15.6px; line-height:1.7; }
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); border-block:1px solid var(--line); padding:20px 0; margin-bottom:28px; }
.stat-card { text-align:center; padding:4px 12px; border-right:1px solid var(--line); }
.stat-card:last-child { border:0; }
.stat-card span { font-size:14.4px; color:var(--muted); }
.stat-card strong { display:block; font-size:40.8px; font-weight:500; margin-top:12px; font-variant-numeric:tabular-nums; }
.table-scroll { overflow-x:auto; }
table { border-collapse:collapse; width:100%; text-align:left; font-size:15.6px; }
td,th { padding:16px 12px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:13.2px; font-weight:400; }
td .text-button { margin-right:12px; }
.search-label { display:block; max-width:330px; font-size:14.4px; color:var(--muted); margin-bottom:24px; }
input,select { display:block; width:100%; min-height:48px; padding:12px 14px; margin-top:8px; background:#1a1c18; color:var(--ink); border:1px solid #4b4f42; border-radius:4px; font-size:19.2px; }
input::placeholder { color:#808676; }
option { background:var(--surface); color:var(--ink); }
.notice { padding:16px 0; color:#e6cfaa; font-size:15.6px; line-height:1.7; }
footer { display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid var(--line); margin-top:24px; padding:8px 0 max(16px,env(safe-area-inset-bottom)); }
footer .text-button { font-size:13.2px; }
.muted,.small-copy { color:var(--muted); }
.small-copy { font-size:14.4px; line-height:1.7; }
dialog { width:calc(100% - 32px); max-width:440px; max-height:calc(100dvh - 32px); padding:28px; background:linear-gradient(150deg,#292c25,#1d1f1a 70%); color:var(--ink); border:1px solid #565b4c; border-radius:8px; box-shadow:0 28px 100px #0008; }
dialog::backdrop { background:#090b08bd; backdrop-filter:blur(5px); }
.dialog-top { display:flex; justify-content:flex-end; margin:-12px -12px 4px; }
dialog .icon-button { border:0; font-size:30px; }
dialog h2 { font-size:33.6px; margin-bottom:20px; }
dialog p,dialog li { font-size:15.6px; line-height:1.7; color:var(--muted); }
dialog label { display:block; font-size:14.4px; margin:20px 0 0; color:#c9cdbf; }
dialog .button { width:100%; margin-top:24px; min-height:48px; }
.form-error { margin-top:12px; font-size:14.4px; line-height:1.6; }
.form-error:empty { display:none; }
.auth-tabs { display:flex; gap:24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.auth-tabs button { background:transparent; border:0; border-bottom:2px solid transparent; color:var(--muted); padding:12px 0; min-height:44px; font-size:15.6px; }
.auth-tabs .active { color:var(--ink); border-bottom-color:var(--ink); }
.tutorial { display:flex; gap:6px; margin:24px 0; }
.tutorial .tile { width:44px; height:48px; font-size:26.4px; }
.help-key { display:inline-block; width:12px; height:12px; margin-right:8px; }
.help-key.correct { background-color:var(--correct); }
.help-key.present { background-color:var(--present); }
.help-key.absent { background:var(--absent); }
.score-table { display:flex; justify-content:space-between; text-align:center; margin:24px 0; border-block:1px solid var(--line); padding:20px 0; }
.score-table span { font-size:12px; color:var(--muted); }
.score-table b { display:block; margin-top:10px; font-size:21.6px; }
.formula { padding:12px 0; font:14.4px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; color:var(--muted); }
.secret { padding:16px; background:var(--bg); border:1px solid var(--line); border-radius:4px; font:19.2px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; white-space:pre-wrap; }
.toast { position:fixed; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); width:max-content; padding:14px 20px; border-radius:4px; background:var(--ink); color:var(--bg); font-size:15.6px; line-height:1.5; text-align:center; box-shadow:0 8px 32px #0005; z-index:10; }
@keyframes reveal { from { transform:scaleY(.3); } to { transform:scaleY(1); } }
@media(hover:hover) {
 .button:hover,.account-button:hover,.icon-button:hover { background-color:#30342b; border-color:#8a907d; }
 .button.primary:hover { background:#d9dece; border-color:#d9dece; }
 .nav-link:hover,.text-button:hover { color:var(--ink); }
 .text-button:hover { text-decoration:underline; }
 .competition-item:hover { border-color:#777f68; }
 .key:not(:disabled):hover { filter:brightness(1.15); }
 .key.correct:not(:disabled):hover { background-color:var(--correct); filter:brightness(1.15); }
 .key.present:not(:disabled):hover { background-color:var(--present); filter:brightness(1.15); }
}
@media(max-width:600px) {
 .site-header,.main-nav,main,footer { width:calc(100% - 32px); }
 .site-header { height:80px; gap:12px; }
 .brand { font-size:43.2px; letter-spacing:-2px; }
 .header-actions { gap:6px; }
 .account-button { max-width:100px; padding:10px 12px; font-size:14.4px; }
 .site-header .icon-button { width:36px; border:0; }
 .main-nav { gap:0; }
 .nav-link { flex:1; text-align:center; }
 .nav-link.active::after { left:25%; right:25%; }
 main { min-height:340px; }
 .view { padding-top:28px; }
 #play-view { padding-top:12px; }
 .game-shell { --board-width:clamp(190px,calc((100svh - 480px)*.81),300px); }
 .league-picker { margin-bottom:10px; }
 .tile { font-size:31.2px; }
 .game-actions { min-height:52px; }
 .key { height:58px; font-size:16px; }
 .key.wide { font-size:21px; }
 .keyboard-row { gap:4px; }
 .keyboard-row:nth-child(2) { padding:0; }
 .no-league { padding:48px 0 44px; }
 .no-league h1 { font-size:31.2px; }
 .page-heading { align-items:flex-start; flex-direction:column; gap:20px; margin-bottom:24px; }
 .page-heading h1 { font-size:36px; }
 .page-heading .button-row { width:100%; }
 .page-heading .button-row .button { flex:1; }
 .competition-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
 .competition-list { flex-direction:row; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity; }
 .competition-item { min-width:190px; max-width:240px; flex-shrink:0; scroll-snap-align:start; }
 .full-ranking h2 { font-size:33.6px; }
 .stat-card { padding:4px 6px; }
 .stat-card span { font-size:13.2px; }
 .stat-card strong { font-size:33.6px; }
 td,th { white-space:nowrap; padding:14px 10px; }
 dialog { padding:24px; }
 dialog h2 { font-size:31.2px; }
 footer { margin-top:16px; padding-top:4px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
}
@media(max-width:360px) {
 .site-header,.main-nav,main,footer { width:calc(100% - 24px); }
 .brand { font-size:38.4px; letter-spacing:-1.8px; }
 .header-actions { gap:0; }
 .account-button { max-width:88px; padding-inline:8px; }
 .button { padding-inline:14px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

@media(min-width:601px) and (max-height:800px) { .site-header { height:88px; } #play-view { padding-top:12px; } .game-actions { min-height:52px; } }

.league-scoring { display:grid; grid-template-columns:1fr auto; gap:12px 16px; padding:20px 0 8px; font-size:14.4px; color:var(--muted); }
.league-scoring strong { font-weight:500; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums; }
.settings-note { margin-top:20px; }
#league-settings + #league-delete { margin-left:20px; }