:root{
  --tq-bg:#080B1C;
  --tq-bg-2:#101630;
  --tq-card:#171F3F;
  --tq-purple:#8B35FF;
  --tq-pink:#FF20D6;
  --tq-cyan:#00D9FF;
  --tq-blue:#367BFF;
  --tq-text:#F5F7FF;
  --tq-muted:#AAB7DC;
  --tq-gold:#FFD35B;
  --tq-green:#23E89A;
  --tq-red:#FF557D;
  --tq-line:rgba(132,116,255,.36);
  --tq-glow:0 0 22px rgba(0,217,255,.14),0 14px 38px rgba(0,0,0,.34);
}

html{background:var(--tq-bg)}
body.player-public{
  color:var(--tq-text);
  background:#080b20;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

main{padding-top:6px}
.game-title{
  min-height:58px;padding:5px 20px;margin:0!important;
  color:var(--tq-text)!important;text-shadow:0 0 16px rgba(139,53,255,.85),0 0 30px rgba(0,217,255,.35);
  letter-spacing:.09em!important;
}
.game-title .game-brand-name{
  background:linear-gradient(105deg,#fff 5%,#a996ff 36%,#00D9FF 64%,#FF20D6 94%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.game-title > span[aria-hidden="true"]{filter:drop-shadow(0 0 9px rgba(255,32,214,.72))}
#status{
  width:max-content!important;max-width:calc(100vw - 30px);min-height:0!important;margin:0 auto 13px!important;padding:6px 13px;
  border:1px solid rgba(0,217,255,.28);border-radius:999px;background:rgba(16,22,48,.72);color:var(--tq-muted)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 14px rgba(0,217,255,.09);font-size:12px!important;font-weight:750;letter-spacing:.06em;text-transform:uppercase;
}

.live-layout{gap:16px!important}
.live-layout>.panel,.panel{
  border:1px solid var(--tq-line)!important;
  background:linear-gradient(145deg,rgba(23,31,63,.94),rgba(10,15,37,.94))!important;
  box-shadow:var(--tq-glow),inset 0 1px rgba(255,255,255,.055);
}
.live-layout>.panel{border-radius:20px!important}
.live-layout>.live-left-column>#chatPanel{border-radius:20px!important;}
.live-chat-column,.live-question-column,.live-ranking-column{position:relative}
.live-chat-column::before,.live-question-column::before,.live-ranking-column::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.55;
  background:linear-gradient(125deg,rgba(139,53,255,.16),transparent 28%,transparent 72%,rgba(0,217,255,.1));
}
.live-chat-column>* ,.live-question-column>* ,.live-ranking-column>*{position:relative}

#chatPanel>h2,.live-ranking-column>h2{
  color:var(--tq-text);letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 0 14px rgba(139,53,255,.55);
}
#chatPanel>h2::after,.live-ranking-column>h2::after{
  content:"";display:block;width:48px;height:2px;margin-top:7px;border-radius:99px;background:linear-gradient(90deg,var(--tq-purple),var(--tq-cyan));box-shadow:0 0 10px var(--tq-cyan);
}
#chatMessages{padding-right:4px!important}
.chat-message{
  border:1px solid rgba(142,155,233,.18)!important;border-left-color:rgba(139,53,255,.76)!important;
  background:rgba(7,12,31,.6)!important;box-shadow:0 5px 16px rgba(0,0,0,.18);
}
.chat-message.is-attempt{border-left-color:var(--tq-cyan)!important;background:rgba(0,217,255,.065)!important}
.chat-message.is-validated{border-left-color:var(--tq-green)!important;background:rgba(35,232,154,.1)!important;box-shadow:0 0 16px rgba(35,232,154,.14)}
.chat-author{color:#d8d6ff!important}.chat-kind{color:var(--tq-cyan)!important}
#chatForm{padding:9px!important;border:1px solid rgba(139,53,255,.28);border-radius:14px;background:rgba(5,9,26,.72)!important}
#chatInput{border-color:rgba(0,217,255,.3)!important;background:rgba(16,22,48,.94)!important;color:var(--tq-text)!important}
#chatInput:focus{border-color:var(--tq-cyan)!important;box-shadow:0 0 0 3px rgba(0,217,255,.13)}

.live-question-column{border-color:rgba(0,217,255,.5)!important;box-shadow:0 0 0 1px rgba(139,53,255,.14),0 0 30px rgba(0,217,255,.13),0 18px 45px rgba(0,0,0,.4)!important}
#progress,#category,#percent{color:var(--tq-muted)!important;letter-spacing:.08em;text-transform:uppercase}
#timer{
  color:#fff!important;text-shadow:none;
}
#question{color:var(--tq-text)!important;text-shadow:0 2px 12px rgba(0,0,0,.55)}
#result .correct-answer-card{border-color:rgba(35,232,154,.44)!important;background:linear-gradient(145deg,rgba(19,78,74,.78),rgba(10,28,43,.92))!important;box-shadow:0 0 22px rgba(35,232,154,.12)}
.correct-answer-kicker{color:var(--tq-green)!important}.correct-answer-value{color:#fff!important}
#answers button.answer-button{border:1px solid rgba(189,201,255,.3)!important;box-shadow:inset 0 1px rgba(255,255,255,.14),0 8px 18px rgba(0,0,0,.22)}
#answers button.answer-button:hover:not(:disabled){box-shadow:0 0 20px rgba(0,217,255,.26),inset 0 1px rgba(255,255,255,.2)!important}

#ranking{scrollbar-color:var(--tq-purple) transparent}
#ranking li.ranking-card{
  border-color:rgba(132,148,239,.25)!important;background:linear-gradient(135deg,rgba(24,37,78,.95),rgba(10,15,37,.96))!important;
  box-shadow:0 7px 17px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045)!important;
}
#ranking li.rank-place-1{border-color:rgba(255,211,91,.8)!important;background:linear-gradient(135deg,rgba(94,70,24,.9),rgba(24,25,50,.98))!important;box-shadow:0 0 20px rgba(255,211,91,.2)!important}
#ranking li.rank-place-2{border-color:rgba(184,208,241,.7)!important;background:linear-gradient(135deg,rgba(49,74,108,.92),rgba(19,27,52,.98))!important}
#ranking li.rank-place-3{border-color:rgba(222,139,88,.72)!important;background:linear-gradient(135deg,rgba(92,52,39,.92),rgba(29,23,45,.98))!important}
#ranking li.ranking-tint-violet{border-left-color:var(--tq-purple)!important}#ranking li.ranking-tint-cyan{border-left-color:var(--tq-cyan)!important}#ranking li.ranking-tint-blue{border-left-color:var(--tq-blue)!important}#ranking li.ranking-tint-green{border-left-color:var(--tq-green)!important}#ranking li.ranking-tint-pink{border-left-color:var(--tq-pink)!important}
#ranking .ranking-name{color:var(--tq-text)!important}.ranking-score{color:var(--tq-gold)!important}.ranking-metric{background:rgba(255,255,255,.06)!important;color:var(--tq-muted)!important}.ranking-metric.is-correct{color:var(--tq-green)!important;background:rgba(35,232,154,.1)!important}.ranking-metric.is-incorrect{color:var(--tq-red)!important;background:rgba(255,85,125,.1)!important}

