@import url('/game-modules/look/fonts.css');
/* A sunlit tabletop: ceramic faces, forest ink, carved wood. */
:root {
  color-scheme:light;--tg-paper:oklch(97% .016 85);--tg-card:oklch(99% .011 85);--tg-ink:oklch(31% .046 158);--tg-muted:oklch(45% .031 148);--tg-accent:oklch(36% .06 155);--tg-hover:oklch(29% .054 155);--tg-line:oklch(64% .029 89);--tg-soft:oklch(91% .025 96);--tg-white:oklch(99% .007 85);--tg-alert:oklch(43% .1 35);--tg-gold:oklch(68% .09 79);
  --tg-wood:oklch(64% .076 69);--tg-wood-light:oklch(76% .061 77);--tg-wood-dark:oklch(47% .068 64);--tg-shadow-ink:oklch(25% .032 65 / .22);--tg-backdrop:oklch(25% .03 155 / .45);
  --tg-1:.25rem;--tg-2:.5rem;--tg-3:.75rem;--tg-4:1rem;--tg-5:1.25rem;--tg-6:1.5rem;--tg-8:2rem;--tg-12:3rem;--tg-target:2.75rem;
  --tg-radius:.75rem;--tg-round:1.5rem;--tg-pill:99rem;--tg-small:.75rem;--tg-body:.875rem;--tg-title:1.25rem;--tg-heading:clamp(1.75rem,4vw,2.5rem);--tg-fast:150ms;--tg-ease:cubic-bezier(.2,.7,.3,1);
  --tg-shadow:0 .75rem 2.5rem var(--tg-shadow-ink);--tg-tile-shadow:0 .25rem .35rem var(--tg-shadow-ink),inset 0 .125rem .125rem var(--tg-white);
  --tg-wood-grain:repeating-linear-gradient(2deg,transparent 0 .3rem,oklch(40% .06 65 / .14) .31rem .35rem,transparent .36rem .6rem),repeating-linear-gradient(178deg,transparent 0 .7rem,oklch(90% .04 80 / .22) .72rem .77rem,transparent .8rem 1.2rem);
}
*{box-sizing:border-box}html,body{margin:0;height:100%;}body{background:var(--tg-paper);color:var(--tg-ink);font:400 var(--tg-body)/1.5 'DM Sans',Arial,sans-serif;overscroll-behavior:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--tg-accent);outline-offset:3px}button:disabled{opacity:.5}button{border:1px solid var(--tg-line);border-radius:var(--tg-radius);background:var(--tg-card);min-height:var(--tg-target);padding:var(--tg-2) var(--tg-4);font-weight:650}button:hover:enabled{background:var(--tg-soft)}button:active:enabled{transform:translateY(1px)}button svg,a svg{width:var(--tg-5);height:var(--tg-5);flex:none}p,h1,h2,h3{margin:0}h2,h3{font-family:Georgia,serif;line-height:1.1}svg{display:block}[hidden]{display:none!important}::selection{background:var(--tg-accent);color:var(--tg-white)}main{padding:0;margin:0;max-width:none}.site-skip{position:fixed;left:var(--tg-4);top:-10rem;z-index:100;background:var(--tg-card);padding:var(--tg-3)}.site-skip:focus{top:var(--tg-3)}
#game-root{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overflow:hidden;}
.tg-header{display:flex;align-items:center;justify-content:space-between;gap:var(--tg-3);padding:var(--tg-2) clamp(.75rem,3vw,2rem);border-bottom:1px solid var(--tg-line);background:var(--tg-paper)}.tg-header h1{display:flex;align-items:center;gap:var(--tg-2);font:700 var(--tg-title)/1.1 Georgia,serif;white-space:nowrap}.tg-header h1 svg{width:var(--tg-5);height:var(--tg-5)}.tg-header>a,.tg-header>button{display:flex;align-items:center;gap:var(--tg-2);min-height:var(--tg-target);background:transparent;border:0;padding:var(--tg-2)}
.tg-playfield{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;width:min(100%,58rem);padding:var(--tg-3) var(--tg-4);margin:auto;height:100%;gap:var(--tg-2)}.tg-statusbar{display:flex;align-items:center;justify-content:space-between;gap:var(--tg-4);width:min(100%,35rem);margin-inline:auto}.tg-eyebrow{display:block;font-size:var(--tg-small);font-weight:700;letter-spacing:.1em;color:var(--tg-muted)}.tg-statusbar h2{font-size:var(--tg-title);margin-top:var(--tg-1)}.tg-progress{text-align:right;font-size:var(--tg-small);font-variant-numeric:tabular-nums;min-width:6rem}.tg-progress progress{display:block;width:100%;height:var(--tg-1);accent-color:var(--tg-accent);margin-top:var(--tg-2);border:0;border-radius:var(--tg-pill);overflow:hidden}.tg-progress progress::-webkit-progress-bar{background:var(--tg-line)}.tg-progress progress::-webkit-progress-value{background:var(--tg-accent)}
.tg-board-space{position:relative;display:grid;place-items:center;container-type:size;min-height:0;isolation:isolate}.tg-board{position:relative;width:min(100cqw,100cqh,35rem);height:min(100cqw,100cqh,35rem);background:radial-gradient(ellipse,var(--tg-soft),transparent 72%);border-radius:var(--tg-round)}.tg-tile{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);min-height:0;padding:0;display:grid;place-items:center;border-radius:14%;transition:transform var(--tg-fast) var(--tg-ease);opacity:1!important}.tg-tile.is-covered{filter:brightness(.72);border-style:dashed;cursor:default}.tg-tile.is-hint{outline:3px solid var(--tg-accent);outline-offset:3px}.tg-tile.is-hint::after{content:'✦';position:absolute;inset-block-start:var(--tg-1);inset-inline-end:var(--tg-1);background:var(--tg-card);border-radius:var(--tg-pill);padding-inline:var(--tg-1);font-weight:700}.tg-tile:not(:disabled):hover{transform:translateY(-3px)}.tg-tile:focus-visible{z-index:10!important}.tg-flying{position:fixed;z-index:20!important;pointer-events:none;transform-origin:top left}.tg-cleared{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;pointer-events:none;gap:var(--tg-4);font:italic var(--tg-heading)/1.1 Georgia,serif}.tg-cleared .tg-art{width:8rem;height:8rem}
.tg-dock{width:min(100%,32rem);margin-inline:auto}.tg-tray-head{display:flex;justify-content:space-between;font-size:var(--tg-small);font-weight:700;letter-spacing:.06em;margin-bottom:var(--tg-2);font-variant-numeric:tabular-nums}.tg-tray{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--tg-1);padding:var(--tg-2);border-radius:var(--tg-radius);border:2px solid var(--tg-wood-dark);background-image:var(--tg-wood-grain),linear-gradient(100deg,var(--tg-wood-light),var(--tg-wood),var(--tg-wood-light));box-shadow:inset 0 2px 0 var(--tg-wood-light),0 3px 0 var(--tg-wood-dark)}.tg-slot{aspect-ratio:1;display:grid;place-items:center;min-width:0;border:1px solid var(--tg-wood-dark);border-radius:var(--tg-2);background:oklch(40% .06 65 / .22);box-shadow:inset 0 2px 4px var(--tg-shadow-ink)}.tg-token{display:grid;place-items:center;width:100%;height:100%;border-radius:var(--tg-2)}.tg-tray.is-tight{outline:2px solid var(--tg-wood-dark);outline-offset:2px}.tg-tray.is-full{outline-color:var(--tg-alert)}.tg-message{font-size:var(--tg-body);color:var(--tg-muted);text-align:center;min-height:3em;display:grid;place-items:center;padding-block:var(--tg-2)}.tg-actions{display:flex;justify-content:center;gap:var(--tg-3)}.tg-actions button{display:flex;align-items:center;justify-content:center;gap:var(--tg-2);min-width:7.5rem}.tg-save-warning{color:var(--tg-alert);font-size:var(--tg-small);margin-top:var(--tg-2)}
.tg-dialog{width:min(calc(100% - 1.5rem),39rem);max-height:calc(100dvh - 2rem);padding:var(--tg-6);color:var(--tg-ink);background:var(--tg-paper);border:1px solid var(--tg-line);border-radius:var(--tg-round);box-shadow:var(--tg-shadow);overflow-y:auto;overscroll-behavior:contain;scrollbar-color:var(--tg-line) var(--tg-paper)}.tg-dialog::backdrop{background:var(--tg-backdrop)}.tg-dialog-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--tg-3);min-height:var(--tg-target)}.tg-dialog-top button{font-size:var(--tg-title);padding:0;width:var(--tg-target);border:0;background:transparent}.tg-dialog h2{font-size:var(--tg-heading);letter-spacing:-.035em;margin-bottom:var(--tg-3)}.tg-panel-copy{color:var(--tg-muted);margin-block:var(--tg-3);max-width:55ch}.tg-primary{background:var(--tg-accent);color:var(--tg-white);border-color:var(--tg-accent)}.tg-primary:hover:enabled{background:var(--tg-hover)}.tg-wide{width:100%;margin-top:var(--tg-3)}.tg-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--tg-2);margin-block:var(--tg-5)}.tg-tabs button{display:flex;justify-content:center;align-items:center;gap:var(--tg-2)}.tg-tabs [aria-pressed=true]{background:var(--tg-accent);border-color:var(--tg-accent);color:var(--tg-white)}.tg-tabs span{font-size:var(--tg-small)}.tg-selection{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--tg-5);align-items:center}.tg-selection h3{font-size:var(--tg-heading);margin-block:var(--tg-2)}.tg-selection p,.tg-selection-state{font-size:var(--tg-small);color:var(--tg-muted)}.tg-selection-state{display:block;margin-top:var(--tg-3)}.tg-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tg-2)}.tg-levels button{position:relative;aspect-ratio:1;min-width:0;padding:var(--tg-1);font-variant-numeric:tabular-nums}.tg-levels button span{position:absolute;right:var(--tg-1);bottom:0;font-size:var(--tg-small)}.tg-levels [aria-pressed=true],.tg-shapes [aria-pressed=true]{outline:2px solid var(--tg-accent);outline-offset:1px;background:var(--tg-soft)}.tg-panel-links{display:flex;gap:var(--tg-3);justify-content:space-between;border-top:1px solid var(--tg-line);margin-top:var(--tg-5);padding-top:var(--tg-2)}.tg-panel-links button,.tg-text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:.25em;display:inline-flex;align-items:center;justify-content:center;min-height:var(--tg-target);padding:var(--tg-2);font-size:var(--tg-body)}.tg-panel-status{color:var(--tg-alert);margin-top:var(--tg-3)}.tg-panel-status:empty{display:none}.tg-menu-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--tg-3);margin-block:var(--tg-5)}.tg-rules{padding-left:var(--tg-5);display:grid;gap:var(--tg-5);margin-block:var(--tg-6)}.tg-rules p{color:var(--tg-muted);margin-top:var(--tg-1)}.tg-fine{font-size:var(--tg-small);color:var(--tg-muted);margin-block:var(--tg-3)}.tg-setting{display:flex;align-items:center;gap:var(--tg-3);width:100%}.tg-setting span{margin-left:auto}.tg-result-art{display:grid;place-items:center}.tg-result-art .tg-art{width:5rem;height:5rem}.tg-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--tg-2)}.tg-shapes button{display:grid;place-items:center;gap:var(--tg-2);padding:var(--tg-3) var(--tg-1);font-size:var(--tg-small)}.tg-shape{width:2.75rem;height:2.75rem;display:block}.tg-shape svg{width:100%;height:100%}.tg-shape rect{fill:var(--tg-soft);stroke:var(--tg-muted);stroke-width:.12}.tg-shape .tg-shape-layer-1{fill:var(--tg-line)}.tg-shape :is(.tg-shape-layer-2,.tg-shape-layer-3){fill:var(--tg-accent)}
.game-account-saves{margin-top:var(--tg-4);border-top:1px solid var(--tg-line);padding-top:var(--tg-3)}.game-account-saves summary{min-height:var(--tg-target);cursor:pointer;font-weight:700}.game-account-saves p{margin-block:var(--tg-3)}.game-account-saves div{display:flex;flex-wrap:wrap;gap:var(--tg-2)}.game-account-saves div p{width:100%}.game-account-saves a{padding:var(--tg-2);min-height:var(--tg-target);text-decoration:underline}
@media(min-width:800px){.tg-playfield{padding:var(--tg-4) var(--tg-6)}}

