.ss-wrap *{box-sizing:border-box}
.ss-wrap{margin:0;background:#edf3fb;color:#13243c;font-family:Arial,'Segoe UI',sans-serif}
.ss-wrap .shell{max-width:1380px;margin:auto;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:18px}
.ss-wrap .player{background:white;border-radius:22px;overflow:hidden;box-shadow:0 10px 36px #243e5d22}
.ss-wrap .scene{height:clamp(270px,43vw,510px);position:relative;background:#203049 center/cover no-repeat}
.ss-wrap .scene:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#061626a6,transparent 45%)}
.ss-wrap .scene-head{position:absolute;top:16px;left:18px;right:18px;z-index:2;display:flex;justify-content:space-between;gap:12px;align-items:start}
.ss-wrap .chapter{padding:10px 15px;background:#192c3fdc;color:white;border-radius:14px;font-weight:800}
.ss-wrap .clock{background:#152337dd;color:white;padding:10px;border-radius:12px;font-weight:700}
.ss-wrap .scene-bottom{position:absolute;bottom:20px;left:22px;z-index:2;color:#fff;font-size:clamp(19px,3vw,32px);font-weight:800;text-shadow:0 2px 8px #000}
.ss-wrap .dialogue{background:#fff9ee;min-height:240px;padding:18px 22px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.ss-wrap .utterance{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;opacity:.53;transition:.2s}
.ss-wrap .utterance.active{background:#d9ebff;opacity:1;box-shadow:inset 4px 0 #2479eb}
.ss-wrap .avatar{width:62px;height:62px;flex-shrink:0;object-fit:cover;object-position:center;border-radius:15px;border:3px solid #fff;box-shadow:0 2px 8px #0002}
.ss-wrap .person{font-size:12px;color:#52677f;font-weight:800;margin-bottom:5px}
.ss-wrap .line-text{font-size:clamp(18px,2.7vw,28px);font-weight:800;line-height:1.4}
.ss-wrap .active .line-text{color:#164aaf}
.ss-wrap .controls{padding:15px 20px;background:#19314c;color:white}
.ss-wrap .buttons{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.ss-wrap .buttons button,.ss-wrap .side button{cursor:pointer;border:0;border-radius:11px;padding:11px 14px;background:#2c76e9;color:white;font-weight:800}
.ss-wrap .buttons button.secondary{background:#36516e}
.ss-wrap .seek{width:100%;margin:14px 0 4px;accent-color:#6eabff}
.ss-wrap .timebar{display:flex;justify-content:space-between;font-size:12px;color:#d6e4f7}
.ss-wrap .side{background:white;padding:18px;border-radius:22px;box-shadow:0 10px 36px #243e5d22;align-self:start}
.ss-wrap .side h2{font-size:21px;margin:0 0 10px}
.ss-wrap .side p{color:#596c81;line-height:1.5;font-size:13px}
.ss-wrap .side button{display:block;width:100%;text-align:left;background:#edf4ff;color:#19314c;margin:7px 0;border:1px solid #d8e6fa}
.ss-wrap .side button.chosen{background:#2c76e9;color:white}
.ss-wrap .side label{display:block;margin-top:18px;font-size:13px;font-weight:700}
.ss-wrap .side select,.ss-wrap .side input{width:100%;margin-top:7px;padding:10px;border:1px solid #c8d5e6;border-radius:9px}
.ss-wrap .note{font-size:12px!important}
.ss-wrap .side input[type=range]{accent-color:#2c76e9}
.ss-wrap .badge{font-size:12px;background:#e6f4e8;color:#20743a;border-radius:15px;padding:5px 9px}
.ss-wrap #audio{display:none}
@media(max-width:820px){.ss-wrap .shell{grid-template-columns:1fr;padding:9px}
.ss-wrap .side{order:2}
.ss-wrap .scene{height:290px}
.ss-wrap .dialogue{padding:12px;min-height:260px}
.ss-wrap .avatar{width:48px;height:48px}
.ss-wrap .utterance{padding:8px}
.ss-wrap .scene-head{left:10px;right:10px}
.ss-wrap .chapter,.ss-wrap .clock{font-size:12px}}
.ss-wrap .learning{padding:14px 20px;background:#fff}
.ss-wrap .tabs{display:flex;flex-wrap:wrap;gap:7px}
.ss-wrap .tab,.ss-wrap .panel button{border:0;border-radius:11px;padding:11px 13px;background:#e9f0fb;color:#213b59;cursor:pointer;font-weight:700}
.ss-wrap .tab.active,.ss-wrap .panel button{background:#246cdb;color:white}
.ss-wrap .panel{padding:12px 4px;line-height:1.7}
.ss-wrap .panel.hidden{display:none}
.ss-wrap .panel h3{margin:5px 0}
.ss-wrap .hint{font-size:13px;color:#60748c}
.ss-wrap .vocab-item{padding:9px 5px;border-bottom:1px solid #e4eaf2}
.ss-wrap .quiz-q{padding:12px;margin:12px 0;background:#f3f7fc;border-radius:12px}
.ss-wrap .quiz-q label{display:block;margin:6px 0;cursor:pointer}
.ss-wrap .quiz-q strong{display:block;margin-bottom:7px}
.ss-wrap #quizResult{font-weight:800;padding:10px}
.ss-wrap #roleEdit,.ss-wrap #importRoles{width:100%}
.ss-wrap /* Mini STEP v8 */
#scene{animation:cafeZoom 19s ease-in-out infinite alternate;transform-origin:center center}
@keyframes cafeZoom{from{transform:scale(1)}to{transform:scale(1.075)}}
.ss-wrap .chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.ss-wrap .chip{cursor:grab;padding:8px 12px;background:#fff2d9;border:1px solid #e9c883;border-radius:10px;font-weight:600}
.ss-wrap .drag-target{border:2px dashed #aac4e8}
.ss-wrap .lex-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.ss-wrap .lex-card{padding:13px;background:#f0f5ff;border-radius:13px;border:1px solid #d9e6fa;min-height:85px}
.ss-wrap .lex-card b{display:inline-block;color:#143b70}
.ss-wrap .lex-card div{margin-top:7px;color:#38536d}
.ss-wrap .sound-word{float:right!important;background:#e0edff!important;color:#184d9a!important;padding:4px 9px!important}
.ss-wrap .quiz-q{padding:17px!important;border:1px solid #dce7f5}
.ss-wrap .qtop{display:flex;justify-content:space-between;color:#5a6c86;font-size:12px;margin-bottom:9px}
.ss-wrap .choice-grid{display:grid;gap:8px;margin-top:12px}
.ss-wrap .choice{display:flex!important;align-items:center;gap:8px;background:white;border:1px solid #dbe4f2;border-radius:10px;padding:11px!important}
.ss-wrap .choice:has(input:checked){border-color:#3975d9;background:#eaf2ff}
.ss-wrap .feedback{margin-top:8px;padding:9px;border-radius:8px;display:none}
.ss-wrap .feedback.right{display:block;background:#e3f5eb;color:#116c42}
.ss-wrap .feedback.wrong{display:block;background:#fff0eb;color:#9b3c27}
.ss-wrap .quiz-q.missed{border-color:#e5a596}
.ss-wrap .drag-target{padding:10px;background:#fff;border-radius:10px;margin-top:8px}
.ss-wrap .drop-label{display:block;font-size:12px;color:#667e94;margin:6px 0}
.ss-wrap .match-select{display:block;width:100%;padding:10px;border-radius:8px;border:1px solid #a9c3e5;font-size:15px}
.ss-wrap .progress-line{padding:10px;background:#e7f0ff;border-radius:10px;font-weight:700}
.ss-wrap .score-big{font-size:27px;font-weight:800;color:#15498a}
.ss-wrap .unlock{padding:16px;background:#f0f5ff;border:1px solid #dbe6f5;border-radius:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ss-wrap .unlock button{border:0;border-radius:9px;padding:10px;background:#1d65bf;color:white;cursor:pointer}
.ss-wrap .unlock button:disabled{opacity:.45;cursor:not-allowed}
.ss-wrap #resetProgress{background:#e3eaf5;color:#33506e}
.ss-wrap .panel button:disabled{opacity:.5}
.ss-wrap .stage-people{position:absolute;inset:auto 6% 10% 6%;display:flex;align-items:end;justify-content:space-between;z-index:3;pointer-events:none}
.ss-wrap .stage-person{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.62;transform:scale(.88);transition:transform .25s,opacity .25s,filter .25s}
.ss-wrap .stage-person.speaking{opacity:1;transform:scale(1.08);filter:drop-shadow(0 0 16px #ffdf88)}
.ss-wrap .stage-face{width:clamp(75px,12vw,145px);height:clamp(75px,12vw,145px);border:5px solid white;border-radius:50%;background:linear-gradient(145deg,#e4f5ff,#a9c8f7);display:grid;place-items:center;font-size:clamp(44px,8vw,85px);box-shadow:0 10px 24px #0018}
.ss-wrap .talk-bubble{opacity:0;background:#fff;color:#2d70c4;padding:3px 12px;border-radius:22px;font-size:15px;font-weight:900;letter-spacing:3px}
.ss-wrap .speaking .talk-bubble{opacity:1;animation:talkPulse .65s ease-in-out infinite alternate}
.ss-wrap .stage-name{background:#173b60e8;color:white;padding:5px 12px;border-radius:12px;font-size:13px;font-weight:800}
@keyframes talkPulse{to{transform:scale(1.16);opacity:.55}}
@media(max-width:600px){.ss-wrap .stage-people{bottom:13%}
.ss-wrap .stage-face{width:74px;height:74px;font-size:44px}}
.ss-wrap .scene{background-position:center center!important;background-size:cover!important;overflow:hidden}
.ss-wrap .scene-talk{position:absolute;z-index:4;top:35%;width:12%;height:20%;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .3s;filter:drop-shadow(0 0 8px #ffe09b)}
.ss-wrap #talkA{left:10%}
.ss-wrap #talkB{left:43%}
.ss-wrap .scene-talk.active{opacity:1;animation:talkGlow .7s infinite alternate}
.ss-wrap .sound-rays{position:absolute;right:-12px;top:0;color:#ffe66c;font-size:clamp(16px,2.4vw,30px);font-weight:900;transform:rotate(-20deg)}
@keyframes talkGlow{from{filter:drop-shadow(0 0 2px #ffe09b);transform:scale(.97)}to{filter:drop-shadow(0 0 17px #ffce55);transform:scale(1.06)}}
.ss-wrap #scene{animation:cafeZoom 19s ease-in-out infinite alternate}
@media(max-width:600px){.ss-wrap .scene{height:290px}
.ss-wrap .scene-talk{top:36%}}
.ss-wrap{position:fixed;inset:0;z-index:100000;background:#edf3fb;overflow:auto}
.ss-top{max-width:1380px;margin:auto;padding:14px 20px;display:flex;justify-content:space-between;align-items:center}
.ss-top button{padding:10px 18px;border:0;border-radius:12px;background:#19314c;color:white;font-weight:700;cursor:pointer}
.ss-msg{padding:12px;background:#fff4d4;border-radius:12px;line-height:1.7}
.ss-admin{max-width:1200px;margin:20px auto;background:#fff;border-radius:20px;padding:24px;color:#163a35}
.ss-admin input,.ss-admin textarea,.ss-admin select{font:inherit;padding:10px;border:1px solid #b5c9c2;border-radius:9px;max-width:100%}
.ss-admin textarea{width:100%;direction:ltr;text-align:left}
.ss-admin label{display:block;margin:12px 0}
.ss-admin table{width:100%;border-collapse:collapse;direction:ltr}
.ss-admin td,.ss-admin th{padding:8px;border-bottom:1px solid #dce8e1;text-align:left}
.ss-admin .ss-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ss-admin button{margin:6px;padding:10px 16px;border:0;border-radius:10px;background:#00553e;color:white;font-weight:700;cursor:pointer}
.ss-admin details{padding:14px;border:1px solid #d2dfd8;border-radius:12px;margin:15px 0}
.ss-admin summary{font-weight:800;cursor:pointer}
.ss-admin [dir=rtl]{text-align:right}
.ss-admin [dir=ltr]{text-align:left}
.ss-admin .ss-scroll{overflow:auto}
.ss-admin tr input{width:95px}
.ss-admin tr textarea{min-width:260px}
.ss-admin small{display:block;color:#576d65}
.ss-admin .ss-sticky{position:sticky;bottom:0;background:#fff8e4;padding:12px;border-radius:14px}
.ss-wrap [dir=ltr]{text-align:left}
.ss-wrap [dir=rtl]{text-align:right}
.ss-wrap .feedback:empty{display:none}
@media(prefers-reduced-motion:reduce){.ss-wrap *{animation:none!important;scroll-behavior:auto!important;transition:none!important}}