:root { --ink:#1e293b; --muted:#64748b; --line:#d7e0ea; --panel:#fff; --page:#f4f7fb; --accent:#155eef; --ok:#188048; --warn:#b54708; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
header { background:#fff; border-bottom:1px solid var(--line); padding:13px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.brand { font-weight:800; letter-spacing:.1px; }.brand span { color:var(--accent); }
main { max-width:1180px; margin:0 auto; padding:18px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.hidden { display:none !important; }
h1 { font-size:1.35rem; margin:0 0 8px; } h2 { font-size:1.05rem; margin:0 0 10px; } p { line-height:1.45; } .muted { color:var(--muted); } .notice { padding:10px 12px; border-left:4px solid var(--accent); background:#eef4ff; border-radius:6px; } .error { color:#b42318; font-weight:600; min-height:1.3em; }
label { display:block; font-size:.9rem; font-weight:650; margin:12px 0 5px; } input, select, button { font:inherit; } input, select { width:100%; border:1px solid #afbdcf; border-radius:8px; padding:10px 11px; background:white; } input:focus, select:focus { outline:3px solid #cfe0ff; border-color:var(--accent); }
button { border:0; border-radius:8px; padding:10px 14px; cursor:pointer; background:var(--accent); color:white; font-weight:700; } button:hover { filter:brightness(.95); } button.secondary { background:#e8eef8; color:#1f3d70; } button.danger { background:#b42318; } button:disabled { opacity:.5; cursor:not-allowed; }
.grid { display:grid; gap:18px; grid-template-columns:minmax(280px,420px) 1fr; } .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }.split { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .controls { margin-top:16px; }
#gameArea { display:grid; grid-template-columns:minmax(0, 1fr) 260px; gap:18px; align-items:start; } #mazeWrap { background:#fff; border:1px solid var(--line); border-radius:12px; min-height:440px; display:grid; place-items:center; overflow:hidden; } canvas { display:block; width:min(100%, 760px); height:auto; touch-action:none; } #sidePanel { display:grid; gap:12px; }.player { display:flex; gap:9px; align-items:center; padding:8px 0; border-bottom:1px solid #eef2f6; }.dot { width:18px; height:18px; border-radius:50%; display:grid; place-items:center; color:white; font-size:.62rem; font-weight:900; }
.kpi { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.kpi div { padding:10px; border:1px solid var(--line); border-radius:8px; }.kpi strong { display:block; font-size:1.15rem; }.code { font:800 1.7rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing:.12em; }.urlbox { word-break:break-all; padding:9px; background:#f5f8fc; border-radius:7px; border:1px solid var(--line); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.83rem; }
.small { font-size:.85rem; }.status { padding:7px 10px; border-radius:999px; font-size:.85rem; font-weight:750; background:#e8eef8; color:#1f3d70; display:inline-block; }.status.running { background:#e7f6ec; color:#146c35; }.status.finished { background:#fff0e5; color:#9c3500; }
@media (max-width: 820px) { .grid, #gameArea { grid-template-columns:1fr; } #mazeWrap { min-height:0; } main { padding:12px; } }