.bingo-page{max-width:1240px;margin:20px auto;padding:0 16px;color:#285943;font-family:'Zen Maru Gothic',sans-serif}.page-heading{padding:8px 4px 18px}.page-heading h1{font-size:34px;margin:0 0 6px}.page-heading p{margin:0}.parent-note{max-width:920px;margin:32px auto;padding:24px;background:#f6f3df;line-height:1.9}.parent-note h2{font-size:23px}
#host{--green:#286347;--coral:#d95843;--paper:#fff6e6;--board-size:min(calc(100cqh - 144px),calc(100cqw - 410px));position:relative;isolation:isolate;container-type:size;height:740px;max-width:1200px;margin:auto;overflow:hidden;background:#e0efd7 url('./assets/background.webp') center/cover;border:2px solid #739a72;border-radius:20px;color:#3f5538;font-family:'Zen Maru Gothic',sans-serif}#host *{box-sizing:border-box}#host [hidden]{display:none!important}#host button{font:800 16px/1.25 'Zen Maru Gothic',sans-serif;min-width:0;min-height:42px;border:2px solid var(--green);border-radius:20px;background:#fff9e9;color:var(--green);padding:10px 15px;cursor:pointer;touch-action:manipulation}#host button:disabled{opacity:.4;cursor:default}#host button:focus-visible,#host input:focus-visible{outline:4px solid #e2a320;outline-offset:3px}#host button:hover:enabled{box-shadow:0 3px 0 #2a674a30}#host button.primary{background:var(--coral);border-color:var(--coral);color:#fff9ea;box-shadow:0 3px 0 #a8392d}#host input{accent-color:var(--green)}#host .picnic-top{height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;background:#fff6e6de;border-bottom:1px dashed #558366}#host .picnic-top strong{font-size:18px;white-space:nowrap}#host nav{display:flex;gap:7px}#host nav button{font-size:12px;min-height:32px;padding:6px 10px;border-width:1px;border-radius:8px}#base{height:calc(100% - 60px)}#cover{height:100%;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:45px;padding:38px 70px}.keyart{width:100%;max-height:100%;min-width:0;object-fit:contain;border:8px solid var(--paper);border-radius:22px;box-shadow:0 12px 0 #32613d20;transform:rotate(-3deg)}.invitation{display:flex;flex-direction:column;gap:20px;align-items:flex-start;background:#fff6e6e8;border-radius:30px;padding:32px;border:2px dashed #b7b185;box-shadow:0 8px 0 #4f79532a}.invitation h2{font-size:clamp(33px,5cqw,60px);line-height:1.25;margin:0;color:var(--green)}.invitation em{font-style:normal;color:var(--coral)}.invitation p{font-size:18px;line-height:1.8;margin:0}.invitation small{font-size:12px}#host #start{font-size:23px;min-height:53px;width:100%}#ready-note{font-size:10px}
#workspace{height:100%;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:35px;padding:25px 42px 20px}.board-side{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-width:0;min-height:0}#board{width:var(--board-size);height:var(--board-size);max-width:100%;flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:7px;padding:10px;background:#d6c294;border:3px solid #fff6e6;border-radius:19px;box-shadow:0 8px 0 #52764330}#host #board button{position:relative;display:grid;place-items:center;min-height:0;padding:2px;border:2px solid #e3d2af;background:var(--paper);border-radius:11px;overflow:hidden;box-shadow:0 2px 2px #835b3024;opacity:1}#board button .picture{width:100%;height:100%;pointer-events:none}.picture{display:block;background-image:url('./assets/pictures.webp');background-repeat:no-repeat;background-size:400% 400%;background-position:var(--x) var(--y);aspect-ratio:1}#host #board button.marked{border-color:#38724d;box-shadow:inset 0 0 0 2px #73a06a;cursor:default}#board button.marked::after{content:'✓';position:absolute;right:4px;top:4px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:white;font-size:17px;border:2px solid var(--paper)}#host #board button.line{border-color:#b78d2a;box-shadow:inset 0 0 0 3px #e6bb50}#host #board button.hinted{outline:5px solid #dd7926;outline-offset:-5px}#board button.wrong{animation:shake .28s ease-in-out}#feedback{margin:0;padding:8px 17px;min-height:36px;font-size:14px;text-align:center;background:#fff9e6ec;border-radius:18px;line-height:1.5;color:#285f40;max-width:100%}#side{display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0;min-height:0}#target-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--paper);border:2px solid #d9bc87;border-radius:18px;padding:17px 20px;box-shadow:0 6px 0 #526f3e20}#target-card h2{font-size:20px;padding:7px 12px;background:var(--green);color:#fff8e7;align-self:stretch;text-align:center;border-radius:7px;margin:0}#target-picture{width:150px;max-width:100%}#target-name{font-size:20px;text-align:center;line-height:1.3}#hint{width:100%;max-width:180px}#tally{padding:12px 20px;background:#fff6e6e8;border-radius:13px;border:1px solid #d6c496}#tally>div{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:14px;padding:6px 0}#tally>div+div{border-top:1px dashed #c9ba8e}#tally b{font-size:25px;color:var(--green)}#tally small{font-size:13px}#play-actions button{width:100%;font-size:13px;min-height:36px;padding:8px}#result{padding:28px 20px;background:#fff8e6;border:3px dashed #b29d66;border-radius:24px;text-align:center;box-shadow:0 8px 0 #526f3e22}#result small{font-size:12px}#result h2{font-size:35px;line-height:1.4;margin:18px 0;color:var(--green)}#result p{font-size:14px;line-height:1.7}#result-detail{font-size:12px!important}#result button{width:100%;display:block;margin-top:16px;font-size:14px}#workspace.finished{grid-template-columns:minmax(0,1fr) 310px}.finished #feedback{font-weight:bold;color:var(--green)}
#modal{position:absolute;inset:0;z-index:50;background:#1d4634b8;display:grid;place-items:center;padding:16px}#modal>section{max-height:100%;overflow:auto;width:min(630px,100%);background:#fff7e7;border:3px solid #8aa472;border-radius:20px;padding:25px;box-shadow:0 10px 20px #122c3450}#modal header{display:flex;align-items:center;justify-content:space-between;gap:10px}#modal h2{font-size:24px;margin:0}#dialog-content{font-size:15px;line-height:1.9}#dialog-content>button{display:block;width:100%;margin-top:12px}#dialog-content label{display:flex;align-items:center;gap:12px;margin:17px 0}#dialog-content input[type=checkbox]{width:25px;height:25px}#dialog-content label:has(input[type=range]){display:block}#dialog-content input[type=range]{display:block;width:100%;height:34px}#storage-note{font-size:12px}#host:fullscreen,#host.faux-fullscreen{width:100vw;height:100dvh;max-width:none;margin:0;border:0;border-radius:0}#host.faux-fullscreen{position:fixed;inset:0;z-index:99999}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@media(max-width:700px){.bingo-page{padding:0 8px}#host{height:750px}.parent-note{padding:16px;margin:24px 0}}
@media(max-height:520px) and (min-width:621px){#host{height:390px}}
@container (max-width:620px){#host .picnic-top{height:80px;display:grid;justify-content:stretch;gap:7px;padding:7px 8px;text-align:center}#host .picnic-top strong{font-size:15px}#host nav{gap:5px}#host nav button{flex:1;white-space:nowrap;font-size:11px;padding:7px 3px;min-height:33px}#base{height:calc(100% - 80px)}#cover{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:18px;padding:22px 28px}.keyart{width:100%;height:100%;max-width:375px;justify-self:center;transform:rotate(-2deg)}.invitation{padding:19px 20px;gap:12px;align-items:center;text-align:center;width:100%;border-radius:23px}.invitation h2{font-size:34px}.invitation h2 br{display:none}.invitation>small:first-child{display:none}.invitation p{font-size:13px}.invitation p br{display:none}#host #start{font-size:20px;min-height:45px}#ready-note{font-size:9px}#workspace{--board-size:min(calc(100cqw - 34px),calc(100cqh - 320px));grid-template-columns:minmax(0,1fr);grid-template-rows:100px minmax(0,1fr) auto;gap:10px;padding:13px 12px 12px}.board-side{grid-row:2;gap:12px}#side{display:contents}#target-card{grid-row:1;display:grid;grid-template-columns:76px minmax(0,1fr) 76px;grid-template-rows:auto auto;gap:5px 12px;padding:10px 14px;border-radius:14px}#target-picture{grid-column:1;grid-row:1/3;width:74px}#target-card h2{grid-column:2;grid-row:1;font-size:13px;padding:5px;border-radius:5px}#target-name{grid-column:2;grid-row:2;font-size:15px}#host #hint{grid-column:3;grid-row:1/3;font-size:12px;min-height:36px;padding:7px 9px}#board{border-radius:14px;gap:5px;padding:6px;border-width:2px;box-shadow:0 5px 0 #52764330}#host #board button{border-radius:8px;padding:1px;border-width:1px}#board button.marked::after{width:20px;height:20px;font-size:13px;top:2px;right:2px}#feedback{font-size:11px;min-height:29px;padding:6px 9px}#tally{grid-row:3;display:flex;align-items:center;justify-content:space-around;gap:9px;padding:7px 12px;border-radius:10px;margin-bottom:42px}#tally>div{display:flex;flex-direction:column;gap:1px;font-size:10px;padding:0}#tally>div+div{border:0}#tally b{font-size:22px}#tally small{font-size:10px}#play-actions{grid-row:3;align-self:end;z-index:1}#host #play-actions button{font-size:11px;min-height:32px;padding:6px;border-width:1px}#workspace.finished{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;padding:20px 16px 14px;--board-size:min(calc(100cqw - 42px),calc(100cqh - 300px))}.finished .board-side{grid-row:1}#result{grid-row:2;padding:15px;border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:9px;align-items:center}#result small{display:none}#result h2{grid-column:1/-1;font-size:27px;margin:0}#result h2 br{display:none}#result p{font-size:11px;margin:0;grid-column:1/-1}#result-detail{font-size:10px!important}#host #result button{font-size:11px;min-height:37px;margin:0;padding:8px 5px}#modal>section{padding:18px}#modal h2{font-size:21px}#dialog-content{font-size:13px}}
@container (max-height:520px) and (min-width:621px){#host .picnic-top{height:38px;padding:4px 10px}#host .picnic-top strong{font-size:13px}#host nav button{min-height:28px;font-size:10px;padding:4px 8px}#base{height:calc(100% - 38px)}#cover{padding:18px 70px;gap:38px}.invitation{padding:18px 23px;gap:11px;border-radius:20px}.invitation h2{font-size:33px}.invitation h2 br{display:none}.invitation p{font-size:12px}.invitation p br{display:none}.invitation small{font-size:9px}#host #start{font-size:18px;min-height:40px}#workspace{--board-size:min(calc(100cqh - 95px),calc(100cqw - 285px));grid-template-columns:minmax(0,1fr) 230px;padding:12px 44px;gap:30px}.board-side{gap:8px}#board{gap:4px;padding:6px;border-radius:13px;border-width:2px}#host #board button{border-radius:6px;border-width:1px;padding:1px}#board button.marked::after{width:18px;height:18px;font-size:12px;right:2px;top:2px}#feedback{font-size:10px;min-height:24px;padding:5px 10px}#side{gap:9px}#target-card{display:grid;grid-template-columns:95px minmax(0,1fr);grid-template-rows:auto auto auto;padding:12px;gap:7px 10px;border-radius:12px}#target-picture{width:95px;grid-column:1;grid-row:1/4}#target-card h2{grid-column:2;font-size:13px;padding:5px}#target-name{grid-column:2;font-size:14px}#host #hint{font-size:11px;min-height:29px;padding:5px;grid-column:2}#tally{padding:8px 13px}#tally>div{font-size:11px;padding:3px 0}#tally b{font-size:19px}#tally small{font-size:11px}#host #play-actions button{font-size:11px;min-height:31px;padding:5px}#workspace.finished{grid-template-columns:minmax(0,1fr) 270px}#result{padding:19px 16px;border-radius:18px}#result small{font-size:9px}#result h2{font-size:27px;margin:11px 0}#result p{font-size:11px;margin:11px 0}#result-detail{font-size:10px!important}#host #result button{font-size:12px;min-height:32px;padding:7px 5px;margin-top:10px}#modal>section{padding:16px 22px}#modal h2{font-size:21px}#dialog-content{font-size:13px;line-height:1.65}#dialog-content p{margin:10px 0}#dialog-content label{margin:9px 0}}
@container (max-width:620px) and (max-height:610px){#cover{padding:14px 22px;gap:12px}.invitation{padding:13px 16px;gap:8px}.invitation h2{font-size:27px}.invitation p{font-size:11px}#host #start{font-size:18px;min-height:39px}#workspace{--board-size:min(calc(100cqw - 30px),calc(100cqh - 306px));grid-template-rows:73px minmax(0,1fr) auto;gap:7px;padding:8px 9px}#target-card{grid-template-columns:54px minmax(0,1fr) 60px;gap:4px 9px;padding:7px 10px}#target-picture{width:53px}#target-card h2{font-size:11px;padding:3px}#target-name{font-size:12px}#host #hint{font-size:10px;min-height:30px;padding:5px}#board{gap:4px;padding:5px}.board-side{gap:7px}#feedback{font-size:9px;min-height:23px;padding:4px 7px}#tally{padding:5px 9px;margin-bottom:34px}#tally>div{font-size:9px}#tally b{font-size:18px}#host #play-actions button{font-size:10px;min-height:28px;padding:4px}#workspace.finished{--board-size:min(calc(100cqw - 40px),calc(100cqh - 303px));padding:14px 13px 9px;gap:10px}#result{padding:11px;gap:6px}#result h2{font-size:23px}#result p{font-size:10px}#host #result button{font-size:10px;min-height:33px;padding:6px 3px}#modal>section{padding:15px}#dialog-content{font-size:12px;line-height:1.65}}
@media(prefers-reduced-motion:reduce){#host *{transition:none!important;animation:none!important}}
@container (max-width:620px){.board-side,#target-card,#tally,#play-actions,#result{grid-column:1}}
.picture{clip-path:inset(1%)}
@container (max-width:350px) and (min-height:611px){#target-card{grid-template-columns:54px minmax(0,1fr) 60px;gap:5px 8px;padding:10px 8px}#target-picture{width:53px}#target-name{font-size:13px}#host #hint{font-size:10px;padding:6px}}