:root {
  --ink: #10192b;
  --muted: #78839a;
  --line: rgba(25, 43, 75, .09);
  --blue: #3b77f2;
  --cyan: #33c3de;
  --pink: #ef5d98;
  --violet: #8b73ef;
  --card: rgba(255, 255, 255, .9);
  --shadow: 0 24px 70px rgba(45, 66, 105, .12);
}

* { box-sizing: border-box; }
body { position: relative; margin: 0; min-width: 1180px; min-height: 100vh; overflow-x: auto; color: var(--ink); font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #eef3f9; }
button, input { font: inherit; }
button { color: inherit; }
.ambient { position: fixed; z-index: 0; border-radius: 50%; filter: blur(2px); pointer-events: none; }
.ambient-a { width: 560px; height: 560px; right: -170px; top: -260px; background: radial-gradient(circle, rgba(96, 207, 235, .23), transparent 67%); }
.ambient-b { width: 700px; height: 700px; left: 7%; bottom: -570px; background: radial-gradient(circle, rgba(126, 99, 235, .18), transparent 67%); }

.app-shell { position: relative; z-index: 1; width: calc(100% - 42px); min-height: calc(100vh - 42px); margin: 21px; display: grid; grid-template-columns: 226px 1fr; background: rgba(247, 250, 254, .92); border: 1px solid rgba(255,255,255,.85); border-radius: 28px; box-shadow: 0 35px 100px rgba(27, 50, 89, .16); overflow: hidden; backdrop-filter: blur(24px); }
.sidebar { display: flex; flex-direction: column; padding: 30px 20px 22px; background: linear-gradient(180deg, #111b31 0%, #182742 100%); color: #fff; }
.brand { display: flex; align-items: center; gap: 12px; width: 100%; padding: 0 8px 30px; color: #fff; border: 0; background: none; text-align: left; cursor: pointer; }
.brand-mark { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; font-weight: 900; font-size: 21px; background: linear-gradient(145deg, #3274f4, #4dc4de); box-shadow: 0 10px 26px rgba(54, 126, 235, .3); }
.brand-mark i { position: absolute; width: 8px; height: 8px; top: -3px; right: 5px; border: 2px solid #72e6e5; border-radius: 50%; }
.brand-copy { display: grid; gap: 2px; }.brand-copy strong { letter-spacing: .09em; font-size: 18px; }.brand-copy small { opacity: .5; font-size: 8px; letter-spacing: .18em; }
.program-brand-surface { width: 178px; height: 58px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px 11px; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(4,12,29,.22); }
.program-brand-logo { display: block; width: 100%; max-width: 156px; max-height: 42px; object-fit: contain; }
html[data-program="creka"] .program-brand-logo { max-width: 128px; max-height: 40px; }
html[data-program="macience"] .program-brand-logo { max-width: 132px; max-height: 43px; }
.main-nav { display: grid; gap: 8px; margin-top: 18px; }
.main-nav .nav-button { height: 50px; display: flex; align-items: center; gap: 14px; border: 0; border-radius: 15px; padding: 0 16px; color: rgba(255,255,255,.62); background: transparent; font-weight: 700; text-decoration: none; cursor: pointer; transition: .2s ease; }
.main-nav .nav-button:hover { color: white; background: rgba(255,255,255,.05); }.main-nav .nav-button.active { color: white; background: linear-gradient(90deg, rgba(60,121,241,.28), rgba(50,195,221,.09)); box-shadow: inset 3px 0 #50ccdd; }
.nav-icon { width: 22px; text-align: center; font-size: 18px; }.sidebar-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.device-state { display: flex; align-items: center; gap: 9px; min-width: 0; }.device-state div { display: grid; gap: 2px; }.device-state strong { font-size: 11px; }.device-state small { color: rgba(255,255,255,.44); font-size: 9px; white-space: nowrap; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: #61d5ae; box-shadow: 0 0 0 4px rgba(97,213,174,.12); }.icon-button { border: 0; color: rgba(255,255,255,.5); background: transparent; cursor: pointer; }

.workspace { padding: 0 34px 38px; min-width: 0; }.topbar { height: 104px; display: flex; align-items: center; justify-content: space-between; }.eyebrow, .mini-label { margin: 0 0 5px; color: #9aa5b7; font-size: 9px; font-weight: 800; letter-spacing: .16em; }.topbar h1 { margin: 0; font-size: 24px; letter-spacing: -.04em; }
.top-actions { display: flex; align-items: center; gap: 12px; }.connection { display: flex; align-items: center; gap: 8px; padding: 9px 13px; color: #607089; font-size: 10px; font-weight: 700; background: rgba(255,255,255,.7); border: 1px solid var(--line); border-radius: 99px; }.connection span { width: 7px; height: 7px; border-radius: 50%; background: #5dceaa; box-shadow: 0 0 0 3px rgba(93,206,170,.14); }
.round-button { position: relative; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.7); cursor: pointer; }.round-button i { position: absolute; width: 5px; height: 5px; right: 8px; top: 8px; border-radius: 50%; background: var(--pink); }
.profile { display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 5px; border: 0; background: transparent; text-align: left; cursor: pointer; }.profile .avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-weight: 800; background: linear-gradient(145deg,#9a83f5,#5d77dd); }.profile > span:nth-child(2) { display: grid; gap: 2px; }.profile strong { font-size: 11px; }.profile small { color: #8994a9; font-size: 9px; }.profile b { color: #9ba5b5; }
.view { display: none; animation: viewIn .3s ease; }.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
.glass-card { background: var(--card); border: 1px solid rgba(255,255,255,.88); box-shadow: var(--shadow); backdrop-filter: blur(18px); }

.hero-grid { display: grid; grid-template-columns: minmax(630px, 1.55fr) minmax(320px, .7fr); gap: 20px; }.hero-card { position: relative; min-height: 336px; padding: 46px; overflow: hidden; border-radius: 25px; color: #fff; background: linear-gradient(128deg, #111f3c 0%, #1b3157 52%, #23466c 100%); }
.hero-content { position: relative; z-index: 3; }.season-chip { display: inline-flex; padding: 7px 12px; border: 1px solid rgba(255,255,255,.17); border-radius: 99px; color: #8ee6eb; background: rgba(255,255,255,.06); font-size: 10px; font-weight: 700; letter-spacing: .06em; }.hero-card h2 { margin: 20px 0 12px; font-size: clamp(34px, 3vw, 48px); line-height: 1.17; letter-spacing: -.055em; }.hero-card h2 em { color: #70d8e2; font-style: normal; }.hero-card p { margin: 0; color: rgba(255,255,255,.56); font-size: 12px; line-height: 1.75; }.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 28px; }
.primary-button, .secondary-button { height: 46px; padding: 0 19px; border: 0; border-radius: 13px; font-size: 11px; font-weight: 800; cursor: pointer; transition: .2s ease; }.primary-button { color: #fff; background: linear-gradient(135deg, #3976f0, #4abedc); box-shadow: 0 12px 28px rgba(56,117,236,.24); }.primary-button:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(56,117,236,.34); }.primary-button span { margin-left: 20px; }.secondary-button { color: #506079; border: 1px solid var(--line); background: #fff; }.text-button { border: 0; color: #76849b; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; }.hero-card .text-button { color: rgba(255,255,255,.54); }
.hero-art { position: absolute; width: 350px; height: 350px; right: -10px; top: -5px; }.orbit { position: absolute; border: 1px solid rgba(106,222,231,.2); border-radius: 50%; }.orbit-one { width: 310px; height: 310px; left: 22px; top: 20px; }.orbit-two { width: 215px; height: 215px; left: 70px; top: 67px; border-style: dashed; }.center-orb { position: absolute; width: 118px; height: 118px; left: 118px; top: 118px; display: grid; place-items: center; border-radius: 38px; transform: rotate(15deg); background: linear-gradient(145deg,#4fd5dc,#4f79f1); box-shadow: 0 25px 70px rgba(49,186,220,.4); }.center-orb span { transform: rotate(-15deg); font-size: 54px; font-weight: 900; }.crystal { position: absolute; border-radius: 7px; background: linear-gradient(145deg,rgba(139,116,240,.8),rgba(70,108,220,.3)); transform: rotate(35deg); }.crystal-a { width: 32px; height: 32px; top: 32px; right: 45px; }.crystal-b { width: 22px; height: 22px; bottom: 55px; left: 25px; background: linear-gradient(145deg,var(--pink),#a94cdb); }.crystal-c { width: 15px; height: 15px; bottom: 25px; right: 58px; background: #58d4cc; }
.today-card { padding: 24px; border-radius: 25px; }.card-heading, .section-title { display: flex; align-items: center; justify-content: space-between; }.card-heading h3, .section-title h3 { margin: 0; font-size: 17px; letter-spacing: -.03em; }.more { border: 0; color: #9ca7b8; background: transparent; cursor: pointer; }.continue-thumb { height: 136px; margin: 21px 0 16px; border-radius: 17px; overflow: hidden; background: radial-gradient(circle at 22% 15%,#7be6e6 0 4%,transparent 5%), radial-gradient(circle at 70% 35%,rgba(236,96,153,.8) 0 7%,transparent 8%), linear-gradient(135deg,#223d64,#27305a 57%,#5b477d); }.thumb-overlay { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px; background: linear-gradient(180deg,transparent,rgba(10,20,44,.35)); color: white; font-size: 9px; font-weight: 700; }.play-button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: white; background: rgba(255,255,255,.18); cursor: pointer; }.continue-info > span { color: #8995a9; font-size: 9px; }.continue-info h4 { margin: 6px 0 13px; font-size: 15px; }.progress { height: 5px; overflow: hidden; border-radius: 9px; background: #e9eef5; }.progress i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg,var(--blue),var(--cyan)); }.continue-info small { display: block; margin-top: 6px; color: #9aa5b5; font-size: 8px; }
.section-title { margin: 28px 2px 14px; }.mission-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }.mission-card { position: relative; min-width: 0; padding: 15px; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: rgba(255,255,255,.86); box-shadow: 0 15px 40px rgba(48,70,108,.08); text-align: left; cursor: pointer; transition: .22s ease; }.mission-card:hover { transform: translateY(-4px); box-shadow: 0 20px 48px rgba(48,70,108,.14); }.mission-number { position: absolute; z-index: 2; top: 27px; left: 28px; min-width: 28px; padding: 5px 7px; border-radius: 9px; color: #fff; background: rgba(19,36,68,.62); box-shadow: 0 5px 14px rgba(17,33,63,.16); font-size: 9px; font-weight: 900; text-align: center; backdrop-filter: blur(7px); }.mission-visual { height: 105px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 15px; overflow: hidden; }.mission-visual.has-artwork { border: 1px solid #e5ebf3; background: linear-gradient(145deg,#fff,#f4f7fb); }.mission-visual img { width: 100%; height: 100%; display: block; object-fit: contain; transition: transform .25s ease; }.mission-card:hover .mission-visual img { transform: scale(1.045); }.mission-visual b { display: grid; place-items: center; width: 57px; height: 57px; border: 1px solid rgba(255,255,255,.45); border-radius: 20px; color: white; font-size: 25px; transform: rotate(-8deg); backdrop-filter: blur(5px); }.visual-blue { background: radial-gradient(circle at 20% 20%,rgba(94,226,226,.7),transparent 25%),linear-gradient(135deg,#21456e,#536fda); }.visual-pink { background: radial-gradient(circle at 75% 20%,rgba(246,142,178,.7),transparent 25%),linear-gradient(135deg,#553c72,#ba5687); }.visual-violet { background: radial-gradient(circle at 20% 75%,rgba(86,211,211,.55),transparent 22%),linear-gradient(135deg,#373b7a,#7764d9); }.mission-card small { color: #8390a5; font-size: 8px; font-weight: 700; }.mission-card strong { display: block; margin: 5px 0; font-size: 13px; }.mission-card p { margin: 0; color: #96a0b1; font-size: 9px; }

.mission-layout { display: grid; grid-template-columns: minmax(680px,1.45fr) minmax(330px,.62fr); gap: 20px; }.catalog-panel, .mission-detail { border-radius: 24px; }.catalog-panel { min-height: 655px; padding: 31px; }.catalog-head { display:flex; align-items:center; justify-content:space-between; }.catalog-head h2,.mission-detail h2,.score-heading h2 { margin:0; font-size:26px; letter-spacing:-.045em; }.month-switch { display:flex; align-items:center; gap:15px; padding:8px; border:1px solid var(--line); border-radius:13px; background:#f8fafd; }.month-switch button { border:0; background:transparent; cursor:pointer; }.month-switch strong { font-size:11px; }.filter-row { display:flex; gap:7px; margin:28px 0 19px; }.filter { padding:8px 12px; border:1px solid var(--line); border-radius:99px; color:#7e899b; background:white; font-size:9px; font-weight:700; cursor:pointer; }.filter.active { color:white; border-color:#263b62; background:#263b62; }.mission-list { display:grid; gap:9px; }.mission-row { display:grid; grid-template-columns:36px 44px 1fr auto 20px; align-items:center; gap:12px; min-height:88px; padding:12px 16px; border:1px solid #edf1f6; border-radius:17px; background:white; text-align:left; cursor:pointer; transition:.2s; }.mission-row:hover,.mission-row.selected { border-color:rgba(60,121,242,.28); box-shadow:0 12px 30px rgba(55,89,145,.08); }.mission-row.selected { background:linear-gradient(90deg,rgba(59,119,242,.04),#fff); }.row-index { color:#a1aabc; font-size:9px; font-weight:800; }.row-symbol { width:40px;height:40px;display:grid;place-items:center;border-radius:13px;color:white;font-size:16px; }.symbol-cyan { background:linear-gradient(135deg,#45cbd8,#4279e8); }.symbol-pink { background:linear-gradient(135deg,#ed7ea8,#aa65c3); }.symbol-violet { background:linear-gradient(135deg,#8e7cf1,#5c6ac9); }.symbol-amber { background:linear-gradient(135deg,#f2a95d,#e17278); }.row-copy { display:grid; gap:3px; }.row-copy small,.row-copy em { color:#98a2b3;font-size:8px;font-style:normal; }.row-copy strong { font-size:12px; }.availability { display:flex;align-items:center;gap:6px;color:#4baa8c;font-size:8px;font-weight:800; }.availability i { width:6px;height:6px;border-radius:50%;background:#54c9a4; }.availability.downloading { color:#507ce5; }.availability.downloading i { background:#507ce5; }.availability.streaming { color:#9a73dd; }.availability.streaming i { background:#9a73dd; }.mission-row>b { color:#aab2c0;font-size:12px; }
.mission-detail { padding:24px; }.detail-cover { position:relative;height:178px;margin-bottom:24px;overflow:hidden;border-radius:19px;color:white;background:radial-gradient(circle at 75% 30%,rgba(102,225,226,.8),transparent 20%),radial-gradient(circle at 20% 80%,rgba(238,91,154,.6),transparent 22%),linear-gradient(145deg,#192b4d,#475ec0); }.detail-cover span { position:absolute;top:18px;left:19px;font-size:8px;font-weight:800;letter-spacing:.14em;opacity:.66; }.detail-cover strong { position:absolute;right:20px;bottom:5px;font-size:72px;opacity:.13; }.detail-cover i { position:absolute;left:50%;top:50%;width:70px;height:70px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.4);border-radius:24px;transform:translate(-50%,-50%) rotate(-8deg);font-size:33px;background:rgba(255,255,255,.09); }.mission-detail p { color:#7d899d;font-size:10px;line-height:1.65; }.meta-grid { display:grid;grid-template-columns:1fr 1fr;margin:20px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden; }.meta-grid span { display:grid;gap:4px;padding:12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); }.meta-grid span:nth-child(even){border-right:0}.meta-grid span:nth-child(n+3){border-bottom:0}.meta-grid small{color:#9ba5b5;font-size:8px}.meta-grid b{font-size:10px}.mode-select { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px; }.mode-select button { min-height:58px;display:flex;align-items:center;gap:9px;padding:9px;border:1px solid var(--line);border-radius:13px;background:white;text-align:left;cursor:pointer; }.mode-select button.active{border-color:#4b83f0;background:#f5f8ff;box-shadow:inset 0 0 0 1px #4b83f0}.mode-select i{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;color:#4b83f0;background:#e8efff;font-style:normal}.mode-select span{display:grid;gap:2px}.mode-select strong{font-size:9px}.mode-select small{color:#9da6b5;font-size:7px}.full{width:100%}

.player-layout { display:grid;grid-template-columns:minmax(720px,1.55fr) minmax(290px,.55fr);gap:20px; }.player-card { overflow:hidden;border-radius:24px;background:#111c31;box-shadow:var(--shadow); }.player-stage { padding:15px 15px 0; }.video-placeholder { position:relative;height:min(58vh,500px);min-height:390px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:17px;background:radial-gradient(circle at 30% 20%,rgba(60,199,220,.25),transparent 25%),radial-gradient(circle at 75% 75%,rgba(232,87,153,.22),transparent 25%),linear-gradient(145deg,#152748,#2a396c);color:white;text-align:center; }.video-placeholder:before { content:"";position:absolute;width:560px;height:560px;border:1px solid rgba(255,255,255,.08);border-radius:50%; }.lesson-kicker { position:relative;font-size:9px;font-weight:800;letter-spacing:.19em;color:#7bdce2; }.video-placeholder h2 { position:relative;margin:15px 0 25px;font-size:38px;line-height:1.18;letter-spacing:-.05em; }.video-play { position:relative;width:64px;height:64px;border:1px solid rgba(255,255,255,.4);border-radius:50%;color:white;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);cursor:pointer; }.video-shape { position:absolute;border-radius:12px;transform:rotate(30deg); }.shape-one{width:55px;height:55px;left:16%;top:18%;background:linear-gradient(145deg,#50d1d9,#4c73eb)}.shape-two{width:32px;height:32px;right:20%;bottom:24%;background:linear-gradient(145deg,#ef639b,#9e54d6)}.shape-three{width:20px;height:20px;right:26%;top:18%;background:#64d7b7}.video-controls { height:59px;display:flex;align-items:center;gap:12px;padding:0 11px;color:rgba(255,255,255,.65);font-size:8px; }.video-controls button { border:0;color:inherit;background:transparent;font-size:9px;cursor:pointer; }.video-track { position:relative;flex:1;height:4px;border-radius:5px;background:rgba(255,255,255,.16); }.video-track i { display:block;width:41%;height:100%;border-radius:5px;background:linear-gradient(90deg,#4d8bf4,#55d3dd); }.video-track b { position:absolute;width:10px;height:10px;left:41%;top:-3px;border-radius:50%;background:white; }.lesson-navigation { min-height:88px;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:16px;padding:13px 24px;color:white;background:#17243b; }.lesson-navigation>div { display:grid;gap:2px;text-align:center; }.lesson-navigation strong{font-size:12px}.lesson-navigation small{color:rgba(255,255,255,.38);font-size:8px}.lesson-navigation .secondary-button{justify-self:start;color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.06)}.lesson-navigation .primary-button{justify-self:end}
.timeline-panel { padding:26px;border-radius:24px; }.time-chip{padding:6px 9px;border-radius:99px;color:#4a7ee9;background:#edf3ff;font-size:8px;font-weight:800}.step-list{position:relative;display:grid;gap:2px;margin:25px 0;padding:0;list-style:none}.step-list:before{content:"";position:absolute;left:16px;top:25px;bottom:25px;width:1px;background:#e7ebf1}.step-list li{position:relative;display:flex;align-items:center;gap:13px;min-height:55px;padding:7px 7px;border-radius:13px}.step-list li>span{z-index:1;width:32px;height:32px;display:grid;place-items:center;border:1px solid #e0e6ee;border-radius:11px;color:#9ca6b6;background:#fff;font-size:8px;font-weight:800}.step-list li>div{display:grid;gap:3px}.step-list strong{font-size:10px}.step-list small{color:#a0a9b7;font-size:8px}.step-list li.done>span{color:white;border-color:#56c6a6;background:#56c6a6}.step-list li.active{background:#f2f6ff}.step-list li.active>span{color:white;border-color:#477fea;background:#477fea;box-shadow:0 8px 18px rgba(71,127,234,.25)}.remote-state{display:flex;align-items:center;gap:11px;padding:13px;border:1px solid rgba(84,198,166,.18);border-radius:14px;background:rgba(84,198,166,.07)}.remote-state>span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:#3ba985;background:white}.remote-state div{display:grid;gap:2px}.remote-state strong{font-size:9px}.remote-state small{color:#7f9c91;font-size:7px}

.score-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:5px 0 26px}.score-heading p{margin:7px 0 0;color:#7f8b9e;font-size:10px}.score-actions{display:flex;gap:9px}.score-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.team-card,.add-team{min-height:455px;padding:22px;border:1px solid rgba(255,255,255,.92);border-radius:22px;background:rgba(255,255,255,.88);box-shadow:0 17px 45px rgba(48,70,108,.09)}.team-card.rank-one{border-color:rgba(74,132,238,.35);box-shadow:0 20px 55px rgba(57,109,211,.14)}.team-top{display:flex;align-items:center;justify-content:space-between}.team-avatar{width:45px;height:45px;display:grid;place-items:center;border-radius:15px;color:white;background:linear-gradient(145deg,#41c9d7,#4774e8);font-weight:900}.avatar-pink{background:linear-gradient(145deg,#ef70a3,#aa63ca)}.avatar-violet{background:linear-gradient(145deg,#977ff1,#5d6bcf)}.rank{padding:6px 9px;border-radius:99px;color:#5382e3;background:#edf3ff;font-size:8px;font-weight:800}.team-card input{width:100%;margin:22px 0 10px;padding:0;border:0;outline:0;background:transparent;font-size:14px;font-weight:800}.total-score{display:flex;align-items:baseline;gap:4px;margin-bottom:23px}.total-score strong{font-size:39px;letter-spacing:-.06em}.total-score span{color:#a1aabb;font-size:9px}.score-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid var(--line);font-size:9px;font-weight:700}.score-row>span{display:flex;align-items:center;gap:7px;color:#6f7b8f}.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan)}.dot.pink{background:var(--pink)}.dot.violet{background:var(--violet)}.score-row>div{display:flex;align-items:center;gap:8px}.score-row button{width:24px;height:24px;border:1px solid var(--line);border-radius:7px;background:#f8fafd;color:#8490a3;cursor:pointer}.score-row strong{width:15px;text-align:center;font-size:11px}.add-team{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#9aa5b5;border:1px dashed #cbd4e2;background:rgba(255,255,255,.45);cursor:pointer}.add-team>span{width:51px;height:51px;display:grid;place-items:center;margin-bottom:13px;border-radius:16px;color:#6f8dcc;background:#edf2fa;font-size:21px}.add-team strong{color:#708097;font-size:11px}.add-team small{margin-top:4px;font-size:8px}

@media (max-width: 1280px) { .workspace{padding-left:24px;padding-right:24px}.app-shell{grid-template-columns:190px minmax(0,1fr)}.hero-card{padding:38px}.hero-art{opacity:.64;right:-80px}.score-grid{gap:9px}.team-card,.add-team{padding:17px} }

/* 로그인 시작 화면 */
.login-body{min-width:1000px;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 8% 10%,rgba(61,199,220,.18),transparent 27%),radial-gradient(circle at 90% 85%,rgba(130,104,232,.15),transparent 32%),#eef3f9}.login-shell{width:min(1180px,calc(100vw - 48px));min-height:min(720px,calc(100vh - 48px));display:grid;grid-template-columns:1.08fr .92fr;overflow:hidden;border:1px solid rgba(255,255,255,.9);border-radius:32px;background:#fff;box-shadow:0 35px 110px rgba(34,56,94,.18)}.login-showcase{position:relative;overflow:hidden;padding:42px 48px;color:white;background:radial-gradient(circle at 65% 60%,rgba(66,198,215,.18),transparent 24%),linear-gradient(145deg,#101b32,#1b3052 58%,#234364)}.login-showcase:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent,black,transparent)}.login-brand{position:relative;z-index:3;display:flex;align-items:center;gap:12px;color:white;text-decoration:none}.login-message{position:relative;z-index:3;margin-top:110px}.login-message h1{margin:21px 0 18px;font-size:50px;line-height:1.18;letter-spacing:-.06em}.login-message h1 em{color:#66d9df;font-style:normal}.login-message p{color:rgba(255,255,255,.52);font-size:13px;line-height:1.75}.login-orbit{position:absolute;z-index:2;width:340px;height:340px;right:-30px;bottom:-28px;border:1px solid rgba(105,218,226,.16);border-radius:50%}.login-orbit:before{content:"";position:absolute;inset:54px;border:1px dashed rgba(255,255,255,.12);border-radius:50%}.login-orbit b{position:absolute;left:50%;top:50%;width:104px;height:104px;display:grid;place-items:center;border-radius:34px;transform:translate(-50%,-50%) rotate(13deg);font-size:46px;background:linear-gradient(145deg,#4ad0da,#4e74ec);box-shadow:0 30px 65px rgba(54,170,220,.35)}.login-orbit i,.login-orbit span{position:absolute;width:27px;height:27px;border-radius:8px;transform:rotate(30deg)}.login-orbit i{left:38px;top:65px;background:linear-gradient(145deg,#ec669d,#a451d2)}.login-orbit span{right:42px;bottom:66px;background:#5bd2ae}.login-caption{position:absolute;z-index:3;left:48px;bottom:37px;display:flex;align-items:center;gap:7px}.login-caption>span{padding:6px 9px;border:1px solid rgba(255,255,255,.13);border-radius:99px;color:rgba(255,255,255,.67);font-size:8px;font-weight:700}.login-caption small{margin-left:8px;color:rgba(255,255,255,.34);font-size:8px}.login-form-wrap{display:grid;place-items:center;padding:55px;background:linear-gradient(180deg,#fff,#f9fbfe)}.login-card{width:min(370px,100%)}.login-heading{margin-bottom:34px}.login-heading h2{margin:7px 0 8px;font-size:29px;letter-spacing:-.05em}.login-heading p{margin:0;color:#8b96a8;font-size:11px}.field{display:grid;gap:8px;margin-bottom:17px}.field>span{color:#55647a;font-size:10px;font-weight:800}.field>div{height:53px;display:flex;align-items:center;gap:10px;padding:0 15px;border:1px solid #dde4ed;border-radius:14px;background:#fff;transition:.2s}.field>div:focus-within{border-color:#4d83ee;box-shadow:0 0 0 4px rgba(77,131,238,.1)}.field i{width:23px;color:#88a0c5;font-style:normal;text-align:center}.field input{min-width:0;flex:1;border:0;outline:0;color:#1d2a3d;background:transparent;font-size:11px}.field input::placeholder{color:#adb5c1}.field button{border:0;color:#9ca8b7;background:transparent;cursor:pointer}.login-options{display:flex;align-items:center;justify-content:space-between;margin:3px 0 25px}.login-options label{display:flex;align-items:center;gap:7px;color:#67758b;font-size:9px;cursor:pointer}.login-options input{display:none}.login-options label>span{position:relative;width:30px;height:17px;border-radius:99px;background:#d8e0ea}.login-options label>span:after{content:"";position:absolute;width:13px;height:13px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(30,47,75,.17)}.login-options input:checked+span{background:#4d83ee}.login-options input:checked+span:after{left:15px}.login-options button{border:0;color:#8491a5;background:transparent;font-size:9px;cursor:pointer}.login-submit{width:100%;height:53px}.secure-device{display:flex;align-items:center;gap:11px;margin-top:24px;padding:14px;border:1px solid rgba(75,191,158,.18);border-radius:14px;background:rgba(75,191,158,.06)}.secure-device>i{width:29px;height:29px;display:grid;place-items:center;border-radius:9px;color:#fff;background:#58c3a3;font-size:10px;font-style:normal}.secure-device>div{display:grid;gap:3px}.secure-device strong{font-size:9px}.secure-device small{color:#78988f;font-size:8px}.login-version{margin:25px 0 0;color:#a7b0be;font-size:7px;text-align:center;letter-spacing:.08em}
.login-status{min-height:20px;margin:8px 0 0;color:#c93655;font-size:10px;text-align:center}.login-submit:disabled{cursor:wait;filter:saturate(.55);opacity:.75}
.login-brand{display:inline-flex;gap:0}.login-brand-surface{width:340px;height:76px;display:flex;align-items:center;justify-content:center;overflow:visible;padding:0;border-radius:0;background:transparent;box-shadow:none}.login-brand-logo{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 9px 18px rgba(0,0,0,.18))}.login-message{margin-top:84px}
.service-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 19px;padding:0;border:0}.service-picker legend{margin-bottom:8px;color:#55647a;font-size:10px;font-weight:800}.service-option{min-width:0;cursor:pointer}.service-option input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.service-option>span{min-height:66px;display:grid;grid-template-columns:30px minmax(0,1fr) 16px;align-items:center;gap:7px;padding:9px;border:1px solid #dde4ed;border-radius:14px;background:#fff;transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}.service-option:hover>span{transform:translateY(-1px);border-color:#b7c8e4}.service-option b{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#fff;background:linear-gradient(145deg,#3274f4,#4dc4de);font-size:13px;font-weight:900}.service-option i{min-width:0;display:grid;gap:3px;font-style:normal}.service-option strong{overflow:hidden;font-size:9px;white-space:nowrap;text-overflow:ellipsis}.service-option small{overflow:hidden;color:#98a3b4;font-size:7px;white-space:nowrap;text-overflow:ellipsis}.service-option em{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#3f7cf1;font-size:8px;font-style:normal;opacity:0;transform:scale(.7);transition:.18s ease}.service-option input:checked+span{border-color:#4a82ef;background:#f7faff;box-shadow:0 0 0 3px rgba(74,130,239,.1)}.service-option input:checked+span em{opacity:1;transform:scale(1)}.service-option input:focus-visible+span{outline:2px solid #315ff1;outline-offset:2px}.service-option input[value="odyssey"]+span b{background:linear-gradient(145deg,#7158d9,#4d88ea)}.service-option input[value="macience"]+span b{background:linear-gradient(145deg,#21bcae,#36a7e7)}
.service-option input[value="macience"]:checked+span{border-color:#28b9af;background:#f3fffd;box-shadow:0 0 0 3px rgba(40,185,175,.11)}.service-option input[value="macience"]:checked+span em{background:#24b6aa}
html[data-program="macience"] .brand-mark,html[data-program="macience"] .center-orb,html[data-program="macience"] .login-orbit b{background:linear-gradient(145deg,#25c6b5,#3a87ec)}
.login-card,.service-picker,.service-option>span{min-width:0}.service-picker{width:100%}.login-options{min-width:0;gap:8px}
.service-auto{display:grid;gap:10px;margin:0 0 19px;padding:13px 14px;border:1px solid #dce8e8;border-radius:14px;background:linear-gradient(135deg,#f4fbff,#f3fffb)}.service-auto>div{display:flex;align-items:center;gap:10px}.service-auto i{width:28px;height:28px;display:grid;place-items:center;flex:0 0 auto;border-radius:9px;color:#fff;background:linear-gradient(145deg,#35c4ad,#4a85ef);font-size:12px;font-style:normal;font-weight:900}.service-auto div span{display:grid;gap:2px}.service-auto strong{color:#26374f;font-size:10px}.service-auto small{color:#8492a6;font-size:8px}.service-auto p{display:flex;gap:6px;margin:0}.service-auto p span{padding:4px 8px;border:1px solid #dce5ee;border-radius:999px;color:#66768d;background:#fff;font-size:7px;font-weight:850;letter-spacing:.02em}
.login-card{width:min(460px,100%)}
.creka-web-video{width:100%;height:100%;object-fit:contain;background:#080d1c}.empty-result{padding:40px;color:#8a96a8;text-align:center}.primary-button:disabled{cursor:wait;opacity:.7}

/* Tablet and mobile layout */
@media (max-width: 900px) {
  html { background: #eef3f9; }
  body { min-width: 0; overflow-x: hidden; }
  .app-shell {
    width: 100%; min-height: 100dvh; margin: 0; display: block;
    border: 0; border-radius: 0; box-shadow: none; overflow: visible;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .sidebar {
    position: sticky; z-index: 40; top: 0; height: calc(68px + env(safe-area-inset-top));
    flex-direction: row; align-items: center; padding: env(safe-area-inset-top) 18px 0;
    box-shadow: 0 8px 28px rgba(13, 27, 51, .16);
  }
  .brand { width: auto; padding: 0; }
  .program-brand-surface { width: 158px; height: 50px; padding: 6px 9px; border-radius: 13px; }
  .program-brand-logo { max-width: 140px; max-height: 36px; }
  html[data-program="creka"] .program-brand-logo { max-width: 112px; max-height: 34px; }
  html[data-program="macience"] .program-brand-logo { max-width: 116px; max-height: 36px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; font-size: 18px; }
  .brand-copy strong { font-size: 16px; }
  .main-nav {
    position: fixed; z-index: 60; left: 12px; right: 12px;
    bottom: max(10px, env(safe-area-inset-bottom)); height: 66px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 0; padding: 6px;
    border: 1px solid rgba(255,255,255,.12); border-radius: 20px;
    background: rgba(17, 27, 49, .96); box-shadow: 0 18px 45px rgba(13,27,51,.28);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  }
  .main-nav .nav-button {
    height: 52px; min-width: 0; flex-direction: column; justify-content: center;
    gap: 2px; padding: 0 3px; border-radius: 14px; font-size: 9px;
  }
  .main-nav .nav-button.active { box-shadow: inset 0 -2px #50ccdd; }
  .nav-icon { width: auto; font-size: 17px; line-height: 20px; }
  .sidebar-bottom { display: none; }
  .workspace { padding: 0 20px calc(92px + env(safe-area-inset-bottom)); }
  .topbar { height: 82px; }
  .topbar h1 { font-size: 22px; }
  .connection { display: none; }
  .hero-grid, .mission-layout, .player-layout { grid-template-columns: 1fr; }
  .hero-card { min-height: 330px; }
  .hero-art { right: -60px; opacity: .62; }
  .mission-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .catalog-panel { min-height: 0; }
  .mission-detail { position: relative; }
  .player-layout { gap: 14px; }
  .video-placeholder { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .timeline-panel { order: 2; }
  .score-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }

  .login-body { min-width: 0; padding: 0; display: block; }
  .login-shell {
    width: 100%; min-height: 100dvh; grid-template-columns: minmax(0,1fr);
    grid-template-rows: 245px 1fr; border: 0; border-radius: 0; box-shadow: none;
  }
.login-showcase { padding: calc(22px + env(safe-area-inset-top)) 28px 24px; }
  .login-message { margin-top: 28px; }
  .login-message h1 { margin: 14px 0 0; font-size: 34px; line-height: 1.12; }
  .login-message p, .login-caption, .login-orbit { display: none; }
  .login-form-wrap { place-items: start center; padding: 32px 28px calc(30px + env(safe-area-inset-bottom)); }
  .login-card { width: min(440px,100%); }
  .login-heading { margin-bottom: 25px; }
  .service-picker { gap: 8px; }
  .service-option > span { min-height: 62px; padding: 8px; }
}

@media (max-width: 600px) {
  .ambient { display: none; }
  .sidebar { height: calc(62px + env(safe-area-inset-top)); padding-left: 14px; padding-right: 14px; }
  .brand-copy small { display: none; }
  .workspace { padding-left: 12px; padding-right: 12px; }
  .topbar { height: 70px; padding: 0 4px; }
  .eyebrow { display: none; }
  .topbar h1 { font-size: 20px; }
  .top-actions { gap: 4px; }
  .round-button { display: none; }
  .profile { padding-right: 0; }
  .profile > span:nth-child(2), .profile b { display: none; }
  .profile .avatar { width: 36px; height: 36px; border-radius: 11px; }
  .glass-card, .hero-card, .catalog-panel, .mission-detail, .player-card, .timeline-panel { border-radius: 18px; }
  .hero-card { min-height: 300px; padding: 28px 24px; }
  .hero-card h2 { margin-top: 18px; font-size: 34px; }
  .hero-card p { max-width: 240px; font-size: 11px; }
  .hero-actions { gap: 7px; margin-top: 22px; }
  .hero-actions .primary-button { padding: 0 15px; }
  .hero-actions .primary-button span { margin-left: 8px; }
  .hero-art { right: -145px; bottom: -55px; transform: scale(.74); opacity: .42; }
  .today-card { padding: 19px; }
  .mission-cards { grid-template-columns: 1fr; gap: 10px; }
  .mission-card { display: grid; grid-template-columns: 104px 1fr; grid-template-rows: auto auto auto; column-gap: 15px; min-height: 110px; padding: 11px; }
  .mission-visual { grid-row: 1 / 4; height: 88px; margin: 0; }
  .mission-number { top: 20px; left: 22px; }
  .mission-card small { align-self: end; }
  .mission-card strong { align-self: center; margin: 0; font-size: 14px; }
  .mission-card p { align-self: start; }
  .section-title { margin-top: 22px; }

  .catalog-panel { padding: 18px 14px; }
  .catalog-head { align-items: flex-start; gap: 15px; }
  .catalog-head h2, .mission-detail h2, .score-heading h2 { font-size: 22px; }
  .month-switch { flex: none; gap: 8px; padding: 5px; }
  .month-switch button { width: 32px; height: 32px; }
  .month-switch strong { white-space: nowrap; font-size: 9px; }
  .filter-row { margin: 18px -2px 14px; padding: 0 2px 4px; overflow-x: auto; scrollbar-width: none; }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter { flex: none; min-height: 34px; white-space: nowrap; }
  .mission-row { grid-template-columns: 26px 42px minmax(0,1fr) 14px; gap: 9px; min-height: 82px; padding: 10px 11px; }
  .mission-row .availability { display: none; }
  .row-copy { min-width: 0; }
  .row-copy small, .row-copy strong, .row-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-copy strong { font-size: 13px; }
  .mission-detail { padding: 17px; }
  .detail-cover { height: 145px; margin-bottom: 18px; }
  .mode-select button { min-height: 62px; }

  .player-stage { padding: 8px 8px 0; }
  .video-placeholder { border-radius: 13px; }
  .video-placeholder:before { width: 360px; height: 360px; }
  .video-placeholder h2 { margin: 9px 0 13px; font-size: 26px; }
  .video-play { width: 50px; height: 50px; }
  .video-controls { height: 48px; gap: 7px; padding: 0 6px; }
  .video-controls > span { display: none; }
  .lesson-navigation { min-height: 80px; grid-template-columns: 1fr 1.2fr 1fr; gap: 6px; padding: 10px 9px; }
  .lesson-navigation .primary-button, .lesson-navigation .secondary-button { height: 40px; padding: 0 9px; font-size: 9px; }
  .lesson-navigation .primary-button span { display: none; }
  .timeline-panel { padding: 19px 16px; }
  .step-list { margin: 18px 0; }
  .step-list li { min-height: 50px; }

  .score-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 0; }
  .score-actions { width: 100%; }
  .score-actions button { flex: 1; }
  .score-grid { grid-template-columns: 1fr; gap: 10px; }
  .team-card, .add-team { min-height: 0; padding: 18px; border-radius: 18px; }
  .add-team { min-height: 150px; }
  .team-card input { margin: 16px 0 8px; }
  .total-score { margin-bottom: 14px; }
  .score-row button { width: 38px; height: 38px; }

  .login-shell { grid-template-rows: 205px 1fr; }
  .login-showcase { padding-left: 22px; padding-right: 22px; }
  .login-brand-surface { width: 260px; height: 58px; padding: 0; border-radius: 0; }
  .login-message { margin-top: 23px; }
  .season-chip { padding: 6px 10px; font-size: 8px; }
  .login-message h1 { font-size: clamp(27px,8vw,34px); }
  .login-form-wrap { padding: 27px 20px calc(26px + env(safe-area-inset-bottom)); }
  .login-heading h2 { font-size: 25px; }
  .service-picker { grid-template-columns: 1fr; }
  .service-option > span { min-height: 58px; }
  .field > div { height: 52px; }
  .field input { font-size: 16px; }
  .login-options { margin-bottom: 20px; }
  .login-submit { height: 52px; }
  .secure-device { margin-top: 18px; }
  .login-version { margin-top: 18px; }
}

@media (max-width: 380px) {
  .workspace { padding-left: 9px; padding-right: 9px; }
  .hero-card { padding: 24px 19px; }
  .hero-card h2 { font-size: 30px; }
  .text-button { font-size: 9px; }
  .catalog-head { display: grid; }
  .month-switch { justify-self: start; }
  .lesson-navigation > div small { display: none; }
  .main-nav { left: 8px; right: 8px; }
}

/* Release-ready interactions */
[hidden] { display: none !important; }
.download-progress { display: grid; gap: 7px; margin: 0 0 14px; }
.download-progress > div { height: 7px; overflow: hidden; border-radius: 99px; background: #e8edf5; }
.download-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),var(--cyan)); transition: width .18s ease; }
.download-progress span { color: #738198; font-size: 9px; font-weight: 700; }
.video-placeholder.has-video { display: block; }
.video-placeholder.has-video::before, .video-placeholder.has-video > :not(video) { display: none; }
.video-placeholder.is-message .video-play { display: none; }
.video-placeholder.is-message h2 { max-width: 75%; text-align: center; }
.video-track { cursor: pointer; touch-action: none; }
.video-track:focus-visible { outline: 3px solid rgba(81,137,242,.35); outline-offset: 5px; }
.step-list li { cursor: pointer; }
.step-list li:hover { background: #f6f8fc; }
.step-list li.active:hover { background: #f2f6ff; }
.team-card input:focus { outline: 2px solid rgba(75,131,239,.35); outline-offset: 4px; border-radius: 4px; }
.team-card.rank-one .rank { color: #fff; background: linear-gradient(135deg,#3976f0,#4abedc); }
.toast { position: fixed; z-index: 120; left: 50%; bottom: 28px; max-width: min(520px,calc(100vw - 32px)); padding: 13px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; color: #fff; background: rgba(17,27,49,.96); box-shadow: 0 18px 45px rgba(13,27,51,.27); font-size: 11px; font-weight: 700; transform: translateX(-50%); backdrop-filter: blur(18px); }
.app-dialog { width: min(430px,calc(100vw - 28px)); padding: 0; border: 0; border-radius: 22px; color: var(--ink); background: #fff; box-shadow: 0 35px 100px rgba(18,32,61,.3); }
.app-dialog::backdrop { background: rgba(10,19,38,.58); backdrop-filter: blur(5px); }
.app-dialog form { max-height: min(820px,calc(100vh - 40px)); overflow-y: auto; padding: 25px; }
.dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.dialog-heading h2 { margin: 3px 0 0; font-size: 23px; letter-spacing: -.04em; }
.dialog-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 11px; color: #8490a3; background: #f7f9fc; font-size: 20px; cursor: pointer; }
.dialog-device { display: flex; align-items: center; gap: 12px; padding: 15px; border: 1px solid rgba(84,198,166,.2); border-radius: 14px; background: rgba(84,198,166,.07); }
.dialog-device > div { display: grid; gap: 3px; }.dialog-device strong { font-size: 11px; }.dialog-device small { color: #75958a; font-size: 9px; }
.app-dialog dl { margin: 18px 0; }
.app-dialog dl > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 2px; border-bottom: 1px solid var(--line); }
.app-dialog dt { color: #8b96a7; font-size: 10px; }.app-dialog dd { margin: 0; max-width: 68%; overflow: hidden; color: #36445a; font-size: 10px; font-weight: 800; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.profile-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 15px; padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fafbfd; }
.profile-fields label { display: grid; gap: 6px; }.profile-fields label:first-child { grid-column: 1 / -1; }.profile-fields label > span { color: #718097; font-size: 9px; font-weight: 800; }
.profile-fields input { width: 100%; min-width: 0; height: 40px; padding: 0 11px; border: 1px solid #dfe5ee; border-radius: 10px; outline: 0; color: #24334b; background: #fff; font: inherit; font-size: 10px; }
.profile-fields input:focus { border-color: #4d83ee; box-shadow: 0 0 0 3px rgba(77,131,238,.1); }.profile-fields .primary-button { grid-column: 1 / -1; }
.remote-connect { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 11px; margin: 0 0 12px; padding: 15px; border: 1px solid rgba(73,133,239,.18); border-radius: 15px; background: rgba(73,133,239,.055); }
.remote-connect > div { display: grid; gap: 3px; }.remote-connect strong { font-size: 10px; }.remote-connect small { color: #8290a4; font-size: 8px; }.remote-connect > b { color: #3d75df; font-size: 18px; letter-spacing: .14em; }
.remote-connect .secondary-button { grid-column: 1 / -1; }.app-dialog #patchButton { margin-bottom: 9px; }
.dialog-copy { margin: 0 0 22px; color: #65738a; font-size: 11px; line-height: 1.75; }
.help-list { display: grid; gap: 9px; margin: 0 0 22px; padding: 0; list-style: none; }
.help-list li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fafbfd; }
.help-list b { width: 30px; height: 30px; display: grid; place-items: center; flex: none; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#3976f0,#4abedc); font-size: 10px; }
.help-list span { display: grid; gap: 3px; }.help-list strong { font-size: 10px; }.help-list small { color: #8995a7; font-size: 8px; line-height: 1.45; }
.result-dialog form { padding: 38px 30px; text-align: center; }
.result-symbol { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 23px; color: #fff; background: linear-gradient(145deg,#4fd5dc,#4f79f1); box-shadow: 0 20px 45px rgba(49,126,221,.25); font-size: 30px; }
.result-dialog h2 { margin: 7px 0; font-size: 28px; }.result-dialog p { margin: 0 0 25px; color: #4b79dd; font-size: 18px; font-weight: 900; }
body.dialog-open { overflow: hidden; }

/* 1.0.7 legacy-compatible classroom flow
   The visual hierarchy intentionally follows the delivered CREKA client:
   top actions, account information, A-L set selection, and server-order
   mission buttons. The secure R2/cache implementation remains underneath. */
.legacy-layout { background: #18a9d8; }
.legacy-layout .ambient,
.legacy-layout .sidebar,
.legacy-layout .topbar { display: none !important; }
.legacy-layout .app-shell {
  width: 100%; min-height: 100vh; margin: 0; display: block; overflow: hidden;
  border: 0; border-radius: 0; background: #18a9d8; box-shadow: none;
}
.legacy-layout .workspace { min-height: 100vh; padding: 20px; }
.legacy-layout .view { width: 100%; max-width: none; margin: 0; }
.legacy-layout #view-home { display: none !important; }
.legacy-mission-shell {
  position: relative; min-height: calc(100vh - 40px); padding: 34px 36px 44px;
  overflow: hidden; border-radius: 0 0 42px 0; background: #fff;
}
.legacy-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.legacy-action-group { display: flex; align-items: center; gap: 18px; }
.legacy-actionbar button {
  min-width: 126px; height: 54px; padding: 0 25px; border: 0; border-radius: 28px;
  color: #fff; background: #18a9d8; font: 800 20px/1 Pretendard, sans-serif;
  letter-spacing: -.04em; cursor: pointer; transition: transform .16s ease, background .16s ease;
}
.legacy-actionbar button:hover { background: #098fc2; transform: translateY(-1px); }
#legacyProfileButton { min-width: 240px; }
#bulkDownloadButton { min-width: 236px; background: #315ff1; }
#bulkDownloadButton:hover { background: #234ac7; }
#bulkDownloadButton:disabled { cursor: wait; opacity: .68; transform: none; }
#legacyQuitButton { min-width: 188px; }
.legacy-title {
  width: 320px; height: 64px; display: grid; place-items: center; margin: 30px auto 24px;
  border-radius: 34px; color: #fff; background: #18a9d8;
  font: 900 31px/1 Pretendard, sans-serif; letter-spacing: -.04em;
}
.legacy-download-summary {
  width: min(760px, 90%); min-height: 24px; margin: -11px auto 20px; color: #637087;
  font-size: 14px; font-weight: 750; line-height: 1.5; text-align: center;
}
.desktop-surface .legacy-download-summary.is-ready { color: #087fab; }
.desktop-surface .legacy-download-summary.is-warning { color: #c35c25; }
.web-surface #bulkDownloadButton,
.web-surface #bulkDownloadSummary { display: none; }
.legacy-selection-grid {
  width: min(1060px, 94%); margin: 0 auto; display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(250px, 1fr) minmax(300px, 1.1fr); gap: 38px;
  align-items: start;
}
.legacy-column { min-width: 0; text-align: center; }
.legacy-column h2 { margin: 0 0 17px; color: #232323; font-size: 22px; font-weight: 900; letter-spacing: -.04em; }
.legacy-column output,
.legacy-select-wrap,
.legacy-mission-button {
  width: 100%; min-height: 60px; display: grid; place-items: center; margin: 0 0 12px;
  border: 3px solid #c5c7cb; border-radius: 32px; color: #929292; background: #fff;
  font-size: 23px; font-weight: 900; letter-spacing: -.045em;
}
.legacy-select-wrap { position: relative; padding: 0 22px; }
.legacy-select-wrap::after {
  content: ""; position: absolute; right: 17px; top: 50%; width: 0; height: 0;
  border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 15px solid #18a9d8;
  transform: translateY(-40%); pointer-events: none;
}
.legacy-select-wrap select {
  width: 100%; height: 54px; border: 0; outline: 0; appearance: none; color: #18a9d8; background: transparent;
  font: 900 22px/1 Pretendard, sans-serif; text-align: center; cursor: pointer;
}
.legacy-list-column .mission-list { display: grid; gap: 11px; }
.legacy-mission-button {
  min-height: 60px; margin: 0; padding: 8px 20px; grid-template-columns: minmax(0, 1fr) !important;
  color: #18a9d8; text-align: center; cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.legacy-mission-button strong { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.18; }
.legacy-mission-button:hover,
.legacy-mission-button:focus-visible { border-color: #18a9d8; color: #087fab; background: #f2fbfe; transform: translateY(-1px); }
.legacy-mission-button:disabled { cursor: wait; opacity: .55; }
.legacy-download-progress { width: min(620px, 76%); margin: 30px auto 0; text-align: center; }
.legacy-download-progress span { color: #18a9d8; font-size: 14px; }
.legacy-hidden-controls { display: none !important; }

@media (max-width: 1280px) {
  .legacy-actionbar button { min-width: 104px; height: 48px; padding: 0 18px; font-size: 17px; }
  #legacyProfileButton, #bulkDownloadButton { min-width: 198px; }
  #legacyQuitButton { min-width: 156px; }
  .legacy-action-group { gap: 10px; }
}

/* During a lesson the program remains full-screen. Video stages fill the TV;
   navigation sits over the bottom edge like the original fading controller. */
.legacy-layout.view-player .workspace,
.legacy-layout.view-score .workspace { padding: 0; background: #070b12; }
.legacy-layout.view-player #view-player,
.legacy-layout.view-score #view-score { min-height: 100vh; }
.legacy-layout.view-player .player-layout { display: block; min-height: 100vh; }
.legacy-layout.view-player .player-card { min-height: 100vh; border: 0; border-radius: 0; background: #05080d; }
.legacy-layout.view-player .player-stage { min-height: 100vh; padding: 0; }
.legacy-layout.view-player .video-placeholder { width: 100vw; height: 100vh; border-radius: 0; }
.legacy-layout.view-player .timeline-panel { display: none; }
.lesson-home-button {
  position: fixed; z-index: 32; top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left));
  min-width: 94px; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 0 19px; border: 1px solid rgba(255,255,255,.34); border-radius: 15px;
  color: #fff; background: rgba(8,16,27,.76); box-shadow: 0 10px 30px rgba(0,0,0,.24);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 800 15px/1 Pretendard, sans-serif; cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.lesson-home-button svg { width: 19px; height: 19px; fill: currentColor; }
.lesson-home-button:hover { border-color: rgba(255,255,255,.7); background: rgba(34,98,214,.92); transform: translateY(-1px); }
.lesson-home-button:focus-visible { outline: 3px solid rgba(95,208,231,.7); outline-offset: 3px; }
.lesson-score-home-button {
  height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 17px;
  border: 1px solid #cdd9ea; border-radius: 13px; color: #fff; background: #1c3760;
  box-shadow: 0 8px 22px rgba(27,55,95,.14); font: 800 11px/1 Pretendard, sans-serif; cursor: pointer;
}
.lesson-score-home-button:hover { background: #27589d; }
.legacy-layout.view-player .video-controls {
  position: fixed; z-index: 25; left: 24px; right: 24px; bottom: 100px;
  border-radius: 18px; color: #fff; background: rgba(8, 16, 27, .78); backdrop-filter: blur(15px);
  opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease;
}
.legacy-layout.view-player .lesson-navigation {
  position: fixed; z-index: 24; left: 24px; right: 24px; bottom: 20px; min-height: 68px;
  border-radius: 18px; color: #fff; background: rgba(8, 16, 27, .78); backdrop-filter: blur(15px);
  opacity: 0; transform: translateY(14px); transition: opacity .25s ease, transform .25s ease;
}
.legacy-layout.view-player.controls-visible .video-controls,
.legacy-layout.view-player.controls-visible .lesson-navigation { opacity: 1; transform: translateY(0); }
.legacy-layout.view-player .lesson-navigation strong { color: #fff; }
.legacy-layout.view-player .lesson-navigation small { color: rgba(255,255,255,.64); }
.legacy-layout.view-player .creka-web-video { width: 100vw; height: 100vh; object-fit: contain; background: #000; }
.legacy-layout.view-score #view-score { padding: 38px; overflow-y: auto; background: #eef3f9; }
.legacy-layout.view-score .score-actions { flex-wrap: wrap; }
.legacy-team-editor { margin-top: 16px; padding: 16px; border: 1px solid #dbe4ef; border-radius: 16px; background: #f7faff; }
.legacy-team-editor.is-attention { animation: team-editor-attention .75s ease both; }
#settingsDialog.team-manager-open .dialog-device,
#settingsDialog.team-manager-open dl,
#settingsDialog.team-manager-open .profile-fields,
#settingsDialog.team-manager-open .remote-connect,
#settingsDialog.team-manager-open #patchButton,
#settingsDialog.team-manager-open #logoutButton { display: none; }
#settingsDialog.team-manager-open .legacy-team-editor { margin-top: 0; }
#settingsDialog.team-manager-open form { max-height: min(720px,calc(100vh - 40px)); }
@keyframes team-editor-attention {
  0% { border-color: #5e8bf0; box-shadow: 0 0 0 0 rgba(49,95,232,.3); }
  100% { border-color: #dbe4ef; box-shadow: 0 0 0 9px rgba(49,95,232,0); }
}
.legacy-team-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.legacy-team-editor-heading > div { display: grid; gap: 3px; }
.legacy-team-editor-heading strong { color: #172438; font-size: 14px; }
.legacy-team-editor-heading small { color: #75839a; font-size: 11px; }
.legacy-team-editor-heading > span { flex: none; padding: 6px 10px; border-radius: 999px; color: #167fa5; background: #e4f7fd; font-size: 11px; font-weight: 800; }
.legacy-team-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.legacy-team-field { display: grid; grid-template-columns: 20px 28px minmax(0, 1fr); align-items: center; gap: 7px; padding: 7px 8px; border: 1px solid #dce5ef; border-radius: 11px; background: #fff; opacity: .62; }
.legacy-team-field.active { border-color: #64c8e8; box-shadow: 0 0 0 2px rgba(24,169,216,.08); opacity: 1; }
.legacy-team-field input[type="checkbox"] { width: 16px; height: 16px; accent-color: #14a7d5; }
.legacy-team-field b { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; color: #fff; background: #14a7d5; font-size: 12px; }
.legacy-team-field input[type="text"] { min-width: 0; padding: 8px 9px; border: 1px solid #dfe6ef; border-radius: 8px; font: inherit; }

@media (max-width: 900px) {
  .legacy-layout .workspace { padding: 10px; }
  .legacy-mission-shell { min-height: calc(100vh - 20px); padding: 20px 18px 32px; border-radius: 0 0 28px 0; }
  .legacy-actionbar button { min-width: 88px; height: 44px; padding: 0 13px; font-size: 14px; }
  #legacyProfileButton { min-width: 155px; }
  #legacyQuitButton { min-width: 125px; }
  .legacy-title { margin-top: 26px; }
  .legacy-selection-grid { width: 100%; grid-template-columns: 1fr; gap: 20px; }
  .legacy-column output, .legacy-select-wrap, .legacy-mission-button { min-height: 54px; font-size: 19px; }
}

@media (max-width: 600px) {
  .legacy-actionbar { align-items: stretch; flex-direction: column; }
  .legacy-action-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .legacy-actionbar button, #legacyProfileButton, #legacyQuitButton { width: 100%; min-width: 0; }
  #legacyProfileButton { grid-column: 1 / -1; }
  .legacy-title { width: min(270px, 88%); height: 56px; font-size: 26px; }
  .legacy-layout.view-score #view-score { padding: 18px 12px 90px; }
  .legacy-team-fields { grid-template-columns: 1fr; }
  .lesson-home-button { top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); min-width: 78px; height: 42px; padding: 0 14px; font-size: 13px; }
}

@media (max-width: 900px) {
  .toast { bottom: calc(91px + env(safe-area-inset-bottom)); }
}

@media (max-width: 600px) {
  .app-dialog form { padding: 21px; }
  .video-placeholder.is-message h2 { font-size: 23px; }
  .download-progress { margin-top: 4px; }
}

/* 1.0.4 readability pass: keep the existing layout while making all
   operational text comfortably readable on classroom displays. */
body { font-size: 15px; }
.brand-copy small { font-size: 10px; }
.device-state strong { font-size: 13px; }
.device-state small { font-size: 11px; }
.eyebrow, .mini-label { font-size: 11px; }
.connection { font-size: 12px; }
.profile strong { font-size: 13px; }
.profile small { font-size: 11px; }
.season-chip { font-size: 12px; }
.hero-card p { font-size: 14px; }
.primary-button, .secondary-button { font-size: 13px; }
.text-button { font-size: 12px; }
.thumb-overlay { font-size: 11px; }
.continue-info > span { font-size: 11px; }
.continue-info h4 { font-size: 17px; }
.continue-info small { font-size: 10px; }
.mission-number { font-size: 11px; }
.mission-card small { font-size: 10px; }
.mission-card strong { font-size: 15px; }
.mission-card p { font-size: 11px; line-height: 1.45; }
.month-switch strong { font-size: 13px; }
.filter { font-size: 11px; }
.row-index { font-size: 11px; }
.row-copy small, .row-copy em { font-size: 10px; }
.row-copy strong { font-size: 14px; }
.availability { font-size: 10px; }
.detail-cover span { font-size: 10px; }
.mission-detail p { font-size: 12px; }
.meta-grid small { font-size: 10px; }
.meta-grid b { font-size: 12px; }
.mode-select strong { font-size: 11px; }
.mode-select small { font-size: 9px; }
.lesson-kicker { font-size: 11px; }
.video-controls { font-size: 10px; }
.video-controls button { font-size: 11px; }
.lesson-navigation strong { font-size: 14px; }
.lesson-navigation small { font-size: 10px; }
.time-chip { font-size: 10px; }
.step-list li > span { font-size: 10px; }
.step-list strong { font-size: 12px; }
.step-list small { font-size: 10px; }
.remote-state strong { font-size: 11px; }
.remote-state small { font-size: 9px; }
.score-heading p { font-size: 12px; }
.rank { font-size: 10px; }
.total-score span { font-size: 11px; }
.score-row { font-size: 11px; }
.score-row strong { font-size: 13px; }
.add-team strong { font-size: 13px; }
.add-team small { font-size: 10px; }
.login-message p { font-size: 15px; }
.login-caption > span, .login-caption small { font-size: 10px; }
.login-heading p { font-size: 13px; }
.field > span { font-size: 12px; }
.field input { font-size: 14px; }
.login-options label, .login-options button { font-size: 11px; }
.secure-device strong { font-size: 11px; }
.secure-device small { font-size: 10px; }
.login-version { font-size: 9px; }
.login-status { font-size: 12px; }
.download-progress span { font-size: 11px; }
.toast { font-size: 13px; }
.dialog-device strong { font-size: 13px; }
.dialog-device small { font-size: 11px; }
.app-dialog dt, .app-dialog dd { font-size: 12px; }
.profile-fields label > span { font-size: 11px; }
.profile-fields input { font-size: 12px; }
.remote-connect strong { font-size: 12px; }
.remote-connect small { font-size: 10px; }
.dialog-copy { font-size: 13px; }
.help-list strong { font-size: 12px; }
.help-list small { font-size: 10px; }

@media (max-width: 900px) {
  .main-nav .nav-button { font-size: 11px; }
}

@media (max-width: 600px) {
  .field input { font-size: 16px; }
  .lesson-navigation .primary-button,
  .lesson-navigation .secondary-button { font-size: 11px; }
}

/* 1.0.14 unified classroom UI
   Keep the official three-step composition (account -> set -> mission) and
   lesson order, while giving both Desktop and Web the same polished surface. */
.legacy-layout {
  --class-accent: #315fe8;
  --class-accent-soft: #55c7dc;
  --class-accent-rgb: 49,95,232;
  background: #edf3fa;
}
html[data-program="macience"] .legacy-layout { --class-accent: #27a99f; --class-accent-soft: #5acbd1; --class-accent-rgb: 39,169,159; }
html[data-program="odyssey"] .legacy-layout { --class-accent: #4d59b9; --class-accent-soft: #8190da; --class-accent-rgb: 77,89,185; }
.legacy-layout .app-shell { background: transparent; }
.legacy-layout .workspace {
  padding: clamp(18px, 2.3vw, 34px);
  background:
    radial-gradient(circle at 4% 0%, rgba(71,126,241,.17), transparent 27%),
    radial-gradient(circle at 96% 12%, rgba(45,197,219,.18), transparent 26%),
    linear-gradient(145deg,#e8eff8,#f5f8fc 55%,#eaf4f8);
}
.legacy-mission-shell {
  width: min(1680px,100%); min-height: calc(100vh - clamp(36px,4.6vw,68px)); margin: 0 auto;
  padding: clamp(24px,3vw,46px); border: 1px solid rgba(191,204,223,.72); border-radius: 30px;
  background:
    radial-gradient(circle at 7% 0%,rgba(var(--class-accent-rgb),.075),transparent 23%),
    radial-gradient(circle at 94% 12%,rgba(72,199,220,.07),transparent 25%),
    rgba(255,255,255,.985);
  box-shadow: 0 28px 80px rgba(35,56,91,.17);
}
.legacy-actionbar {
  min-height: 86px; padding: 8px 14px 8px 18px; border: 1px solid #e0e8f3; border-radius: 21px;
  background: linear-gradient(135deg,rgba(255,255,255,.98),rgba(246,249,254,.96));
  box-shadow: 0 12px 32px rgba(42,63,99,.09);
}
.legacy-actionbar::before {
  content: none;
}
.legacy-actionbar::after {
  content: none;
}
.legacy-program-brand { width: 232px; height: 70px; display: flex; align-self: center; align-items: center; justify-content: flex-start; flex: 0 0 auto; margin-right: auto; overflow: visible; padding: 4px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.legacy-program-brand .program-brand-logo { display: block; max-width: 210px; max-height: 56px; margin: auto 0; }
html[data-program="creka"] .legacy-program-brand .program-brand-logo { max-width: 180px; max-height: 54px; transform: translateY(7px); }
html[data-program="macience"] .legacy-program-brand .program-brand-logo { max-width: 184px; max-height: 56px; }
html[data-program="odyssey"] .legacy-program-brand { width: 310px; }
html[data-program="odyssey"] .legacy-program-brand .program-brand-logo { max-width: 284px; max-height: 52px; }
.legacy-action-group { gap: 8px; }
.legacy-actionbar button {
  min-width: 0; height: 42px; padding: 0 16px; border: 1px solid #dbe4ef; border-radius: 13px;
  color: #3c4b63; background: #fff; box-shadow: 0 5px 14px rgba(47,67,101,.08);
  font-size: 13px; font-weight: 800; letter-spacing: -.025em;
}
.legacy-actionbar button:hover { color: #315fe8; border-color: #b7c9f5; background: #f5f8ff; }
#legacyProfileButton, #bulkDownloadButton, #legacyQuitButton { min-width: 0; }
#legacyTeamSettingsButton {
  color: #fff; border-color: transparent; background: linear-gradient(135deg,#315fe8,#35b9cf);
  box-shadow: 0 7px 18px rgba(49,95,232,.2);
}
#legacyTeamSettingsButton:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg,#244fd1,#20a6c1); }
#bulkDownloadButton { color: #fff; border-color: transparent; background: linear-gradient(135deg,#3e76f2,#47badd); }
#bulkDownloadButton:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg,#2f65dd,#31a9d1); }
#legacyQuitButton { color: #fff; border-color: #1e3150; background: #1e3150; }
#legacyQuitButton:hover { color: #fff; border-color: #315fe8; background: #315fe8; }
.web-surface #bulkDownloadButton,
.web-surface #bulkDownloadSummary,
.web-surface #legacyQuitButton,
.web-surface #legacyProfileButton { display: none !important; }
.web-surface .legacy-actionbar {
  position: relative; min-height: 70px; justify-content: flex-end; padding: 11px 13px 11px 18px; border: 1px solid #e1e8f2; border-radius: 18px;
  background: linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,250,255,.94));
  box-shadow: 0 10px 28px rgba(40,62,99,.08);
}
.web-surface .legacy-program-brand {
  position: static; width: 194px; height: 58px; margin: 0 auto 0 0; padding: 4px 0; transform: none;
}
.web-surface .legacy-program-brand .program-brand-logo { max-width: 176px; max-height: 46px; }
.web-surface .legacy-action-group { flex: 0 0 auto; margin-left: auto; gap: 9px; }
.web-surface #legacyHelpButton { order: 1; }
.web-surface #legacyTeamSettingsButton { order: 2; }
.web-surface #legacyProfileButton { order: 2; }
.web-surface #legacyHelpButton {
  min-width: 88px; color: #53627a; border-color: #dce4ef; background: #fff; box-shadow: none;
}
.web-surface #legacyHelpButton:hover { color: #315fe8; border-color: #b9caf1; background: #f4f7ff; }
.web-surface #legacyLogoutButton {
  order: 3; min-width: 98px; margin-left: 0; color: #fff; border-color: transparent;
  background: linear-gradient(135deg,#7657e8,#e3549a); box-shadow: 0 7px 18px rgba(142,67,177,.22);
}
.web-surface #legacyLogoutButton:hover {
  color: #fff; border-color: transparent; background: linear-gradient(135deg,#6648d5,#d8448b);
}
.legacy-title {
  width: auto; height: auto; display: block; margin: clamp(30px,3.3vw,48px) 0 11px; color: #16243b; background: none;
  font-size: clamp(34px,3.4vw,52px); font-weight: 950; line-height: 1.05; letter-spacing: -.06em; text-align: center;
}
.legacy-title::before {
  content: "CLASSROOM"; display: block; margin-bottom: 9px; color: var(--class-accent);
  font-size: 10px; font-weight: 950; letter-spacing: .24em;
}
.legacy-title::after {
  content: "계정 확인 후 set과 미션을 순서대로 선택하세요."; display: block; margin-top: 12px;
  color: #637189; font-size: 13px; font-weight: 650; letter-spacing: -.02em;
}
.web-surface .legacy-title { margin-bottom: clamp(32px, 3vw, 46px); }
.legacy-download-summary {
  width: max-content; max-width: 92%; min-height: 0; margin: 0 auto 25px; padding: 8px 13px;
  border: 1px solid #dce8f6; border-radius: 99px; color: #4c7595; background: #f2f8fd;
  font-size: 11px; font-weight: 800; line-height: 1.3;
}
.legacy-download-summary.is-ready { color: #168169; border-color: #cdece2; background: #eefaf6; }
.legacy-download-summary.is-warning { color: #b75d2b; border-color: #f1d9cc; background: #fff7f2; }
.legacy-selection-grid {
  width: 100%; margin: 0 auto; display: grid;
  grid-template-columns: minmax(260px,.88fr) minmax(235px,.72fr) minmax(430px,1.5fr);
  gap: clamp(14px,1.5vw,22px); align-items: stretch;
}
.legacy-column {
  position: relative; min-width: 0; min-height: 390px; overflow: hidden; padding: clamp(21px,2vw,29px);
  border: 1px solid #dde6f1; border-radius: 25px; background: linear-gradient(155deg,#fff,#f5f8fc);
  box-shadow: 0 16px 38px rgba(42,63,99,.095); text-align: left;
}
.legacy-column::after {
  content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg,var(--class-accent),var(--class-accent-soft)); opacity: .82;
}
.legacy-column h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #364760;
  font-size: 13px; font-weight: 900; letter-spacing: .015em;
}
.legacy-column h2::before {
  content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--class-accent);
  box-shadow: 0 0 0 5px rgba(var(--class-accent-rgb),.11);
}
.legacy-account-column { background: radial-gradient(circle at 100% 0%,rgba(65,193,218,.11),transparent 35%),linear-gradient(155deg,#fff,#f8fafd); }
.web-surface .legacy-account-column {
  cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.web-surface .legacy-account-column:hover,
.web-surface .legacy-account-column:focus-visible {
  border-color: #a9c2f5; box-shadow: 0 17px 36px rgba(49,95,232,.14); transform: translateY(-2px); outline: none;
}
.legacy-set-column { background: radial-gradient(circle at 100% 0%,rgba(127,101,232,.12),transparent 36%),linear-gradient(155deg,#fff,#f7f8fd); }
.legacy-list-column {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg,#fff,#fbfcfe);
}
.legacy-column output, .legacy-select-wrap {
  width: 100%; min-height: 58px; display: grid; place-items: center start; margin: 0 0 11px; padding: 0 18px;
  border: 1px solid #d6e0ec; border-radius: 15px; color: #182943; background: #fff;
  box-shadow: 0 8px 22px rgba(46,66,99,.07); font-size: 16px; font-weight: 850; letter-spacing: -.035em;
}
.legacy-account-column output:first-of-type { color: #315fe8; }
.legacy-account-summary { display: grid; gap: 13px; }
.legacy-account-company {
  display: grid; gap: 7px; padding: 17px 18px; border: 1px solid #cad9ee; border-radius: 17px;
  background: linear-gradient(145deg,#fff,#f1f7ff); box-shadow: 0 10px 24px rgba(49,95,232,.08);
}
.legacy-account-company span, .legacy-account-facts dt {
  color: #8290a5; font-size: 10px; font-weight: 850; letter-spacing: .02em;
}
.legacy-account-company strong {
  overflow: hidden; color: #315fe8; font-size: 18px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap;
}
.legacy-account-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; }
.legacy-account-facts > div {
  min-width: 0; display: grid; gap: 6px; padding: 12px 13px; border: 1px solid #dde6f1; border-radius: 13px;
  background: rgba(255,255,255,.86);
}
.legacy-account-facts > div.wide { grid-column: 1 / -1; }
.legacy-account-facts dd {
  min-width: 0; margin: 0; overflow: hidden; color: #1c2d47; font-size: 12px; font-weight: 850;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.legacy-account-facts dd.mono {
  color: #3b5b88; font-family: ui-monospace,SFMono-Regular,Consolas,monospace; font-size: 11px; letter-spacing: .01em;
}
.legacy-select-wrap::after {
  right: 18px; border-left-width: 6px; border-right-width: 6px; border-top: 8px solid #5f65df;
}
.legacy-select-wrap select { height: 56px; color: #315fe8; font-size: 16px; text-align: left; }
.legacy-set-preview {
  min-height: 214px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  margin-top: 16px; padding: 22px 18px; border: 1px dashed rgba(var(--class-accent-rgb),.22); border-radius: 20px;
  background: radial-gradient(circle at 50% 35%,rgba(var(--class-accent-rgb),.09),transparent 48%),rgba(255,255,255,.68);
  text-align: center;
}
.legacy-set-emblem {
  position: relative; width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 15px;
  border: 1px solid rgba(var(--class-accent-rgb),.16); border-radius: 25px; color: #fff;
  background: linear-gradient(145deg,var(--class-accent),var(--class-accent-soft));
  box-shadow: 0 18px 34px rgba(var(--class-accent-rgb),.2); transform: rotate(-7deg);
}
.legacy-set-emblem i { position: absolute; inset: 10px; border: 1px solid rgba(255,255,255,.28); border-radius: 18px; }
.legacy-set-emblem span { position: relative; font-size: 34px; font-weight: 950; transform: rotate(7deg); }
.legacy-set-preview small { color: #96a1b2; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.legacy-set-preview strong { margin-top: 5px; color: #20314c; font-size: 20px; font-weight: 950; letter-spacing: -.04em; }
.legacy-set-preview p { margin: 9px 0 0; color: #7f8da2; font-size: 11px; font-weight: 700; }
.legacy-set-preview p b { color: var(--class-accent); font-size: 13px; }
.legacy-list-column .mission-list {
  counter-reset: unified-mission; display: grid; flex: 1; min-height: 0; gap: 12px;
  grid-auto-rows: minmax(104px,1fr);
}
.legacy-mission-button {
  position: relative; width: 100%; height: 100%; min-height: 104px; display: grid; overflow: hidden;
  grid-template-columns: 112px minmax(0,1fr) 42px !important; align-items: center; justify-items: stretch; gap: 20px;
  margin: 0; padding: 11px 16px 11px 11px; border: 1px solid #d9e3ef; border-radius: 22px; color: #182943;
  background: linear-gradient(135deg,#fff 0%,#fbfdff 56%,#f4f8ff 100%); text-align: left;
  box-shadow: 0 9px 24px rgba(42,63,99,.07); isolation: isolate;
}
.legacy-mission-button::before {
  content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg,var(--class-accent),var(--class-accent-soft)); opacity: 0; transition: opacity .2s ease;
}
.legacy-mission-button::after {
  content: "\2192"; width: 38px; height: 38px; display: grid; place-items: center; justify-self: end;
  border: 1px solid #dce6f3; border-radius: 50%; color: #8190a5; background: rgba(255,255,255,.88);
  box-shadow: 0 5px 14px rgba(39,62,99,.08); font-size: 18px; font-weight: 900; transition: .2s ease;
}
.legacy-mission-thumb {
  position: relative; width: 112px; height: 80px; display: grid; place-items: center; overflow: hidden;
  border: 1px solid #dbe5f2; border-radius: 17px; background: linear-gradient(135deg,#f1f6ff,#ebfbfd);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.74),0 7px 18px rgba(40,66,104,.09);
}
.legacy-mission-thumb img { width: 100%; height: 100%; display: block; object-fit: contain; padding: 4px; background: #fff; transition: transform .25s ease; }
.legacy-mission-thumb > span { color: #4e76dc; font-size: 22px; font-weight: 900; }
.legacy-mission-thumb b {
  position: absolute; left: 8px; bottom: 8px; min-width: 34px; padding: 5px 8px; border-radius: 10px;
  color: #fff; background: linear-gradient(135deg,#253653,#5d6d88); box-shadow: 0 5px 12px rgba(27,44,74,.2);
  font-size: 10px; font-weight: 950; line-height: 1.2; text-align: center; letter-spacing: .03em;
}
.legacy-mission-copy {
  min-width: 0; width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  justify-self: stretch; gap: 5px; text-align: left;
}
.legacy-mission-button small { color: var(--class-accent); font-size: 8px; font-weight: 950; line-height: 1.2; letter-spacing: .16em; }
.legacy-mission-button strong {
  max-width: 100%; overflow: hidden; color: #172942; font-size: clamp(16px,1.15vw,20px); font-weight: 950;
  line-height: 1.3; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap;
}
.legacy-mission-button:hover, .legacy-mission-button:focus-visible {
  color: #1f304d; border-color: rgba(var(--class-accent-rgb),.38); background: linear-gradient(135deg,#fff,#f2f7ff);
  box-shadow: 0 15px 34px rgba(var(--class-accent-rgb),.14); transform: translateY(-2px);
}
.legacy-mission-button:hover::before, .legacy-mission-button:focus-visible::before { opacity: 1; }
.legacy-mission-button:hover .legacy-mission-thumb img, .legacy-mission-button:focus-visible .legacy-mission-thumb img { transform: scale(1.06); }
.legacy-mission-button:hover::after, .legacy-mission-button:focus-visible::after {
  color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--class-accent),var(--class-accent-soft));
  box-shadow: 0 8px 18px rgba(var(--class-accent-rgb),.24); transform: translateX(3px);
}
.legacy-download-progress { width: min(720px,100%); margin: 24px auto 0; }
.legacy-download-progress > div { height: 8px; }
.legacy-download-progress span { color: #506179; font-size: 12px; }

@media (max-width: 1180px) {
  .legacy-actionbar { flex-wrap: wrap; }
  .legacy-program-brand { margin-bottom: 6px; }
  .legacy-selection-grid { grid-template-columns: 1fr 1fr; }
  .legacy-list-column { grid-column: 1 / -1; min-height: 0; }
  .legacy-list-column .mission-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .legacy-layout .workspace { padding: 0; }
  .legacy-mission-shell { min-height: 100dvh; padding: 20px 15px 92px; border: 0; border-radius: 0; }
  .legacy-actionbar { display: grid; grid-template-columns: 1fr; padding-top: 0; }
  .legacy-program-brand, html[data-program="odyssey"] .legacy-program-brand { width: min(248px,100%); height: 54px; margin: 0 0 4px; }
  .legacy-action-group { display: grid; grid-template-columns: 1fr 1fr; }
  #legacyProfileButton, #bulkDownloadButton { grid-column: auto; }
  .legacy-actionbar button, #legacyQuitButton { width: 100%; }
  .web-surface .legacy-actionbar {
    min-height: 62px; display: flex; align-items: center; flex-direction: row; gap: 8px;
    padding: 8px 9px 8px 12px; border-radius: 15px;
  }
  .web-surface .legacy-program-brand,
  .web-surface html[data-program="odyssey"] .legacy-program-brand {
    position: static; width: 148px; height: 48px; margin: 0; transform: none;
  }
  .web-surface .legacy-program-brand .program-brand-logo { max-width: 136px; max-height: 38px; }
  .legacy-set-preview { min-height: 168px; margin-top: 12px; padding: 18px; }
  .legacy-set-emblem { width: 66px; height: 66px; margin-bottom: 12px; border-radius: 21px; }
  .legacy-set-emblem span { font-size: 29px; }
  .web-surface .legacy-action-group { width: auto; display: flex; flex: 0 0 auto; margin-left: auto; gap: 6px; }
  .web-surface #legacyHelpButton,
  .web-surface #legacyTeamSettingsButton,
  .web-surface #legacyLogoutButton { width: auto; min-width: 72px; height: 40px; padding: 0 12px; font-size: 12px; }
  .legacy-title { margin-top: 32px; font-size: 34px; }
  .web-surface .legacy-title { margin-bottom: 24px; }
  .legacy-selection-grid { grid-template-columns: 1fr; }
  .legacy-column { min-height: 0; padding: 19px; }
  .legacy-list-column { grid-column: auto; }
  .legacy-list-column .mission-list { grid-template-columns: 1fr; grid-auto-rows: minmax(86px,auto); }
  .legacy-mission-button {
    height: auto; min-height: 86px; grid-template-columns: 88px minmax(0,1fr) 38px !important;
    gap: 13px; padding: 9px 11px 9px 9px; border-radius: 18px;
  }
  .legacy-mission-thumb { width: 88px; height: 66px; border-radius: 14px; }
  .legacy-mission-thumb b { left: 6px; bottom: 6px; min-width: 29px; padding: 4px 6px; border-radius: 8px; font-size: 9px; }
  .legacy-mission-button::after { width: 34px; height: 34px; font-size: 16px; }
  .legacy-mission-button strong { font-size: 15px; }
  .legacy-mission-button small { font-size: 7px; }
}

/* 1.0.40 classroom controls: persistent volume selection and 10-point scoring. */
.volume-control { display:flex;align-items:center;gap:7px;min-width:172px; }
.volume-control #muteButton { flex:0 0 30px;font-size:15px; }
.volume-control input[type="range"] { width:100px;margin:0;accent-color:#55d3dd;cursor:pointer; }
.volume-control input[type="range"]:disabled { opacity:.4;cursor:not-allowed; }
.volume-control #volumeValue { min-width:35px;color:rgba(255,255,255,.76);font-size:10px;text-align:right; }
.score-row button { width:38px;height:28px;font-size:10px;font-weight:800; }
.score-row strong { width:30px; }
@media (max-width:900px) {
  .volume-control { min-width:105px;gap:4px; }
  .volume-control input[type="range"] { width:68px; }
  .volume-control #volumeValue { display:none; }
  .score-actions { flex-wrap:wrap; }
}

/* 1.0.47 head-office visual refinement.
   Shared by Web and Desktop so the classroom experience stays identical. */
.login-body {
  background:
    radial-gradient(circle at 8% 8%, rgba(74, 160, 241, .17), transparent 29%),
    radial-gradient(circle at 92% 88%, rgba(99, 210, 220, .18), transparent 31%),
    #f4f8ff;
}
.login-shell {
  border-color: rgba(174, 197, 228, .58);
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 34px 90px rgba(47, 87, 139, .16);
}
.login-showcase {
  color: #182943;
  background:
    radial-gradient(circle at 72% 74%, rgba(92, 204, 219, .22), transparent 28%),
    radial-gradient(circle at 13% 12%, rgba(65, 121, 239, .14), transparent 30%),
    linear-gradient(145deg, #f7fbff 0%, #eaf4ff 54%, #eaf9f9 100%);
}
.login-showcase::after {
  background-image:
    linear-gradient(rgba(63, 111, 178, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63, 111, 178, .045) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 72%, transparent);
}
.login-brand-surface { width: 310px; height: 70px; }
.login-brand-logo { filter: drop-shadow(0 9px 18px rgba(63, 101, 157, .15)); }
.login-message { max-width: 540px; margin-top: 72px; }
.login-message .season-chip {
  color: #3564c9;
  border-color: rgba(57, 105, 207, .2);
  background: rgba(255, 255, 255, .72);
}
.login-message h1 {
  margin: 19px 0 17px;
  color: #14243e;
  font-size: clamp(35px, 3.1vw, 43px);
  line-height: 1.18;
  letter-spacing: -.06em;
}
.login-message h1 em { color: #3173de; }
.login-message p { max-width: 505px; color: #64758e; line-height: 1.78; }
.login-caption { left: 48px; bottom: 38px; gap: 9px; }
.login-caption > span {
  color: #3f6495;
  border-color: rgba(73, 122, 189, .22);
  background: rgba(255, 255, 255, .72);
}
.login-caption small { margin-left: 4px; color: #667b97; }
.login-form-wrap { background: linear-gradient(180deg, #fff, #f8fbff); }
.login-heading .mini-label { color: #3b73dc; }
.login-heading h2 { color: #17263e; }
.field > div {
  border-color: #d6e1ef;
  box-shadow: 0 6px 18px rgba(61, 86, 126, .045);
}
.field-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: none;
  stroke: #6d8ec4;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.login-submit {
  color: #fff;
  background: linear-gradient(135deg, #3876ef, #42bad8);
  box-shadow: 0 13px 28px rgba(57, 119, 230, .24);
}
.login-submit:hover { box-shadow: 0 16px 32px rgba(57, 119, 230, .32); }
.secure-device {
  border-color: rgba(66, 174, 151, .2);
  background: linear-gradient(135deg, rgba(77, 192, 158, .07), rgba(67, 167, 218, .055));
}

.legacy-title::before { content: "MISSION"; }
.legacy-title::after { content: "계정 확인 후 세트와 미션을 순서대로 선택하세요."; }
.legacy-set-preview { min-height: 265px; }
.legacy-set-emblem.has-artwork {
  position: relative;
  width: min(230px, 100%);
  height: 142px;
  margin-bottom: 17px;
  overflow: hidden;
  border: 1px solid #dce6f2;
  border-radius: 20px;
  transform: none;
  background: #fff;
  box-shadow: 0 13px 30px rgba(53, 83, 127, .12);
}
.legacy-set-emblem.has-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 7px;
  object-fit: contain;
  object-position: center;
}
.legacy-set-emblem.has-artwork i { display: none; }
.legacy-set-emblem.has-artwork span {
  position: absolute;
  left: 11px;
  bottom: 10px;
  min-width: 34px;
  padding: 5px 9px;
  border-radius: 9px;
  color: #fff;
  background: rgba(18, 36, 64, .8);
  box-shadow: 0 5px 14px rgba(20, 38, 67, .16);
  font-size: 12px;
  line-height: 1;
  text-align: center;
  transform: none;
  backdrop-filter: blur(6px);
}
.legacy-mission-thumb img {
  width: 100%;
  height: 100%;
  padding: 3px;
  object-fit: contain;
  object-position: center;
}

.legacy-layout.view-score #view-score {
  background:
    radial-gradient(circle at 3% 0%, rgba(75, 141, 241, .16), transparent 29%),
    radial-gradient(circle at 96% 12%, rgba(69, 202, 211, .18), transparent 28%),
    linear-gradient(145deg, #eef6ff, #f9fbff 58%, #eefaf9);
}
.legacy-layout.view-score .score-heading {
  padding: 23px 25px;
  border: 1px solid rgba(194, 210, 231, .72);
  border-radius: 23px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(50, 75, 111, .09);
}
.legacy-layout.view-score .score-heading h2 { color: #172a46; }
.score-grid { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 16px; }
.team-card {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid #dce7f3;
  border-radius: 25px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 42px rgba(49, 78, 119, .1);
}
.team-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, #3f7bf1, #4ec5d7, #8d76ed, #ed67a2);
}
.team-card.rank-one { border-color: rgba(64, 126, 239, .44); }
.team-card input {
  margin: 18px 0 10px;
  padding: 11px 12px;
  border: 1px solid #dfe8f3;
  border-radius: 11px;
  background: #fbfdff;
}
.total-score { margin-bottom: 16px; }
.total-score strong { color: #244e9d; }
.score-row {
  gap: 10px;
  margin-top: 9px;
  padding: 12px;
  border: 0;
  border-radius: 15px;
  background: #f7faff;
}
.score-row-label { min-width: 0; display: grid !important; gap: 7px !important; flex: 1; }
.score-row-label > span:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.score-row-label b { color: #394c68; font-size: 12px; }
.score-row-label small { color: #8c9ab0; font-size: 9px; }
.score-icons { display: flex; align-items: center; gap: 3px; min-height: 20px; }
.score-icons i { color: #dce4ef; font-size: 17px; font-style: normal; line-height: 1; }
.score-icons-0 i.filled { color: #f2b73c; }
.score-icons-1 i.filled { color: #8a73ed; }
.score-icons-2 i.filled { color: #ed679d; }
.score-row > div { flex: 0 0 auto; gap: 5px; }
.score-row button {
  width: 39px;
  height: 29px;
  border-color: #d9e4f0;
  color: #46628a;
  background: #fff;
}
.score-row strong { width: 27px; color: #213858; }

@media (max-width: 900px) {
  .login-message { margin-top: 28px; }
  .legacy-set-preview { min-height: 225px; }
  .legacy-layout.view-score .score-heading { align-items: stretch; flex-direction: column; gap: 15px; }
  .score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .login-brand-surface { width: 248px; height: 55px; }
  .login-message h1 { font-size: clamp(27px, 7.8vw, 34px); }
  .score-grid { grid-template-columns: 1fr; }
  .team-card { min-height: 0; }
  .score-row { align-items: stretch; flex-direction: column; }
  .score-row > div { justify-content: flex-end; }
}

/* 1.0.48 explicit classroom control visibility. */
#controlVisibilityButton {
  min-width: 82px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 9px;
  color: #fff;
  background: rgba(255,255,255,.11);
  font-weight: 800;
  white-space: nowrap;
}
#controlVisibilityButton:hover,
#controlVisibilityButton:focus-visible { background: rgba(255,255,255,.2); }

@media (max-width: 720px) {
  #controlVisibilityButton { min-width: 54px; padding: 6px 7px; font-size: 9px; }
}

/* Shared game scoreboard for the installed app and web renderer. */
.web-surface .game-result-dialog .result-crown,
.web-surface .game-result-dialog .result-sparkles,
.web-surface .game-result-dialog .result-message { display: block; }
.desktop-surface .legacy-layout.view-score #view-score {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 16px 28px 22px;
  overflow: hidden;
  background: #39bff2 url("assets/scoreboard/background.png") center / cover no-repeat;
  isolation: isolate;
}
.desktop-surface .legacy-layout.view-score #view-score::before,
.desktop-surface .legacy-layout.view-score #view-score::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
.desktop-surface .legacy-layout.view-score #view-score::before {
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(31,138,243,.03) 55%, rgba(67,190,36,.12));
}
.desktop-surface .legacy-layout.view-score #view-score::after {
  width: 170px;
  height: 170px;
  right: 4%;
  top: 5%;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  filter: blur(2px);
  animation: score-cloud-float 5s ease-in-out infinite alternate;
}
.desktop-surface .legacy-layout.view-score .score-heading {
  display: grid;
  grid-template-columns: minmax(370px, .9fr) minmax(700px, 1.7fr);
  align-items: center;
  gap: 24px;
  min-height: 178px;
  padding: 0 20px 8px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.desktop-surface .score-title-lockup { display: grid; justify-items: center; gap: 2px; }
.desktop-surface .score-title-lockup img {
  width: min(410px, 100%);
  height: 130px;
  object-fit: contain;
  filter: drop-shadow(0 8px 2px rgba(14, 86, 176, .24));
  animation: score-title-arrive .65s cubic-bezier(.2, 1.35, .4, 1) both;
}
.desktop-surface .score-title-lockup p {
  margin: -10px 0 0;
  padding: 10px 22px;
  border: 3px solid rgba(255,255,255,.86);
  border-radius: 999px;
  color: #1f5db4;
  background: rgba(255,255,255,.92);
  box-shadow: 0 8px 0 rgba(54, 142, 225, .13);
  font-size: clamp(12px, 1vw, 17px);
  font-weight: 900;
  white-space: nowrap;
}
.desktop-surface .legacy-layout.view-score .score-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 20px 24px;
  border-radius: 70px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 0 rgba(53, 132, 215, .12), inset 0 0 0 3px rgba(255,255,255,.75);
  backdrop-filter: blur(5px);
}
.desktop-surface .score-game-button {
  min-height: 58px;
  padding: 0 20px;
  border: 3px solid rgba(29,118,213,.22);
  border-radius: 22px;
  color: #1553a2;
  background: linear-gradient(#fff, #eef8ff);
  box-shadow: 0 6px 0 #9fd8fa, 0 10px 18px rgba(22,91,171,.14);
  font-size: clamp(12px, 1.05vw, 18px);
  font-weight: 1000;
  white-space: nowrap;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}
.desktop-surface .score-game-button:hover { transform: translateY(-3px); filter: saturate(1.15); }
.desktop-surface .score-game-button:active { transform: translateY(3px); box-shadow: 0 2px 0 #86c9f4; }
.desktop-surface .score-home-button {
  color: #fff;
  border-color: #3c73cf;
  background: linear-gradient(180deg, #285db8, #133d87);
  box-shadow: 0 6px 0 #0c2f70, 0 10px 18px rgba(11,44,104,.22);
}
.desktop-surface .score-sound-button { padding-inline: 15px; }
.desktop-surface .score-sound-button[aria-pressed="false"] { filter: grayscale(.8); opacity: .72; }
.desktop-surface .score-result-button {
  color: #fff;
  border-color: #9b54ff;
  background: linear-gradient(180deg, #a350ff, #6f20df);
  box-shadow: 0 6px 0 #5514bd, 0 10px 20px rgba(99,29,207,.27);
}
.desktop-surface .score-next-button {
  color: #fff;
  border-color: #2c9cff;
  background: linear-gradient(180deg, #39b7ff, #0879e7);
  box-shadow: 0 6px 0 #055ebd, 0 10px 20px rgba(6,101,199,.24);
}
.desktop-surface .score-board-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 12px;
  border: 5px solid rgba(255,255,255,.93);
  border-radius: 42px;
  background: linear-gradient(180deg, rgba(75,129,255,.92), rgba(52,107,240,.94));
  box-shadow: 0 0 0 7px rgba(44,109,236,.48), inset 0 0 28px rgba(255,255,255,.35), 0 18px 40px rgba(6,76,171,.25);
}
.desktop-surface .legacy-layout.view-score .score-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: clamp(7px, .8vh, 12px);
  height: auto;
}
.desktop-surface .score-grid .team-card {
  display: grid;
  grid-template-columns: minmax(235px, 1.13fr) repeat(3, minmax(165px, 1fr)) minmax(200px, .85fr);
  align-items: stretch;
  gap: 0;
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 7px 12px;
  overflow: visible;
  border: 4px solid rgba(179,233,255,.92);
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(235,250,255,.98));
  box-shadow: inset 0 0 18px rgba(120,211,255,.27), 0 6px 0 rgba(16,86,207,.42);
  animation: none;
}
.desktop-surface .score-grid .team-card::before { display: none; }
.desktop-surface .score-grid .team-card.rank-one {
  border-color: #ffe36b;
  box-shadow: inset 0 0 24px rgba(255,226,74,.22), 0 6px 0 #e6ad18, 0 0 20px rgba(255,232,74,.52);
}
.desktop-surface .score-team-identity {
  position: relative;
  display: grid;
  grid-template-columns: clamp(58px, 6.3vw, 94px) 48px minmax(100px, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-right: 14px;
  border-right: 3px solid #c8e1ff;
}
.desktop-surface .score-avatar-wrap {
  position: relative;
  align-self: center;
  aspect-ratio: 1;
  border: 5px solid #69cdf7;
  border-radius: 50%;
  background: linear-gradient(#d8f8ff, #fff);
  box-shadow: 0 5px 0 #168fd2, inset 0 0 12px rgba(65,190,246,.35);
}
.desktop-surface .score-avatar-wrap img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.12); }
.desktop-surface .score-team-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(180deg, var(--team-color, #2eacf4), var(--team-dark, #166fd5));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 color-mix(in srgb, var(--team-dark, #166fd5) 82%, #122b65);
  font-size: 25px;
  font-weight: 1000;
}
.desktop-surface .score-team-copy { min-width: 0; }
.desktop-surface .score-team-copy input {
  width: 100%;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  color: #102a73;
  background: transparent;
  font-size: clamp(17px, 1.45vw, 26px);
  font-weight: 1000;
  text-overflow: ellipsis;
}
.desktop-surface .score-team-copy input:focus { outline: 3px solid rgba(54,151,244,.35); border-radius: 10px; background: #fff; }
.desktop-surface .score-rank {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #2d62b3;
  background: #e2f2ff;
  font-size: 12px;
  font-weight: 1000;
}
.desktop-surface .score-rank img { width: 21px; height: 21px; object-fit: contain; }
.desktop-surface .score-category {
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  min-width: 0;
  padding: 2px 10px;
  border-right: 3px solid #c8e1ff;
}
.desktop-surface .score-category-heading { display: flex; align-items: center; gap: 5px; color: #064fac; font-size: clamp(12px, 1.15vw, 20px); font-weight: 1000; }
.desktop-surface .score-category-heading img { width: 25px; height: 25px; object-fit: contain; }
.desktop-surface .score-category-heading small { font-size: .75em; }
.desktop-surface .score-icons { min-height: 0; gap: 2px; }
.desktop-surface .score-icons i { font-size: clamp(15px, 1.55vw, 27px); filter: drop-shadow(0 2px 0 rgba(40,83,150,.11)); }
.desktop-surface .score-category-controls { display: flex; align-items: center; justify-content: center; gap: 6px; }
.desktop-surface .score-category-controls button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 25px;
  border: 2px solid #b9d8fb;
  border-radius: 10px;
  color: #2167bd;
  background: #fff;
  box-shadow: 0 3px 0 #a4caf4;
  font-size: 12px;
  font-weight: 1000;
}
.desktop-surface .score-category-controls button:hover { color: #fff; background: #2f91ec; }
.desktop-surface .score-category-controls strong { min-width: 46px; color: #071d82; font-size: clamp(23px, 2.2vw, 39px); font-weight: 1000; line-height: .9; text-align: center; }
.desktop-surface .score-total {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  place-items: center;
  min-width: 0;
  margin-left: 12px;
  padding: 7px 18px;
  overflow: hidden;
  border: 4px solid #b979ff;
  border-radius: 29px;
  background: linear-gradient(145deg, #b259ff, #6b1fe0 62%, #8d36f0);
  box-shadow: inset 0 3px 4px rgba(255,255,255,.4), inset 0 -7px 12px rgba(63,10,149,.28), 0 6px 0 #5015b9;
}
.desktop-surface .score-total::before { position: absolute; top: 8px; left: 13px; width: 25%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.34); content: ""; transform: rotate(-9deg); }
.desktop-surface .score-total strong {
  z-index: 1;
  color: #ffd722;
  font-size: clamp(38px, 4vw, 70px);
  font-weight: 1000;
  line-height: 1;
  -webkit-text-stroke: 3px #ff8c00;
  paint-order: stroke fill;
  text-shadow: 0 5px 0 #b03f00, 0 9px 12px rgba(44,8,115,.38);
}
.desktop-surface .score-total span { z-index: 1; align-self: end; padding-bottom: 7px; color: #fff; font-size: clamp(12px, 1.2vw, 21px); font-weight: 1000; }
.desktop-surface .score-total.is-bumped { animation: none; }
.desktop-surface .score-grid.team-count-5 .team-card,
.desktop-surface .score-grid.team-count-6 .team-card { padding-block: 4px; border-radius: 25px; }
.desktop-surface .score-grid.team-count-7,
.desktop-surface .score-grid.team-count-8 { gap: 4px; }
.desktop-surface .score-grid.team-count-7 .team-card,
.desktop-surface .score-grid.team-count-8 .team-card { padding: 2px 8px; border-width: 3px; border-radius: 20px; box-shadow: 0 3px 0 rgba(16,86,207,.42); }
.desktop-surface .score-grid.team-count-7 .score-team-identity,
.desktop-surface .score-grid.team-count-8 .score-team-identity { grid-template-columns: 54px 38px minmax(90px,1fr); }
.desktop-surface .score-grid.team-count-7 .score-team-badge,
.desktop-surface .score-grid.team-count-8 .score-team-badge { width: 37px; height: 40px; border-radius: 12px; font-size: 18px; }
.desktop-surface .score-grid.team-count-7 .score-avatar-wrap,
.desktop-surface .score-grid.team-count-8 .score-avatar-wrap { width: 52px; }
.desktop-surface .score-grid.team-count-7 .score-team-copy input,
.desktop-surface .score-grid.team-count-8 .score-team-copy input { font-size: 16px; }
.desktop-surface .score-grid.team-count-7 .score-rank,
.desktop-surface .score-grid.team-count-8 .score-rank { padding: 2px 7px; font-size: 10px; }
.desktop-surface .score-grid.team-count-7 .score-category,
.desktop-surface .score-grid.team-count-8 .score-category { grid-template: 1fr / auto minmax(75px, 1fr) auto; gap: 5px; padding-inline: 6px; }
.desktop-surface .score-grid.team-count-7 .score-category-heading,
.desktop-surface .score-grid.team-count-8 .score-category-heading { font-size: 12px; }
.desktop-surface .score-grid.team-count-7 .score-category-heading img,
.desktop-surface .score-grid.team-count-8 .score-category-heading img { width: 20px; height: 20px; }
.desktop-surface .score-grid.team-count-7 .score-icons i,
.desktop-surface .score-grid.team-count-8 .score-icons i { font-size: 14px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls strong,
.desktop-surface .score-grid.team-count-8 .score-category-controls strong { min-width: 31px; font-size: 23px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls button,
.desktop-surface .score-grid.team-count-8 .score-category-controls button { width: 25px; height: 21px; font-size: 10px; }
.desktop-surface .score-grid.team-count-7 .score-total strong,
.desktop-surface .score-grid.team-count-8 .score-total strong { font-size: 40px; }
.desktop-surface .score-grid.team-count-7 .score-total,
.desktop-surface .score-grid.team-count-8 .score-total { margin-left: 8px; padding-block: 2px; border-radius: 20px; }

.desktop-surface .game-result-dialog form {
  position: relative;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 44px;
  background: linear-gradient(145deg, #6ee8ff, #6678ff 52%, #9a4bff);
  box-shadow: 0 0 0 8px #5c7cff, 0 28px 80px rgba(26,38,132,.4);
}
.desktop-surface .game-result-dialog .result-crown { width: 150px; height: 105px; object-fit: contain; filter: drop-shadow(0 8px 0 rgba(130,70,0,.23)); animation: score-crown-bounce 1s ease-in-out infinite alternate; }
.desktop-surface .game-result-dialog .mini-label,
.desktop-surface .game-result-dialog h2,
.desktop-surface .game-result-dialog p,
.desktop-surface .game-result-dialog .result-message { position: relative; z-index: 1; color: #fff; }
.desktop-surface .game-result-dialog h2 { font-size: 42px; text-shadow: 0 4px 0 #2855c8; }
.desktop-surface .game-result-dialog p { color: #ffe536; font-size: 74px; font-weight: 1000; -webkit-text-stroke: 3px #ff8d00; paint-order: stroke fill; text-shadow: 0 5px 0 #a34c00; }
.desktop-surface .game-result-dialog .result-message { display: block; margin-bottom: 22px; font-size: 20px; }
.desktop-surface .result-sparkles i { position: absolute; color: #fff167; font-style: normal; font-size: 34px; animation: score-sparkle 1.1s ease-in-out infinite alternate; }
.desktop-surface .result-sparkles i:nth-child(1) { left: 8%; top: 16%; }
.desktop-surface .result-sparkles i:nth-child(2) { right: 9%; top: 18%; animation-delay: -.35s; }
.desktop-surface .result-sparkles i:nth-child(3) { left: 13%; bottom: 21%; animation-delay: -.65s; }
.desktop-surface .result-sparkles i:nth-child(4) { right: 12%; bottom: 27%; animation-delay: -.2s; }

@keyframes score-title-arrive { from { opacity: 0; transform: translateY(-24px) scale(.8) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes score-row-arrive { from { opacity: 0; transform: translateX(-35px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes score-bump { 0%,100% { transform: scale(1); } 35% { transform: scale(1.03); } }
@keyframes score-icon-pop { 0% { transform: scale(.72); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes score-icon-glint { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(0deg); } 38% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45) rotate(45deg); } }
@keyframes score-crown-bounce { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-10px) rotate(4deg); } }
@keyframes score-sparkle { from { opacity: .3; transform: scale(.65) rotate(0); } to { opacity: 1; transform: scale(1.25) rotate(25deg); } }
@keyframes score-cloud-float { from { transform: translateX(-14px) scale(.94); } to { transform: translateX(18px) scale(1.06); } }

@media (max-width: 1500px) {
  .desktop-surface .legacy-layout.view-score .score-heading { grid-template-columns: minmax(330px,.8fr) minmax(660px,1.6fr); min-height: 150px; }
  .desktop-surface .score-title-lockup img { height: 110px; }
  .desktop-surface .legacy-layout.view-score .score-actions { gap: 7px; padding: 14px 18px; }
  .desktop-surface .score-game-button { min-height: 50px; padding-inline: 14px; }
  .desktop-surface .score-grid .team-card { grid-template-columns: minmax(210px,1.05fr) repeat(3,minmax(145px,1fr)) minmax(180px,.82fr); }
}
@media (max-width: 1180px) {
  .desktop-surface .legacy-layout.view-score #view-score { overflow-y: auto; }
  .desktop-surface .legacy-layout.view-score .score-heading { display: flex; min-height: auto; flex-direction: column; }
  .desktop-surface .legacy-layout.view-score .score-actions { flex-wrap: wrap; justify-content: center; }
  .desktop-surface .score-board-shell { min-height: 640px; }
  .desktop-surface .score-grid .team-card { grid-template-columns: minmax(185px,1.1fr) repeat(3,minmax(130px,1fr)) minmax(160px,.85fr); }
}
@media (prefers-reduced-motion: reduce) {
  .desktop-surface .score-grid .team-card,
  .desktop-surface .score-title-lockup img,
  .desktop-surface .game-result-dialog .result-crown,
  .desktop-surface .result-sparkles i { animation: none !important; }
}

/* Shared curriculum selector — text-first cards without course photos. */
.desktop-surface .legacy-set-preview {
  position: relative;
  min-height: 265px;
  overflow: hidden;
  border: 1px solid rgba(var(--class-accent-rgb), .2);
  background:
    radial-gradient(circle at 18% 13%, rgba(var(--class-accent-rgb), .18), transparent 28%),
    radial-gradient(circle at 88% 86%, rgba(70, 198, 216, .16), transparent 30%),
    linear-gradient(145deg, #fff, #f4f7ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px rgba(51,74,111,.08);
}
.desktop-surface .legacy-set-preview::before,
.desktop-surface .legacy-set-preview::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(var(--class-accent-rgb), .12);
  border-radius: 50%;
  pointer-events: none;
}
.desktop-surface .legacy-set-preview::before { width: 132px; height: 132px; right: -46px; top: -50px; }
.desktop-surface .legacy-set-preview::after { width: 84px; height: 84px; left: -32px; bottom: -38px; }
.desktop-surface .legacy-set-emblem,
.desktop-surface .legacy-set-emblem.has-artwork {
  width: 94px;
  height: 94px;
  margin-bottom: 18px;
  overflow: visible;
  border: 0;
  border-radius: 31px;
  color: #fff;
  background: linear-gradient(145deg, var(--class-accent), var(--class-accent-soft));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), 0 17px 34px rgba(var(--class-accent-rgb),.25);
  transform: rotate(-5deg);
}
.desktop-surface .legacy-set-emblem::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 24px;
}
.desktop-surface .legacy-set-emblem::after {
  content: "✦";
  position: absolute;
  right: -12px;
  top: -13px;
  color: #f1b632;
  font-size: 27px;
  filter: drop-shadow(0 4px 8px rgba(77,56,8,.18));
  transform: rotate(5deg);
}
.desktop-surface .legacy-set-emblem img { display: none !important; }
.desktop-surface .legacy-set-emblem i { display: block; inset: 9px; border-radius: 23px; }
.desktop-surface .legacy-set-emblem span,
.desktop-surface .legacy-set-emblem.has-artwork span {
  position: relative;
  left: auto;
  bottom: auto;
  min-width: 0;
  padding: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  font-size: 40px;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(30,43,120,.22);
  transform: rotate(5deg);
  backdrop-filter: none;
}
.desktop-surface .legacy-set-preview small { position: relative; z-index: 1; color: #7889a4; }
.desktop-surface .legacy-set-preview strong { position: relative; z-index: 1; color: #182d4e; font-size: 23px; }
.desktop-surface .legacy-set-preview p { position: relative; z-index: 1; }

.desktop-surface .legacy-mission-button {
  grid-template-columns: 82px minmax(0,1fr) 42px !important;
  gap: 17px;
  padding: 12px 16px 12px 12px;
  border-radius: 22px;
}
.desktop-surface .legacy-mission-thumb.is-number-only {
  width: 82px;
  height: 82px;
  overflow: visible;
  border: 0;
  border-radius: 25px;
  background: linear-gradient(145deg, #4b8cf4, #5466dc);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 10px 21px rgba(54,93,193,.22);
}
.desktop-surface .legacy-mission-button:nth-child(4n+2) .legacy-mission-thumb.is-number-only { background: linear-gradient(145deg,#46c4d8,#328ccf); }
.desktop-surface .legacy-mission-button:nth-child(4n+3) .legacy-mission-thumb.is-number-only { background: linear-gradient(145deg,#9474ef,#6554d7); }
.desktop-surface .legacy-mission-button:nth-child(4n+4) .legacy-mission-thumb.is-number-only { background: linear-gradient(145deg,#ed79aa,#d44f91); }
.desktop-surface .legacy-mission-thumb.is-number-only::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 19px;
}
.desktop-surface .legacy-mission-thumb.is-number-only::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 8px;
  right: 9px;
  top: 9px;
  border-radius: 99px;
  background: rgba(255,255,255,.26);
  transform: rotate(-18deg);
}
.desktop-surface .legacy-mission-thumb .legacy-mission-index {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: 27px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.04em;
  text-shadow: 0 3px 10px rgba(17,43,111,.25);
}
.desktop-surface .legacy-mission-thumb.is-number-only b {
  left: 50%;
  bottom: -7px;
  min-width: 55px;
  padding: 4px 7px;
  border: 2px solid #fff;
  border-radius: 99px;
  color: #3763bb;
  background: #eef5ff;
  box-shadow: 0 5px 12px rgba(38,69,128,.14);
  font-size: 7px;
  letter-spacing: .12em;
  transform: translateX(-50%);
}
.desktop-surface .legacy-mission-copy { gap: 7px; }
.desktop-surface .legacy-mission-button small {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--class-accent);
  font-size: 8px;
  letter-spacing: .13em;
}
.desktop-surface .legacy-mission-button small::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--class-accent);
  box-shadow: 0 0 0 4px rgba(var(--class-accent-rgb),.1);
}
.desktop-surface .legacy-mission-button strong { font-size: clamp(17px,1.25vw,21px); }
.desktop-surface .legacy-mission-button:hover .legacy-mission-thumb.is-number-only,
.desktop-surface .legacy-mission-button:focus-visible .legacy-mission-thumb.is-number-only {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 15px 28px rgba(54,93,193,.28);
}

@media (max-width: 720px) {
  .desktop-surface .legacy-mission-button { grid-template-columns: 68px minmax(0,1fr) 36px !important; gap: 12px; }
  .desktop-surface .legacy-mission-thumb.is-number-only { width: 68px; height: 68px; border-radius: 21px; }
  .desktop-surface .legacy-mission-thumb .legacy-mission-index { font-size: 23px; }
}

/* 1.0.55 desktop scoreboard polish — bundled font, clearer score controls, opaque result stage. */
@font-face {
  font-family: "CREKA Jua";
  src: url("assets/fonts/Jua-Regular.ttf") format("truetype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

.desktop-surface .legacy-layout.view-score #view-score,
.desktop-surface .game-result-dialog {
  font-family: "CREKA Jua", "Arial Rounded MT Bold", "Malgun Gothic", sans-serif;
}
.desktop-surface .legacy-layout.view-score #view-score {
  padding: 12px 24px 20px;
}
.desktop-surface .legacy-layout.view-score .score-heading {
  grid-template-columns: minmax(360px, .8fr) minmax(760px, 1.7fr);
  gap: 22px;
  min-height: 158px;
  padding: 0 16px 10px;
}
.desktop-surface .score-title-lockup img {
  width: min(370px, 100%);
  height: 108px;
}
.desktop-surface .score-title-lockup p {
  margin-top: -8px;
  padding: 9px 22px 7px;
  border-width: 4px;
  color: #1557ae;
  box-shadow: 0 7px 0 rgba(34,113,208,.16), 0 12px 24px rgba(20,91,179,.12);
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 400;
  letter-spacing: -.02em;
}
.desktop-surface .legacy-layout.view-score .score-actions {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 9px;
  padding: 15px 18px 18px;
  border: 4px solid rgba(255,255,255,.86);
  border-radius: 36px;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(230,247,255,.9));
  box-shadow: 0 8px 0 rgba(45,124,211,.2), 0 18px 34px rgba(21,89,170,.13);
}
.desktop-surface .score-game-button {
  min-height: 56px;
  padding: 0 11px;
  border-radius: 18px;
  font-family: inherit;
  font-size: clamp(13px, .92vw, 17px);
  font-weight: 400;
  letter-spacing: -.02em;
}
.desktop-surface .score-board-shell {
  padding: 13px;
  border-width: 6px;
  border-radius: 38px;
  background: linear-gradient(180deg, rgba(72,142,255,.96), rgba(42,106,231,.97));
  box-shadow: 0 0 0 7px rgba(39,103,226,.46), inset 0 0 34px rgba(255,255,255,.42), 0 20px 42px rgba(6,76,171,.28);
}
.desktop-surface .legacy-layout.view-score .score-grid {
  gap: clamp(8px, .85vh, 13px);
}
.desktop-surface .score-grid .team-card {
  grid-template-columns: minmax(225px, 1.08fr) repeat(3, minmax(190px, 1fr)) minmax(200px, .8fr);
  gap: 8px;
  padding: 7px 10px;
  border-width: 4px;
  border-radius: 30px;
  background: linear-gradient(115deg, #fff 0%, #f6fcff 50%, #e9f8ff 100%);
  box-shadow: inset 0 0 22px rgba(105,202,255,.2), 0 6px 0 rgba(16,86,207,.43), 0 12px 24px rgba(23,87,170,.14);
}
.desktop-surface .score-team-identity {
  grid-template-columns: clamp(58px, 5.6vw, 86px) 46px minmax(92px, 1fr);
  gap: 8px;
  margin: 4px 0;
  padding: 8px 12px 8px 7px;
  border: 2px solid #cbe9ff;
  border-radius: 23px;
  background: linear-gradient(145deg, #eefaff, #fff);
  box-shadow: inset 0 2px 0 #fff, 0 5px 11px rgba(56,139,208,.12);
}
.desktop-surface .score-team-copy input {
  font-family: inherit;
  font-size: clamp(18px, 1.35vw, 25px);
  font-weight: 400;
}
.desktop-surface .score-rank {
  padding: 5px 10px 3px;
  font-size: 13px;
  font-weight: 400;
}
.desktop-surface .score-category {
  grid-template-rows: auto minmax(30px, 1fr) auto;
  gap: 4px;
  margin: 4px 0;
  padding: 8px 9px 9px;
  border: 2px solid #cfe6ff;
  border-radius: 23px;
  background: linear-gradient(180deg, #fafdff, #e9f6ff);
  box-shadow: inset 0 2px 0 #fff, 0 5px 11px rgba(56,139,208,.12);
}
.desktop-surface .score-category-1 { border-color: #ded8ff; background: linear-gradient(180deg, #fcfbff, #f0edff); }
.desktop-surface .score-category-2 { border-color: #ffd6e5; background: linear-gradient(180deg, #fffafd, #fff0f6); }
.desktop-surface .score-category-heading {
  align-self: start;
  gap: 7px;
  color: #0751aa;
  font-size: clamp(14px, 1vw, 18px);
  font-weight: 400;
}
.desktop-surface .score-category-heading > span { display: grid; gap: 1px; line-height: 1; }
.desktop-surface .score-category-heading b { font-weight: 400; }
.desktop-surface .score-category-heading small {
  color: #7692b7;
  font-family: Pretendard, "Malgun Gothic", sans-serif;
  font-size: 9px;
  font-weight: 800;
}
.desktop-surface .score-category-heading img { width: 28px; height: 28px; }
.desktop-surface .score-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
}
.desktop-surface .score-icons i { font-size: clamp(17px, 1.35vw, 25px); }
.desktop-surface .score-icons i.score-icon-spark {
  position: relative;
  z-index: 1;
  display: inline-block;
  animation: score-icon-pop .36s cubic-bezier(.2,.8,.3,1.2) both;
}
.desktop-surface .score-icons i.score-icon-spark::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.2em;
  height: 2.2em;
  border: 2px dotted rgba(255,202,28,.95);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  animation: score-icon-glint .48s ease-out both;
}
.desktop-surface .score-category-controls {
  display: grid;
  grid-template-columns: 48px minmax(56px, 1fr) 48px;
  gap: 6px;
  width: 100%;
  padding: 5px;
  border: 2px solid rgba(150,195,239,.55);
  border-radius: 18px;
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 2px 4px rgba(68,129,194,.08);
}
.desktop-surface .score-category-controls .score-step-button {
  width: 48px;
  height: 45px;
  display: grid;
  place-content: center;
  gap: 0;
  padding: 0;
  border: 2px solid #9fcdf7;
  border-radius: 13px;
  color: #145fb4;
  background: linear-gradient(180deg, #fff, #e8f5ff);
  box-shadow: 0 4px 0 #8ac2f2;
  font-family: inherit;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.desktop-surface .score-category-controls .score-step-button b {
  font-size: 22px;
  font-weight: 400;
  line-height: .78;
}
.desktop-surface .score-category-controls .score-step-button small {
  font-family: Pretendard, "Malgun Gothic", sans-serif;
  font-size: 8px;
  font-weight: 900;
}
.desktop-surface .score-category-controls .score-step-plus {
  color: #fff;
  border-color: #3f96ee;
  background: linear-gradient(180deg, #54b9ff, #2788e7);
  box-shadow: 0 4px 0 #176bc3;
}
.desktop-surface .score-category-controls .score-step-button:hover { color: #fff; background: linear-gradient(180deg, #5abaff, #2686e5); filter: saturate(1.12); transform: translateY(-2px); }
.desktop-surface .score-category-controls .score-step-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #176bc3; }
.desktop-surface .score-current {
  min-width: 0;
  display: grid;
  place-content: center;
  gap: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, #183f9d, #286bd6);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), 0 3px 7px rgba(21,66,154,.22);
  text-align: center;
}
.desktop-surface .score-current small {
  color: #cce4ff;
  font-family: Pretendard, "Malgun Gothic", sans-serif;
  font-size: 7px;
  font-weight: 900;
}
.desktop-surface .score-category-controls .score-current strong {
  min-width: 0;
  color: #fff;
  font-family: "CREKA Jua", sans-serif;
  font-size: clamp(26px, 1.9vw, 35px);
  font-weight: 400;
  line-height: .95;
}
.desktop-surface .score-total {
  margin: 4px 0 4px 2px;
  padding: 9px 16px;
  border-width: 4px;
  border-radius: 25px;
}
.desktop-surface .score-total strong,
.desktop-surface .score-total span { font-family: inherit; font-weight: 400; }

/* Result presentation is a complete stage so the previous round never shows through. */
.desktop-surface .game-result-dialog[open] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 30px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,244,106,.95) 0 7px, transparent 8px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.9) 0 6px, transparent 7px),
    radial-gradient(circle at 20% 82%, rgba(98,239,255,.9) 0 8px, transparent 9px),
    radial-gradient(circle at 82% 78%, rgba(255,130,217,.9) 0 7px, transparent 8px),
    linear-gradient(145deg, #224fc3 0%, #425fd8 40%, #713fd2 72%, #9a45cc 100%);
}
.desktop-surface .game-result-dialog::backdrop {
  background: #274bb9;
  backdrop-filter: none;
}
.desktop-surface .game-result-dialog[open]::before,
.desktop-surface .game-result-dialog[open]::after {
  position: fixed;
  z-index: -1;
  width: 46vw;
  height: 46vw;
  border: 5vw solid rgba(255,255,255,.06);
  border-radius: 50%;
  content: "";
}
.desktop-surface .game-result-dialog[open]::before { left: -20vw; top: -23vw; }
.desktop-surface .game-result-dialog[open]::after { right: -21vw; bottom: -25vw; }
.desktop-surface .game-result-dialog form {
  width: min(620px, calc(100vw - 80px));
  max-height: calc(100vh - 70px);
  display: grid;
  justify-items: center;
  margin: 0;
  padding: 38px 50px 42px;
  border: 7px solid #fff;
  border-radius: 52px;
  background: linear-gradient(145deg, #59d9ff 0%, #6376ff 48%, #a046f5 100%);
  box-shadow: 0 0 0 10px rgba(118,166,255,.92), 0 30px 90px rgba(11,20,93,.52), inset 0 3px 0 rgba(255,255,255,.4);
  text-align: center;
}
.desktop-surface .game-result-dialog .result-crown { width: 178px; height: 120px; }
.desktop-surface .game-result-dialog .mini-label { font-family: Pretendard, sans-serif; font-size: 13px; font-weight: 900; letter-spacing: .17em; }
.desktop-surface .game-result-dialog h2 { margin: 12px 0 8px; font-size: clamp(43px, 4.2vw, 66px); font-weight: 400; }
.desktop-surface .game-result-dialog p { margin: 4px 0 12px; font-family: inherit; font-size: clamp(82px, 8vw, 122px); font-weight: 400; }
.desktop-surface .game-result-dialog .result-message { margin-bottom: 28px; font-size: 25px; font-weight: 400; }
.desktop-surface .game-result-dialog .primary-button {
  width: min(430px, 100%);
  min-height: 62px;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 20px;
  background: linear-gradient(135deg, #1884f4, #35c9dd);
  box-shadow: 0 7px 0 #1163c2, 0 14px 28px rgba(11,54,142,.28);
  font-family: inherit;
  font-size: 22px;
  font-weight: 400;
}

@media (max-width: 1500px) {
  .desktop-surface .legacy-layout.view-score .score-heading { grid-template-columns: minmax(310px,.72fr) minmax(680px,1.58fr); min-height: 145px; }
  .desktop-surface .score-title-lockup img { height: 94px; }
  .desktop-surface .legacy-layout.view-score .score-actions { gap: 6px; padding: 12px 13px 15px; }
  .desktop-surface .score-game-button { min-height: 48px; padding-inline: 7px; font-size: 13px; }
  .desktop-surface .score-grid .team-card { grid-template-columns: minmax(205px,1.05fr) repeat(3,minmax(165px,1fr)) minmax(180px,.78fr); gap: 6px; }
  .desktop-surface .score-category-controls { grid-template-columns: 42px minmax(50px,1fr) 42px; gap: 4px; padding: 4px; }
  .desktop-surface .score-category-controls .score-step-button { width: 42px; height: 40px; }
}

@media (max-height: 860px) {
  .desktop-surface .legacy-layout.view-score .score-heading { min-height: 126px; }
  .desktop-surface .score-title-lockup img { height: 80px; }
  .desktop-surface .score-title-lockup p { padding-block: 6px 4px; }
  .desktop-surface .score-board-shell { padding: 9px; }
  .desktop-surface .score-grid .team-card { padding-block: 4px; }
  .desktop-surface .score-category { padding-block: 5px 6px; }
  .desktop-surface .score-category-controls .score-step-button { height: 36px; }
}

.desktop-surface .score-grid.team-count-7 .score-category,
.desktop-surface .score-grid.team-count-8 .score-category {
  grid-template: 1fr / minmax(74px, auto) minmax(58px, 1fr) minmax(128px, auto);
  gap: 4px;
  margin-block: 2px;
  padding: 3px 5px;
  border-radius: 14px;
}
.desktop-surface .score-grid.team-count-7 .score-category-heading > span,
.desktop-surface .score-grid.team-count-8 .score-category-heading > span { display: block; }
.desktop-surface .score-grid.team-count-7 .score-category-heading small,
.desktop-surface .score-grid.team-count-8 .score-category-heading small { display: none; }
.desktop-surface .score-grid.team-count-7 .score-icons,
.desktop-surface .score-grid.team-count-8 .score-icons { padding-inline: 2px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls,
.desktop-surface .score-grid.team-count-8 .score-category-controls {
  grid-template-columns: 31px 43px 31px;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
}
.desktop-surface .score-grid.team-count-7 .score-category-controls .score-step-button,
.desktop-surface .score-grid.team-count-8 .score-category-controls .score-step-button { width: 31px; height: 29px; border-radius: 8px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls .score-step-button b,
.desktop-surface .score-grid.team-count-8 .score-category-controls .score-step-button b { font-size: 16px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls .score-step-button small,
.desktop-surface .score-grid.team-count-8 .score-category-controls .score-step-button small,
.desktop-surface .score-grid.team-count-7 .score-current small,
.desktop-surface .score-grid.team-count-8 .score-current small { display: none; }
.desktop-surface .score-grid.team-count-7 .score-category-controls .score-current strong,
.desktop-surface .score-grid.team-count-8 .score-category-controls .score-current strong { font-size: 22px; }

@media (prefers-reduced-motion: reduce) {
  .desktop-surface .score-category-controls .score-step-button { transition: none; }
  .desktop-surface .score-icons i.score-icon-spark,
  .desktop-surface .score-icons i.score-icon-spark::after { animation: none !important; }
}

/* Desktop content download progress and details */
.desktop-surface #bulkDownloadButton {
  position: relative;
  min-width: 250px;
  min-height: 62px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 9px 22px 12px;
  overflow: hidden;
  line-height: 1.05;
}
.desktop-surface #bulkDownloadButton > span,
.desktop-surface #bulkDownloadButton > small {
  position: relative;
  z-index: 1;
}
.desktop-surface #bulkDownloadButton > span { font-size: 15px; font-weight: 900; }
.desktop-surface #bulkDownloadButton > small { font-size: 11px; font-weight: 700; opacity: .82; }
.desktop-surface .bulk-download-button-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 6px;
  overflow: hidden;
  background: rgba(255,255,255,.23);
}
.desktop-surface .bulk-download-button-track b {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 6px 6px 0;
  background: rgba(255,255,255,.96);
  box-shadow: 0 0 12px rgba(255,255,255,.72);
  transition: width .18s ease;
}
.desktop-surface #bulkDownloadButton[aria-busy="true"]::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.22) 48%, transparent 66%);
  content: "";
  transform: translateX(-110%);
  animation: download-button-shine 1.8s linear infinite;
}
@keyframes download-button-shine { to { transform: translateX(110%); } }

.download-status-dialog { width: min(760px, calc(100vw - 36px)); }
.download-status-dialog form {
  max-height: min(820px, calc(100vh - 40px));
  display: grid;
  gap: 17px;
  overflow: hidden;
}
.download-status-hero {
  padding: 18px 20px;
  border: 1px solid #dce8f7;
  border-radius: 20px;
  background: linear-gradient(135deg, #f4f8ff, #eefaff);
}
.download-status-hero > div:first-child {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.download-status-hero small { color: #637693; font-size: 13px; font-weight: 750; }
.download-status-hero strong { color: #2d64ed; font-size: 30px; line-height: 1; }
.download-status-track {
  height: 12px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #dce7f5;
}
.download-status-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d75f3, #42c2df);
  box-shadow: 0 0 16px rgba(56,146,242,.42);
  transition: width .18s ease;
}
.download-status-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.download-status-stats > div {
  display: grid;
  gap: 5px;
  padding: 13px 15px;
  border: 1px solid #e2eaf5;
  border-radius: 16px;
  background: #f9fbfe;
}
.download-status-stats small { color: #798aa2; font-size: 11px; font-weight: 800; }
.download-status-stats strong { color: #172b4d; font-size: 22px; }
.download-status-stats .is-error strong { color: #dc4764; }
.download-file-list {
  min-height: 130px;
  max-height: min(370px, 42vh);
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.download-file-list > p {
  margin: 0;
  padding: 30px 18px;
  border: 1px dashed #cfdbea;
  border-radius: 16px;
  color: #7c8da5;
  text-align: center;
}
.download-file-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid #e2eaf5;
  border-radius: 15px;
  background: #fbfcff;
}
.download-file-row > div { min-width: 0; display: grid; gap: 3px; }
.download-file-row small { color: #7b8da6; font-size: 11px; font-weight: 750; }
.download-file-row strong {
  overflow: hidden;
  color: #233755;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.download-file-row em { color: #d24d66; font-size: 11px; font-style: normal; }
.download-file-row > span {
  min-width: 70px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #edf2f9;
  color: #71839c;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}
.download-file-row.is-downloading { border-color: #9bc5ff; background: #f3f8ff; }
.download-file-row.is-downloading > span { background: #dceaff; color: #2761da; }
.download-file-row.is-cached > span,
.download-file-row.is-ready > span { background: #ddf7eb; color: #18865a; }
.download-file-row.is-failed { border-color: #ffd2da; background: #fff7f8; }
.download-file-row.is-failed > span { background: #ffe5ea; color: #c83e5b; }
.download-status-actions { display: grid; grid-template-columns: 1.3fr .7fr; gap: 10px; }
.download-status-actions button { min-height: 52px; }
.web-surface #downloadStatusDialog { display: none; }

@media (max-width: 680px) {
  .download-status-dialog form { gap: 12px; }
  .download-status-stats { grid-template-columns: repeat(2, 1fr); }
  .download-file-row { gap: 8px; padding: 10px 11px; }
  .download-file-row > span { min-width: 58px; }
  .download-status-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-surface #bulkDownloadButton[aria-busy="true"]::after { animation: none; }
  .desktop-surface .bulk-download-button-track b,
  .download-status-track i { transition: none; }
}

/* 1.0.64 shared large-type scoreboard — identical in Web and Desktop. */
.desktop-surface .legacy-layout.view-score #view-score {
  padding: 14px 25px 22px;
}
.desktop-surface .legacy-layout.view-score .score-heading {
  grid-template-columns: minmax(410px, .86fr) minmax(790px, 1.65fr);
  gap: 24px;
  min-height: 172px;
  padding: 0 18px 13px;
}
.desktop-surface .score-title-lockup img {
  width: min(430px, 100%);
  height: 118px;
}
.desktop-surface .score-title-lockup p {
  margin-top: -8px;
  padding: 10px 25px 8px;
  color: #124eaa;
  background: linear-gradient(180deg, #fff, #eefaff);
  font-size: clamp(18px, 1.18vw, 23px);
  line-height: 1.2;
  text-align: center;
}
.desktop-surface .legacy-layout.view-score .score-actions {
  gap: 10px;
  padding: 16px 19px 20px;
  border-radius: 40px;
}
.desktop-surface .score-game-button {
  min-height: 61px;
  padding-inline: 10px;
  border-radius: 20px;
  font-size: clamp(15px, 1vw, 19px);
  line-height: 1.05;
}
.desktop-surface .score-board-shell {
  padding: 14px;
  border-radius: 42px;
}
.desktop-surface .legacy-layout.view-score .score-grid {
  gap: clamp(10px, 1vh, 15px);
}
.desktop-surface .score-grid .team-card {
  grid-template-columns: minmax(260px, 1.12fr) repeat(3, minmax(200px, 1fr)) minmax(230px, .82fr);
  gap: 9px;
  padding: 8px 11px;
  border-width: 5px;
  border-radius: 34px;
  box-shadow: inset 0 0 26px rgba(105,202,255,.22), 0 7px 0 rgba(16,86,207,.46), 0 15px 28px rgba(23,87,170,.16);
}
.desktop-surface .score-grid .team-card.rank-one {
  box-shadow: inset 0 0 30px rgba(255,226,74,.28), 0 7px 0 #e4a713, 0 0 26px rgba(255,232,74,.64);
}
.desktop-surface .score-team-identity {
  grid-template-columns: clamp(72px, 5.5vw, 96px) 52px minmax(118px, 1fr);
  gap: 9px;
  margin: 3px 0;
  padding: 9px 14px 9px 8px;
  border: 3px solid color-mix(in srgb, var(--team-color, #2eacf4) 28%, #d9f2ff);
  border-radius: 27px;
  border-right: 3px solid color-mix(in srgb, var(--team-color, #2eacf4) 38%, #c8e1ff);
  background: linear-gradient(145deg, color-mix(in srgb, var(--team-color, #2eacf4) 9%, #f2fbff), #fff 72%);
}
.desktop-surface .score-avatar-wrap {
  border-width: 6px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--team-dark, #168fd2) 78%, #0c5a9c), inset 0 0 14px rgba(65,190,246,.38);
}
.desktop-surface .score-team-badge {
  width: 52px;
  height: 62px;
  border-radius: 19px;
  font-size: 29px;
}
.desktop-surface .score-team-copy {
  display: grid;
  align-content: center;
  gap: 5px;
}
.desktop-surface .score-team-copy input {
  min-height: 37px;
  padding: 2px;
  color: #102a73;
  font-size: clamp(25px, 1.62vw, 33px);
  line-height: 1.05;
}
.desktop-surface .score-team-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.desktop-surface .score-rank {
  margin: 0;
  padding: 6px 11px 4px;
  color: #194f9d;
  font-size: clamp(14px, .88vw, 17px);
}
.desktop-surface .score-rank img { width: 25px; height: 25px; }
.desktop-surface .score-team-motto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--team-dark, #166fd5) 85%, #132b57);
  font-family: Pretendard, "Malgun Gothic", sans-serif;
  font-size: clamp(12px, .74vw, 15px);
  font-weight: 900;
  white-space: nowrap;
}
.desktop-surface .score-team-motto::before { color: #ffba16; content: "★"; }
.desktop-surface .score-category {
  grid-template-rows: auto minmax(34px, 1fr) auto;
  gap: 5px;
  margin: 3px 0;
  padding: 9px 10px 10px;
  border-width: 3px;
  border-radius: 27px;
}
.desktop-surface .score-category-0 {
  border-color: #b9dcff;
  background: linear-gradient(180deg, #fafdff, #e4f4ff);
}
.desktop-surface .score-category-1 {
  border-color: #d3c8ff;
  background: linear-gradient(180deg, #fdfbff, #ebe7ff);
}
.desktop-surface .score-category-2 {
  border-color: #ffc5dc;
  background: linear-gradient(180deg, #fffafd, #ffe9f2);
}
.desktop-surface .score-category-heading {
  gap: 8px;
  font-size: clamp(19px, 1.28vw, 25px);
  line-height: 1;
}
.desktop-surface .score-category-heading small {
  margin-top: 3px;
  color: #58789f;
  font-size: clamp(10px, .67vw, 13px);
}
.desktop-surface .score-category-heading img { width: 34px; height: 34px; }
.desktop-surface .score-icons {
  min-height: 37px;
  gap: 3px;
  padding: 3px 9px;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: inset 0 2px 3px rgba(59,104,165,.07);
}
.desktop-surface .score-icons i { font-size: clamp(23px, 1.55vw, 31px); }
.desktop-surface .score-category-controls {
  grid-template-columns: 58px minmax(66px, 1fr) 58px;
  gap: 7px;
  padding: 6px;
  border-width: 3px;
  border-radius: 21px;
}
.desktop-surface .score-category-controls .score-step-button {
  width: 58px;
  height: 54px;
  border-width: 3px;
  border-radius: 16px;
  box-shadow: 0 5px 0 #83bced;
}
.desktop-surface .score-category-controls .score-step-button b {
  font-size: 30px;
  line-height: .72;
}
.desktop-surface .score-category-controls .score-step-button small {
  font-size: 11px;
  line-height: 1;
}
.desktop-surface .score-category-controls .score-step-plus { box-shadow: 0 5px 0 #176bc3; }
.desktop-surface .score-current {
  min-height: 54px;
  border-radius: 15px;
}
.desktop-surface .score-current small {
  font-size: 10px;
  line-height: 1;
}
.desktop-surface .score-category-controls .score-current strong {
  font-size: clamp(37px, 2.35vw, 48px);
  line-height: .88;
}
.desktop-surface .score-total {
  margin: 3px 0 3px 1px;
  padding: 10px 18px;
  border-width: 5px;
  border-radius: 30px;
}
.desktop-surface .score-total strong { font-size: clamp(58px, 4.6vw, 84px); }
.desktop-surface .score-total span {
  padding-bottom: 9px;
  font-size: clamp(16px, 1.25vw, 23px);
}

.desktop-surface .game-result-dialog .result-message {
  margin-bottom: 8px;
  font-size: clamp(26px, 2vw, 34px);
  line-height: 1.2;
}
.desktop-surface .game-result-dialog .result-belonging {
  position: relative;
  z-index: 1;
  margin-bottom: 25px;
  padding: 9px 20px 7px;
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: #fff8a7;
  background: rgba(38,62,184,.28);
  font-size: clamp(18px, 1.35vw, 24px);
  text-shadow: 0 2px 0 rgba(30,45,139,.55);
}
.desktop-surface .game-result-dialog form { width: min(690px, calc(100vw - 80px)); }
.desktop-surface .game-result-dialog h2 { font-size: clamp(52px, 4.8vw, 76px); }
.desktop-surface .game-result-dialog p { font-size: clamp(94px, 8.5vw, 132px); }

@media (max-width: 1500px) {
  .desktop-surface .legacy-layout.view-score .score-heading {
    grid-template-columns: minmax(330px, .72fr) minmax(700px, 1.58fr);
    min-height: 148px;
  }
  .desktop-surface .score-title-lockup img { height: 96px; }
  .desktop-surface .score-title-lockup p { padding-inline: 17px; font-size: 16px; }
  .desktop-surface .legacy-layout.view-score .score-actions { gap: 6px; padding: 12px 13px 15px; }
  .desktop-surface .score-game-button { min-height: 51px; padding-inline: 6px; font-size: 14px; }
  .desktop-surface .score-grid .team-card {
    grid-template-columns: minmax(225px, 1.05fr) repeat(3, minmax(170px, 1fr)) minmax(195px, .78fr);
    gap: 6px;
  }
  .desktop-surface .score-team-identity { grid-template-columns: 66px 45px minmax(102px, 1fr); padding-inline: 6px 8px; }
  .desktop-surface .score-team-badge { width: 45px; height: 53px; font-size: 25px; }
  .desktop-surface .score-team-copy input { font-size: 24px; }
  .desktop-surface .score-team-motto { font-size: 11px; }
  .desktop-surface .score-rank { padding-inline: 8px; font-size: 13px; }
  .desktop-surface .score-category { padding-inline: 7px; }
  .desktop-surface .score-category-heading { font-size: 18px; }
  .desktop-surface .score-category-heading img { width: 29px; height: 29px; }
  .desktop-surface .score-icons i { font-size: 22px; }
  .desktop-surface .score-category-controls { grid-template-columns: 49px minmax(55px, 1fr) 49px; gap: 4px; padding: 4px; }
  .desktop-surface .score-category-controls .score-step-button { width: 49px; height: 47px; }
  .desktop-surface .score-category-controls .score-step-button b { font-size: 25px; }
  .desktop-surface .score-category-controls .score-current strong { font-size: 36px; }
  .desktop-surface .score-current { min-height: 47px; }
  .desktop-surface .score-total strong { font-size: 60px; }
  .desktop-surface .score-total span { font-size: 16px; }
}

@media (max-height: 860px) {
  .desktop-surface .legacy-layout.view-score #view-score { padding-top: 8px; padding-bottom: 12px; }
  .desktop-surface .legacy-layout.view-score .score-heading { min-height: 120px; padding-bottom: 5px; }
  .desktop-surface .score-title-lockup img { height: 78px; }
  .desktop-surface .score-title-lockup p { padding-block: 6px 4px; font-size: 15px; }
  .desktop-surface .score-board-shell { padding: 10px; }
  .desktop-surface .legacy-layout.view-score .score-grid { gap: 7px; }
  .desktop-surface .score-grid .team-card { padding-block: 4px; border-radius: 27px; }
  .desktop-surface .score-team-identity,
  .desktop-surface .score-category { margin-block: 1px; padding-block: 5px; border-radius: 21px; }
  .desktop-surface .score-team-copy input { min-height: 30px; }
  .desktop-surface .score-category { grid-template-rows: auto minmax(25px, 1fr) auto; gap: 2px; }
  .desktop-surface .score-icons { min-height: 26px; padding-block: 1px; }
  .desktop-surface .score-category-controls .score-step-button { height: 43px; }
  .desktop-surface .score-current { min-height: 43px; }
  .desktop-surface .score-total { padding-block: 5px; }
  .desktop-surface .game-result-dialog form { padding-block: 24px 28px; }
  .desktop-surface .game-result-dialog .result-crown { width: 135px; height: 90px; }
  .desktop-surface .game-result-dialog h2 { margin-block: 6px; font-size: 48px; }
  .desktop-surface .game-result-dialog p { margin-block: 0 7px; font-size: 80px; }
  .desktop-surface .game-result-dialog .result-message { font-size: 25px; }
  .desktop-surface .game-result-dialog .result-belonging { margin-bottom: 15px; font-size: 18px; }
}

/* Classroom displays with a short viewport keep every score control inside its row. */
@media (max-height: 720px) {
  .desktop-surface .legacy-layout.view-score #view-score { padding: 4px 18px 8px; }
  .desktop-surface .legacy-layout.view-score .score-heading {
    min-height: 104px;
    gap: 14px;
    padding: 0 8px 3px;
  }
  .desktop-surface .score-title-lockup img { height: 66px; }
  .desktop-surface .score-title-lockup p {
    margin-top: -4px;
    padding: 4px 14px 3px;
    font-size: 14px;
  }
  .desktop-surface .legacy-layout.view-score .score-actions {
    gap: 4px;
    padding: 8px 9px 11px;
    border-radius: 32px;
  }
  .desktop-surface .score-game-button {
    min-height: 44px;
    padding-inline: 5px;
    border-radius: 15px;
    font-size: 12px;
  }
  .desktop-surface .score-board-shell { padding: 7px; border-radius: 31px; }
  .desktop-surface .legacy-layout.view-score .score-grid { gap: 4px; }
  .desktop-surface .score-grid .team-card {
    gap: 4px;
    padding: 2px 7px;
    overflow: hidden;
    border-width: 4px;
    border-radius: 22px;
    box-shadow: inset 0 0 18px rgba(105,202,255,.2), 0 4px 0 rgba(16,86,207,.46), 0 8px 18px rgba(23,87,170,.14);
  }
  .desktop-surface .score-grid .team-card.rank-one {
    box-shadow: inset 0 0 20px rgba(255,226,74,.28), 0 4px 0 #e4a713, 0 0 18px rgba(255,232,74,.5);
  }
  .desktop-surface .score-team-identity {
    grid-template-columns: 58px 40px minmax(92px, 1fr);
    gap: 5px;
    margin: 0;
    padding: 3px 5px 3px 4px;
    border-width: 2px;
    border-right-width: 2px;
    border-radius: 18px;
  }
  .desktop-surface .score-avatar-wrap {
    border-width: 4px;
    box-shadow: 0 4px 0 color-mix(in srgb, var(--team-dark, #168fd2) 78%, #0c5a9c), inset 0 0 9px rgba(65,190,246,.32);
  }
  .desktop-surface .score-team-badge {
    width: 40px;
    height: 45px;
    border-radius: 14px;
    font-size: 22px;
  }
  .desktop-surface .score-team-copy { gap: 2px; }
  .desktop-surface .score-team-copy input { min-height: 24px; font-size: 21px; }
  .desktop-surface .score-team-meta { gap: 3px; }
  .desktop-surface .score-rank { padding: 3px 7px 2px; font-size: 11px; }
  .desktop-surface .score-rank img { width: 18px; height: 18px; }
  .desktop-surface .score-team-motto { gap: 2px; font-size: 9px; }
  .desktop-surface .score-category {
    grid-template-rows: auto minmax(16px, 1fr) auto;
    gap: 1px;
    min-height: 0;
    margin: 0;
    padding: 2px 4px;
    overflow: hidden;
    border-width: 2px;
    border-radius: 18px;
  }
  .desktop-surface .score-category-heading { gap: 4px; font-size: 16px; }
  .desktop-surface .score-category-heading small { margin-top: 1px; font-size: 9px; }
  .desktop-surface .score-category-heading img { width: 22px; height: 22px; }
  .desktop-surface .score-icons {
    min-height: 16px;
    gap: 1px;
    padding: 0 3px;
    border-width: 1px;
  }
  .desktop-surface .score-icons i { font-size: 17px; }
  .desktop-surface .score-category-controls {
    grid-template-columns: 34px minmax(46px, 1fr) 34px;
    gap: 2px;
    min-height: 0;
    padding: 2px;
    border-width: 2px;
    border-radius: 13px;
  }
  .desktop-surface .score-category-controls .score-step-button {
    width: 34px;
    height: 30px;
    border-width: 2px;
    border-radius: 9px;
    box-shadow: 0 2px 0 #83bced;
  }
  .desktop-surface .score-category-controls .score-step-plus { box-shadow: 0 2px 0 #176bc3; }
  .desktop-surface .score-category-controls .score-step-button b { font-size: 20px; }
  .desktop-surface .score-category-controls .score-step-button small { font-size: 8px; }
  .desktop-surface .score-current { min-height: 30px; border-radius: 9px; }
  .desktop-surface .score-current small { font-size: 8px; }
  .desktop-surface .score-category-controls .score-current strong { font-size: 30px; }
  .desktop-surface .score-total {
    margin: 0;
    padding: 4px 8px;
    border-width: 4px;
    border-radius: 22px;
  }
  .desktop-surface .score-total strong { font-size: 52px; }
  .desktop-surface .score-total span { padding-bottom: 5px; font-size: 14px; }
}

/* Seven or eight teams retain the same row layout but use a compact, still-readable scale. */
.desktop-surface .score-grid.team-count-7 .score-team-identity,
.desktop-surface .score-grid.team-count-8 .score-team-identity {
  grid-template-columns: 56px 40px minmax(96px, 1fr);
  gap: 5px;
}
.desktop-surface .score-grid.team-count-7 .score-team-copy input,
.desktop-surface .score-grid.team-count-8 .score-team-copy input { min-height: 24px; font-size: 19px; }
.desktop-surface .score-grid.team-count-7 .score-team-motto,
.desktop-surface .score-grid.team-count-8 .score-team-motto { display: none; }
.desktop-surface .score-grid.team-count-7 .score-rank,
.desktop-surface .score-grid.team-count-8 .score-rank { font-size: 11px; }
.desktop-surface .score-grid.team-count-7 .score-category,
.desktop-surface .score-grid.team-count-8 .score-category {
  grid-template: 1fr / minmax(84px, auto) minmax(64px, 1fr) minmax(134px, auto);
  padding-inline: 6px;
}
.desktop-surface .score-grid.team-count-7 .score-category-heading,
.desktop-surface .score-grid.team-count-8 .score-category-heading { font-size: 14px; }
.desktop-surface .score-grid.team-count-7 .score-category-heading img,
.desktop-surface .score-grid.team-count-8 .score-category-heading img { width: 23px; height: 23px; }
.desktop-surface .score-grid.team-count-7 .score-icons i,
.desktop-surface .score-grid.team-count-8 .score-icons i { font-size: 17px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls,
.desktop-surface .score-grid.team-count-8 .score-category-controls { grid-template-columns: 34px 48px 34px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls .score-step-button,
.desktop-surface .score-grid.team-count-8 .score-category-controls .score-step-button { width: 34px; height: 31px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls .score-step-button b,
.desktop-surface .score-grid.team-count-8 .score-category-controls .score-step-button b { font-size: 19px; }
.desktop-surface .score-grid.team-count-7 .score-category-controls .score-current strong,
.desktop-surface .score-grid.team-count-8 .score-category-controls .score-current strong { font-size: 25px; }
.desktop-surface .score-grid.team-count-7 .score-total strong,
.desktop-surface .score-grid.team-count-8 .score-total strong { font-size: 45px; }
.desktop-surface .score-grid.team-count-7 .score-total span,
.desktop-surface .score-grid.team-count-8 .score-total span { font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .desktop-surface .score-icons i.score-icon-spark,
  .desktop-surface .score-icons i.score-icon-spark::after { animation: none !important; }
}

/* 1.0.68 legacy Unity scoreboard restoration — shared by Web and Desktop. */
.desktop-surface .legacy-layout.view-score #view-score.score-classic {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-rows: clamp(118px, 18vh, 205px) minmax(0, 1fr);
  gap: 0;
  padding: 10px 18px 18px;
  overflow: hidden;
  background: #65d4ef url("assets/scoreboard-legacy/background.png") center / cover no-repeat;
}
.desktop-surface .legacy-layout.view-score #view-score.score-classic::before,
.desktop-surface .legacy-layout.view-score #view-score.score-classic::after { display: none; }
.desktop-surface .score-classic-heading {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0;
  padding: 3px 0 7px;
}
.desktop-surface .score-classic-title {
  width: min(69vw, 930px);
  height: min(14vh, 160px);
  display: block;
  overflow: visible;
  filter: drop-shadow(0 9px 0 rgba(38, 121, 155, .34));
}
.desktop-surface .score-classic-title text {
  font-family: "CREKA Jua", "Arial Rounded MT Bold", "Malgun Gothic", sans-serif;
  font-size: 96px;
  font-weight: 400;
  letter-spacing: 2px;
}
.desktop-surface .score-classic-heading p {
  display: none;
}
.desktop-surface .score-classic-board {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(145px, 13.6vw, 230px);
  gap: clamp(12px, 1.5vw, 26px);
  padding: clamp(12px, 1.2vw, 22px);
  overflow: hidden;
  border: clamp(4px, .38vw, 7px) solid white;
  border-radius: clamp(24px, 2.4vw, 46px);
  background: rgba(94, 214, 237, .88);
  box-shadow: inset 0 0 0 3px rgba(23, 156, 207, .42), 0 9px 0 rgba(15, 138, 191, .28);
}
.desktop-surface .score-classic-grid {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-content: stretch;
  gap: clamp(9px, 1.1vh, 15px);
  overflow: hidden;
}
.desktop-surface .score-classic-grid.team-count-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 8px; }
.desktop-surface .score-classic-grid.team-count-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 6px; }
.desktop-surface .score-classic-grid.team-count-7 { grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 4px; }
.desktop-surface .score-classic-grid.team-count-8 { grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 3px; }
.desktop-surface .score-classic-card,
.desktop-surface .score-classic-grid .team-card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(176px, .95fr) minmax(255px, 2.22fr) minmax(118px, .96fr) minmax(118px, .96fr) minmax(118px, .9fr);
  align-items: center;
  gap: clamp(5px, .65vw, 12px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: none;
}
.desktop-surface .score-classic-grid .team-card.rank-one { border: 0; box-shadow: none; }
.desktop-surface .score-classic-grid .score-team-identity {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: 78%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.desktop-surface .score-classic-grid .score-avatar-wrap {
  position: relative;
  z-index: 2;
  width: auto;
  height: min(100%, 86px);
  aspect-ratio: 1;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}
.desktop-surface .score-classic-grid .score-avatar-wrap img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.desktop-surface .score-classic-grid .score-team-copy {
  box-sizing: border-box;
  min-width: 0;
  height: 68%;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  gap: 0;
  margin-left: -21px;
  padding: 3px 12px 3px 31px;
  border-radius: 0 999px 999px 0;
  background: rgba(255, 255, 255, .97);
  box-shadow: inset 0 0 0 2px rgba(45, 178, 219, .12);
}
.desktop-surface .score-classic-grid .score-team-copy input {
  min-width: 0;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  color: #16a9da;
  background: transparent;
  font-family: "Arial Rounded MT Bold", "Malgun Gothic", sans-serif;
  font-size: clamp(16px, 1.35vw, 24px);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desktop-surface .score-classic-grid .score-team-meta { display: flex; justify-content: center; }
.desktop-surface .score-classic-grid .score-rank {
  margin: 0;
  padding: 0;
  color: #79bfd7;
  background: transparent;
  font-size: clamp(8px, .7vw, 12px);
  line-height: 1;
}
.desktop-surface .score-classic-grid .score-team-badge,
.desktop-surface .score-classic-grid .score-team-motto { display: none; }
.desktop-surface .score-classic-grid.team-count-7 .score-team-identity,
.desktop-surface .score-classic-grid.team-count-8 .score-team-identity {
  grid-template-columns: auto minmax(0, 1fr);
}
.desktop-surface .score-classic-grid .score-category {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 78%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8px 14px;
  overflow: visible;
  border: 0;
  border-radius: 10px;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: none;
  cursor: pointer;
  transition: filter .12s ease, transform .12s ease;
}
.desktop-surface .score-classic-grid .score-category:hover { filter: brightness(1.08); transform: translateY(-1px); }
.desktop-surface .score-classic-grid .score-category:active { transform: translateY(1px); }
.desktop-surface .score-classic-grid .score-category-0 { background-image: url("assets/scoreboard-legacy/mission.png"); }
.desktop-surface .score-classic-grid .score-category-1 { background-image: url("assets/scoreboard-legacy/creativity.png"); }
.desktop-surface .score-classic-grid .score-category-2 { background-image: url("assets/scoreboard-legacy/teamwork.png"); }
.desktop-surface .score-classic-grid .score-category-heading { display: none; }
.desktop-surface .score-classic-grid .score-icons {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, .24vw, 5px);
  padding: 0 25px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.desktop-surface .score-classic-grid .score-icons i {
  color: rgba(255, 255, 255, .28);
  font-size: clamp(15px, 1.55vw, 28px);
  font-style: normal;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(50, 74, 178, .13);
}
.desktop-surface .score-classic-grid .score-icons-0 i.filled { color: #fff75c; text-shadow: 0 2px 0 #d6a91c; }
.desktop-surface .score-classic-grid .score-icons-1 i.filled { color: #fff4a1; text-shadow: 0 2px 0 #9a61dc; }
.desktop-surface .score-classic-grid .score-icons-2 i.filled { color: #ff8fc8; text-shadow: 0 2px 0 #b13d8f; }
.desktop-surface .score-classic-grid .score-category-controls {
  position: absolute;
  right: 5px;
  bottom: 4px;
  width: auto;
  display: grid;
  grid-template-columns: 22px 28px 22px;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 117, 194, .38);
  box-shadow: none;
  opacity: .42;
  transition: opacity .15s ease;
}
.desktop-surface .score-classic-grid .score-category:hover .score-category-controls,
.desktop-surface .score-classic-grid .score-category:focus-within .score-category-controls { opacity: 1; }
.desktop-surface .score-classic-grid .score-step-button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  color: #1188c7;
  background: #fff;
  box-shadow: none;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.desktop-surface .score-classic-grid .score-current {
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
}
.desktop-surface .score-classic-grid .score-current strong {
  color: white;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 1px 0 #1765aa;
}
.desktop-surface .score-classic-grid .score-total {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 78%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 11px;
  color: white;
  background: transparent url("assets/scoreboard-legacy/total.png") center / 100% 100% no-repeat;
  box-shadow: none;
}
.desktop-surface .score-classic-grid .score-total strong {
  color: white;
  font-family: "Arial Rounded MT Bold", "Malgun Gothic", sans-serif;
  font-size: clamp(24px, 3vw, 58px);
  line-height: 1;
  text-shadow: 0 3px 0 #6941c6;
}
.desktop-surface .score-classic-menu {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(8, minmax(0, 1fr));
  align-items: center;
  justify-items: stretch;
  gap: clamp(3px, .75vh, 10px);
  padding-block: 2px;
}
.desktop-surface .score-classic-action {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 0;
  outline: 0;
  border-radius: 999px;
  color: transparent;
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: none;
  font-size: 0;
  cursor: pointer;
  filter: drop-shadow(0 4px 0 rgba(0, 109, 167, .24));
  transition: filter .12s ease, transform .12s ease;
}
.desktop-surface .score-classic-action:hover { filter: brightness(1.1) drop-shadow(0 4px 0 rgba(0, 109, 167, .24)); transform: translateY(-1px); }
.desktop-surface .score-classic-action:active { filter: brightness(.94); transform: translateY(2px); }
.desktop-surface .score-classic-action:focus-visible { outline: 4px solid white; outline-offset: 2px; }
.desktop-surface .score-classic-action.score-result-button { background-image: url("assets/scoreboard-legacy/button-result.png"); }
.desktop-surface .score-classic-action.score-next-button { background-image: url("assets/scoreboard-legacy/button-next.png"); }
.desktop-surface .score-classic-action.score-previous-button { background-image: url("assets/scoreboard-legacy/button-previous.png"); }
.desktop-surface .score-classic-action.score-sound-button { background-image: url("assets/scoreboard-legacy/button-sound.png"); }
.desktop-surface .score-classic-action.score-team-settings-button { background-image: url("assets/scoreboard-legacy/button-team.png"); }
.desktop-surface .score-classic-action.score-help-button { background-image: url("assets/scoreboard-legacy/button-help.png"); }
.desktop-surface .score-classic-action.score-home-button { background-image: url("assets/scoreboard-legacy/button-home.png"); }
.desktop-surface .score-classic-action.score-sound-button.is-muted { filter: grayscale(.7) opacity(.65); }
.desktop-surface .score-classic-action.score-reset-button {
  color: white;
  background: linear-gradient(180deg, #38c8ef, #008ed1 72%, #0578bb);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .42), 0 4px 0 rgba(0, 109, 167, .28);
  font-family: "CREKA Jua", "Arial Rounded MT Bold", "Malgun Gothic", sans-serif;
  font-size: clamp(17px, 1.45vw, 24px);
  font-weight: 400;
  letter-spacing: -.02em;
  text-shadow: 0 2px 0 #0877ae;
}

.desktop-surface #view-score.score-classic[data-team-count="5"] { grid-template-rows: clamp(92px, 13vh, 145px) minmax(0, 1fr); }
.desktop-surface #view-score.score-classic[data-team-count="6"] { grid-template-rows: clamp(76px, 11vh, 120px) minmax(0, 1fr); }
.desktop-surface #view-score.score-classic[data-team-count="7"],
.desktop-surface #view-score.score-classic[data-team-count="8"] { grid-template-rows: clamp(62px, 9vh, 96px) minmax(0, 1fr); }
.desktop-surface #view-score.score-classic[data-team-count="5"] .score-classic-title { height: min(10vh, 105px); }
.desktop-surface #view-score.score-classic[data-team-count="6"] .score-classic-title { height: min(8.7vh, 86px); }
.desktop-surface #view-score.score-classic[data-team-count="7"] .score-classic-title,
.desktop-surface #view-score.score-classic[data-team-count="8"] .score-classic-title { height: min(7vh, 68px); width: min(43vw, 540px); }
.desktop-surface #view-score.score-classic[data-team-count="6"] .score-classic-heading p,
.desktop-surface #view-score.score-classic[data-team-count="7"] .score-classic-heading p,
.desktop-surface #view-score.score-classic[data-team-count="8"] .score-classic-heading p { display: none; }
.desktop-surface .score-classic-grid.team-count-5 .score-team-copy input,
.desktop-surface .score-classic-grid.team-count-6 .score-team-copy input { font-size: clamp(16px, 1.45vw, 25px); }
.desktop-surface .score-classic-grid.team-count-7 .score-team-copy input,
.desktop-surface .score-classic-grid.team-count-8 .score-team-copy input { font-size: clamp(13px, 1.15vw, 20px); }
.desktop-surface .score-classic-grid.team-count-5 .score-icons i,
.desktop-surface .score-classic-grid.team-count-6 .score-icons i { font-size: clamp(13px, 1.25vw, 22px); }
.desktop-surface .score-classic-grid.team-count-7 .score-icons i,
.desktop-surface .score-classic-grid.team-count-8 .score-icons i { font-size: clamp(11px, 1vw, 18px); }
.desktop-surface .score-classic-grid.team-count-6 .score-category-controls,
.desktop-surface .score-classic-grid.team-count-7 .score-category-controls,
.desktop-surface .score-classic-grid.team-count-8 .score-category-controls { right: 3px; bottom: 2px; transform: scale(.84); transform-origin: right bottom; }
.desktop-surface .score-classic-grid.team-count-7 .score-rank,
.desktop-surface .score-classic-grid.team-count-8 .score-rank { display: none; }

@media (max-width: 1450px) {
  .desktop-surface .legacy-layout.view-score #view-score.score-classic { padding-inline: 9px; }
  .desktop-surface .score-classic-board { grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; padding: 10px; }
  .desktop-surface .score-classic-card,
  .desktop-surface .score-classic-grid .team-card {
    grid-template-columns: minmax(145px, .86fr) minmax(218px, 2.12fr) minmax(100px, .9fr) minmax(100px, .9fr) minmax(100px, .82fr);
    gap: 5px;
  }
  .desktop-surface .score-classic-grid .score-team-copy { margin-left: -17px; padding-left: 24px; }
  .desktop-surface .score-classic-grid .score-category { padding-inline: 8px; }
}

/* 1.0.76 exact legacy scoreboard — one shared 1280x720 surface for web and desktop. */
@font-face {
  font-family: "CREKA Legacy Jua";
  src: url("assets/fonts/LegacyJua.ttf") format("truetype");
  font-display: swap;
}
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#view-score.score-classic {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300 !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  display: none !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #27a9dc url("assets/scoreboard-legacy/background.png") center / 100% 100% no-repeat !important;
}
#view-score.score-classic.active { display: block !important; }
#view-score.score-classic::before,
#view-score.score-classic::after { display: none !important; }

#view-score.score-classic .score-classic-heading {
  position: absolute !important;
  inset: 0 !important;
  z-index: 4 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
#view-score.score-classic .score-classic-title {
  position: absolute !important;
  display: block !important;
  object-fit: fill !important;
  filter: none !important;
}
#view-score.score-classic[data-team-count="4"] .score-classic-title {
  left: 4.804688% !important;
  top: 6.319444% !important;
  width: 90.546875% !important;
  height: 19.583333% !important;
}
#view-score.score-classic[data-team-count="5"] .score-classic-title {
  left: 4.804688% !important;
  top: 5.763889% !important;
  width: 90.546875% !important;
  height: 19.583333% !important;
}
#view-score.score-classic[data-team-count="6"] .score-classic-title {
  left: 6.914063% !important;
  top: 3.958333% !important;
  width: 86.328125% !important;
  height: 18.194444% !important;
}
#view-score.score-classic[data-team-count="7"] .score-classic-title,
#view-score.score-classic[data-team-count="8"] .score-classic-title {
  left: 82.3125% !important;
  top: 12.708333% !important;
  width: 15.390625% !important;
  height: 10.694444% !important;
}

#view-score.score-classic .score-classic-board {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-score.score-classic .score-classic-frame {
  position: absolute !important;
  left: 1.523438% !important;
  top: 2.430556% !important;
  z-index: 0 !important;
  width: 96.953125% !important;
  height: 95.138889% !important;
  display: block !important;
  pointer-events: none !important;
}
#view-score.score-classic .score-classic-grid {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
}
#view-score.score-classic .score-classic-card,
#view-score.score-classic .score-classic-grid .team-card {
  position: absolute !important;
  left: 0 !important;
  top: var(--legacy-row-top) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 13.888889% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}

#view-score.score-classic .score-team-identity {
  position: absolute !important;
  left: 3.308594% !important;
  top: 7.5% !important;
  box-sizing: border-box !important;
  width: 16.09375% !important;
  height: 85% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#view-score.score-classic .score-team-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
#view-score.score-classic .score-team-avatar {
  position: absolute !important;
  left: 1.456311% !important;
  top: 3.529412% !important;
  z-index: 1 !important;
  width: 38.349515% !important;
  height: 92.941176% !important;
  display: block !important;
  object-fit: fill !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#view-score.score-classic .score-team-name {
  position: absolute !important;
  left: 39.320388% !important;
  top: 0 !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  width: 60.679612% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 3% !important;
  overflow: hidden !important;
  color: #12a8d7 !important;
  font-family: "CREKA Legacy Jua", "CREKA Jua", "Malgun Gothic", sans-serif !important;
  font-size: 2.65vh !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  text-shadow: none !important;
}

#view-score.score-classic .score-category,
#view-score.score-classic .score-total {
  position: absolute !important;
  box-sizing: border-box !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}
#view-score.score-classic .score-category {
  top: 12.5% !important;
  height: 75% !important;
  cursor: pointer !important;
}
#view-score.score-classic .score-category-0 { left: 19.730469% !important; width: 27.8125% !important; }
#view-score.score-classic .score-category-1 { left: 47.847656% !important; width: 11.40625% !important; }
#view-score.score-classic .score-category-2 { left: 59.636719% !important; width: 11.40625% !important; }
#view-score.score-classic .score-category:hover,
#view-score.score-classic .score-category:active { transform: none !important; filter: none !important; }
#view-score.score-classic .score-category:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .94) !important;
  outline-offset: 2px !important;
}
#view-score.score-classic .score-category-background,
#view-score.score-classic .score-total-background {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
}
#view-score.score-classic .score-icons {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  padding: 0 !important;
  pointer-events: none !important;
}
#view-score.score-classic .score-icons img {
  position: absolute !important;
  display: block !important;
  object-fit: fill !important;
  transform-origin: center !important;
}
#view-score.score-classic .score-icons-0 img { top: 8% !important; width: 19.662921% !important; height: 89.333333% !important; }
#view-score.score-classic .score-icons-0 img:nth-child(1) { left: 4.213483% !important; }
#view-score.score-classic .score-icons-0 img:nth-child(2) { left: 18.820225% !important; }
#view-score.score-classic .score-icons-0 img:nth-child(3) { left: 33.426966% !important; }
#view-score.score-classic .score-icons-0 img:nth-child(4) { left: 48.033708% !important; }
#view-score.score-classic .score-icons-0 img:nth-child(5) { left: 62.640449% !important; }
#view-score.score-classic .score-icons-0 img:nth-child(6) { left: 77.247191% !important; }
#view-score.score-classic .score-icons-1 img { top: 8% !important; width: 46.575342% !important; height: 89.333333% !important; }
#view-score.score-classic .score-icons-1 img:nth-child(1) { left: 10.273973% !important; }
#view-score.score-classic .score-icons-1 img:nth-child(2) { left: 44.520548% !important; }
#view-score.score-classic .score-icons-2 img { top: 10.666667% !important; width: 47.945205% !important; height: 78.666667% !important; }
#view-score.score-classic .score-icons-2 img:nth-child(1) { left: 10.616438% !important; }
#view-score.score-classic .score-icons-2 img:nth-child(2) { left: 46.917808% !important; }
#view-score.score-classic .score-icons img.score-icon-spark { animation: legacy-score-icon-pop .24s ease-out both !important; }
@keyframes legacy-score-icon-pop {
  0% { transform: scale(.72); filter: brightness(1.7) drop-shadow(0 0 7px #fff); }
  65% { transform: scale(1.13); filter: brightness(1.25) drop-shadow(0 0 5px #fff4a2); }
  100% { transform: scale(1); filter: none; }
}

#view-score.score-classic .score-total {
  left: 71.0625% !important;
  top: 8% !important;
  width: 11.40625% !important;
  height: 84% !important;
}
#view-score.score-classic .score-total-number {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 1 !important;
  width: auto !important;
  max-width: 93.150685% !important;
  height: 85.714286% !important;
  display: block !important;
  object-fit: contain !important;
  transform: translate(-50%, -50%) !important;
}

#view-score.score-classic .score-classic-menu {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}
#view-score.score-classic .score-classic-action {
  position: absolute !important;
  left: 83.25% !important;
  box-sizing: border-box !important;
  width: 13.515625% !important;
  height: 6.527778% !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: transparent !important;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  font-size: 0 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
#view-score.score-classic .score-classic-action:nth-child(1) { top: 29.583333% !important; }
#view-score.score-classic .score-classic-action:nth-child(2) { top: 38.75% !important; }
#view-score.score-classic .score-classic-action:nth-child(3) { top: 47.916667% !important; }
#view-score.score-classic .score-classic-action:nth-child(4) { top: 57.083333% !important; }
#view-score.score-classic .score-classic-action:nth-child(5) { top: 66.25% !important; }
#view-score.score-classic .score-classic-action:nth-child(6) { top: 75.416667% !important; }
#view-score.score-classic .score-classic-action:nth-child(7) { top: 84.583333% !important; }
#view-score.score-classic .score-classic-action.score-result-button { background-image: url("assets/scoreboard-legacy/button-result.png") !important; }
#view-score.score-classic .score-classic-action.score-next-button { background-image: url("assets/scoreboard-legacy/button-next.png") !important; }
#view-score.score-classic .score-classic-action.score-previous-button { background-image: url("assets/scoreboard-legacy/button-previous.png") !important; }
#view-score.score-classic .score-classic-action.score-sound-button { background-image: url("assets/scoreboard-legacy/button-sound.png") !important; }
#view-score.score-classic .score-classic-action.score-team-settings-button { background-image: url("assets/scoreboard-legacy/button-team.png") !important; }
#view-score.score-classic .score-classic-action.score-help-button { background-image: url("assets/scoreboard-legacy/button-help.png") !important; }
#view-score.score-classic .score-classic-action.score-home-button { background-image: url("assets/scoreboard-legacy/button-home.png") !important; }
#view-score.score-classic .score-classic-action.score-result-button:active { background-image: url("assets/scoreboard-legacy/button-result-pressed.png") !important; }
#view-score.score-classic .score-classic-action.score-next-button:active { background-image: url("assets/scoreboard-legacy/button-next-pressed.png") !important; }
#view-score.score-classic .score-classic-action.score-previous-button:active { background-image: url("assets/scoreboard-legacy/button-previous-pressed.png") !important; }
#view-score.score-classic .score-classic-action.score-help-button:active { background-image: url("assets/scoreboard-legacy/button-help-pressed.png") !important; }
#view-score.score-classic .score-classic-action.score-home-button:active { background-image: url("assets/scoreboard-legacy/button-home-pressed.png") !important; }
#view-score.score-classic .score-classic-action:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }
#view-score.score-classic .score-classic-action.score-sound-button.is-muted::after {
  position: absolute !important;
  right: 7% !important;
  top: 27% !important;
  width: 12.790698% !important;
  height: 46.808511% !important;
  display: block !important;
  background: url("assets/scoreboard-legacy/sound-off.png") center / 100% 100% no-repeat !important;
  content: "" !important;
}

/* The original client edits teams in a popup and keeps the main board read-only. */
.team-manager-open .legacy-team-fields { grid-template-columns: 1fr !important; gap: 8px !important; }
.team-manager-open .legacy-team-field {
  grid-template-columns: 34px 30px 74px minmax(0, 1fr) !important;
  min-height: 68px !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  opacity: .58 !important;
}
.team-manager-open .legacy-team-field.active { opacity: 1 !important; }
.team-manager-open .legacy-team-active { display: grid !important; place-items: center !important; }
.team-manager-open .legacy-team-active span { display: none !important; }
.team-manager-open .legacy-team-avatar-button {
  width: 70px !important;
  height: 58px !important;
  display: grid !important;
  grid-template-columns: 50px 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 9px !important;
  color: #fff !important;
  background: #16a7d7 !important;
  cursor: pointer !important;
}
.team-manager-open .legacy-team-avatar-button img { width: 50px !important; height: 50px !important; object-fit: contain !important; }
.team-manager-open .legacy-team-avatar-button span { font-size: 27px !important; font-weight: 900 !important; }

.score-help-dialog,
.legacy-award-dialog {
  position: fixed !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  max-width: none !important;
  max-height: none !important;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}
.score-help-dialog::backdrop,
.legacy-award-dialog::backdrop { background: rgba(0, 0, 0, .62) !important; }
.score-help-dialog form {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}
.score-help-dialog form > button {
  width: 88.90625vw !important;
  max-width: none !important;
  aspect-ratio: 1138 / 537 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}
.score-help-dialog img { width: 100% !important; height: 100% !important; display: block !important; }

.legacy-award-dialog form {
  position: relative !important;
  width: 100% !important;
  height: 100vh !important;
  max-height: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}
.legacy-award-background { display: none !important; }
.legacy-trophy {
  position: absolute !important;
  left: 50% !important;
  top: 25.9025% !important;
  width: 44% !important;
  height: 63% !important;
  transform: translateX(-50%) !important;
}
.legacy-trophy-part { position: absolute !important; left: 50% !important; top: 50% !important; display: block !important; object-fit: contain !important; transform: translate(-50%, -50%) scale(0); }
.legacy-award-dialog[open] .trophy-part-2 { width: 75% !important; height: 44% !important; top: 15% !important; animation: legacy-award-pop .2s ease-out forwards !important; }
.legacy-award-dialog[open] .trophy-part-3 { width: 27% !important; height: 54% !important; top: 47% !important; animation: legacy-award-pop .2s .2s ease-out forwards !important; }
.legacy-award-dialog[open] .trophy-part-4 { width: 64% !important; height: 54% !important; top: 48% !important; animation: legacy-award-pop .2s .2s ease-out forwards !important; }
.legacy-award-dialog[open] .trophy-part-5 { width: 61% !important; height: 57% !important; top: 55% !important; animation: legacy-award-pop .2s .4s ease-out forwards !important; }
@keyframes legacy-award-pop {
  0% { transform: translate(-50%, -50%) scale(0); }
  78% { transform: translate(-50%, -50%) scale(1.09); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
.legacy-award-team {
  position: absolute !important;
  left: 20% !important;
  right: 20% !important;
  top: 78.9025% !important;
  bottom: auto !important;
  z-index: 4 !important;
  display: grid !important;
  justify-items: center !important;
  gap: .45vh !important;
  opacity: 0;
}
.legacy-award-dialog[open] .legacy-award-team { animation: legacy-award-team-in 1s 2s ease forwards !important; }
@keyframes legacy-award-team-in { to { opacity: 1; } }
.legacy-award-avatars { order: 2 !important; display: flex !important; justify-content: center !important; gap: .7vw !important; }
.legacy-award-avatars img { width: 7.5vh !important; height: 7.5vh !important; object-fit: contain !important; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .42)) !important; }
.legacy-award-team h2 {
  order: 1 !important;
  margin: 0 !important;
  color: #fff !important;
  font-family: "CREKA Legacy Jua", "CREKA Jua", "Malgun Gothic", sans-serif !important;
  font-size: 5vh !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 3px 0 #087fac, 0 0 16px rgba(0, 0, 0, .72) !important;
}
.legacy-award-team p { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; }
.legacy-award-close {
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  color: transparent !important;
  background: transparent !important;
  cursor: pointer !important;
}

@media (max-height: 760px) {
  .desktop-surface .legacy-layout.view-score #view-score.score-classic { grid-template-rows: 96px minmax(0, 1fr); padding-block: 4px 9px; }
  .desktop-surface #view-score.score-classic[data-team-count="5"],
  .desktop-surface #view-score.score-classic[data-team-count="6"] { grid-template-rows: 70px minmax(0, 1fr); }
  .desktop-surface #view-score.score-classic[data-team-count="7"],
  .desktop-surface #view-score.score-classic[data-team-count="8"] { grid-template-rows: 50px minmax(0, 1fr); }
  .desktop-surface .score-classic-title { height: 74px; }
  .desktop-surface #view-score.score-classic[data-team-count="5"] .score-classic-title,
  .desktop-surface #view-score.score-classic[data-team-count="6"] .score-classic-title { height: 54px; }
  .desktop-surface #view-score.score-classic[data-team-count="7"] .score-classic-title,
  .desktop-surface #view-score.score-classic[data-team-count="8"] .score-classic-title { height: 42px; }
  .desktop-surface .score-classic-heading p { display: none; }
  .desktop-surface .score-classic-board { padding: 7px; border-width: 4px; }
  .desktop-surface .score-classic-grid { gap: 5px; }
  .desktop-surface .score-classic-grid.team-count-5,
  .desktop-surface .score-classic-grid.team-count-6 { gap: 3px; }
  .desktop-surface .score-classic-grid.team-count-7,
  .desktop-surface .score-classic-grid.team-count-8 { gap: 2px; }
  .desktop-surface .score-classic-grid .score-team-copy input { font-size: 14px; }
  .desktop-surface .score-classic-grid .score-category-controls { transform: scale(.76); transform-origin: right bottom; }
}

@media (hover: none) {
  .desktop-surface .score-classic-grid .score-category-controls { opacity: 1; }
}

/* 1.0.70 character safe area — keep avatars and ordinary team names fully visible. */
.desktop-surface .score-classic-grid {
  box-sizing: border-box;
  padding: 3px 0 3px 6px;
  overflow: visible;
}
.desktop-surface .score-classic-card,
.desktop-surface .score-classic-grid .team-card {
  grid-template-columns: minmax(205px, 1.12fr) minmax(230px, 2.05fr) minmax(118px, .96fr) minmax(118px, .96fr) minmax(118px, .9fr);
}
.desktop-surface .score-classic-grid .score-avatar-wrap {
  height: min(92%, 86px);
}
.desktop-surface .score-classic-grid .score-team-copy input {
  font-family: "CREKA Jua", "Arial Rounded MT Bold", "Malgun Gothic", sans-serif;
  font-size: clamp(15px, 1.15vw, 22px);
  font-weight: 400;
}

@media (max-width: 1450px) {
  .desktop-surface .score-classic-card,
  .desktop-surface .score-classic-grid .team-card {
    grid-template-columns: minmax(190px, 1.15fr) minmax(180px, 1.83fr) minmax(100px, .9fr) minmax(100px, .9fr) minmax(100px, .82fr);
  }
}

@media (max-height: 760px) {
  .desktop-surface .score-classic-grid { padding-block: 2px; }
  .desktop-surface .score-classic-grid .score-team-copy input { font-size: 15px; }
}

/* 1.0.73 head-office feedback — shorter title, larger team names and stronger label/symbol hierarchy. */
.desktop-surface .score-classic-title {
  width: min(39vw, 540px);
}
.desktop-surface #view-score.score-classic[data-team-count="7"] .score-classic-title,
.desktop-surface #view-score.score-classic[data-team-count="8"] .score-classic-title {
  width: min(37vw, 480px);
}
.desktop-surface .score-classic-grid .score-team-copy input {
  font-size: clamp(22px, 1.75vw, 32px);
}
.desktop-surface .score-classic-grid .score-category {
  grid-template-rows: 16px minmax(0, 1fr);
  align-content: stretch;
  place-items: center stretch;
  padding: 6px 11px 4px;
  border: 2px solid rgba(92, 185, 239, .42);
  border-radius: 18px;
  background-color: #69b9ef;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .28), 0 3px 0 rgba(25, 127, 205, .22);
}
.desktop-surface .score-classic-grid .score-category-0 {
  background-image: linear-gradient(180deg, #78bdf3 0%, #5e91e9 100%);
}
.desktop-surface .score-classic-grid .score-category-1 {
  background-image: linear-gradient(180deg, #76b9ef 0%, #618ee3 100%);
}
.desktop-surface .score-classic-grid .score-category-2 {
  background-image: linear-gradient(180deg, #72b5ed 0%, #5d8add 100%);
}
.desktop-surface .score-classic-grid .score-category-heading {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  align-self: start;
  color: rgba(255, 255, 255, .76);
  font-family: "CREKA Jua", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(8px, .62vw, 11px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
  text-shadow: 0 1px 0 rgba(31, 75, 169, .3);
}
.desktop-surface .score-classic-grid .score-category-heading small { display: none; }
.desktop-surface .score-classic-grid .score-icons {
  width: 100%;
  min-height: 0;
  align-self: stretch;
  padding: 1px 34px 2px 8px;
}
.desktop-surface .score-classic-grid .score-icons i {
  font-size: clamp(29px, 2.45vw, 48px);
}
.desktop-surface .score-classic-grid.team-count-5 .score-team-copy input,
.desktop-surface .score-classic-grid.team-count-6 .score-team-copy input {
  font-size: clamp(20px, 1.55vw, 28px);
}
.desktop-surface .score-classic-grid.team-count-7 .score-team-copy input,
.desktop-surface .score-classic-grid.team-count-8 .score-team-copy input {
  font-size: clamp(18px, 1.25vw, 23px);
}
.desktop-surface .score-classic-grid.team-count-6 .score-category,
.desktop-surface .score-classic-grid.team-count-7 .score-category,
.desktop-surface .score-classic-grid.team-count-8 .score-category {
  padding-block: 4px 3px;
  border-radius: 13px;
}
.desktop-surface .score-classic-grid.team-count-6 .score-category-heading,
.desktop-surface .score-classic-grid.team-count-7 .score-category-heading,
.desktop-surface .score-classic-grid.team-count-8 .score-category-heading {
  font-size: clamp(8px, .62vw, 11px);
}
.desktop-surface .score-classic-grid.team-count-6 .score-icons i,
.desktop-surface .score-classic-grid.team-count-7 .score-icons i,
.desktop-surface .score-classic-grid.team-count-8 .score-icons i {
  font-size: clamp(20px, 1.7vw, 30px);
}

@media (max-height: 760px) {
  .desktop-surface .score-classic-title { width: min(38vw, 440px); }
  .desktop-surface .score-classic-grid .score-team-copy input { font-size: 21px; }
  .desktop-surface .score-classic-grid .score-category { padding-block: 5px 3px; }
  .desktop-surface .score-classic-grid .score-category-heading { font-size: 8px; }
  .desktop-surface .score-classic-grid .score-icons i { font-size: clamp(22px, 1.95vw, 32px); }
}

@media (max-width: 1450px) {
  .desktop-surface .score-classic-card,
  .desktop-surface .score-classic-grid .team-card {
    grid-template-columns: minmax(220px, 1.22fr) minmax(165px, 1.7fr) minmax(100px, .9fr) minmax(100px, .9fr) minmax(100px, .82fr);
  }
  .desktop-surface .score-classic-grid .score-avatar-wrap { height: min(90%, 80px); }
  .desktop-surface .score-classic-grid .score-team-copy {
    margin-left: -16px;
    padding-left: 23px;
    padding-right: 6px;
  }
}