:root{color-scheme:dark;--bg:#080b18;--panel:#141a30;--panel2:#1b2341;--stroke:#2c3455;--text:#eef0fb;--muted:#99a7c7;--aqua:#4ef9d0;--blue:#6e9cff;--pink:#ff6eab;--gold:#ffc978;--shadow:0 18px 66px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Noto Sans JP",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}body{overscroll-behavior:none}.ambient{position:fixed;pointer-events:none;z-index:0;filter:blur(70px);opacity:.32}.ambient-one{width:480px;height:480px;background:#182993;top:-200px;left:-160px}.ambient-two{width:480px;height:480px;background:#6b205d;right:-220px;bottom:-180px}.app{position:relative;z-index:1;max-width:1440px;min-height:100dvh;margin:auto;display:flex;flex-direction:column;padding:0 28px}.site-top{display:flex;align-items:center;justify-content:space-between;min-height:66px;border-bottom:1px solid rgba(255,255,255,.09);gap:12px}.brand{font-size:20px;font-weight:950;letter-spacing:1.6px;white-space:nowrap}.brand-pop{color:var(--aqua)}.brand-symbol{color:var(--pink);margin-right:8px}.brand-dot{color:var(--pink)}.small-brand{font-size:10px;letter-spacing:2.5px;font-weight:800;color:#95a2c4;white-space:nowrap}.live-dot{display:inline-block;background:var(--aqua);width:7px;height:7px;border-radius:50%;margin-left:8px;box-shadow:0 0 12px var(--aqua)}main{width:100%;flex:1;display:flex;justify-content:center;align-items:center;padding:28px 0 22px}.ad-shell{min-height:83px;border-top:1px solid var(--stroke);display:grid;grid-template-columns:minmax(120px,1fr) minmax(270px,400px) minmax(120px,1fr);align-items:center;gap:18px;padding:13px 6px 18px}.ad-stat{font-size:12px;font-weight:900;letter-spacing:1.3px}.ad-stat span{display:block;margin-top:4px;font-size:10px;color:var(--muted);font-weight:600}.align-right{text-align:right}.sponsor{position:relative;min-height:48px;display:flex;align-items:center;justify-content:center;gap:12px;color:#dde9ff;text-decoration:none;background:#202944;border:1px solid #3c4b72;border-radius:9px;font-size:13px;font-weight:750;padding:9px 14px;transition:background .18s}.sponsor:hover{background:#2b3860}.pr-tag{position:absolute;top:3px;left:6px;font-weight:800;color:#b2bdd5;font-size:8px}.sponsor-icon{font-size:19px;color:var(--aqua)}.sponsor-arrow{opacity:.65}.panel{width:min(100%,1020px);background:linear-gradient(145deg,rgba(27,35,66,.96),rgba(13,18,37,.96));border:1px solid #344064;border-radius:24px;box-shadow:var(--shadow);padding:32px}.intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:850;color:var(--aqua);text-transform:uppercase}.hero-title{font-size:clamp(38px,5vw,70px);letter-spacing:-2px;line-height:1.07;margin:14px 0}.hero-title em{font-style:normal;background:linear-gradient(90deg,var(--aqua),var(--blue));background-clip:text;-webkit-text-fill-color:transparent}.hero-body{line-height:1.85;font-size:14px;color:#b6c1dc;max-width:400px}.hero-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.tag{padding:8px 11px;border:1px solid #354266;border-radius:8px;color:#c9d2ed;font-size:11px;font-weight:700}.setup{background:#0d1328;border:1px solid #2b3659;border-radius:18px;padding:23px}.setup-label{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:1.1px;text-transform:uppercase;margin:0 0 10px}.language{display:flex;gap:10px;margin-bottom:22px}.choice-btn{border:1px solid #394464;color:#d6def2;background:#18213a;border-radius:12px;padding:11px 15px;flex:1;cursor:pointer;font-size:13px;font-weight:800}.choice-btn.active{border-color:var(--aqua);background:#143d46;box-shadow:inset 0 0 0 1px rgba(78,249,208,.16);color:#e8fff9}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:21px}.mode-btn{min-height:106px;background:#161f39;border:1px solid #33415f;border-radius:13px;color:#dce4f8;padding:14px 9px;text-align:left;cursor:pointer;transition:transform .2s}.mode-btn:hover,.choice-btn:hover{transform:translateY(-1px)}.mode-btn.active{border:1px solid var(--aqua);background:linear-gradient(140deg,#173c48,#161f39)}.mode-btn .symbol{display:block;color:var(--aqua);font-size:22px;margin-bottom:10px}.mode-btn strong{display:block;font-size:12px;line-height:1.5}.mode-btn small{display:block;margin-top:4px;color:#9daed1;font-size:10px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{color:#aab8d8;font-size:11px;font-weight:800}input,select{width:100%;height:42px;background:#0d1429;border:1px solid #3c496e;border-radius:9px;padding:0 12px;color:var(--text);font:inherit;font-size:13px;outline:none}input:focus,select:focus{border-color:var(--aqua)}.toggle-row{display:flex;gap:8px;margin:2px 0 14px}.toggle-row button{flex:1}.btn{border:0;display:inline-flex;justify-content:center;align-items:center;gap:9px;text-align:center;border-radius:10px;padding:12px 17px;font:inherit;font-size:13px;font-weight:850;cursor:pointer;transition:transform .13s,filter .13s;white-space:nowrap}.btn:hover{filter:brightness(1.09);transform:translateY(-1px)}.btn:disabled{cursor:default;opacity:.44;transform:none}.btn-primary{background:linear-gradient(105deg,#50f5d4,#74b6ff);color:#07152a}.btn-soft{background:#273453;color:#eaf0ff;border:1px solid #465377}.btn-outline{background:transparent;border:1px solid #465377;color:#d9e4f9}.btn-pink{background:linear-gradient(95deg,#ff7ea6,#ffc184);color:#251329}.btn-block{width:100%;margin-top:16px;min-height:48px}.setup-note{font-size:11px;color:#91a0c1;margin:12px 0 0;line-height:1.6}.hidden{display:none!important}.game-shell{width:min(100%,1180px);display:flex;flex-direction:column;gap:16px}.game-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.room-identity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mode-pill{font-size:11px;letter-spacing:1px;background:#24304e;color:var(--aqua);padding:8px 11px;border-radius:99px;font-weight:900}.room-code{font-weight:950;font-size:15px;letter-spacing:3px}.head-actions{display:flex;gap:8px;align-items:center}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}.team{background:#141b31;border:1px solid var(--stroke);border-radius:16px;padding:19px 22px;display:flex;justify-content:space-between;align-items:center;gap:14px}.team.viewer{border-color:#493e67}.team .label{color:#b9c5e1;font-size:12px;font-weight:800}.team .secondary{color:#8192b8;font-size:11px;margin-top:3px}.team .score{font-size:35px;font-weight:950;letter-spacing:-1px;color:var(--aqua)}.team.viewer .score{color:var(--pink)}.versus{font-weight:950;color:#b4bfd8;font-size:18px;letter-spacing:2px}.question-panel{position:relative;background:linear-gradient(160deg,#1c2545,#111729 72%);border:1px solid #45527d;border-radius:21px;padding:26px;box-shadow:0 25px 60px rgba(0,0,0,.22);overflow:hidden}.question-panel:before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--blue),var(--aqua),var(--pink))}.question-over{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}.question-over .counter{font-size:12px;font-weight:900;letter-spacing:1.2px;color:var(--aqua)}.category{font-size:11px;color:#afbee2;border:1px solid #465577;border-radius:20px;padding:5px 10px}.timer{display:flex;gap:9px;align-items:center;font-weight:950;color:#f5f7ff;font-size:24px;min-width:70px;justify-content:flex-end}.timer.danger{color:var(--pink)}.timertrack{height:5px;background:#2b3856;border-radius:8px;overflow:hidden;margin-top:14px}.timerfill{height:100%;width:100%;background:linear-gradient(90deg,#4ff2c9,#719eff);transition:width .2s}.timerfill.danger{background:#ff729e}.prompt{font-size:clamp(22px,3vw,36px);line-height:1.42;font-weight:900;letter-spacing:-.4px;min-height:95px;display:flex;align-items:center;margin:0 0 23px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer{border:1px solid #415079;background:#202b49;color:#eef2ff;border-radius:12px;min-height:78px;padding:15px;display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;font-size:clamp(13px,1.5vw,17px);font-weight:800;transition:transform .1s,border .1s}.answer:hover:not(:disabled){transform:translateY(-2px);border-color:#94b0ef}.answer:disabled{cursor:default}.answer-key{border:1px solid #596789;border-radius:8px;min-width:32px;height:32px;display:grid;place-items:center;color:#b4c6ef;font-size:13px;font-weight:950}.answer.selected{border-color:#72b9ff;background:#213e5a}.answer.correct{border-color:#4ef9d0;background:#1c514c}.answer.wrong{border-color:#ff78ab;background:#542843}.answer.correct .answer-key{color:#071c20;background:var(--aqua);border-color:var(--aqua)}.answer.wrong .answer-key{color:white;background:#a83563;border-color:#e15e93}.game-hint{margin-top:17px;display:flex;justify-content:space-between;gap:12px;color:#a8b6d2;font-size:12px;line-height:1.6}.game-hint strong{color:#eef4ff}.lobby-hero{text-align:center;padding:35px 18px 20px}.lobby-hero .room-big{font-weight:950;font-size:clamp(32px,6vw,64px);letter-spacing:8px;color:var(--aqua);margin:14px 0}.lobby-hero p{color:#aebcdc;line-height:1.8}.lobby-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:20px auto 0}.player-box{background:#121b33;border:1px solid #374464;border-radius:14px;padding:16px}.player-box h3{font-size:13px;color:#aebddb;margin:0 0 12px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip{padding:9px 12px;border:1px solid #445274;background:#1d2846;border-radius:18px;font-size:12px;font-weight:750}.chip.host{border-color:var(--aqua);color:var(--aqua)}.readout{border-radius:14px;background:#10182e;border:1px solid #354260;padding:19px;margin-top:15px}.readout h3{margin:0 0 9px;font-size:14px}.readout p{line-height:1.7;margin:6px 0;color:#c7d4f0;font-size:14px}.result-correct{font-size:17px;color:var(--aqua);font-weight:900;margin-bottom:9px}.result-explain{color:#b4c2df;line-height:1.75;font-size:14px}.votes{display:grid;gap:12px}.vote-line{display:grid;grid-template-columns:minmax(70px,200px) 1fr 70px;align-items:center;gap:12px;font-size:12px;color:#c8d5ec}.vote-track{height:13px;border-radius:20px;background:#293452;overflow:hidden}.vote-fill{height:100%;background:linear-gradient(90deg,#f47eac,#8f85ff);border-radius:20px}.vote-line.winner{color:var(--aqua)}.vote-line.winner .vote-fill{background:linear-gradient(90deg,#39d4b0,#7ab7ff)}.ranking{display:grid;gap:9px}.rank-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;border:1px solid #384466;background:#18223d;border-radius:10px;padding:11px 15px}.rank-row strong{color:var(--aqua)}.ending-top{text-align:center;padding:22px 0}.ending-top .big{font-size:40px;margin:14px 0 7px}.ending-top p{color:#b7c5e0}.form-error{color:#ff8faf;font-size:12px;margin-top:10px}.loading{display:flex;justify-content:center;align-items:center;min-height:240px;color:#b4c6e3}.rotate-overlay{display:none;position:fixed;z-index:200;inset:0;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:26px;background:#090e20}.rotate-phone{font-size:80px;color:var(--aqua)}.rotate-phone span{font-size:42px;color:var(--pink)}.rotate-overlay p{color:#b9c6de;max-width:290px;line-height:1.7}.rotate-overlay strong{font-size:23px}#toast{position:fixed;bottom:105px;left:50%;transform:translate(-50%,20px);z-index:300;background:#263a50;color:#eff7ff;padding:12px 22px;border:1px solid #5c8eaa;border-radius:12px;font-size:13px;font-weight:750;opacity:0;pointer-events:none;transition:.2s}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:900px){.app{padding:0 14px}.intro{grid-template-columns:1fr}.intro-copy{display:none}.panel{padding:19px}.ad-shell{grid-template-columns:1fr minmax(220px,400px) 1fr;gap:8px}.ad-stat{font-size:10px}.ad-stat span{font-size:8px}.site-top{min-height:51px}.brand{font-size:17px}.small-brand{font-size:8px}.question-panel{padding:18px}.prompt{min-height:70px;margin-bottom:16px}.answer{min-height:60px}.game-head{flex-wrap:wrap}.team{padding:12px 15px}.team .score{font-size:27px}}
@media(max-width:580px){main{padding:13px 0}.modes{gap:6px}.mode-btn{padding:10px 7px;min-height:88px}.mode-btn .symbol{font-size:18px;margin-bottom:6px}.mode-btn strong{font-size:11px}.mode-btn small{font-size:9px}.setup{padding:14px}.panel{padding:15px}.game-shell{gap:10px}.site-top .small-brand{display:none}.ad-shell{grid-template-columns:1fr;min-height:69px;padding:10px 0 12px}.ad-stat{display:none}.sponsor{min-height:42px;max-width:400px;width:100%;margin:auto}.team{padding:10px 11px}.team .label{font-size:10px}.team .score{font-size:22px}.scoreboard{gap:8px}.versus{font-size:11px}.question-panel{padding:12px}.prompt{font-size:20px;min-height:55px}.answer{min-height:59px;padding:9px;gap:7px;font-size:12px}.answer-key{min-width:26px;height:27px}.question-over{margin-bottom:12px}.timer{font-size:18px}.game-hint{font-size:10px}.lobby-hero{padding:12px}.head-actions .btn{padding:8px 9px;font-size:11px}}
@media (orientation:landscape) and (max-height:560px){.site-top{min-height:40px}.app{min-height:100dvh}.ad-shell{min-height:53px;padding:4px 0 6px}.sponsor{min-height:36px}.ad-stat span{display:none}main{padding:7px 0}.panel{padding:13px}.intro-copy{display:none}.intro{display:block;max-width:700px}.setup{padding:12px}.setup-label{margin:0 0 5px}.language{margin-bottom:11px}.modes{margin-bottom:10px}.mode-btn{min-height:60px;padding:7px}.mode-btn .symbol{display:none}.mode-btn small{display:none}.form-grid{gap:7px}input,select{height:33px}.btn-block{min-height:36px;margin-top:10px}.question-panel{padding:12px}.question-over{margin-bottom:7px}.prompt{min-height:42px;margin-bottom:8px;font-size:clamp(17px,3.6vw,25px)}.answer{min-height:43px;padding:7px 10px}.game-hint{margin-top:7px}.game-shell{gap:7px}.team{padding:7px 11px}.team .score{font-size:20px}.game-head{min-height:30px}.answer-key{min-width:24px;height:24px}.readout{padding:10px;margin-top:7px}.readout p{font-size:12px}}

/* v1.1: Portrait is a first-class play layout, not a blocked orientation. */
@media (max-width:700px) and (orientation:portrait){
  html{-webkit-text-size-adjust:100%}
  body{overflow-x:hidden;overscroll-behavior-y:auto}
  .app{width:100%;max-width:100%;min-height:100svh;padding:0 12px}
  .site-top{min-height:52px}
  main{display:block;flex:1;padding:16px 0 14px}
  .panel,.game-shell{width:100%;max-width:100%;min-width:0}
  .panel{padding:16px;border-radius:18px}
  .setup{padding:15px}
  .game-shell{gap:11px}
  .game-head{display:flex;gap:9px;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .room-identity{min-width:0;gap:6px}
  .room-code{font-size:13px;letter-spacing:1.5px}
  .head-actions{gap:6px;justify-content:flex-end;flex-wrap:wrap;margin-left:auto}
  .head-actions .btn{padding:9px 10px;min-height:40px;font-size:11px}
  .scoreboard{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px}
  .team{min-width:0;min-height:64px;border-radius:12px;padding:10px 11px;gap:6px}
  .team .label{font-size:11px;overflow-wrap:anywhere}
  .team .secondary{font-size:10px}
  .team .score{font-size:24px}
  .versus{font-size:12px;letter-spacing:0}
  .question-panel{padding:16px 14px 18px;border-radius:17px;min-width:0}
  .question-over{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:7px;margin-bottom:13px}
  .question-over .counter{grid-column:1;grid-row:1;font-size:12px}
  .question-over .category{grid-column:1;grid-row:2;justify-self:start;max-width:100%;white-space:normal;font-size:10px}
  .question-over .timer{grid-column:2;grid-row:1/3;min-width:60px;font-size:22px;align-self:center}
  .prompt{min-height:0;display:block;font-size:clamp(19px,5.3vw,28px);line-height:1.5;letter-spacing:0;margin:0 0 17px;overflow-wrap:anywhere}
  .answers{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .answer{width:100%;min-width:0;min-height:62px;align-items:center;gap:12px;padding:11px 13px;font-size:15px;line-height:1.5;overflow-wrap:anywhere;touch-action:manipulation}
  .answer-key{flex:none;width:37px;min-width:37px;height:37px;font-size:14px}
  .game-hint{flex-wrap:wrap;gap:5px;font-size:11px;line-height:1.5}
  .game-hint > span{max-width:100%;overflow-wrap:anywhere}
  .readout{padding:14px;margin-top:13px}
  .readout p,.result-explain{overflow-wrap:anywhere}
  .vote-line{grid-template-columns:minmax(68px,1.25fr) minmax(45px,1fr) 38px;gap:7px;font-size:11px}
  .vote-line > span{min-width:0;overflow-wrap:anywhere}
  .rank-row{grid-template-columns:25px minmax(0,1fr) auto;gap:7px;padding:11px 9px}
  .rank-row > span{min-width:0;overflow-wrap:anywhere}
  .lobby-hero{padding:16px 5px 13px}
  .lobby-hero .room-big{font-size:clamp(28px,8vw,46px);letter-spacing:3px;overflow-wrap:anywhere}
  .lobby-actions{gap:8px}
  .lobby-actions .btn{white-space:normal;min-height:44px}
  .ad-shell{position:sticky;bottom:0;z-index:25;background:rgba(8,11,24,.97);border-top:1px solid var(--stroke);padding:9px 0 max(10px,env(safe-area-inset-bottom));min-height:65px;grid-template-columns:minmax(0,1fr)}
  .ad-stat{display:none}
  .sponsor{min-height:46px;max-width:400px;width:100%;font-size:12px;gap:8px;min-width:0}
  #ad-copy{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #toast{bottom:82px;max-width:calc(100% - 28px);white-space:normal;text-align:center}
}
@media (max-width:520px) and (orientation:portrait){
  .intro{display:block}
  .modes{grid-template-columns:1fr;gap:8px;margin-bottom:16px}
  .mode-btn{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;min-height:63px;padding:10px 12px;align-content:center;text-align:left}
  .mode-btn .symbol{grid-column:1;grid-row:1/3;margin:0;align-self:center;font-size:22px}
  .mode-btn strong{grid-column:2;grid-row:1;font-size:13px}
  .mode-btn small{grid-column:2;grid-row:2;font-size:10px;margin-top:2px}
  .language{margin-bottom:17px}
  .setup-note{font-size:11px}
  .form-grid{gap:9px}
  input,select{font-size:16px}
}
@media (max-width:360px) and (orientation:portrait){
  .app{padding:0 9px}
  .panel{padding:11px}
  .setup{padding:10px}
  .team{padding:9px 7px}
  .team .label{font-size:10px}
  .team .score{font-size:21px}
  .question-panel{padding:13px 10px}
  .answer{padding:10px 9px;font-size:14px}
  .question-over .counter{font-size:11px}
}


/* v1.2: Make the game container itself scrollable while in fullscreen.
   The viewport must never clip long questions, answer buttons, results or ads. */
#app:fullscreen,
#app:-webkit-full-screen {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #65799f #10182b;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
/* Do not allow flexbox to shrink the main panel behind the footer. */
#app:fullscreen .game-stage > main,
#app:-webkit-full-screen .game-stage > main {
  flex: 1 0 auto;
  min-height: max-content;
}
#app:fullscreen .game-stage > .site-top,
#app:fullscreen .game-stage > .ad-shell,
#app:-webkit-full-screen .game-stage > .site-top,
#app:-webkit-full-screen .game-stage > .ad-shell {
  flex-shrink: 0;
}
/* On mobile, keep the ad in the document flow during fullscreen scrolling. */
#app:fullscreen .game-stage > .ad-shell,
#app:-webkit-full-screen .game-stage > .ad-shell {
  position: relative;
  bottom: auto;
}
@supports not (height:100dvh) {
  #app:fullscreen, #app:-webkit-full-screen {height:100vh}
}

