:root { color-scheme:light; --ink:#20333c; --muted:#5a6b72; --line:#d5e0e4; --paper:#f2f6f5; --blue:#2466a0; --green:#176b54; --green-dark:#11523f; --red:#a63732; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #68a9c4; outline-offset:2px; }
[hidden] { display:none !important; }
.app { width:min(100%,1380px); margin:auto; padding:clamp(.6rem,2vw,1.5rem); }
.hero { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; padding:clamp(1rem,2.5vw,1.7rem); border-radius:17px; background:linear-gradient(120deg,#174f67,#237460); color:#fff; }
.hero h1 { margin:.15rem 0 .35rem; font-size:clamp(1.6rem,3vw,2.35rem); line-height:1.1; }
.hero p:last-child { max-width:70ch; margin:0; color:#e7f5f0; }
.hero-icon { display:grid; place-items:center; width:76px; height:76px; flex:none; border-radius:20px; background:#ffffff27; font-size:2.6rem; }
.eyebrow { margin:0; color:#1b7860; font-size:.73rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.hero .eyebrow { color:#b9f0dd; }
h2 { margin:.1rem 0 .5rem; font-size:1.22rem; line-height:1.25; }
h3 { margin:.1rem 0 .4rem; font-size:1rem; }
.subtle { margin:.15rem 0; color:var(--muted); font-size:.85rem; }
.panel { min-width:0; padding:clamp(.8rem,1.4vw,1.2rem); border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 5px 20px #1e39400d; }
.setup-panel { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:.8rem; }
.setup-panel h2 { margin-bottom:.15rem; }
.setup-panel .subtle { max-width:68ch; }
.setup-controls { display:flex; flex-wrap:wrap; align-items:end; gap:.5rem; }
.setup-controls label,.field { display:grid; gap:.25rem; font-size:.8rem; font-weight:700; color:#30434a; }
input[type=number],select { min-height:40px; max-width:100%; border:1px solid #aebfc6; border-radius:8px; background:#fff; padding:.4rem .55rem; color:var(--ink); }
input:disabled,select:disabled { background:#eef2f3; color:#607179; }
#modeSelect { min-width:225px; }
#seedInput { width:130px; }
.setup-controls .muted { opacity:.55; }
.button { min-height:41px; border:1px solid #b8c9cc; border-radius:8px; padding:.5rem .8rem; font-weight:750; }
.button.primary { border-color:var(--green); background:var(--green); color:#fff; }
.button.primary:hover { background:var(--green-dark); }
.button.secondary { background:#eef5f4; color:#164d40; }
.button.secondary:hover { background:#daebe7; }
.button.full { width:100%; }
.scoreboard { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.55rem; margin-bottom:1rem; }
.scoreboard>div { display:grid; gap:.1rem; min-width:0; padding:.6rem .8rem; border:1px solid var(--line); border-radius:10px; background:#fff; }
.scoreboard span { color:var(--muted); font-size:.74rem; font-weight:700; }
.scoreboard strong { font-size:clamp(1rem,1.7vw,1.35rem); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.scoreboard .score-primary { border-color:#8cb9a9; background:#e6f3ec; }
.score-primary strong { color:#14533e; }
.main-grid { display:grid; grid-template-columns:minmax(0,1.75fr) minmax(300px,.85fr); align-items:start; gap:1rem; }
.game-column,.learning-column { display:grid; min-width:0; gap:1rem; }
.event-panel { min-width:0; padding:.7rem .9rem; border:1px solid #e8d8ac; border-left:5px solid #d7a543; border-radius:10px; background:#fff9e9; font-size:.9rem; }
.event-panel p { margin:.1rem 0 0; }
.event-panel ul { margin:.35rem 0 0; padding-left:1.2rem; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.section-heading h2 { margin:.05rem 0; }
.badge { flex:none; border-radius:30px; background:#def1e7; padding:.27rem .55rem; color:#16543f; font-size:.75rem; font-weight:800; }
.badge.quiet { background:#ebeff0; color:#4f6269; }
.products-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr)); gap:.7rem; margin-top:.8rem; }
.product-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:12px; padding:.8rem; background:#fbfdfd; }
.product-heading { display:flex; align-items:center; gap:.55rem; }
.product-icon { display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:10px; background:#e5f1ec; font-size:1.35rem; }
.product-icon img { display:block; width:27px; height:27px; object-fit:contain; }
.product-heading h3 { margin:0; color:#155b52; }
.product-heading p { margin:0; color:var(--muted); font-size:.75rem; }
.decision-row { display:grid; grid-template-columns:minmax(0,1fr) 105px; align-items:center; gap:.2rem .5rem; margin-top:.8rem; }
.decision-row label { font-size:.84rem; font-weight:750; }
.decision-row input { width:100%; }
.price-explanation { grid-column:1/-1; color:var(--muted); font-size:.72rem; }
.promotion-row { display:flex; gap:.5rem; align-items:start; margin-top:.65rem; font-size:.86rem; font-weight:700; cursor:pointer; }
.promotion-row input { width:18px; height:18px; margin:.1rem 0 0; flex:none; accent-color:var(--green); }
.promotion-row small { display:block; color:var(--muted); font-size:.72rem; font-weight:500; }
.effective-price { margin:.65rem 0 .15rem; font-size:.82rem; }
.last-result { display:grid; gap:.2rem; margin:.65rem 0; padding:.55rem .6rem; border-radius:8px; background:#eaf1f5; font-size:.78rem; }
.last-result span { display:flex; justify-content:space-between; gap:.3rem; }
.last-result strong { text-align:right; font-variant-numeric:tabular-nums; }
.last-result strong { white-space:nowrap; }
.mini-chart { margin-top:auto; border:1px solid #e3ebee; border-radius:8px; background:#fff; overflow:hidden; }
.mini-chart svg { display:block; width:100%; height:auto; max-height:170px; }
.mini-chart text { fill:#52646b; font-size:11px; }
.axis-line { fill:none; stroke:#7a8b92; stroke-width:1.5; }
.demand-line { fill:none; stroke:#1c8c77; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw-demand-line .7s ease forwards; }
@keyframes draw-demand-line { to { stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce) { .demand-line { animation:none; stroke-dashoffset:0; } }
.mini-chart p { margin:0 .4rem .35rem; color:var(--muted); font-size:.68rem; }
.history { margin-top:.6rem; padding-top:.5rem; border-top:1px solid var(--line); font-size:.75rem; }
summary { cursor:pointer; font-weight:750; }
.table-scroll { width:100%; overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.78rem; font-variant-numeric:tabular-nums; }
th,td { padding:.35rem .25rem; border-bottom:1px solid #e4ebee; text-align:left; vertical-align:top; }
.history table { min-width:340px; }
.history th,.history td { font-size:.68rem; }
.forecast-panel>p:not(.eyebrow,.baseline,.error) { margin:.1rem 0 .7rem; color:var(--muted); font-size:.85rem; }
.field select { width:100%; }
.baseline { margin:.7rem 0; padding:.65rem; border-radius:8px; background:#f1f5f6; font-size:.79rem; }
.forecast-fields { display:grid; gap:.55rem; margin:.7rem 0; }
.error { color:var(--red); font-size:.8rem; font-weight:700; }
.feedback-lead { margin:.2rem 0 .6rem; font-size:.85rem; }
.feedback-panel table { min-width:380px; }
.comparison small { display:block; color:var(--muted); white-space:nowrap; }
.correct { color:#146449; font-weight:900; }
.incorrect { color:#ae5f26; font-weight:900; }
.elasticity-box { margin:.8rem 0; padding:.7rem; border-left:4px solid #3786a2; border-radius:7px; background:#eef7fa; font-size:.8rem; }
.elasticity-box p { margin:.4rem 0; }
.final-result { margin-top:1rem; padding:.8rem; border-radius:9px; background:#e5f3eb; }
.final-result p { margin:.4rem 0; }
.explain-panel { color:#40535a; font-size:.8rem; }
.explain-panel p { margin:.55rem 0; }
@media(max-width:1050px) { .setup-panel { align-items:start; flex-direction:column; } .main-grid { grid-template-columns:1fr; } .products-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .learning-column { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } .explain-panel { grid-column:1/-1; } }
@media(max-width:760px) { .products-grid { grid-template-columns:1fr; } .learning-column { grid-template-columns:1fr; } .scoreboard { grid-template-columns:repeat(2,minmax(0,1fr)); } .hero-icon { width:58px; height:58px; font-size:2rem; } }
@media(max-width:520px) { .app { padding:.45rem; } .hero { padding:.9rem; border-radius:12px; } .hero-icon { display:none; } .panel { padding:.75rem; border-radius:10px; } .setup-controls { width:100%; } .setup-controls label:first-child { width:100%; } #modeSelect { width:100%; } .scoreboard { gap:.4rem; } .scoreboard>div { padding:.5rem .6rem; } .scoreboard strong { font-size:1.02rem; } .products-grid { gap:.55rem; } }