.game-launch{background:#e9efdf;border:1px solid #d4dfc6;border-radius:24px;padding:28px;text-align:center;margin:24px 0}.game-launch img{width:180px;height:150px;object-fit:cover;border-radius:20px}.game-launch h2{margin:12px 0;font-size:28px}.game-launch p{max-width:600px;margin:12px auto}.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.game-card{border:1px solid #dce4d7;background:#eef2df;border-radius:22px;padding:26px}.game-card h2{font-size:28px}.game-card .game-icon{font-size:64px}.play-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;padding:0;background:#fffcf4;overflow:hidden}.play-dialog::backdrop{background:#173d31}.play-shell{width:100%;height:100dvh;display:flex;flex-direction:column;background:#fffcf4;color:#173d31;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.play-shell:fullscreen{height:100%;width:100%}.play-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-bottom:1px solid #dce4d7;flex-shrink:0}.play-header strong{font:900 18px 'Nunito',sans-serif}.play-header button,.colour-tools button{min-height:44px;padding:8px 12px;border:1px solid #b7c8b0;border-radius:9px;color:#173d31;background:#fff;font:800 13px 'Nunito',sans-serif;cursor:pointer}.play-header .exit-play{background:#104e3b;color:white}.play-header>div{display:flex;gap:6px}.play-content{flex:1;min-height:0;overflow:hidden}.screen-status{margin:0;padding:0 12px;font-size:12px;min-height:0}.screen-status:empty{display:none}.play-content .puzzle-game{height:100%;box-shadow:none;border:0;border-radius:0;padding:8px 12px;display:flex;flex-direction:column;overflow:hidden}.play-content .puzzle-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.play-content .puzzle-toolbar legend,.play-content .puzzle-levels small{display:none}.play-content .puzzle-game button{min-height:40px;padding:6px 10px;font-size:13px}.play-content .puzzle-tools{margin:0}.play-content .puzzle-progress{margin-top:7px;gap:8px;font-size:12px}.play-content .puzzle-progress>span:last-child{display:none}.play-content .puzzle-instructions{margin:4px 0;font-size:12px;line-height:1.4}.play-content .puzzle-status{font-size:12px;min-height:18px;margin:5px 0 0;line-height:1.4}.play-content .puzzle-play{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative}.play-content .puzzle-board-wrap{width:var(--fit-board,240px);flex-shrink:0}.play-content .puzzle-board{width:100%;border-width:3px;border-radius:10px;box-shadow:none}.play-content .puzzle-tray-wrap{width:var(--fit-tray,260px);flex-shrink:0}.play-content .puzzle-tray-wrap h2{display:none}.play-content .puzzle-tray{grid-template-columns:repeat(var(--tray-cols,4),minmax(0,1fr))!important;gap:6px}.play-content .puzzle-game .puzzle-piece{min-height:0;padding:0;border-width:1px;box-shadow:0 2px 0 #aa9468}.play-content .puzzle-game #puzzle-slots button{min-height:0;padding:0}.play-content .puzzle-piece span{width:15px;height:15px;line-height:15px;font-size:9px}.play-content .puzzle-game.complete .puzzle-tray-wrap{display:none}.play-content .puzzle-win{position:absolute;inset:auto 8px 8px;background:#fffcf4f2;border:1px solid #d4dfc6;border-radius:16px;padding:10px;z-index:2}.play-content .puzzle-win h2{font-size:22px;margin:4px}.play-content .puzzle-win p,.play-content .puzzle-win>span{display:none}.play-content .puzzle-ghost{z-index:10000}.colour-game{height:100%;display:flex;flex-direction:column;min-height:0;padding:8px 12px;gap:8px}.colour-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}.colour-tools button[aria-pressed=true]{outline:3px solid #e18a18;outline-offset:1px}.colour-tools .swatch{width:42px;height:42px;min-height:42px;padding:0;border:3px solid white;box-shadow:0 0 0 1px #bac7af;border-radius:50%;font-size:0}.colour-stage{flex:1;min-height:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.colour-art{position:relative;aspect-ratio:1;width:min(100%,var(--colour-size,400px));max-height:100%;background:white;border:2px solid #bac7af;border-radius:18px;overflow:hidden}.colour-art svg,.colour-art canvas{display:block;width:100%;height:100%}.colour-art canvas{position:absolute;inset:0;touch-action:none;pointer-events:none}.colour-art.brush canvas{pointer-events:auto}.colour-art [data-paint]{cursor:pointer;touch-action:manipulation}.colour-status{font-size:12px;margin:0;text-align:center;min-height:18px}.colour-tools select{min-height:42px;border:1px solid #bac7af;border-radius:8px;background:white;color:#173d31;padding:5px}.play-shell button:focus-visible,.colour-art [data-paint]:focus-visible{outline:3px solid #e18a18;outline-offset:2px}
@media(min-aspect-ratio:6/5){.play-content .puzzle-play{flex-direction:row;gap:18px}}
@media(max-width:400px){.play-header{padding:6px 8px}.play-header strong{font-size:14px}.play-header button{font-size:12px;padding:6px 8px}.play-content .puzzle-game{padding:6px 8px}.play-content .puzzle-game button{font-size:12px;padding:5px 8px}.colour-tools .swatch{width:36px;height:36px;min-height:36px}.colour-game{padding:6px 8px}.colour-tools{gap:5px}}
.puzzle-game[hidden],.colour-game[hidden]{display:none!important}

.play-dialog{z-index:2147483647;box-sizing:border-box}.play-dialog[hidden]{display:none!important}.play-dialog:fullscreen{width:100vw;height:100dvh;background:#fffcf4}.play-shell{box-sizing:border-box;overflow:hidden}

.colour-art{aspect-ratio:3/4}.colour-art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.colour-art canvas{pointer-events:auto;mix-blend-mode:multiply}

/* Tablet compatibility: no dependence on dvh, aspect-ratio or inert support. */
.play-shell{height:100vh;height:100dvh;min-height:0}
body.game-is-open> :not(.play-dialog){visibility:hidden!important}
.play-dialog[hidden],.colour-game[hidden],.puzzle-game[hidden]{display:none!important}
.colour-art{flex:none;min-width:0;min-height:0}
.colour-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
@media(min-aspect-ratio:6/5){.colour-game{display:grid;grid-template-columns:190px minmax(0,1fr);grid-template-rows:auto 1fr auto}.colour-tools{grid-column:1;align-content:start}.colour-stage{grid-column:2;grid-row:1/3;height:100%;min-height:0}.colour-status{grid-column:1/-1}.colour-tools .swatch{width:42px;height:42px}}