:root{font-family:Inter,"Segoe UI",Arial,sans-serif;color:#172b2b;background:#f7f8f3;--ink:#172b2b;--muted:#617473;--line:#dce5df;--mint:#d9f3e3;--green:#1c6c59;--orange:#f9a66c;--paper:#fff;--shadow:0 15px 45px #203d3020}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh}a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #d66c2c;outline-offset:3px}.skip-link{position:absolute;top:-80px;left:12px;background:#fff;padding:12px;z-index:10}.skip-link:focus{top:12px}.site-header{max-width:1240px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:22px 28px;border-bottom:1px solid var(--line);gap:20px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:19px;line-height:1.15;text-decoration:none}.brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted);margin-top:4px}.brand-mark{height:42px;width:42px;display:grid;place-items:center;border-radius:13px;background:var(--green);color:#fff;font-size:27px}.site-nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:700}.site-nav a{text-decoration:none}.site-nav a:hover,.text-button:hover{text-decoration:underline}.site-nav form{margin:0}.nav-button,.text-button{border:0;background:none;color:var(--green);font-weight:700;padding:4px}.container{max-width:1240px;margin:auto;padding:34px 28px 90px;min-height:calc(100vh - 180px)}.site-footer{max-width:1240px;margin:auto;padding:24px 28px 34px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:800;color:var(--green);margin:0 0 12px}.muted,.small{color:var(--muted)}.small{font-size:13px}.lead{font-size:19px;line-height:1.6;max-width:650px;color:#49605e}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:center;padding:70px 0 82px}.hero h1{font-size:clamp(43px,5.4vw,77px);line-height:1.04;letter-spacing:-.055em;max-width:780px;margin:0}.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}.button{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid transparent;border-radius:11px;min-height:47px;padding:12px 19px;font-weight:750;line-height:1.2;transition:transform .15s,box-shadow .15s;background:#fff;color:var(--ink)}.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #172b2b1b}.primary{background:var(--green);color:#fff}.secondary{background:#e6f3eb;color:#175742}.quiet{border-color:var(--line);background:var(--paper)}.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:310px;background:#e7f1e9;border-radius:32px;overflow:hidden;padding:35px}.hero-visual:before{content:"";position:absolute;width:250px;height:250px;border:1px dashed #77a992;border-radius:50%;top:-90px;right:-35px}.hero-visual span{z-index:1;display:grid;place-items:center;background:#fff;border:2px solid var(--green);border-radius:50%;width:64px;height:64px;font-weight:800;font-size:20px;box-shadow:var(--shadow)}.hero-visual span:nth-of-type(2){background:var(--green);color:#fff}.route-line{height:2px;width:30px;background:#75aa92}.hero-visual p{position:absolute;bottom:35px;font-weight:750;color:var(--green)}.three-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.three-steps article,.panel,.metric{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:25px}.three-steps h2,.panel h2{margin:10px 0;font-size:24px;letter-spacing:-.025em}.three-steps p,.panel p{line-height:1.55}.step-number,.list-icon{display:grid;place-items:center;flex:none;background:var(--mint);border-radius:13px;width:40px;height:40px;color:var(--green);font-weight:850}.page-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin:16px 0 28px}.page-heading h1,.host-header h1{font-size:clamp(36px,4.4vw,58px);letter-spacing:-.045em;line-height:1.1;margin:0 0 10px}.page-heading p{color:var(--muted);max-width:680px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.bottom-grid{margin-top:20px}.accent-panel{background:#eaf5eb;border-color:#d0e6d3}.stack{display:grid;gap:15px;margin-top:20px}.stack label,.launch-form label,.answer-form>label{display:grid;gap:8px;font-weight:700;font-size:14px}input:not([type=hidden]):not([type=checkbox]),textarea,select{width:100%;min-height:43px;background:#fff;border:1px solid #bdd0c5;border-radius:9px;padding:10px 12px;color:var(--ink)}textarea{resize:vertical}input[type=checkbox]{width:20px;height:20px;accent-color:var(--green)}.optional{color:var(--muted)}.section-block{margin-top:36px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}.section-heading h2{font-size:24px;margin:0;letter-spacing:-.025em}.section-heading span{color:var(--green);font-weight:800}.card-list{display:grid;gap:9px}.list-card,.bank-row{display:flex;align-items:center;gap:16px;padding:15px 17px;background:var(--paper);border:1px solid var(--line);border-radius:13px;text-decoration:none}.list-card:hover{border-color:#7eae96}.list-card>span:nth-child(2),.bank-row>span{flex:1;min-width:0}.list-card strong,.bank-row strong{display:block;font-size:16px}.list-card small,.bank-row small{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.45}.empty{border:1px dashed #b8cbbf;border-radius:13px;padding:20px;color:var(--muted)}.breadcrumb{font-size:13px;font-weight:750;color:var(--green);margin:0 0 24px}.breadcrumb a{text-decoration:none}.launch-panel,.rescue-panel{display:flex;align-items:center;justify-content:space-between;gap:30px}.launch-form{display:flex;align-items:end;gap:10px}.launch-form select{min-width:215px}.question-list{display:grid;gap:10px;padding:0;list-style:none}.question-list li{display:grid;gap:8px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px 20px}.question-list p{margin:0;color:var(--muted)}.type-chip{display:inline-flex;align-items:center;width:max-content;background:#e6f3eb;border:1px solid #c4decf;border-radius:30px;padding:5px 10px;color:#1b5b49;font-size:12px;font-weight:750}summary{font-weight:800;font-size:19px;cursor:pointer}.bank-row{justify-content:space-between}.bank-list{margin-top:20px}.advanced-fields{display:grid;gap:15px}hr{border:0;border-top:1px solid var(--line);margin:23px 0}.host-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}.join-code{min-width:235px;background:#dff0e4;border:1px solid #b8d6c4;border-radius:18px;padding:20px;text-align:center}.join-code small,.join-code span{display:block;color:var(--muted);font-size:12px}.join-code strong{display:block;font-size:37px;letter-spacing:.1em;margin:6px 0;color:var(--green)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.metric{padding:18px 20px}.metric strong{display:block;font-size:33px;line-height:1.1}.metric span{font-size:12px;color:var(--muted)}.host-stage{min-height:340px}.host-stage h2{font-size:clamp(28px,3.5vw,47px);max-width:900px}.host-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0;list-style:none}.host-options li{display:flex;gap:12px;align-items:center;background:#f8faf7;padding:13px;border:1px solid var(--line);border-radius:11px}.host-options li span{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;background:#dceee2;color:var(--green);font-weight:800}.explanation,.feedback{background:#f1f6ed;border-left:4px solid var(--green);border-radius:9px;padding:16px 18px;margin-top:20px}.explanation p,.feedback p{margin:5px 0 0}.feedback.retry{border-color:#d87a3a;background:#fff5eb}.player-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.player-stage{margin-top:22px;max-width:850px;margin-left:auto;margin-right:auto;padding:clamp(24px,4vw,48px)}.player-stage h1{font-size:clamp(28px,4vw,49px);letter-spacing:-.035em}.answer-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}.answer-card{display:flex;align-items:center;gap:14px;text-align:left;background:#fafcf9;color:var(--ink);border:2px solid var(--line);border-radius:13px;padding:14px;min-height:74px;font-weight:700}.answer-card:hover,.answer-card:focus-within{border-color:var(--green);background:#f0f8f2}.answer-letter{display:grid;place-items:center;flex:none;border-radius:10px;background:#e0eee3;color:var(--green);width:36px;height:36px;font-weight:850}.progress-track{height:10px;background:#e4eae5;border-radius:9px;overflow:hidden}.progress-track span{display:block;height:100%;background:var(--green)}.waiting{font-weight:700;color:var(--green)}.report-card{align-items:start}.rescue-panel{background:#fff1e4;border-color:#f5d7bb}.notices{background:#fff3e7;border:1px solid #edc69b;border-radius:12px;padding:8px 17px;margin-bottom:20px}.notices p{margin:7px 0}.auth-panel,.join-panel{max-width:550px;margin:30px auto}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:11px;border-bottom:1px solid var(--line)}th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:760px){.site-header{padding:16px}.container{padding:25px 16px 70px}.site-footer{padding:20px 16px}.site-nav{gap:10px;font-size:12px}.brand{font-size:15px}.brand small{display:none}.hero,.dashboard-grid,.three-steps{grid-template-columns:1fr}.hero{padding:35px 0;gap:25px}.hero-visual{min-height:190px}.page-heading,.host-header,.launch-panel,.rescue-panel{flex-direction:column;align-items:stretch}.launch-form{flex-direction:column;align-items:stretch}.metrics{grid-template-columns:repeat(3,1fr)}.metric{padding:12px}.metric strong{font-size:24px}.answer-grid,.host-options{grid-template-columns:1fr}.player-top{align-items:start;flex-direction:column}.join-code{min-width:0}.list-card{gap:10px}}
@media(max-width:430px){.site-nav a:first-child{display:none}.metrics{grid-template-columns:1fr}.hero h1{font-size:42px}.actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}
[hidden]{display:none!important}
.code-mini{display:inline-grid;place-items:center;min-width:66px;padding:8px 10px;border-radius:9px;background:#e8f2e9;color:var(--green);font-size:12px;font-weight:850;letter-spacing:.08em}.code-input{text-transform:uppercase;letter-spacing:.15em;font-weight:850}.auth-panel h1{font-size:clamp(32px,4vw,46px);letter-spacing:-.04em;margin:6px 0 12px}.auth-panel>.small{margin-top:22px}
.site-header{flex-wrap:wrap}.language-form{display:flex;align-items:center;gap:5px;margin:0}.language-form select{width:auto;min-height:36px;padding:5px 27px 5px 9px;background:#fff;border-color:var(--line);font-size:12px;font-weight:700}.language-form .nav-button{font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:760px){.site-header{gap:10px}.language-form{width:100%;justify-content:flex-end}.brand{margin-right:auto}}

/* Gwanook identity: bold cobalt with a warm accent, without color-coded answers. */
:root {
  color: #14213d;
  background: #f5f7ff;
  --ink: #14213d;
  --muted: #53617d;
  --line: #dce2f6;
  --mint: #dfe6ff;
  --green: #2443c9;
  --orange: #ffb262;
  --shadow: 0 15px 45px #182c711f;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible {
  outline-color: #e87d24;
}
.site-header { border-bottom: 3px solid var(--green); }
.brand-mark { border-radius: 14px; transform: rotate(-7deg); }
.hero {
  display: block;
  padding: 60px clamp(28px, 4vw, 60px);
  background: #2443c9;
  border-radius: 30px;
  color: #fff;
  box-shadow: 0 22px 42px #2443c933;
  text-align: center;
}
.hero > div { max-width: 820px; margin: 0 auto; }
.hero h1,.hero .lead { max-width: none; }
.hero .actions { justify-content: center; }
.hero .eyebrow { color: #ffcf96; }
.hero .lead { color: #edf1ff; }
.hero .button.primary { background: #fff; color: #1d39b6; }
.hero .button.quiet { background: transparent; color: #fff; border-color: #bfcbff; }
.hero-expedition { display: flex; justify-content: space-between; align-items: center; position: relative; max-width: 650px; margin: 38px auto 0; padding: 0 12px; font-size: clamp(24px,3.7vw,42px); }
.hero-expedition::before { content: ''; position: absolute; z-index: 0; left: 30px; right: 30px; top: 50%; border-top: 5px dashed #ffffff9c; transform: translateY(-50%); }
.hero-expedition span { position: relative; z-index: 1; display: grid; place-items: center; width: 66px; height: 66px; border: 3px solid #fff; border-radius: 50%; background: #ffdfb8; box-shadow: 0 6px 15px #13225d77; }
.hero-expedition span:first-child,.hero-expedition span:last-child { width: 51px; height: 51px; background: #fff; font-size: 30px; }
.three-steps { margin-top: 22px; }
.three-steps article { border-top: 4px solid #ffb262; }
.social-options { display: grid; gap: 10px; margin-top: 24px; }
.social-button { border-color: #747775; background: #fff; color: #1f1f1f; width: 100%; gap: 10px; }
.social-logo { display: block; width: 20px; height: 20px; flex: none; object-fit: contain; }
.social-error { margin: 0; color: #a12c2c; }
.secondary,.type-chip,.code-mini,.answer-letter,.host-options li span { background: #dfe6ff; color: #1d39b6; }
.accent-panel,.join-code,.explanation,.feedback { background: #edf1ff; border-color: #cfd9ff; }
.join-code strong { color: #1d39b6; }
.join-code { min-width: 275px; }
.join-qr { display: block; width: 230px; height: 230px; max-width: 100%; margin: 12px auto 7px; background: #fff; border: 8px solid #fff; border-radius: 8px; image-rendering: crisp-edges; }
.join-link { display: block; margin-top: 9px; color: #1d39b6; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.list-card:hover,.answer-card:hover,.answer-card:focus-within { border-color: #2443c9; background: #f0f3ff; }
.answer-card,.host-options li { background: #fafbff; }
.rescue-panel { background: #fff1e4; border-color: #f5d7bb; }
.feedback.retry { background: #fff5eb; border-color: #d87a3a; }
@media (max-width: 760px) {
  .hero { padding: 36px 24px; gap: 25px; }
}

/* The session is an expedition: a visible group journey, not a hidden score. */
.host-header { display: grid; grid-template-columns: minmax(0,1fr) 275px; align-items: start; gap: 22px; }
.host-main { min-width: 0; }
.host-main > div:first-child { padding: 4px 0 0; }
.host-main .expedition-panel { margin: 22px 0 0; }
.host-header .join-code { position: sticky; top: 18px; }
.avatar-picker { border: 0; padding: 0; margin: 2px 0; min-width: 0; }
.avatar-picker legend { margin-bottom: 10px; font-size: 14px; font-weight: 800; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.avatar-choice { position: relative; cursor: pointer; }
.avatar-choice input[type=radio] { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }
.avatar-visual { display: grid; justify-items: center; gap: 3px; min-height: 88px; padding: 8px 3px; border: 2px solid #dce2f6; border-radius: 14px; background: #f8f9ff; color: #34436c; font-size: 11px; font-weight: 800; text-align: center; transition: transform .15s, border-color .15s, background .15s; }
.avatar-emoji { font-size: 35px; line-height: 1.2; }
.avatar-choice:hover .avatar-visual { transform: translateY(-3px); border-color: #778fe8; }
.avatar-choice input:checked + .avatar-visual { border-color: #2443c9; background: #e8ecff; box-shadow: 0 0 0 2px #2443c944; }
.avatar-choice input:focus-visible + .avatar-visual { outline: 3px solid #e87d24; outline-offset: 3px; }
.answer-card { transition: transform .14s ease,box-shadow .14s ease,border-color .14s ease; }
.answer-card:hover { transform: translateY(-3px); box-shadow: 0 7px 17px #2037791f; }
.answer-grid .answer-card:nth-child(4n+1),.host-options li:nth-child(4n+1) { background: #fff1ea; border-color: #f8c8b4; }
.answer-grid .answer-card:nth-child(4n+2),.host-options li:nth-child(4n+2) { background: #ecf3ff; border-color: #c2d5fb; }
.answer-grid .answer-card:nth-child(4n+3),.host-options li:nth-child(4n+3) { background: #fff8df; border-color: #f1dfa1; }
.answer-grid .answer-card:nth-child(4n+4),.host-options li:nth-child(4n+4) { background: #eaf9f0; border-color: #b9e2c8; }

.expedition-panel,.player-journey { position: relative; overflow: hidden; isolation: isolate; color: #fff; border-radius: 24px; background: radial-gradient(circle at 85% 5%, #596eed 0, transparent 28%), radial-gradient(circle at 5% 96%, #2755aa 0, transparent 30%), linear-gradient(130deg,#0d1b45,#1e3477 58%,#243c92); box-shadow: 0 22px 45px #172a6540; }
.expedition-panel::before,.player-journey::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5; background-image: radial-gradient(#fff 1px, transparent 2px),radial-gradient(#ffcd86 1px, transparent 2px); background-size: 83px 71px,131px 97px; background-position: 4px 7px,36px 29px; pointer-events: none; }
.expedition-panel { padding: clamp(22px,3vw,36px); margin-bottom: 20px; }
.expedition-top,.journey-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.expedition-top h2 { font-size: clamp(30px,3.7vw,48px); letter-spacing: -.04em; margin: 0 0 4px; }
.expedition-top p:not(.eyebrow) { margin: 0; color: #dde6ff; line-height: 1.45; }
.expedition-panel .eyebrow { color: #ffd497; }
.sound-toggle { flex: none; border: 1px solid #ffffff88; border-radius: 999px; padding: 9px 14px; background: #ffffff22; color: #fff; font-size: 13px; font-weight: 800; }
.sound-toggle:hover,.sound-toggle[aria-pressed=true] { background: #fff; color: #1d39b6; }
.route-labels { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 22px 9px 12px; color: #f8d7a4; font-size: 12px; font-weight: 850; letter-spacing: .025em; }
.runner-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-height: 430px; overflow-y: auto; padding: 2px 5px 6px 1px; scrollbar-color: #9cb2ff #23386d; }
.runner-empty { grid-column: 1/-1; border: 2px dashed #9cb2ff99; border-radius: 16px; padding: 28px; margin: 0; color: #edf1ff; text-align: center; }
.runner-card { min-width: 0; padding: 13px 17px 18px; background: #ffffffed; border: 1px solid #fff; border-radius: 17px; color: #16275b; box-shadow: 0 5px 16px #0b19405c; }
.runner-new { animation: runner-arrive .45s ease-out both; }
@keyframes runner-arrive { from { opacity: 0; transform: translateY(15px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.runner-meta { display: flex; align-items: center; gap: 9px; min-width: 0; }
.runner-portrait,.journey-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; background: #e5ebff; font-size: 27px; }
.runner-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.runner-steps { flex: none; margin-left: auto; border-radius: 999px; background: #e7ecff; padding: 5px 8px; color: #2443c9; font-size: 12px; font-weight: 850; }
.runner-road { position: relative; height: 13px; margin: 23px 20px 7px; border-radius: 999px; background: repeating-linear-gradient(90deg,#ced7f5 0 12px,#e9edfa 12px 21px); }
.runner-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffb262,#ffdb71); box-shadow: 0 0 10px #f8a64e99; transition: width .7s ease; }
.runner-token { position: absolute; top: 50%; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid #fff; border-radius: 50%; background: #ffedc9; box-shadow: 0 2px 7px #132c6650; font-size: 23px; transform: translate(-50%,-50%); transition: left .7s ease; }
.player-journey { padding: 22px 26px 16px; margin: 12px 0 20px; }
.journey-top { align-items: center; }
.journey-avatar { width: 60px; height: 60px; background: #fff; font-size: 39px; }
.journey-top > div { display: grid; gap: 4px; flex: 1; }
.journey-top strong { font-size: 22px; }
.journey-top div span { color: #e3eaff; font-size: 13px; }
.personal-road { height: 17px; margin: 31px 21px 6px; }
.personal-road .runner-token { width: 46px; height: 46px; font-size: 30px; }
.player-journey .route-labels { margin: 15px 0 0; }
.player-journey + .progress-track { margin-top: 20px; }
@media(max-width:760px) { .host-header { grid-template-columns: 1fr; } .host-header .join-code { position: static; grid-row: 1; } .host-main { grid-row: 2; } .runner-list { grid-template-columns: 1fr; } .expedition-top { align-items: stretch; flex-direction: column; } .expedition-top .sound-toggle { align-self: flex-start; } }
@media(max-width:430px) { .hero-expedition { margin-top: 27px; padding: 0; } .hero-expedition span { width: 43px; height: 43px; font-size: 25px; } .hero-expedition span:first-child,.hero-expedition span:last-child { width: 35px; height: 35px; font-size: 20px; } .avatar-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; } .avatar-emoji { font-size: 29px; } .avatar-visual { min-height: 76px; font-size: 10px; } .journey-top { flex-wrap: wrap; } .journey-top .sound-toggle { margin-left: auto; } .runner-steps { font-size: 11px; } }
@media(prefers-reduced-motion:reduce) { .avatar-visual,.runner-fill,.runner-token { transition: none; } .runner-new { animation: none; } }

/* Gwanook: an expedition studio with an Andean illustrated cast. */
:root {
  color: #142632;
  background: #f4f2eb;
  --ink: #142632;
  --muted: #5b6b73;
  --line: #d8dedb;
  --mint: #e0f1ed;
  --green: #155a67;
  --orange: #e9aa4f;
  --paper: #fffdfa;
  --shadow: 0 18px 48px #1632411c;
}
body { background: radial-gradient(circle at 88% 0,#e7f1eb 0,transparent 32%),#f4f2eb; }
.site-header { max-width: 1360px; border-bottom: 1px solid #cddbd6; padding-top: 15px; padding-bottom: 15px; }
.brand-mark { background: #123d4e; border-radius: 12px; transform: none; box-shadow: 0 4px 0 #e3a34a; }
.brand-seal { overflow: hidden; border: 2px solid #f1bd6d; background: #102f40; }
.brand-seal img { display: block; width: 100%; height: 100%; object-fit: cover; clip-path: circle(49% at 50% 50%); transform: scale(1.08); }
.brand { font-size: 21px; letter-spacing: -.025em; }
.brand small { letter-spacing: .09em; text-transform: uppercase; }
.site-nav a:hover { color: #b16d20; }
.container { max-width: 1360px; }
.eyebrow { color: #13747b; letter-spacing: .17em; }
.button { border-radius: 14px; min-height: 52px; font-weight: 850; }
.button.primary,.primary { background: #155a67; color: #fff; }
.button.primary:hover { background: #0e4653; }
.button.quiet { border-color: #b7c9c7; background: #fffdfa; color: #214450; }
.panel,.three-steps article,.metric { background: #fffdfa; border-color: #d8dedb; box-shadow: 0 8px 24px #1426320b; }
.type-chip,.code-mini,.answer-letter,.host-options li span { background: #deefeb; color: #155a67; }
.site-footer { border-color: #cddbd6; }
.footer-support { display: flex; flex-wrap: wrap; gap: 7px 16px; align-items: baseline; margin-top: 12px; }
.footer-support a { color: var(--green); font-weight: 700; text-underline-offset: 3px; }
.footer-projects { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 14px; }
.footer-projects a { color: var(--green); font-weight: 700; text-underline-offset: 3px; }
.subscribe-form { display: grid; gap: 9px; margin: 22px 0 12px; }
.subscribe-form label { font-weight: 800; }
.subscribe-row { display: flex; gap: 10px; }
.subscribe-row input { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
@media (max-width: 600px) { .subscribe-row { flex-direction: column; } }

.hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,.86fr); align-items: stretch; gap: 0; min-height: 490px; padding: 0; overflow: hidden; text-align: left; border-radius: 30px; color: #f9f7ef; background: #102b3b; box-shadow: 0 25px 55px #102b3b35; }
.hero > div.hero-copy { max-width: none; margin: 0; padding: clamp(36px,6vw,82px); display: flex; flex-direction: column; justify-content: center; }
.hero .eyebrow { color: #f3bf6c; font-size: 12px; margin-bottom: 22px; }
.gwanook-portrait { display: inline-flex; align-self: flex-start; align-items: center; gap: 12px; margin: 0 0 22px; padding: 7px 14px 7px 7px; border: 1px solid #8cb7b6; border-radius: 18px; color: #fff; background: #ffffff0d; box-shadow: 0 12px 28px #071e2a55; }
.gwanook-portrait img { width: 84px; height: 84px; border: 3px solid #f2bc70; border-radius: 50%; object-fit: cover; clip-path: circle(49% at 50% 50%); background: #102f40; }
.gwanook-portrait span { display: grid; gap: 3px; }
.gwanook-portrait strong { font-size: 19px; letter-spacing: -.02em; }
.gwanook-portrait small { max-width: 135px; color: #cfe3df; font-size: 12px; }
.hero h1 { max-width: 690px; font-size: clamp(48px,5vw,76px); line-height: .98; letter-spacing: -.058em; }
.hero .lead { max-width: 620px; margin: 25px 0 0; color: #d2e3e0; font-size: clamp(17px,1.6vw,21px); line-height: 1.5; }
.hero .actions { justify-content: flex-start; margin-top: 34px; }
.hero .button.primary { background: #f2bc70; color: #173543; border: 0; }
.hero .button.quiet { background: transparent; border-color: #81a8ae; color: #f8faf6; }
.hero-scene { position: relative; min-height: 460px; padding: 32px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; border-left: 1px solid #ffffff30; background: radial-gradient(circle at 55% 42%,#347d86 0,#1b5267 38%,#13384e 72%,#0e2c3c); }
.hero-scene::before { content: ''; position: absolute; inset: 0; opacity: .35; pointer-events: none; background: repeating-linear-gradient(115deg,transparent 0 25px,#ffffff13 26px 27px,transparent 28px 74px); }
.hero-scene-top,.hero-scene-bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.scene-live { color: #b6f1d8; }
.scene-timer { display: grid; place-items: center; width: 80px; height: 80px; border: 6px solid #f3bd68; border-radius: 50%; background: #122f41; color: #fff; font-size: 21px; letter-spacing: 0; box-shadow: 0 12px 30px #071e2a99; }
.hero-scene-title { position: relative; z-index: 2; align-self: start; padding: 8px 13px; border-radius: 999px; border: 1px solid #a5d4d4; color: #e6f4ee; font-size: 13px; font-weight: 800; }
.hero-line { position: absolute; top: 56%; left: 9%; width: 84%; height: 9px; border-radius: 999px; background: #bddcd59c; transform: rotate(-7deg); }
.hero-line span { display: block; width: 69%; height: 100%; border-radius: inherit; background: #f3bd68; }
.hero-squad { position: relative; z-index: 1; display: flex; align-items: end; justify-content: center; margin: 0 -14px; }
.hero-squad img { width: 39%; max-width: 225px; aspect-ratio: 1; object-fit: contain; clip-path: circle(49% at 50% 50%); margin-left: -9%; filter: drop-shadow(0 20px 12px #04172280); transform: rotate(-7deg); }
.hero-squad img:nth-child(2) { width: 44%; z-index: 2; transform: translateY(-16px) rotate(4deg); }
.hero-squad img:nth-child(3) { transform: rotate(9deg); }
.hero-scene-bottom { color: #e4f6ee; }
.hero-scene-bottom span { font-size: 24px; color: #f3bd68; }
.three-steps { margin-top: 24px; }
.three-steps article { border-top: 4px solid #e9aa4f; }

.join-shell { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); align-items: stretch; gap: 22px; margin: 12px 0 30px; }
.join-intro { display: flex; flex-direction: column; overflow: hidden; min-height: 600px; padding: clamp(26px,3.5vw,48px); border-radius: 26px; color: #f8f9f5; background: radial-gradient(circle at 65% 68%,#277581 0,transparent 48%),linear-gradient(145deg,#133f50,#0f293b); }
.join-intro .eyebrow { color: #f2bf75; }
.join-intro h1 { margin: 8px 0 16px; font-size: clamp(43px,4.3vw,67px); letter-spacing: -.055em; line-height: 1.02; }
.join-intro p:not(.eyebrow) { color: #cee1dd; line-height: 1.55; font-size: 18px; }
.join-art { display: flex; justify-content: center; align-items: flex-end; margin: auto -10% -8%; min-height: 270px; }
.join-art img { width: 38%; max-width: 195px; object-fit: contain; clip-path: circle(49% at 50% 50%); margin-left: -5%; filter: drop-shadow(0 16px 12px #061d2899); transform: rotate(-9deg); }
.join-art img:nth-child(2) { z-index: 1; width: 44%; transform: translateY(-15px) rotate(7deg); }
.join-art img:nth-child(3) { transform: rotate(10deg); }
.join-form { margin: 0; padding: clamp(22px,3vw,40px); display: flex; flex-direction: column; gap: 26px; }
.join-fields { display: grid; grid-template-columns: minmax(180px,.8fr) minmax(0,1.2fr); gap: 16px; }
.join-fields label { display: grid; align-content: start; gap: 10px; font-size: 14px; font-weight: 800; }
.join-fields input { min-height: 58px!important; font-size: 20px; font-weight: 750; }
.join-fields .code-input { letter-spacing: .16em; text-transform: uppercase; }
.avatar-picker { margin: 0; }
.avatar-picker legend { margin-bottom: 18px; font-size: 21px; letter-spacing: -.02em; }
.avatar-picker legend small { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: 0; }
.avatar-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.avatar-visual { min-height: 150px; padding: 12px 7px 10px; gap: 5px; border-radius: 17px; border: 2px solid #dce5e2; background: #f3f7f3; color: #173d46; font-size: 13px; }
.avatar-visual img { width: min(100%,110px); height: 110px; border-radius: 50%; object-fit: cover; clip-path: circle(49% at 50% 50%); filter: drop-shadow(0 7px 5px #17394836); }
.avatar-choice:hover .avatar-visual { border-color: #6aadb1; background: #e7f4ef; transform: translateY(-4px); }
.avatar-choice input:checked + .avatar-visual { border-color: #107484; background: #e2f4f0; box-shadow: 0 0 0 3px #7acfc766,0 8px 22px #184d562e; }
.avatar-choice input:focus-visible + .avatar-visual { outline-color: #c37b31; }
.join-form > .button { width: 100%; min-height: 60px; font-size: 18px; }
.join-form > .small { margin: -16px 0 0; text-align: center; }

.expedition-panel,.player-journey { background: radial-gradient(circle at 80% 0,#246b78 0,transparent 38%),linear-gradient(135deg,#122f41,#174d5d 72%,#1d6b70); border: 1px solid #4d9c9d; border-radius: 26px; box-shadow: 0 22px 45px #0e34403b; }
.expedition-panel::before,.player-journey::before { opacity: .3; }
.expedition-panel .eyebrow { color: #f2bf75; }
.expedition-top h2 { letter-spacing: -.05em; }
.runner-card { background: #fffefa; color: #173746; }
.runner-portrait,.journey-avatar,.runner-token,.result-avatar { overflow: hidden; background: #daf1e9; }
.runner-portrait img,.journey-avatar img,.runner-token img,.result-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.runner-portrait { width: 48px; height: 48px; border-radius: 50%; }
.runner-token { width: 43px; height: 43px; padding: 0; border: 2px solid #fff; }
.runner-road { background: #c9dfdc; }
.runner-fill,.progress-track span { background: linear-gradient(90deg,#4caea5,#e9b45f); }
.journey-avatar { width: 70px; height: 70px; border-radius: 50%; border: 3px solid #f0c37c; }
.personal-road .runner-token { width: 52px; height: 52px; }
.sound-toggle { border-color: #9dc5c2; }
.sound-toggle:hover,.sound-toggle[aria-pressed=true] { color: #155a67; }
.join-code { background: #fffdfa; border-color: #c7d9d5; box-shadow: var(--shadow); }
.join-code strong,.join-link { color: #155a67; }
.metric strong { color: #143b48; }
.host-stage,.player-stage { background: #fffefa; border-radius: 25px; }
.host-stage h2,.player-stage h1 { color: #142f3d; line-height: 1.1; }
.host-options li,.answer-card { background: #f5f8f6!important; border-color: #d9e2df!important; }
.host-options li span,.answer-letter { background: #dcefea; color: #155a67; }
.answer-card { min-height: 84px; border-width: 2px; border-radius: 16px; }
.answer-card:hover,.answer-card:focus-within { border-color: #17888b!important; background: #e8f5f0!important; }
.answer-card input[type=checkbox] { accent-color: #147d81; }
.stage-top { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.stage-top .eyebrow { margin-top: 12px; }
.round-clock { --clock-progress: 100%; display: flex; flex: none; flex-direction: column; justify-content: center; align-items: center; width: 104px; height: 104px; border: 7px solid transparent; border-radius: 50%; color: #effbf5; background: linear-gradient(#143f4b,#143f4b) padding-box,conic-gradient(#e9b45f var(--clock-progress),#bdd2d1 0) border-box; box-shadow: 0 10px 25px #173b4325; text-align: center; }
.round-clock span { font-size: 10px; font-weight: 750; line-height: 1.1; max-width: 75px; }
.round-clock strong { font-size: 30px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.round-clock.urgent { background: linear-gradient(#64412b,#64412b) padding-box,conic-gradient(#ef8b4d var(--clock-progress),#e3c2ac 0) border-box; }
.round-clock.expired { background: #753d3b; border-color: #d69c91; }
.time-expired { margin: 14px 0 0; padding: 14px 18px; border-radius: 12px; background: #fff1e8; color: #823c2c; font-weight: 800; }
.answer-form[data-expired] { opacity: .5; }
.result-avatar { width: 50px; height: 50px; border-radius: 50%; padding: 0; }
.podium-section { margin: 30px 0 42px; padding: clamp(25px,4vw,44px); border-radius: 28px; color: #fff; background: radial-gradient(circle at 50% 15%,#287789 0,transparent 32%),linear-gradient(145deg,#102f40,#174d5d 65%,#102d3c); box-shadow: 0 24px 48px #102f403c; overflow: hidden; }
.podium-heading { max-width: 620px; margin: 0 auto 28px; text-align: center; }
.podium-heading .eyebrow { color: #f2bf75; }
.podium-heading h2 { margin: 5px 0 7px; font-size: clamp(35px,5vw,58px); letter-spacing: -.05em; }
.podium-heading p:last-child { color: #cce2de; }
.podium-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: end; gap: 14px; max-width: 850px; margin: 0 auto; }
.podium-card { position: relative; display: flex; min-width: 0; min-height: 240px; flex-direction: column; align-items: center; justify-content: flex-start; padding: 25px 14px 0; border: 1px solid #ffffff44; border-radius: 22px 22px 8px 8px; color: #14313c; background: linear-gradient(#fffefa,#d9ebe5); text-align: center; }
.podium-place-1 { min-height: 310px; border: 3px solid #f0bd58; background: linear-gradient(#fff9df,#f1cf72); transform: translateY(-18px); }
.podium-place-2 { min-height: 255px; }
.podium-place-3 { min-height: 225px; }
.podium-medal { position: absolute; top: -19px; font-size: 34px; filter: drop-shadow(0 4px 3px #09232d55); }
.podium-avatar { display: grid; place-items: center; width: 92px; height: 92px; margin: 14px 0 13px; border-radius: 50%; font-size: 62px; }
.podium-place-1 .podium-avatar { width: 115px; height: 115px; font-size: 76px; }
.podium-card > strong { max-width: 100%; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.podium-card > span:not(.podium-medal):not(.podium-avatar) { margin-top: 5px; color: #54706d; font-size: 13px; }
.podium-card > b { margin-top: auto; color: #174d5d; font-size: 68px; line-height: .85; opacity: .24; }

@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } .hero-scene { min-height: 340px; border-left: 0; border-top: 1px solid #ffffff30; } .hero-squad { max-width: 480px; margin: 0 auto; } .join-shell { grid-template-columns: 1fr; } .join-intro { min-height: 0; } .join-art { max-height: 185px; margin: 15px auto -60px; } .join-art img { width: 30%; } }
@media (max-width: 600px) { .hero > div.hero-copy { padding: 38px 25px; } .hero h1 { font-size: 46px; } .gwanook-portrait img { width: 68px; height: 68px; } .hero-scene { min-height: 280px; padding: 22px; } .scene-timer { width: 62px; height: 62px; font-size: 17px; } .join-fields { grid-template-columns: 1fr; } .avatar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .avatar-visual { min-height: 145px; } .join-intro { padding: 28px; } .join-art { display: none; } .stage-top { align-items: center; } .round-clock { width: 85px; height: 85px; border-width: 6px; } .round-clock strong { font-size: 24px; } .round-clock span { font-size: 9px; } .player-stage { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .hero-squad img,.join-art img { transform: none; } }
@media (max-width: 600px) {
  .join-shell { gap: 12px; margin-top: 0; }
  .join-intro { padding: 18px 22px; border-radius: 22px; }
  .join-intro h1 { margin: 8px 0 6px; font-size: 32px; line-height: 1.02; }
  .join-intro p:not(.eyebrow) { margin: 0; font-size: 14px; line-height: 1.45; }
  .join-form { padding: 22px; }
}

/* Question studio, richer characters, and live-game motion. */
.question-studio { margin-top: 36px; padding: clamp(22px,3vw,36px); }
.question-studio-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.question-studio-heading h2 { margin: 0 0 6px; font-size: 30px; }
.question-studio-heading p { margin: 0; }
.question-studio-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr); gap: 34px; align-items: start; }
.question-builder label small { color: var(--muted); font-weight: 500; line-height: 1.4; }
.question-preview { position: sticky; top: 18px; padding: 13px; border-radius: 28px; background: #102f40; box-shadow: 0 20px 45px #102f4038; }
.question-preview > p { margin: 12px 8px 5px; color: #c3d8d8; font-size: 13px; }
.preview-device-label { display: flex; justify-content: space-between; padding: 4px 10px 12px; color: #bfe7dc; font-size: 11px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.preview-device-label span:first-child { color: #8ef0c0; }
.preview-screen { min-height: 430px; padding: 27px; border-radius: 19px; background: #fffefa; overflow: hidden; }
.preview-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.preview-clock { display: grid; place-items: center; width: 66px; height: 66px; flex: none; border: 6px solid #edb65d; border-radius: 50%; background: #143e4b; color: white; font-weight: 900; font-variant-numeric: tabular-nums; }
.preview-question-image,.question-media { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 18px; margin: 17px auto; background: #e5efec; }
.preview-screen h3 { margin: 24px 0 20px; color: #142f3d; font-size: clamp(25px,3vw,38px); line-height: 1.08; letter-spacing: -.035em; }
.preview-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.preview-answers > div { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 13px; border: 2px solid #d8e4df; border-radius: 14px; color: #142f3d; background: #f7faf7; font-weight: 750; }
.preview-answers b { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: #dff0eb; color: #155a67; }
.preview-answers .preview-text-answer { grid-column: 1 / -1; color: #82928e; font-size: 22px; }
.question-list li:has(.question-list-image) { grid-template-columns: auto 1fr; align-items: center; }
.question-list li:has(.question-list-image) > :not(.question-list-image) { grid-column: 2; }
.question-list-image { grid-row: 1 / span 3; width: 92px; height: 76px; object-fit: cover; border-radius: 12px; }
.question-media { max-width: 760px; max-height: 300px; object-fit: contain; background: #edf4f1; }
.bottom-grid:has(> :only-child) { grid-template-columns: 1fr; }

.visual-question-builder { display: grid; gap: 20px; margin-top: 26px; }
.visual-editor-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 16px 18px; border: 1px solid #cadad5; border-radius: 16px; background: #f5f8f6; }
.visual-editor-toolbar label { display: grid; gap: 7px; min-width: 230px; font-size: 13px; font-weight: 850; }
.visual-editor-toolbar p { max-width: 650px; margin: 0 0 9px; }
.visual-game-shell { min-width: 0; max-width: 100%; padding: 13px; border-radius: 28px; background: #102f40; box-shadow: 0 20px 45px #102f4038; overflow: hidden; }
.visual-game-canvas { min-height: 520px; padding: clamp(22px,4vw,42px); border-radius: 19px; background: radial-gradient(circle at 85% 5%,#eff8f3 0,transparent 35%),#fffefa; overflow: hidden; }
.visual-prompt { display: block; width: min(900px,100%); min-height: 104px; margin: 20px auto 16px; padding: 18px 22px; border: 2px solid #a8c7c0; border-radius: 16px; background: #fff; color: #142f3d; font-size: clamp(24px,3.2vw,42px); font-weight: 850; line-height: 1.12; letter-spacing: -.03em; text-align: center; resize: vertical; }
.visual-prompt::placeholder { color: #728682; }
.visual-image-picker { display: grid; place-items: center; width: min(430px,100%); min-height: 90px; margin: 14px auto; padding: 15px; border: 2px dashed #9abbb2; border-radius: 15px; color: #155a67; background: #edf6f1; text-align: center; cursor: pointer; }
.visual-image-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.visual-image-picker span { font-weight: 850; }
.visual-image-picker small { margin-top: 5px; color: var(--muted); }
.visual-choice-help { margin: 22px 0 10px; color: #49605e; font-size: 13px; font-weight: 750; text-align: center; }
.visual-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.visual-option-card { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 82px; padding: 12px 13px; border: 2px solid #d4e2dd; border-radius: 16px; background: #fff; box-shadow: 0 5px 12px #163e4820; transition: border-color .15s,box-shadow .15s,transform .15s; }
.visual-option-card:focus-within { border-color: #168186; transform: translateY(-2px); }
.visual-option-card.is-correct { border-color: #16845f; background: #edf9f2; box-shadow: 0 0 0 3px #74c99e55,0 7px 16px #163e4827; }
.visual-option-card > b { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: #dcefea; color: #155a67; font-size: 19px; }
.visual-option-card > input[type=text] { flex: 1; width: 0; min-width: 0; min-height: 48px; padding: 8px 4px; border: 0; background: transparent; font-size: 17px; font-weight: 750; outline: 0; }
.visual-correct { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; margin-left: auto; border: 2px solid #91aaa4; border-radius: 50%; background: #fff; cursor: pointer; }
.visual-correct input { position: absolute; width: 1px!important; height: 1px!important; min-height: 0!important; opacity: 0; }
.visual-correct i { color: transparent; font-style: normal; font-weight: 950; }
.visual-correct:has(input:checked) { border-color: #16845f; background: #16845f; }
.visual-correct:has(input:checked) i { color: #fff; }
.add-option-button { display: flex; margin: 14px auto 0; }
.legacy-answer-fields { display: grid; gap: 16px; max-width: 760px; margin: 22px auto 0; padding: 20px; border: 1px solid #cbdcd6; border-radius: 16px; background: #f5f8f6; }
.legacy-answer-fields label,.explanation-editor { display: grid; gap: 8px; font-size: 14px; font-weight: 800; }
.visual-question-builder .advanced-fields { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 760px; margin: 18px auto 0; }
.explanation-editor { padding: 20px; border: 1px solid #d6e1dd; border-radius: 16px; background: #f8faf8; }
.save-visual-question { min-height: 58px; font-size: 17px; }

.hero-squad { min-height: 245px; }
.hero-squad img { width: 30%; max-width: 185px; margin-left: -11%; animation: gwanook-float 4.2s ease-in-out infinite; }
.hero-squad img:first-child { margin-left: 0; }
.hero-squad img:nth-child(2) { width: 34%; transform: translateY(-18px) rotate(4deg); animation-delay: -.8s; }
.hero-squad img:nth-child(3) { z-index: 3; width: 37%; transform: translateY(-30px) rotate(-2deg); animation-delay: -1.6s; }
.hero-squad img:nth-child(4) { z-index: 2; transform: translateY(-12px) rotate(7deg); animation-delay: -2.4s; }
.hero-squad img:nth-child(5) { transform: rotate(10deg); animation-delay: -3.2s; }
.join-art img:nth-child(4) { transform: rotate(-4deg); }
.runner-token img,.journey-avatar img { animation: gwanook-breathe 2.4s ease-in-out infinite; }
.runner-road::after { content: ''; position: absolute; inset: 50% 0 auto; height: 2px; opacity: .42; background: repeating-linear-gradient(90deg,#fff 0 12px,transparent 12px 24px); animation: gwanook-road 1s linear infinite; }
.sound-toggle[aria-pressed=true] { box-shadow: 0 0 0 4px #f2bc7044; animation: gwanook-pulse 1.6s ease-in-out infinite; }
.host-stage,.player-stage { animation: gwanook-stage-in .45s ease both; }
@keyframes gwanook-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes gwanook-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08) rotate(2deg); } }
@keyframes gwanook-road { to { background-position: 24px 0; } }
@keyframes gwanook-pulse { 50% { box-shadow: 0 0 0 8px #f2bc7018; } }
@keyframes gwanook-stage-in { from { opacity: .2; transform: translateY(14px); } }

@media (max-width: 900px) {
  .question-studio-grid { grid-template-columns: 1fr; }
  .question-preview { position: static; }
  .hero-squad { min-height: 210px; }
}
@media (max-width: 600px) {
  .question-studio-heading { align-items: stretch; flex-direction: column; }
  .visual-editor-toolbar { align-items: stretch; flex-direction: column; }
  .visual-editor-toolbar label { min-width: 0; }
  .visual-game-shell { margin: 0 -12px; padding: 7px; border-radius: 20px; }
  .visual-game-canvas { min-height: 0; padding: 16px; }
  .visual-prompt { min-height: 92px; margin-top: 13px; font-size: 25px; }
  .visual-option-grid { grid-template-columns: 1fr; }
  .visual-option-card { min-height: 72px; }
  .visual-question-builder .advanced-fields { grid-template-columns: 1fr; }
  .podium-section { padding: 27px 13px 22px; }
  .podium-grid { gap: 6px; }
  .podium-card { min-height: 190px; padding: 21px 7px 0; }
  .podium-place-1 { min-height: 235px; }
  .podium-place-2 { min-height: 205px; }
  .podium-place-3 { min-height: 180px; }
  .podium-avatar,.podium-place-1 .podium-avatar { width: 65px; height: 65px; font-size: 43px; }
  .podium-card > strong { font-size: 14px; }
  .podium-card > span:not(.podium-medal):not(.podium-avatar) { font-size: 10px; }
  .preview-screen { min-height: 370px; padding: 20px; }
  .preview-answers { grid-template-columns: 1fr; }
  .avatar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .avatar-visual { min-height: 112px; padding: 7px 3px; font-size: 10px; }
  .avatar-visual img { width: 82px; height: 82px; max-width: 100%; }
  .avatar-choice:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); justify-self: center; }
  .question-list li:has(.question-list-image) { grid-template-columns: 70px 1fr; }
  .question-list-image { width: 70px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-squad img,.runner-token img,.journey-avatar img,.runner-road::after,.sound-toggle[aria-pressed=true],.host-stage,.player-stage { animation: none; }
}

/* Player identity: character, outfit, hat, and an always-visible companion. */
.identity-preview {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 150px;
  padding: 19px 22px;
  border: 1px solid #86bdb7;
  border-radius: 24px;
  background: radial-gradient(circle at 78% 10%,#ffffffaa 0,transparent 34%),linear-gradient(135deg,#dff5ed,#fff4df);
}
.identity-preview > .avatar-badge { width: 112px; height: 112px; flex: none; }
.identity-preview strong { display: block; color: #143f4b; font-size: 24px; letter-spacing: -.025em; }
.identity-preview div > span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }
.customizer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gear-picker { min-width: 0; margin: 0; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: #f8faf8; }
.gear-picker legend { padding: 0 7px; color: #143f4b; font-weight: 850; }
.gear-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.gear-options label { min-width: 0; }
.gear-options input { position: absolute; opacity: 0; pointer-events: none; }
.gear-options label > span { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 10px; border: 2px solid #dce5e2; border-radius: 12px; background: #fff; color: #354e55; font-size: 12px; font-weight: 750; cursor: pointer; }
.gear-options b { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 9px; background: #e5efec; font-size: 17px; }
.gear-options input:checked + span { border-color: #177e82; background: #e5f5ef; box-shadow: 0 0 0 2px #70c3b755; color: #143f4b; }
.gear-options input:focus-visible + span { outline: 3px solid #c37b31; outline-offset: 2px; }
.avatar-badge { --outfit-color:#efb24f; position: relative; overflow: visible!important; border: 3px solid var(--outfit-color)!important; background: #daf1e9; box-shadow: 0 7px 15px #10384430,0 0 0 3px #ffffffcc; }
.avatar-badge.outfit-explorer { --outfit-color:#efb24f; }
.avatar-badge.outfit-cosmic { --outfit-color:#6f8fff; }
.avatar-badge.outfit-mystic { --outfit-color:#b86bdd; }
.avatar-badge.outfit-festival { --outfit-color:#ee6e78; }
.avatar-badge > img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; overflow: hidden; }
.avatar-fallback { display: grid; width: 100%; height: 100%; place-items: center; border-radius: inherit; }
.avatar-hat { position: absolute; z-index: 4; top: -.48em; right: -.44em; font-size: .48em; line-height: 1; filter: drop-shadow(0 2px 1px #17394855); transform: rotate(9deg); }
.avatar-outfit { position: absolute; z-index: 4; right: -.44em; bottom: -.37em; display: grid; place-items: center; width: 1.15em; height: 1.15em; border: 2px solid #fff; border-radius: 50%; background: var(--outfit-color); font-size: .36em; line-height: 1; box-shadow: 0 3px 7px #17394845; }
.runner-portrait,.runner-token,.result-avatar { font-size: 32px; }
.journey-avatar { font-size: 48px; }
.question-companion { position: absolute; z-index: 2; top: -28px; left: -31px; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%; font-size: 57px; transform: rotate(-5deg); }
.question-companion img { animation: gwanook-companion 3s ease-in-out infinite; }
.player-stage { position: relative; }
@keyframes gwanook-companion { 0%,100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(3deg) scale(1.06); } }

@media (max-width: 700px) {
  .site-header { align-items: center; }
  .language-form { width: auto; margin-left: auto; }
  .site-nav { order: 3; width: 100%; justify-content: flex-end; }
  .customizer-grid { grid-template-columns: 1fr; }
  .identity-preview > .avatar-badge { width: 86px; height: 86px; }
  .identity-preview strong { font-size: 20px; }
  .question-companion { position: relative; top: auto; left: auto; float: left; width: 64px; height: 64px; margin: -9px 14px 8px -7px; font-size: 43px; }
}
@media (prefers-reduced-motion: reduce) { .question-companion img { animation: none; } }