.colour-canopy{--canopy-ink:#223144;max-width:620px;margin:auto}.colour-canopy .game-toolbar{flex-wrap:nowrap;gap:6px;margin-bottom:6px}.colour-canopy .game-toolbar label{flex:1;min-width:0}.colour-canopy .game-select{width:100%;min-height:44px;padding:6px}.colour-canopy .game-button{min-height:44px;padding:7px 10px;font-size:.82rem}.canopy-info{color:var(--muted);font-variant-numeric:tabular-nums;justify-content:space-between;margin:4px 1px 8px;font-size:.8rem;display:flex}.canopy-board{aspect-ratio:1;background:linear-gradient(135deg,#ccaa7d,#ae8054);border:2px solid #72573b;border-radius:14px;width:min(100%,100svh - 270px,620px);min-width:180px;margin:0 auto;padding:8px;box-shadow:inset 0 0 0 2px #ebcf9f,inset 0 0 0 5px #ac845a,0 3px #a78360}.canopy-grid{grid-template-columns:repeat(var(--canopy-size),minmax(0,1fr));grid-template-rows:repeat(var(--canopy-size),minmax(0,1fr));isolation:isolate;background:#72573b;border-radius:4px;width:100%;height:100%;display:grid;position:relative}.canopy-leaf{background:var(--canopy-fill);justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 .6px #22314425,inset 0 1px #fff6df25}.canopy-token{pointer-events:none;width:56%;max-width:52px;height:56%;max-height:52px;display:block;position:relative}.canopy-token svg,.canopy-token:after{width:100%;height:100%;display:block;position:absolute;inset:0}.canopy-token:after{content:"";background-image:var(--canopy-art,none);opacity:0;background-position:50%;background-repeat:no-repeat;background-size:contain}.canopy-colour-0{color:#b27820;--canopy-fill:#ffbc54;--canopy-art:var(--canopy-art-0,none)}.canopy-colour-1{color:#438157;--canopy-fill:#83be73;--canopy-art:var(--canopy-art-1,none)}.canopy-colour-2{color:#087c80;--canopy-fill:#4ab6ad;--canopy-art:var(--canopy-art-2,none)}.canopy-colour-3{color:#b54e49;--canopy-fill:#ed8774;--canopy-art:var(--canopy-art-3,none)}.canopy-colour-4{color:#446a99;--canopy-fill:#83acd2;--canopy-art:var(--canopy-art-4,none)}.canopy-colour-5{color:#79548b;--canopy-fill:#b895c7;--canopy-art:var(--canopy-art-5,none)}.canopy-token path:first-child{fill:var(--canopy-fill);stroke:currentColor;stroke-width:1.3px}.colour-canopy[data-art-0] .canopy-colour-0 .canopy-token svg,.colour-canopy[data-art-1] .canopy-colour-1 .canopy-token svg,.colour-canopy[data-art-2] .canopy-colour-2 .canopy-token svg,.colour-canopy[data-art-3] .canopy-colour-3 .canopy-token svg,.colour-canopy[data-art-4] .canopy-colour-4 .canopy-token svg,.colour-canopy[data-art-5] .canopy-colour-5 .canopy-token svg{opacity:0}.colour-canopy[data-art-0] .canopy-colour-0 .canopy-token:after,.colour-canopy[data-art-1] .canopy-colour-1 .canopy-token:after,.colour-canopy[data-art-2] .canopy-colour-2 .canopy-token:after,.colour-canopy[data-art-3] .canopy-colour-3 .canopy-token:after,.colour-canopy[data-art-4] .canopy-colour-4 .canopy-token:after,.colour-canopy[data-art-5] .canopy-colour-5 .canopy-token:after{opacity:1}.canopy-leaf.is-connected{box-shadow:inset 0 1px #fff6df12}.canopy-contour{pointer-events:none;z-index:3;fill:none;stroke:#223e36;stroke-width:.055px;stroke-linecap:square;stroke-linejoin:round;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.canopy-contour .canopy-contour-keyline{stroke:#fff4d7;stroke-width:.12px}.canopy-leaf.is-root:before{content:"";z-index:4;background:#223e36;border:1.5px solid #fff4d7;border-radius:50% 50% 50% 0;width:20%;min-width:5px;max-width:11px;height:20%;min-height:5px;max-height:11px;position:absolute;top:3px;left:3px;box-shadow:-3px -3px 0 -1px #223e36}.canopy-leaf.is-growing:after{content:"";pointer-events:none;background:#fff4d7;animation:.22s ease-out both canopy-absorb;position:absolute;inset:0}@keyframes canopy-absorb{0%{opacity:.5}to{opacity:0}}.canopy-board[data-phase=won]{border-color:#416f51;box-shadow:inset 0 0 0 2px #edc491,inset 0 0 0 5px #a57649,0 3px #709270}.canopy-board[data-phase=lost]{border-color:#805440}.canopy-palette{grid-template-columns:repeat(6,minmax(44px,1fr));gap:5px;max-width:420px;margin:10px auto 0;display:grid}.canopy-choice{background:var(--canopy-fill);cursor:pointer;touch-action:manipulation;border:1.5px solid #8c7351;border-radius:10px;justify-content:center;align-items:center;min-width:44px;min-height:52px;padding:3px 5px 10px;display:flex;position:relative;box-shadow:inset 0 1px #fffdf3,0 3px #c3a981}.canopy-choice .canopy-token{width:34px;height:34px}.canopy-choice .canopy-key{color:#223144;font-size:10px;font-weight:800;line-height:12px;position:absolute;bottom:1px;right:4px}.canopy-choice.is-current{background:var(--canopy-fill);border-color:#223144;box-shadow:inset 0 0 0 1.5px #223144,0 3px #c3a981}.canopy-choice:active{transform:translateY(2px);box-shadow:0 1px #c3a981}.canopy-choice:focus-visible{outline-offset:3px;outline:3px solid #117b77}.canopy-choice:disabled{opacity:.68;cursor:default}.colour-canopy .game-status{text-align:center;min-height:20px;margin:10px 0 0;font-size:.83rem}.canopy-sr{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (max-width:350px){.colour-canopy .game-toolbar{gap:4px}.colour-canopy .game-button{padding:7px}.canopy-palette{gap:3px}.canopy-board{padding:7px}}@media (min-width:761px){.canopy-board{width:min(100%,calc(var(--play-height,100svh) - 270px),620px);padding:10px}.canopy-info{font-size:.9rem}.canopy-palette{max-width:420px}.canopy-choice{min-height:56px}.canopy-choice .canopy-token{width:38px;height:38px}}@media (prefers-reduced-motion:reduce){.canopy-leaf.is-growing:after{opacity:0;animation:none}.canopy-choice:active{transform:none}}