:root{
  --purple:#6c35df;
  --purple-dark:#44209b;
  --purple-soft:#f2edff;
  --teal:#19c8c7;
  --teal-dark:#0ba3aa;
  --yellow:#ffbe22;
  --orange:#ff8b22;
  --pink:#f0509a;
  --green:#73d13d;
  --ink:#182040;
  --muted:#6f7897;
  --line:#e4e7f1;
  --surface:#ffffff;
  --bg:#f7f7fc;
  --danger:#ef5350;
  --shadow:0 12px 35px rgba(63,39,125,.14);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,"Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);background:
radial-gradient(circle at 10% 0%,#f1eaff 0,transparent 28%),
linear-gradient(#fbfbff,#f7f7fc)}
button{font:inherit}
button:focus-visible{outline:4px solid rgba(25,200,199,.35);outline-offset:3px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.app-shell{width:min(1540px,calc(100% - 24px));margin:14px auto 24px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px}
.game-card{position:relative;min-width:0;background:#fff;border:1px solid #e7e8f3;border-radius:28px;padding:14px;box-shadow:var(--shadow);overflow:hidden}
.question-row{position:relative;z-index:5;display:grid;grid-template-columns:120px 1fr 120px 56px;gap:12px;align-items:center;margin-bottom:10px}
.question-badge,.speed-bonus{border-radius:18px;padding:10px 12px;text-align:center;color:#fff;font-size:.77rem;font-weight:800}
.question-badge{background:linear-gradient(145deg,#7046ea,#5730bd)}
.question-badge strong{display:block;font-size:1.15rem;margin-top:2px}
.speed-bonus{background:linear-gradient(145deg,#5531bb,#331c83)}
.expression{justify-self:center;min-width:min(520px,100%);text-align:center;padding:14px 30px;border-radius:24px;background:#fff;
border:4px solid #8b49ee;box-shadow:0 9px 0 #492497,0 14px 28px rgba(75,34,151,.22);
font-size:clamp(2rem,4vw,3.9rem);font-weight:1000;color:#342081;letter-spacing:1px}
.icon-btn{border:0;background:var(--purple-soft);color:var(--purple-dark);width:56px;height:56px;border-radius:18px;font-size:1.35rem;cursor:pointer}
.arena{position:relative;height:640px;border-radius:28px;overflow:hidden;background:
linear-gradient(180deg,#53ccf6 0 36%,#7fdcdd 36% 38%,#7252d4 38% 100%)}
.arena:before{content:"";position:absolute;inset:0;background:
radial-gradient(circle at 12% 23%,rgba(255,255,255,.9) 0 4%,transparent 4.2%),
radial-gradient(circle at 83% 17%,rgba(255,255,255,.8) 0 4%,transparent 4.2%),
linear-gradient(115deg,transparent 0 50%,rgba(255,255,255,.18) 51%,transparent 52%);
opacity:.55}
.arena-toolbar{position:absolute;z-index:9;left:50%;top:18px;transform:translateX(-50%);display:flex;gap:10px;flex-wrap:wrap;justify-content:center;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.28)}
.stadium-lines{position:absolute;left:0;right:0;top:210px;height:110px;background:
linear-gradient(180deg,rgba(55,40,133,.22),rgba(255,255,255,.16)),
repeating-linear-gradient(90deg,rgba(255,255,255,.25) 0 10px,transparent 10px 28px);
clip-path:polygon(0 35%,100% 0,100% 90%,0 100%)}
.finish-flags{position:absolute;right:28px;top:210px;font-size:42px;color:#fff;filter:drop-shadow(0 5px 4px rgba(0,0,0,.2));opacity:.75}
.gate-row{position:absolute;left:50%;top:150px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(3,190px);gap:42px;z-index:4}
.gate{
  height:176px;border-radius:28px 28px 16px 16px;border:12px solid currentColor;background:rgba(255,255,255,.94);
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.75),0 16px 0 rgba(32,29,84,.13),0 18px 30px rgba(31,28,78,.16);
  display:grid;place-items:center;position:relative;cursor:pointer;transition:.18s transform,.18s filter
}
.gate:hover{transform:translateY(-6px);filter:brightness(1.04)}
.gate:active{transform:translateY(-1px) scale(.98)}
.gate strong{font-size:4rem;color:#25305f;text-shadow:0 3px 0 #fff}
.gate-number{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:currentColor;color:#fff;border:5px solid #fff;font-weight:1000;font-size:1.25rem;box-shadow:0 5px 12px rgba(0,0,0,.13)}
.gate-1{color:#7252d4}.gate-2{color:#18bfc6}.gate-3{color:#ff9f19}
.gate.correct{animation:gateCorrect .55s ease;box-shadow:0 0 0 7px #8cf03e,0 0 45px #8cf03e}
.gate.wrong{animation:gateWrong .42s ease;box-shadow:0 0 0 7px #ff6b68}
@keyframes gateCorrect{50%{transform:scale(1.08)}}
@keyframes gateWrong{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.lane-lines{position:absolute;inset:325px 0 0;display:grid;grid-template-columns:repeat(3,1fr);pointer-events:none}
.lane-lines span{border-right:4px solid rgba(255,255,255,.7);transform:perspective(200px) rotateX(15deg)}
#metiRunner{position:absolute;z-index:6;width:230px;left:50%;bottom:82px;transform:translateX(-50%);filter:drop-shadow(0 14px 12px rgba(26,25,75,.24));user-select:none;pointer-events:none;transition:left .42s cubic-bezier(.2,.8,.2,1),bottom .25s ease,transform .25s ease,filter .25s ease;animation:runBob .38s infinite alternate ease-in-out}
@keyframes runBob{from{margin-bottom:0}to{margin-bottom:10px}}
#metiRunner.sprint{animation-duration:.2s;filter:drop-shadow(0 16px 16px rgba(108,53,223,.38))}
#metiRunner.hit{animation:hit .45s ease}
@keyframes hit{35%{transform:translateX(-50%) rotate(-10deg) scale(.92)}70%{transform:translateX(-50%) rotate(5deg)}}
.runner-shadow{position:absolute;z-index:2;width:170px;height:32px;border-radius:50%;left:50%;bottom:84px;transform:translateX(-50%);background:rgba(35,30,96,.22);filter:blur(8px);transition:left .42s cubic-bezier(.2,.8,.2,1)}
.speed-lines{position:absolute;left:7%;bottom:180px;width:250px;height:120px;opacity:.7;background:
repeating-linear-gradient(165deg,transparent 0 13px,rgba(255,255,255,.75) 14px 17px,transparent 18px 30px);
clip-path:polygon(0 0,100% 35%,100% 65%,0 100%);animation:speed 1s linear infinite}
@keyframes speed{to{transform:translateX(30px)}}
.timer-strip{position:absolute;z-index:8;left:50%;bottom:14px;transform:translateX(-50%);width:min(650px,86%);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 14px;border-radius:20px;background:rgba(53,27,133,.92);color:#fff;box-shadow:0 8px 24px rgba(33,19,88,.2)}
.timer-track{height:18px;background:#4f309c;border-radius:999px;padding:3px}
.timer-track i{display:block;height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#21d8d0,#68f2e4);transition:width .1s linear}
.timer-strip strong{min-width:58px;color:#ffe44f}
.soft-btn,.primary-btn,.new-game-btn{border:0;border-radius:16px;padding:12px 22px;font-weight:900;cursor:pointer;transition:.16s transform,.16s box-shadow}
.soft-btn{background:#f4f1ff;color:#7a56d5;border:1px solid #ddd3ff}
.primary-btn{background:linear-gradient(145deg,#7a3ceb,#5a2ad0);color:#fff;box-shadow:0 7px 14px rgba(94,43,211,.22)}
.soft-btn:hover,.primary-btn:hover,.new-game-btn:hover,.op-btn:hover{transform:translateY(-2px)}
.side-panel{display:flex;flex-direction:column;gap:12px}
.panel-card{background:#fff;border:1px solid #e7e7f2;border-radius:24px;padding:16px;box-shadow:0 8px 24px rgba(48,41,96,.07)}
.panel-title{font-size:.92rem;font-weight:950;text-transform:uppercase;color:#5c35b9;margin-bottom:12px;letter-spacing:.25px}
.level-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.level{border:1px solid #e0e1ee;border-radius:15px;background:#fff;padding:12px 5px;font-weight:900;color:#555e7f;cursor:pointer}
.level.active[data-level="easy"]{background:linear-gradient(#27d7d0,#12b8b5);color:#fff;border-color:transparent}
.level.active[data-level="medium"]{background:linear-gradient(#ffc832,#ff9c17);color:#fff;border-color:transparent}
.level.active[data-level="hard"]{background:linear-gradient(#8a4af0,#6330d3);color:#fff;border-color:transparent}
.ops-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.op-btn{border:1px solid #d8def2;background:#f6f8ff;color:#5438b2;border-radius:16px;padding:12px 0;font-size:1.2rem;font-weight:1000;cursor:pointer}
.op-btn.active{background:linear-gradient(145deg,#4a73ff,#16c7c6);border-color:transparent;color:#fff;box-shadow:0 8px 18px rgba(63,94,255,.18)}
.card-note{margin:0;color:#717b98;font-size:.84rem;line-height:1.4}
.new-game-btn{width:100%;background:linear-gradient(#24d5ce,#12aaa9);color:#fff;font-size:1.05rem;box-shadow:0 7px 14px rgba(18,170,169,.2)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats-grid article{background:#fff;border:1px solid #e7e7f2;border-radius:20px;padding:14px 8px;text-align:center;box-shadow:0 8px 20px rgba(48,41,96,.06)}
.stats-grid article span{font-size:1.25rem}.stats-grid article small{display:block;margin:4px 0;color:#727997;font-weight:800}.stats-grid article strong{font-size:1.6rem;color:#4924a6}
.progress-head{display:flex;justify-content:space-between;align-items:center}
.progress-track{height:10px;background:#eeeaf7;border-radius:999px;margin-top:10px;overflow:hidden}
.progress-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7a35eb,#5f23d2);transition:width .25s}
.meti-tip{background:linear-gradient(145deg,#fbf9ff,#f3eeff);border-color:#d9c9ff}
.tip-body{display:grid;grid-template-columns:105px 1fr;gap:10px;align-items:center}
.tip-body img{width:105px;max-height:135px;object-fit:contain;user-select:none}
.tip-body p{margin:0;background:#fff;padding:15px;border-radius:18px;min-height:94px;display:flex;align-items:center;font-weight:850;color:#5532a5;line-height:1.4}
.modal{position:fixed;inset:0;z-index:100;background:rgba(21,15,49,.48);display:grid;place-items:center;padding:20px}
.modal[hidden]{display:none}
.modal-card{width:min(420px,100%);background:#fff;border-radius:28px;padding:30px;text-align:center;box-shadow:0 30px 80px rgba(21,15,49,.25)}
.finish-icon{font-size:4rem}.modal-card h2{margin:10px 0;color:#4d25ad}.modal-card p{color:#646b87;line-height:1.5}
@media(max-width:1100px){
  .layout{grid-template-columns:1fr}
  .side-panel{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .stats-grid{grid-column:span 2}.meti-tip{grid-column:span 2}
  .new-game-btn{height:100%}.arena{height:590px}.gate-row{grid-template-columns:repeat(3,170px);gap:28px}
}
@media(max-width:720px){
  .app-shell{width:min(100% - 12px,1540px);margin:8px auto 16px}
  .question-row{grid-template-columns:72px 1fr 78px 48px;gap:6px}
  .question-badge,.speed-bonus{padding:8px 5px;font-size:.62rem}.question-badge strong{font-size:.9rem}
  .expression{padding:10px 8px;min-width:0;border-width:3px;font-size:2rem;border-radius:18px;box-shadow:0 6px 0 #492497}
  .icon-btn{width:48px;height:48px;border-radius:14px}
  .game-card{padding:8px;border-radius:20px}.arena{height:535px;border-radius:20px}
  .arena-toolbar{top:10px;width:calc(100% - 16px);padding:6px;gap:6px}
  .soft-btn,.primary-btn{padding:10px 12px;font-size:.86rem;flex:1}
  .gate-row{top:125px;width:94%;grid-template-columns:repeat(3,1fr);gap:10px}.gate{height:135px;border-width:8px;border-radius:20px 20px 12px 12px}.gate strong{font-size:2.25rem}.gate-number{top:-23px;width:40px;height:40px;font-size:1rem}
  .lane-lines{inset:295px 0 0}
  #metiRunner{width:175px;bottom:78px}.runner-shadow{width:130px}.speed-lines{width:150px}.timer-strip{width:94%;bottom:10px}
  .side-panel{grid-template-columns:1fr}.stats-grid,.meti-tip{grid-column:auto}.stats-grid article strong{font-size:1.3rem}.tip-body{grid-template-columns:80px 1fr}.tip-body img{width:80px}.tip-body p{min-height:76px;padding:12px;font-size:.9rem}
}
@media(max-width:430px){
  .expression{font-size:1.7rem}.arena{height:500px}.gate-row{top:115px}.gate{height:118px}.gate strong{font-size:1.9rem}
  .arena-toolbar{display:grid;grid-template-columns:repeat(3,1fr)}
  #metiRunner{width:145px;bottom:75px}.timer-strip{grid-template-columns:auto 1fr auto;padding:8px 10px}.timer-track{height:15px}
}


@media(max-width:720px){
  .layout{display:flex;flex-direction:column;gap:10px}
  .side-panel{display:contents}
  .level-card{order:1}
  .ops-card{order:2}
  .new-game-btn{order:3}
  .game-card{order:4}
  .stats-grid{order:5}
  .progress-card{order:6}
  .meti-tip{order:7}
  .level-card,.ops-card{padding:12px;border-radius:18px}
  .level-card .panel-title,.ops-card .panel-title{margin-bottom:8px;font-size:.82rem}
  .level-tabs .level,.op-btn{padding:10px 4px}
  .new-game-btn{border-radius:14px;padding:12px 16px;margin-bottom:2px}
  .card-note{font-size:.76rem}
}


.result-card{
  width:min(470px,100%);
  border:6px solid transparent;
  padding:24px 28px 28px;
  transition:border-color .2s ease,background .2s ease;
  overflow:hidden;
}
.finish-badge{
  width:58px;height:58px;margin:-4px auto 4px;border-radius:50%;display:grid;place-items:center;
  font-size:1.9rem;background:#fff;box-shadow:0 7px 20px rgba(35,28,77,.12)
}
.finish-meti{
  display:block;width:150px;height:150px;object-fit:contain;margin:0 auto 2px;
  filter:drop-shadow(0 10px 12px rgba(44,33,94,.14));user-select:none
}
.result-card h2{font-size:1.75rem;margin:4px 0 9px}
.correct-pill{
  width:max-content;margin:0 auto 12px;border-radius:999px;padding:8px 16px;background:#fff;
  box-shadow:0 5px 16px rgba(52,42,92,.09);display:flex;align-items:baseline;gap:5px
}
.correct-pill strong{font-size:1.7rem;line-height:1;color:#4d25ad}
.correct-pill span{font-size:.9rem;font-weight:850;color:#757b94}
.result-card #finishText{font-size:1rem;font-weight:760;margin:0 auto 10px;max-width:370px;line-height:1.5}
.finish-stats{font-size:.84rem!important;font-weight:750!important;margin:0 0 18px!important;color:#737a91!important}
.result-low{border-color:#ef5350;background:linear-gradient(180deg,#fff 0,#fff7f7 100%)}
.result-low h2,.result-low .correct-pill strong{color:#d83d3a}
.result-low .finish-badge{background:#ffe7e6}
.result-medium{border-color:#ff9f1c;background:linear-gradient(180deg,#fff 0,#fff9ee 100%)}
.result-medium h2,.result-medium .correct-pill strong{color:#dd7b00}
.result-medium .finish-badge{background:#fff0ce}
.result-high{border-color:#35b85a;background:linear-gradient(180deg,#fff 0,#f2fff5 100%)}
.result-high h2,.result-high .correct-pill strong{color:#239447}
.result-high .finish-badge{background:#ddf8e5}
@media(max-width:480px){
  .result-card{padding:18px 18px 22px;border-width:5px}
  .finish-meti{width:125px;height:125px}
  .result-card h2{font-size:1.5rem}
}


.confetti-layer{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.modal-card{position:relative;z-index:1}
.confetti-piece{
  position:absolute;top:-24px;left:var(--x);width:var(--w);height:var(--h);
  border-radius:3px;background:var(--c);opacity:.95;
  animation:confettiFall var(--duration) cubic-bezier(.18,.74,.31,1) var(--delay) forwards;
  will-change:transform,opacity;
}
.confetti-piece.round{border-radius:50%}
.confetti-piece.ribbon{height:5px;border-radius:999px}
@keyframes confettiFall{
  0%{transform:translate3d(0,-8vh,0) rotate(0deg);opacity:0}
  8%{opacity:1}
  55%{transform:translate3d(var(--drift),48vh,0) rotate(var(--spin-mid))}
  100%{transform:translate3d(var(--drift-end),108vh,0) rotate(var(--spin));opacity:.95}
}



html,body{min-height:100%;}
body{overflow-x:hidden;}
.app-shell{
  width:min(1440px,92vw);
  margin:clamp(8px,2vh,18px) auto;
}
.layout{
  grid-template-columns:minmax(0,1fr) clamp(280px,20vw,320px);
  gap:14px;
  align-items:stretch;
}
.game-card{
  padding:10px;
  border-radius:24px;
}
.question-row{
  grid-template-columns:105px 1fr 105px 50px;
  gap:9px;
  margin-bottom:8px;
}
.question-badge,.speed-bonus{padding:8px 9px;border-radius:15px;font-size:.70rem}
.question-badge strong{font-size:1rem}
.expression{
  min-width:min(500px,100%);
  padding:10px 24px;
  border-radius:20px;
  border-width:3px;
  box-shadow:0 7px 0 #492497,0 10px 20px rgba(75,34,151,.18);
  font-size:clamp(2rem,3.2vw,3.15rem);
}
.icon-btn{width:50px;height:50px;border-radius:15px}
.arena{
  height:clamp(455px,61vh,555px);
  min-height:455px;
  border-radius:24px;
}
.arena-toolbar{
  top:12px;
  gap:7px;
  padding:6px;
  border-radius:15px;
  white-space:nowrap;
}
.arena-toolbar .soft-btn,.arena-toolbar .primary-btn{
  padding:9px 15px;
  border-radius:13px;
  font-size:.86rem;
}
.fullscreen-btn{min-width:116px}
.stadium-lines{top:34%;height:18%}
.finish-flags{top:35%;right:20px;font-size:34px}
.gate-row{
  top:26%;
  grid-template-columns:repeat(3,clamp(135px,12vw,165px));
  gap:clamp(22px,3vw,36px);
}
.gate{
  height:clamp(128px,18vh,154px);
  border-width:10px;
  border-radius:23px 23px 14px 14px;
}
.gate strong{font-size:clamp(2.5rem,3.5vw,3.35rem)}
.gate-number{top:-26px;width:44px;height:44px;border-width:4px;font-size:1.05rem}
.lane-lines{inset:53% 0 0}
#metiRunner{width:clamp(160px,15vw,205px);bottom:58px}
.runner-shadow{width:145px;height:27px;bottom:60px}
.speed-lines{bottom:135px;width:200px;height:95px}
.timer-strip{
  bottom:9px;
  width:min(600px,82%);
  padding:8px 12px;
  border-radius:16px;
}
.timer-track{height:15px}
.side-panel{gap:9px}
.panel-card{border-radius:19px;padding:11px 12px}
.panel-title{font-size:.80rem;margin-bottom:8px}
.level-tabs,.ops-tabs{gap:6px}
.level{padding:9px 4px;border-radius:12px;font-size:.85rem}
.op-btn{padding:9px 0;border-radius:12px;font-size:1.05rem}
.ops-tabs{margin-bottom:6px}
.card-note{font-size:.72rem;line-height:1.25}
.new-game-btn{padding:10px 16px;border-radius:14px;font-size:.93rem}
.stats-grid{gap:6px}
.stats-grid article{border-radius:16px;padding:9px 5px}
.stats-grid article span{font-size:1rem}
.stats-grid article small{margin:2px 0;font-size:.72rem}
.stats-grid article strong{font-size:1.28rem}
.progress-track{height:8px;margin-top:7px}
.tip-body{grid-template-columns:72px 1fr;gap:7px}
.tip-body img{width:72px;max-height:90px}
.tip-body p{padding:10px;border-radius:14px;min-height:68px;font-size:.80rem;line-height:1.28}


@media (min-width:1101px) and (max-height:850px){
  .app-shell{width:min(1400px,94vw);margin:7px auto}
  .arena{height:clamp(420px,58vh,500px);min-height:420px}
  .question-row{margin-bottom:6px}
  .expression{padding:8px 20px;font-size:clamp(1.8rem,3vw,2.8rem)}
  .panel-card{padding:9px 10px}
  .panel-title{margin-bottom:6px}
  .level{padding:7px 4px}.op-btn{padding:7px 0}
  .stats-grid article{padding:7px 4px}
  .tip-body img{width:62px;max-height:76px}
  .tip-body{grid-template-columns:62px 1fr}
  .tip-body p{min-height:58px;padding:8px;font-size:.75rem}
}


.app-shell:fullscreen,
.app-shell:-webkit-full-screen{
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  padding:12px;
  background:linear-gradient(135deg,#f8f5ff,#f2fbff);
  overflow:auto;
}
.app-shell:fullscreen .layout,
.app-shell:-webkit-full-screen .layout{
  min-height:calc(100vh - 24px);
  grid-template-columns:minmax(0,1fr) clamp(285px,20vw,330px);
}
.app-shell:fullscreen .game-card,
.app-shell:-webkit-full-screen .game-card{
  display:flex;
  flex-direction:column;
}
.app-shell:fullscreen .arena,
.app-shell:-webkit-full-screen .arena{
  flex:1;
  height:auto;
  min-height:500px;
}

@media(max-width:1100px){
  .app-shell{width:min(96vw,1000px)}
  .layout{grid-template-columns:1fr}
  .side-panel{display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .stats-grid,.meti-tip{grid-column:span 2}
  .arena{height:clamp(480px,61vh,560px)}
  .app-shell:fullscreen .layout,.app-shell:-webkit-full-screen .layout{grid-template-columns:1fr}
}
@media(max-width:720px){
  .app-shell{width:calc(100% - 10px);margin:5px auto 12px}
  .side-panel{order:-1;display:grid;grid-template-columns:1fr}
  .stats-grid,.meti-tip{grid-column:auto}
  .question-row{grid-template-columns:68px 1fr 66px 42px;gap:5px}
  .icon-btn{width:42px;height:42px}
  .arena{height:500px;min-height:500px}
  .arena-toolbar{width:calc(100% - 12px);display:grid;grid-template-columns:repeat(4,1fr);gap:5px;top:7px}
  .arena-toolbar .soft-btn,.arena-toolbar .primary-btn{padding:8px 5px;font-size:.72rem;min-width:0}
  .fullscreen-btn{min-width:0}
  .gate-row{top:25%;width:94%;grid-template-columns:repeat(3,1fr);gap:9px}
  #metiRunner{width:150px}
}
@media(max-width:470px){
  .arena-toolbar{grid-template-columns:repeat(2,1fr)}
  .arena{height:520px;min-height:520px}
  .gate-row{top:30%}
}



@media (min-width:1101px){
  .arena{
    height:clamp(570px,70vh,650px);
    min-height:570px;
  }
  #metiRunner{
    bottom:52px;
  }
  .runner-shadow{
    bottom:54px;
  }
}


@media (min-width:1101px) and (max-height:850px){
  .arena{
    height:clamp(515px,68vh,575px);
    min-height:515px;
  }
  #metiRunner{
    width:clamp(160px,13vw,185px);
    bottom:45px;
  }
  .runner-shadow{
    bottom:47px;
    width:135px;
  }
  .speed-lines{
    bottom:120px;
  }
}


.app-shell:fullscreen .arena,
.app-shell:-webkit-full-screen .arena{
  min-height:620px;
}
.question-row{
  grid-template-columns:105px minmax(0,1fr) max-content 50px;
}
.expression{
  min-width:0;
  width:min(100%,560px);
  max-width:560px;
}
.speed-bonus{
  white-space:nowrap;
}

@media(max-width:720px){
  .layout{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .side-panel{
    display:contents;
  }
  .level-card{order:1}
  .ops-card{order:2}
  .new-game-btn{order:3}
  .game-card{order:4}
  .stats-grid{order:5}
  .progress-card{order:6}
  .meti-tip{order:7}

  .question-row{
    display:grid;
    grid-template-columns:64px minmax(0,1fr) 42px;
    grid-template-areas:
      "question expression sound"
      "question speed sound";
    gap:5px 7px;
    align-items:center;
    margin-bottom:8px;
  }
  .question-badge{
    grid-area:question;
    align-self:stretch;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
  }
  .expression{
    grid-area:expression;
    width:100%;
    max-width:none;
    min-width:0;
    padding:9px 8px;
    font-size:clamp(1.25rem,6.3vw,1.75rem);
    line-height:1.08;
    white-space:nowrap;
    box-shadow:0 5px 0 #492497,0 8px 14px rgba(75,34,151,.15);
  }
  .speed-bonus{
    grid-area:speed;
    justify-self:end;
    width:auto;
    min-width:88px;
    padding:5px 8px;
    font-size:.58rem;
    border-radius:12px;
  }
  .icon-btn{
    grid-area:sound;
    width:42px;
    height:42px;
    padding:0;
  }
  .stats-grid{
    width:100%;
  }
  .progress-card,.meti-tip{
    width:100%;
  }
}

@media(max-width:390px){
  .question-row{
    grid-template-columns:58px minmax(0,1fr) 38px;
    gap:4px 5px;
  }
  .question-badge{
    padding:6px 4px;
  }
  .expression{
    font-size:1.18rem;
    padding:8px 5px;
  }
  .speed-bonus{
    min-width:78px;
    font-size:.52rem;
    padding:4px 6px;
  }
  .icon-btn{
    width:38px;
    height:38px;
    font-size:1rem;
  }
}