/* Tokyo night pages: the interactive layer (assets/tokyonight.js). */
.tn-fam{position:fixed;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:flex-end;gap:6px;transform:translateY(calc(100% + 50px + env(safe-area-inset-bottom,0px)));transition:transform .5s cubic-bezier(.2,.9,.3,1.2);pointer-events:none}
.tn-fam.on{transform:none}
.tn-fam img{width:64px;height:64px;object-fit:contain;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 4px 8px rgba(0,0,0,.25));order:0}
.tn-fam.hop img{animation:tn-hop .6s ease}
@keyframes tn-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-16px) rotate(-6deg)}60%{transform:translateY(0) rotate(3deg)}}
.tn-bub{order:1;max-width:min(260px,62vw);margin-bottom:34px;background:#fff;color:#1b2622;border:1px solid #e0ddd4;border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:14px;line-height:1.35;box-shadow:0 8px 24px rgba(0,0,0,.12);opacity:0;transform:translateY(6px) scale(.96);transform-origin:left bottom;transition:opacity .25s,transform .25s;pointer-events:none}
.tn-fam.talk .tn-bub{opacity:1;transform:none;pointer-events:auto}
.tn-bub-row{display:none;gap:10px;align-items:center;margin-top:6px;font-size:12px}
.tn-bub.menu .tn-bub-row{display:flex}
.tn-bring{color:#0E7C66;font-weight:700;text-decoration:underline}
.tn-x{background:none;border:0;color:#6b7772;font:inherit;font-size:12px;cursor:pointer;padding:2px 0;text-decoration:underline}
.tn-chip{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));min-height:44px;z-index:59;border:0;border-radius:999px;background:#0E7C66;color:#fff;font:700 14px/1 inherit;padding:12px 16px;box-shadow:0 8px 22px rgba(14,124,102,.35);cursor:pointer;transform:translateY(calc(100% + 60px + env(safe-area-inset-bottom,0px)));transition:transform .4s cubic-bezier(.2,.9,.3,1.2)}
.tn-chip.on{transform:none}
.tn-panel{position:fixed;right:calc(12px + env(safe-area-inset-right,0px));bottom:calc(70px + env(safe-area-inset-bottom,0px));z-index:61;width:min(340px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-height:60vh;overflow:auto;background:#fff;border:1px solid #e0ddd4;border-radius:18px;padding:14px;box-shadow:0 18px 40px rgba(0,0,0,.18);display:none}
.tn-panel.on{display:block;animation:tn-up .25s ease}
@keyframes tn-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tn-panel-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.tn-panel ul{list-style:none;margin:0 0 12px;padding:0}.tn-panel li{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #eef1ee;font-size:14px}
.tn-rm{background:none;border:0;font-size:18px;line-height:1;cursor:pointer;color:#6b7772}
.tn-empty{color:#6b7772}
.tn-heart{position:relative;margin-left:8px;border:1px solid #e0ddd4;background:#fff;color:#c9d3cf;border-radius:999px;width:30px;height:30px;font-size:15px;line-height:1;cursor:pointer;vertical-align:middle;transition:transform .2s,color .2s,background .2s}
.tn-heart:hover{transform:scale(1.1)}
.tn-heart.on{color:#fff;background:#E5486B;border-color:#E5486B;animation:tn-beat .45s ease}
@keyframes tn-beat{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.tn-peek{margin-left:6px}
.st li .btn,.st li .tn-peek{padding:7px 12px;font-size:13px;min-height:36px;border:1px solid #cfe0da;border-radius:999px;background:#fff;margin:4px 0 0 4px;vertical-align:middle}
/* timeline rider */
.vz{overflow:hidden}
.tl-ride{position:absolute;bottom:-4px;left:0;transform:translateX(-14px);display:flex;align-items:center;gap:4px;white-space:nowrap;transition:left .12s linear;pointer-events:none;z-index:2}
.tl-ride-f{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.tl-ride-l{font-size:11px;font-weight:700;background:#fff;border:1px solid #e0ddd4;border-radius:999px;padding:2px 7px}
.tl-ride.flip{flex-direction:row-reverse;transform:translateX(calc(-100% + 14px))}
.tl-ride.gap .tl-ride-l{background:#14243a;color:#fff;border-color:#14243a}
.tl-marks{height:40px!important}
/* booth */
.bx-pin{cursor:pointer;transition:transform .2s,background .2s}
.bx-pin:hover,.bx-pin:focus-visible{transform:scale(1.15)}
.bx-pin.on{background:#E8A33D;color:#2b1d05}
.bx-pin:not(.on){animation:bx-pop .5s ease both,bx-pulse 2.4s ease-in-out 1.5s infinite}
@keyframes bx-pulse{0%,100%{box-shadow:0 0 0 3px #fff,0 0 0 3px rgba(14,124,102,.0)}50%{box-shadow:0 0 0 3px #fff,0 0 0 9px rgba(14,124,102,.25)}}
.bx-tip{position:absolute;transform:translate(16px,-50%);max-width:46%;background:#14243a;color:#fff;font-size:13px;line-height:1.3;padding:7px 10px;border-radius:10px;z-index:3;pointer-events:none}
.bx-tip.flip{transform:translate(calc(-100% - 16px),-50%)}
.bx-list li.on{font-weight:700;color:#0b5e4e}
/* peek lightbox */
.tn-box{position:fixed;inset:0;z-index:70;background:rgba(10,18,24,.72);display:none;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) max(14px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px))}
.tn-box.on{display:flex}
.tn-box-c{background:#fff;border-radius:20px;padding:14px;width:min(760px,100%);max-height:90vh;overflow:auto;animation:tn-up .25s ease}
.tn-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.tn-strip figure{flex:0 0 86%;margin:0;scroll-snap-align:center}
.tn-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#eef1ee}
.tn-strip figcaption{font-size:13px;color:#46514c;padding-top:4px}
.tn-credit{font-size:12px;color:#6b7772;margin:6px 0 10px}
.tn-peek-msg{color:#46514c}
/* picker */
.tn-pick{margin:22px 0;padding:18px;border-radius:22px;background:linear-gradient(135deg,#14243a,#0f3b3a);color:#fff}
.tn-pick h2{color:#fff;margin:0 0 12px;font-size:22px}
.tn-pick form{display:grid;gap:12px}
.tn-pick label.tn-l{font-size:13px;font-weight:700;color:#cfe3dd;display:block;margin-bottom:4px}
.tn-pick select{width:100%;font:inherit;padding:10px 12px;border-radius:12px;border:0;background:#fff;color:#1b2622}
.tn-seg{display:flex;flex-wrap:wrap;gap:6px}
.tn-seg input{position:absolute;opacity:0;pointer-events:none}
.tn-seg label{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:8px 12px;font-size:14px;cursor:pointer;transition:background .2s}
.tn-seg input:checked+label{background:#fff;color:#14243a;border-color:#fff;font-weight:700}
.tn-seg input:focus-visible+label{outline:2px solid #E8A33D}
.tn-pick .tn-chk{display:flex;gap:8px;align-items:center;font-size:14px;min-height:40px}
.tn-pick button[type=submit]{justify-self:start;border:0;border-radius:999px;background:#E8A33D;color:#2b1d05;font:700 16px/1 inherit;padding:13px 22px;cursor:pointer}
.tn-res{display:flex;gap:12px;align-items:flex-start;margin-top:14px;background:#fff;color:#1b2622;border-radius:18px;padding:14px}
.tn-res.pop{animation:tn-pop .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tn-pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.tn-res-f{width:56px;height:56px;object-fit:contain;flex:0 0 56px;animation:tn-hop .7s ease .2s}
.tn-res-b{flex:1;min-width:0}
.tn-opt{padding:8px 0;border-bottom:1px solid #eef1ee;position:relative}
.tn-opt .tn-heart{position:absolute;right:0;top:8px}
.tn-kind{display:block;font-size:12px;font-weight:700;color:#0E7C66;text-transform:uppercase;letter-spacing:.04em}
.tn-opt b{display:block;padding-right:40px}
.tn-meta{display:block;font-size:13px;color:#46514c;margin:2px 0 6px}
.tn-acts{display:flex;flex-wrap:wrap;gap:6px}
.tn-acts .btn{padding:7px 12px;font-size:14px;min-height:0}
.tn-luup{font-size:13px;color:#46514c;margin:10px 0}
/* hero: a little rain over the picture, only while motion is fine */
.vz-pic{display:block;position:relative}
.vz-hero .vz-pic::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(102deg,transparent 0 26px,rgba(255,255,255,.22) 26px 27px,transparent 27px 64px);background-size:64px 160px;opacity:.55;mix-blend-mode:screen;animation:tn-rain .7s linear infinite}
@keyframes tn-rain{from{background-position:0 0}to{background-position:-34px 160px}}
@media (prefers-reduced-motion: reduce){.tn-fam,.tn-chip{transition:none}.tn-fam.hop img,.tn-res.pop,.tn-res-f,.tn-heart.on,.bx-pin:not(.on){animation:none}.vz-hero .vz-pic::after{display:none}.tl-ride{transition:none}}
@media print{.tn-fam,.tn-chip,.tn-panel,.tn-box{display:none!important}}
/* Phones (8 Nov): every control a thumb can hit, and the speech bubble clears the My-night chip. */
.tn-heart::after,.bx-pin::after{content:"";position:absolute;inset:-7px;border-radius:50%}
.tn-res .btn,.wc .btn{min-height:40px;display:inline-flex;align-items:center}
.tn-bub-row{gap:14px}.tn-bring,.tn-x{display:inline-block;padding:8px 0}.tn-x{padding:8px 8px;margin:0 -8px}
:root:has(.tn-chip.on) .tn-bub{margin-bottom:72px}
.tn-box-c{max-height:90dvh}
/* Hearts sit at the right edge of their line, one column, never wrapping onto a line of their own. */
li[data-tn-place]{position:relative;padding-right:46px;min-height:34px;margin-bottom:6px}
li[data-tn-place] > .tn-heart{position:absolute;right:0;top:-2px;margin:0}
/* On a phone the guide tucks half out of the way between lines, so it never sits on the text. */
@media (max-width:480px){.tn-fam img{width:52px;height:52px}.tn-fam.on:not(.talk){transform:translateY(42%)}}