@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap";:root{color:#302b24;font-synthesis:none;background:#e9dfc9;font-family:DM Mono,monospace}*{box-sizing:border-box}body{min-width:320px;margin:0}button,select{font:inherit}button{cursor:pointer}.catalog,.game{background-color:#f5eddc;background-image:radial-gradient(#d7c8a8 1px,#0000 1px),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:7px 7px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;min-height:100vh;padding:clamp(24px,5vw,72px)}header{text-align:center;max-width:700px;margin:0 auto 32px}.eyebrow{letter-spacing:.16em;color:#a2462a;text-transform:uppercase;margin:0 0 8px;font-size:.72rem;font-weight:600}h1,h2{margin:0;font-family:Fraunces,Georgia,serif}h1{font-size:clamp(2.4rem,6vw,4.8rem);line-height:1}header>p:last-child{line-height:1.6}.mode-picker{flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:36px;display:flex}.mode-picker button,.mode-picker select{color:inherit;background:#fcf7eb;border:1px solid #9a8d76;padding:12px 18px}.mode-picker button.active{color:#fff;background:#3e6b58;border-color:#3e6b58}.mode-picker small{opacity:.72}.puzzle-grid{grid-template-columns:repeat(3,1fr);gap:16px;max-width:980px;margin:auto;display:grid}.puzzle-card{text-align:left;color:#312d26;background:#fffaf0;border:2px solid #312d26;flex-direction:column;gap:9px;min-height:150px;padding:20px;transition:transform .15s,box-shadow .15s;display:flex;box-shadow:5px 5px #c9b998}.puzzle-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px #a2462a}.puzzle-card span{font-family:Fraunces,serif;font-size:1.35rem}.puzzle-card strong{text-transform:uppercase;color:#a2462a;font-size:.76rem}.puzzle-card em{color:#3e6b58;margin-top:auto;font-size:.75rem}.game{padding-top:32px}.game-header{text-align:center;grid-template-columns:1fr 2fr 1fr;align-items:center;max-width:1100px;margin-bottom:28px;display:grid}.game-header h1{font-size:clamp(2rem,4vw,3.2rem)}.back{background:0 0;border:0;justify-self:start;text-decoration:underline}.timer{background:#fffaf0;border:2px solid #312d26;justify-self:end;padding:10px 14px;font-size:1.1rem}.timer.danger{color:#a2462a}.game-layout{grid-template-columns:minmax(0,1fr) 240px;align-items:start;gap:32px;max-width:1100px;margin:auto;display:grid}.board-wrap{position:relative}.board{aspect-ratio:1;touch-action:none;background:#fffaf0;border:3px solid #312d26;gap:2px;padding:clamp(7px,1.5vw,16px);display:grid}.cell{color:#302b24;aspect-ratio:1;background:0 0;border:0;border-radius:50%;min-width:0;padding:0;font-size:clamp(.7rem,2.2vw,1.4rem);font-weight:500}.cell.selected{background:#eadb9a}.cell.found{color:#123927;background:#8bb39c}.game aside{background:#fffaf0;border:2px solid #312d26;padding:20px}.game aside h2{font-size:1.5rem}.progress{color:#a2462a;font-size:.8rem}.game ul{columns:1;margin:16px 0 20px;padding:0;list-style:none}.game li{padding:5px 0;font-size:.85rem}.word-found{color:#557d61;text-decoration:line-through}.restart,.celebration button,.overlay button{color:#fff;background:#a2462a;border:2px solid #312d26;padding:10px 14px;box-shadow:3px 3px #312d26}.overlay{text-align:center;background:#fffaf0ee;border:3px solid #312d26;place-content:center;gap:16px;display:grid;position:absolute;inset:10%}.celebration{text-align:center;z-index:2;background:#f5eddcf0;place-content:center;padding:32px;display:grid;position:fixed;inset:0}.celebration h2{font-size:clamp(2.5rem,6vw,4.5rem)}.celebration button{margin:16px auto}.letter-burst{color:#a2462a;letter-spacing:.3em;font:700 clamp(2rem,7vw,5rem) Fraunces,serif;animation:.75s ease-out both toss}@keyframes toss{0%{opacity:0;transform:translateY(120px)rotate(8deg)}to{opacity:1;transform:translateY(0)}}@media (width<=720px){.catalog,.game{padding:24px 16px}.puzzle-grid{grid-template-columns:1fr}.game-header{text-align:left;grid-template-columns:1fr auto}.game-header>div:nth-child(2){text-align:center;grid-area:1/1/auto/-1;margin-bottom:20px}.back,.timer{grid-row:2}.game-layout{grid-template-columns:1fr;gap:20px}.game ul{columns:2}.game aside{padding:16px}}html{background:#e9dfc9}.timer:empty{display:none}html[data-theme=world] .game{background-color:#e9f4ef;background-image:radial-gradient(circle,#d3e8e7 1px,#0000 1px),none;background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:12px 12px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box}html[data-theme=music] .cell.found{background:#b178c3}html[data-theme=canada] .cell.found{background:#c86157}html[data-theme=world] .cell.found{background:#2996a0}html[data-theme=football] .cell.found{background:#4b8a4c}html[data-theme=anime] .cell.found{background:#e26798}html[data-theme=farm] .cell.found{background:#c78e3f}.game{position:relative;overflow:hidden}.game-header{z-index:1;position:relative}.game-header:after{pointer-events:none;opacity:.42;filter:drop-shadow(3px 4px #302b241f);font-size:clamp(3.5rem,11vw,7rem);line-height:1;position:absolute;top:50%;right:3%;transform:translateY(-50%)rotate(-8deg)}.board-wrap:before{z-index:0;pointer-events:none;opacity:.14;font-family:Georgia,serif;font-size:clamp(2rem,7vw,5rem);font-weight:700;position:absolute;top:3%;right:4%}.board,.game aside{z-index:1;position:relative}html[data-theme=music] .game{background:repeating-linear-gradient(0deg,#0000 0 41px,#6a356b2e 42px 44px),#f2d9bd}html[data-theme=music] .game-header:after{content:"♫";color:#7b3f83}html[data-theme=music] .board-wrap:before{content:"𝄞";color:#7b3f83}html[data-theme=canada] .game{background:linear-gradient(135deg,#ffffff94,#ca473d2e),repeating-linear-gradient(45deg,#0000 0 24px,#b7302912 25px 27px),#fff4eb}html[data-theme=canada] .game-header:after{content:"🍁"}html[data-theme=canada] .board-wrap:before{content:"CANADA";color:#b83d36;letter-spacing:.14em;font-size:clamp(1rem,4vw,2rem)}html[data-theme=world] .game{background:radial-gradient(circle at 20% 10%,#2286972b 0 3px,#0000 4px) 0 0/26px 26px,linear-gradient(120deg,#d7edf0,#f3e3bc)}html[data-theme=world] .game-header:after{content:"🌍"}html[data-theme=world] .board-wrap:before{content:"✦";color:#187e88}html[data-theme=football] .game{background:repeating-linear-gradient(90deg,#ffffff1a 0 11%,#0000 11% 22%),linear-gradient(#76a963,#427b46)}html[data-theme=football] .game-header,html[data-theme=football] .game aside{text-shadow:0 1px #ffffff52}html[data-theme=football] .game-header:after{content:"⚽"}html[data-theme=football] .board-wrap:before{content:"GOAL!";color:#f5e9b7;letter-spacing:.12em;font-size:clamp(1rem,5vw,2.8rem)}html[data-theme=anime] .game{background:repeating-conic-gradient(from 218deg at 50% 0,#f3b9ca 0deg 8deg,#f8e6a8 8deg 16deg,#c0daf0 16deg 24deg)}html[data-theme=anime] .game-header:after{content:"✦";color:#d83979}html[data-theme=anime] .board-wrap:before{content:"POW!";color:#d83979;transform:rotate(-10deg)}html[data-theme=farm] .game{background:linear-gradient(#a8d8ef 0 35%,#e5e7a9 35% 60%,#bbd36c 60%)}html[data-theme=farm] .game-header:after{content:"🐄"}html[data-theme=farm] .board-wrap:before{content:"☀";color:#d48c2d}.celebration:before{content:"✦  ✦  ★  ✦  ✦";color:#a2462a;letter-spacing:.25em;width:100%;font-size:clamp(2rem,6vw,4rem);animation:1.2s ease-in-out infinite alternate party;position:absolute;top:16%;left:50%;transform:translate(-50%)}.celebration:after{content:"🎉";opacity:.16;font-size:clamp(5rem,14vw,10rem);position:absolute;bottom:8%;right:10%;transform:rotate(-16deg)}@keyframes party{0%{transform:translate(-50%)translateY(-8px)rotate(-2deg)}to{transform:translate(-50%)translateY(8px)rotate(2deg)}}html[data-theme=music] .celebration:after{content:"♫"}html[data-theme=football] .celebration:after{content:"⚽"}html[data-theme=anime] .celebration:after{content:"✦"}html[data-theme=farm] .celebration:after{content:"☀"}
