@charset "UTF-8";
:root {color-scheme:light;--ink:#263f36;--muted:#637165;--paper:#f7f5ee;--line:#d9ddd0;--green:#244f40;--terracotta:#9f4d35;--tile:#fffdf5;--shadow:0 12px 34px #263f360b;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;background:var(--paper);color:var(--ink)}
* {box-sizing:border-box} body {margin:0;min-height:100vh;background-color:var(--paper);background-image:linear-gradient(rgba(247,245,238,.65),rgba(247,245,238,.65)),url('../assets/backgrounds/adinkra-cloth.webp');background-size:auto,1536px auto;background-position:center top;background-repeat:repeat} button,input,select {font:inherit} button {cursor:pointer} a {color:inherit} button:disabled {cursor:default;opacity:.42} button,input,select {touch-action:manipulation} :focus-visible {outline:3px solid #b76a36;outline-offset:4px} [hidden] {display:none!important}
.site-header {max-width:1400px;margin:auto;padding:24px 42px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line)} .brand {display:flex;gap:14px;align-items:center;text-decoration:none;font-family:Georgia,serif;font-size:38px;font-weight:700;line-height:1.15;letter-spacing:-.8px}.brand>img {width:34px;height:44px}.brand small {display:block;font-family:system-ui,sans-serif;font-size:17px;font-weight:700;line-height:1.4;letter-spacing:.3px;margin-top:6px;color:var(--ink)} nav {display:flex;align-items:center;gap:16px}.local-badge {font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:100px;padding:7px 12px}
button {border:0;background:transparent;color:inherit}.quiet {font-size:13px;padding:9px 4px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#b5c3b4}.primary,.secondary {padding:12px 20px;border-radius:7px;font-size:13px;font-weight:650;min-height:44px}.primary {background:var(--green);color:#fff}.primary:hover:not(:disabled) {background:#32624f}.secondary {background:#fffdf8;border:1px solid #bec8b9}.secondary:hover:not(:disabled){background:#edf0e5}
main {max-width:1240px;margin:auto;padding:34px 42px 48px;outline:none} .eyebrow {font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:750;color:var(--terracotta);margin:0 0 12px} h1,h2,h3,p {margin-top:0} h1,h2 {font-family:Georgia,serif;font-weight:400;letter-spacing:-1px} h1 {font-size:46px;line-height:1.1;margin-bottom:17px} h2 {font-size:27px} h3 {font-size:15px;font-weight:650} p {line-height:1.65} .muted {color:var(--muted)} .fine-print {font-size:11px;color:var(--muted);line-height:1.65} .site-footer {max-width:1240px;padding:20px 42px;margin:auto;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;letter-spacing:.2px;color:var(--muted);gap:15px}.skip {position:fixed;top:-100px;left:20px;background:white;padding:15px;z-index:20}.skip:focus {top:10px}.sr-only {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.welcome {padding:38px 0 28px;max-width:100%}.welcome p {font-size:16px;color:var(--muted);max-width:100%}.scenario-picker {display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:10px 0 28px}.scenario-choice {position:relative;text-align:left;border:1px solid var(--line);padding:24px;border-radius:10px;background:#fffdf8;box-shadow:var(--shadow);min-height:236px;transition:transform .15s,border-color .15s}.scenario-choice:hover {transform:translateY(-2px)}.scenario-choice[aria-pressed=true] {border:2px solid var(--green);padding:23px;background:#f1f3e8}.scenario-choice h3 {font-family:Georgia,serif;font-size:23px;font-weight:400;margin:16px 0 10px}.scenario-choice p {font-size:12px;margin:0;color:var(--muted)}.scenario-choice .number {position:absolute;top:24px;right:22px;font-size:11px;color:var(--muted)}.scenario-choice .symbols {display:flex;gap:12px}.scenario-choice img {width:34px;height:34px}.setup-bottom {display:flex;gap:30px;align-items:flex-end;flex-wrap:wrap;padding:25px 0;border-top:1px solid var(--line)}.field {display:flex;flex-direction:column;gap:8px;font-size:12px}.field input,.field select {background:white;border:1px solid #bec8b9;border-radius:6px;padding:11px;min-height:44px;color:var(--ink);max-width:180px}.name-fields {display:flex;gap:12px;flex-wrap:wrap}.name-fields input {width:138px}.setup-actions {display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}.setup-tail {display:flex;align-items:center;justify-content:space-between;gap:20px}.setup-tail p {max-width:630px;font-size:12px;color:var(--muted)}
.game-heading {display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px}.game-heading h1 {font-size:37px;margin:0 0 7px}.game-heading .eyebrow {margin-bottom:8px}.game-heading p {font-size:12px;margin:0;color:var(--muted)}.session-tools {display:flex;gap:12px;align-items:center;flex-shrink:0}.save-status {font-size:10px;color:var(--muted)}.status-strip {display:flex;justify-content:space-between;gap:20px;padding:15px 20px;background:#e8ecdf;border:1px solid #d9dfd0;border-radius:8px;margin-bottom:22px;align-items:center;font-size:12px}.stat {display:flex;gap:10px;align-items:center}.stat strong {font-size:14px}.round-pips {display:flex;gap:5px}.pip {height:7px;width:7px;border-radius:50%;background:#c3cdbb}.pip.past {background:var(--green)}.pip.current {background:var(--terracotta);box-shadow:0 0 0 3px #9f4d3518}.revision-dot {width:9px;height:9px;border-radius:50%;border:1px solid #7c8978;background:#647d5b}.revision-dot.spent {background:transparent}
.game-layout {display:grid;grid-template-columns:minmax(0,1fr) 322px;gap:30px;align-items:start}.board-top {display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px}.board-top h2 {font-size:23px;margin:0}.board-top span {font-size:10px;color:var(--muted)}.board-wrap {background:#e5dfcf;border:1px solid #d6cfbd;border-radius:10px;padding:12px 17px 17px 8px;box-shadow:var(--shadow)}.board {display:grid;grid-template-columns:20px repeat(5,minmax(0,1fr));gap:5px;max-width:650px;margin:auto}.axis {display:flex;align-items:center;justify-content:center;font-size:10px;color:#687264;font-weight:600;min-height:15px}.cell {position:relative;aspect-ratio:1;border:1px solid #d0c9b6;background:#eeeadd;border-radius:4px;min-width:0;display:flex;align-items:center;justify-content:center;padding:10px}.cell:disabled {opacity:1}.cell.empty.available {border:1px dashed #789172;background:#f3f2e8;cursor:pointer}.cell.empty.available:hover {background:#d8e4cb;border:2px solid var(--green)}.cell.empty.available::after {content:'+';font-size:22px;font-weight:300;color:#8e9f83}.cell .coordinate {position:absolute;top:6px;left:7px;font-size:9px;color:#65725e}.cell.occupied {background:var(--tile);border:1px solid #ccc6b5;box-shadow:0 2px 0 #c6beaa}.cell img {width:58%;height:58%;margin-top:1px;max-height:69px}.cell .code {position:absolute;bottom:5px;left:7px;font-size:9px;font-weight:700;color:#61715b}.cell .protected-tag {position:absolute;bottom:5px;right:6px;font-size:8px;font-weight:600;letter-spacing:.2px;color:var(--green)}.cell.protected {background:#e7eedc;border-color:#899a7e}.cell.preview {outline:3px solid var(--terracotta);outline-offset:-3px;background:#f5e8cf}.cell.source {outline:3px solid var(--green);outline-offset:-3px}.cell.suggested:not(.occupied) {box-shadow:inset 0 0 0 2px #bd7a45}.board-legend {display:flex;gap:15px;font-size:10px;color:var(--muted);padding:12px 0;flex-wrap:wrap}.legend-square {display:inline-block;width:8px;height:8px;border:1px dashed #789172;margin-right:5px}.legend-square.locked {border-style:solid;background:#c8d7b8}.board-note {font-size:10px;color:var(--muted);margin:0 0 16px}
.instruction {background:#fffdf8;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:6px;padding:18px;margin:0 0 20px}.instruction h3 {font-size:17px;margin:0 0 8px;font-weight:650}.instruction p {font-size:12px;margin:0 0 12px;line-height:1.65}.instruction .eyebrow {font-size:9px}.instruction .action-buttons {display:flex;gap:8px;flex-wrap:wrap}.tutorial-tip {background:#f5ead5;border-radius:5px;padding:10px 12px;margin-bottom:13px;font-size:11px;line-height:1.6;border:1px solid #e7d5b4}.revise-buttons {display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.revise-buttons button {font-size:11px;padding:9px 11px;border:1px solid var(--line);background:#f4f4e9;border-radius:5px}.revise-buttons button[aria-pressed=true] {background:var(--green);color:white}.received {display:flex;gap:12px;align-items:center;margin:12px 0}.received img {width:34px;height:34px}.received span {font-size:12px}.received small {display:block;color:var(--muted);font-size:10px;margin-top:3px}
.players-heading {display:flex;justify-content:space-between;align-items:center;margin:12px 0}.players-heading h3 {margin:0;font-size:13px}.players-heading span {font-size:10px;color:var(--muted)}.players {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.player {border:1px solid var(--line);background:#fffdf8;border-radius:7px;padding:13px;min-width:0}.player.active {border-color:#65836a;box-shadow:inset 0 3px #65836a}.player-header {display:flex;justify-content:space-between;gap:6px;font-size:12px;font-weight:650;margin-bottom:11px;align-items:baseline}.player-header small {font-size:9px;color:var(--muted);font-weight:500;text-align:right}.rack {display:flex;gap:7px}.rack-tile {position:relative;min-width:0;flex:1;max-width:84px;border:1px solid #dcd7c6;border-radius:4px;background:#f5f1e5;padding:9px 4px 5px;min-height:76px}.rack-tile img {width:31px;height:31px;display:block;margin:0 auto 6px}.rack-tile .code {font-size:9px;font-weight:700}.rack-tile:disabled {opacity:.82}.rack-tile.selected {outline:2px solid var(--green);outline-offset:1px;background:#e4ebd7}.rack-tile.suggested {border-color:#b57845}.rack-tile:hover:not(:disabled) {background:#e9eedc}
.objectives-header {display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}.objectives-header h2 {font-size:23px;margin:0}.objectives-header span {font-size:10px;color:var(--muted)}.objective {background:#fffdf8;border:1px solid var(--line);border-radius:7px;padding:17px;margin-bottom:12px;box-shadow:var(--shadow)}.objective.protected {background:#eaf0e0;border-color:#b3c2a5}.objective-head {display:flex;justify-content:space-between;gap:8px}.objective h3 {font-family:Georgia,serif;font-weight:400;font-size:19px;line-height:1.25;margin:0}.objective .id {font-size:10px;color:var(--terracotta);margin-bottom:6px}.objective .goal-status {font-size:9px;text-transform:uppercase;letter-spacing:.8px;flex-shrink:0;padding-top:4px}.goal-status.ready {color:var(--terracotta);font-weight:700}.objective p {font-size:11px;line-height:1.65;color:#596759;margin:10px 0}.pattern {display:inline-grid;gap:3px;margin:13px 0 1px}.pattern.cols-2 {grid-template-columns:repeat(2,22px)}.pattern.cols-3 {grid-template-columns:repeat(3,22px)}.pattern.cols-4 {grid-template-columns:repeat(4,22px)}.pattern.cols-5 {grid-template-columns:repeat(5,22px)}.pattern span {width:22px;height:22px;border:1px solid #ccd4c2;display:flex;align-items:center;justify-content:center;font-size:10px;background:#eceddc}.pattern .blank {visibility:hidden}.symbol-s {--symbol:#e9d3c6}.symbol-n {--symbol:#d3e4ec}.symbol-f {--symbol:#dae6cf}.symbol-d {--symbol:#f1e3b6}.symbol-e {--symbol:#e6d9eb}.symbol-m {--symbol:#cde8e1}.pattern span:not(.blank){background:var(--symbol,#eceddc)}.objective button {font-size:11px;margin-top:5px;width:100%}.objective select {display:block;width:100%;font-size:11px;margin:9px 0;padding:8px;border:1px solid var(--line);border-radius:4px;background:white}.objective .protected-coords {font-size:10px;color:var(--green);margin-bottom:0}.scenario-hint {font-size:11px;color:var(--muted);line-height:1.7;border-left:2px solid #c5cdbb;padding-left:13px;margin:19px 0}
.vote-row {display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:10px 0;font-size:12px}.vote-row>div {display:flex;gap:7px}.vote-row .primary,.vote-row .secondary {padding:8px 11px;font-size:11px;min-height:38px}.approved {color:var(--green);font-size:11px}.outcome {background:var(--green);color:#fff;padding:24px;border-radius:8px;margin-bottom:20px}.outcome h2 {font-size:34px;margin:0 0 10px}.outcome p {font-size:13px;max-width:650px}.outcome .secondary {color:var(--ink)}.outcome.lost {background:#70533e}.history {margin-top:22px;border-top:1px solid var(--line);padding-top:17px;font-size:11px;color:var(--muted)}.history summary {cursor:pointer;color:var(--ink);font-weight:600;margin-bottom:12px}.history ol {list-style:none;padding:0;margin:0}.history li {padding:7px 0;border-bottom:1px solid #e2e4d9;line-height:1.5}.history li span {font-size:9px;color:#88917d;margin-right:9px}
#notice {max-width:1156px;margin:16px auto 0;background:#f5ead5;color:#70442e;padding:11px 16px;border:1px solid #dfc7a7;border-radius:5px;font-size:12px;line-height:1.6}dialog {max-width:730px;width:calc(100% - 30px);max-height:85vh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:30px;background:var(--paper);color:var(--ink);box-shadow:0 30px 100px #0004}dialog::backdrop {background:#162e2670;backdrop-filter:blur(3px)}.dialog-top {display:flex;justify-content:space-between;align-items:baseline;gap:16px}.dialog-top h2 {margin-bottom:14px}.dialog-actions {display:flex;gap:12px;justify-content:flex-end;margin-top:20px}dialog p,.rule-list {font-size:13px;line-height:1.75}.rule-list {padding-left:22px}.rule-list li {padding:0 0 12px 5px}.symbol-guide {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}.symbol-guide>div {display:flex;gap:12px;align-items:center}.symbol-guide img {height:32px;width:32px}.symbol-guide strong {font-size:11px;display:block}.symbol-guide small {font-size:10px;color:var(--muted)}
@media(min-width:1350px){.game-layout{grid-template-columns:650px 1fr;gap:34px}}
@media(max-width:980px){main{padding:26px}.site-header{padding:20px 26px}.game-layout{grid-template-columns:minmax(0,1fr) 280px;gap:20px}.status-strip{padding:13px}.round-pips{display:none}.scenario-choice{padding:20px}.scenario-choice[aria-pressed=true]{padding:19px}.cell .protected-tag{font-size:7px}.session-tools{gap:8px}.save-status{display:none}}
@media(max-width:760px){.site-header{padding:16px 18px}.site-header{flex-wrap:wrap}.brand{font-size:30px}.brand small{font-size:14px}.brand>img{width:26px;height:36px}nav{gap:10px}.local-badge{display:none}.quiet{font-size:11px}main{padding:24px 18px 30px}h1{font-size:36px}.welcome{padding:15px 0}.welcome p{font-size:14px}.scenario-picker{grid-template-columns:1fr}.scenario-choice{min-height:140px;padding:20px 20px 20px 132px}.scenario-choice[aria-pressed=true]{padding:19px 19px 19px 131px}.scenario-choice .symbols{position:absolute;left:18px;top:30px;gap:6px;flex-wrap:wrap;width:96px}.scenario-choice img{width:26px;height:26px}.scenario-choice h3{margin:8px 0}.scenario-choice .number{top:12px;right:14px;font-size:9px}.setup-bottom{gap:18px;align-items:flex-start}.name-fields input{width:130px}.setup-tail{align-items:flex-start;flex-direction:column}.game-heading{align-items:flex-start;gap:10px}.game-heading h1{font-size:31px}.game-heading p{max-width:280px}.session-tools{flex-direction:column;align-items:flex-end;gap:2px}.status-strip{gap:10px;flex-wrap:wrap;font-size:10px}.stat{gap:6px}.stat strong{font-size:12px}.game-layout{grid-template-columns:1fr}.board-wrap{padding:10px 12px 12px 6px}.board{gap:4px;grid-template-columns:16px repeat(5,minmax(0,1fr))}.cell{padding:8px}.cell img{width:63%;height:63%}.cell .coordinate{top:4px;left:5px;font-size:8px}.cell .code{font-size:8px;left:5px;bottom:4px}.cell .protected-tag{font-size:6px;bottom:4px;right:4px}.objectives{display:grid;grid-template-columns:1fr;gap:0}.objective{padding:16px}.site-footer{padding:18px;flex-direction:column;gap:7px}.instruction{padding:15px}.symbol-guide{grid-template-columns:1fr}dialog{padding:22px}.game-heading .eyebrow{font-size:9px}.scenario-hint{margin:10px 0}.players{gap:9px}.player{padding:10px}.rack{gap:5px}.rack-tile{padding:8px 3px 5px;min-height:69px}.rack-tile img{height:26px;width:26px}#notice{margin:12px 18px 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.gift-commit {margin-top:16px}.game-layout > div > .players {margin-bottom:20px}

/* Online rooms reuse the game typography and colors. */
.online-forms{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.online-forms .field{display:flex;flex-direction:column;gap:8px;margin:16px 0;width:100%}
.online-forms input:not([type=checkbox]),.online-forms select{width:100%;box-sizing:border-box;min-height:44px}
.public-toggle{display:flex;align-items:center;gap:10px;margin:20px 0}
.public-toggle input{width:20px;height:20px;flex-shrink:0}
.online-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:16px 0}
.directory-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.directory-list{display:grid;gap:14px}.directory-list article{border-top:1px solid #b8c8bc;padding:16px 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.directory-list article strong{font-size:1.2rem;letter-spacing:.12em}
.online-forms button,.instruction>button{margin:6px 8px 6px 0}
@media(max-width:700px){.online-forms{grid-template-columns:1fr}.directory-heading{align-items:flex-start}.online-toolbar{gap:8px}}

/* Full-width title, with studio and tagline centered independently of navigation. */
.site-header {max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px 20px}
.site-header .brand {grid-column:1;grid-row:1;justify-self:start;font-size:60px;line-height:1.1}
.brand-details {grid-column:2;grid-row:1;text-align:center;font-size:18px;font-weight:700;line-height:1.5}
.site-header nav {grid-column:3;grid-row:1;justify-self:end;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:1100px) and (min-width:761px){.site-header .brand {font-size:44px}.brand-details {font-size:15px}.site-header .local-badge {display:none}}
@media(max-width:760px){.site-header {grid-template-columns:1fr;gap:12px}.site-header .brand {grid-column:1;grid-row:auto}.brand-details {grid-column:1;grid-row:auto;justify-self:center}.site-header nav {grid-column:1;grid-row:auto}}
@media(max-width:760px){.site-header .brand {font-size:46px}.brand-details {font-size:16px}}

/* Ten fine stitched lines form a textile divider below the title panel. */
.site-header {border-bottom:0}
.site-header::after {content:"";display:block;grid-column:1/-1;height:42px;margin-top:8px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%2242%22%20viewBox%3D%220%200%20160%2042%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23171612%22%20stroke-width%3D%22.85%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2213%20.8%2021%20.7%2017%20.9%22%3E%3Cpath%20d%3D%22M-2%203%20Q18%202.65%2040%203%20T80%203%20T120%203%20T162%203%22%20%2F%3E%3Cpath%20d%3D%22M-2%207%20Q18%207.35%2040%207%20T80%207%20T120%207%20T162%207%22%20%2F%3E%3Cpath%20d%3D%22M-2%2011%20Q18%2010.65%2040%2011%20T80%2011%20T120%2011%20T162%2011%22%20%2F%3E%3Cpath%20d%3D%22M-2%2015%20Q18%2015.35%2040%2015%20T80%2015%20T120%2015%20T162%2015%22%20%2F%3E%3Cpath%20d%3D%22M-2%2019%20Q18%2018.65%2040%2019%20T80%2019%20T120%2019%20T162%2019%22%20%2F%3E%3Cpath%20d%3D%22M-2%2023%20Q18%2023.35%2040%2023%20T80%2023%20T120%2023%20T162%2023%22%20%2F%3E%3Cpath%20d%3D%22M-2%2027%20Q18%2026.65%2040%2027%20T80%2027%20T120%2027%20T162%2027%22%20%2F%3E%3Cpath%20d%3D%22M-2%2031%20Q18%2031.35%2040%2031%20T80%2031%20T120%2031%20T162%2031%22%20%2F%3E%3Cpath%20d%3D%22M-2%2035%20Q18%2034.65%2040%2035%20T80%2035%20T120%2035%20T162%2035%22%20%2F%3E%3Cpath%20d%3D%22M-2%2039%20Q18%2039.35%2040%2039%20T80%2039%20T120%2039%20T162%2039%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:repeat-x;background-size:160px 42px;pointer-events:none}

/* Extend the stitched divider through the header's side padding. */
.site-header {padding-left:0;padding-right:0}
.site-header .brand {margin-left:42px}
.site-header nav {margin-right:42px}
@media(max-width:980px){.site-header .brand {margin-left:26px}.site-header nav {margin-right:26px}}
@media(max-width:760px){.site-header .brand {margin-left:18px}.site-header nav {margin-right:18px}}

/* Clearly distinguish header controls and the noninteractive play-status label. */
.site-header .local-badge {display:inline-block;font-size:12px;font-weight:750;color:#263f36;background:#e6eadf;border:2px solid #657761;border-radius:6px;padding:10px 12px;line-height:1.3}
.site-header nav .quiet {font-size:14px;font-weight:750;color:#fff;background:#244f40;border:2px solid #17392d;border-radius:6px;padding:10px 14px;min-height:44px;text-decoration:none;box-shadow:0 2px 0 #17392d}
.site-header nav .quiet:hover {background:#17392d;border-color:#102a20}
.site-header nav .quiet:active {box-shadow:none;transform:translateY(1px)}
.site-header nav {gap:10px}
@media(min-width:761px) and (max-width:1250px){.site-header .local-badge {display:none}}

/* Inset stitched side bands frame the game while leaving outer screen margins. */
main {position:relative;width:calc(100% - 64px)}
main::before,main::after {content:"";position:absolute;top:0;bottom:0;width:27px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2227%22%20height%3D%22160%22%20viewBox%3D%220%200%2027%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23171612%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2213%20.8%2021%20.7%2017%20.9%22%3E%3Cpath%20d%3D%22M2%20-2%20Q1.75%2018%202%2040%20T2%2080%20T2%20120%20T2%20162%22%2F%3E%3Cpath%20d%3D%22M4.5%20-2%20Q4.75%2018%204.5%2040%20T4.5%2080%20T4.5%20120%20T4.5%20162%22%2F%3E%3Cpath%20d%3D%22M7%20-2%20Q6.75%2018%207%2040%20T7%2080%20T7%20120%20T7%20162%22%2F%3E%3Cpath%20d%3D%22M9.5%20-2%20Q9.75%2018%209.5%2040%20T9.5%2080%20T9.5%20120%20T9.5%20162%22%2F%3E%3Cpath%20d%3D%22M12%20-2%20Q11.75%2018%2012%2040%20T12%2080%20T12%20120%20T12%20162%22%2F%3E%3Cpath%20d%3D%22M14.5%20-2%20Q14.75%2018%2014.5%2040%20T14.5%2080%20T14.5%20120%20T14.5%20162%22%2F%3E%3Cpath%20d%3D%22M17%20-2%20Q16.75%2018%2017%2040%20T17%2080%20T17%20120%20T17%20162%22%2F%3E%3Cpath%20d%3D%22M19.5%20-2%20Q19.75%2018%2019.5%2040%20T19.5%2080%20T19.5%20120%20T19.5%20162%22%2F%3E%3Cpath%20d%3D%22M22%20-2%20Q21.75%2018%2022%2040%20T22%2080%20T22%20120%20T22%20162%22%2F%3E%3Cpath%20d%3D%22M24.5%20-2%20Q24.75%2018%2024.5%2040%20T24.5%2080%20T24.5%20120%20T24.5%20162%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:repeat-y;background-size:27px 160px;pointer-events:none}
main::before {left:0}
main::after {right:0}
@media(max-width:980px){main {padding-left:42px;padding-right:42px}}
@media(max-width:760px){main {width:calc(100% - 24px);padding-left:28px;padding-right:28px}main::before,main::after {width:14px;background-size:14px 160px}}

/* Open up the side stitching and connect it to the header divider. */
main {padding-left:60px;padding-right:60px}
main::before,main::after {top:-66px;width:42px;background-size:42px 160px}
@media(max-width:980px){main {padding-left:56px;padding-right:56px}}
@media(max-width:760px){main {padding-left:43px;padding-right:43px}main::before,main::after {top:-58px;width:28px;background-size:28px 160px}}

/* Studio details at left; game title centered; navigation remains at right. */
.site-header .brand {grid-column:2;justify-self:center;margin-left:0;text-align:center}
.site-header .brand-details {grid-column:1;justify-self:start;margin-left:42px;text-align:left}
@media(max-width:980px){.site-header .brand-details {margin-left:26px}}
@media(max-width:760px){.site-header .brand {grid-column:1;grid-row:2;justify-self:center;margin-left:0}.site-header .brand-details {grid-column:1;grid-row:1;margin-left:18px}.site-header nav {grid-row:3}.site-header::after {grid-row:4}}

/* One setup row for player details and launch actions, wrapping when needed. */
.setup-bottom {gap:12px;align-items:flex-end}
.setup-bottom .name-fields,.setup-bottom .setup-actions {display:contents}
.setup-bottom .name-fields .field {flex:1 1 90px;max-width:120px;min-width:90px}
.setup-bottom .name-fields input {width:100%;max-width:none}
.setup-bottom> .field {flex:0 0 100px}
.setup-bottom .setup-actions button {padding:12px;font-size:12px;min-height:44px}
@media(max-width:760px){.setup-bottom .name-fields .field {max-width:none}.setup-bottom .setup-actions button {flex:1 1 auto}}

.setup-bottom {justify-content:center}
.setup-bottom .name-fields .field {flex:0 1 120px}

.scenario-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
.grow-scroll{overflow:auto;max-height:65vh;border:1px solid var(--line);border-radius:8px;background:#e5dfcf;padding:14px}
.grow-board{display:grid;gap:4px;width:max-content;margin:auto}
.grow-cell{width:56px;height:56px;position:relative;background:#fffdf5;border:1px solid #b9b29e;border-radius:4px;padding:7px}
.grow-cell img{width:32px;height:32px}.grow-cell small{position:absolute;bottom:1px;left:3px;font-size:8px}
.grow-cell.locked{background:#dce9cd;border:2px solid #65836a}
.grow-cell.reserved:not(.locked){border:2px dashed #9f4d35}
.grow-cell.available:hover,.grow-cell.selected{outline:3px solid #244f40;outline-offset:-3px}
.grow-ghost{opacity:.25}.grow-records{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.grow-records>div{flex:1;background:#fffdf8;border:1px solid var(--line);border-radius:7px;padding:12px;min-width:160px}
.grow-records strong{font-size:22px;display:block}.grow-records small,.grow-designs small{display:block;font-size:11px;margin-top:5px}
.grow-designs{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.grow-designs [aria-pressed=true]{outline:3px solid var(--green)}
.grow-plan{display:flex;gap:14px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding:12px 0}
@media(max-width:980px){.scenario-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.scenario-picker{grid-template-columns:1fr}}

/* Seeded cloth colors travel with physical tiles and do not affect rules. */
.cell.occupied,.cell.protected,.rack-tile,.rack-tile.selected,.grow-cell:has(>img),.grow-cell.locked {background:var(--cloth-tile,var(--tile))}
.cell.occupied,.rack-tile,.grow-cell:has(>img){border-color:#746553}
.cell .code,.cell .coordinate,.cell .protected-tag,.rack-tile .code,.grow-cell small{color:#17281f;font-weight:750}
.cell.protected,.grow-cell.locked{border:3px solid #244f40;box-shadow:inset 0 0 0 1px #fff9}
.rack-tile:disabled{opacity:1}
.colored-gift{width:fit-content;background:var(--cloth-tile);border:1px solid #746553;border-radius:5px;padding:10px}

/* Predefined cloth tones work without inline styles. */
[data-cloth-tone="#efa65b"]{--cloth-tile:#efa65b}
[data-cloth-tone="#a9c382"]{--cloth-tile:#a9c382}
[data-cloth-tone="#df8d7e"]{--cloth-tile:#df8d7e}
[data-cloth-tone="#efd16f"]{--cloth-tile:#efd16f}
[data-cloth-tone="#a5b7d5"]{--cloth-tile:#a5b7d5}
.grow-board{display:table;border-spacing:4px;border-collapse:separate;width:max-content}.grow-board td{padding:0}

/* Keep the cloth and racks stationary while turn instructions change. */
body:has(.stable-game) .site-header{padding-top:12px}
body:has(.stable-game) .site-header .brand{font-size:44px}
body:has(.stable-game) main{padding-top:18px}
body:has(.stable-game) .game-heading{margin-bottom:12px}
body:has(.stable-game) .game-heading h1{font-size:30px;margin-bottom:4px}
body:has(.stable-game) .status-strip{padding:10px 14px;margin-bottom:14px}
.stable-game .board{max-width:490px}
.stable-game .board-wrap{padding-top:8px;padding-bottom:10px}
.stable-game .board-top{margin-bottom:8px}
.stable-game .board-legend{padding:8px 0}
.stable-game .board-note{margin-bottom:8px}
.stable-game .turn-panel{min-height:270px}
.stable-game .instruction{padding:14px;margin-bottom:14px}
.stable-game .instruction h3{font-size:16px}
.stable-game .rack-tile{min-height:65px;padding-top:6px}
.stable-game .rack-tile img{width:28px;height:28px;margin-bottom:4px}
.stable-game .player{padding:10px}
.stable-game .players-heading{margin:8px 0}
.stable-game .history{margin-top:12px;padding-top:10px}
.stable-game .objective{padding:13px;margin-bottom:9px}
.stable-game .objective p{margin:7px 0}
@media(max-width:760px){.stable-game{display:flex;flex-direction:column}.stable-game .cloth-sidebar,.stable-game .cloth-workspace{width:100%}.stable-game .cloth-sidebar{display:contents}.stable-game .turn-panel{order:-1;min-height:230px;width:100%}.stable-game .cloth-workspace{order:0}.stable-game .cloth-sidebar>aside{order:1;width:100%}.stable-game .rack-tile{min-height:65px}body:has(.stable-game) .site-header .brand{font-size:38px}}

@media(max-width:760px){.stable-game .turn-panel{height:250px;min-height:0;overflow-y:auto;margin-bottom:12px;overflow-anchor:none}}
.stable-game{overflow-anchor:none}

/* Pattern stitches open a readable symbol reference. */
.pattern .pattern-stitch{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:1px solid #8d9d84;border-radius:3px;background:var(--symbol,#eceddc);color:#263f36;font-size:12px;font-weight:750;padding:0;cursor:pointer;margin:0}
.pattern .pattern-stitch:hover{outline:2px solid var(--green);outline-offset:1px}
.pattern.cols-2{grid-template-columns:repeat(2,26px)}.pattern.cols-3{grid-template-columns:repeat(3,26px)}.pattern.cols-4{grid-template-columns:repeat(4,26px)}.pattern.cols-5{grid-template-columns:repeat(5,26px)}
.pattern .blank{width:26px;height:26px}
.symbol-popup{max-width:400px;text-align:center}
.symbol-popup .dialog-top h2{font-size:28px;letter-spacing:0}
.symbol-popup>img{display:block;width:180px;height:180px;max-width:80%;margin:24px auto}
.symbol-popup #symbol-popup-meaning{font-size:17px;font-weight:700}
.symbol-popup .fine-print{font-size:13px}

/* Bring the first text closer to the stitched header band. */
.site-header {padding-bottom:12px}
main {padding-top:20px}
.welcome {padding-top:14px}
body:has(.stable-game) main {padding-top:12px}
main::before,main::after {top:-54px}
@media(max-width:760px){main{padding-top:16px}.welcome{padding-top:8px}main::before,main::after{top:-54px}}

/* Fill short screens naturally and carry the stitched frame through the footer. */
body {display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
main {flex:1 0 auto;margin:0 auto}
.site-footer {position:relative;width:calc(100% - 64px);margin:0 auto;padding:8px 60px}
.site-footer::before,.site-footer::after {content:"";position:absolute;top:0;bottom:0;width:42px;background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2227%22%20height%3D%22160%22%20viewBox%3D%220%200%2027%20160%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23171612%22%20stroke-width%3D%22.8%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2213%20.8%2021%20.7%2017%20.9%22%3E%3Cpath%20d%3D%22M2%20-2%20Q1.75%2018%202%2040%20T2%2080%20T2%20120%20T2%20162%22%2F%3E%3Cpath%20d%3D%22M4.5%20-2%20Q4.75%2018%204.5%2040%20T4.5%2080%20T4.5%20120%20T4.5%20162%22%2F%3E%3Cpath%20d%3D%22M7%20-2%20Q6.75%2018%207%2040%20T7%2080%20T7%20120%20T7%20162%22%2F%3E%3Cpath%20d%3D%22M9.5%20-2%20Q9.75%2018%209.5%2040%20T9.5%2080%20T9.5%20120%20T9.5%20162%22%2F%3E%3Cpath%20d%3D%22M12%20-2%20Q11.75%2018%2012%2040%20T12%2080%20T12%20120%20T12%20162%22%2F%3E%3Cpath%20d%3D%22M14.5%20-2%20Q14.75%2018%2014.5%2040%20T14.5%2080%20T14.5%20120%20T14.5%20162%22%2F%3E%3Cpath%20d%3D%22M17%20-2%20Q16.75%2018%2017%2040%20T17%2080%20T17%20120%20T17%20162%22%2F%3E%3Cpath%20d%3D%22M19.5%20-2%20Q19.75%2018%2019.5%2040%20T19.5%2080%20T19.5%20120%20T19.5%20162%22%2F%3E%3Cpath%20d%3D%22M22%20-2%20Q21.75%2018%2022%2040%20T22%2080%20T22%20120%20T22%20162%22%2F%3E%3Cpath%20d%3D%22M24.5%20-2%20Q24.75%2018%2024.5%2040%20T24.5%2080%20T24.5%20120%20T24.5%20162%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');background-repeat:repeat-y;background-size:42px 160px;pointer-events:none}
.site-footer::before {left:0}.site-footer::after {right:0}
main:has(.scenario-picker) {padding-bottom:10px}
main:has(.scenario-picker) .setup-bottom {padding-top:14px;padding-bottom:14px}
main:has(.scenario-picker) .setup-tail p {margin-bottom:0}
@media(max-width:760px){.site-footer {width:calc(100% - 24px);padding:8px 43px}.site-footer::before,.site-footer::after {width:28px;background-size:28px 160px}}

/* Preserve the full-width header; remove the gap above the footer text. */
.site-header {width:100%;margin:0}
main {flex:0 0 auto}
.site-footer {flex:1 0 auto;align-content:start;align-items:flex-start}
main:has(.scenario-picker) {padding-bottom:4px}
main:has(.scenario-picker) .setup-tail {margin-bottom:0}

/* Show actual symbol arrangements for growing-cloth designs and reserved work. */
.grow-motif{display:table;border-spacing:3px;margin:10px auto}
.grow-motif-row{display:table-row}
.grow-motif-tile{display:table-cell;width:34px;height:34px;min-width:34px;padding:5px;background:#f5edda;border:1px solid #a99c82;border-radius:3px;vertical-align:middle;text-align:center}
.grow-motif-tile img{display:block;width:24px;height:24px;margin:auto}
.grow-motif-tile.blank{visibility:hidden}
.grow-motif-tile.filled{background:#dce9cd;border:2px solid #244f40}
.grow-motif-tile.needed img{opacity:.45}
.grow-designs>button{flex:1 1 190px;text-align:center;white-space:normal;max-width:280px}
.grow-plan>.grow-motif{margin:5px 10px}

.grow-cell .stitch-letter{position:absolute;bottom:3px;left:5px;font-size:11px;line-height:1;font-weight:800;color:#17281f}
.grow-motif-tile{position:relative;padding-bottom:12px;height:43px}
.grow-motif-tile .stitch-letter{position:absolute;bottom:2px;left:4px;font-size:10px;line-height:1;font-weight:800;color:#17281f;margin:0}

.grow-plan-picker{position:fixed;z-index:30;left:50%;bottom:16px;transform:translateX(-50%);width:min(680px,calc(100% - 32px));max-height:45vh;overflow:auto;display:flex;align-items:center;gap:18px;background:#fffdf5;color:#263f36;border:3px solid #244f40;border-radius:10px;box-shadow:0 8px 40px #0004;padding:14px}
.grow-plan-picker .grow-motif{flex-shrink:0;margin:0}
.grow-plan-picker p{margin:0;font-size:13px;line-height:1.5}
.grow-plan-picker p>strong:first-child{display:block;font-size:17px;margin-bottom:5px}
.plan-error{color:#8d3028}
@media(max-width:600px){.grow-plan-picker{gap:10px;padding:10px}.grow-plan-picker .grow-motif-tile{width:26px;min-width:26px;padding:3px 3px 11px}.grow-plan-picker .grow-motif-tile img{width:20px;height:20px}}