:root{font-family:'DM Sans',sans-serif;color:#29332d;background:#f8f7f2;font-synthesis:none;--green:#294f3e;--muted:#85897f;--gold:#d6a641}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d6a641;outline-offset:4px}header{height:100px;max-width:1176px;margin:auto;border-bottom:1px solid #dddfd5;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:var(--green);font-family:Manrope,sans-serif;font-size:37px;font-weight:800;letter-spacing:-2.5px;position:relative}.brand small{display:inline-block;vertical-align:middle;letter-spacing:1.7px;font-size:9px;border:1px solid #c7d0c4;padding:6px 8px;border-radius:5px;margin-left:17px}.spark{font-size:24px;position:absolute;left:113px;top:-4px;color:var(--gold)}nav{display:flex;gap:12px}nav button{width:37px;height:37px;background:transparent;border:1px solid #d9ddd3;border-radius:50%;color:var(--green);font-size:19px}main{max-width:1100px;margin:0 auto;padding:47px 0 0}.eyebrow{font-size:10px;letter-spacing:2px;color:#6c786c;display:flex;align-items:center;gap:9px}.live{height:6px;width:6px;background:#729776;border-radius:50%}.intro{display:flex;align-items:end;justify-content:space-between;margin:17px 0 34px}.intro h1{font:700 49px/1.12 Manrope,sans-serif;letter-spacing:-2px;margin:0}.intro h1 em{font-family:Georgia,serif;font-weight:400;color:#708468}.intro p{font-size:14px;line-height:1.8;color:#7a8076;margin-right:82px}.workspace{display:grid;grid-template-columns:72px minmax(0,620px) 224px;gap:29px;align-items:start}.meter-area{text-align:center;font-size:8px;letter-spacing:1.4px;color:#7c8277;padding-top:9px}.meter-area span{display:block;font-size:19px;font-weight:700;letter-spacing:0;margin:5px}.meter{height:363px;width:36px;border:1px solid #d9ddd0;border-radius:24px;margin:12px auto;background:linear-gradient(#e9ddbd,#dee3c7 50%,#b2c6a6);position:relative;overflow:hidden}.meter i{position:absolute;left:10px;right:10px;border-top:1px solid #fff9}.meter b{position:absolute;left:6px;bottom:0;font-size:24px;color:var(--green);transition:bottom .7s}.game{background:#fffefa;border:1px solid #dedfd4;border-radius:14px;padding:28px 32px 23px;box-shadow:0 6px 18px #343d2510}.board-top{display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:1.7px;font-size:9px;color:#7d846f}#category{color:#7e875a}h2{font:700 26px/1.3 Manrope,sans-serif;letter-spacing:-.7px;margin:18px 0 6px}.subtitle{font-size:12px;color:#8b8d80;margin:0 0 26px}#slots{display:grid;gap:8px}.slot{min-height:43px;display:flex;align-items:center;border:1px dashed #dedfd4;border-radius:7px;color:#afb2a4;padding:0 13px;font-size:13px;background:#f7f7f0}.slot .number{font-size:10px;width:26px;color:#9da48f}.dots{letter-spacing:5px;color:#c6cbbc}.slot.filled{background:#f0f4e9;border:1px solid #dfe6d5;color:#354b36}.slot.filled b{margin-left:auto}.slot.zero{background:#e7edda;color:#486c32}.slot .bar{height:3px;width:42px;margin-left:15px;background:#dbe2d0}.slot .bar i{display:block;height:100%;background:#a6b889}form{display:flex;gap:8px;margin-top:18px}input{min-width:0;flex:1;border:1px solid #d4d8c8;border-radius:7px;background:#fffefa;padding:13px 12px;font-size:12px;color:#29332d;outline:none}input:focus{border-color:#658264;box-shadow:0 0 0 3px #65826415}form button{border:0;border-radius:7px;background:var(--green);color:white;padding:0 18px;font-size:12px}form button span{padding-left:15px;color:#b3c4b6}button:disabled{opacity:.45;cursor:default}#feedback{min-height:25px;font-size:11px;padding-top:7px;color:#8c6634}.game-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ececdf;padding-top:13px;font-size:9px;color:#8b917f;letter-spacing:1px}.text-btn{border:0;background:transparent;color:#657453;padding:6px 0;font-size:11px}.text-btn span{margin-left:9px}#hints{background:#eef0e4;border-radius:4px;padding:2px 5px}.game-bottom strong{font-size:21px;color:#354a38;margin-left:8px;letter-spacing:-1px}.side{padding-top:0}.note{background:#eeefe4;border:1px solid #e1e3d5;border-radius:11px;padding:23px}.note-icon{font-size:29px;color:#859a70}.note h3{font:700 16px Manrope;margin:15px 0 9px}.note p{font-size:12px;line-height:1.8;color:#838875;margin:0 0 20px}.example{display:flex;justify-content:space-between;border-top:1px solid #dce0cf;padding:10px 0;font-size:11px;color:#7e8572}.example b{color:#96967e}.example b.rare{color:#4c7142}.note small{font-size:9px;color:#929784}.session{margin-top:28px;padding:0 23px;display:grid;gap:9px}.session>span{font-size:8px;letter-spacing:1.4px;color:#8c927f}.session strong{font:500 31px Manrope;color:#607954}.session small{font-size:10px;color:#919585}.below{margin:23px 0 0 101px;max-width:620px;display:flex;align-items:center;gap:25px}.next{border:1px solid #c9d1bb;border-radius:7px;background:#edf0e4;color:#415a34;padding:12px 18px;font-size:11px}.next span{margin-left:30px}.local-tag{font-size:9px;color:#929987;margin-left:auto}footer{border-top:1px solid #dedfd4;margin-top:47px;padding:22px 0 25px;display:flex;align-items:center;gap:20px;font-size:9px;color:#94998b}footer>span{letter-spacing:1.4px;font-size:8px}footer p{margin:0}footer a{color:#7c8772;margin-left:auto;text-decoration:none}#hint-box{padding:13px;margin-top:10px;background:#f4f0de;font-size:13px;letter-spacing:3px;border-radius:5px}#result{padding:18px 0 0;font-size:13px;line-height:1.7}#result h3{font:700 24px Manrope;margin:0;color:var(--green)}.review{max-height:230px;overflow:auto;margin-top:10px}.review>div{display:flex;justify-content:space-between;padding:6px 8px;border-bottom:1px solid #e6e8dc;font-size:12px}#library{margin:35px 0 0 101px}#categories{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}#categories button{background:#fffefa;border:1px solid #dce0d2;border-radius:8px;padding:16px;text-align:left;font-size:12px;color:#415b3d}#categories small{display:block;color:#9a9e8e;margin-top:6px}dialog{border:1px solid #d9dfcc;border-radius:15px;max-width:440px;width:calc(100% - 32px);padding:35px;background:#fffefa;color:#354632}dialog::backdrop{background:#25352a66;backdrop-filter:blur(3px)}dialog p,dialog li{font-size:14px;line-height:1.8;color:#7b846f}dialog h2{margin-top:0}#close{position:absolute;right:13px;top:10px;border:0;background:transparent;font-size:25px;color:#6b785d}.stats-grid{display:flex;justify-content:space-between;text-align:center}.stats-grid b{display:block;font-size:27px}.stats-grid small{font-size:10px}.sr{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden}[hidden]{display:none!important}@media(min-width:1400px){main{padding-top:60px}.intro{margin-bottom:44px}}@media(max-width:1150px){header{margin:0 35px}main{margin:0 35px}.workspace{grid-template-columns:55px minmax(0,1fr) 200px;gap:20px}.intro p{margin-right:20px}.below{margin-left:75px}}@media(max-width:800px){header{height:78px;margin:0 22px}main{margin:0 22px;padding-top:30px}.brand{font-size:31px}.spark{left:94px}.intro{margin-bottom:26px}.intro h1{font-size:38px}.intro p{display:none}.workspace{grid-template-columns:35px minmax(0,1fr);gap:13px}.side{display:none}.game{padding:23px 20px}.meter{width:26px;height:360px}.meter b{left:1px}.meter-area{font-size:7px}.meter-area span{font-size:15px}.game h2{font-size:23px}.below{margin-left:48px;gap:17px;flex-wrap:wrap}.local-tag{display:none}footer{flex-wrap:wrap;gap:10px}footer a{margin-left:0}#library{margin-left:48px}#categories{grid-template-columns:1fr 1fr}}@media(max-width:420px){main{margin:0 13px}.game{padding:20px 14px}.eyebrow{font-size:8px}.intro h1{font-size:35px}form button{padding:0 13px}form button span{display:none}.brand small{font-size:8px;margin-left:10px}#categories{grid-template-columns:1fr}}

/* Responsive layout: keep the game usable from small phones to wide screens. */
html{scroll-padding-top:20px;-webkit-text-size-adjust:100%}
header,main{width:calc(100% - 64px);margin-inline:auto}
.workspace{grid-template-columns:64px minmax(0,1fr) 224px;gap:24px}
.game,.side,.board-top>span,.slot>span{min-width:0}
h2,.slot,.review>div,#categories button{overflow-wrap:anywhere}
.board-top{gap:12px;line-height:1.6}
#round{flex-shrink:0}
.slot{gap:8px;padding-block:10px}
.slot .number{flex:0 0 20px}
.slot>span:nth-child(2){flex:1}
.slot.filled b{flex-shrink:0;white-space:nowrap;font-size:12px}
.slot .bar{flex:0 0 36px;margin-left:3px}
#hint-box{overflow-wrap:anywhere;line-height:1.8;letter-spacing:2px}
button{touch-action:manipulation}
input{font-size:16px;min-height:48px;scroll-margin-block:24px}
nav button{width:44px;height:44px}
.text-btn,.next,form button{min-height:44px}
footer{flex-wrap:wrap;line-height:1.8}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto;padding:32px 24px}
#close{width:44px;height:44px;right:3px;top:3px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.review>div{gap:15px}
.review>div b{flex-shrink:0}
@media(max-width:1050px){
 .workspace{grid-template-columns:48px minmax(0,1fr);gap:20px}
 .side{grid-column:2;display:grid;grid-template-columns:1fr 1fr;gap:24px}
 .note{padding:20px}.note-icon,.note .example,.note>small{display:none}
 .note h3{margin:0 0 8px}.note p{margin:0}
 .session{margin:0;padding:20px;align-content:center}
 .below,#library{margin-left:68px;max-width:none}
 .intro p{margin-right:0}
}
@media(max-width:700px){
 header,main{width:calc(100% - 32px)}
 header{height:78px;gap:12px}
 .brand{font-size:30px;white-space:nowrap;letter-spacing:-2px}
 .brand small{font-size:8px;letter-spacing:1px;margin-left:10px;padding:5px}
 .spark{left:92px;font-size:21px;top:-5px}
 nav{gap:6px;flex-shrink:0}
 main{padding-top:24px}
 .eyebrow{font-size:8px;letter-spacing:1.3px;line-height:1.8}
 .intro{margin:14px 0 23px}.intro h1{font-size:clamp(32px,8vw,44px)}
 .workspace{grid-template-columns:minmax(0,1fr);gap:14px}
 .meter-area{display:flex;align-items:center;gap:12px;padding:0 4px;text-align:center;font-size:7px}
 .meter-area>div:first-child{order:3}.meter-area>div:last-child{order:1}
 .meter-area span{display:inline;font-size:13px;margin:0 4px}
 .meter{order:2;flex:1;height:12px;width:auto;margin:0;border-radius:10px;background:linear-gradient(90deg,#b2c6a6,#dee3c7 50%,#e9ddbd)}
 .meter i,.meter b{display:none}
 .game{padding:22px 20px;border-radius:12px}
 .game h2{font-size:24px;margin-top:13px}.subtitle{margin-bottom:20px}
 .board-top{font-size:9px;letter-spacing:1px}
 .slot{min-height:46px;font-size:14px}.slot .bar{display:none}
 form{gap:8px;margin-top:16px}form button{font-size:14px;padding:0 16px}form button span{display:none}
 input{padding:12px 10px;width:0}
 .game-bottom{gap:12px;flex-wrap:wrap}.game-bottom strong{font-size:23px}
 .text-btn{font-size:13px}.next{font-size:13px;padding:12px 15px}
 .below{margin:16px 0 0;gap:10px;display:grid;grid-template-columns:1fr 1fr;max-width:none}
 .below button{width:100%}.next span{margin-left:14px}
 .side{grid-column:auto;grid-template-columns:1fr;gap:0;order:3}
 .note{display:none}.session{display:flex;align-items:center;justify-content:space-between;padding:8px 4px}
 .session>span{font-size:9px}.session strong{font-size:24px}.session small{display:none}
 #library{margin:28px 0 0}#library h2{font-size:23px}
 #categories{grid-template-columns:repeat(2,minmax(0,1fr))}#categories button{font-size:13px;line-height:1.5;padding:14px}
 footer{margin-top:32px;padding-bottom:max(24px,env(safe-area-inset-bottom));display:grid;gap:8px;font-size:10px}
 footer>span{font-size:9px}footer a{margin:0;min-height:44px;display:flex;align-items:center}
}
@media(max-width:360px){
 header,main{width:calc(100% - 24px)}
 .brand small{display:none}.game{padding:20px 14px}.game h2{font-size:22px}
 .slot.filled b{font-size:10px}.slot{gap:5px}
 #categories{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .below{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.meter b{transition:none}}

.sharing{margin-top:20px;padding-top:18px;border-top:1px solid #dedfd4}
.sharing h4{margin:0;font-size:15px;color:var(--green)}
.sharing>p{font-size:12px;color:#7b846f;margin:5px 0 12px}
.share-actions{display:flex;flex-wrap:wrap;gap:8px}
.share-actions button,.share-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 15px;border:1px solid #c9d1bb;border-radius:7px;background:#edf0e4;color:#415a34;font-size:12px;line-height:1.4;text-decoration:none}
.share-actions .share-native{background:var(--green);color:white;border-color:var(--green)}
.sharing .share-status{margin:8px 0 0;min-height:18px}
.sharing textarea{width:100%;min-height:180px;resize:vertical;padding:12px;border:1px solid #c9d1bb;border-radius:7px;font:14px/1.6 'DM Sans',sans-serif}
@media(max-width:700px){.share-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.share-actions .share-native{grid-column:1/-1}.share-actions button,.share-actions a{font-size:14px}}

/* Footer links */
.footer-links{margin-left:auto;flex-wrap:wrap;gap:18px}
footer .footer-links a{margin-left:0}
@media(max-width:700px){.footer-links{margin-left:0;gap:4px 18px}}

/* Legal & contact pages */
.page{max-width:680px;padding-bottom:20px}
.page h1{font:700 40px/1.15 Manrope,sans-serif;letter-spacing:-1.5px;margin:14px 0 8px}
.page .updated{font-size:12px;color:var(--muted);margin:0 0 30px}
.page h2{font-size:19px;margin:30px 0 8px}
.page p,.page li{font-size:14px;line-height:1.8;color:#4d574f}
.page ul{padding-left:20px}
.page a{color:var(--green)}
.contact-card{background:#eeefe4;border:1px solid #e1e3d5;border-radius:11px;padding:23px;margin:24px 0}
.contact-card a{font:700 20px Manrope,sans-serif;text-decoration:none}
@media(max-width:700px){.page h1{font-size:32px}}

/* About / How to play (below the game) */
.eyebrow+.workspace{margin-top:28px}
.about{margin-top:64px;padding-top:40px;border-top:1px solid #dedfd4;max-width:900px}
.about .intro{margin:0 0 22px}
.about .lead{font-size:16px;line-height:1.8;color:#4d574f;max-width:720px;margin:0 0 34px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:12px}
.about-block{background:#eeefe4;border:1px solid #e1e3d5;border-radius:11px;padding:4px 24px 10px}
.about h2{font-size:20px;margin:26px 0 10px}
.about ol,.about ul{padding-left:20px;margin:0 0 14px}
.about li,.about p{font-size:14px;line-height:1.8;color:#4d574f}
.about a{color:var(--green)}
.faq{display:grid;gap:8px}
.faq details{border:1px solid #e1e3d5;border-radius:8px;padding:12px 16px;background:#fbfbf7}
.faq summary{cursor:pointer;font:700 14px Manrope,sans-serif;color:#29332d}
.faq details p{margin:8px 0 0}
@media(max-width:700px){
  .about{margin-top:40px;padding-top:28px}
  .about-grid{grid-template-columns:1fr}
  .about .intro p{display:block;margin:12px 0 0}
  .about .intro{display:block}
  .about .lead{font-size:15px}
}

/* Score reveal motion, with a working meter on desktop and phones. */
.meter{--meter-score:0;isolation:isolate;overflow:visible}
#fill{position:absolute;inset:auto 0 0;height:calc(var(--meter-score) * 1%);border-radius:inherit;background:linear-gradient(0deg,#88ab72,#d6b455);opacity:.78;z-index:-1;transition:height .65s cubic-bezier(.22,1,.36,1)}
.meter b{left:50%;bottom:clamp(10px,calc(var(--meter-score) * 1%),calc(100% - 10px));transform:translate(-50%,50%);line-height:1;text-shadow:0 1px 4px #fff;transition:bottom .65s cubic-bezier(.22,1,.36,1)}
.meter-revealing #fill,.meter-revealing b{transition:none}
.slot{position:relative;isolation:isolate;overflow:hidden}
.slot b,#total{font-variant-numeric:tabular-nums}
.slot.revealing{border-style:solid;border-color:#d4bb7f;background:#faf5e8;animation:answer-arrive .3s ease-out both}
.slot.revealing::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,transparent 10%,#fff9 50%,transparent 90%);animation:answer-shimmer 1.1s ease-in-out both}
.slot.revealing b{color:#967526;min-width:30px;text-align:right}
.slot.zero{background:linear-gradient(115deg,#fff8df,#ffe9a3 45%,#fff7da);border-color:#d8b15b;color:#8a5f10;box-shadow:0 0 12px #d6a64120}
.slot.zero b{color:#a27612;letter-spacing:.5px}
.seldom-reveal{animation:seldom-land .65s cubic-bezier(.2,.8,.2,1) both,gold-breathe 2.5s ease-in-out .65s 2}
.answer-land{animation:answer-land .4s ease-out both}
.score-pop{display:inline-block;animation:score-pop .4s ease-out both}
.seldom-meter{animation:gold-breathe 1.1s ease-in-out 2}
.answer-shake{animation:answer-shake .35s ease-in-out}
.feedback-enter{animation:feedback-enter .25s ease-out}
.round-enter{animation:round-enter .4s cubic-bezier(.2,.8,.2,1) both}
.hint-enter{animation:hint-enter .35s ease-out both}
.results-enter{animation:results-enter .5s ease-out both}
.results-enter .sharing{animation:results-enter .5s ease-out .15s both}
dialog[open]{animation:dialog-enter .22s ease-out both}
dialog[open]::backdrop{animation:backdrop-enter .22s ease-out both}
@media(hover:hover){button:not(:disabled),.share-actions a{transition:background-color .18s,box-shadow .18s,transform .18s}button:not(:disabled):hover,.share-actions a:hover{filter:brightness(.97);box-shadow:0 3px 10px #29332d12}}
button:not(:disabled):active,.share-actions a:active{transform:scale(.97)}
@keyframes answer-arrive{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes answer-shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes answer-land{0%{box-shadow:0 0 0 0 #7f9b6650}100%{box-shadow:0 0 0 6px #7f9b6600}}
@keyframes seldom-land{0%{transform:scale(.98);filter:brightness(1.2)}45%{transform:scale(1.025)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes gold-breathe{0%,100%{box-shadow:0 0 6px #d6a64125}50%{box-shadow:0 0 18px #d6a64160}}
@keyframes score-pop{0%{transform:scale(.85)}55%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes answer-shake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
@keyframes feedback-enter{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes round-enter{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes hint-enter{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes results-enter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialog-enter{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}
@media(max-width:700px){
 #fill{inset:0 auto 0 0;width:calc(var(--meter-score) * 1%);height:auto;background:linear-gradient(90deg,#88ab72,#d6b455);transition:width .65s cubic-bezier(.22,1,.36,1)}
 .meter b{display:block;left:clamp(6px,calc(var(--meter-score) * 1%),calc(100% - 6px));bottom:50%;font-size:16px;transition:left .65s cubic-bezier(.22,1,.36,1)}
 .meter-revealing #fill,.meter-revealing b{transition:none}
}
@media(prefers-reduced-motion:reduce){
 .game,.game *,dialog,dialog::backdrop,.meter,.meter *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 button:not(:disabled):active,.share-actions a:active{transform:none}
}