/* Interactive views: finder, search, saved, my night, host mode. */

/* ---------- fields ---------- */
.field{display:grid;gap:.3rem;align-content:start}
.field label{font-weight:750;font-size:.95rem}
.field small{color:var(--ink-2);font-size:.82rem}
.field input[type="search"],.field input[type="number"],.field input[type="text"],.field select,.field textarea,.search-row input{min-height:2.875rem;width:100%;padding:.55rem .8rem;border:1.5px solid var(--line-2);border-radius:var(--radius-s);background:var(--paper);color:var(--ink);font-size:1rem}
.field textarea{min-height:4.2rem;resize:vertical;line-height:1.45}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-2)}
.field--check{grid-template-columns:auto 1fr;align-items:center;column-gap:.6rem}
.field--check input{width:1.4rem;height:1.4rem;accent-color:var(--primary);margin:0}
.field--check small{grid-column:2}
.field--check label{min-height:2.75rem;display:flex;align-items:center}
.field--inline{grid-template-columns:auto auto;align-items:center;gap:.5rem}
.btn:disabled,.icon-btn:disabled{opacity:.45;cursor:not-allowed}
.print-only{display:none}

/* ---------- finder ---------- */
.finder-form{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-4);box-shadow:var(--shadow-1)}
.finder-top{display:flex;gap:var(--space-3);align-items:end;flex-wrap:wrap}
.field--grow{flex:1 1 14rem}
.finder-filters{grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:var(--space-4);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line)}
.finder-filters.is-open{display:grid}
.finder-status{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center;justify-content:space-between;margin-block:var(--space-5) var(--space-4)}
.finder-count{font-family:var(--font-display);font-size:var(--step-2);font-weight:600;margin:0}
.finder-active{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.chip--x{cursor:pointer;min-height:2.75rem;padding-inline:.9rem;font-size:.95rem;border:0}
.chip--x:hover{background:var(--primary);color:#fff}
.finder-results{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr))}
.finder-card h2{font-size:var(--step-1);margin:0}
.finder-card h2 a{color:var(--ink);text-decoration:none}
.finder-card h2 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.finder-reason{color:var(--primary-deep)!important;font-weight:700}
.finder-empty{background:var(--accent-soft);border-radius:var(--radius-l);padding:var(--space-5);color:#5E230F}
.finder-empty ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:var(--space-4)}
.finder-empty .btn--ghost{background:#fff}
@media (min-width:56rem){.finder-toggle{display:none}.finder-filters{display:grid}}

/* ---------- search ---------- */
.search-form label{display:block;font-weight:750;margin-bottom:.4rem}
.search-row{display:flex;gap:.5rem;max-width:40rem}
.search-row input{flex:1;min-width:0}
.search-status{font-weight:700;margin-block:var(--space-5) var(--space-3)}
.search-results{list-style:none;margin:0;padding:0;max-width:46rem}
.search-results li{padding-block:var(--space-4);border-bottom:1px solid var(--line)}
.search-results h2{font-size:var(--step-1);margin:.15rem 0 .3rem}
.search-results p{margin:0;color:var(--ink-2)}

/* ---------- my night + saved ---------- */
.plan,.saved{max-width:56rem}
.plan .notice,.saved .notice{margin-bottom:var(--space-5)}
.plan-empty{background:var(--paper);border:1.5px dashed var(--line-2);border-radius:var(--radius-l);padding:var(--space-6);text-align:center}
.plan-empty h2{font-size:var(--step-2)}
.plan-summary{display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;justify-content:space-between;align-items:baseline}
.plan-hint,.plan-notehint{color:var(--ink-2);font-size:.9rem}
.plan-list{list-style:none;margin:0 0 var(--space-3);padding:0;display:grid;gap:var(--space-4)}
.plan-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-4);box-shadow:var(--shadow-1);display:grid;gap:var(--space-3)}
.plan-item[draggable="true"]{cursor:grab}
.plan-item-head{display:flex;gap:var(--space-3);align-items:flex-start}
.plan-num{flex:none;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.15rem}
.plan-item-title{flex:1;min-width:0}
.plan-item-title h3{font-size:var(--step-1);margin:0}
.plan-item-title p{margin:.15rem 0 0;color:var(--ink-2);font-size:.95rem}
.plan-controls{display:flex;gap:.15rem;flex:none}
.plan-controls .icon-btn{border:1px solid var(--line)}
.plan-controls svg{width:1.25rem;height:1.25rem}
.plan-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-block:var(--space-4)}
.plan-ready,.plan-danger,.saved-section{margin-top:var(--space-7)}
.plan-session-games{font-size:.9rem;font-weight:700;color:var(--primary-deep)!important}
.plan-danger{border-top:1px solid var(--line);padding-top:var(--space-5);color:var(--ink-2)}
.saved-grid{list-style:none;padding:0;margin:0}

