:root{color-scheme:light;--bg:#eef3f9;--panel:#fff;--soft:#f6f9fd;--ink:#172033;--muted:#65758a;--line:#d9e4ef;--shadow:0 16px 42px rgba(15,23,42,.10)}html[data-theme=dark]{color-scheme:dark;--bg:#0c1422;--panel:#162131;--soft:#1c2a3d;--ink:#eef5ff;--muted:#a8b7ca;--line:#314258;--shadow:0 18px 44px rgba(0,0,0,.34)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:ui-rounded,"Arial Rounded MT Bold","Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 75% 10%,rgba(96,165,250,.10),transparent 35%),var(--bg);color:var(--ink)}button{font:inherit}.app-shell{height:100dvh;padding:9px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px;overflow:hidden}.topbar,.modebar,.task-panel,.game-panel{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}.topbar{min-height:54px;border-radius:18px;padding:7px 9px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:10px}.brand-mark{width:39px;height:39px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(160deg,#77d8ff,#2563eb);color:#fff;font-size:21px;box-shadow:0 5px 0 #164aa9}.brand h1{margin:0;font-size:clamp(20px,1.7vw,27px);line-height:1;font-weight:1000}.brand p{margin:4px 0 0;color:var(--muted);font-size:10px;font-weight:850}.top-actions{display:flex;gap:6px}.icon-btn{border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:12px;padding:8px 11px;min-height:37px;font-weight:950;cursor:pointer}.icon-btn.primary{background:#172033;color:#fff}.modebar{justify-self:center;border-radius:999px;padding:5px;display:flex;gap:5px}.mode-btn{border:0;background:transparent;color:var(--muted);border-radius:999px;padding:7px 14px;display:flex;align-items:center;gap:7px;font-weight:950;cursor:pointer}.mode-btn b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#e5edf6}.mode-btn.active{background:#e5efff;color:#154db4}.mode-btn.active b{background:#2563eb;color:#fff}.workspace{min-height:0;display:grid;grid-template-columns:minmax(285px,.78fr) minmax(0,2.22fr);gap:9px}.task-panel{align-self:start;border-radius:20px;padding:14px;display:grid;gap:10px}.task-kicker{justify-self:start;background:#fff0c9;color:#925400;border:1px solid #f0cf81;border-radius:999px;padding:5px 9px;font-size:9px;font-weight:1000}.task-panel h2{margin:0;font-size:clamp(20px,1.55vw,26px)}.task-panel>p{margin:0;color:var(--muted);font-size:13px;font-weight:800}.steps{display:grid;gap:8px}.step{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--soft);border-radius:14px;padding:8px 9px;min-height:54px}.step>b{width:33px;height:33px;border-radius:10px;display:grid;place-items:center;background:#e7eef6;flex:0 0 auto}.step strong{display:block;font-size:12px}.step small{display:block;margin-top:2px;color:var(--muted);font-size:10px;font-weight:750}.step.active{border-color:#79a9f9;background:#edf5ff}.step.active>b{background:#2563eb;color:#fff}.step.done{border-color:#9cddb1;background:#effaf3}.step.done>b{background:#22c55e;color:#fff}.feedback{display:flex;gap:9px;align-items:center;border:1px solid var(--line);background:var(--soft);border-radius:14px;padding:9px}.feedback>span{font-size:23px}.feedback strong{display:block;font-size:12px}.feedback small{display:block;color:var(--muted);font-size:10px;font-weight:750}.feedback.success{border-color:#94d8aa;background:#effaf3}.feedback.error{border-color:#f5b0a9;background:#fff2f1}.game-panel{position:relative;min-width:0;min-height:0;border-radius:22px;overflow:hidden}.stage{height:100%;overflow:auto;padding:16px 16px 78px;display:grid;place-items:center}.success{position:absolute;z-index:20;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:10px;min-width:300px;padding:10px 16px;border-radius:15px;background:#f1fff5;border:2px solid #73d391}.success[hidden]{display:none}.success>span{font-size:26px}.success strong{display:block;color:#0e7c35}.success small{display:block;color:#376448;font-weight:850}.next-btn{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);border:0;border-radius:14px;padding:12px 24px;min-width:190px;background:linear-gradient(180deg,#ffc34a,#f59e0b);color:#3f2700;font-weight:1000;box-shadow:0 6px 0 #c57b00;cursor:pointer}.next-btn.pulse{animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{transform:translateX(-50%) translateY(-2px) scale(1.035)}}.identify-layout{width:min(100%,1120px);height:min(100%,740px);display:grid;grid-template-columns:minmax(310px,.86fr) minmax(530px,1.55fr);gap:16px}.hero-card,.choices,.target-card,.big-solid,.name-card{background:linear-gradient(180deg,var(--panel),var(--soft));border:1px solid var(--line);border-radius:23px;box-shadow:0 10px 26px rgba(15,23,42,.07)}.hero-card{display:grid;grid-template-rows:auto 1fr auto;place-items:center;padding:17px 22px}.object-name{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 14px;font-size:15px;font-weight:1000}.object-pic{width:min(92%,380px);height:min(88%,395px);display:grid;place-items:center}.object-pic img,.solid-pic img,.object-card img,.target-pic img,.big-solid img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 23px rgba(15,23,42,.17))}.hint{background:#eaf4ff;color:#315581;border-radius:12px;padding:9px 11px;text-align:center;font-size:11px;font-weight:850}.choices{padding:14px;display:grid;grid-template-rows:auto 1fr;gap:10px}.choices h3,.name-card h3{margin:0;text-align:center;font-size:clamp(20px,1.65vw,29px)}.solid-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.solid-card{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:18px;padding:8px;display:grid;grid-template-rows:1fr auto;justify-items:center;cursor:pointer;min-height:180px}.solid-pic{width:125px;height:120px}.solid-card strong{font-size:15px}.correct{border-color:#61c983!important;background:#effaf2!important;box-shadow:0 0 0 4px rgba(34,197,94,.10)!important}.wrong{animation:shake .38s ease}@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}.classify-layout{width:min(100%,1120px);display:grid;grid-template-columns:295px 1fr;gap:15px}.target-card{display:grid;place-items:center;padding:16px}.target-card>span{background:#e7f1ff;color:#1c56b5;border-radius:999px;padding:6px 11px;font-size:10px;font-weight:1000}.target-pic{width:235px;height:230px}.target-card>strong{font-size:27px}.object-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.object-card{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:18px;padding:9px;display:grid;grid-template-rows:1fr auto;min-height:225px;cursor:pointer}.object-card>div{min-height:155px}.object-card strong{text-align:center;font-size:14px}.name-layout{width:min(100%,1030px);display:grid;grid-template-columns:minmax(360px,.95fr) minmax(430px,1.05fr);gap:16px}.big-solid{display:grid;place-items:center;padding:20px}.big-solid img{width:min(94%,420px);height:min(94%,420px)}.name-card{padding:18px;display:grid;grid-template-rows:auto 1fr;gap:15px}.name-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;align-content:center}.name-choice{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:16px;min-height:75px;font-size:17px;font-weight:1000;cursor:pointer}footer{display:flex;justify-content:space-between;padding:0 5px;color:var(--muted);font-size:10px;font-weight:850}html[data-theme=dark] .mode-btn.active{background:#203a5e;color:#dbeafe}html[data-theme=dark] .step.active{background:#1b3150}html[data-theme=dark] .step.done,html[data-theme=dark] .feedback.success{background:#173424}html[data-theme=dark] .feedback.error{background:#3b2222}html[data-theme=dark] .hint{background:#203650;color:#d9eaff}html[data-theme=dark] .success{background:#193021}@media(max-width:820px){html,body{height:auto;overflow:auto}.app-shell{height:auto;min-height:100dvh}.topbar{align-items:flex-start}.brand h1{font-size:18px}.icon-btn span{display:none}.modebar{width:100%;border-radius:16px}.mode-btn{flex:1;justify-content:center;padding:7px 6px;font-size:11px}.workspace{grid-template-columns:1fr}.task-panel{padding:10px}.game-panel{min-height:720px}.stage{padding:10px 7px 90px}.identify-layout,.classify-layout,.name-layout{height:auto;grid-template-columns:1fr;gap:10px}.hero-card{min-height:345px}.object-pic{height:255px}.solid-grid,.object-grid,.name-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.solid-card{min-height:145px}.solid-pic{width:105px;height:95px}.target-pic{width:185px;height:175px}.object-card{min-height:180px}.object-card>div{min-height:120px}.big-solid{min-height:300px}.big-solid img{height:280px}.success{min-width:min(92vw,330px)}}