@media(max-width:400px){.tg-header{padding-inline:var(--tg-2)}.tg-header>a span,.tg-header>button span{display:none}.tg-playfield{padding-inline:var(--tg-3)}.tg-dialog{padding:var(--tg-4)}.tg-selection{grid-template-columns:1fr;gap:var(--tg-3)}.tg-selection h3{font-size:var(--tg-title)}.tg-selection-state{margin-top:var(--tg-1)}.tg-levels{grid-template-columns:repeat(4,1fr)}.tg-levels button{aspect-ratio:auto}.tg-tabs button{font-size:var(--tg-small);padding-inline:var(--tg-2)}}
/* Exception for short windows and enlarged text: scroll instead of clipping controls. */

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
@media(forced-colors:active){.tg-tile,.tg-token,.tg-slot,.tg-tray,.tg-dialog{border:2px solid CanvasText}.tg-tile.is-covered{filter:none;border-style:dashed}.tg-tile.is-hint{outline-color:Highlight}.tg-dialog::backdrop{background:Canvas}.tg-levels [aria-pressed=true],.tg-shapes [aria-pressed=true]{outline-color:Highlight}}
/* Compact phones keep board, tray and frequent actions together. */
@media(max-width:679px) and (max-height:650px) and (orientation:portrait){
 #game-root{overflow:auto}.tg-header{padding-block:var(--tg-1)}.tg-playfield{padding-block:var(--tg-2);gap:var(--tg-1)}.tg-message{font-size:var(--tg-small);min-height:2.5em;padding-block:var(--tg-1)}
}
/* Disjoint groves can sit side by side in a short viewport; logical blockers never change. */
@media(min-width:480px) and (max-height:650px) and (orientation:landscape){
 #game-root{overflow:auto}.tg-header{padding-block:0}.tg-playfield{grid-template-columns:minmax(0,1fr) minmax(12rem,.7fr);grid-template-rows:auto minmax(0,1fr);gap:var(--tg-2);padding:var(--tg-2) var(--tg-3)}.tg-statusbar{grid-column:1/-1;width:100%;max-width:none}.tg-statusbar [data-mode]{display:none}.tg-statusbar h2{margin:0;font-size:var(--tg-title)}.tg-board-space{grid-column:1;grid-row:2}.tg-dock{grid-column:2;grid-row:2;align-self:center}.tg-message{font-size:var(--tg-small);min-height:2.5em;padding-block:var(--tg-1)}.tg-actions{gap:var(--tg-2)}.tg-actions button{min-width:0;flex:1;padding-inline:var(--tg-2)}
 .tg-board[data-layout=clusters]{aspect-ratio:12.35 / 6.35;width:min(100cqw,calc(100cqh * 1.945),35rem);height:auto}.tg-board[data-layout=clusters] .tg-tile{top:var(--wide-y);height:29.92126%}
}
/* Enlarged text and exceptionally small viewports keep controls reachable by scrolling. */
@media(max-height:280px){.tg-playfield{min-height:15rem}#game-root{overflow:auto}}

/* Verification shares the garden typography and remains reachable in result dialogs. */
.tg-verification{font-size:var(--tg-small);color:var(--tg-muted);margin-top:var(--tg-2);line-height:1.4}
.tg-verification button{margin-top:var(--tg-2);font-size:var(--tg-small)}
.tg-header>a,.tg-header>button{min-width:var(--tg-target);justify-content:center}

/* Keep dialog actions and verification reachable while longer content scrolls. */
.tg-dialog[open]{display:flex;flex-direction:column;overflow:hidden}
.tg-dialog-top,.tg-dialog-footer{flex:none}
.tg-dialog-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:var(--tg-line) var(--tg-paper)}
.tg-dialog-footer:empty{display:none}
.tg-dialog-footer .tg-wide{margin-top:var(--tg-2)}
@media(orientation:landscape) and (max-height:650px){.tg-dialog{padding:var(--tg-3) var(--tg-6)}.tg-dialog-top{margin-bottom:var(--tg-2)}}
@media(orientation:landscape) and (max-height:650px){
 .tg-dialog:is([data-screen=won],[data-screen=lost]) .tg-result-art{display:none}
 .tg-dialog:is([data-screen=won],[data-screen=lost]) h2{font-size:1.75rem;margin-bottom:var(--tg-2)}
 .tg-dialog:is([data-screen=won],[data-screen=lost]) .tg-panel-copy{margin-block:var(--tg-2)}
}

.tg-dialog-top nav{display:flex;flex-wrap:wrap;gap:var(--tg-2)}