/* Opaque pieces cover every pixel until the teacher is allowed to open them. */
.hidden-picture{position:absolute;width:100%;height:133.333333%;top:-33.333333%;left:0;object-fit:fill;user-select:none;pointer-events:none}
.hidden-picture.custom-picture{inset:0;width:100%;height:100%;object-fit:contain;background:#fffefa}
.picture-frame{aspect-ratio:2/1}
.piece.opened{background:transparent;border-color:transparent;color:transparent;pointer-events:none}
.piece.available{cursor:pointer;box-shadow:inset 0 0 0 2px #ffffff80}
.piece.available:hover,.piece.available:focus-visible{background:#c9e4e8;color:#417d8d;box-shadow:inset 0 0 0 4px #4e97a9;outline-offset:-5px;z-index:3}
.piece.just-opened:after{content:'✦';position:absolute;font-size:44px;color:#fff7c1;text-shadow:0 0 9px #eabd62;animation:piece-spark .9s both;pointer-events:none}
@keyframes piece-spark{0%{opacity:1;transform:scale(.3)}50%{opacity:1;transform:scale(1.5) rotate(25deg)}100%{opacity:0;transform:scale(1.9) rotate(40deg)}}
.team-strip{grid-template-columns:repeat(var(--teams,3),minmax(0,1fr))}
.primary{background:#397987;border-color:#326d7a;border-bottom-color:#285965}.primary:hover{background:#306b79}
.active-team{border:2px solid var(--team);background:var(--tint);box-shadow:0 4px 0 #d9e5e5}
.active-team .team-name small{color:#526c71;font-weight:700}
.card-top{color:#6f8388}.card-top b{color:#577e86}
.eyebrow{color:#5b7e87}.picture-caption{color:#657f83}.hint-row{color:#6e816c}
.footer{font-size:11px;color:#778c92}
.badge{color:#8b6b35}.welcome>p{color:#6d858c}.rule-chips{font-size:12px;color:#806d49}
.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}
.turn-tag{display:inline-flex;align-items:center;gap:7px;max-width:100%;overflow-wrap:anywhere;background:var(--tint);border:1px solid var(--team);border-radius:30px;padding:7px 13px;color:#46616a;font-size:14px;font-weight:750}
.source-tag{font-size:12px;color:#788b91;white-space:nowrap}
.question{font-size:clamp(18px,1.5vw,23px);line-height:1.5;letter-spacing:-.3px;margin:0 0 19px;font-weight:700}
.answers{display:grid;gap:10px}
.answer{display:flex;align-items:center;gap:11px;text-align:left;width:100%;border:1.5px solid #dce7e8;border-radius:12px;background:white;padding:12px;font-size:clamp(15px,1.2vw,18px);line-height:1.45;transition:background .15s,border-color .15s;position:relative}
.answer>span:nth-child(2){flex:1}
.answer:hover:not(:disabled){border-color:#90b8c1;background:#f1f8f8}
.letter{display:grid;place-items:center;width:29px;height:29px;background:#edf3f4;border-radius:8px;color:#7c959c;flex:none;font-size:14px;font-weight:800}
.answer.selected{border-color:#5599a7;background:#eaf5f6;box-shadow:0 0 0 1px #5599a7}
.answer.selected .letter{background:#5599a7;color:#fff}
.answer:disabled{opacity:1}
.answer.correct{border-color:#4b9b7c;background:#e7f6ed;box-shadow:0 0 0 1px #4b9b7c}
.answer.correct .letter{background:#4b9b7c;color:#fff}
.answer.wrong{border-color:#d5897f;background:#fff0eb;box-shadow:none}
.answer-mark{font-weight:900;font-size:21px}
.question-actions{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-top:19px}
.question-actions .primary{font-size:15px;padding:11px 17px}
.question-actions .soft-btn{font-size:14px;white-space:nowrap}
.feedback{margin:17px 0;padding:14px 15px;border-radius:12px;font-size:15px;line-height:1.5}
.feedback.good{background:#edf7ee;color:#397958}
.feedback.try-again{background:#fff3de;color:#876f3d}
.feedback b{font-size:18px}.feedback p{margin:6px 0 0}
.small-icon{margin:22px 0 13px;font-size:48px}
.open-nudge{background:#edf5f4;border-radius:13px;padding:15px;font-size:16px;color:#5b8991;margin:24px 0}
.success-pill{display:inline-block;background:#ebf5e8;color:#608153;border-radius:25px;padding:10px 15px;font-size:14px}
.guess-card{text-align:center}.guess-card h2{font-size:28px;margin:12px 0}
.muted{color:#6c8389;line-height:1.65;font-size:16px}
label{display:block;text-align:left;font-size:14px;font-weight:650;line-height:1.5;color:#526f79}
input:not([type=file]),select{width:100%;border:1.5px solid #cfdee1;background:white;border-radius:10px;padding:11px 12px;color:#344b58;min-height:44px;margin-top:7px}
input::placeholder{color:#8a9da4;font-weight:400}
#guess-form{margin-top:22px}#guess-input{font-size:clamp(17px,1.4vw,23px);font-weight:800;text-transform:uppercase;text-align:center;padding:18px 10px;background:#fffdf5;border:2px solid #dcd6ba}
#guess-help{display:block;text-align:left;color:#6b828b;font-size:12px;margin:9px 0}
.form-error{font-size:14px;color:#a84e48;line-height:1.5;min-height:1px;margin:10px 0}
.form-error:empty{margin:12px 0}
.text-btn{border:0;background:none;color:#68838c;padding:14px;font-size:14px;border-radius:10px;text-decoration:underline;text-underline-offset:4px}
.text-btn:hover{background:#f0f6f6}
.guess-echo{color:#826b87!important;font-size:21px!important;font-weight:750;background:#f5edf8;padding:14px;border-radius:13px;overflow-wrap:anywhere}
.secret-reveal{text-align:center;margin-top:17px;padding:18px 12px;border:1px solid #e6dbae;border-radius:15px;background:#fff5da;animation:answer-appear .45s ease-out}
.secret-reveal span{display:block;font-size:10px;letter-spacing:2px;color:#9b814a;font-weight:800;margin-bottom:7px}
.secret-reveal strong{font-size:clamp(24px,2.5vw,39px);color:#98702e;overflow-wrap:anywhere;line-height:1.3}
@keyframes answer-appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.final-card{text-align:center;background:linear-gradient(140deg,#fffdf5,#f1f8f5)}.final-card h2{font-size:29px;overflow-wrap:anywhere;margin:16px 0 6px}
.winning-score{font-size:49px;font-weight:850;color:#bd9858}.winning-score small{font-size:16px;font-weight:600}
#timer.expired{color:#a36147;background:#fff1de}
dialog{border:1px solid #d6e4e7;border-radius:22px;padding:29px;background:#fffefa;color:#344b58;max-width:640px;width:calc(100% - 32px);max-height:88dvh;box-shadow:0 24px 80px #1e40523b}
dialog::backdrop{background:#233e526e;backdrop-filter:blur(4px)}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:23px}
.dialog-heading h2{font-size:27px;margin:8px 0 0;letter-spacing:-.5px}
.close-btn{border:1px solid #dce7e8;width:35px;height:35px;border-radius:50%;font-size:23px;line-height:1;background:#f2f7f6;flex:none}
.setup-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:23px 0}
[hidden]{display:none!important}
.setup-note,.small-note{font-size:13px;color:#7a8c90;line-height:1.6}
.custom-settings{border:1px dashed #cddedf;border-radius:12px;padding:13px 15px;margin:16px 0}
.custom-settings summary{font-size:14px;font-weight:600;cursor:pointer;color:#5c7e88}
.custom-settings p,.custom-settings small{font-size:12px;color:#778c93;line-height:1.5}
.custom-settings small{display:block;margin-top:6px}
.custom-settings label{margin-top:13px}
input[type=file]{display:block;width:100%;font-size:12px;margin-top:10px}
input::file-selector-button{border:1px solid #ccdcdf;background:#edf5f5;padding:9px;border-radius:8px;color:#486c76;font:inherit;cursor:pointer}
.rules-list{padding-left:26px;font-size:17px;line-height:1.65}.rules-list li{padding-left:6px;margin:13px 0}
.rules-list li::marker{color:#5599a7;font-weight:850}
.tip-box{font-size:14px;line-height:1.6;background:#edf5f2;border-radius:12px;padding:16px;color:#567b77}
.review-list details{border:1px solid #dce7e8;border-radius:12px;margin:12px 0;padding:14px}
.review-list summary{cursor:pointer;font-size:15px;font-weight:650}.review-list h3{font-size:17px;line-height:1.5}.review-list p{font-size:15px;line-height:1.6}
#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,16px);background:#36535e;color:#fff;border-radius:13px;padding:14px 20px;box-shadow:0 5px 28px #27455122;font-size:15px;max-width:calc(100vw - 32px);width:max-content;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
#toast.visible{opacity:1;transform:translate(-50%,0)}
.confetti{position:fixed;inset:0;overflow:hidden;z-index:90;pointer-events:none}
.confetti i{position:absolute;left:var(--x);top:-15px;width:10px;height:18px;border-radius:3px;background:var(--color);animation:confetti-fall 2.1s var(--delay) ease-in both}
@keyframes confetti-fall{from{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(105vh) rotate(540deg);opacity:0}}
@media(min-width:1600px){.shell{max-width:1780px}.game-layout{grid-template-columns:1.3fr 1fr}.question{font-size:25px}.answer{font-size:20px}.side-card{padding:29px}.team-name b{font-size:22px}.team-score{font-size:37px}}
@media(max-width:1100px){.header-actions{flex-wrap:wrap;justify-content:flex-end}.header-actions .soft-btn{padding:9px;font-size:11px}.question{font-size:18px}.answer{font-size:15px;padding:10px}.team-strip{gap:10px}.team-card{gap:8px}.team-score{font-size:26px}.team-score small{display:block;margin:0}.footer{font-size:10px}}
@media(max-width:760px){.team-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.picture-frame{aspect-ratio:2/1}.intro{margin-bottom:21px}.header{align-items:flex-start}.header-actions{gap:5px;max-width:60%}.brand{margin-top:3px}.brand-icon{display:none}.side-card{padding:22px}.team-card{padding:13px}.team-name b{font-size:14px}.team-name small{font-size:9px}.footer{flex-direction:column;gap:7px;line-height:1.5}.picture-card{padding:17px}.card-top{font-size:10px;gap:9px}.card-top b{font-size:12px}.avatar{width:32px;height:35px;font-size:24px}.setup-options{gap:9px}.setup-options label{font-size:12px}.setup-options select{font-size:13px;padding:10px 5px}.name-fields{gap:12px}dialog{padding:22px}.rule-chips{gap:9px;font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.piece.just-opened:after{display:none}}