@font-face{font-family:'DM Sans';src:url('./fonts/dm-sans-variable.woff') format('woff');font-weight:100 1000;font-style:normal;font-display:swap}
:root{--ui-font:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--serif:var(--ui-font);font-family:var(--ui-font);font-optical-sizing:auto}
body,button,input{font-family:var(--ui-font)}
.brand{font-family:var(--ui-font);font-weight:750;letter-spacing:-.04em}
.page-intro h1,.game-panel h1,.game-panel h2,.dialog-header h2,.appearance-layout h3,.legal-page h1,.notes h1,.notes h2{font-family:var(--ui-font);font-weight:700;letter-spacing:-.035em}
.player-name{font-weight:650}.clock{font-family:var(--ui-font);font-weight:650;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.eyebrow,.choice-set legend{font-weight:700;letter-spacing:.12em}
.time-fields input,.hex-field,.stepper output,.moves-scroll td,.clock-options .option small{font-family:var(--ui-font);font-variant-numeric:tabular-nums}
.brand-lockup{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0;flex-shrink:0}
.brand-avatar{display:block;width:56px;height:56px;object-fit:cover;object-position:50% 30%;border-radius:50%;background:#edcc8a;box-shadow:0 0 0 1px #b5914c66}
.header-content{min-height:120px}
#reply-pace{font-size:12px;line-height:1.5;color:var(--muted);margin-top:6px}
.notes>strong,header>strong{font-family:var(--ui-font);font-weight:700;letter-spacing:-.03em}
@media(min-width:1000px){.game-layout{--board-size:clamp(20rem,min(56vw,calc(100dvh - 17rem)),35rem)}body:has(.page-intro) .game-layout{grid-template-columns:minmax(320px,min(660px,calc(100dvh - 420px))) minmax(280px,360px)}}
@media(max-width:599px){.brand-lockup{gap:3px;padding:8px 0}.brand{font-size:24px;letter-spacing:-.04em}.brand-avatar{width:44px;height:44px}.header-content{min-height:100px}.header-actions .button{font-size:14px}.page-intro h1{font-size:30px;line-height:1.15}.dialog-header h2{line-height:1.2}.level-controls{gap:8px}.stepper{gap:4px}.stepper output{min-width:44px}}