.fair-page{max-width:1280px;margin:auto;padding:12px 18px 28px}.fair-page>h1{font-size:clamp(22px,3vw,34px);margin:0;color:#65452b}.fair-page>p{margin:4px 0 12px}.fair{--u:min(1cqw,1.77778cqh);--cup:min(18cqw,22cqh);container-type:size;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;isolation:isolate;border:4px solid #be9972;border-radius:20px;background:#edd5a7 url('./assets/fair.webp') center/cover;color:#5a3525;font:900 16px 'Zen Maru Gothic',sans-serif}.fair *{box-sizing:border-box}.fair [hidden]{display:none!important}.fair button{font:inherit;color:#5a3525;background:#fff4de;border:2px solid #c79a73;border-radius:14px;padding:.45em .8em;line-height:1.45;cursor:pointer;box-shadow:0 3px 0 #63381830}.fair button:focus-visible{outline:4px solid #13547e;outline-offset:3px}.fair button:hover{filter:brightness(1.04)}.fair button:disabled{cursor:default;opacity:.55}.fair .primary{background:#ec756f;border-color:#ffd0aa;color:#4c231d}.base{height:100%;display:flex;flex-direction:column}.game-tools{height:11%;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 1.5%;background:#fff0dce8;border-bottom:3px solid #bc9270}.game-tools strong{font-size:calc(var(--u)*2.55);white-space:nowrap}.game-tools nav{display:flex;gap:calc(var(--u)*.5)}.game-tools button{font-size:calc(var(--u)*1.2);padding:.35em .7em}.game-tools #pause{background:#dceec7}.game-tools #help{background:#d7e9fa}.game-tools #settings{background:#fff0b9}.game-tools #fullscreen{background:#e9ddf7}.cover{flex:1;min-height:0;display:grid;grid-template-columns:40% 58%;gap:2%;padding:3%}.poster{background:#fff3dfef;border:9px solid #a9805c;box-shadow:0 7px 0 #53331e30;border-radius:12px;padding:5%;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--u)*1.6);text-align:center}.poster h2{font-size:calc(var(--u)*2.8);line-height:1.55;margin:0;color:#277294}.poster p{font-size:calc(var(--u)*1.7);line-height:1.7;margin:0}.poster small{font-size:calc(var(--u)*1.15)}.speeds{display:flex;gap:5%;justify-content:center}.speeds button{font-size:calc(var(--u)*1.55);padding:.6em .55em;white-space:nowrap}.speeds button[aria-pressed=true]{background:#b4daae;border-color:#276d54;box-shadow:0 0 0 2px #fff4d7}.poster .primary{font-size:calc(var(--u)*1.75);padding:.85em .5em}.demo{position:relative;min-height:0}.demo-mat{position:absolute;left:0;bottom:4%;width:100%;height:48%;object-fit:fill}.demo-piece{position:absolute;width:27%;height:30%;left:calc(5% + var(--slot)*32%);bottom:22%}.demo-cup{position:absolute;width:100%;height:100%;object-fit:contain;bottom:0;z-index:2}.demo-piece.raised .demo-cup{transform:translateY(-60%)}.demo-star{position:absolute;width:40%;height:40%;object-fit:contain;left:30%;bottom:0}.game{flex:1;min-height:0;display:grid;grid-template-rows:18% minmax(0,1fr) 15%}.readout{display:flex;gap:3%;align-items:center;padding:0 3%;min-height:0}.pennants{height:100%;display:flex;gap:8px;flex:none;width:30%}.pennants>span{background:url('./assets/pennant.webp') center/100% 100%;height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 0 calc(var(--u)*1.3);color:#6b392f}.pennants small{font-size:calc(var(--u)*1.3);white-space:nowrap}.pennants b{font:700 calc(var(--u)*2.5)/1.25 Fredoka,sans-serif}.announcer{flex:1;min-width:0;background:#fff7e9ec;border:2px solid #d8b796;border-radius:16px;text-align:center;padding:1.2% 2%}.announcer h2{font-size:calc(var(--u)*2.2);line-height:1.5;margin:0}.announcer p{font-size:calc(var(--u)*1.2);line-height:1.6;margin:0}.stage{min-height:0;position:relative;isolation:isolate}.stage-mat{position:absolute;left:4%;top:35%;width:92%;height:60%;object-fit:fill;pointer-events:none}.fair .cup{position:absolute;width:var(--cup);height:calc(var(--cup)*1.044);left:18%;top:68%;transform:translate(-50%,-100%);padding:0;border:0;border-radius:20%;box-shadow:none;background:transparent;will-change:left,top;cursor:default}.fair .cup:disabled{opacity:1}.fair .cup:not(:disabled){cursor:pointer}.fair .cup:not(:disabled):hover{outline:3px dashed #f7eee1;outline-offset:4px;filter:none}.shell{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2;pointer-events:none}.cup.lifted .shell{transform:translateY(-55%)}.token{position:absolute;width:36%;height:36%;object-fit:contain;left:32%;bottom:0;z-index:1;pointer-events:none}.contact-shadow{position:absolute;width:96%;height:11%;left:2%;bottom:-3%;border-radius:50%;background:#1c507536;filter:blur(2px);pointer-events:none}.places{position:absolute;left:2%;right:2%;bottom:1%;height:9%;display:flex;justify-content:space-around;align-items:center;pointer-events:none}.places span{font:700 calc(var(--u)*2)/1.5 Fredoka,sans-serif;border:2px solid #d0a279;background:#ffedcd;border-radius:50%;width:8%;text-align:center}.controls{display:flex;align-items:center;justify-content:space-between;gap:3%;padding:1% 3%;background:#fff0dbea;border-top:3px solid #bb9573;min-height:0}.controls>div{display:flex;align-items:center;gap:15px;min-width:0}.controls small{font-size:calc(var(--u)*1.3);white-space:nowrap}.controls .primary{font-size:calc(var(--u)*1.8);min-width:30%}.controls .speeds{gap:8px}.dialog{position:absolute;inset:0;z-index:20;background:#473a32ad;display:grid;place-items:center;padding:3%}.dialog-card{position:relative;background:#fff7e7;border:5px solid #ccab85;border-radius:22px;width:min(78%,720px);max-height:100%;overflow:auto;padding:5% 4% 3%;font-size:calc(var(--u)*1.6)}.dialog-card h2{margin:0 0 3%;text-align:center;font-size:calc(var(--u)*2.8)}.dialog-card p{line-height:1.8;margin:.5em 0}.dialog-card .close{position:absolute;right:2%;top:2%;font-size:calc(var(--u)*1.2)}.dialog-card section{display:flex;flex-direction:column;gap:10px}.dialog-card small{font-size:.8em}.dialog-card input{width:100%;accent-color:#ce6a62}.dialog-card label{display:flex;justify-content:space-between}.parent-note{font-size:14px;line-height:1.7;padding:12px}.fair:fullscreen{width:100vw;height:100dvh;aspect-ratio:auto;border:0;border-radius:0}
@media (max-width:600px) and (orientation:portrait){.fair-page{padding:8px}.fair{height:min(720px,calc(100dvh - 12px));aspect-ratio:auto;--u:1cqw;--cup:25cqw;border-width:2px}.game-tools{height:80px;flex-direction:column;justify-content:center;gap:5px;padding:4px 2%}.game-tools strong{font-size:22px}.game-tools nav{width:100%;justify-content:space-between;gap:2px}.game-tools button{font-size:11px;padding:.4em .3em}.cover{grid-template-columns:1fr;grid-template-rows:56% 42%;gap:2%;padding:3%}.poster{padding:4%;border-width:5px;gap:8px}.poster h2{font-size:25px;line-height:1.4}.poster p{font-size:16px;line-height:1.6}.poster small{font-size:12px}.poster .primary{font-size:19px;padding:.65em .4em}.speeds button{font-size:15px;padding:.5em}.demo-piece{height:47%;bottom:22%}.demo-mat{height:60%;bottom:1%}.game{grid-template-rows:25% minmax(0,1fr) 19%}.readout{flex-direction:column;gap:5px;padding:2% 3%}.pennants{width:76%;height:56px;gap:6px}.pennants>span{padding:0 0 8px}.pennants small{font-size:11px}.pennants b{font-size:20px;line-height:1.2}.announcer{width:100%;padding:3%;border-radius:12px}.announcer h2{font-size:20px}.announcer p{font-size:12px}.stage-mat{top:28%;height:68%;left:1%;width:98%}.places span{font-size:20px;width:13%}.controls{flex-direction:column;justify-content:center;gap:8px;padding:3%}.controls>div{gap:10px}.controls small{font-size:12px}.controls .speeds{gap:8px}.controls .speeds button{font-size:14px;padding:.35em .6em}.controls .primary{font-size:17px;width:100%;padding:.45em}.dialog-card{width:98%;padding:45px 5% 6%;font-size:15px;max-height:98%}.dialog-card h2{font-size:25px}.dialog-card .close{font-size:13px}.fair:fullscreen{height:100dvh}}
@media (orientation:landscape) and (max-height:520px){.game-tools{height:40px}.game-tools strong{font-size:20px}.game-tools button{font-size:11px;padding:.3em .45em}.poster{gap:7px;padding:4%;border-width:5px}.poster h2{font-size:23px;line-height:1.4}.poster p{font-size:13px;line-height:1.5}.poster .primary{font-size:15px;padding:.7em .3em}.poster small{font-size:10px}.speeds button{font-size:12px;padding:.4em}.readout{padding:0 3%;gap:2%}.pennants{width:26%}.pennants small{font-size:10px}.pennants b{font-size:19px;line-height:1.2}.announcer h2{font-size:18px}.announcer p{font-size:10px}.places span{font-size:17px}.controls small{font-size:11px}.controls .speeds button{font-size:12px;padding:.35em .5em}.controls .primary{font-size:14px}.dialog-card{padding:35px 4% 3%;font-size:15px;width:80%}.dialog-card h2{font-size:23px}.dialog-card .close{font-size:12px}}
.demo-piece:before{content:"";position:absolute;left:5%;bottom:-2%;width:90%;height:9%;border-radius:50%;background:#1c507536;filter:blur(2px)}