/* Hot Takes in the Fiddleden skin: fiddleden-mockups/TVHost.dc.html and PhonePlayer.dc.html.
   Loaded after /assets/theme.css, /css/theme.css and each page's inline styles. */

html,body{background:var(--ink);color:var(--cream);font-family:var(--font-body)}
.display,h1,h2,h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em}
.muted{color:var(--green)}

/* Buttons */
.btn{font-family:var(--font-body);font-weight:700;font-size:1.05rem;letter-spacing:0;border-radius:999px;padding:.75rem 1.5rem;min-height:48px;transition:transform .15s var(--ease-out),background .15s}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--rose);color:var(--cream)}
.btn-primary:hover{background:#A80C68}
.btn-secondary{background:var(--teal);color:var(--cream);border:0}
.btn-secondary:hover{background:#4C8C68}
.btn-ghost{background:transparent;color:var(--green);border:2px solid var(--teal)}
.btn-ghost:hover{color:var(--cream);border-color:var(--green)}
.btn-success{background:var(--green);color:var(--ink)}
.btn-danger{background:var(--rose);color:var(--cream)}
.btn-lg{font-size:1.25rem;padding:1rem 2rem;min-height:60px}
.btn-xl{font-size:1.5rem;padding:1.1rem 2.5rem;border-radius:999px;min-height:68px}
.btn:disabled{opacity:.45}

/* Forms */
input[type="text"],input[type="number"],input[type="password"],select,textarea{background:var(--cream);color:var(--ink);border:0;border-radius:18px;font-family:var(--font-body);font-size:1.1rem;padding:.85rem 1rem;min-height:52px}
input:focus,select:focus,textarea:focus{border-color:transparent}
label{font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--green);letter-spacing:.08em}
.code-field{font-family:var(--font-mono)!important;font-size:1.6rem!important;font-weight:700;letter-spacing:.2em!important;text-align:center;text-transform:uppercase}
.code-field::placeholder{letter-spacing:.08em;text-transform:none}
.pill-input{border-radius:999px!important;height:64px;padding:0 26px!important;width:min(380px,84vw);text-align:center;font-size:1.2rem!important}
.form-error{min-height:1.3em;margin:0;color:var(--salmon);font-weight:600;text-align:center}
.card,.card-lg{background:var(--surface);border:0;border-radius:28px}
.badge{background:var(--surface);border:0;color:var(--green);font-family:var(--font-mono);font-size:.8rem}
.badge-accent{background:var(--green);color:var(--ink)}
.badge-warn{background:var(--salmon);color:var(--ink)}
.toggle input:checked + .toggle-slider{background:var(--aqua)}
.toggle input:checked + .toggle-slider::before{background:var(--ink)}
.toggle-slider::before{background:var(--green)}
.timer-bar,.player-timer-bar{background:var(--aqua)}
.timer-bar.warning,.player-timer-bar.warning{background:var(--salmon)}
.timer-bar.danger,.player-timer-bar.danger{background:var(--rose)}
input[type="range"]{background:var(--teal)}
input[type="range"]::-webkit-slider-thumb{background:var(--aqua)}
input[type="range"]::-moz-range-thumb{background:var(--aqua);border:0;width:28px;height:28px;border-radius:50%}

/* Brand pieces */
.game-pill{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:30px;letter-spacing:-.03em;padding:8px 22px;border-radius:999px;line-height:1.1}
.ht-title{margin:0;font-size:clamp(56px,12vw,140px);line-height:.9;letter-spacing:-.045em;padding:28px 40px 30px;border-radius:36px}
.ht-sub{margin:0;max-width:34ch;text-align:center;color:var(--green);font-size:1.1rem}
.code-go{flex:none;width:64px;height:64px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.code-go .arrow{width:26px;height:26px}

/* Landing page */
.home-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem 16px;text-align:center;overflow-y:auto}
.home-back{position:absolute;left:16px;top:16px;font-weight:700;padding:10px 4px}
.cta-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:420px}
.code-join{display:flex;gap:10px;width:100%}
.code-join .pill-input{flex:1;min-width:0;width:auto}
.host-link{margin-top:.5rem;color:var(--green)}
.host-link:hover{color:var(--cream)}

