:root{--bg:#f0e6d2;--bg-deep:#e9dcc3;--ink:#33291f;--ink-soft:#77685a;--sage:#7d8b6f;--sage-deep:#1f2d1e;--terracotta:#b0703c;--gold:#e8c99a;--font-display:"Frank Ruhl Libre", "Georgia", serif;--font-body:"Assistant", -apple-system, "Helvetica Neue", sans-serif;--font-hand:"Amatic SC", cursive}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);min-height:100svh;margin:0;line-height:1.55}.games__back{z-index:10;background:var(--sage-deep);color:var(--bg);letter-spacing:.06em;border-radius:999px;padding:.45rem .9rem;font-size:.85rem;font-weight:600;text-decoration:none;position:fixed;top:1rem;right:1rem}.games__page{text-align:center;flex-direction:column;align-items:center;max-width:34rem;margin:0 auto;padding:4.5rem 1.4rem 3rem;display:flex}.games__hero{flex-direction:column;align-items:center;display:flex}.games__cutout{filter:drop-shadow(0 18px 30px #33291f40);width:min(58vw,240px)}.games__title{font-family:var(--font-hand);margin:.6rem 0 0;font-size:clamp(3.4rem,17vw,6rem);font-weight:700;line-height:.95}.games__sub{font-family:var(--font-hand);color:var(--ink-soft);margin:.4rem 0 0;font-size:clamp(1.6rem,7.5vw,2.6rem);font-weight:400}.games__grid{gap:1.4rem;width:100%;max-width:24rem;margin-top:2.6rem;display:grid}.game{width:100%;font:inherit;color:inherit;text-align:center;cursor:pointer;background:var(--bg-deep);border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);border-radius:18px;padding:1.2rem 1.2rem 1.5rem;transition:transform .25s,box-shadow .25s;position:relative;box-shadow:0 14px 30px -18px #33291f80}.game:not([disabled]):hover{transform:translateY(-3px);box-shadow:0 20px 34px -18px #33291f99}.game[disabled]{cursor:default;opacity:.8}.game__board{aspect-ratio:1;background:var(--sage-deep);color:var(--gold);border-radius:12px;place-items:center;display:grid}.game__icon{opacity:.85;font-size:clamp(3rem,16vw,4.5rem)}.game__name{font-family:var(--font-hand);margin:1rem 0 0;font-size:2.6rem;font-weight:700;line-height:1}.game__blurb{color:var(--ink-soft);margin:.3rem 0 0;font-size:.95rem}.game__soon{background:var(--terracotta);color:var(--bg);letter-spacing:.1em;border-radius:999px;padding:.25rem .7rem;font-size:.75rem;font-weight:700;position:absolute;top:.9rem;left:.9rem}.games__footer{font-family:var(--font-hand);color:var(--terracotta);margin-top:3.5rem;font-size:1.6rem;font-weight:700}body.is-playing{overflow:hidden}.play{z-index:20;background:var(--bg);flex-direction:column;display:flex;position:fixed;inset:0}.play[hidden]{display:none}.play__bar{align-items:center;gap:1rem;padding:.9rem 1.2rem;display:flex}.play__back{background:var(--sage-deep);color:var(--bg);font:600 .85rem var(--font-body);letter-spacing:.06em;cursor:pointer;border:0;border-radius:999px;padding:.45rem .9rem}.play__title{font-family:var(--font-hand);margin:0;font-size:2.4rem;font-weight:700;line-height:1}.play__stage{flex:1;justify-content:center;align-items:center;min-height:0;padding:.5rem 1rem 1.5rem;display:flex}.snake{flex-direction:column;align-items:center;gap:.9rem;width:100%;display:flex}.snake__board{aspect-ratio:1;background:var(--sage-deep);touch-action:none;border-radius:14px;width:min(100%,60svh,520px);position:relative;overflow:hidden;box-shadow:0 24px 50px -24px #33291f99}.snake__board canvas{width:100%;height:100%;display:block}.g-overlay{text-align:center;color:var(--bg);background:#1f2d1ed6;flex-direction:column;justify-content:center;align-items:center;gap:1rem;padding:1.2rem;display:flex;position:absolute;inset:0}.g-overlay[hidden]{display:none}.g-msg{font-family:var(--font-hand);margin:0;font-size:clamp(2rem,8vw,2.8rem);font-weight:700;line-height:1.05}.g-btn{background:var(--gold);color:var(--sage-deep);font:700 1rem var(--font-body);cursor:pointer;border:0;border-radius:999px;padding:.6rem 1.7rem}.g-score{letter-spacing:.08em;color:var(--ink-soft);align-items:baseline;gap:.45rem;margin:0;font-size:.85rem;display:flex}.g-score b{color:var(--ink);margin-inline-end:.8rem;font-size:1.25rem}.g-mute{cursor:pointer;background:0 0;border:0;padding:0 .2rem;font-size:1.1rem}.snake__pad{grid-template-rows:repeat(2,3.4rem);grid-template-columns:repeat(3,3.4rem);gap:.4rem;display:grid}.snake__pad button{background:var(--sage-deep);color:var(--gold);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;border-radius:14px;font-size:1.1rem}.snake__pad [data-dir=up]{grid-area:1/2}.snake__pad [data-dir=left]{grid-area:2/1}.snake__pad [data-dir=down]{grid-area:2/2}.snake__pad [data-dir=right]{grid-area:2/3}@media (hover:hover) and (width>=700px){.snake__pad{display:none}}.flappy{flex-direction:column;align-items:center;gap:.9rem;width:100%;display:flex}.flappy__board{aspect-ratio:9/14;background:var(--sage-deep);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;border-radius:14px;width:min(100%,47.36svh,420px);position:relative;overflow:hidden;box-shadow:0 24px 50px -24px #33291f99}.flappy__board canvas{width:100%;height:100%;display:block}.memory{flex-direction:column;align-items:center;gap:.9rem;width:100%;display:flex}.memory__board{aspect-ratio:1;border-radius:14px;width:min(100%,74svh,520px);position:relative;overflow:hidden}.memory__grid{perspective:900px;grid-template-columns:repeat(4,1fr);gap:clamp(.35rem,1.6vw,.6rem);height:100%;display:grid}.memory__card{cursor:pointer;transform-style:preserve-3d;-webkit-tap-highlight-color:transparent;background:0 0;border:0;padding:0;transition:transform .45s cubic-bezier(.2,.7,.2,1);position:relative}.memory__card.is-open,.memory__card.is-matched{transform:rotateY(180deg)}.memory__face{backface-visibility:hidden;border-radius:10px;position:absolute;inset:0;overflow:hidden}.memory__face--back{background:var(--sage-deep);box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent);place-items:center;display:grid}.memory__ring{aspect-ratio:1;border:3px solid var(--gold);width:38%;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--gold) 40%, transparent);border-radius:50%;position:relative}.memory__ring:after{content:"";aspect-ratio:1;background:var(--bg);width:26%;box-shadow:0 0 0 2px var(--gold);border-radius:2px;position:absolute;top:-3px;left:50%;translate:-50% -50%;rotate:45deg}.memory__face--front{background:var(--bg-deep);transform:rotateY(180deg)}.memory__face--front img{object-fit:cover;width:100%;height:100%;display:block}.memory__card.is-matched .memory__face--front{box-shadow:inset 0 0 0 3px var(--gold)}.memory__card.is-matched{animation:.5s memory-pop}@keyframes memory-pop{50%{transform:rotateY(180deg)scale(1.08)}to{transform:rotateY(180deg)}}.ttt{flex-direction:column;align-items:center;gap:.9rem;width:100%;display:flex}.ttt__board{aspect-ratio:1;border-radius:14px;width:min(100%,68svh,460px);position:relative;overflow:hidden}.ttt__grid{grid-template-columns:repeat(3,1fr);gap:clamp(.4rem,1.8vw,.7rem);height:100%;display:grid}.ttt__cell{background:var(--sage-deep);cursor:pointer;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--gold) 25%, transparent);-webkit-tap-highlight-color:transparent;border:0;border-radius:12px;padding:0;transition:box-shadow .25s;position:relative}.ttt__cell:not(.is-taken):hover{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--gold) 70%, transparent)}.ttt__cell.is-taken{cursor:default}.ttt__cell img{object-fit:contain;filter:drop-shadow(0 6px 10px #00000059);width:84%;height:84%;animation:.35s cubic-bezier(.2,.9,.3,1.3) ttt-drop;position:absolute;inset:8%}.ttt__cell.is-win{box-shadow:inset 0 0 0 3px var(--gold);background:color-mix(in srgb, var(--sage-deep) 80%, var(--gold))}.ttt__status{min-height:1.4em;font-family:var(--font-hand);color:var(--ink-soft);margin:0;font-size:1.7rem;font-weight:700}@keyframes ttt-drop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.ttt__seg{background:color-mix(in srgb, var(--bg) 12%, transparent);border-radius:999px;gap:.35rem;padding:.25rem;display:flex}.ttt__seg button{color:var(--bg);font:600 .85rem var(--font-body);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.45rem .9rem;transition:background .2s,color .2s}.ttt__seg button.is-on{background:var(--gold);color:var(--sage-deep)}
