:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#252c21;background:#293c2b;font-synthesis:none}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-width:280px;min-height:100vh;min-height:100dvh;overflow-x:hidden;background:linear-gradient(#85bfdf 0 180px,transparent 180px),repeating-linear-gradient(90deg,#344f2d 0 28px,#3a5631 28px 56px)}body:before{content:"";position:absolute;inset:155px 0 auto;height:85px;background:linear-gradient(#69a047 0 24px,#4e7d35 24px 32px,#725438 32px);box-shadow:0 8px 0 #423827;pointer-events:none}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.shell{width:min(1080px,calc(100% - 40px));margin:auto;position:relative}.brand{display:flex;align-items:center;gap:16px;min-height:145px;padding:24px 0 28px;color:#18311c;text-shadow:1px 2px 0 #b7d9e7}.brand-mark{flex:none;width:48px;height:48px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-9deg);filter:drop-shadow(4px 5px 0 #253d2a)}.brand-mark span{background:#8cc64d;border-top:3px solid #b9e57b;border-left:3px solid #a6d568;border-bottom:3px solid #4b752c;border-right:3px solid #5f8936}.brand-mark span:nth-child(2){background:#6faa3c}.brand-mark span:nth-child(3){background:#589035}.brand-overline{display:block;font-size:10px;font-weight:900;letter-spacing:.18em}.brand h1{margin:3px 0 0;font-size:clamp(19px,3vw,29px);font-weight:1000;letter-spacing:.04em}.brand h1 em{font-style:normal;color:#245d29}.edition{margin-left:auto;white-space:nowrap;padding:9px 11px;border:3px solid #243922;background:#d9e8ac;box-shadow:inset 2px 2px 0 #fff9cd,inset -2px -2px 0 #8ba361,4px 5px 0 #243922;font-size:11px;font-weight:1000;letter-spacing:.08em;text-shadow:none}.panel{position:relative;border:4px solid #1f251d;background:#b9ad8c;box-shadow:inset 4px 4px 0 #e6dbc0,inset -4px -4px 0 #736b56,0 12px 0 #1b241b,0 24px 30px #10201580}.setup-panel,.quiz-panel{padding:clamp(20px,4vw,42px)}.hero{position:relative;display:grid;grid-template-columns:1.35fr .65fr;gap:16px;overflow:hidden;min-height:275px;margin:-10px -10px 32px;padding:clamp(22px,4vw,42px);border:3px solid #283e26;background:linear-gradient(#91c7e8 0 64%,#75a84d 64% 69%,#725438 69%);box-shadow:inset 3px 3px 0 #d0ecf5,inset -3px -3px 0 #4c3828,5px 6px 0 #6b604b;color:#1c3423}.hero-copy{position:relative;z-index:2}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:1000;letter-spacing:.1em}.square{display:inline-block;width:9px;height:9px;background:#507d37;box-shadow:2px 2px 0 #263a24}.hero h2{margin:17px 0 10px;font-size:clamp(32px,5.6vw,64px);line-height:1.14;font-weight:1000;letter-spacing:-.04em;text-shadow:2px 3px 0 #e2f3ed}.hero h2 span{color:#397438}.intro{max-width:625px;margin:0;font-size:14px;font-weight:650;line-height:1.75}.version-note{display:inline-block;margin:15px 0 0;padding:9px 12px;border:2px solid #354530;background:#f1e7c7;box-shadow:inset 2px 2px 0 #fff8dc,3px 4px 0 #3d5032;font-size:12px;font-weight:900}.hero-scene{position:relative;min-height:190px}.sun{position:absolute;top:12px;right:18%;width:48px;height:48px;background:#fceca9;box-shadow:0 0 0 8px #fceca94d}.cloud{position:absolute;width:75px;height:24px;background:#e7f7f5;box-shadow:24px -13px 0 #e7f7f5,47px 0 0 #e7f7f5,0 5px 0 #b7deeb,47px 5px 0 #b7deeb}.cloud-one{top:40px;left:10px}.cloud-two{top:96px;right:-15px;transform:scale(.65)}.block{position:absolute;width:95px;height:80px;background:repeating-linear-gradient(90deg,#775638 0 18px,#6b4b31 18px 36px);border:4px solid #483923;box-shadow:inset 0 15px 0 #70a844,inset 0 22px 0 #477b31,9px 12px 0 #26452d}.block-front{right:16%;bottom:0;transform:rotate(5deg)}.block-back{right:46%;bottom:42px;transform:scale(.78) rotate(-7deg)}.block-small{right:2%;bottom:77px;transform:scale(.47) rotate(10deg)}.section-title{display:flex;align-items:center;gap:13px;margin:29px 0 16px;color:#292a20}.section-title:first-child{margin-top:0}.section-title span{display:grid;place-items:center;width:31px;height:31px;background:#424c35;color:#eff6d5;box-shadow:3px 3px 0 #262c20;font-size:12px;font-weight:1000}.section-title h3{margin:0;font-size:17px;font-weight:1000}.section-title:after{content:"";flex:1;height:3px;background:#8b846d;box-shadow:0 2px 0 #e7dbc0}.input-label{display:block;margin-bottom:10px;color:#353327;font-size:14px;font-weight:900}.input-label small{margin-left:7px;color:#5c5949;font-size:12px;font-weight:650}input[type=text]{width:100%;height:56px;padding:0 16px;border:3px solid #3e402e;border-radius:0;outline:none;background:#f6f0d9;box-shadow:inset 3px 3px 0 #c9bea1,inset -3px -3px 0 #fffbea,4px 5px 0 #67624e;color:#212b20;font-size:17px;font-weight:850;letter-spacing:.05em;appearance:none;-webkit-appearance:none}input[type=text]:focus{border-color:#397c35;box-shadow:inset 3px 3px 0 #c9bea1,inset -3px -3px 0 #fffbea,4px 5px 0 #31632f}input::placeholder{color:#918a74;font-weight:600;letter-spacing:0}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.choice-card{position:relative;display:block;min-width:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.choice-card input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}.choice-inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:116px;padding:16px 17px;border:3px solid #2c3628;background:#d7d1b8;box-shadow:inset 3px 3px 0 #f4efda,inset -3px -3px 0 #968d75,5px 6px 0 #4b4939;color:#262b22;transition:transform .1s,box-shadow .1s}.choice-card input:checked+.choice-inner{background:#a9d47a;box-shadow:inset 3px 3px 0 #d8f2aa,inset -3px -3px 0 #689842,5px 6px 0 #305829}.choice-card input:active+.choice-inner{transform:translate(3px,4px);box-shadow:inset 3px 3px 0 #9c987f,inset -3px -3px 0 #f4efda,2px 2px 0 #4b4939}.choice-card input:focus-visible+.choice-inner{outline:3px solid #204fca;outline-offset:5px}.choice-inner strong{margin:5px 0;font-size:18px;font-weight:1000}.choice-inner small{color:#4b5141;font-size:12px;line-height:1.4;font-weight:650}.choice-icon{color:#477a33;font-size:25px;line-height:1}.level-number{color:#477a33;font-size:13px;font-weight:1000;letter-spacing:.12em}.level-grid .choice-inner{min-height:107px}.primary-button,.ghost-button,.option{border-radius:0;appearance:none;-webkit-appearance:none;cursor:pointer}.primary-button,.ghost-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:55px;padding:12px 22px;border:3px solid #283b22;font-size:16px;font-weight:1000;line-height:1.35;transition:transform .1s,box-shadow .1s}.primary-button{background:#86bd53;box-shadow:inset 3px 3px 0 #c3e985,inset -3px -3px 0 #4f832d,5px 6px 0 #2b4629;color:#19311c}.ghost-button{background:#d6d0b6;box-shadow:inset 3px 3px 0 #f7efd8,inset -3px -3px 0 #97907a,5px 6px 0 #4e4b3c;color:#292e23}.primary-button:active:not(:disabled),.ghost-button:active:not(:disabled),.option:active{transform:translate(3px,4px);box-shadow:inset 3px 3px 0 #56763e,inset -3px -3px 0 #c5e6a2,2px 2px 0 #2b4629}.primary-button:focus-visible,.ghost-button:focus-visible,.option:focus-visible{outline:3px solid #204fca;outline-offset:5px}.primary-button:disabled,.ghost-button:disabled{opacity:.55;cursor:default}#start-button{width:calc(100% - 5px);margin:32px 5px 6px 0;justify-content:space-between}.error{padding:12px 14px;margin:18px 0 0;border:2px solid #733027;background:#f6c6a9;color:#5e241f;font-size:14px;font-weight:850}.quiz-panel{min-height:570px}.quiz-top,.question-meta,.quiz-actions{display:flex;align-items:center;justify-content:space-between;gap:14px}.quiz-top{color:#2a3a25;font-weight:900}.quiz-top>span:last-child{white-space:nowrap}.progress-track{height:15px;margin:23px 0 35px;border:3px solid #3a3a2e;background:#69644e;box-shadow:inset 2px 2px 0 #484634,3px 4px 0 #77705c}.progress-track>div{width:0;height:100%;background:repeating-linear-gradient(90deg,#81bd4c 0 15px,#96d25a 15px 30px);transition:width .2s}.question-meta{color:#514e3e;font-size:12px;font-weight:950;letter-spacing:.07em}.quiz-panel h2{max-width:860px;margin:18px 0 28px;color:#242b22;font-size:clamp(23px,3.3vw,35px);line-height:1.45;font-weight:950;overflow-wrap:anywhere}.options{display:grid;gap:14px}.option{display:flex;align-items:center;gap:15px;width:calc(100% - 5px);min-height:64px;padding:12px 15px;border:3px solid #333b2d;background:#e8e3cd;box-shadow:inset 3px 3px 0 #fffbe8,inset -3px -3px 0 #aaa28b,5px 6px 0 #5b5948;color:#242a21;text-align:left;font-size:16px;font-weight:750;line-height:1.45;overflow-wrap:anywhere}.option.selected{background:#afd47f;box-shadow:inset 3px 3px 0 #e1f4ad,inset -3px -3px 0 #739e4c,5px 6px 0 #3c5a32}.option span{display:grid;place-items:center;flex:none;width:30px;height:30px;border:2px solid #3b5132;background:#cad4ab;box-shadow:inset 2px 2px 0 #eef3d2,inset -2px -2px 0 #89996b;font-size:13px;font-weight:1000}.option.selected span{background:#608e3b;color:#fff;box-shadow:inset 2px 2px 0 #89bf50,inset -2px -2px 0 #40642c}.quiz-actions{margin-top:38px}.quiz-actions .primary-button{margin-left:auto}.result-panel{min-height:100vh;min-height:100dvh;display:grid;place-items:center}.result-panel>div{color:#e7f5af;font-size:clamp(70px,18vw,175px);font-weight:1000;text-shadow:5px 7px 0 #213921,9px 11px 0 #0f2517}.result-panel>div:after{content:" 分";font-size:.28em}footer{padding:29px 0 35px;padding-bottom:max(35px,env(safe-area-inset-bottom));color:#e3ecd1;text-align:center;font-size:12px;font-weight:750;text-shadow:1px 2px 0 #1a2919}footer span{margin:0 6px}.result-mode .brand,.result-mode footer{display:none}[hidden]{display:none!important}@media(hover:hover) and (pointer:fine){.primary-button:hover:not(:disabled){background:#9bd467}.ghost-button:hover:not(:disabled),.option:hover:not(.selected){background:#f1edda}.choice-card:hover .choice-inner{filter:brightness(1.06)}}@media(max-width:720px){.shell{width:min(100% - 24px,1080px)}.brand{min-height:112px;padding:15px 0 23px;gap:11px}.brand-mark{width:37px;height:37px}.brand-overline{font-size:8px;letter-spacing:.08em}.brand h1{font-size:clamp(15px,4.4vw,20px)}.edition{padding:6px;font-size:9px;box-shadow:inset 2px 2px 0 #fff9cd,inset -2px -2px 0 #8ba361,3px 4px 0 #243922}.setup-panel,.quiz-panel{padding:19px 16px 25px}.hero{display:block;min-height:auto;margin:-8px -5px 23px;padding:22px 18px 24px}.hero-scene{display:none}.hero h2{margin:15px 0 9px;font-size:clamp(31px,8.5vw,49px)}.intro{font-size:13px}.version-note{font-size:12px;line-height:1.5}.section-title{margin:27px 0 14px}.choice-grid{grid-template-columns:1fr;gap:13px}.choice-inner,.level-grid .choice-inner{min-height:74px;padding:12px 15px}.choice-inner strong{margin:2px 0;font-size:16px}.choice-icon{font-size:19px}.quiz-panel{min-height:calc(100vh - 140px);min-height:calc(100dvh - 140px)}.quiz-panel h2{margin-bottom:24px}.quiz-actions{flex-wrap:wrap;gap:13px}.quiz-actions button{flex:1 1 135px}.option{font-size:15px}}@media(max-width:360px){.shell{width:calc(100% - 16px)}.brand{gap:7px}.brand-mark{width:31px;height:31px}.edition{font-size:8px;padding:5px}.setup-panel,.quiz-panel{padding:16px 12px 22px}.hero{padding:18px 14px 20px}.hero h2{font-size:29px}.input-label small{display:block;margin:3px 0 0}.option{padding:10px 11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:0s!important}}
.hero { background:#91c7e8; border-bottom:9px solid #5f943d; }

/* Minecraft screenshots remain behind the inventory-like interface. */
body { background:#233627; }
body::before { display:none; }
.background-stage { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:#233627; }
.background-layer { position:absolute; inset:-8px; background-position:center; background-size:cover; filter:blur(3px) brightness(.76); will-change:transform; }
.background-wash { position:absolute; inset:0; background:linear-gradient(90deg,rgba(14,27,17,.36),rgba(14,27,17,.22)); }
.shell { z-index:1; }
.brand { color:#f8f5e5; text-shadow:2px 3px 0 #172b18,0 0 12px #102014; }
.brand h1 em { color:#c0ec73; }
.brand-mark { display:block; object-fit:cover; border:3px solid #233e20; background:#6aa347; box-shadow:inset 2px 2px 0 #b5e083,4px 5px 0 #142717; }
.mc-icon { image-rendering:pixelated; image-rendering:crisp-edges; flex:none; }
.panel { background:rgba(213,207,183,.84); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); }
.hero { background:rgba(25,44,34,.69); color:#f9f7e9; min-height:260px; grid-template-columns:minmax(0,1fr); }
.hero h2 { text-shadow:3px 4px 0 #152819; }
.hero h2 span { color:#b8e672; }
.hero .intro { color:#f2f5e6; text-shadow:1px 2px 2px #0a1b14; }
.eyebrow-icon { width:25px; height:25px; object-fit:contain; }
.choice-icon { width:34px; height:34px; object-fit:contain; }
.button-icon { width:23px; height:23px; object-fit:contain; }
.button-icon-back { transform:scaleX(-1); }
.choice-inner { background:#d9d5c4; }
.choice-card input:checked+.choice-inner { background:#b8d58b; }
.option { background:#e4e0d0; }
.option.selected { background:#bad58c; }
.version-note { color:#26341e; text-shadow:none; }
.is-transitioning .shell { pointer-events:none; }
@media(max-width:720px) {
  .background-layer { background-position:center; filter:blur(3px) brightness(.72); }
  .panel { background:rgba(217,211,189,.87); }
  .hero { min-height:auto; background:rgba(26,45,35,.76); }
  .choice-icon { width:29px; height:29px; }
}

/* Keep answer text opaque while the quiz chrome reveals the scenery. */
.edition {
  max-width:175px;
  white-space:normal;
  line-height:1.3;
  text-align:center;
  color:#1e291b;
}
.edition > span { display:block; white-space:nowrap; }
body.quiz-mode .brand-mark { opacity:.5; }
body.quiz-mode .edition {
  background:rgba(217,232,172,.5);
  border-color:rgba(36,57,34,.5);
  box-shadow:inset 2px 2px 0 rgba(255,249,205,.5),inset -2px -2px 0 rgba(139,163,97,.5),4px 5px 0 rgba(36,57,34,.5);
}
body.quiz-mode .quiz-panel {
  background:rgba(235,232,215,.5);
  border-color:rgba(31,37,29,.5);
  box-shadow:inset 4px 4px 0 rgba(230,219,192,.5),inset -4px -4px 0 rgba(115,107,86,.5),0 12px 0 rgba(27,36,27,.5),0 24px 30px rgba(16,32,21,.35);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
body.quiz-mode .quiz-panel .mc-icon { opacity:.5; }
body.quiz-mode .progress-track {
  border-color:rgba(58,58,46,.5);
  background:rgba(105,100,78,.5);
  box-shadow:inset 2px 2px 0 rgba(72,70,52,.5),3px 4px 0 rgba(119,112,92,.5);
}
body.quiz-mode .progress-track > div { background:rgba(129,189,76,.5); }
body.quiz-mode .option {
  background:rgba(241,239,226,.5);
  border-color:rgba(51,59,45,.5);
  box-shadow:inset 3px 3px 0 rgba(255,251,232,.5),inset -3px -3px 0 rgba(170,162,139,.5),5px 6px 0 rgba(91,89,72,.5);
  color:#182219;
  text-shadow:0 1px 2px rgba(255,255,248,.85);
}
body.quiz-mode .option.selected {
  background:rgba(175,212,127,.5);
  box-shadow:inset 3px 3px 0 rgba(225,244,173,.5),inset -3px -3px 0 rgba(115,158,76,.5),5px 6px 0 rgba(60,90,50,.5);
}
body.quiz-mode .option span {
  background:rgba(202,212,171,.5);
  border-color:rgba(59,81,50,.5);
  box-shadow:inset 2px 2px 0 rgba(238,243,210,.5),inset -2px -2px 0 rgba(137,153,107,.5);
}
body.quiz-mode .option.selected span { background:rgba(96,142,59,.5); color:#162718; }
body.quiz-mode .quiz-actions .primary-button {
  background:rgba(134,189,83,.5);
  border-color:rgba(40,59,34,.5);
  box-shadow:inset 3px 3px 0 rgba(195,233,133,.5),inset -3px -3px 0 rgba(79,131,45,.5),5px 6px 0 rgba(43,70,41,.5);
}
body.quiz-mode .quiz-actions .ghost-button {
  background:rgba(214,208,182,.5);
  border-color:rgba(40,59,34,.5);
  box-shadow:inset 3px 3px 0 rgba(247,239,216,.5),inset -3px -3px 0 rgba(151,144,122,.5),5px 6px 0 rgba(78,75,60,.5);
}
body.quiz-mode .quiz-actions .ghost-button:disabled { opacity:1; color:#596253; }
body.quiz-mode .quiz-actions .primary-button:active:not(:disabled),
body.quiz-mode .quiz-actions .ghost-button:active:not(:disabled),
body.quiz-mode .option:active {
  box-shadow:inset 3px 3px 0 rgba(86,118,62,.5),inset -3px -3px 0 rgba(197,230,162,.5),2px 2px 0 rgba(43,70,41,.5);
}
body.quiz-mode #quiz-error {
  background:rgba(246,198,169,.5);
  border-color:rgba(115,48,39,.5);
}
body.quiz-mode .quiz-panel h2,body.quiz-mode .question-meta,body.quiz-mode .quiz-top {
  color:#162319;
  text-shadow:0 1px 2px rgba(255,255,248,.9);
}
@media(hover:hover) and (pointer:fine) {
  body.quiz-mode .option:hover:not(.selected) { background:rgba(248,246,233,.5); }
  body.quiz-mode .quiz-actions .primary-button:hover:not(:disabled) { background:rgba(155,212,103,.5); }
  body.quiz-mode .quiz-actions .ghost-button:hover:not(:disabled) { background:rgba(241,237,218,.5); }
}

/* Render the button's extrusion as a separate layer behind its face. */
.hero { display:flex; align-items:center; justify-content:space-between; min-height:0; padding:28px 36px; }
.hero-art { width:clamp(108px,15vw,170px); height:auto; margin-right:6%; transform:rotate(-13deg); filter:drop-shadow(9px 11px 0 #18271c); }
.choice-card { isolation:isolate; }
.choice-card::before {
  content:"";
  position:absolute;
  inset:5px -5px -5px 5px;
  z-index:0;
  background:rgba(53,61,43,.42);
  pointer-events:none;
}
.choice-inner {
  z-index:1;
  box-shadow:inset 3px 3px 0 #f4efda;
}
.choice-card input:checked+.choice-inner {
  box-shadow:inset 3px 3px 0 #d8f2aa;
}
.choice-card input:active+.choice-inner,
.choice-card input:checked:active+.choice-inner {
  box-shadow:inset 3px 3px 0 #688d51,inset -3px -3px 0 #d8f2aa;
}
#start-button {
  box-shadow:inset 3px 3px 0 #c3e985,inset -3px -3px 0 #4f832d,5px 5px 0 rgba(53,61,43,.42);
}
#start-button:active:not(:disabled) {
  box-shadow:inset 3px 3px 0 #56763e,inset -3px -3px 0 #c5e6a2,2px 2px 0 rgba(53,61,43,.42);
}

@media(max-width:720px) {
  .shell { width:calc(100% - 20px); }
  .brand { min-height:78px; padding:12px 0 16px; gap:9px; }
  .brand-mark { width:34px; height:34px; }
  .brand-overline { font-size:8px; letter-spacing:.04em; }
  .brand h1 { font-size:clamp(14px,4.1vw,19px); white-space:nowrap; }
  .edition { padding:5px 6px; font-size:8px; }
  .setup-panel { padding:14px 13px 18px; }
  .hero { margin:-4px -3px 19px; padding:18px 17px 20px; }
  .hero-art { display:none; }
  .eyebrow { font-size:9px; letter-spacing:.05em; }
  .eyebrow-icon { width:20px; height:20px; }
  .hero h2 { margin:10px 0 0; font-size:clamp(29px,8vw,42px); line-height:1.13; }
  .version-note { margin-top:16px; padding:8px 9px; font-size:11px; }
  .section-title { margin:19px 0 10px; gap:9px; }
  .section-title h3 { font-size:15px; }
  .section-title span { width:27px; height:27px; }
  .input-label { margin-bottom:6px; font-size:13px; }
  input[type=text] { height:48px; font-size:16px; }
  .choice-grid { gap:9px; }
  .choice-inner,.level-grid .choice-inner {
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-content:center;
    column-gap:11px;
    min-height:62px;
    padding:8px 12px;
  }
  .choice-icon { grid-column:1; grid-row:1 / 3; align-self:center; width:28px; height:28px; }
  .choice-inner strong { grid-column:2; grid-row:1; margin:0; font-size:15px; line-height:1.25; }
  .choice-inner small { grid-column:2; grid-row:2; font-size:11px; line-height:1.35; }
  #start-button { min-height:49px; margin-top:23px; font-size:15px; }
  footer { padding-top:20px; }
}

@media(max-width:360px) {
  .shell { width:calc(100% - 14px); }
  .brand { gap:6px; }
  .brand-mark { width:29px; height:29px; }
  .brand h1 { font-size:14px; }
  .brand-overline { font-size:7px; }
  .edition { font-size:7px; padding:4px; }
  .setup-panel { padding:12px 10px 17px; }
  .hero { padding:16px 13px 18px; }
  .hero h2 { font-size:clamp(26px,8vw,30px); }
  .version-note { font-size:10px; }
}