/* Host: shared header */
.host-header{background:transparent;border:0;padding:24px 36px;gap:1rem;flex-wrap:wrap}
.host-room-code{font-family:var(--font-mono);font-weight:700;font-size:2.6rem;color:var(--cream);letter-spacing:.08em;line-height:1}
.host-join-url{color:var(--green);font-size:1rem;margin-top:4px}
.lobby-layout{padding:0 36px 36px;gap:24px}
.lobby-right{width:300px}
.player-grid{gap:10px}
.player-chip{background:var(--surface);border:0;border-radius:999px;padding:.55rem 1.1rem}
.player-name{font-weight:700;font-size:1.1rem}
.qr-card{border-radius:28px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.qr-card p{margin:0;font-weight:600;font-size:.95rem}
#qr-img{width:240px;height:240px;border:0;border-radius:14px}
.length-btn{border-radius:999px;border:2px solid var(--teal);background:transparent;color:var(--green);padding:.55rem 1.1rem;min-height:44px;font-weight:600}
.length-btn.active{border-color:var(--aqua);background:var(--aqua);color:var(--ink)}
.me{background:rgba(190,239,158,.12);border-color:var(--green)}

/* Host: active round (TV) */
.screen.tv{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr) auto;gap:24px;padding:36px 44px}
.screen.tv.hidden{display:none!important}
.tv-shape{position:absolute;pointer-events:none}
.tv-shape-dot{right:300px;top:96px;width:72px;height:72px;border-radius:50%;background:var(--salmon)}
.tv-shape-wave{left:50%;bottom:120px;transform:rotate(-10deg)}
.tv-top{grid-column:1 / span 2;display:flex;justify-content:space-between;align-items:center}
.tv-round{font-family:var(--font-mono);font-weight:700;font-size:20px;color:var(--green);text-transform:uppercase}
.tv-wordmark{font-family:var(--font-display);font-weight:800;font-size:26px;letter-spacing:-.04em;color:var(--green)}
.take-card{position:relative;z-index:1;border-radius:40px;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:0;overflow:hidden}
.take-label{font-family:var(--font-mono);font-weight:700;font-size:20px;letter-spacing:.08em;text-transform:uppercase}
.take-body{display:flex;flex-direction:column;gap:20px;min-height:0}
.take-text,.take-card .host-prompt{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5.6vw,96px);line-height:.95;letter-spacing:-.04em;text-align:left;overflow-wrap:anywhere}
.take-hint{font-weight:600;font-size:22px}
.take-card .spectrum-labels,.take-card .vs-labels,.take-card .vs-a,.take-card .vs-b,.take-card .vs-mid{color:var(--ink);max-width:none}
.take-card .vs-labels{justify-content:flex-start;font-family:var(--font-display);font-size:clamp(24px,2.6vw,40px)}
.take-card .vs-mid{font-family:var(--font-mono);font-size:.6em}
.take-card .spectrum-labels{font-weight:700;font-size:20px}
.take-card .grid2d-reveal-wrap{margin:0}
.tv-side{grid-row:2 / span 2;grid-column:2;display:flex;flex-direction:column;gap:16px;min-height:0}
.timer-card{position:relative;z-index:1;border-radius:32px;padding:22px;display:flex;align-items:center;gap:18px}
.timer-ring{flex:none}
.timer-ring circle:last-child{transition:stroke-dashoffset 1s linear}
.timer-num{font-family:var(--font-display);font-weight:800;font-size:54px;letter-spacing:-.04em;line-height:1}
.timer-sub{font-size:18px;color:var(--green);margin-top:4px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;overflow:hidden}
.chip{font-weight:700;font-size:20px;padding:10px 18px;border-radius:999px;line-height:1.2}
.chip.waiting{border:3px dashed var(--green);color:var(--green);padding:7px 16px}
.qr-corner{margin-top:auto;border-radius:28px;padding:16px;display:flex;gap:14px;align-items:center}
.qr-corner img{flex:none;width:108px;height:108px;border-radius:12px}
.qr-join{font-size:16px;font-weight:600}
.qr-code{font-family:var(--font-mono);font-weight:700;font-size:34px;letter-spacing:.08em;margin-top:4px}
.tv-foot{grid-column:1;display:flex;gap:12px;align-items:center;font-size:18px;color:var(--green)}
.tv-foot .dot{width:14px;height:14px}
.tv-foot .btn{margin-left:auto}
@media (max-width:900px){
  .screen.tv{grid-template-columns:1fr;grid-template-rows:auto auto auto auto;overflow-y:auto;padding:20px 16px}
  .tv-top,.tv-side,.tv-foot{grid-column:1;grid-row:auto}
  .tv-shape{display:none}
  .take-card{padding:28px}
}