/* Visible scrollbar for Chromium/WebKit in desktop fullscreen. */
#app:fullscreen::-webkit-scrollbar,
#app:-webkit-full-screen::-webkit-scrollbar {width:10px}
#app:fullscreen::-webkit-scrollbar-track,
#app:-webkit-full-screen::-webkit-scrollbar-track {background:#10182b}
#app:fullscreen::-webkit-scrollbar-thumb,
#app:-webkit-full-screen::-webkit-scrollbar-thumb {background:#65799f;border:2px solid #10182b;border-radius:8px}


/* v1.3 shared 90-second affiliate banner slot: zero changes to A8 banner sizes. */
.ad-shell{
  grid-template-columns:minmax(90px,1fr) minmax(0,468px) minmax(90px,1fr);
  column-gap:14px;
}
.sponsor-slot{
  min-height:60px;
  max-width:468px;
  width:100%;
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:visible;
}
.sponsor-slot::before{
  content:'PR';
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  pointer-events:none;
  z-index:1;
  font-size:9px;
  line-height:1.1;
  padding:0 6px;
  background:#080b18;
  color:#a9b7d1;
  font-weight:700;
}
.affiliate-frame{
  flex:none;
  max-width:none;
  position:relative;
}
.affiliate-code{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  overflow:visible;
}
.affiliate-code a,
.affiliate-code a img{display:block;max-width:none;}
.affiliate-code > img[width="1"][height="1"]{width:1px;height:1px;flex:none}
.ad-placeholder{font-size:11px;color:#879abf;letter-spacing:2px;}
@media(max-width:760px){
  .ad-shell{grid-template-columns:minmax(0,1fr);padding-top:15px;}
  .ad-stat{display:none;}
}
@media(max-width:580px){
  .ad-shell{min-height:74px;}
  .sponsor-slot{min-height:50px;max-width:none;}
}
@media(max-width:350px){
  /* Use every viewport pixel for original-width 320px ASP banners.
     If viewport is even narrower, allow horizontal scrolling rather than crop. */
  .ad-shell{margin-left:-14px;margin-right:-14px;padding-left:0;padding-right:0;}
  .sponsor-slot{overflow-x:auto;justify-content:flex-start;}
  .affiliate-frame{margin-inline:auto;}
}


/* v1.7 - Compact separation below the existing affiliate footer.
   The stage retains its full viewport height, so adding AdSense does not
   move/shrink the gameplay or the affiliate banner in any mode. */
.game-stage {
  display: flex;
  flex-direction: column;
  flex: none;
  min-height: 100dvh;
  width: 100%;
  min-width: 0;
}
.game-stage > main {flex: 1;}
/* AdSense must not be part of the 90s affiliate rotator. */
.adsense-section {
  position: relative;
  flex: none;
  width: 100%;
  margin: 16px auto 0;
  padding: 6px 0 max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(141,158,195,.25);
  text-align: center;
  min-width: 0;
}
.adsense-slot {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 970px;
  min-width: 0;
  /* Do not set a fixed height or clip the responsive Google ad. */
  overflow: visible;
}
.adsense-slot .adsbygoogle {display:block; width:100%;}
@media (max-width:700px) and (orientation:portrait) {
  .game-stage { min-height: 100svh; }
  .adsense-section { margin-top: 16px; }
}
@media (max-width:760px) and (orientation:landscape) {
  .game-stage { min-height: 100dvh; }
}

/* v1.11 – question-authoring controls; existing game and advertising layout unchanged. */
.compose-panel h2{font-size:clamp(20px,2.3vw,29px);margin:9px 0 12px;color:#edf6ff}
.compose-note{font-size:13px;line-height:1.8;color:#b6c7e8;margin:10px 0 14px}
.compose-metrics{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0 16px}
.compose-metrics>div{background:#111c34;border:1px solid #445276;border-radius:11px;padding:11px 14px;color:#b9c9e6;font-size:13px}
.compose-metrics strong{color:#4bf2d4;font-size:17px}
.compose-form{background:#10182e;border:1px solid #354563;border-radius:15px;padding:18px;margin-top:15px}
.compose-form .form-grid{grid-template-columns:1fr 1fr;gap:12px}
.compose-form .field textarea{background:#111a2f;color:#ecf3ff;border:1px solid #435372;border-radius:9px;width:100%;min-height:65px;resize:vertical;padding:12px;font:inherit;line-height:1.55;box-sizing:border-box}
.compose-form .field input,.compose-form .field select{width:100%;box-sizing:border-box}
.compose-form .lobby-actions{margin-top:16px}
@media(max-width:580px){.compose-form{padding:12px}.compose-form .form-grid{gap:8px}.compose-form .field{min-width:0}.compose-form .field textarea{font-size:13px}.compose-metrics>div{width:100%}}

/* v1.14: Keep the existing header look while making the title a homepage link. */
.site-top .brand{display:inline-flex;align-items:center;color:var(--text);text-decoration:none}
.site-top .brand:hover{filter:brightness(1.1)}
.site-top .brand:focus-visible,.manetsumu-home-link:focus-visible{outline:2px solid var(--aqua);outline-offset:5px;border-radius:5px}
/* Website image linked directly under the three start-screen feature tags. */
.manetsumu-home-link{display:inline-flex;align-items:center;justify-content:flex-start;width:min(100%,320px);margin-top:20px;text-decoration:none;overflow:hidden}
.manetsumu-home-link img{display:block;width:100%;max-height:160px;height:auto;object-fit:contain;object-position:left center;border-radius:8px;transition:opacity .15s}
.manetsumu-home-link:hover img{opacity:.85}
.manetsumu-home-mobile{display:none}
@media(max-width:900px){
 .manetsumu-home-desktop{display:none}
 .manetsumu-home-mobile{display:flex;grid-column:1/-1;justify-content:center;margin:0 auto 2px;width:min(100%,290px)}
 .manetsumu-home-mobile img{object-position:center;max-height:125px}
}
@media(orientation:landscape) and (max-height:560px){.manetsumu-home-mobile{margin-top:3px}.manetsumu-home-mobile img{max-height:78px}}


/* v1.16: Keep the start-screen introduction fixed when the setup column grows.
   Align both the entire setup panel and the left introduction to the top on desktop.
   Do not alter gameplay screens or the stacked mobile layout. */
@media (min-width: 901px) {
  main:has(> .intro) { align-items: flex-start; }
  .intro { align-items: start; }
}

/* v1.18: Match the mobile PR footer behavior on desktop.
   Sticky stays attached to the bottom while the game stage is onscreen,
   without covering the independent AdSense section below the stage. */
@media (min-width: 901px) {
  .game-stage > .ad-shell {
    position: sticky;
    bottom: 0;
    z-index: 25;
    background: rgba(8, 11, 24, .97);
    border-top: 1px solid var(--stroke);
  }
  /* Existing fullscreen CSS resets all PR footers to position:relative;
     restore sticky only on desktop, preserving mobile fullscreen behavior. */
  #app:fullscreen .game-stage > .ad-shell,
  #app:-webkit-full-screen .game-stage > .ad-shell {
    position: sticky;
    bottom: 0;
  }
}


/* v1.23 - QUIZ SELECT BATTLE branding in the original QUIZ ARENA style.
   No changes to setup panels, gameplay, or advertisement positioning. */
.hero-title--qsb {
  font-size: clamp(39px, 4.9vw, 68px);
  letter-spacing: -2px;
  line-height: 1.04;
}
@media (max-width: 580px) {
  .site-top .brand { font-size: clamp(12px, 4vw, 17px); letter-spacing: .2px; }
}

/* v3.5: Pop-up verdict timing. Bounce motion unchanged (~0.84s).
   Post-motion display is ~0.62s (2x the original v3.3 ~0.31s),
   for a total of ~1.46s. Prior WebKit support remains unchanged. */
.qsb-judgement-effect{
  position:fixed;
  inset:0;
  z-index:150;
  display:grid;
  place-items:center;
  background:rgba(5,9,23,.32);
  pointer-events:none;
  opacity:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.qsb-judgement-effect.is-correct{--qsb-verdict-color:#45f3aa}
.qsb-judgement-effect.is-wrong{--qsb-verdict-color:#ff637d}
.qsb-judgement-effect.is-playing{
  -webkit-animation:qsb-judgement-backdrop 1460ms ease-out both;
  animation:qsb-judgement-backdrop 1460ms ease-out both;
}
.qsb-judgement-effect__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  -webkit-transform-origin:center;
  transform-origin:center;
  opacity:0;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.qsb-judgement-effect.is-playing .qsb-judgement-effect__content{
  -webkit-animation:qsb-judgement-pop 1460ms both;
  animation:qsb-judgement-pop 1460ms both;
}
.qsb-judgement-effect__content svg{
  display:block;
  width:clamp(110px,27vmin,192px);
  height:clamp(110px,27vmin,192px);
  overflow:visible;
  fill:none;
  stroke:var(--qsb-verdict-color);
  stroke-width:10;
  stroke-linecap:round;
  stroke-linejoin:round;
  -webkit-filter:drop-shadow(0 0 15px var(--qsb-verdict-color));
  filter:drop-shadow(0 0 15px var(--qsb-verdict-color));
}
.qsb-judgement-effect__label{
  color:#fff;
  text-align:center;
  font-size:clamp(24px,5vmin,38px);
  line-height:1.3;
  letter-spacing:.09em;
  font-weight:950;
  text-shadow:0 2px 18px var(--qsb-verdict-color),0 2px 6px #09101a;
}
@-webkit-keyframes qsb-judgement-pop{
  0%{opacity:0;-webkit-transform:scale(.1) rotate(-18deg)}
  21.5%{opacity:1;-webkit-transform:scale(1.3) rotate(4deg)}
  34.1%{-webkit-transform:scale(.88) rotate(-2deg)}
  46.7%{-webkit-transform:scale(1.07) rotate(1deg)}
  57.4%{opacity:1;-webkit-transform:scale(1) rotate(0)}
  91%{opacity:1;-webkit-transform:scale(1)}
  100%{opacity:0;-webkit-transform:scale(1.05)}
}
@keyframes qsb-judgement-pop{
  0%{opacity:0;transform:scale(.1) rotate(-18deg)}
  21.5%{opacity:1;transform:scale(1.3) rotate(4deg)}
  34.1%{transform:scale(.88) rotate(-2deg)}
  46.7%{transform:scale(1.07) rotate(1deg)}
  57.4%{opacity:1;transform:scale(1) rotate(0)}
  91%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.05)}
}
@-webkit-keyframes qsb-judgement-backdrop{
  0%{opacity:0}14.4%{opacity:1}86.6%{opacity:1}100%{opacity:0}
}
@keyframes qsb-judgement-backdrop{
  0%{opacity:0}14.4%{opacity:1}86.6%{opacity:1}100%{opacity:0}
}
/* Reduce Motion is an accessibility setting on iOS too. Instead of suppressing
   all feedback (old behavior), show the verdict with a gentle opacity fade. */
@-webkit-keyframes qsb-judgement-gentle{
  0%{opacity:0}16.2%{opacity:1}91%{opacity:1}100%{opacity:0}
}
@keyframes qsb-judgement-gentle{
  0%{opacity:0}16.2%{opacity:1}91%{opacity:1}100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .qsb-judgement-effect.is-playing{
    -webkit-animation:qsb-judgement-gentle 1460ms ease-out both;
    animation:qsb-judgement-gentle 1460ms ease-out both;
  }
  .qsb-judgement-effect.is-playing .qsb-judgement-effect__content{
    -webkit-animation:none;
    animation:none;
    opacity:1;
    -webkit-transform:none;
    transform:none;
  }
}

/* v3.7: Stream winner is decided exclusively by score; speed shown for reference. */
.qsb-final-ranking{max-width:780px;margin:17px auto 8px;text-align:left}
.qsb-final-ranking .rank-row{min-width:0}
.qsb-rank-name{min-width:0;overflow-wrap:anywhere;font-weight:750}
.qsb-average{display:block;font-size:clamp(10px,1.2vw,12px);font-weight:600;line-height:1.7;color:#b7c8e5;margin-top:3px}
.qsb-rank-winner{background:linear-gradient(120deg,rgba(34,84,85,.52),rgba(24,34,61,.97));border-color:#48d7ad}
.qsb-draw-note{color:#4ff0ce!important;font-size:14px;font-weight:850;margin:9px auto 13px}
.qsb-time-reference{font-size:clamp(11px,1.4vw,13px);color:#b7c8e5;margin:8px auto 12px;line-height:1.6}
.qsb-winning-name{overflow-wrap:anywhere;line-height:1.35}
@media(max-width:520px){.qsb-final-ranking{margin:13px auto 5px}.qsb-winning-name{font-size:clamp(23px,7vw,34px)!important}.qsb-final-ranking .rank-row{grid-template-columns:25px minmax(0,1fr) auto;padding:11px 9px}.qsb-final-ranking .rank-row>strong:last-child{font-size:12px;white-space:nowrap}}

/* v3.9: Synchronised multiplayer start (no visible countdown). */
.qsb-prep-panel{position:relative;isolation:isolate;overflow:hidden;min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.qsb-prep-panel h2{font-weight:850;margin:0;font-size:clamp(21px,4vw,32px)}
.qsb-prep-message{max-width:600px;margin:0;color:#d2e4fc;line-height:1.8;font-size:clamp(13px,2vw,17px)}
.qsb-prep-progress{margin:0;color:#78e7dc;font-weight:750;font-size:14px}
.qsb-prep-spinner{width:48px;height:48px;border:4px solid rgba(105,222,222,.2);border-top-color:#55e9de;border-radius:50%;animation:qsb-prep-rotate .9s linear infinite}
@keyframes qsb-prep-rotate{to{transform:rotate(360deg)}}
.qsb-preload-hidden{position:absolute!important;left:0!important;top:0!important;width:100%!important;height:1px!important;max-height:1px!important;overflow:hidden!important;visibility:hidden!important;pointer-events:none!important;opacity:0!important;z-index:-1!important}
@media (prefers-reduced-motion:reduce){.qsb-prep-spinner{animation:none;border-color:#55e9de}}
.qsb-prep-warning{max-width:600px;margin:0;color:#ffde91;line-height:1.7;font-size:13px}

/* v3.10: compact in-button loading; previous question/results stay visible. */
.btn.qsb-action-loading,
.btn.qsb-action-loading:disabled{opacity:1;filter:none;transform:none;cursor:wait;min-width:64px}
.qsb-action-spinner{display:inline-block;width:19px;height:19px;border:2.5px solid rgba(12,30,50,.25);border-top-color:#082e42;border-radius:50%;animation:qsb-action-rotate .65s linear infinite;flex:none}
.btn-outline .qsb-action-spinner,.btn-soft .qsb-action-spinner{border-color:rgba(255,255,255,.25);border-top-color:#6beadb}
@keyframes qsb-action-rotate{to{transform:rotate(360deg)}}
.qsb-ready-only{margin-left:8px;white-space:normal;font-size:12px}
@media (prefers-reduced-motion:reduce){.qsb-action-spinner{animation-duration:1.4s}}

/* v3.11: keep the destructive room-exit control distinct from in-room restart. */
.qsb-initialize{border-color:rgba(255,145,170,.42);color:#ffc4d0}
.qsb-initialize:hover{border-color:#ff91aa}