:root{--blue:#0057ff;--ink:#000;--muted:#647585;--label:#758096;--bg:#e9ecea}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:Roboto,"Helvetica Neue",Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}
#view{position:absolute;inset:0;touch-action:pan-y;cursor:grab}
#view.dragging{cursor:grabbing}
#view canvas{display:block;width:100%;height:100%}
#spots{position:absolute;inset:0;pointer-events:none}
.spot{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #fff;background:var(--blue);
  box-shadow:0 2px 10px rgba(0,40,120,.35);cursor:pointer;padding:0;pointer-events:auto;font:500 14px/1 Roboto,Arial,sans-serif;color:#fff;
  display:grid;place-items:center;will-change:transform;transition:background .15s,color .15s}
.spot::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--blue);opacity:0;animation:ping 2.6s ease-out infinite}
.spot:hover,.spot[aria-pressed="true"]{background:#fff;color:var(--blue);border-color:var(--blue)}
.spot:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@keyframes ping{0%{opacity:.8;transform:scale(.7)}80%,100%{opacity:0;transform:scale(1.45)}}
@media (prefers-reduced-motion:reduce){.spot::after{animation:none}}
.controls{position:fixed;right:12px;top:12px;display:flex;flex-direction:column;gap:6px}
.controls button{width:40px;height:40px;border-radius:0;border:0;background:#fff;color:var(--blue);font:400 22px/1 Roboto,Arial,sans-serif;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.14);display:grid;place-items:center;transition:background .15s,color .15s}
.controls button:hover{background:var(--blue);color:#fff}
.controls button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.controls svg{width:18px;height:18px}
#card{position:fixed;left:12px;bottom:12px;width:min(340px,calc(100% - 24px));background:#fff;color:var(--ink);border-radius:0;padding:16px 18px 10px;
  box-shadow:0 8px 28px rgba(0,0,0,.18);border-top:4px solid var(--blue);transform:translateY(16px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#card.open{opacity:1;transform:none;pointer-events:auto}
#card h2{margin:0 34px 6px 0;font:500 19px/1.25 Roboto,Arial,sans-serif;color:var(--ink)}
#card p{margin:0 0 8px;font-size:14.5px;line-height:1.55;color:var(--muted)}
#card .row{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px solid #eef0f3;padding-top:4px}
#card .row span{font-size:12.5px;color:var(--label)}
#card .row button{border:0;background:transparent;color:var(--blue);font:500 14px Roboto,Arial,sans-serif;cursor:pointer;padding:8px 6px;border-radius:0}
#card .row button:hover{text-decoration:underline}
#close{position:absolute;right:6px;top:6px;border:0;background:transparent;color:var(--label);font:300 24px/1 Roboto,Arial,sans-serif;width:34px;height:34px;cursor:pointer;border-radius:0}
#close:hover{color:var(--ink)}
#card button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
.hint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:var(--blue);color:#fff;font:500 13px Roboto,Arial,sans-serif;
  padding:8px 14px;border-radius:0;white-space:nowrap;transition:opacity .4s;pointer-events:none}
.hint.gone{opacity:0}
#loading{position:fixed;inset:0;display:grid;place-items:center;color:var(--label);font-size:15px;pointer-events:none;transition:opacity .4s}
@media (max-width:480px){.spot{width:28px;height:28px;margin:-14px 0 0 -14px;font-size:13px}#card p{font-size:14px}}
@media (max-height:600px),(max-width:480px){#card{padding:12px 14px 6px}#card h2{font-size:16px;margin-bottom:4px}#card p{font-size:13px;line-height:1.45;margin-bottom:4px}#card .row button{padding:6px 4px;font-size:13px}}

#dims{position:absolute;inset:0;pointer-events:none}
.dim{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;transition:opacity .2s}
.dim span{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;background:#0b1f3a;border:1px solid #ffc940;color:#ffc940;font:500 11.5px Roboto,Arial,sans-serif;padding:3px 7px;border-radius:0}
#spots{transition:opacity .3s}#spots.hidden{opacity:0;pointer-events:none}#spots.hidden .spot{pointer-events:none}
.acts{position:fixed;left:12px;top:12px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 76px)}
.acts button{height:36px;padding:0 14px 0 11px;border-radius:999px;border:0;background:#fff;color:var(--blue);font:500 13.5px Roboto,Arial,sans-serif;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.14);display:flex;align-items:center;gap:7px;transition:background .15s,color .15s}
.acts button svg{width:16px;height:16px;flex:none}
.acts button:hover:not(:disabled){background:#f0f5ff}
.acts button[aria-pressed="true"]{background:var(--blue);color:#fff}
.acts button:disabled{opacity:.75;cursor:default}
.acts button:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
#cap{position:fixed;left:50%;bottom:16px;transform:translate(-50%,8px);background:#0b1f3a;color:#fff;font:500 13.5px Roboto,Arial,sans-serif;padding:9px 16px;border-radius:0;
  white-space:nowrap;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
#cap.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:480px){.dim span{display:inline-block;transform:translate(-50%,-50%);white-space:nowrap;background:#0b1f3a;border:1px solid #ffc940;color:#ffc940;font:500 11.5px Roboto,Arial,sans-serif;padding:3px 7px;border-radius:0}.acts button{height:34px;font-size:12.5px;padding:0 12px 0 9px}}
#wm{position:fixed;right:12px;bottom:12px;height:30px;padding:6px 9px;background:rgba(255,255,255,.82);border-radius:0;box-shadow:0 1px 4px rgba(0,0,0,.1);pointer-events:none}
@media (max-width:480px){#wm{height:24px;padding:5px 7px}}

.acts:empty{display:none}
@media (max-width:480px){.hint{bottom:48px}}

body.plan{background:#0b1f3a}
#view{transition:opacity .16s}
#tblock{position:fixed;right:12px;bottom:12px;display:none;align-items:center;gap:10px;background:#fff;border:1px solid #e1e6ee;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:8px 12px;color:#647585;font:400 12px Roboto,Arial,sans-serif;max-width:calc(100% - 24px)}
#tblock.plan{background:#0b1f3a;border-color:#ffc940;box-shadow:none;color:#ffc940}
#tblock img{height:24px}#tblock div{display:flex;flex-direction:column;border-left:1px solid #e1e6ee;padding-left:10px}#tblock b{font-weight:500;font-size:12.5px;color:#0b1f3a}
#tblock.plan div{border-left-color:#ffc94066}#tblock.plan b{color:#fff}
@media (max-width:480px){#tblock img{height:18px}#tblock{position:fixed;right:12px;bottom:12px;display:none;align-items:center;gap:10px;background:#fff;border:1px solid #e1e6ee;box-shadow:0 2px 8px rgba(0,0,0,.12);padding:8px 12px;color:#647585;font:400 12px Roboto,Arial,sans-serif;max-width:calc(100% - 24px)}
#tblock.plan{background:#0b1f3a;border-color:#ffc940;box-shadow:none;color:#ffc940}}
.acts button[aria-pressed="true"]:hover{background:#0048d6;color:#fff}
body.plan .acts button{box-shadow:0 0 0 1px #ffc94055}
@media (max-width:480px){.hint{bottom:58px}}
body.playing #tblock{display:none!important}
#card{z-index:20}#tblock{z-index:10}