.four-finder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.four-finder-head h1{margin:.25rem 0}.four-finder-status{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.25rem 0;padding:1rem 1.15rem;border:2px solid #1a1930;border-radius:18px;background:#f2ffcf}.four-finder-status span{font-weight:800;color:#5c287e}.four-finder-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.four-finder-option{min-height:92px;padding:1rem;border:2px solid #1a1930;border-radius:18px;background:#fff;color:#171526;text-align:left;box-shadow:0 5px 0 #1a1930;transition:transform .15s,background .15s}.four-finder-option:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 #1a1930}.four-finder-option strong,.four-finder-option small{display:block}.four-finder-option strong{font-size:1.15rem}.four-finder-option small{margin-top:.35rem;opacity:.72}.four-finder-option.correct{background:#b9ff39}.four-finder-option.wrong{background:#ff729f;color:#2a0e1b}.four-finder-option:disabled{opacity:1;cursor:default}.four-finder-score{margin-top:1.4rem}.four-finder-score h2{margin-bottom:.6rem}
@media(max-width:620px){.four-finder-head{display:block}.four-finder-head .secondary{margin-top:.75rem}.four-finder-status{display:block}.four-finder-status span{display:block;margin-top:.35rem}.four-finder-options{grid-template-columns:1fr}.four-finder-option{min-height:72px}}
/* Compact Play layout, shared pubquiz palette. */
#fourFinderView{min-width:0}#fourFinderView .eyebrow{color:var(--cyan)}#fourFinderView .four-finder-head .lead{display:none}
#fourFinderView .four-finder-status{display:flex;flex:0 0 auto;justify-content:space-between;gap:10px;margin:8px 0;padding:10px 12px;background:#20d9dc12;border:1px solid var(--cyan);border-radius:16px;font-size:14px;color:white}
#fourFinderTurn{display:flex;align-items:center;gap:10px;min-width:0}#fourFinderTurn>span{margin:0;color:white;min-width:0}#fourFinderTurn small{display:block;color:var(--cyan);font-size:10px;letter-spacing:.06em}#fourFinderTurn strong{display:block;font-size:20px;overflow-wrap:anywhere}#fourFinderProgress{color:var(--lime);font-size:12px;flex-shrink:0;margin:0}
#fourFinderView .player-avatar{flex:0 0 34px;width:34px;height:34px;min-width:34px;aspect-ratio:1;object-fit:cover;border-radius:50%}
#fourFinderView .four-participants{display:flex;flex-wrap:wrap;gap:5px;flex:0 0 auto;margin:0 0 10px}
.four-participant{display:flex;align-items:center;gap:5px;min-width:0;max-width:100%;padding:4px 7px;border:1px solid #80dd9155;background:#15573144;border-radius:10px;color:#b5ffc5;font-size:12px}.four-participant>span{min-width:0;overflow-wrap:anywhere}.four-participant small{display:block;font-size:9px}.four-participant.is-out{background:#83233b33;color:#ff9bb5;border-color:#ff598655}.four-participant.is-active{border-color:var(--lime)}#fourFinderView .four-participant .player-avatar{flex-basis:24px;width:24px;height:24px;min-width:24px}
#fourFinderView .four-finder-options{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;flex:0 0 auto;gap:6px;min-height:0;counter-reset:four}
#fourFinderView .four-finder-option{counter-increment:four;display:flex;align-items:center;gap:10px;min-height:44px;height:auto;padding:8px 12px;border:1px solid #ffffff40;border-radius:12px;box-shadow:0 3px 0 #080411;background:linear-gradient(135deg,#087e89,#16bdc7);color:white}
#fourFinderView .four-finder-option:nth-child(4n+2){background:linear-gradient(135deg,#a91558,#ed3987)}#fourFinderView .four-finder-option:nth-child(4n+3){background:linear-gradient(135deg,#547b00,#8fc700);color:#101900}#fourFinderView .four-finder-option:nth-child(4n){background:linear-gradient(135deg,#a36f00,#efae05);color:#201500}
#fourFinderView .four-finder-option:before{content:counter(four,upper-alpha);display:grid;place-items:center;flex:0 0 26px;height:27px;background:var(--purple);color:white;border-radius:7px;font-size:14px;font-weight:900}
#fourFinderView .four-finder-option strong{flex:1;min-width:0;font-size:16px;line-height:1.2;overflow-wrap:anywhere}#fourFinderView .four-finder-option small{display:none;margin:0;font-size:11px;max-width:35%;overflow-wrap:anywhere}
#fourFinderView .four-finder-option.correct{background:#174f35;color:#cdffdd;border-color:#72e6a2}#fourFinderView .four-finder-option.wrong{background:#581b31;color:#ffd4df;border-color:#ff8195}#fourFinderView .four-finder-option.correct small,#fourFinderView .four-finder-option.wrong small{display:block}
#fourFinderView .four-finder-score .player-row{background:#ffffff0c;color:white}#fourFinderView .four-finder-score{flex:0 0 auto}
/* Answers come first; the roster can be reached below them. */
#fourFinderView .four-participants{margin:14px 0 0}
@media(max-width:720px){
body.in-game #fourFinderView .four-finder-head h1{font-size:clamp(20px,5.4vw,25px);line-height:1.12;margin:3px 0 5px;overflow-wrap:anywhere}
body.in-game #fourFinderView .four-finder-status{gap:6px;padding:6px 8px;margin:5px 0 8px;border-radius:12px;min-width:0;flex-wrap:wrap}
body.in-game #fourFinderTurn{gap:7px;flex:1;min-width:0}
body.in-game #fourFinderTurn strong{font-size:17px;line-height:1.15}
body.in-game #fourFinderTurn small{font-size:9px}
body.in-game #fourFinderProgress{font-size:11px;white-space:normal}
body.in-game #fourFinderTurn .player-avatar{width:28px;height:28px;min-width:28px;flex-basis:28px}
body.in-game #fourFinderView .four-finder-options{gap:5px}
body.in-game #fourFinderView .four-finder-option{min-height:38px;padding:5px 9px;gap:8px;border-radius:10px}
body.in-game #fourFinderView .four-finder-option strong{font-size:15px;line-height:1.15}
body.in-game #fourFinderView .four-finder-option:before{height:25px;flex-basis:25px;font-size:13px}
}