/* CSD Trainer Studio 2.2 | UI refinement and high-legibility 16:9 winner experience */
:root{
  --v22-navy:#092d57;
  --v22-blue:#0d64ad;
  --v22-teal:#14aaa9;
  --v22-line:#dce8f3;
  --v22-text:#0d3055;
  --v22-muted:#64829f;
}
html{scrollbar-color:#b5c9db #eef4f9}
body{background:radial-gradient(ellipse 44% 35% at 93% 2%,#d6eafa 0%,transparent 100%),linear-gradient(155deg,#f5f9fd 0%,#edf3f8 100%)}
::selection{background:#b6e3f5;color:#07305b}
button,input,textarea,select{accent-color:#0d70b7}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #65c5e4;outline-offset:3px}
/* More composed workspace chrome */
.side{background:linear-gradient(182deg,#072b53 0%,#0d3d72 65%,#082b51 100%);box-shadow:12px 0 45px rgba(8,43,80,.10)}
.sidebar-brand{background:linear-gradient(120deg,rgba(255,255,255,.095),rgba(255,255,255,.025));border-radius:19px;padding:13px 10px;margin-bottom:18px;border:1px solid rgba(255,255,255,.12)}
.sidebar-brand b{font-size:13px;letter-spacing:1px}.side-cap{font-size:10px;letter-spacing:1.6px;color:#9ab3ce}
.side-link{font-size:13px;letter-spacing:.05px}.side-link span{font-size:21px;color:#b2cfe3}
.side-link.selected{background:linear-gradient(100deg,rgba(36,159,214,.28),rgba(255,255,255,.09));border-left:3px solid #68e0e1}
.topbar{box-shadow:0 8px 28px rgba(11,46,80,.035)}
.company-logo{width:112px;min-width:112px;height:64px;padding:7px 11px;border-radius:15px}
.company-logo img{height:100%;width:100%;object-fit:contain}
.brand-top b{font-size:15px;color:#0d3b66}.brand-top b span{font-weight:700}
.brand-top small{font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.content{padding-top:26px}
.welcome{min-height:330px;background:radial-gradient(circle at 88% 14%,rgba(75,204,238,.24),transparent 34%),radial-gradient(circle at 55% 115%,rgba(19,167,179,.30),transparent 45%),linear-gradient(115deg,#062b55 0%,#104e89 68%,#096588 100%);border-radius:28px;box-shadow:0 25px 42px rgba(10,56,97,.16)}
.welcome h1{font-size:clamp(40px,3.5vw,59px);line-height:1.08;letter-spacing:-1.9px}
.welcome h1 i{color:#83ece3}.welcome p{font-weight:500;color:#e0effa}
.welcome .eyebrow{font-weight:850;color:#a8f6ef}
.welcome .button{min-height:51px;border-radius:12px}
.hero-float{box-shadow:0 14px 28px rgba(6,32,60,.14)}
.statbar>div{border-radius:19px;background:linear-gradient(180deg,#fff,#f7fbff);box-shadow:0 10px 27px rgba(17,55,89,.05);border:1px solid #e0eaf3}
.statbar b{color:#0c4c87}.statbar span{color:#68829d}
.catalog-title h2{font-weight:850;letter-spacing:-1px}
.catalog-title .section-kicker{color:#168d9c}
.tile{border-radius:20px;min-height:212px;box-shadow:0 9px 28px rgba(15,56,95,.055);background:linear-gradient(162deg,#fff 0%,#fbfdff 74%,#f3f9ff 100%)}
.tile:hover{transform:translateY(-5px);border-color:#afd4e9;box-shadow:0 22px 36px rgba(11,67,112,.11)}
.tile[data-group=live] .tile-icon{background:#e5f7f5;color:#087d81}
.tile[data-group=games] .tile-icon{background:#fff1df;color:#a46c23}
.tile[data-group=technical] .tile-icon{background:#f0eafa;color:#7058a7}
.tile[data-group=tools] .tile-icon{background:#e8f2fc;color:#145e9e}
.tile strong{font-weight:850;font-size:16px;line-height:1.32}
.tile p{font-size:12px;color:#68819a}
.tile-foot b{font-size:20px;color:#1275b5}
/* Activity workspace: treat the stage like a media surface, not an HTML form */
.activity-head{margin-bottom:14px}
.activity-title-row{padding:22px 24px;border-radius:22px;box-shadow:0 12px 30px rgba(14,53,89,.055)}
.activity-icon{border-radius:20px;background:linear-gradient(145deg,#0b4b8a,#0a8e9d);box-shadow:0 12px 24px rgba(4,81,142,.18)}
.activity-heading h1{font-size:30px;letter-spacing:-1px;color:#0b315a}
.activity-heading p{font-size:13px;max-width:800px}
.activity-grid{grid-template-columns:minmax(0,1fr) 335px;gap:17px}
.workstage,.config{border-radius:22px;border:1px solid #d9e6ef;box-shadow:0 17px 42px rgba(12,49,84,.065)}
.stage-top{height:53px;background:#fff;padding:0 18px;color:#6f879e}
.visual{min-height:580px;padding:23px 28px;background:linear-gradient(162deg,#f8fbff,#f0f6fc)}
.visual::before{inset:10px;border-radius:21px;background:linear-gradient(155deg,#fff,#f9fcff);border-color:#e2eaf3}
.visual>.big-title{font-size:clamp(26px,2.9vw,46px)}
.visual .button-deep{box-shadow:0 13px 29px rgba(8,78,146,.18)}
.visual .result-panel{font-size:15px;color:#294f73}
.config{position:sticky;top:102px}.config-head{background:linear-gradient(120deg,#f4f9ff,#fff)}
.config-head b{color:#153e67;font-size:15px}.config-head small{color:#738ca4}
.settings{gap:16px}.settings textarea{line-height:1.55}
.settings input:focus,.settings textarea:focus,.settings select:focus{border-color:#72aaca;box-shadow:0 0 0 3px rgba(53,163,208,.12)}
.settings label{letter-spacing:.6px}
/* Uniform activity refinements */
.option-grid{gap:13px}.choice{border-radius:16px;box-shadow:0 8px 20px rgba(13,53,89,.04);min-height:100px}
.choice:hover{border-color:#90bcd9}
.stage-actions .button{font-size:13px;min-height:52px}
.score-line{border-radius:15px;background:linear-gradient(165deg,#fff,#f6f9ff)}
.score-line strong{font-weight:850}
.die-tile{min-width:114px;min-height:114px;font-variant-numeric:tabular-nums;font-size:55px;border-radius:22px}
.countdown{font-variant-numeric:tabular-nums;letter-spacing:-5px}
.match-card,.game-square{border-radius:14px}
.game-square{font-size:clamp(15px,1.5vw,20px)}
.sticky{border-radius:7px 17px 17px 17px}
.flashcard{min-height:300px;font-size:clamp(25px,2.7vw,40px)}
.feed-card p{font-size:15px}
.bar-label{font-size:14px}.bar-track{height:23px}
/* WHEEL: A structured 16:9 activity with a result that is legible at a distance. */
#visual:has(.wheel-showcase){display:flex;align-items:stretch;justify-content:center;padding:19px 25px}
#visual:has(.wheel-showcase)::before{inset:10px;background:linear-gradient(125deg,#fdfefe,#f5faff 68%,#edf6fc);border-radius:20px}
.wheel-showcase{width:100%;height:100%;min-height:518px;position:relative;display:flex;flex-direction:column;gap:16px;isolation:isolate;padding:4px 0 0}
.wheel-showcase-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid #e0eaf2;padding:2px 6px 14px}
.stage-eyebrow{color:#0b849d;font-size:10px;letter-spacing:2px;font-weight:900}
.wheel-showcase-head h2{margin:2px 0 0;color:#0d345c;font-size:clamp(25px,2.3vw,34px);letter-spacing:-1px;font-weight:850;line-height:1.12}
.wheel-title-dot{color:#16a9a6}
.entry-pill{display:flex;align-items:center;gap:9px;border-radius:100px;padding:10px 14px;white-space:nowrap;background:#eaf5fc;color:#225a81;font-size:12px;font-weight:850;border:1px solid #d5e6f1}
.entry-pill-dot{height:8px;width:8px;border-radius:100%;background:#0aa9a8}
.wheel-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(285px,.92fr);align-items:center;gap:clamp(18px,2.6vw,36px);flex:1;min-height:0}
.wheel-visual{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;min-width:0;position:relative}
.wheel-wrap{width:min(100%,min(52vh,460px));height:auto;aspect-ratio:1;position:relative;filter:drop-shadow(0 17px 16px rgba(11,65,104,.13))}
.wheel-wrap:before{content:'';position:absolute;inset:-8px;border-radius:100%;background:linear-gradient(130deg,#a9d4e4,#e8f6fd,#8bb7d9);box-shadow:0 0 0 6px #edf5fa,0 16px 32px rgba(11,66,110,.13)}
.wheel-wrap canvas{display:block;width:100%;height:100%;position:relative;z-index:2;will-change:transform;filter:none}
.wheel-pointer{top:-15px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:21px solid transparent;border-right:21px solid transparent;border-top:44px solid #0a365f;clip-path:none;background:none;filter:drop-shadow(0 5px 4px rgba(4,44,82,.22));z-index:5}
.wheel-hub{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);height:66px;width:66px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#fff,#e6f4fb);border:7px solid #fff;box-shadow:0 7px 17px rgba(9,45,81,.25);pointer-events:none}
.wheel-hub span{font-size:15px;font-weight:950;letter-spacing:.25px;color:#0b538e}
.wheel-visual-caption{font-size:11px;font-weight:700;color:#879ab0;text-align:center;letter-spacing:.1px}
.wheel-side{display:flex;flex-direction:column;justify-content:center;gap:13px;min-width:0}
.winner-panel{border-radius:23px;min-height:265px;display:flex;flex-direction:column;padding:20px 21px;background:linear-gradient(152deg,#fff,#f3f8fd);border:1px solid #d5e5f1;box-shadow:0 17px 32px rgba(13,68,112,.075);position:relative;overflow:hidden}
.winner-panel::before{content:'';position:absolute;right:-67px;top:-90px;width:230px;height:230px;border-radius:50%;border:42px solid rgba(16,113,174,.045);pointer-events:none}
.winner-panel-top{display:flex;align-items:center;gap:9px;color:#527a99;letter-spacing:1.35px;font-size:10px;font-weight:900;position:relative;z-index:1}
.winner-star{height:31px;width:31px;display:grid;place-items:center;background:#e9f3fb;border:1px solid #dbeaf4;border-radius:11px;color:#0e6eac;font-size:18px}
.winner-wait{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;position:relative;z-index:1}
.winner-wait-icon{font-size:39px;line-height:1;color:#0e6bae;background:linear-gradient(180deg,#f0f8fe,#e0eef9);height:70px;width:70px;display:grid;place-items:center;border-radius:20px}
.winner-wait-label{font-size:clamp(22px,2vw,30px);font-weight:900;color:#193b60;letter-spacing:-.8px;line-height:1.13}
.winner-wait p{font-size:12px;color:#8198ad;margin:0;line-height:1.65}
.winner-panel.is-spinning .winner-wait-icon{animation:wheel-hub-spin 1.4s linear infinite}
.winner-panel.has-winner{background:radial-gradient(circle at 94% 4%,rgba(68,202,225,.19),transparent 37%),linear-gradient(145deg,#063765,#0e5a96 67%,#086c8d 100%);border:1px solid #1e78a7;box-shadow:0 23px 40px rgba(7,67,118,.22)}
.winner-panel.has-winner .winner-panel-top{color:#c3effa}
.winner-panel.has-winner .winner-star{background:#fff;border-color:#c9dff1;color:#b67c17}
.winner-spotlight{display:flex;flex:1;flex-direction:column;justify-content:center;position:relative;z-index:1;padding:13px 0 0;min-width:0}
.winner-label{font-size:12px;letter-spacing:2.6px;font-weight:900;color:#96eae5;margin:0 0 9px}
.winner-name{font-size:clamp(32px,3.5vw,65px);font-weight:950;line-height:1.06;letter-spacing:-1.6px;color:#fff;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 10px 28px rgba(0,25,57,.22)}
.winner-rule{width:64px;height:4px;background:#4de1c9;border-radius:6px;margin:16px 0 12px}
.winner-confirm{display:flex;align-items:center;gap:9px;font-size:12px;color:#d8f3fc;font-weight:800;letter-spacing:.15px}
.winner-tick{height:25px;width:25px;border-radius:50%;background:#18bb96;color:#fff;display:grid;place-items:center;font-size:14px}
.wheel-actions{display:flex;width:100%}.wheel-spin-btn{width:100%;min-height:68px!important;background:linear-gradient(105deg,#0c5fa9 0%,#168cac 100%)!important;font-weight:900!important;font-size:16px!important;letter-spacing:.8px!important;border-radius:17px!important;box-shadow:0 14px 26px rgba(9,102,159,.23)!important;position:relative;padding:12px 18px!important}
.wheel-spin-btn:hover:not(:disabled){box-shadow:0 19px 34px rgba(9,102,159,.30)!important}
.wheel-spin-btn:disabled{opacity:.74}
.wheel-spin-ico{font-size:25px;font-weight:800;line-height:1}.wheel-btn-arrow{position:absolute;right:19px;top:50%;transform:translateY(-50%);font-size:23px}
.wheel-history{padding:12px 15px;background:#f4f8fb;border:1px solid #dfeaf1;border-radius:15px}
.wheel-history-title{font-size:10px;letter-spacing:1.2px;font-weight:900;color:#6987a0}
.wheel-history-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.wheel-history-chip{display:inline-flex;align-items:center;gap:7px;border-radius:999px;background:#fff;border:1px solid #dce8f1;color:#285577;padding:7px 11px;font-size:11px;font-weight:800;max-width:100%;overflow-wrap:anywhere}
.wheel-history-chip span{color:#0d839c;font-weight:900}
.wheel-assist{font-size:11px;line-height:1.5;color:#879bb0;font-weight:700;padding:1px 4px}
.winner-arrival .winner-name{animation:wheel-reveal-text .62s cubic-bezier(.18,.8,.2,1) both}
.winner-arrival.has-winner{animation:wheel-panel-bloom .7s ease-out both}
.wheel-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:6;border-radius:22px}
.wheel-confetti-bit{position:absolute;left:var(--sx);top:-7%;width:8px;height:16px;border-radius:2px;transform:rotate(15deg);opacity:0;animation:wheel-confetti-fall 1.9s ease-out var(--delay) both}
@keyframes wheel-confetti-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}75%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(530deg)}}
@keyframes wheel-reveal-text{0%{opacity:0;transform:translateY(18px) scale(.96)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wheel-panel-bloom{0%{filter:brightness(1.4)}100%{filter:brightness(1)}}
@keyframes wheel-hub-spin{to{transform:rotate(360deg)}}
/* Make the entire presentation stage look like a 16:9 slide, as large as the viewport permits. */
body.presenting{background:radial-gradient(circle at 50% 15%,#154e80 0%,#071d37 70%)!important;overflow:hidden}
body.presenting .content{max-width:none!important;margin:0!important;width:100%!important;padding:10px 12px 72px!important}
body.presenting .activity-grid{display:flex;flex-direction:column;align-items:center;gap:0}
body.presenting .workstage{margin:auto;width:auto!important;min-height:0!important;border:0;background:transparent;box-shadow:none}
body.presenting .stage-top{display:none!important}
body.presenting .visual{height:auto!important;min-height:0!important;max-height:calc(100dvh - 93px)!important;aspect-ratio:16/9;width:min(calc(100vw - 30px),calc((100dvh - 93px)*16/9))!important;padding:clamp(16px,2vw,36px)!important;overflow:auto!important;border-radius:23px;box-shadow:0 22px 50px rgba(0,14,36,.34)}
body.presenting .visual:has(.wheel-showcase){overflow:hidden!important;padding:clamp(15px,1.8vw,28px)!important}
body.presenting .visual .wheel-showcase{min-height:0;height:100%;gap:clamp(6px,.7vw,13px)}
body.presenting .wheel-showcase-head{padding:0 0 clamp(6px,.8vw,13px)}
body.presenting .wheel-showcase-head h2{font-size:clamp(22px,2vw,42px)}
body.presenting .stage-eyebrow{font-size:clamp(8px,.6vw,12px)}
body.presenting .wheel-layout{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(10px,2vw,36px);min-height:0}
body.presenting .wheel-wrap{width:min(100%,calc(100dvh - 230px));max-width:720px;min-width:0}
body.presenting .wheel-visual-caption{font-size:clamp(9px,.72vw,13px)}
body.presenting .winner-panel{min-height:0;flex:1;padding:clamp(13px,1.5vw,28px);border-radius:clamp(16px,1.6vw,28px)}
body.presenting .wheel-side{height:100%;gap:clamp(6px,.8vw,16px);max-height:100%}
body.presenting .winner-panel-top{font-size:clamp(9px,.72vw,13px)}
body.presenting .winner-name{font-size:clamp(38px,4.2vw,88px)}
body.presenting .wheel-spin-btn{min-height:clamp(50px,5.8vh,82px)!important;font-size:clamp(13px,1.1vw,22px)!important}
body.presenting .wheel-history{padding:clamp(9px,.8vw,14px)}
body.presenting .wheel-history-chip{font-size:clamp(9px,.64vw,12px)}
body.presenting .winner-wait-label{font-size:clamp(19px,2vw,38px)}
body.presenting .live-results{width:min(96vw,1200px);margin:12px auto 0;max-height:30vh;overflow:auto}
body.presenting .config{display:none!important}
body.presenting.setup-open .config{display:block!important;position:fixed;top:14px;right:18px;width:min(385px,40vw);max-height:calc(100vh - 90px);overflow:auto;z-index:70}
body.presenting.setup-open .visual{filter:none}
body.presenting .floatbar,body.presenting #presentationBar{height:61px;min-height:61px;left:0;right:0;bottom:0}
body.presenting .visual:has(.wheel-showcase) .wheel-visual{gap:4px}
body.presenting .visual:has(.wheel-showcase) .wheel-assist{font-size:clamp(9px,.65vw,13px)}
/* High-DPI touch wall / laptop adjustments */
@media(max-width:1260px){.activity-grid{grid-template-columns:minmax(0,1fr) 315px}.wheel-wrap{width:min(100%,min(48vh,420px))}.winner-panel{padding:16px;min-height:225px}.winner-name{font-size:clamp(28px,3vw,46px)}}
@media(max-width:1000px){.activity-grid{grid-template-columns:1fr}.config{position:static}.wheel-layout{grid-template-columns:minmax(0,1fr) minmax(260px,.85fr)}.wheel-wrap{width:min(100%,min(49vh,410px))}.visual{min-height:500px}}
@media(max-width:760px){.side{width:min(84vw,310px);flex:0 0 auto}.topbar{padding:10px 13px}.company-logo{min-width:72px;width:72px;height:49px}.brand-top b{font-size:11px}.brand-top small{display:none}.welcome h1{font-size:36px}.catalog-title h2{font-size:26px}.tile{min-height:175px}.tile strong{font-size:14px}.visual{padding:14px;min-height:420px}.wheel-layout{display:flex;flex-direction:column;align-items:stretch;gap:16px}.wheel-showcase{min-height:0}.wheel-wrap{width:min(80vw,370px)}.wheel-side{width:100%}.winner-panel{min-height:220px}.winner-name{font-size:clamp(34px,8vw,52px)}.winner-wait-label{font-size:23px}.wheel-showcase-head h2{font-size:27px}.wheel-visual-caption{font-size:10px}body.presenting .wheel-layout{flex-direction:row;display:grid;grid-template-columns:1fr 1fr}body.presenting .wheel-wrap{width:min(100%,calc(100dvh - 195px))}body.presenting .wheel-visual-caption{display:none}body.presenting .wheel-history{display:none}body.presenting .wheel-showcase-head h2{font-size:clamp(18px,3vw,26px)}body.presenting .winner-name{font-size:clamp(25px,4vw,43px)}body.presenting .winner-panel{min-height:0}}
@media(max-height:700px){body.presenting .wheel-visual-caption{display:none}body.presenting .wheel-history{display:none}body.presenting .wheel-assist{display:none}body.presenting .wheel-side{gap:8px}body.presenting .winner-panel{min-height:0}body.presenting .wheel-showcase{gap:5px}body.presenting .winner-panel-top{font-size:9px}body.presenting .winner-rule{margin:8px 0}}
@media(prefers-reduced-motion:reduce){.winner-arrival .winner-name,.winner-arrival.has-winner,.wheel-confetti-bit,.winner-panel.is-spinning .winner-wait-icon{animation:none!important}.wheel-confetti{display:none!important}}

.tile-icon svg{width:28px;height:28px;display:block;flex:none}.activity-icon svg{width:31px;height:31px;display:block}.floatbar{left:50%!important;right:auto!important;bottom:8px!important;transform:translateX(-50%)!important;width:min(850px,calc(100vw - 30px))!important;min-height:52px!important;height:55px!important;background:rgba(255,255,255,.96)!important;border:1px solid #d6e5ef!important;box-shadow:0 10px 30px rgba(3,20,39,.28)!important;border-radius:17px!important}.floatbar span{color:#315b7c!important}.floatbar>div{min-width:0}.floatbar .button{min-height:40px!important;padding:0 15px!important;font-size:12px!important}.floatbar img{width:56px!important;height:38px!important;object-fit:contain}