button{
  border-color:rgba(0,217,255,.34)!important;background:linear-gradient(135deg,var(--tq-purple),var(--tq-blue))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 7px 18px rgba(48,26,125,.28);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
button:hover:not(:disabled){filter:brightness(1.13);box-shadow:0 0 18px rgba(0,217,255,.32),inset 0 1px rgba(255,255,255,.25)!important;transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(1px) scale(.985)}button:disabled{filter:saturate(.45);opacity:.48!important}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--tq-cyan)!important;outline-offset:3px}
.champion-category-card.is-selected{background:linear-gradient(135deg,#128b62,#165a62)!important;border-color:var(--tq-green)!important}

#victoryScreen{background:radial-gradient(circle at 50% 5%,rgba(139,53,255,.4),transparent 45%),radial-gradient(circle at 90% 85%,rgba(0,217,255,.16),transparent 48%),#080B1C!important}
#victoryContent{border-color:rgba(0,217,255,.38)!important;background:linear-gradient(145deg,rgba(23,31,63,.95),rgba(8,11,28,.96))!important;box-shadow:0 0 44px rgba(139,53,255,.28),0 28px 80px rgba(0,0,0,.5)!important}
#winnerName{color:var(--tq-gold)!important;text-shadow:0 0 24px rgba(255,211,91,.58)!important}

@media(max-width:700px){
  main{padding-inline:10px}.game-title{min-height:44px;font-size:clamp(25px,8vw,38px)!important;padding-inline:8px}.game-title>span[aria-hidden="true"]{display:none!important}
  #status{margin-bottom:10px!important;font-size:10px!important}.live-layout{gap:12px!important}.live-layout>.panel{border-radius:16px!important}
  .champion-theme-panel{max-height:58vh!important}.champion-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){button{animation:none!important;transition:none!important}}

/* Cyberpunk TV stage: decorative layers stay outside the game DOM so Socket.IO,
   lobby, chat and quiz state remain completely untouched. */
body.player-public { isolation:isolate; }
.tq-stage-scene { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
main, #adminCorner, #fullscreenToggle { position:relative; z-index:1; }
.tq-stage-scene::before {
  content:""; position:absolute; inset:0; opacity:.86;
  background:
    radial-gradient(ellipse 42% 34% at 50% 2%, rgba(194,51,255,.30), transparent 69%),
    linear-gradient(116deg, transparent 0 29%, rgba(0,217,255,.13) 30% 32%, transparent 34% 100%),
    linear-gradient(244deg, transparent 0 29%, rgba(255,32,214,.12) 30% 32%, transparent 34% 100%);
}
.tq-rig { position:absolute; top:-18px; width:35vw; height:122px; opacity:.62; transform:skewY(-13deg); border-top:3px solid rgba(255,32,214,.70); border-bottom:2px solid rgba(0,217,255,.55); background:repeating-linear-gradient(90deg, transparent 0 28px, rgba(157,111,255,.35) 29px 32px, transparent 33px 58px); filter:drop-shadow(0 0 8px rgba(255,32,214,.55)); }
.tq-rig-left { left:-4vw; }.tq-rig-right { right:-4vw; transform:skewY(13deg); }
.tq-spotlight { position:absolute; top:-5vh; width:31vw; height:108vh; opacity:.28; transform-origin:50% 0; filter:blur(2px); mix-blend-mode:screen; will-change:transform,opacity; }
.tq-spotlight-left { left:5vw; background:linear-gradient(102deg, transparent 28%, rgba(255,35,213,.46) 47%, rgba(114,95,255,.22) 55%, transparent 76%); animation:tqSpotLeft 8s ease-in-out infinite alternate; }
.tq-spotlight-right { right:5vw; background:linear-gradient(78deg, transparent 28%, rgba(0,217,255,.42) 47%, rgba(91,106,255,.22) 55%, transparent 76%); animation:tqSpotRight 9.5s ease-in-out infinite alternate; }
.tq-host { position:absolute; z-index:1; top:clamp(34px, 8vh, 112px); width:clamp(310px, 33vw, 650px); max-height:88vh; object-fit:contain; opacity:.72; filter:drop-shadow(0 0 12px rgba(255,32,214,.65)) drop-shadow(0 0 24px rgba(0,217,255,.28)); will-change:transform,filter; }
.tq-host-left { left:clamp(-155px, -7vw, -50px); transform:rotate(-3deg); animation:tqHostPulse 7s ease-in-out infinite alternate; }
.tq-host-right { right:clamp(-155px, -7vw, -50px); transform:scaleX(-1) rotate(-3deg); animation:tqHostPulseRight 7.6s ease-in-out infinite alternate; }
.tq-stage-floor { position:absolute; left:20%; right:20%; bottom:-9vh; height:27vh; opacity:.45; transform:perspective(360px) rotateX(62deg); transform-origin:bottom; background:linear-gradient(90deg, transparent, rgba(255,32,214,.7), rgba(0,217,255,.7), transparent), repeating-linear-gradient(90deg, transparent 0 52px, rgba(0,217,255,.19) 53px 55px), repeating-linear-gradient(0deg, transparent 0 30px, rgba(255,32,214,.19) 31px 33px); box-shadow:0 -16px 50px rgba(112,43,255,.40); }
@keyframes tqSpotLeft { from { transform:rotate(-10deg); opacity:.19; } to { transform:rotate(8deg); opacity:.36; } }
@keyframes tqSpotRight { from { transform:rotate(10deg); opacity:.18; } to { transform:rotate(-8deg); opacity:.34; } }
@keyframes tqHostPulse { from { transform:rotate(-3deg) translateY(0); filter:drop-shadow(0 0 10px rgba(255,32,214,.50)) drop-shadow(0 0 18px rgba(0,217,255,.20)); } to { transform:rotate(-2deg) translateY(-5px); filter:drop-shadow(0 0 17px rgba(255,32,214,.72)) drop-shadow(0 0 29px rgba(0,217,255,.34)); } }
@keyframes tqHostPulseRight { from { transform:scaleX(-1) rotate(-3deg) translateY(0); } to { transform:scaleX(-1) rotate(-2deg) translateY(-5px); } }
@media (max-width:1500px) { .tq-host { opacity:.34; width:clamp(220px, 22vw, 330px); } .tq-stage-floor { left:12%; right:12%; } }
@media (max-width:1080px) { .tq-host, .tq-rig { display:none; } .tq-spotlight { width:55vw; opacity:.21; } .tq-stage-floor { left:5%; right:5%; opacity:.28; } }
@media (prefers-reduced-motion:reduce) { .tq-spotlight, .tq-host { animation:none!important; } }

/* The official pirate scene is the only public background image. */
.tq-stage-scene { display:none!important; }
body.player-public { background-color:#081322!important; background-image:none!important; }
body.player-public::before,
body.has-quiz-background::before,
html[data-quiz-theme]:not([data-quiz-theme="original"]) body.player-public::before,
html[data-quiz-theme]:not([data-quiz-theme="original"]) body.has-quiz-background::before { display:none!important; }
html[data-quiz-theme]:not([data-quiz-theme="original"]) body.player-public { background-color:#081322!important; background-image:none!important; }

/* Live desktop viewport: the header and the three panels share one viewport.
   The chat history, ranking and central content own their scrollbars; the page
   itself must not grow past the visible Firefox window. */
@media (min-width:1101px) {
  html,
  body { height:100%; }

  body.player-public { overflow:hidden; }

  main {
    width:98vw;
    max-width:none;
    height:100dvh;
    min-height:0;
    margin:0 auto;
    padding:5px 0 6px;
    display:flex;
    flex-direction:column;
  }

  html:fullscreen main,
  html.immersive-fallback main { width:98vw; max-width:none; margin:0 auto; }

  .public-header {
    position:absolute;
    top:4px;
    left:50%;
    z-index:3;
    width:max-content;
    max-width:60%;
    margin:0;
    transform:translateX(-50%);
  }

  .live-layout {
    flex:1 1 0;
    height:auto;
    min-height:0;
    grid-template-columns:minmax(320px, 23fr) minmax(0, 49fr) minmax(260px, 26fr);
    grid-template-rows:minmax(0, 1fr);
  }
  html:fullscreen .live-layout,
  html.immersive-fallback .live-layout { height:auto; flex:1 1 0; }

  #joinPanel { position:relative; inset:auto; z-index:auto; transform:none; width:auto; max-height:none; overflow:visible; }
  #joinPanel h2 { margin:0 0 4px; font-size:15px; }
  #joinPanel p { margin:2px 0; }
  #joinPanel input, #joinPanel button { min-height:32px; padding:5px 8px; }
  .live-layout { flex:1 1 0; min-height:0; height:auto; }

  .live-layout { gap:clamp(7px, .55vw, 10px)!important; }
  .live-layout > .panel,
  .live-layout > .live-left-column > #chatPanel { padding:clamp(9px, .65vw, 12px); }
  .quizmaster-audio-controls button { min-height:28px; padding:4px 8px; font-size:11px; }
  .live-question-column #question { margin:clamp(8px, 1.5vh, 16px) auto 8px; }

  .live-layout > .panel {
    height:100%;
    min-height:0;
  }

  .live-question-column {
    min-height:0;
    overflow:visible;
    overscroll-behavior:contain;
  }

  .live-ranking-column,
  #chatPanel.live-chat-column { min-height:0; }

  /* The chat retains a short lower stage area for the larger host sprite. */
  #chatPanel.live-chat-column {
    width:100%;
    height:70%;
    flex:0 0 70%;
    min-height:0;
    min-width:0;
    max-height:none;
    margin:0;
    align-self:start;
    justify-self:start;
  }
}

/* From 1200px, reserve a proportional title band and align three equal panels. */
@media (min-width:1200px) {
  main { width:98vw; height:100dvh; margin:0 auto; padding:0; }
  .live-layout {
    --desktop-title-band:clamp(240px, calc(20dvh + 58px), 300px);
    width:100%;
    height:calc(100dvh - var(--desktop-title-band));
    min-height:0;
    margin:var(--desktop-title-band) auto 0;
    flex:0 0 auto;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-template-rows:minmax(0,1fr);
    align-items:stretch;
    gap:12px!important;
  }
  .live-layout > .live-left-column,
  .live-layout > .live-question-stage,
  .live-layout > #rankingPanel {
    grid-row:1;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
  }
  .live-layout > .live-left-column { grid-column:1; }
  .live-layout > .live-question-stage { grid-column:2; }
  .live-layout > #rankingPanel { grid-column:3; }
  .live-layout > .live-left-column > #chatPanel,
  .live-layout > .live-question-stage > .live-question-column,
  .live-layout > #rankingPanel {
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    margin:0;
    border-radius:20px!important;
  }
  #chatPanel.live-chat-column { flex:1 1 auto; align-self:stretch; justify-self:stretch; }
  .live-question-stage > .live-question-column { overflow:visible; }
  .question-panel-content { padding:15px; }
  .quiz-title-mark {
    top:calc(8px - var(--desktop-title-band));
    width:min(520px,calc(100% - 24px));
    max-height:calc(var(--desktop-title-band) - 14px);
  }
  .live-question-column #question { font-size:clamp(24px,2.1vw,36px); }
  #ranking { max-height:none; }
}
@media (min-width:1200px) and (max-height:800px) {
  .live-question-column #question { padding:16px; font-size:clamp(22px,1.9vw,30px); }
  .question-panel-content { padding:10px; }
  #answers button.answer-button { min-height:48px; padding:7px 10px; }
  #answers { gap:7px; margin-top:7px; }
}

/* Narrow layouts remain document-scrollable: their stacked panels keep the
   existing internal chat/ranking scroll areas without trapping mobile users. */
@media (max-width:1100px) {
  body.player-public { overflow-x:hidden; overflow-y:auto; }
  main { height:auto; min-height:0; display:block; }
}

@media (max-width:1100px) {
  #joinPanel { position:relative; inset:auto; transform:none; width:auto; max-height:none; margin:0 0 6px; }
}

/* Keep the fullscreen control independent of main's full-width layout. */
#fullscreenToggle { position:fixed!important; top:12px!important; right:12px!important; left:auto!important; width:auto!important; max-width:max-content; }
.theme-music-toggle { position:fixed!important; top:12px!important; left:12px!important; right:auto!important; width:auto!important; max-width:max-content; }

/* SINOKQUIZZ public identity: pirate-gold details over the official scene. */
:root { --tq-bg:#06142b; --tq-card:#10233c; --tq-purple:#bd7b25; --tq-pink:#e3a63a; --tq-cyan:#77b9c7; --tq-blue:#2f6f84; --tq-text:#fff6dc; --tq-muted:#c7d2d7; --tq-gold:#ffd166; --tq-green:#71c79b; --tq-red:#ef8b75; --tq-line:#8e6b35; }
html, body.player-public, html[data-quiz-theme]:not([data-quiz-theme="original"]) body.player-public { background:#081322!important; background-image:none!important; }
.official-stage-background { background-color:#081322!important; background-image:url("/fondpirate.png")!important; background-position:center center!important; background-size:cover!important; background-repeat:no-repeat!important; }
.official-stage-background::after { content:none!important; display:none!important; }
.game-title { text-shadow:0 2px 0 #3b230e!important; }
.game-title .game-title-banner { max-width:min(720px,calc(100vw - 32px)); max-height:clamp(72px,12vh,128px); filter:drop-shadow(0 5px 0 rgba(26,14,5,.5)); }
.live-layout > .panel, .live-layout > .live-left-column > #chatPanel, .live-question-stage > .live-question-column {
  background:#10233c!important; border-color:#8e6b35!important; box-shadow:inset 0 0 0 2px rgba(255,209,102,.08),0 10px 24px rgba(0,0,0,.38)!important; animation:none!important; backdrop-filter:none!important;
}
.live-chat-column::before, .live-question-column::before, .live-ranking-column::before { background:none!important; }
#chatPanel>h2, .live-ranking-column>h2 { color:#ffd166!important; text-shadow:0 2px 0 #3b230e!important; }
#chatPanel>h2::after, .live-ranking-column>h2::after { background:#d79b3d!important; box-shadow:none!important; }
.chat-composer, #chatForm, #joinPanel, #emojiPicker, .chat-message, .live-question-column #question, #ranking li.ranking-card { background:#0b1c31!important; border-color:#5d7891!important; box-shadow:none!important; }
.chat-message { border-left-color:#d79b3d!important; }
.chat-message.is-attempt { border-left-color:#77b9c7!important; background:#102a42!important; }
.chat-message.is-validated { border-left-color:#71c79b!important; background:#123a3a!important; }
.quiz-question-header #timer { background:conic-gradient(#ffd166 calc(var(--timer-progress,1) * 100%),#365b72 0)!important; border:5px solid #0b1c31; box-shadow:0 0 0 2px #8e6b35!important; color:#06142b!important; }
.quiz-question-header #category, .quiz-header-progress #progress, #progress, #category, #percent { color:#ffe7a8!important; text-shadow:none!important; }
#answers button.answer-button, button, #closeVictory { background:#28536b!important; border:1px solid #a77a35!important; box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 0 #14283a!important; }
#answers button.answer-button:hover:not(:disabled), button:hover:not(:disabled) { background:#376d81!important; box-shadow:inset 0 1px rgba(255,255,255,.18),0 3px 0 #14283a!important; }
.trapix-presenter { filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))!important; }
.trapix-speech-bubble { background:#fff0c9!important; border-color:#b57c2e!important; box-shadow:0 5px 0 rgba(0,0,0,.3)!important; }
.trapix-speech-bubble strong { color:#754617!important; text-shadow:none!important; }.trapix-speech-bubble span { color:#14243a!important; }
#victoryScreen, #victoryContent { background:#06142b!important; }
@media (max-width:900px) { body.player-public { background:#06142b!important; } .game-title .game-title-banner { max-height:64px; } }