/* ---------- host mode ---------- */
body.page-play{background:var(--night);color:#F4EFE6}
.page-play main{min-height:100dvh}
.host{--h-fg:#F4EFE6;max-width:52rem;margin-inline:auto;padding:max(.75rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));display:grid;gap:var(--space-4);background:var(--night);color:var(--h-fg);min-height:100dvh;align-content:start}
.host:fullscreen{max-width:none;overflow:auto;padding:1.5rem max(1.5rem,6vw)}
.host .btn--quiet{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.host .btn--quiet:hover{background:rgba(255,255,255,.12);border-color:#fff}
.host .btn--quiet[aria-pressed="true"]{background:#fff;color:var(--night)}
.host .btn:not(.btn--quiet){border-color:var(--gold);background:var(--gold);color:#1B1400}
.host .btn:not(.btn--quiet):hover{background:#FFE0A3;border-color:#FFE0A3;color:#1B1400}
.host-opts{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:1.2rem}
.host-opts summary{min-height:2.875rem;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;font-weight:750;cursor:pointer;color:#DCE7E5;list-style:none}
.host-opts summary::-webkit-details-marker{display:none}
.host-opts summary::after{content:"+";font-size:1.3rem;color:var(--gold)}
.host-opts[open] summary::after{content:"–"}
.host-opts .host-filters{padding:0 1rem 1rem}
.host :focus-visible{outline-color:#fff}
.host-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.host-title{flex:1 1 10rem;font-size:var(--step-2);margin:0;color:#fff}
.host-tools{display:flex;gap:.4rem;flex-wrap:wrap}
.host-rules{background:rgba(255,255,255,.07);border-radius:var(--radius)}
.host-rules-toggle{width:100%;text-align:start;min-height:2.875rem;padding:.6rem 1rem;background:none;border:0;color:var(--gold);font-weight:800;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.host-rules-toggle::after{content:"+";font-size:1.4rem;line-height:1}
.host-rules-toggle[aria-expanded="true"]::after{content:"–"}
.host-rules ol{margin:0;padding:0 1rem 1rem 2.4rem;padding-inline:2.4rem 1rem;font-size:1.05rem}
.host-rules li+li{margin-top:.35rem}
.host-tabs{display:flex;gap:.4rem}
.host-tabs button{flex:1;min-height:2.875rem;border-radius:999px;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-weight:750;cursor:pointer}
.host-tabs button[aria-selected="true"]{background:#fff;color:var(--night);border-color:#fff}
.host-panel{display:grid;gap:var(--space-4)}
.host-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--space-3);align-items:end}
.host .field label{color:#DCE7E5}
.host .field select{background:#12383F;color:#fff;border-color:rgba(255,255,255,.35)}
.host-card{background:var(--bg);color:var(--ink);border-radius:var(--radius-l);padding:clamp(1.25rem,4vw,2.5rem);min-height:min(46vh,22rem);display:flex;flex-direction:column;justify-content:center;gap:var(--space-3);box-shadow:0 18px 50px rgba(0,0,0,.35);position:relative}
.host-card-cat{font-size:var(--step--1);font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-deep)}
:lang(ar) .host-card-cat{text-transform:none;letter-spacing:0}
.hp-text{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,6.5vw,3.4rem);line-height:1.12;margin:0;text-wrap:balance}
.hp-text--step{font-size:clamp(1.35rem,4.2vw,2.1rem);line-height:1.3;font-weight:500}
.hp-wyr p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.45rem,4.8vw,2.4rem);line-height:1.18;margin:0;text-wrap:balance}
.hp-pre,.hp-or{display:block;font-weight:800;letter-spacing:.09em;text-transform:uppercase;font-size:var(--step--1);color:var(--primary-deep);margin-block:.5rem}
.hp-triplet ol,.hp-ladder ol{font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,3.8vw,1.8rem);line-height:1.25;padding-inline-start:1.6rem;margin:0 0 var(--space-4)}
.hp-triplet li+li,.hp-ladder li+li{margin-top:.6rem}
.hp-triplet li.is-lie{color:var(--accent-deep);text-decoration:underline;text-decoration-style:wavy;text-underline-offset:.2em}
.host-card .btn--quiet{background:var(--paper);border-color:var(--line-2);color:var(--ink);align-self:flex-start}
.host-card .btn--quiet:hover{background:var(--bg-2);color:var(--ink)}
.host-card .btn{background:var(--primary);border-color:var(--primary);color:#fff;align-self:flex-start}
.hp-note{font-size:.95rem;color:var(--ink-2);margin:0}
.hp-theme{font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--primary-deep);margin:0}
.hp-set{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.hp-set li{border:1.5px solid var(--line-2);border-radius:var(--radius);padding:.9rem;font-family:var(--font-display);font-weight:600;font-size:clamp(1.2rem,4vw,1.9rem);text-align:center}
.hp-picture svg{width:100%;max-height:38vh}
.hp-picture p{text-align:center;font-weight:800;margin:0}
.host-state{text-align:center;display:grid;gap:var(--space-3);justify-items:center}
.host-state .btn{align-self:center}
.host-nav{display:grid;grid-template-columns:1fr auto 1fr 1.4fr;gap:.5rem;align-items:center}
.host-nav .btn{min-height:3.4rem;padding-inline:.6rem;font-size:1.05rem}
.host-count{font-weight:750;font-variant-numeric:tabular-nums;text-align:center;padding-inline:.4rem;color:#DCE7E5;font-size:.95rem}
.host-sub{display:flex;justify-content:center}
.host-timer{background:rgba(255,255,255,.07);border-radius:var(--radius-l);padding:var(--space-4);display:grid;gap:var(--space-3)}
.host-timer-main{display:flex;align-items:baseline;gap:var(--space-4);flex-wrap:wrap}
.host-timer-label{font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:var(--step--1);color:var(--gold)}
:lang(ar) .host-timer-label{text-transform:none;letter-spacing:0}
.host-clock{font-family:var(--font-display);font-size:clamp(2.4rem,9vw,3.6rem);font-weight:600;font-variant-numeric:tabular-nums;line-height:1}
.host-timer--done .host-clock{color:var(--accent)}
.host-timer-done{font-weight:800;color:var(--accent)}
.host-timer-controls{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
.host-help{font-size:.85rem;color:#A9BDBA;margin:0}
.host--large .hp-text{font-size:clamp(2.4rem,9vw,5rem)}
.host--large .hp-text--step,.host--large .hp-wyr p{font-size:clamp(1.8rem,6vw,3.2rem)}
.host--large .hp-triplet ol,.host--large .hp-ladder ol{font-size:clamp(1.5rem,5vw,2.5rem)}
.host--large .host-rules ol{font-size:1.35rem}
@media (max-width:30rem){.host-nav{grid-template-columns:1fr 1fr}.host-count{grid-column:1/-1;order:-1}}
@media (orientation:landscape) and (max-height:32rem){.host-card{min-height:0}}

/* ---------- host mode v2: a lit table, a real card, a ring timer ---------- */
body.page-play{background:#071D22}
.host{position:relative;isolation:isolate;background:transparent;max-width:56rem}
.host::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(48rem 30rem at 85% -5%,color-mix(in srgb,var(--hue-glow) 46%,transparent),transparent 62%),radial-gradient(40rem 26rem at 0% 105%,rgba(233,133,104,.28),transparent 60%),linear-gradient(180deg,#0C2A30,#071D22)}
.host:fullscreen{background:#071D22}
.host-bar{padding-block:.25rem}
.host-title{font-size:clamp(1.3rem,1rem + 1.6vw,2rem);letter-spacing:-.01em}
.host-rules,.host-timer{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:1.4rem}
.host-tabs{background:rgba(255,255,255,.06);border-radius:999px;padding:.3rem;gap:.2rem}
.host-tabs button{border:0;transition:background-color .25s,color .25s}
.host-stage{position:relative;perspective:1400px;display:grid}
.host-stage::before,.host-stage::after{content:"";position:absolute;inset:0;border-radius:2rem;background:var(--hue-soft);z-index:0;transition:transform .4s var(--ease)}
.host-stage::before{transform:rotate(-2.5deg) translateY(.7rem) scale(.97);opacity:.55}
.host-stage::after{transform:rotate(2deg) translateY(.35rem) scale(.985);opacity:.8;background:#fff}
.host-card{z-index:1;border-radius:2rem;background:linear-gradient(165deg,#fff 0%,var(--hue-soft) 140%);min-height:min(48vh,24rem);box-shadow:0 30px 70px rgba(0,0,0,.45);touch-action:pan-y;user-select:none;transform:translateX(var(--drag,0)) rotate(calc(var(--drag-n,0) * 6deg));transition:transform .35s var(--ease)}
.host-card.is-dragging{transition:none;cursor:grabbing}
.host-card-inner{display:flex;flex-direction:column;gap:var(--space-3);animation:host-flip .5s cubic-bezier(.2,.9,.25,1) both;transform-origin:50% 60%;backface-visibility:hidden}
@keyframes host-flip{from{opacity:0;transform:rotateY(-70deg) translateX(2rem) scale(.94)}}
.host-card-cat{display:inline-flex;align-self:flex-start;background:var(--hue-strong);color:#fff;padding:.3rem .8rem;border-radius:999px;letter-spacing:.06em;font-size:.74rem}
.hp-or,.hp-pre,.hp-theme{color:var(--hue-ink)}
.hp-set li{border-color:color-mix(in srgb,var(--hue-strong) 30%,var(--line));background:#fff}
.host-nav .btn{border-radius:1.1rem}
.host-swipe{text-align:center;font-size:.8rem;color:#8FA6A3;margin:0}
@media (hover:hover) and (pointer:fine){.host-swipe{display:none}}
.host-timer-main{align-items:center}
.host-ring{position:relative;width:5.6rem;height:5.6rem;flex:none}
.host-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.host-ring circle{fill:none;stroke-width:7}
.host-ring .track{stroke:rgba(255,255,255,.14)}
.host-ring .bar{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset .3s linear,stroke .3s}
.host-timer--done .host-ring .bar{stroke:var(--accent)}
.host-timer--done .host-ring{animation:ring-done .6s ease 2}
@keyframes ring-done{50%{transform:scale(1.08)}}
.host-ring .host-clock{position:absolute;inset:0;display:grid;place-items:center;font-size:1.25rem}
@media (prefers-reduced-motion:reduce){.host-card-inner{animation:none}.host-card{transform:none}}

/* ---------- host mode v3: a game-show table — stage + side rail, scoreboard, celebration ---------- */
.host{max-width:78rem}
.host-layout{display:grid;gap:var(--space-4);align-items:start}
.host-main,.host-side{display:grid;gap:var(--space-4);min-width:0}
@media (min-width:64rem){.host-layout{grid-template-columns:minmax(0,1.6fr) minmax(21rem,1fr);gap:1.5rem}.host-side{position:sticky;top:1rem}}
.host::after{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;background:radial-gradient(30rem 22rem at 22% 30%,color-mix(in srgb,var(--hue-glow) 30%,transparent),transparent 65%),radial-gradient(26rem 20rem at 80% 72%,rgba(139,124,246,.2),transparent 65%);animation:host-aurora 26s ease-in-out infinite alternate}
@keyframes host-aurora{to{transform:translate3d(6%,-5%,0) rotate(8deg) scale(1.08)}}
.host-sound{display:inline-flex;align-items:center;gap:.35rem}
.host-sound svg{width:1.15rem;height:1.15rem;flex:none}
.team-c0{--team:#F29A80}.team-c1{--team:#F2C879}.team-c2{--team:#B3A7FF}.team-c3{--team:#7CC8F5}.team-c4{--team:#4FD6C2}.team-c5{--team:#F58DB8}

/* the card: coloured edge, soft corner glow, maker's mark */
.host-card{overflow:hidden}
.host-card::before{content:"";position:absolute;inset:0 0 auto;height:.5rem;background:linear-gradient(90deg,var(--hue-strong),var(--gold),var(--hue-strong))}
.host-card::after{content:"";position:absolute;inset-inline-end:-3.5rem;bottom:-3.5rem;width:13rem;height:13rem;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--hue-strong) 20%,transparent),transparent 68%);pointer-events:none}
.host-card-mark{position:absolute;inset-inline-end:1.4rem;bottom:1rem;z-index:1;font-family:var(--font-display);font-weight:600;font-size:.82rem;color:var(--hue-ink);pointer-events:none}
.host-stage.is-urgent .host-card{box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 3px var(--accent)}
.host-stage.is-timeup .host-card{animation:host-timeup .55s ease 3}
@keyframes host-timeup{50%{box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 0 8px var(--accent),0 0 70px 12px color-mix(in srgb,var(--accent) 60%,transparent)}}

/* "got it": one tap scores for the team in play and deals the next card */
.host-gotit{display:flex;justify-content:center;align-items:center;gap:.55rem;width:100%;min-height:3.75rem;font-size:1.12rem;border-radius:1.1rem;transition:transform .15s,background-color .2s}
.host .btn.host-gotit.host-gotit{background:var(--team);border-color:var(--team);color:#0B2227;box-shadow:0 10px 30px color-mix(in srgb,var(--team) 35%,transparent)}
.host .btn.host-gotit.host-gotit:hover{background:#fff;border-color:#fff;color:#0B2227}
.host-gotit:active{transform:scale(.98)}
.host-gotit svg{width:1.45rem;height:1.45rem;flex:none}

/* timer: larger ring, glow while running, a heartbeat for the last ten seconds */
.host-timer-main{justify-content:center}
.host-ring{width:6.4rem;height:6.4rem}
.host-ring .host-clock{font-size:1.45rem}
.host-timer--running .host-ring .bar{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gold) 70%,transparent))}
.host-timer--urgent .host-ring .bar{stroke:var(--accent);filter:drop-shadow(0 0 8px var(--accent))}
.host-timer--urgent .host-clock{color:#FFD9CF;animation:host-beat 1s ease-in-out infinite}
@keyframes host-beat{50%{transform:scale(1.12)}}
.host-timer-controls{justify-content:center}
@media (min-width:64rem){.host-timer-main{flex-direction:column;gap:.6rem}.host-ring{width:10rem;height:10rem}.host-ring .host-clock{font-size:2.3rem}}

/* scoreboard */
.host-score{container-type:inline-size;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(10px);border-radius:1.4rem;padding:var(--space-4);display:grid;gap:var(--space-3)}
.host-score-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.75rem}
.host-score-title{margin:0;font-family:var(--font-body);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:var(--step--1);color:var(--gold)}
:lang(ar) .host-score-title,:lang(ar) .host-winner h3{text-transform:none;letter-spacing:0}
.host-score-empty{display:grid;gap:.75rem;justify-items:start}
.host-score-empty p{margin:0;color:#C9D8D5}
.host-teams{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.host-team{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"turn name crown x" "score score score score";align-items:center;gap:.25rem .4rem;padding:.4rem .5rem;border-radius:1.1rem;background:rgba(255,255,255,.05);border:1.5px solid transparent;transition:background-color .25s,border-color .25s,transform .2s}
@container (min-width:27rem){.host-team{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"turn name crown score x"}}
.host-team.is-turn{background:color-mix(in srgb,var(--team) 16%,transparent);border-color:var(--team)}
.host-team.is-lit{background:color-mix(in srgb,var(--team) 48%,transparent);transform:scale(1.03)}
.host-team-turn{grid-area:turn;width:2.75rem;height:2.75rem;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;cursor:pointer}
.host-team-turn span{width:1.15rem;height:1.15rem;border-radius:50%;background:var(--team);box-shadow:0 0 0 3px rgba(255,255,255,.14);transition:box-shadow .25s}
.host-team.is-turn .host-team-turn span{box-shadow:0 0 0 3px #fff,0 0 16px 2px var(--team)}
.host-team-name{grid-area:name;min-width:0;width:100%;min-height:2.75rem;background:transparent;border:0;border-bottom:1.5px solid transparent;border-radius:.4rem;color:#fff;font:inherit;font-weight:750;padding:.35rem .3rem}
.host-team-name:hover{border-bottom-color:rgba(255,255,255,.35)}
.host-team-name:focus-visible{background:rgba(255,255,255,.1)}
.host-team-name::placeholder{color:#B9CAC7;opacity:1}
.host-team-crown{grid-area:crown;width:1.35rem;height:1.35rem;color:var(--gold);animation:host-pop .45s var(--ease)}
.host-team-score{grid-area:score;display:flex;align-items:center;justify-content:flex-end;gap:.2rem}
.host-team-score button,.host-team-x{width:2.75rem;height:2.75rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:1.35rem;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background-color .2s,color .2s,transform .15s}
.host-team-score button:last-child{background:var(--team);border-color:var(--team);color:#0B2227}
.host-team-score button:active{transform:scale(.9)}
.host-team-score button:disabled{opacity:.35;cursor:default}
.host-team-score button:not(:disabled):hover,.host-team-x:hover{background:#fff;color:#0B2227;border-color:#fff}
.host-team-score output{min-width:2.6rem;text-align:center;font-family:var(--font-display);font-weight:600;font-size:1.75rem;line-height:1;font-variant-numeric:tabular-nums;color:#fff;animation:host-pop .4s var(--ease)}
.host-team-x{grid-area:x;width:2.4rem;height:2.4rem;border-color:transparent;color:#B9CAC7;font-size:1.25rem}
.host-score-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.host-score-finish{margin-inline-start:auto}
@keyframes host-pop{0%{transform:scale(.6);opacity:.3}60%{transform:scale(1.25)}}

/* phones: clock + main timer button stay in reach under the thumb */
.host-dock{display:none}
@media (max-width:63.99rem){
  .host{padding-bottom:calc(5.5rem + env(safe-area-inset-bottom))}
  .host-dock{position:fixed;inset-inline:0;bottom:0;z-index:20;display:flex;align-items:center;gap:.75rem;padding:.6rem max(1rem,env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));background:rgba(7,29,34,.88);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.14)}
  .host-dock-team{display:inline-flex;align-items:center;gap:.4rem;min-width:0;font-weight:750;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .host-dock-team i{width:.8rem;height:.8rem;border-radius:50%;background:var(--team);flex:none}
  .host-dock-clock{margin-inline-start:auto;font-family:var(--font-display);font-weight:600;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums;color:#fff}
  .host-dock.is-hot .host-dock-clock{color:#FFB4A0}
  .host-dock .btn{min-width:6.5rem;min-height:2.875rem}
  .host:fullscreen .host-dock{position:sticky}
}
@media (max-width:30rem){.host-nav .btn:last-child{grid-column:1/-1}.host-tools .btn{padding-inline:.7rem}}

/* celebration */
.host-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
.host-winner{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1rem;background:rgba(4,18,21,.8);backdrop-filter:blur(8px);animation:host-fade .3s ease}
.host-winner-card{width:min(100%,30rem);max-height:100%;overflow:auto;background:linear-gradient(170deg,#12383F,#0B2227);border:1px solid rgba(255,255,255,.16);border-radius:2rem;padding:clamp(1.25rem,5vw,2.25rem);text-align:center;display:grid;gap:.75rem;justify-items:center;box-shadow:0 40px 100px rgba(0,0,0,.6);animation:host-rise .55s var(--ease)}
.host-trophy{width:5rem;height:5rem;color:var(--gold);filter:drop-shadow(0 0 22px rgba(242,200,121,.55));animation:host-trophy 1.6s ease-in-out infinite alternate}
.host-winner h2{margin:0;font-size:clamp(1.8rem,7vw,2.8rem);line-height:1.1;color:#fff;text-wrap:balance}
.host-winner h3{margin:.5rem 0 0;font-family:var(--font-body);font-size:var(--step--1);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.host-winner-tie{margin:0;font-weight:750;color:#DCE7E5}
.host-winner-list{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:.4rem}
.host-winner-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.55rem 1rem;border-radius:.9rem;background:rgba(255,255,255,.06);border-inline-start:.4rem solid var(--team);font-weight:750;color:#fff;text-align:start}
.host-winner-list li:first-child{background:color-mix(in srgb,var(--team) 22%,transparent)}
.host-winner-list b{font-family:var(--font-display);font-size:1.5rem;font-variant-numeric:tabular-nums}
.host-winner-actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:.5rem}
@keyframes host-fade{from{opacity:0}}
@keyframes host-rise{from{opacity:0;transform:translateY(2rem) scale(.94)}}
@keyframes host-trophy{to{transform:translateY(-.35rem) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.host::after,.host-trophy,.host-timer--urgent .host-clock,.host-stage.is-timeup .host-card,.host-team-score output,.host-team-crown,.host-winner,.host-winner-card{animation:none}.host-team.is-lit{transform:none}}

/* ---------- finder / plan / saved: colour and depth ---------- */
.finder-form{border:0;border-radius:1.75rem;background:radial-gradient(26rem 16rem at 100% 0%,rgba(47,184,166,.3),transparent 60%),var(--night);color:#F4EFE6;margin-top:calc(var(--space-8) * -1);box-shadow:0 24px 60px rgba(12,42,48,.28);padding:clamp(1rem,3vw,1.75rem)}
.finder-form .field label{color:#DCE7E5}
.finder-form .field small{color:#A9BDBA}
.finder-form .field input,.finder-form .field select{background:#12383F;color:#fff;border-color:rgba(255,255,255,.28)}
.finder-form .field input::placeholder{color:#9DB3B0}
.finder-form .field--check input{accent-color:var(--gold)}
.finder-form :focus-visible{outline-color:#fff}
.finder-form .btn--quiet{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.finder-filters{border-top-color:rgba(255,255,255,.14)}
.finder-card{border-radius:1.5rem;background:linear-gradient(165deg,var(--hue-soft),var(--paper) 48%)}
.finder-card h2{font-size:1.5rem}
.finder-results li:nth-child(6n+1){--hue-soft:#FAD4C8;--hue-strong:#C2452B;--hue-glow:#FF8E6B}.finder-results li:nth-child(6n+2){--hue-soft:#FDE6BF;--hue-strong:#B45309;--hue-glow:#FFB020}
.finder-results li:nth-child(6n+3){--hue-soft:#DDD3F3;--hue-strong:#5B3FB5;--hue-glow:#9B7BFF}.finder-results li:nth-child(6n+4){--hue-soft:#C9E6F5;--hue-strong:#1F6F9C;--hue-glow:#4FC3F7}
.finder-results li:nth-child(6n){--hue-soft:#F7CFE0;--hue-strong:#B02A64;--hue-glow:#FF6FA8}
.finder-reason{color:var(--hue-strong)!important}
.finder-results li{animation:result-in .45s cubic-bezier(.2,.9,.25,1) both}
.finder-results li:nth-child(2){animation-delay:.04s}.finder-results li:nth-child(3){animation-delay:.08s}.finder-results li:nth-child(4){animation-delay:.12s}.finder-results li:nth-child(5){animation-delay:.16s}.finder-results li:nth-child(n+6){animation-delay:.2s}
@keyframes result-in{from{opacity:0;transform:translateY(1.2rem) scale(.97)}}
.plan-item{border-radius:1.5rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.plan-item:hover{box-shadow:var(--shadow-2)}
.plan-num{background:linear-gradient(140deg,var(--primary),#2FB8A6);box-shadow:0 8px 18px rgba(23,100,93,.35)}
.plan-empty{border-radius:1.75rem;background:linear-gradient(160deg,var(--primary-soft),var(--paper))}
.search-row input{border-radius:999px;padding-inline:1.2rem;min-height:3.25rem}
.search-results li{transition:padding .3s var(--ease)}
.search-results li:hover{padding-inline-start:.6rem}

/* ---------- printing the agenda from My Night ---------- */
@media print{
  .no-print{display:none!important}
  .print-only{display:block}
  .plan .notice,.plan-controls{display:none!important}
  .plan-item{box-shadow:none;border:1px solid #000;break-inside:avoid}
  .plan-num{background:#fff;color:#000;border:1.5px solid #000}
  .plan-rules{margin:0;padding-inline-start:1.2rem;font-size:10pt}
  .plan-note label{font-size:9pt}
  .plan-note textarea{border:1px solid #999;min-height:3rem}
  .page-head{padding-block:0 .5rem}
}