:root{--bg: #0b1220;--panel: #121a2b;--ink: #e8eefc;--muted: #8b9bb8;--accent: #3ecf8e;--warn: #f0b429;--border: #243049;--danger: #ff6b6b}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:ui-rounded,Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}#app{position:relative;width:100%;height:100%}#world{display:block;width:100%;height:100%;background:linear-gradient(180deg,#1a2a44,#0b1220 55%,#0a1820)}.top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:12px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top));background:linear-gradient(180deg,rgba(11,18,32,.92),transparent);pointer-events:none}.top>*{pointer-events:auto}.back{color:var(--accent);text-decoration:none;font-size:.85rem;font-weight:600}.top h1{margin:0;flex:1;font-size:1rem;font-weight:700;letter-spacing:-.02em}.dist{font-variant-numeric:tabular-nums;font-size:.9rem;color:var(--muted);font-weight:600}.banner{position:absolute;top:52px;left:50%;transform:translate(-50%);z-index:5;padding:8px 14px;border-radius:999px;background:#121a2be0;border:1px solid var(--border);font-size:.82rem;color:var(--ink);white-space:nowrap;pointer-events:none;transition:opacity .3s}.banner.fade{opacity:0}.controls{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:10px;padding:12px 14px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(11,18,32,.95),transparent)}.pad-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:#121a2beb;color:var(--ink);font:inherit;font-weight:700;font-size:.95rem;padding:16px 20px;border-radius:14px;cursor:pointer;min-height:56px;transition:background .12s,border-color .12s,transform .08s}.pad-btn:active,.pad-btn.held{background:#3ecf8e38;border-color:var(--accent);transform:scale(.98)}.draw-btn{border-color:var(--warn);color:var(--warn);min-width:160px}.draw-panel{position:absolute;left:50%;bottom:90px;transform:translate(-50%);z-index:10;width:min(360px,calc(100vw - 24px));padding:12px;border-radius:16px;background:var(--panel);border:1px solid var(--border);box-shadow:0 16px 48px #00000073}.draw-panel.hidden{display:none}.draw-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}.draw-head .hint{font-size:.75rem;color:var(--muted)}#draw-pad{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;background:#0a101c;border:1px dashed var(--border);touch-action:none;cursor:crosshair}.draw-actions{display:flex;gap:8px;margin-top:10px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;border:1px solid var(--border);background:#1a2438;color:var(--ink);font:inherit;font-weight:700;font-size:.88rem;padding:10px 12px;border-radius:10px;cursor:pointer}.btn.ghost{background:transparent;color:var(--muted)}.btn.primary{background:var(--accent);color:#0b1220;border-color:transparent}