/* 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}}

/* ---------- 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}
}