:root{font-family:'Malgun Gothic','Apple SD Gothic Neo',sans-serif;color:#222;background:white;color-scheme:light;font-synthesis:none}
*{box-sizing:border-box}
body{display:flow-root;margin:0;font-size:13px;line-height:1.6}
button{font:inherit;min-height:44px;padding:8px 12px;background:white;color:inherit;border:1px solid #aaa;border-radius:0;cursor:pointer}
button:hover:not(:disabled){background:#f2f2f2}
button:disabled{opacity:.45;cursor:default}
button.primary{background:#222;color:white;border-color:#222}
button.primary:hover:not(:disabled){background:#444}
:focus-visible{outline:3px solid #087da4;outline-offset:3px}
[hidden]{display:none!important}
a{color:inherit;text-underline-offset:3px}
.page-shell{max-width:940px;margin:auto;padding:24px}
.intro{display:flex;align-items:center;gap:24px;margin-bottom:20px}
.intro h1{font-size:20px;margin:0}
.instructions{margin:0 0 14px}
.runbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.metrics,.actions{display:flex;align-items:center;gap:8px}
.metrics{gap:20px}
.metrics strong{font-size:20px;margin:0 3px;font-variant-numeric:tabular-nums}
.low-time{color:#ad302b}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 140px;gap:20px}
.arena{min-width:0}
.map-heading{display:flex;justify-content:space-between;gap:8px;font-size:11px;margin-bottom:7px;color:#555}
.legend{white-space:nowrap}.you{color:#087da4}
.canvas-wrap{position:relative;aspect-ratio:4/3;border:1px solid #aaa}
canvas{display:block;width:100%;height:100%;cursor:pointer}
#pause-notice{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#fffffff2;border:1px solid #999;padding:6px 14px;pointer-events:none}
.well-buttons{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:10px}
.well-button{padding:5px 0;font-size:13px}
.well-button small{display:block;font-size:10px;color:#666}
.well-button[aria-pressed=true]{background:#087da4;color:white;border-color:#087da4}
.well-button[aria-pressed=true]:hover{background:#066887}
.well-button[aria-pressed=true] small{color:white}
.well-button.queued{border:2px dashed #087da4}
.trip-status{margin:10px 0 5px;font-size:12px;min-height:2em}
.help{font-size:11px;color:#666;line-height:1.7;margin:0}
.ranking h2{font-size:12px;margin:0 0 7px;font-weight:600}
.ranking ol{list-style:none;margin:0;padding:0;border-top:1px solid #aaa}
.ranking li{display:flex;align-items:center;gap:8px;border-bottom:1px solid #ddd;min-height:40px;padding:6px 4px}
.rank-number{color:#777;font-size:11px;min-width:10px}
.player-name{flex:1}.score{font-weight:600;font-variant-numeric:tabular-nums}
.is-you{color:#066887;background:#eff7f9}
.results{border-top:1px solid #aaa;margin-top:16px;padding-top:12px}
.results p{margin:0 0 6px;font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.embedded{overflow:hidden}
.embedded .page-shell{max-width:none;padding:16px}
.embedded .intro{display:none}
@media(max-width:560px){
  .page-shell,.embedded .page-shell{padding:10px}
  .game-layout{grid-template-columns:1fr;gap:16px}
  .ranking ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
  .metrics{gap:18px}.metrics strong{font-size:18px}
  .runbar{margin-bottom:12px}.instructions{font-size:12px}
  .ranking li{gap:5px;font-size:12px}
}