@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Kalam:wght@400;700&display=swap');
:root{color-scheme:light;--ink:#253d43;--paper:#f5f0df;--blue:#294e69;--orange:#cc733c;font-family:'DM Sans',sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:#646b4f}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #eca451;outline-offset:3px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.classroom{position:relative;width:100%;height:100svh;min-height:520px;overflow:hidden}#desk{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}#desk:active{cursor:grabbing}#fallbackDesk{position:absolute;width:min(90vw,960px);height:auto;left:50%;top:50%;transform:translate(-50%,-50%);background:#aa7540 url('./desk.png') center/100% 100%;touch-action:none;border:12px solid #6a422a;box-shadow:0 30px 70px #0008}.game-header{position:absolute;z-index:5;top:max(20px,env(safe-area-inset-top));left:26px;right:26px;display:flex;align-items:center;gap:16px;pointer-events:none}.game-header>*{pointer-events:auto}.game-logo{display:block;font-family:Impact,'Arial Narrow',sans-serif;font-weight:900;line-height:.85;font-size:22px;letter-spacing:-.7px;background:#d88644;color:#282d21;text-decoration:none;padding:10px 13px 8px;transform:rotate(-4deg);border:1px solid #b96b32;box-shadow:0 3px 0 #754624,0 6px 13px #0004}.game-logo span{display:block;font:7px 'DM Sans',sans-serif;font-weight:700;letter-spacing:1px;margin-top:5px}.header-caption{display:flex;flex-direction:column;gap:4px;color:#f2ecda;text-shadow:0 1px 4px #152015;font-size:14px}.header-caption span:last-child{font-size:11px;letter-spacing:1px;opacity:.75}.icon-button{border:1px solid #e5e3c754;background:#2132264d;backdrop-filter:blur(8px);color:#f2ebd5;border-radius:10px;padding:13px 16px;min-height:46px;font-family:'Kalam',cursive;font-size:16px}.icon-button:hover{background:#172e27a8}#sound{margin-left:auto}.turn-note{position:absolute;top:30%;left:50%;transform:translateX(-50%) rotate(-2deg);background:#eee8d3;box-shadow:0 5px 14px #0002;color:#2c5271;clip-path:polygon(0 7%,6% 0,14% 5%,22% 0,31% 5%,41% 0,52% 6%,64% 0,77% 6%,88% 0,100% 6%,100% 95%,92% 100%,81% 94%,70% 100%,60% 94%,49% 100%,37% 94%,25% 100%,14% 94%,5% 100%,0 93%);padding:13px 24px;display:flex;align-items:center;gap:12px;max-width:85vw;min-height:48px;text-align:center;pointer-events:none}.turn-note strong{font-family:'Kalam',cursive;font-weight:400;font-size:21px;line-height:1.15}.turn-note #clock{font-size:14px;white-space:nowrap;border-left:1px solid #c1c3ad;padding-left:10px}.turn-note #clock:empty{display:none}.bottom-hud{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:24px;right:24px;display:flex;align-items:end;justify-content:space-between;gap:20px;pointer-events:none;color:#fbf3df;text-shadow:0 1px 6px #1b211a}.bottom-hud>*{pointer-events:auto}#boardHelp{font-family:'Kalam',cursive;font-size:17px;margin:0;max-width:260px}#aimPanel{width:230px;background:#142b24ce;border:1px solid #eee5c74a;border-radius:12px;color:#f1ecd9;text-shadow:none;backdrop-filter:blur(12px);position:absolute;right:0;bottom:0;overflow:hidden}#aimPanel summary{cursor:pointer;padding:13px 18px;font-size:14px;list-style-position:inside}#aimPanel[open]{width:min(360px,calc(100vw - 48px))}.flick-controls{padding:4px 18px 18px;display:grid;grid-template-columns:1fr 1fr;gap:18px}.flick-controls label{font-size:14px}.flick-controls output{float:right;font-size:12px;opacity:.7}.flick-controls input{display:block;width:100%;margin:10px 0 0;accent-color:#e1c186}.home-link{display:none;color:inherit;text-decoration:none}.game-menu{border:1px solid #d1c3a3;border-radius:12px;padding:26px;width:min(430px,calc(100vw - 30px));max-height:calc(100svh - 40px);overflow:auto;background:var(--paper);color:var(--ink);box-shadow:0 25px 100px #0b1b1666}.game-menu::backdrop{background:#14201733;backdrop-filter:blur(3px)}.menu-heading{display:flex;justify-content:space-between;align-items:start;margin-bottom:20px}.eyebrow{font-size:11px;letter-spacing:1.4px;margin:0 0 4px;color:#7d846e}.menu-heading h2{font-family:'Kalam',cursive;font-size:30px;margin:0;font-weight:700}.close-button{border:0;background:transparent;font-size:29px;line-height:1;color:#64705e;width:38px;height:38px}.modes{border:0;display:grid;grid-template-columns:1fr 1fr;padding:0;gap:10px;margin:0 0 18px}.mode{border:1px solid #ceceba;background:#e9e8d9;color:var(--ink);border-radius:7px;text-align:left;padding:12px 14px}.mode strong{font-size:16px;display:block}.mode span{font-size:12px;display:block;margin-top:4px;color:#6f7766}.mode.active{background:#e0e7da;border-color:#506951;box-shadow:inset 0 0 0 1px #506951}.setup-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:block;font-size:13px;font-weight:600;margin:0 0 14px}.field input,.field select{display:block;margin-top:7px;border:1px solid #cccab5;border-radius:5px;padding:11px 10px;width:100%;font-size:14px;background:#fffdf3;color:var(--ink);min-height:43px}select{padding-right:4px!important}.pen-picker-label h3{font-family:'Kalam',cursive;font-size:21px;font-weight:400;margin:0 0 7px}.pen-choices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:18px}.pen-choice{background:#f9f7ec;border:1px solid #d3d1be;border-radius:6px;padding:8px 4px;color:var(--ink);min-height:78px}.pen-choice.active{border-color:#527357;background:#e4e9da;box-shadow:inset 0 0 0 1px #527357}.pen-choice canvas{width:100%;height:34px;display:block}.pen-choice span{display:block;font-size:12px;font-weight:600}.pen-choice small{display:none}.primary,.secondary{padding:12px 17px;border-radius:6px;font-weight:600;font-size:15px;min-height:46px;border:1px solid #294e69}.primary{color:#fbf4e5;background:#294e69;box-shadow:0 3px 0 #203d50}.primary:hover:not(:disabled){background:#1c405b}.secondary{background:transparent;color:#294e69}.full{width:100%}.join-row{display:flex;gap:10px;align-items:center;margin-top:15px}.join-row .field{margin:0;flex:1;min-width:0}.join-row input{margin:0;text-transform:uppercase;letter-spacing:1px}.class-rules{border-top:1px solid #d4d2bf;margin-top:22px;padding-top:15px;color:#67725f;font-size:14px;line-height:1.7}.class-rules summary{cursor:pointer}.class-rules ol{padding-left:20px}.class-rules p{font-size:12px}.room-code{font-size:32px;letter-spacing:3px;text-align:center;font-weight:700;margin:15px 0}.connection,.tiny{font-size:13px;line-height:1.6;color:#6c7964}.roster{list-style:none;padding:0;margin:15px 0}.roster li{border-bottom:1px solid #d4d4be;padding:10px 0;font-size:14px}.roster small{display:block;font-size:12px;color:#7a836b;margin-top:4px}.text-button{background:none;border:0;color:var(--blue);text-decoration:underline;padding:10px 0;font-size:14px}.result-card{position:absolute;top:52%;left:50%;transform:translate(-50%,-50%) rotate(-2deg);width:min(370px,calc(100vw - 40px));padding:28px;background:#f8f1dc;border:1px solid #d6c4a0;box-shadow:0 16px 55px #15201666;text-align:center;border-radius:4px;z-index:8}.result-card h2{font:700 32px 'Kalam',cursive;margin:10px 0}.result-card p{font-size:14px;line-height:1.7}.error{position:absolute;z-index:15;top:90px;left:50%;transform:translateX(-50%);background:#fff3d8;color:#673923;border:1px solid #d1a467;padding:12px 18px;border-radius:5px;max-width:90vw;font-size:14px;margin:0}.playing .game-logo{opacity:.9}
@media(min-width:850px){.game-menu{margin-left:auto;margin-right:6vw}.turn-note{top:31%;left:52%}.game-header{left:30px;right:30px;top:25px}.bottom-hud{left:30px;right:30px;bottom:25px}#boardHelp{font-size:19px}}
@media(max-width:600px){.game-header{left:15px;right:15px;top:max(16px,env(safe-area-inset-top));gap:11px}.game-logo{font-size:18px;padding:9px 10px 7px}.game-logo span{font-size:6px}.header-caption{font-size:12px;max-width:120px}.header-caption span:last-child{font-size:9px}.icon-button{font-size:14px;padding:11px;min-height:42px;border-radius:9px}#sound{font-size:12px}.turn-note{top:29%;padding:12px 19px;min-height:43px}.turn-note strong{font-size:18px}.bottom-hud{left:16px;right:16px;bottom:max(18px,env(safe-area-inset-bottom))}#boardHelp{font-size:14px;max-width:180px}#aimPanel{width:auto;min-width:125px}#aimPanel summary{padding:12px 14px;font-size:13px}.game-menu{padding:22px;margin:auto;width:calc(100vw - 36px)}.menu-heading{margin-bottom:15px}.menu-heading h2{font-size:27px}.setup-fields{gap:10px}.field select,.field input{font-size:16px}.classroom{min-height:480px}.flick-controls{gap:14px}}
@media(max-height:620px) and (min-width:700px){.turn-note{top:22%;font-size:15px}.game-menu{max-height:95svh}.header-caption{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.quick-play{position:absolute;z-index:6;left:50%;bottom:90px;transform:translateX(-50%);display:flex;gap:12px;width:max-content;max-width:calc(100vw - 32px)}.quick-play button{border-radius:7px;padding:15px 23px;min-height:50px;font-family:'Kalam',cursive;font-size:19px;border:1px solid #d8ccb0;box-shadow:0 4px 0 #5b543e,0 8px 24px #14201644;white-space:nowrap}.quick-solo{background:#f3edda;color:#294d65;transform:rotate(-2deg)}.quick-online{background:#d5944f;color:#293b35;transform:rotate(2deg)}.quick-play button:hover{filter:brightness(1.07)}@media(max-width:600px){.quick-play{bottom:85px;gap:10px}.quick-play button{font-size:16px;padding:13px 15px;min-height:48px}}@media(max-width:350px){.quick-play button{font-size:14px;padding:12px 10px}}