:root{
  --cyan:#42bceb;
  --cyan2:#2186c4;
  --gold:#ffc83d;
  --green:#63b83b;
  --red:#e95454;
  --ink:#122033;
  --panel:rgba(18,32,51,.96);
  --ease:steps(2,end);
}

html,body{background:#122033;color:#fff;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
button{image-rendering:pixelated}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:4px solid #fff176;outline-offset:3px}
.app{background:#42bceb}

.home-screen{background:#2d8dcc}
.home-bg,.result-bg{
  background-image:url("./concepts/block-sandbox-direction-v1.png")!important;
  background-position:center center!important;
  image-rendering:auto;
  animation:none!important;
  transform:none!important;
}
.home-shade{background:linear-gradient(90deg,rgba(14,29,44,.92) 0%,rgba(14,29,44,.72) 35%,rgba(14,29,44,.12) 72%),linear-gradient(0deg,rgba(10,23,36,.6),transparent 55%)}
.home-top{top:3vh}
.brand>i{
  width:48px;height:48px;border:4px solid #8a5432;border-radius:4px;
  background:#ffc83d;color:#4e3515;box-shadow:inset -5px -5px #e79b20,5px 5px 0 rgba(13,29,43,.5)
}
.brand small{color:#d9edfa}
.eyebrow{color:#c6f2ff;font-weight:800;letter-spacing:.08em}
.eyebrow span{height:6px;background:#63b83b;box-shadow:0 4px #2f7e32}
.home-copy{top:22vh;width:620px}
.home-copy h1{letter-spacing:-.04em;text-shadow:5px 5px 0 #122033,8px 8px 0 rgba(0,0,0,.25)}
.home-copy h1 em{color:#ffc83d;letter-spacing:.04em;text-shadow:3px 3px 0 #8a5432}
.home-copy>p{color:#f2fbff;font-weight:650;text-shadow:0 2px 2px rgba(0,0,0,.75)}
.hero-showcase{display:none}
.home-stats div,.feature-row span{
  border:3px solid #243447;border-radius:4px;background:#122033;
  box-shadow:inset 0 -4px rgba(0,0,0,.22),4px 4px 0 rgba(0,0,0,.24)
}
.home-stats b{color:#ffc83d}.home-stats span,.feature-row{color:#e9f6fc}

.primary,.secondary,.ghost,.glass{
  border-radius:4px;border:3px solid #243447;
  box-shadow:inset 0 -5px rgba(0,0,0,.18),4px 4px 0 rgba(0,0,0,.25);
  transition:transform .08s ease,filter .12s ease;
}
.primary{background:#ffc83d;color:#352712}
.secondary{background:#8a5432;color:#fff5d3;border-color:#4b321f}
.ghost,.glass{background:#122033;color:#effaff;border-color:#405d73}
.primary:hover,.secondary:hover,.ghost:hover,.glass:hover{transform:translateY(-2px);filter:brightness(1.1)}
.primary:active,.secondary:active,.ghost:active,.glass:active{transform:translate(3px,3px);box-shadow:inset 0 -2px rgba(0,0,0,.2),1px 1px 0 rgba(0,0,0,.25)}

.game-screen{background:#42bceb}
.game-screen canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.hud{
  grid-template-columns:minmax(210px,260px) minmax(260px,1fr) auto;
  gap:18px;padding:10px 12px;border:4px solid #405d73;border-radius:4px;
  background:#122033;box-shadow:inset 0 -5px #0a1724,7px 7px 0 rgba(0,0,0,.28);backdrop-filter:none
}
.zone-info span{border:2px solid #405d73;border-radius:2px;background:#243447;color:#83dcff}
.progress{height:14px;border:3px solid #405d73;border-radius:1px;background:#09131e;box-shadow:none}
.progress i{border-radius:0;background:repeating-linear-gradient(90deg,#63b83b 0 18px,#83d34d 18px 22px);box-shadow:none}
.progress em{color:#ffc83d;text-shadow:2px 2px #6c471b}
.hud-values>div:not(.hearts){border-left:3px solid #405d73}
.hud-values small{font-size:10px;color:#b7d0df}.hud-values b{font-size:19px}
.hearts{gap:5px}.hearts i{width:19px;height:19px;transform:none;background:#e95454;box-shadow:inset -4px -4px #ad2f3d}
.hearts i:before,.hearts i:after{display:none}.hearts i.off{background:#40505d;box-shadow:inset -4px -4px #26323c}
.icon-btn{width:44px;height:44px;border:3px solid #405d73;border-radius:3px;background:#243447}
.buff{border:3px solid #405d73;border-radius:3px;background:#122033;box-shadow:4px 4px rgba(0,0,0,.22)}
.controls-hint span,.near-hint{border:3px solid #405d73;border-radius:3px;background:#122033;color:#f3f9fc}
kbd{border:2px solid #6a879c;border-radius:2px;background:#243447;box-shadow:0 3px #09131e}

.overlay,.modal{background:rgba(8,17,26,.74);backdrop-filter:none}
.question-card,.roulette-card,.small-card,.panel,.result-card{
  border:5px solid #405d73;border-radius:5px;background:#122033;
  box-shadow:inset 0 0 0 4px #243447,10px 10px 0 rgba(0,0,0,.38);backdrop-filter:none
}
.question-card:before{content:"";display:block;height:10px;margin:-9px -14px 18px;background:repeating-linear-gradient(90deg,#8a5432 0 26px,#a6683b 26px 52px)}
.question-top small,.panel-head small{color:#83dcff}
.question-timer{border:4px solid #405d73;border-radius:3px;background:#243447;box-shadow:none}
.question-timer:before{border-radius:0;background:#122033}
.quiz-answer{border:4px solid #405d73;border-radius:3px;background:#243447;box-shadow:inset 0 -5px rgba(0,0,0,.18)}
.quiz-answer:hover,.quiz-answer.selected{border-color:#ffc83d;transform:translateY(-2px);box-shadow:inset 0 -5px rgba(0,0,0,.18),0 0 0 3px #6c471b}
.quiz-answer i{border:3px solid #6c471b;border-radius:2px;background:#ffc83d;color:#352712}
.quiz-answer.correct{border-color:#83d34d;background:#2f7e32}.quiz-answer.wrong{border-color:#ff7777;background:#8e2f39}
.voice-panel,.import-box,.wrong-item,.help-grid>div,.level-card,.result-grid div{border:3px solid #405d73;border-radius:3px;background:#1b2d40}
.level-card:before{opacity:.36}.level-card.selected{border-color:#ffc83d;box-shadow:0 0 0 4px #6c471b,7px 7px rgba(0,0,0,.28)}
.subject,.dropzone,.segments,.import-box textarea,.profile-row input,.voice-setting input{border-radius:3px}
.subject.on{border-color:#83d34d;background:#2f6335;box-shadow:none}
.segments button.on{background:#ffc83d;color:#352712}
.result-bg{filter:brightness(.7) saturate(.9)}
.result-hero{display:none}.result-card{padding:34px 40px;width:min(760px,88vw)}
.result-stars,.result-score b{color:#ffc83d}

@media(max-width:1000px){
  .hud{left:12px;right:12px;top:12px;grid-template-columns:1fr auto;grid-template-areas:"zone values" "mission mission";gap:8px 12px;padding:8px}
  .zone-info{grid-area:zone;min-width:0}.zone-info b{font-size:15px;white-space:nowrap}.zone-info span{font-size:8px;padding:5px}
  .mission{grid-area:mission}.mission>div:first-child{font-size:9px}.hud-values{grid-area:values;gap:4px}.hud-values>div:not(.hearts){min-width:42px;padding:4px 6px}.hud-values small{display:none}.hud-values b{font-size:14px}.hearts i{width:13px;height:13px}.icon-btn{width:36px;height:36px}
  .buff-bar{top:110px}.class-tip{display:none}.controls-hint{gap:5px;left:10px}.controls-hint span{padding:4px;font-size:8px}
  .home-copy{left:5vw;top:18vh;width:min(88vw,560px)}.home-copy h1{font-size:clamp(44px,10vw,70px)}.home-copy>p{width:auto;font-size:15px}.feature-row{flex-wrap:wrap}
}

@media(max-width:620px){
  .home-top{left:14px;right:14px}.brand small{display:none}.top-actions button{padding:8px}
  .home-buttons{flex-direction:column;align-items:stretch}.hero-btn.primary,.hero-btn.secondary{width:100%;min-width:0}.home-stats{display:none}
  .question-card{width:94vw;padding:18px}.answer-list,.answer-list.two{grid-template-columns:1fr}.quiz-answer{min-height:62px}.quiz-answer span{font-size:16px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}