.emotion-panel{margin-bottom:12px;padding:18px;border:1px solid #d8bc75;border-radius:15px;background:radial-gradient(ellipse at 100% 0,#f6d99555,transparent 65%),var(--panel);box-shadow:0 4px 18px #b9871510}
.emotion-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.emotion-kicker{color:var(--amber);font-size:10px;font-weight:900;letter-spacing:.12em}.emotion-heading h2{margin:5px 0;font-size:24px;letter-spacing:.06em}.emotion-heading p,.emotion-note{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
.btn.emotion-start{background:#1f625e;color:#fff;border-color:#1f625e;white-space:nowrap}.btn.emotion-start:hover{background:#194b47}.emotion-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:15px;padding-top:12px;border-top:1px solid #b9871525;font-size:11px;font-weight:800}.emotion-controls label{display:flex;align-items:center;gap:7px}.emotion-controls select{width:auto;max-width:170px;padding:6px;font-size:11px}.emotion-controls input{width:auto;accent-color:var(--green)}.emotion-text-btn{padding:7px 0;border:0;background:none;color:var(--green);font-size:11px;font-weight:800}.emotion-controls .emotion-text-btn{margin-left:auto}.emotion-note{margin-top:10px;font-size:11px}.emotion-session-actions{display:flex;align-items:center;gap:13px;margin-top:10px}.emotion-session-actions .btn{min-height:32px;padding:6px 10px;font-size:11px}
.emotion-progress{display:flex;align-items:center;gap:12px;margin-top:13px;font-size:11px;font-weight:900;color:var(--green)}.emotion-progress-track{height:6px;flex:1;border-radius:99px;background:var(--subtle);overflow:hidden}.emotion-progress-track span{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#1f625e,#d8b864);transition:width .4s}.emotion-panel [hidden],.emotion-dialog [hidden]{display:none!important}
body.dark .btn.emotion-start{background:#4f9f95;color:#08110f;border-color:#4f9f95}body.dark .btn.emotion-start:hover{background:#62b7ac}
.seat.emotion-pending{border:1px solid #bda76c;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,#e8d497 25%,var(--panel)));cursor:pointer;transition:transform .2s,box-shadow .2s}.seat.emotion-pending:hover{transform:translateY(-3px);box-shadow:0 5px 12px #b9871528;border-color:var(--amber)}.emotion-seat-star{font-size:23px;color:var(--amber);line-height:1.15}.seat.emotion-pending small{color:var(--muted);font-size:10px}.emotion-seat-position{position:absolute;left:6px;top:5px;color:var(--muted);font-size:9px;font-weight:700}.seat.emotion-revealed{border-color:var(--green)}.seat.emotion-latest{animation:emotion-seat-pop .6s ease-out;box-shadow:0 0 0 3px #d8b86455}.seat.emotion-unused{opacity:.65}.seat:focus-visible,.emotion-panel button:focus-visible,.emotion-dialog button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.seat:disabled{cursor:default}
.emotion-dialog{width:min(600px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid #d8b864;border-radius:24px;background:var(--panel);color:var(--ink);overflow:auto;box-shadow:0 30px 100px #0006}.emotion-dialog::backdrop{background:#091d18cc;backdrop-filter:blur(7px)}.emotion-draw{position:relative;padding:23px 28px 25px;text-align:center;background:radial-gradient(ellipse at 50% 40%,#e8d49733,transparent 70%)}.emotion-draw-top{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}.emotion-close{width:33px;height:33px;flex-shrink:0;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--panel);font-size:24px;line-height:1}.emotion-draw h2{margin:12px 0 5px;font-size:26px}.emotion-draw>p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}.emotion-wheel-wrap{position:relative;width:min(360px,100%);margin:25px auto 16px;aspect-ratio:1}.emotion-wheel-wrap canvas{display:block;width:100%;height:100%;border:7px solid #dfc680;border-radius:50%;box-shadow:0 0 0 5px #b9871520,0 12px 35px #162f2920;will-change:transform}.emotion-pointer{position:absolute;left:50%;top:-14px;transform:translateX(-50%);width:26px;height:34px;background:#a74f34;clip-path:polygon(0 0,100% 0,50% 100%);z-index:2;filter:drop-shadow(0 2px 2px #0003)}.emotion-wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;width:46%;height:46%;border-radius:50%;border:5px solid #dfc680;background:var(--panel);box-shadow:0 3px 15px #0002;pointer-events:none;padding:8px}.emotion-wheel-center span{font-size:12px;font-weight:900;color:var(--amber);letter-spacing:.08em}.emotion-wheel-center strong{font-size:clamp(17px,4.5vw,27px);line-height:1.4;margin-top:7px;max-width:100%;overflow-wrap:anywhere}.emotion-result{min-height:54px;display:flex;flex-direction:column;justify-content:center;gap:5px;margin:0 0 15px;line-height:1.6;font-size:12px;color:var(--muted)}.emotion-result strong{font-size:23px;color:var(--green)}.emotion-draw-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.emotion-draw-actions button{min-height:44px}.emotion-dialog.emotion-winner .emotion-wheel-center{box-shadow:0 0 0 8px #d8b86433,0 0 35px #d8b86466}.emotion-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:24px}.emotion-confetti i{position:absolute;top:-15px;width:8px;height:13px;animation:emotion-confetti-fall 2.5s ease-out both}
body.emotion-theater{overflow:hidden}body.emotion-theater .stage{position:fixed;inset:0;z-index:100;background:var(--paper);overflow:auto;padding:20px max(20px,calc((100vw - 1100px)/2));display:flex;flex-direction:column;gap:8px}body.emotion-theater .stage .emotion-panel{margin:0}body.emotion-theater .stage .viewbar{display:none}body.emotion-theater .stage .classroom{min-height:0;flex:1;padding:15px 21px}body.emotion-theater .stage .board{height:50px}body.emotion-theater .stage .podium{margin-top:8px;padding:6px}body.emotion-theater .stage .seat-grid{gap:9px}body.emotion-theater .stage .seat{min-height:clamp(60px,calc((100dvh - 560px)/var(--emotion-rows,6) - 9px),95px)}body.emotion-theater .stage .seat-content{min-height:44px}body.emotion-theater .stage .status{margin-top:0}
@keyframes emotion-seat-pop{0%{transform:scale(.93)}50%{transform:scale(1.05)}100%{transform:scale(1)}}@keyframes emotion-confetti-fall{0%{transform:translate3d(0,-10px,0) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate3d(var(--drift),650px,0) rotate(var(--turn));opacity:0}}
@media(max-width:560px){.emotion-panel{padding:14px}.emotion-heading{align-items:flex-start}.emotion-heading h2{font-size:21px}.emotion-heading p{font-size:11px}.emotion-heading .btn{padding:8px 10px;font-size:11px}.emotion-controls{gap:10px}.emotion-controls .emotion-text-btn{margin-left:0}.emotion-draw{padding:16px}.emotion-draw h2{font-size:22px}.emotion-wheel-wrap{width:min(290px,100%);margin-top:23px}.emotion-draw-top .emotion-kicker{font-size:9px}body.emotion-theater .stage{padding:12px}body.emotion-theater .stage .seat-grid{gap:7px}}
@media(prefers-reduced-motion:reduce){.seat.emotion-latest{animation:none}.emotion-confetti{display:none}.emotion-progress-track span{transition:none}.seat.emotion-pending:hover{transform:none}}
@media print{.emotion-panel,.emotion-dialog{display:none!important}body.emotion-theater{overflow:visible}body.emotion-theater .stage{position:static;display:block;padding:0;overflow:visible}body.emotion-theater .stage .classroom{padding:0}body.emotion-theater .stage .board{height:11mm}body.emotion-theater .stage .podium{margin-top:1.5mm;padding:1.6mm}body.emotion-theater .stage .seat-grid{gap:1.6mm}body.emotion-theater .stage .seat{min-height:16mm}body.emotion-theater .stage .seat-content{min-height:13mm}.seat.emotion-latest{animation:none;box-shadow:none}}
