:root{--bg:#ffffff;--panel:#f6f8fb;--panel-2:#e9eef5;--ink:#0f1320;--muted:#6c7686;--line:#d9e2ef;--brand:#0aa770;--brand-2:#33c3ff;--good:#14b869;--bad:#e05252;--warn:#ffb52e;--radius-lg:18px;--radius-md:14px;--radius-round:999px;--shadow-card:0 18px 44px rgba(16,19,23,.08);--gap:12px;--cell:100px;--choice-cols:6;--safe-pad:max(12px, env(safe-area-inset-left));--safe-pad-r:max(12px, env(safe-area-inset-right));--safe-pad-b:max(12px, env(safe-area-inset-bottom))}*{box-sizing:border-box;-webkit-tap-highlight-color:#fff0}html,body{height:100%;margin:0}body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;background:radial-gradient(1200px 700px at 70% -10%,#f2f7ff 0%,#ffffff 60%) no-repeat,var(--bg);color:var(--ink);overflow:hidden}.app{min-height:100svh;display:flex;flex-direction:column}header{position:sticky;top:0;z-index:60;background:rgb(255 255 255 / .88);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--line)}.bar{max-width:1300px;margin:0 auto;padding:10px clamp(12px,2.4vw,22px);display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.2px;font-size:clamp(17px,2.2vw,21px);line-height:1.2;color:var(--ink);text-decoration:none}.brand-badge{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 12px;background:#fff;font-weight:900;text-decoration:none;color:var(--ink)}.menuBarWrap{border-bottom:1px solid var(--line);background:rgb(255 255 255 / .6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.menuBar{max-width:1300px;margin:0 auto;padding:12px clamp(12px,2.4vw,22px);display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pill{display:flex;gap:8px;align-items:center;padding:8px 12px;border:1px solid var(--line);border-radius:var(--radius-round);background:#fff;color:var(--muted);font-size:13px;font-weight:700;line-height:1.2}.pill strong{color:var(--ink)}.menuSpacer{flex:1}.btn{border:1px solid var(--line);background:#fff;border-radius:var(--radius-md);padding:12px 16px;cursor:pointer;font-weight:900;font-size:14px;line-height:1.2;user-select:none}.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border-color:#fff0}.btn:disabled{opacity:.55;cursor:not-allowed}main{max-width:1300px;margin:10px auto;padding:0 clamp(12px,2.4vw,22px) 100px;width:100%;flex:1;display:grid;overflow:hidden}.canvas{display:grid;place-items:center;overflow:hidden}.game{width:min(1020px,100%);max-height:100%;overflow:hidden}.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:16px;display:flex;flex-direction:column;gap:12px;height:100%}.topRow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.helper{color:var(--muted);font-size:13px;line-height:1.4}.stage{border:1px dashed var(--line);border-radius:var(--radius-md);padding:16px;background:var(--panel);display:flex;align-items:center;justify-content:center;min-height:110px;text-align:center}.stage h2{margin:0;font-size:18px;line-height:1.3}#memoWrap{display:grid;gap:var(--gap);grid-auto-flow:column;justify-content:center;align-items:center}.box{width:var(--cell);height:var(--cell);display:grid;place-items:center;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:calc(var(--cell) * 0.52);user-select:none;line-height:1}#choices{display:grid;gap:var(--gap);grid-template-columns:repeat(var(--choice-cols),minmax(0,1fr));align-content:start}.choice{cursor:pointer;transition:transform .06s ease,box-shadow .15s ease}.choice:active{transform:scale(.98)}.choice.lock{pointer-events:none;opacity:.55}.choice.correct{outline:2px solid var(--good)}.choice.wrong{outline:2px solid var(--bad)}.pulse{animation:pulse .7s ease}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(51 195 255 / .5)}100%{box-shadow:0 0 0 16px #fff0}}.fabBar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;justify-content:center;padding:12px var(--safe-pad) var(--safe-pad-b) var(--safe-pad);pointer-events:none}.fab{pointer-events:auto;display:flex;flex-wrap:wrap;gap:10px;background:rgb(255 255 255 / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--radius-round);box-shadow:var(--shadow-card);padding:8px}.fab .btn{padding:10px 14px}.overlay{position:fixed;inset:0;background:rgb(250 253 255 / .86);display:none;place-items:center;z-index:90;padding:20px}.modal{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-card);width:min(560px,92vw);padding:22px}.modal h3{margin:0 0 6px 0;font-size:18px;line-height:1.3}.modal p{margin:0 0 14px 0;color:var(--muted);font-size:14px;line-height:1.4}.rowFlex{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}.miniLabel{font-size:12px;font-weight:600;color:var(--muted);line-height:1.3}.diffWrap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.diffBtn{border:1px solid var(--line);border-radius:var(--radius-round);padding:8px 12px;font-size:13px;font-weight:700;line-height:1.2;background:#fff;color:var(--ink);cursor:pointer}.diffBtn.active{background:linear-gradient(135deg,var(--brand),var(--brand-2));border-color:#fff0;color:#fff}@supports(padding:max(0px)){header .bar{padding-left:var(--safe-pad);padding-right:var(--safe-pad-r)}}