:root{--bg-top:#fff7be;--bg-bottom:#b9efff;--card:rgba(255,255,255,0.84);--card-strong:#ffffff;--text:#1f305f;--muted:#53648f;--primary:#ff7f50;--primary-strong:#ff6240;--secondary:#4fb6ff;--success:#57d66c;--error:#ff6b7a;--border:rgba(31,48,95,0.1);--shadow:0 22px 50px rgba(64,90,140,0.16)}*{box-sizing:border-box}html{font-size:16px}body{margin:0;min-height:100vh;font-family:Avenir Next,Trebuchet MS,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(255,255,255,.9),transparent 28%),radial-gradient(circle at top right,rgba(255,183,77,.35),transparent 22%),linear-gradient(180deg,var(--bg-top),var(--bg-bottom))}a{color:inherit;text-decoration:none}button,input{font:inherit}.shell{min-height:100vh;padding:clamp(14px,2vw,24px) clamp(10px,2.5vw,20px) clamp(24px,4vw,40px);display:flex;justify-content:center;align-items:center}.shell-game{align-items:flex-start}.game-card,.hero-card,.panel{width:min(100%,1100px);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:32px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.hero-card{padding:40px 28px;text-align:center}.eyebrow{margin:0 0 8px;font-size:.95rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-strong)}h1,h2{margin:0}h1{font-size:clamp(2rem,6vw,4rem);line-height:.96}h2{font-size:1.6rem}.empty-state,.form-message,.hero-copy,.person-card p,.section-copy{color:var(--muted)}.hero-copy{max-width:28rem;margin:16px auto 0;font-size:1.12rem;line-height:1.5}.hero-actions{margin-top:26px;display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.hero-button{border:0;border-radius:999px;min-height:60px;padding:0 28px;font-size:1.1rem;font-weight:800;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.hero-button:hover{transform:translateY(-1px)}.hero-button:active{transform:translateY(1px) scale(.99)}.hero-button.primary{background:linear-gradient(180deg,var(--primary),var(--primary-strong));color:white;box-shadow:0 14px 30px rgba(255,98,64,.28)}.hero-button.secondary{background:white;color:var(--text)}.game-card{position:relative;margin-top:12px;padding:clamp(14px,2vw,24px)}.login-card{width:min(100%,520px);background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);border-radius:32px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:clamp(24px,4vw,36px);text-align:center}.login-badge{width:-moz-fit-content;width:fit-content;margin:0 auto 14px;padding:10px 18px;border-radius:999px;background:linear-gradient(180deg,#fff6c4,#ffd79c);color:var(--text);font-weight:800}.game-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2vw,20px)}.case-toggle{background:rgba(255,255,255,.9);padding:8px;border-radius:999px;display:inline-flex;gap:8px}.case-toggle button{border:0;min-height:50px;padding:0 16px;border-radius:999px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer}.case-toggle .selected{background:linear-gradient(180deg,#7cddff,#45b5ff);color:white}.photo-frame{position:relative;overflow:hidden;min-height:clamp(300px,48vh,560px);border-radius:28px;background:linear-gradient(180deg,#fff6e0,#eef9ff);display:flex;align-items:center;justify-content:center;padding:clamp(10px,1.8vw,18px)}.person-photo{display:block;width:100%;height:clamp(280px,42vh,500px);max-height:none;object-fit:contain;object-position:center;border-radius:24px;background:transparent;opacity:1;filter:none;mix-blend-mode:normal}.photo-placeholder{min-height:clamp(240px,36vh,420px);width:100%;border-radius:24px;display:grid;place-items:center;background:rgba(255,255,255,.7);color:var(--muted);font-size:1.2rem;text-align:center}.answer-row{margin:clamp(14px,2vw,18px) 0 clamp(12px,1.8vw,16px);display:flex;justify-content:center;gap:clamp(8px,1.5vw,12px);flex-wrap:wrap}.answer-box{width:clamp(50px,8.4vw,84px);height:clamp(56px,8.9vw,92px);background:white;border:3px solid rgba(31,48,95,.08);border-radius:20px;display:grid;place-items:center;font-size:clamp(1.4rem,4vw,2.4rem);font-weight:900;box-shadow:inset 0 -6px 0 rgba(31,48,95,.04);transition:transform .16s ease,background .16s ease,border-color .16s ease}.answer-box.correct{background:#dcffd9;border-color:var(--success);transform:translateY(-2px)}.answer-box.wrong{background:#ffe1e6;border-color:var(--error);animation:shake .22s ease-in-out 2}.status-pill{width:-moz-fit-content;width:fit-content;max-width:100%;margin:0 auto clamp(14px,2vw,20px);min-height:46px;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.86);color:var(--text);font-weight:800;display:grid;place-items:center}.status-pill.celebrate{background:#fff0a6;animation:bounce .5s ease infinite alternate}.game-actions{display:flex;justify-content:center;margin:0 0 clamp(14px,2vw,18px)}.skip-button{min-width:min(100%,220px)}.keyboard{display:grid;grid-gap:clamp(8px,1.3vw,12px);gap:clamp(8px,1.3vw,12px);width:100%}.keyboard-row{display:flex;justify-content:center;gap:clamp(6px,1vw,10px);flex-wrap:nowrap}.keycap{flex:1 1;min-width:0;min-height:clamp(58px,7vw,88px);border:0;border-radius:20px;background:linear-gradient(180deg,#ffffff,#eaf6ff);color:var(--text);font-size:clamp(1.35rem,3.2vw,2rem);font-weight:900;box-shadow:0 8px 18px rgba(79,182,255,.22),inset 0 -5px 0 rgba(79,182,255,.1);cursor:pointer}.keycap:disabled{opacity:.45;cursor:not-allowed}.keycap:not(:disabled):active{transform:translateY(2px) scale(.98)}.admin-grid{width:min(100%,1120px);display:grid;grid-template-columns:1.05fr .95fr;grid-gap:20px;gap:20px}.panel{padding:24px}.panel-head{margin-bottom:16px}.panel-head-spread{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.admin-form{display:grid;grid-gap:18px;gap:18px}.login-form{max-width:360px;margin:0 auto;text-align:left}.field{display:grid;grid-gap:8px;gap:8px}.checkbox-row span,.field span{font-weight:700}.field input[type=email],.field input[type=file],.field input[type=password],.field input[type=text]{min-height:56px;padding:14px 16px;border-radius:18px;border:2px solid rgba(31,48,95,.08);background:white;font-size:1rem;color:var(--text);transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}.field input[type=email]:hover,.field input[type=file]:hover,.field input[type=password]:hover,.field input[type=text]:hover{border-color:rgba(79,182,255,.28)}.field input[type=email]:focus,.field input[type=file]:focus,.field input[type=password]:focus,.field input[type=text]:focus{outline:none;border-color:rgba(79,182,255,.7);box-shadow:0 0 0 4px rgba(79,182,255,.16)}.checkbox-row{display:flex;align-items:center;gap:12px}.checkbox-row input{width:24px;height:24px}.people-list{display:grid;grid-gap:14px;gap:14px}.person-card{display:flex;gap:14px;align-items:center;padding:12px;border-radius:22px;background:rgba(255,255,255,.88)}.admin-photo{width:86px;height:86px;border-radius:20px;display:block;object-fit:cover;object-position:center;background:transparent;opacity:1;filter:none}.person-card-manage{align-items:stretch}.person-meta{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:8px}.person-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}.form-message{min-height:24px;margin:0;font-weight:700}.form-error{color:#cb3550}.login-copy{max-width:30ch;margin:12px auto 24px}.mini-button{min-height:44px;padding:0 16px;border:0;border-radius:999px;font-weight:800;cursor:pointer}.mini-button.secondary{background:linear-gradient(180deg,#ffffff,#edf7ff);color:var(--text);box-shadow:0 8px 18px rgba(79,182,255,.18)}.mini-button.danger{background:linear-gradient(180deg,#ff9da8,#ff6f7f);color:white;box-shadow:0 10px 18px rgba(255,107,122,.24)}.logout-button:disabled,.mini-button:disabled{opacity:.55;cursor:not-allowed}.confetti-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;left:50%;top:10%;width:14px;height:24px;border-radius:999px;background:hsl(calc(20deg * var(--delay-number, 1)),90%,65%);animation:confetti-fall 1s ease-out forwards;animation-delay:var(--delay);transform:translateX(var(--x)) rotate(var(--rotate))}.confetti-piece:nth-child(3n){background:#ff7f50}.confetti-piece:nth-child(3n+1){background:#4fb6ff}.confetti-piece:nth-child(3n+2){background:#57d66c}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-6px)}}@keyframes confetti-fall{0%{opacity:0;transform:translateX(var(--x)) translateY(-12px) rotate(var(--rotate))}20%{opacity:1}to{opacity:0;transform:translateX(calc(var(--x) * 1.5)) translateY(260px) rotate(420deg)}}@media (max-width:920px){.shell-game{align-items:stretch}.game-card{width:min(100%,900px)}.admin-grid{grid-template-columns:1fr}.game-header{align-items:stretch}.game-header,.panel-head-spread{flex-direction:column}.photo-frame{min-height:clamp(300px,42vh,460px)}.person-photo{height:clamp(260px,36vh,420px)}.answer-box{width:clamp(52px,9vw,78px);height:clamp(58px,9.5vw,84px)}.keycap{min-height:clamp(60px,8vw,78px);font-size:clamp(1.2rem,3vw,1.7rem)}}@media (max-width:640px){.shell{padding:14px 10px 28px}.game-card,.hero-card,.panel{border-radius:24px}.hero-card{padding:30px 18px}.game-card,.panel{padding:16px}.case-toggle{width:100%;justify-content:space-between}.case-toggle button{flex:1 1;min-height:52px;padding:0 12px;font-size:.98rem}.photo-frame{min-height:min(42vh,360px);padding:10px;border-radius:24px}.person-photo{height:min(38vh,320px);border-radius:18px}.answer-row{gap:8px}.answer-box{width:clamp(44px,12vw,60px);height:clamp(50px,13vw,66px);border-radius:16px;font-size:clamp(1.15rem,6vw,1.75rem)}.status-pill{width:100%;text-align:center;font-size:.98rem}.game-actions{margin-bottom:14px}.logout-button,.skip-button{width:100%}.keyboard{gap:8px}.keyboard-row{gap:6px}.keycap{min-height:clamp(52px,13vw,62px);border-radius:16px;font-size:clamp(1.1rem,5.4vw,1.45rem)}.hero-actions{flex-direction:column}.hero-button{width:100%}.person-card-manage{flex-direction:column}.admin-photo{width:100%;height:180px}}@media (min-width:1180px){.game-card{width:min(100%,980px)}.photo-frame{min-height:540px}.person-photo{height:500px}}