/* Host: other screens */
.host-prompt{font-family:var(--font-display);font-weight:800;letter-spacing:-.04em;line-height:1}
.round-intro-layout h1{font-size:clamp(56px,9vw,128px);letter-spacing:-.045em}
.round-label{color:var(--green);font-family:var(--font-mono);text-transform:uppercase}
.round-instruction{background:var(--surface);border:0;border-radius:24px;color:var(--cream);font-size:1.25rem;padding:1rem 1.5rem}
.progress-track{background:var(--surface);height:8px}
#progress-bar{background:var(--aqua)}
.reveal-prompt{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em}
.split-bar{border:0;background:var(--surface);border-radius:28px}
.split-side.agree{background:var(--aqua)}
.split-side.disagree{background:var(--rose)}
.split-head .agree-h{color:var(--aqua)}
.split-head .disagree-h{color:var(--salmon)}
.callout{color:var(--green)}
.controversial-banner{color:var(--salmon)}
.flavor-banner{color:var(--green)}
.reveal-score-row,.who-row,.pred-row,.rank-row{background:var(--surface);border-radius:18px}
.points-label,.who-pts,.so-pts{color:var(--green)}
.vote-label.agree{color:var(--aqua)}
.vote-label.disagree{color:var(--salmon)}
.median-line{background:var(--cream)}
.median-label{background:var(--surface);border-color:var(--teal);color:var(--cream)}
.spectrum-bar{background:linear-gradient(to right,var(--rose),var(--aqua))}
.g2d-grid{background-color:var(--surface);border-color:var(--teal);background-image:linear-gradient(var(--teal),var(--teal)),linear-gradient(var(--teal),var(--teal))}
.grid2d-center{background:var(--aqua)}
.scoring-overview-card{background:var(--surface);border:0;border-radius:24px;color:var(--green)}
.scoring-overview-card .so-title{color:var(--cream)}
.lb-row{background:var(--surface);border:0;border-radius:18px;padding:.75rem 1rem}
.lb-rank{color:var(--green);font-family:var(--font-display)}
.lb-rank.gold{color:var(--aqua)}.lb-rank.silver{color:var(--cream)}.lb-rank.bronze{color:var(--salmon)}
.lb-delta{color:var(--green)}
.podium-title{color:var(--green);font-size:clamp(48px,7vw,96px)}
.submission-panel{background:var(--surface);border-top:0;border-radius:28px 28px 0 0}
.submission-row{border-bottom-color:var(--teal)}
.axis-tag{background:rgba(14,34,25,.88);border-color:var(--teal)}
.axis-tag::before,.axis-tag::after{color:var(--aqua)!important}

/* Player: join + lobby */
.join-logo{margin:8px 0 4px;text-align:center}
.join-scroll .card{padding:1rem 1.1rem}
.emoji-option.active{border-color:var(--aqua);background:rgba(0,232,252,.12)}
.emoji-scroll-hint{color:var(--green)}
.join-footer::before{background:linear-gradient(to bottom,transparent,var(--ink))}
.room-code-badge{font-family:var(--font-mono);font-weight:700;color:var(--green);letter-spacing:.08em}
.lobby-player-item{background:var(--teal);border-radius:999px}
.avatar{background:var(--surface);border:0}

/* Player: voting (PhonePlayer mockup) */
#screen-voting{overflow:hidden}
.phone-shape{position:absolute;right:-24px;top:120px;width:80px;height:80px;border-radius:50%;background:var(--aqua);pointer-events:none}
.phone-top{display:flex;justify-content:space-between;align-items:center;padding:20px 16px 0}
.phone-top .game-pill{font-size:20px;padding:6px 16px}
.phone-meta{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--green)}
.player-timer{height:4px;margin:12px 16px 0;border-radius:999px;background:var(--surface);overflow:hidden}
.voting-wrap{padding:14px 16px 24px;gap:14px}
.phone-take{border-radius:30px;padding:24px 22px;flex:none}
.phone-take .take-label{font-size:12px}
.voting-q{margin:10px 0 0;padding:0;text-align:left;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,9vw,40px);line-height:.95;letter-spacing:-.04em;overflow-wrap:anywhere}
.predict-player-wrap .voting-q{text-align:center}
.vote-area{flex:none;justify-content:flex-start}
.vote-area.vote-binary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.phone-btn{min-height:120px;height:auto;padding:12px;border-radius:28px;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,7.5vw,30px);letter-spacing:-.03em;line-height:1;text-align:center;overflow-wrap:anywhere;transition:transform .15s var(--ease-out)}
.phone-btn:active{transform:scale(.97)}
.phone-btn-agree{background:var(--aqua);color:var(--ink);border:0}
.phone-btn-disagree{background:var(--rose);color:var(--cream);border:0}
.playing-as{margin:auto 0 0;text-align:center;color:var(--green);font-size:14px}
.playing-as strong{color:var(--cream)}
.who-btn{background:var(--surface);border:2px solid transparent;border-radius:22px;min-height:96px;color:var(--cream);font-weight:700}
.who-btn:active{border-color:var(--aqua);background:rgba(0,232,252,.12)}
.rank-item{background:var(--surface);border:0;border-radius:18px;min-height:52px}
.rank-num,.slider-value{color:var(--aqua)}
.slider-labels,.axis-labels-sm{color:var(--green)}
.my-result-card{background:var(--surface);border:3px solid var(--green);border-radius:28px}
.my-result-points{color:var(--green)}
.my-result-vote{color:var(--green)}
.my-result-callout{background:var(--teal);border-radius:20px;color:var(--cream)}
.submit-panel{background:var(--surface);border-top:0;border-radius:28px 28px 0 0}
.sub-type-btn{border-color:var(--teal);background:transparent;color:var(--green);min-height:40px}
.sub-type-btn.active{border-color:var(--aqua);background:var(--aqua);color:var(--ink)}
.submit-fab{background:var(--rose);color:var(--cream);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.wait-icon{animation:fd-pulse 2s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .timer-ring circle:last-child{transition:none}
}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1}