@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root { --paper:#f7f0e7; --paper-deep:#efe3d3; --ink:#332b26; --muted:#887c70; --line:#dfd2c3; --orange:#d46f45; --orange-deep:#b95331; --yellow:#e8b94e; --green:#5f8a63; --wall:#735b4a; --floor:#ead8bd; --floor-light:#f2e4ce; --shadow:0 22px 60px rgba(85,61,40,.12); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 10% 0%,#fffaf2 0,#f7f0e7 38%,#eee2d2 100%); color:var(--ink); font-family:'Manrope','Microsoft YaHei',sans-serif; }
button { font:inherit; cursor:pointer; }
.app-shell { width:min(1320px,calc(100% - 44px)); margin:0 auto; padding:30px 0 20px; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); padding-bottom:20px; }
.brand { display:flex; gap:13px; align-items:center; }.brand-mark { display:grid; place-items:center; width:42px;height:42px;border-radius:12px;background:#fff6ea;box-shadow:0 7px 15px rgba(109,70,39,.08);font-size:23px; }.eyebrow,.tiny-label { margin:0; color:var(--muted); font:500 10px/1.2 'DM Mono',monospace; letter-spacing:.16em; text-transform:uppercase; }.brand h1 { margin:4px 0 0; font-size:18px; letter-spacing:-.04em; }.top-actions { display:flex; align-items:center; gap:18px; }.key-hint { color:var(--muted); font-size:12px; }.ghost-button,.secondary-button { border:1px solid var(--line); background:rgba(255,255,255,.5); color:var(--ink); border-radius:9px; padding:9px 13px; font-weight:700; font-size:12px; transition:.2s; }.ghost-button:hover,.secondary-button:hover:not(:disabled) { border-color:var(--orange); color:var(--orange-deep); background:#fffaf3; }.hero-copy { display:flex; justify-content:space-between; align-items:end; gap:28px; padding:55px 0 35px; }.accent { color:var(--orange); }.hero-copy h2 { margin:12px 0 10px; max-width:680px; font-size:clamp(32px,4.1vw,58px); line-height:1.04; letter-spacing:-.07em; font-weight:800; }.hero-copy h2 em { color:var(--orange); font-style:normal; }.intro { margin:0; max-width:570px; color:var(--muted); font-size:14px; line-height:1.8; }.progress-note { display:flex; gap:9px; align-items:center; padding-bottom:7px; color:var(--muted); font:500 11px 'DM Mono',monospace; white-space:nowrap; }.progress-dot { width:7px;height:7px;background:var(--orange);border-radius:50%;box-shadow:0 0 0 5px rgba(212,111,69,.12); }
.game-layout { display:grid; grid-template-columns:220px minmax(430px,1fr) 220px; gap:28px; align-items:start; }.sidebar { min-height:420px; padding-top:8px; }.panel-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-size:12px;font-weight:800; }.level-list { display:grid;gap:5px; }.level-list button { display:flex;align-items:center;gap:13px;width:100%;padding:11px 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);text-align:left;font-size:12px;transition:.2s; }.level-list button span { display:grid;place-items:center;width:27px;height:27px;border-radius:7px;background:var(--paper-deep);color:#a09283;font:500 10px 'DM Mono',monospace; }.level-list button:hover { background:#fff9f0; color:var(--ink); }.level-list button.active { background:#fffaf3;color:var(--orange-deep);box-shadow:0 5px 20px rgba(100,67,40,.08); }.level-list button.active span { background:var(--orange);color:#fff; }.level-list button.completed span { background:#dfeadd;color:var(--green); }.tip-card { display:flex;gap:10px;margin-top:38px;padding:14px;border:1px solid #ead8c2;border-radius:11px;background:rgba(255,249,238,.7); }.tip-icon { font-size:17px; }.tip-card strong { display:block;font-size:11px; }.tip-card p { margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.55; }.play-area { min-width:0; }.board-frame { padding:15px; border:1px solid rgba(145,108,72,.2); border-radius:20px; background:rgba(255,250,242,.72); box-shadow:var(--shadow); }.board { display:grid; grid-template-columns:repeat(var(--columns),minmax(0,1fr)); gap:4px; width:100%; max-width:620px; margin:0 auto; aspect-ratio:auto; overflow:hidden; border-radius:12px; background:#b9946e; }.tile { position:relative; display:grid; place-items:center; aspect-ratio:1; min-width:0; border-radius:5px; overflow:hidden; }.tile.wall { background:linear-gradient(135deg,#866c57,#6c5343); box-shadow:inset 2px 2px 0 rgba(255,255,255,.08),inset -2px -2px 0 rgba(40,25,15,.18); }.tile.wall::after { content:''; position:absolute; inset:20% 0 auto; border-top:1px solid rgba(255,255,255,.08); }.tile.floor { background:var(--floor-light); }.tile.floor::after { content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 46%);pointer-events:none; }.tile.goal { background:#f0dda5; box-shadow:inset 0 0 0 3px rgba(232,185,78,.18); }.goal-mark { color:#d9a52f;font-size:clamp(13px,2.6vw,23px);line-height:1;opacity:.78; }.box-sprite,.player-sprite { position:relative; z-index:1; display:block; width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 4px 2px rgba(68,41,24,.2)); user-select:none; pointer-events:none; }.box-sprite { transform:translateY(3%); }.player-sprite { width:96%; height:96%; transform:translateY(3%); }.box-check { position:absolute; right:4%; bottom:4%; z-index:2; display:grid; place-items:center; width:28%; aspect-ratio:1; border:2px solid #f8f1e6; border-radius:50%; background:var(--green); color:#fff; font-size:clamp(9px,2vw,15px); font-weight:800; line-height:1; box-shadow:0 3px 7px rgba(49,83,51,.25); }.tile.box-on-goal { background:#dfeadd; box-shadow:inset 0 0 0 3px rgba(95,138,99,.3); }.tile.player-tile { box-shadow:inset 0 0 0 3px rgba(212,111,69,.42); }.shake { animation:shake .22s ease-in-out; } @keyframes shake { 25%{transform:translateX(5px)}50%{transform:translateX(-5px)}75%{transform:translateX(3px)} }
.status-row { display:flex;justify-content:space-between;align-items:center;gap:15px;margin:18px 3px 0; }.status { margin:0;color:var(--muted);font-size:12px; }.status.is-complete { color:var(--green);font-weight:800; }.primary-button { border:0;border-radius:9px;padding:11px 17px;background:var(--orange);color:#fff;font-size:12px;font-weight:800;box-shadow:0 7px 16px rgba(212,111,69,.2);transition:.2s; }.primary-button:hover:not(:disabled) { background:var(--orange-deep);transform:translateY(-1px); }.primary-button:disabled,.secondary-button:disabled { opacity:.42;cursor:not-allowed; }.current-level { border-bottom:1px solid var(--line);padding-bottom:22px; }.current-level h3 { margin:10px 0 8px;font-size:25px;letter-spacing:-.06em; }.current-level p { margin:0;color:var(--muted);font-size:11px;line-height:1.6; }.stats { display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:22px 0; }.stat { padding:13px 12px;border-radius:10px;background:rgba(255,255,255,.45); }.stat span { display:block;color:var(--muted);font-size:10px; }.stat strong { display:block;margin-top:7px;color:var(--orange-deep);font:500 25px 'DM Mono',monospace; }.secondary-button { width:100%; }.legend { margin-top:40px;color:var(--muted);font-size:10px;line-height:2.5; }.legend .tiny-label { margin-bottom:7px; }.legend-swatch { display:inline-grid;place-items:center;width:22px;height:24px;margin-right:7px;font-size:14px;vertical-align:middle; }.legend-swatch img { width:24px;height:24px;object-fit:contain; }.goal-swatch { color:#d9a52f; }.done-swatch { width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:800;line-height:1; }.mobile-controls { display:none; }.app-shell footer { display:flex;justify-content:space-between;gap:12px;margin-top:40px;color:#b1a398;font:500 10px 'DM Mono',monospace;letter-spacing:.04em; }
@media (max-width:980px) { .game-layout { grid-template-columns:180px minmax(330px,1fr); }.right-panel { grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 160px;gap:20px;align-items:start;min-height:0; }.right-panel .legend { margin-top:0; }.right-panel .current-level { border-bottom:0;padding-bottom:0; } }
@media (max-width:700px) { .app-shell { width:min(100% - 24px,520px);padding-top:18px; }.topbar { align-items:flex-start; }.key-hint { display:none; }.hero-copy { display:block;padding:38px 0 25px; }.hero-copy h2 { font-size:39px; }.progress-note { margin-top:22px; }.game-layout { display:block; }.left-panel { display:none; }.board-frame { padding:9px;border-radius:15px; }.board { gap:3px;border-radius:9px; }.status-row { align-items:flex-start; }.status { line-height:1.5; }.mobile-controls { display:block;margin:22px auto 0;text-align:center; }.mobile-controls button { width:50px;height:42px;margin:3px;border:1px solid var(--line);border-radius:10px;background:#fffaf3;color:var(--ink);font-size:20px;box-shadow:0 4px 10px rgba(100,67,40,.07); }.mobile-controls button:active { transform:scale(.95);background:var(--orange);color:#fff; }.right-panel { display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:28px;min-height:0; }.right-panel .current-level { grid-column:1/-1;border-bottom:1px solid var(--line);padding-bottom:16px; }.right-panel .stats { padding:0; }.right-panel .legend { display:none; }.secondary-button { align-self:center; }.app-shell footer { margin-top:28px; }.app-shell footer span:last-child { display:none; } }