:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #18332f; background: #eaf7f5; --accent: #087e79; --dark: #075e5a; --line: #c8dfda; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(circle at 80% 0%, #d1efe9, transparent 34rem), #eaf7f5; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.topbar { height: 54px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; max-width: 850px; margin: auto; }
.brand { display: flex; align-items: center; gap: 8px; color: #18332f; font-weight: 850; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: white; background: var(--accent); }
.connection-status { font-size: .8rem; color: #54746e; font-weight: 750; }
.shell { max-width: 850px; margin: 0 auto; padding: 8px 8px 30px; }
.screen:not(.play-screen) { max-width: 560px; margin: 20px auto 0; }
.home-screen { padding-top: min(7vh, 50px); }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2.3rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -.05em; margin-bottom: 12px; }
h2 { font-size: 1.25rem; }
.eyebrow { color: var(--accent); font-size: .75rem; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; }
.lead { color: #496b64; line-height: 1.5; max-width: 560px; }
.panel { padding: 20px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 16px 48px #18332f12; }
label { display: block; margin: 8px 0; font-size: .85rem; font-weight: 800; }
input, select { width: 100%; min-height: 48px; border: 1px solid #bfd7d1; border-radius: 12px; padding: 0 14px; background: white; color: #18332f; outline: none; }
input:focus, select:focus, button:focus-visible, summary:focus-visible { outline: 3px solid #7bc8c0; outline-offset: 2px; }
.button { width: 100%; min-height: 48px; border: 0; border-radius: 12px; padding: 10px 16px; font-weight: 850; margin-top: 12px; }
.primary { background: var(--accent); color: white; }
.secondary { background: #d7eeea; color: var(--dark); }
.quiet { background: transparent; color: var(--dark); border: 1px solid var(--line); }
.button:disabled, .mode-button:disabled { opacity: .45; cursor: default; }
.divider { color: #708e87; text-align: center; margin: 18px 0; }
.error { color: #b43d37; font-weight: 750; min-height: 1.2em; margin: 12px 0 0; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.code-box { min-width: 100px; text-align: center; background: white; border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.code-box small { display: block; color: #66857e; }
.code-box strong { letter-spacing: .12em; font-size: 1.2rem; }
.player-list { padding: 0; margin: 0; list-style: none; }
.player-list li { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid #e5f0ed; gap: 8px; }
.player-list button { border: 0; border-radius: 9px; min-width: 44px; min-height: 44px; background: #fce7e5; color: #9a352f; font-size: .78rem; font-weight: 800; }
.settings { margin-top: 20px; }
.rules { margin-top: 18px; color: #496b64; }
.rules summary { min-height: 44px; display: flex; align-items: center; color: var(--dark); font-weight: 800; cursor: pointer; }
.rules p { line-height: 1.5; }
.hint { color: #58766f; line-height: 1.45; margin: 14px 0 0; }
.play-screen { min-height: calc(100svh - 62px); min-height: calc(100dvh - 62px); display: flex; flex-direction: column; }
.play-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.play-top small { color: #55756e; }
.play-top h1 { font-size: clamp(1.3rem, 5vw, 2rem); margin: 3px 0; line-height: 1.1; }
.turn-badge { border-radius: 999px; padding: 7px 10px; background: #d6efe9; color: var(--dark); font-size: .8rem; font-weight: 850; white-space: nowrap; }
.play-leave { width: 44px; min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; color: #9a352f; background: white; font-size: 1.8rem; line-height: 1; }
.player-status { display: flex; flex-wrap: wrap; gap: 5px; margin: 5px 0; }
.player-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: white; border: 1px solid var(--line); font-size: .75rem; font-weight: 700; }
.player-chip.disconnected { opacity: .55; }
.color-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--player-color); flex: none; }
.connection-hint { color: #a04435; font-size: .8rem; min-height: 18px; margin: 0; }
.board-area { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; }
.board { display: block; width: min(calc(100vw - 16px), calc(100svh - 260px), 620px); width: min(calc(100vw - 16px), calc(100dvh - 260px), 620px); aspect-ratio: 1; height: auto; max-height: 100%; border-radius: 16px; background: #c9e5dd; box-shadow: 0 12px 35px #18332f23; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.board.rotated { transform: rotate(180deg); }
.board .cell { fill: #f8f7ee; }
.board .goal-cell { fill: #e9f3d8; }
.board .move-cell { fill: #81d9aa; stroke: #087e79; stroke-width: 4; }
.board .last-cell { stroke: #ffc04e; stroke-width: 6; }
.board .wall { fill: #285e5b; }
.board .last-wall { fill: #efae40; }
.board .preview.valid { fill: #199e66; opacity: .72; }
.board .preview.invalid { fill: #d84d45; opacity: .72; }
.board .pawn { stroke: white; stroke-width: 7; filter: drop-shadow(0 5px 4px #18332f4d); pointer-events: none; }
.board .tap-target { fill: transparent; }
.controls { position: sticky; bottom: 0; z-index: 2; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); background: #eaf7f5f2; backdrop-filter: blur(8px); }
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-button { min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: white; color: var(--dark); font-weight: 850; }
.mode-button.active { background: var(--dark); color: white; }
.wall-controls { margin-top: 8px; }
.wall-controls span { display: block; color: #496b64; font-size: .8rem; min-height: 20px; }
.wall-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wall-buttons .button { margin-top: 5px; min-height: 44px; padding: 7px 5px; }
.result-players { display: grid; gap: 8px; }
.result-player { display: flex; gap: 8px; align-items: center; font-weight: 750; }
.toast { position: fixed; z-index: 10; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(400px, calc(100% - 32px)); padding: 13px 16px; border-radius: 12px; color: white; background: #a84237; box-shadow: 0 12px 30px #18332f4d; text-align: center; font-weight: 750; }
@media (max-height: 650px) { .player-status { margin: 2px 0; } .board { width: min(calc(100vw - 16px), calc(100dvh - 235px), 620px); } }
@media (max-width: 350px) { .turn-badge { display: none; } }