* { box-sizing:border-box; }
:root { color-scheme:light; --ink:#173c3b; --deep:#133f43; --teal:#256f70; --river:#84cfc2; --river-dark:#4b9e9f; --reed:#416c4e; --sun:#e7bf66; --paper:#f7f3e6; --line:#cad8c7; --coral:#c76e4d; --focus:#123f90; font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif; color:var(--ink); background:#d8f1e9; }
body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(ellipse at 72% 2%,#fff4c6 0,transparent 30%),linear-gradient(180deg,#d8f1e9,#eff2da 56%,#d7e5bf); }
button { font:inherit; }
.page-shell { width:min(1360px,100%); margin:0 auto; padding:14px clamp(10px,2vw,26px) 18px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:7px 2px 16px; border-bottom:1px solid #789b8a55; }
.brand { display:flex; align-items:center; gap:10px; min-width:max-content; color:var(--deep); text-decoration:none; }
.brand-mark { display:grid; width:42px; height:42px; place-items:center; border:2px solid #476b52; border-radius:15px 15px 15px 5px; background:#d2e09c; transform:rotate(-4deg); }
.brand-mark span { width:11px; height:25px; border-radius:100% 0 100% 0; background:#32644e; transform:rotate(15deg); }
.brand strong { display:block; font-family:Georgia,serif; font-size:22px; line-height:1.05; letter-spacing:-.04em; }
.brand small { display:block; margin-top:4px; color:#56736a; font-size:9px; font-weight:900; letter-spacing:.12em; }
.top-stats { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.stat-pill { display:inline-flex; align-items:center; gap:7px; min-height:36px; padding:6px 11px; border:1px solid #abc5b2; border-radius:999px; color:#315a52; background:#fbf8e9; font-size:12px; font-weight:800; }
.stat-icon { color:#b48431; font-size:16px; }.sun-pill { color:#805f2c; background:#fff0c7; }
.game-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr); align-items:stretch; gap:16px; margin-top:16px; }
.game-card,.side-panel { min-width:0; border:1px solid #b6cdb6; border-radius:22px; background:#fffdf3ed; box-shadow:0 12px 28px #325b4320; }
.game-card { padding:20px; }.card-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.eyebrow { margin:0 0 5px; color:#628077; font-size:10px; font-weight:950; letter-spacing:.14em; }
h1,h2,p { overflow-wrap:anywhere; }h1 { margin:0; color:#194947; font-family:Georgia,serif; font-size:clamp(24px,3vw,36px); line-height:1.06; letter-spacing:-.04em; }
.subtitle { margin:6px 0 0; color:#57746d; font-size:14px; }.sun-stamp { display:grid; flex:none; width:47px; height:47px; place-items:center; border:1px dashed #d2a85e; border-radius:50%; color:#a37134; background:#fff1cc; font-size:24px; }
.story-line { min-height:46px; margin:15px 0 12px; padding:11px 14px; border-left:4px solid #76a78a; border-radius:4px 13px 13px 4px; color:#335953; background:#edf5e8; font-size:13px; line-height:1.45; }
.scene-shell { position:relative; width:100%; overflow:hidden; aspect-ratio:16/9; border:4px solid #9c774b; border-radius:23px; background:#92d8d0; box-shadow:inset 0 0 0 2px #f8e0a4,0 8px 18px #325b4325; }
#game-canvas { display:block; width:100%; height:100%; outline:none; }
#game-canvas:focus-visible { outline:4px solid var(--focus); outline-offset:-5px; }
.scene-hud { position:absolute; z-index:2; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; gap:8px; pointer-events:none; }
.scene-hud span { padding:7px 10px; border:1px solid #fff9d4; border-radius:999px; color:#204b45; background:#fff9e6e8; font-size:10px; font-weight:950; letter-spacing:.09em; box-shadow:0 2px 8px #204b4520; }
.start-overlay { position:absolute; z-index:3; inset:0; display:grid; place-items:center; padding:14px; background:linear-gradient(180deg,#164c4a70,#103e3d99); }
.start-overlay[hidden] { display:none; }.start-card { width:min(420px,100%); padding:clamp(16px,3vw,28px); border:1px solid #fff2c9; border-radius:20px; color:#244c45; background:#fff9eaf2; text-align:center; box-shadow:0 12px 38px #113f3c48; }
.start-kicker { color:#9b7136; font-size:9px; font-weight:950; letter-spacing:.16em; }.start-card h2 { margin:8px 0; color:#194947; font-family:Georgia,serif; font-size:clamp(22px,3.4vw,32px); line-height:1.08; }.start-card p { margin:0 auto 16px; max-width:40ch; color:#536f62; font-size:13px; line-height:1.5; }
.touch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 1px 0; }.touch-cluster { display:flex; gap:8px; }.touch-control { min-width:52px; min-height:48px; padding:8px 14px; border:1px solid #91b6a9; border-radius:14px; color:#245657; background:#f7f5e9; font-size:21px; font-weight:950; box-shadow:0 3px 0 #739987; touch-action:none; user-select:none; -webkit-user-select:none; }.touch-control:active,.touch-control.is-pressed { transform:translateY(2px); color:#fffdf0; background:#4a906c; box-shadow:0 1px 0 #2a5a4b; }.jump-control { min-width:96px; color:#fffdf0; border-color:#3c765d; background:linear-gradient(135deg,#4a906c,#35715d); font-size:12px; letter-spacing:.08em; }.touch-hint { color:#678077; font-size:11px; font-weight:800; text-align:center; }
.side-panel { display:flex; flex-direction:column; gap:13px; padding:17px; }.brief-card { padding:15px; border:1px solid #e2d5a4; border-radius:17px; background:linear-gradient(145deg,#fff8e5,#f5f0d9); }
.brief-label { display:flex; align-items:center; gap:7px; color:#8b6c39; font-size:9px; font-weight:950; letter-spacing:.12em; }.brief-dot { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; color:#a36444; background:#f3dfb4; font-size:15px; }
.brief-card h2 { margin:8px 0 6px; color:#284d46; font-family:Georgia,serif; font-size:22px; line-height:1.12; letter-spacing:-.02em; }.brief-card p { margin:0; color:#5d7163; font-size:12px; line-height:1.45; }
.route-meter { margin-top:14px; padding-top:12px; border-top:1px dashed #d6ca9d; }.meter-top { display:flex; justify-content:space-between; gap:8px; color:#5b715f; font-size:11px; font-weight:800; }.meter-top strong { color:#31504a; font-variant-numeric:tabular-nums; }
progress { width:100%; height:10px; margin-top:7px; border:0; border-radius:999px; background:#e1e6d5; accent-color:#508777; }progress::-webkit-progress-bar { border-radius:999px; background:#e1e6d5; }progress::-webkit-progress-value { border-radius:999px; background:linear-gradient(90deg,#79b293,#dfbb65); }progress::-moz-progress-bar { border-radius:999px; background:linear-gradient(90deg,#79b293,#dfbb65); }
.panel-section { padding:13px 14px; border:1px solid #d5e1d2; border-radius:15px; background:#f7fbef; }.section-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }.section-heading h2 { margin:0; color:#2f554b; font-family:Georgia,serif; font-size:18px; }.order-count { padding:4px 8px; border-radius:999px; color:#4d7063; background:#e3eee0; font-size:10px; font-weight:900; font-variant-numeric:tabular-nums; }
.order-list { display:grid; gap:8px; margin:10px 0 0; padding:0; list-style:none; }.order-item { display:grid; grid-template-columns:27px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:48px; padding:7px 9px; border:1px solid #dce2cf; border-radius:11px; color:#536b5f; background:#fffef8; font-size:11px; }.order-item .item-glyph { display:grid; width:25px; height:25px; place-items:center; border-radius:50%; color:#815d38; background:#f8e8bb; font-size:15px; font-weight:950; }.order-item strong { display:block; color:#314f47; font-size:11px; }.order-item small { display:block; margin-top:2px; color:#728376; font-size:9px; }.order-state { padding:4px 6px; border-radius:999px; color:#69796d; background:#edf0e5; font-size:8px; font-weight:950; letter-spacing:.04em; text-transform:uppercase; }.order-item.is-picked .order-state { color:#785b23; background:#f8e8b4; }.order-item.is-delivered { border-color:#aac5a1; background:#eef7e7; }.order-item.is-delivered .order-state { color:#285d44; background:#d9edd0; }
.game-status { min-height:48px; margin:0; padding:11px 12px; border:1px solid #bbd7c5; border-radius:12px; color:#315d51; background:#eaf5e8; font-size:12px; font-weight:750; line-height:1.4; }.game-status.is-alert { border-color:#dfbc85; color:#744c32; background:#fff0db; }.game-status.is-win { border-color:#91b78b; color:#285740; background:#e6f4df; }
.control-help { margin:0; padding:10px 11px; border:1px solid #d5e1d2; border-radius:12px; color:#63776a; background:#f8faef; font-size:10px; line-height:1.55; }.control-help strong { color:#38594d; }.control-help span { padding:0 3px; color:#b18a45; }
.action-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:9px 11px; border:1px solid #b8cdb9; border-radius:12px; color:#345d52; background:#f9f7e9; font-size:12px; font-weight:900; cursor:pointer; }.button:hover { filter:brightness(.97); transform:translateY(-1px); }.button:focus-visible,.touch-control:focus-visible,.brand:focus-visible { outline:3px solid var(--focus); outline-offset:3px; z-index:4; }.button-primary { grid-column:1/-1; border-color:#3c765d; color:#fffdf0; background:linear-gradient(135deg,#4a906c,#35715d); box-shadow:0 3px 0 #2a5a4b; }.button-quiet { background:#f7f4e8; }.button[hidden] { display:none; }
.safety-note { margin:auto 0 0; padding-top:4px; color:#768478; font-size:10px; line-height:1.45; }.site-footer { display:flex; justify-content:space-between; gap:10px; padding:14px 5px 0; color:#648078; font-size:10px; }.site-footer span:first-child { font-weight:950; letter-spacing:.08em; }
@media (max-width:1040px) { .game-layout { grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr); }.game-card { padding:15px; }.map-grid { gap:4px; } }
@media (max-width:780px) { .page-shell { padding:9px 10px 16px; }.topbar { align-items:flex-start; flex-direction:column; }.top-stats { justify-content:flex-start; }.game-layout { grid-template-columns:1fr; }.game-card { padding:13px; }.side-panel { padding:13px; }.touch-row { padding-top:10px; }.touch-hint { max-width:110px; }.site-footer { flex-direction:column; } }
@media (max-width:430px) { .page-shell { padding:7px 0 14px; }.topbar { padding-inline:10px; }.game-card { padding:11px 8px; border-radius:16px; }.card-heading,.story-line { margin-inline:3px; }.scene-shell { border-width:2px; border-radius:15px; }.scene-hud { top:7px; left:7px; right:7px; }.scene-hud span { padding:5px 7px; font-size:8px; }.touch-row { gap:6px; padding-inline:3px; }.touch-control { min-width:46px; min-height:46px; padding-inline:10px; }.jump-control { min-width:76px; }.touch-hint { max-width:76px; font-size:9px; }.side-panel { border-radius:16px; }.action-buttons { grid-template-columns:1fr; }.button-primary { grid-column:auto; } }
@media (forced-colors:active) { .scene-shell,.panel-section,.brief-card { border:1px solid CanvasText; }.game-status { border:1px solid CanvasText; }.button-primary { border:2px solid ButtonText; color:ButtonText; background:Canvas; }.touch-control { border:2px solid ButtonText; color:ButtonText; background:Canvas; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }