/* Sifr Ghibli Scene Quiz 0.2.0
   Standalone game UI. The /ghibli-scene-quiz/ page intentionally does not use JIN's visual shell. */

:root{
  --sgq-page:#f4f3ee;
  --sgq-surface:#ffffff;
  --sgq-surface-soft:#f8f8f5;
  --sgq-ink:#151b18;
  --sgq-muted:#6f7772;
  --sgq-line:#dfe3de;
  --sgq-line-strong:#cbd2cc;
  --sgq-accent:#254b3f;
  --sgq-accent-2:#315f50;
  --sgq-accent-soft:#eaf1ed;
  --sgq-gold:#9b7439;
  --sgq-danger:#a7443f;
  --sgq-danger-soft:#f8e9e7;
  --sgq-success:#255d43;
  --sgq-success-soft:#e7f1eb;
  --sgq-shadow:0 24px 70px rgba(25,36,30,.08);
}

/* ---------- Dedicated page shell ---------- */
body.sgq-app-page{
  margin:0!important;
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(900px 480px at 50% -180px, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#f8f7f3 0%,var(--sgq-page) 100%);
  color:var(--sgq-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.sgq-app-page *{box-sizing:border-box}
body.sgq-app-page a{color:inherit;text-decoration:none}
body.sgq-app-page button,body.sgq-app-page input,body.sgq-app-page select{font:inherit}

.sgq-app-shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.sgq-app-header{flex:0 0 auto;border-bottom:1px solid rgba(37,75,63,.10);background:rgba(248,247,243,.76);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.sgq-app-header-inner{width:min(100% - 40px,1180px);height:66px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.sgq-app-brand{display:inline-flex;align-items:baseline;gap:7px;font-size:13px;letter-spacing:.14em;font-weight:800;color:#1c2a25}
.sgq-app-brand-main{letter-spacing:.19em}
.sgq-app-brand-sub{font-size:10px;font-weight:650;letter-spacing:.2em;color:#7c837f}
.sgq-app-nav{display:flex;align-items:center;gap:24px;padding-right:50px}
.sgq-app-nav a{position:relative;font-size:13px;font-weight:650;color:#5f6963;letter-spacing:.02em}
.sgq-app-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;background:var(--sgq-accent);transition:right .18s ease}
.sgq-app-nav a:hover:after{right:0}
.sgq-app-main{flex:1 0 auto;display:flex;align-items:center;padding:clamp(28px,5vh,64px) 20px}
.sgq-app-stage{width:min(100%,980px);margin:0 auto}
.sgq-app-footer{flex:0 0 auto;padding:22px 20px 28px;color:#838984;font-size:11px}
.sgq-app-footer-inner{width:min(100%,1180px);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(37,75,63,.10);padding-top:18px}
.sgq-app-footer nav{display:flex;gap:18px}.sgq-app-footer a:hover{color:var(--sgq-ink)}

/* ---------- Quiz root / reset ---------- */
.sgq{
  position:relative;
  width:100%;
  max-width:840px;
  margin:0 auto;
  color:var(--sgq-ink);
  font-family:inherit;
  line-height:1.65;
  container-type:inline-size;
  container-name:sgq-card;
}
.sgq *{box-sizing:border-box}
.sgq button,.sgq input,.sgq select{font:inherit}
.sgq button{appearance:none;-webkit-appearance:none}
.sgq-screen[hidden],.sgq [hidden]{display:none!important}
.sgq-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.sgq-screen{width:100%}
.sgq:not(.sgq--app) .sgq-screen:not([data-screen="quiz"]){background:var(--sgq-surface);border:1px solid var(--sgq-line);border-radius:22px;box-shadow:var(--sgq-shadow);overflow:hidden}

/* ---------- Start screen ---------- */
.sgq-screen[data-screen="start"]{background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.sgq-hero{max-width:800px;margin:0 auto;padding:clamp(48px,7vw,82px) 24px clamp(46px,6vw,72px);text-align:center;background:transparent!important}
.sgq-kicker{margin:0 0 20px;font-size:11px;font-weight:760;letter-spacing:.22em;color:var(--sgq-accent);text-transform:uppercase}
.sgq-heading{margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--sgq-ink)!important;font-size:clamp(43px,6.1vw,68px)!important;font-weight:760!important;line-height:1.08!important;letter-spacing:-.045em!important;text-wrap:balance}
.sgq-heading span{display:block;white-space:nowrap}
.sgq-lead{max-width:580px;margin:24px auto 34px;color:var(--sgq-muted);font-size:15px;line-height:1.9;letter-spacing:.01em}
.sgq-start-cta{display:flex!important;align-items:center;justify-content:center;gap:18px;width:min(100%,380px)!important;min-height:58px;margin:0 auto!important;padding:15px 22px!important;border:1px solid transparent!important;border-radius:14px!important;background:var(--sgq-accent)!important;color:#fff!important;font-weight:760!important;font-size:16px!important;letter-spacing:.02em;box-shadow:0 14px 30px rgba(37,75,63,.17);cursor:pointer;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.sgq-start-cta:hover{background:#1f4036!important;transform:translateY(-2px);box-shadow:0 17px 35px rgba(37,75,63,.22)}
.sgq-start-cta:active{transform:translateY(0) scale(.99)}
.sgq-cta-arrow{font-size:19px;font-weight:500;opacity:.86;transition:transform .16s ease}.sgq-start-cta:hover .sgq-cta-arrow{transform:translateX(3px)}
.sgq-rule-chips{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;min-height:31px;margin:18px auto 0}
.sgq-rule-chip{display:inline-flex;align-items:center;min-height:29px;padding:5px 10px;border:1px solid rgba(37,75,63,.11);border-radius:999px;background:rgba(255,255,255,.62);color:#66706a;font-size:11px;font-weight:650;letter-spacing:.01em;white-space:nowrap}
.sgq-start-links{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px}
.sgq-link-divider{width:1px;height:14px;background:#cfd5d0}
.sgq-text-button{border:0;background:transparent;color:#58655e;padding:6px 4px;cursor:pointer;font-size:13px;font-weight:650;text-decoration:none!important;transition:color .15s ease}
.sgq-text-button:hover{color:var(--sgq-accent)}
.sgq-help{margin:14px 0 0;font-size:12px}.sgq-help a{color:var(--sgq-muted);text-decoration:underline;text-underline-offset:3px}

/* ---------- Shared controls ---------- */
.sgq-primary,.sgq-secondary,.sgq-share,.sgq-danger,.sgq-back,.sgq-exit,.sgq-nickname button{
  border:0;border-radius:12px;cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease
}
.sgq button:focus-visible,.sgq input:focus-visible,.sgq select:focus-visible{outline:3px solid rgba(37,75,63,.22);outline-offset:3px}
.sgq-primary{display:block;width:min(100%,380px);margin:0 auto;padding:14px 20px;background:var(--sgq-accent);color:#fff;font-weight:760}
.sgq-primary:hover{background:#1f4036;transform:translateY(-1px)}
.sgq-secondary{padding:11px 16px;background:#eef1ee;color:var(--sgq-ink);font-weight:700}
.sgq-secondary:hover{background:#e5eae6}
.sgq-danger{padding:11px 16px;background:var(--sgq-danger);color:#fff;font-weight:700}

/* ---------- Sound ---------- */
.sgq-sound-toggle{position:absolute;top:4px;right:4px;z-index:30;display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid rgba(37,75,63,.12);border-radius:50%;background:rgba(255,255,255,.78);color:var(--sgq-ink);box-shadow:0 8px 22px rgba(25,36,30,.07);cursor:pointer;font-size:16px;line-height:1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .15s ease,transform .15s ease,opacity .15s ease}
.sgq-sound-toggle:hover{background:#fff;transform:translateY(-1px)}.sgq-sound-toggle.is-muted{opacity:.68}.sgq-sound-glyph{display:block;width:19px;height:19px}.sgq-sound-glyph svg{display:block;width:100%;height:100%;overflow:visible}.sgq-sound-glyph path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.sgq-speaker-body{fill:currentColor!important;stroke:none!important}.sgq-speaker-muted{display:none}.sgq-sound-toggle.is-muted .sgq-speaker-waves{display:none}.sgq-sound-toggle.is-muted .sgq-speaker-muted{display:block}
.sgq[data-sgq-screen="quiz"] .sgq-sound-toggle{top:4px;right:4px}

/* ---------- Panel screens ---------- */
.sgq-panel,.sgq-result-card{width:min(100%,720px);margin:0 auto;padding:clamp(28px,5vw,48px);background:rgba(255,255,255,.94);border:1px solid rgba(37,75,63,.10);border-radius:22px;box-shadow:var(--sgq-shadow)}
.sgq-screen-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-bottom:34px}
.sgq-screen-head h2{grid-column:2;margin:0!important;padding:0!important;border:0!important;background:none!important;color:var(--sgq-ink)!important;font-size:25px!important;line-height:1.3!important;font-weight:760!important;letter-spacing:-.02em}
.sgq-back{grid-column:1;grid-row:1;justify-self:start;background:transparent;color:var(--sgq-muted);padding:7px 0;font-size:13px}
.sgq-fieldset{border:0;padding:0;margin:0 0 26px;text-align:left}.sgq-fieldset legend{padding:0;margin:0 0 10px;font-size:13px;font-weight:760;color:#3e4742}
.sgq-segment{display:flex;gap:9px;flex-wrap:wrap}
.sgq-segment button{flex:1 1 100px;min-height:44px;border:1px solid var(--sgq-line);background:#fafaf8;color:var(--sgq-ink);border-radius:11px;padding:10px 12px;cursor:pointer;font-weight:650;transition:background .14s ease,border-color .14s ease,color .14s ease}
.sgq-segment button:hover{border-color:#b8c4bd}.sgq-segment button.is-selected{background:var(--sgq-accent);border-color:var(--sgq-accent);color:#fff}
.sgq-mobile-only{display:none}

/* ---------- Game screen ---------- */
.sgq-screen[data-screen="quiz"]{background:transparent;border:0;box-shadow:none;overflow:visible}
.sgq-gamebar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;min-height:46px;padding:0 4px 10px;color:#59635d;font-size:12px}
.sgq-gamebar [data-progress-label]{justify-self:center;font-weight:760;letter-spacing:.03em}.sgq-gamebar [data-timer]{justify-self:end;color:#39423d;font-variant-numeric:tabular-nums;font-weight:700}
.sgq-exit{justify-self:start;background:transparent;color:#6a736e;padding:5px 0;font-size:12px;font-weight:650}
.sgq-progress{height:3px;margin:0 2px 12px;background:#e0e4e0;border-radius:999px;overflow:hidden}.sgq-progress span{display:block;height:100%;background:var(--sgq-accent);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.sgq-question-stage{width:100%}
.sgq-image-card{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(25,36,30,.08);border-radius:18px;background:#e6e9e6;box-shadow:0 16px 44px rgba(25,36,30,.09)}
.sgq-image-card img{display:block;width:100%;height:100%;object-fit:cover;filter:blur(32px);will-change:filter}.sgq-image-card img.is-loading{opacity:.55}
.sgq-blur-progress{position:absolute;left:0;bottom:0;width:100%;height:4px;background:rgba(255,255,255,.92);transform:scaleX(0);transform-origin:left}
.sgq-choices{display:flex;flex-direction:column;gap:9px;padding:14px 2px 22px}
.sgq-choice{width:100%;min-height:50px;border:1px solid var(--sgq-line);border-radius:12px;background:rgba(255,255,255,.86);color:var(--sgq-ink);padding:12px 16px;text-align:left;cursor:pointer;font-weight:680;box-shadow:0 4px 14px rgba(25,36,30,.025);transition:background .12s ease,border-color .12s ease,transform .12s ease}
.sgq-choice:hover:not(:disabled){border-color:#abbab1;background:#fff;transform:translateY(-1px)}.sgq-choice:disabled{cursor:default;opacity:1;transform:none}
.sgq-choice.is-correct{background:var(--sgq-success-soft);border-color:#82ad96;color:#214f3a}.sgq-choice.is-wrong{background:var(--sgq-danger-soft);border-color:#d18c87;color:#7d2925}
.sgq-image-error{margin:4px 0 0;text-align:center;color:var(--sgq-danger);font-weight:700}.sgq-next{margin:0 auto 18px}

/* ---------- Result ---------- */
.sgq-result-card{text-align:center}.sgq-score{margin:8px 0 0;font-size:clamp(52px,10vw,78px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.04em}.sgq-result-label{margin:10px 0 0;font-size:18px;font-weight:760}.sgq-time{margin:10px 0 24px;font-size:20px;color:var(--sgq-muted);font-variant-numeric:tabular-nums}.sgq-rank-callout{margin:0 auto 20px;padding:13px 16px;max-width:520px;background:#fff8e9;border:1px solid #e4d0aa;border-radius:12px;color:#77551c;font-weight:720}.sgq-nickname{max-width:520px;margin:0 auto 22px;text-align:left;background:#f7f8f6;padding:17px;border-radius:13px}.sgq-nickname label{display:block;font-weight:720;margin-bottom:8px;font-size:13px}.sgq-nickname>div{display:flex;gap:8px}.sgq-nickname input{min-width:0;flex:1;border:1px solid var(--sgq-line);border-radius:10px;padding:10px 12px;background:#fff;color:var(--sgq-ink)}.sgq-nickname button{background:var(--sgq-gold);color:#fff;padding:9px 16px;font-weight:720}.sgq-nickname p{margin:8px 0 0;font-size:12px}.sgq-result-actions{display:flex;flex-direction:column;align-items:center;gap:10px}.sgq-result-actions .sgq-primary{margin:0}.sgq-result-actions .sgq-secondary,.sgq-share{width:min(100%,380px);padding:12px 16px}.sgq-share{background:#1d211f;color:#fff;font-weight:720}

/* ---------- Ranking ---------- */
.sgq-ranking-rule-row{text-align:left;margin:2px 0 22px}.sgq-ranking-rule-row label{display:block;font-size:13px;font-weight:720}.sgq-ranking-rule-row select{width:100%;margin-top:8px;border:1px solid var(--sgq-line);border-radius:11px;padding:11px 12px;background:#fff;color:var(--sgq-ink)}.sgq-ranking-list{min-height:160px;margin-bottom:24px;overflow-x:auto}.sgq-ranking-table{width:100%;border-collapse:collapse;font-size:13px}.sgq-ranking-table th,.sgq-ranking-table td{padding:12px 10px;border-bottom:1px solid var(--sgq-line);text-align:left}.sgq-ranking-table th{font-size:11px;color:var(--sgq-muted);letter-spacing:.04em;text-transform:uppercase}.sgq-ranking-table th:nth-child(1),.sgq-ranking-table td:nth-child(1){width:72px}.sgq-ranking-table th:nth-child(2),.sgq-ranking-table td:nth-child(2){width:110px;font-variant-numeric:tabular-nums}

/* ---------- Modal ---------- */
.sgq-modal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px;background:rgba(15,21,18,.54);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.sgq-modal-card{width:min(100%,420px);background:#fff;border:1px solid rgba(37,75,63,.1);border-radius:18px;padding:26px;text-align:center;box-shadow:0 28px 80px rgba(0,0,0,.22)}.sgq-modal-card p{margin:0 0 18px;font-weight:720}.sgq-modal-card>div{display:flex;gap:10px;justify-content:center}


/* ---------- Responsive ---------- */
@media(max-width:768px){
  .sgq-app-header-inner{width:calc(100% - 32px);height:56px}.sgq-app-brand{font-size:12px}.sgq-app-brand-sub{font-size:9px}.sgq-app-nav{padding-right:46px}.sgq-app-nav a{font-size:12px}
  .sgq-app-main{align-items:flex-start;padding:14px 14px 26px}.sgq-app-footer{padding:18px 16px 22px}.sgq-app-footer-inner{display:block;text-align:center}.sgq-app-footer nav{justify-content:center;margin-top:8px}
  .sgq{max-width:680px}
  .sgq-hero{padding:42px 8px 38px}.sgq-kicker{margin-bottom:16px;font-size:10px;letter-spacing:.18em}.sgq-heading{font-size:clamp(30px,8vw,42px)!important;line-height:1.1!important;letter-spacing:-.045em!important}.sgq-lead{margin:20px auto 27px;font-size:13px;line-height:1.8}.sgq-lead-break{display:block}.sgq-start-cta{width:100%!important;max-width:380px;min-height:54px;font-size:15px!important}.sgq-rule-chips{margin-top:15px;gap:6px}.sgq-rule-chip{font-size:10px;padding:5px 9px}.sgq-start-links{margin-top:22px;gap:13px}.sgq-text-button{font-size:12px}
  .sgq-sound-toggle{top:0;right:0;width:38px;height:38px;font-size:15px}
  .sgq-panel,.sgq-result-card{padding:26px 18px;border-radius:18px}.sgq-screen-head{margin-bottom:28px}.sgq-screen-head h2{font-size:21px!important}.sgq-pc-only{display:none!important}.sgq-mobile-only{display:block}.sgq-segment{gap:7px}.sgq-segment button{min-height:42px;font-size:13px}
  .sgq-screen[data-screen="quiz"]{touch-action:pan-y;overscroll-behavior-x:contain}.sgq-gamebar{padding:0 2px 9px}.sgq-progress{margin-bottom:10px}.sgq-image-card{border-radius:14px}.sgq-choices{padding:11px 0 18px;gap:8px}.sgq-choice{min-height:48px;padding:11px 13px;border-radius:11px;font-size:14px}
  .sgq-nickname>div{flex-direction:column}.sgq-nickname button{width:100%}
}

@media(max-width:380px){
  .sgq-heading{font-size:29px!important}.sgq-hero{padding-left:2px;padding-right:2px}.sgq-rule-chip{padding:4px 8px}.sgq-app-nav{padding-right:42px}
}


/* 0.6.13: PC low-height quiz viewport fit.
   On ordinary/tall PC viewports the existing 840px quiz width is unchanged.
   When usable viewport height is short, the whole quiz stage narrows so the
   16:9 scene and all three answer choices can remain visible without requiring
   an initial scroll. */
@media (min-width:769px) and (max-height:760px){
  .sgq[data-sgq-screen="quiz"]{
    max-width:min(840px,calc(177.7778vh - 540.4444px));
    max-width:min(840px,calc(177.7778dvh - 540.4444px));
  }
  .sgq[data-sgq-screen="quiz"] .sgq-gamebar{min-height:40px;padding-bottom:7px}
  .sgq[data-sgq-screen="quiz"] .sgq-progress{margin-bottom:9px}
  .sgq[data-sgq-screen="quiz"] .sgq-choices{gap:7px;padding:10px 2px 14px}
  .sgq[data-sgq-screen="quiz"] .sgq-choice{min-height:46px;padding:10px 15px;font-size:14px;line-height:1.45}
}

@media(prefers-reduced-motion:reduce){
  .sgq *,.sgq-app-page *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* 0.2.2: on the dedicated game page, sound is a page-level control, not HUD content. */
.sgq-app-nav .sgq-sound-toggle{
  position:static;
  inset:auto;
  flex:0 0 auto;
  width:38px;
  height:38px;
  margin:0;
  box-shadow:none;
  background:rgba(255,255,255,.58);
}
.sgq-app-nav .sgq-sound-toggle:hover{background:#fff;transform:none}
@media(max-width:768px){
  .sgq-app-nav{padding-right:0}
  .sgq-app-nav .sgq-sound-toggle{width:36px;height:36px}
}
@media(max-width:380px){
  .sgq-app-nav{padding-right:0}
}

/* ========================================================================
   0.4.0 — Title screen follows the approved concept artwork.
   The game/settings/ranking screens keep the stable 0.2.4 layout.
   ======================================================================== */
body.sgq-app-page{
  background-color:#f7f1e3;
  background-image:
    radial-gradient(780px 430px at 50% 30%,rgba(255,255,255,.74),rgba(255,255,255,0) 74%),
    url('../images/paper-texture.webp');
  background-repeat:no-repeat,repeat;
  background-size:auto,512px 512px;
}
body.sgq-app-page.sgq-title-active .sgq-app-main{
  align-items:flex-start;
  padding-top:clamp(34px,5vw,66px);
  padding-bottom:0;
}
body.sgq-app-page.sgq-title-active .sgq-app-stage{width:min(100%,1180px)}
body.sgq-app-page.sgq-title-active .sgq{max-width:1180px}

.sgq-app-header{
  border-bottom:1px solid rgba(79,70,45,.15);
  background:rgba(248,243,229,.80);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.sgq-app-header-inner{width:min(100% - 54px,1220px);height:72px}
.sgq-app-brand{
  gap:8px;
  color:#183a2c;
  font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:17px;
  line-height:1;
  font-weight:650;
  letter-spacing:.12em;
}
.sgq-app-brand-main,.sgq-app-brand-sub{font-size:inherit;font-weight:inherit;letter-spacing:inherit;color:inherit}
.sgq-app-nav{gap:18px;padding-right:0}
.sgq-app-nav a{
  color:#342f27;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
  font-size:15px;
  font-weight:600;
}
.sgq-app-nav .sgq-sound-toggle{
  width:42px;height:42px;
  border-color:rgba(69,62,44,.28);
  background:rgba(255,252,243,.54);
  color:#17372a;
}

body.sgq-app-page.sgq-title-active .sgq-app-footer{padding-top:34px;color:#716957}
body.sgq-app-page.sgq-title-active .sgq-app-footer-inner{
  max-width:860px;
  padding-top:22px;
  border-top-color:rgba(79,70,45,.15);
  font-family:"Times New Roman","Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:13px;
  letter-spacing:.03em;
}

/* approved one-column title composition */
.sgq-screen[data-screen="start"] .sgq-title-screen{
  max-width:1100px;
  margin:0 auto;
  padding:0 22px 26px;
  text-align:center;
  background:transparent!important;
}
.sgq-title-logo{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:#0d3b28!important;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif!important;
  font-size:clamp(50px,5.3vw,78px)!important;
  font-weight:600!important;
  line-height:1.14!important;
  letter-spacing:.025em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.sgq-title-ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  width:210px;
  margin:23px auto 27px;
  color:#a28b56;
}
.sgq-title-ornament span{display:block;width:76px;height:1px;background:linear-gradient(90deg,rgba(162,139,86,0),rgba(162,139,86,.72))}
.sgq-title-ornament span:last-child{transform:scaleX(-1)}
.sgq-title-ornament i{display:block;width:10px;height:10px;background:#9d8654;transform:rotate(45deg);box-shadow:0 0 0 3px rgba(157,134,84,.06)}
.sgq-title-question{
  margin:0;
  color:#272017;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  font-size:clamp(29px,3vw,42px);
  font-weight:550;
  line-height:1.42;
  letter-spacing:.03em;
}
.sgq-title-lead{
  margin:12px 0 0;
  color:#5d5141;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  font-size:clamp(14px,1.5vw,19px);
  font-weight:500;
  letter-spacing:.05em;
}

/* film collage */
.sgq-film-scene{
  position:relative;
  width:min(100%,1000px);
  height:clamp(420px,45vw,610px);
  margin:22px auto -12px;
  perspective:1200px;
  isolation:isolate;
}
.sgq-film-scene::before{
  content:"";
  position:absolute;
  z-index:0;
  left:5%;right:5%;bottom:4%;height:35%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(220,184,102,.34) 0%,rgba(220,184,102,.13) 36%,rgba(220,184,102,0) 72%);
  filter:blur(18px);
}
.sgq-film{
  position:absolute;
  z-index:2;
  aspect-ratio:1.6;
  filter:drop-shadow(0 22px 20px rgba(55,42,21,.20));
  transform-origin:center center;
}
.sgq-film img{
  position:absolute;
  z-index:1;
  left:7.25%;top:19%;
  width:85.5%;height:62%;
  display:block;
  object-fit:cover;
  filter:blur(10px) saturate(.88) brightness(.96);
  transform:scale(1.045);
  transform-origin:center;
}
.sgq-film--main{left:19%;top:10%;width:62%;z-index:5;transform:rotate(-1deg) translateZ(45px)}
.sgq-film--main img{filter:blur(8px) saturate(.92) brightness(.98)}
.sgq-film--rear-left{left:5%;top:12%;width:42%;z-index:2;transform:rotate(-7deg) translateZ(-55px);opacity:.88}
.sgq-film--rear-right{right:4%;top:8%;width:43%;z-index:1;transform:rotate(7deg) translateZ(-75px);opacity:.84}
.sgq-film--side-left{left:-4%;bottom:5%;width:36%;z-index:3;transform:rotate(4deg) translateZ(-35px);opacity:.78}
.sgq-film--side-right{right:-3%;bottom:4%;width:36%;z-index:2;transform:rotate(-4deg) translateZ(-50px);opacity:.80}
.sgq-film--rear-left img,.sgq-film--rear-right img,.sgq-film--side-left img,.sgq-film--side-right img{filter:blur(13px) saturate(.78) brightness(.88)}
.sgq-film-reflection{
  position:absolute;
  z-index:1;
  left:16%;right:16%;bottom:0;height:24%;
  background:linear-gradient(180deg,rgba(221,186,105,.22),rgba(255,255,255,0));
  transform:perspective(600px) rotateX(68deg);
  transform-origin:center bottom;
  filter:blur(12px);
  opacity:.72;
}

/* approved hero actions */
.sgq-screen[data-screen="start"] .sgq-start-cta{
  position:relative;
  z-index:8;
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:min(88%,500px)!important;
  min-height:70px;
  margin:0 auto!important;
  padding:16px 28px!important;
  border:1.5px solid transparent!important;
  border-radius:0!important;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  background:
    linear-gradient(180deg,#0c432b,#073621) padding-box,
    linear-gradient(135deg,#e0c47c,#8e7135 46%,#ead391) border-box!important;
  color:#fffdf4!important;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif!important;
  font-size:clamp(23px,2vw,31px)!important;
  font-weight:550!important;
  letter-spacing:.05em;
  box-shadow:0 14px 25px rgba(55,42,20,.20),inset 0 1px rgba(255,255,255,.12);
}
.sgq-screen[data-screen="start"] .sgq-start-cta:hover{background:linear-gradient(180deg,#105137,#093d27) padding-box,linear-gradient(135deg,#edd793,#97783d 46%,#f2dfa4) border-box!important;transform:translateY(-2px)}
.sgq-rule-summary{
  margin:18px 0 0;
  color:#342b20;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  font-size:clamp(15px,1.45vw,20px);
  font-weight:500;
  letter-spacing:.045em;
}
.sgq-screen[data-screen="start"] .sgq-start-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:46px;
  margin-top:26px;
}
.sgq-screen[data-screen="start"] .sgq-text-button{
  position:relative;
  padding:3px 0 6px;
  border:0;
  background:transparent;
  color:#342b20;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  font-size:clamp(14px,1.25vw,18px);
  font-weight:550;
  letter-spacing:.025em;
}
.sgq-screen[data-screen="start"] .sgq-text-button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(52,43,32,.52)}
.sgq-screen[data-screen="start"] .sgq-ranking-link span{display:inline-block;margin-left:8px;transition:transform .16s ease}
.sgq-screen[data-screen="start"] .sgq-ranking-link:hover span{transform:translateX(4px)}

@media(max-width:768px){
  body.sgq-app-page.sgq-title-active .sgq-app-main{padding:26px 0 0}
  .sgq-app-header-inner{width:calc(100% - 34px);height:62px}
  .sgq-app-brand{font-size:13px;letter-spacing:.11em}
  .sgq-app-nav{gap:11px}.sgq-app-nav a{font-size:13px}
  .sgq-app-nav .sgq-sound-toggle{width:38px;height:38px}
  .sgq-screen[data-screen="start"] .sgq-title-screen{padding:0 15px 22px}
  .sgq-title-logo{font-size:clamp(38px,10.2vw,51px)!important;line-height:1.2!important;letter-spacing:.01em!important}
  .sgq-title-ornament{width:150px;margin:18px auto 22px;gap:10px}.sgq-title-ornament span{width:54px}
  .sgq-title-question{font-size:clamp(26px,7vw,35px);line-height:1.55;max-width:560px;margin-left:auto;margin-right:auto}
  .sgq-title-lead{font-size:clamp(13px,3.7vw,16px);line-height:1.8;margin-top:9px}
  .sgq-film-scene{width:calc(100% + 30px);margin-left:-15px;height:clamp(300px,89vw,455px);margin-top:14px;margin-bottom:-4px;overflow:hidden}
  .sgq-film--main{left:12%;top:12%;width:76%}
  .sgq-film--rear-left{left:-13%;top:12%;width:55%}
  .sgq-film--rear-right{right:-14%;top:11%;width:55%}
  .sgq-film--side-left{left:-18%;bottom:1%;width:48%}
  .sgq-film--side-right{right:-18%;bottom:1%;width:48%}
  .sgq-screen[data-screen="start"] .sgq-start-cta{width:88%!important;max-width:540px;min-height:64px;font-size:clamp(22px,6vw,28px)!important}
  .sgq-rule-summary{margin-top:16px;font-size:clamp(15px,4vw,18px)}
  .sgq-screen[data-screen="start"] .sgq-start-links{flex-direction:column;gap:24px;margin-top:26px}
  .sgq-screen[data-screen="start"] .sgq-text-button{font-size:clamp(16px,4.4vw,19px)}
  body.sgq-app-page.sgq-title-active .sgq-app-footer{padding-top:28px}
  body.sgq-app-page.sgq-title-active .sgq-app-footer-inner{display:flex;flex-direction:row;justify-content:center;gap:28px;font-size:12px}
  body.sgq-app-page.sgq-title-active .sgq-app-footer nav{margin-top:0}
}

@media(max-width:420px){
  .sgq-title-logo{font-size:36px!important}
  .sgq-title-question{font-size:26px}
  .sgq-film-scene{height:330px}
  .sgq-screen[data-screen="start"] .sgq-start-cta{width:92%!important}
  body.sgq-app-page.sgq-title-active .sgq-app-footer-inner{gap:18px;flex-wrap:wrap}
}

/* 0.4.1: make the entire title screen fit within the first viewport more reliably,
   while moving even closer to the approved concept comps. */
body.sgq-app-page.sgq-title-active .sgq-app-main{
  align-items:flex-start;
  padding:18px 20px 0;
}
body.sgq-app-page.sgq-title-active .sgq-app-stage{width:min(100%,1140px)}

body.sgq-app-page.sgq-title-active .sgq-app-header-inner{
  width:min(100% - 56px,1230px);
  height:60px;
}
body.sgq-app-page.sgq-title-active .sgq-app-footer{
  padding:10px 20px 16px;
}
body.sgq-app-page.sgq-title-active .sgq-app-footer-inner{
  max-width:940px;
  padding-top:14px;
}

.sgq-screen[data-screen="start"] .sgq-title-screen{
  max-width:1080px;
  padding:0 20px 10px;
}
.sgq-title-logo{
  font-size:clamp(46px,5vw,74px)!important;
  line-height:1.08!important;
}
.sgq-title-ornament{
  width:190px;
  margin:16px auto 18px;
  gap:12px;
}
.sgq-title-ornament span{width:68px}
.sgq-title-question{
  font-size:clamp(28px,2.65vw,40px);
  line-height:1.3;
  letter-spacing:.02em;
}
.sgq-title-lead{
  margin-top:8px;
  font-size:clamp(13px,1.35vw,18px);
  letter-spacing:.04em;
}

.sgq-film-scene{
  width:min(100%,980px);
  height:clamp(330px,33vw,470px);
  margin:10px auto -10px;
}
.sgq-film-scene::before{
  left:8%;
  right:8%;
  bottom:8%;
  height:28%;
  filter:blur(16px);
}
.sgq-film{
  filter:drop-shadow(0 16px 18px rgba(55,42,21,.16));
}
.sgq-film img{
  filter:blur(11px) saturate(.86) brightness(.96);
}
.sgq-film--main{
  left:20%;
  top:9%;
  width:60%;
}
.sgq-film--main img{filter:blur(8.4px) saturate(.92) brightness(.99)}
.sgq-film--rear-left{left:7%;top:11%;width:38%;opacity:.86}
.sgq-film--rear-right{right:7%;top:10%;width:39%;opacity:.82}
.sgq-film--side-left{left:0;bottom:4%;width:30%;opacity:.74}
.sgq-film--side-right{right:0;bottom:4%;width:30%;opacity:.76}
.sgq-film-reflection{
  left:20%;
  right:20%;
  height:18%;
  opacity:.62;
}

.sgq-screen[data-screen="start"] .sgq-start-cta{
  width:min(84%,420px)!important;
  min-height:60px;
  margin:4px auto 0!important;
  padding:12px 24px!important;
  font-size:clamp(21px,1.8vw,28px)!important;
}
.sgq-rule-summary{
  margin:12px 0 0;
  font-size:clamp(14px,1.18vw,18px);
}
.sgq-screen[data-screen="start"] .sgq-start-links{
  gap:34px;
  margin-top:18px;
}
.sgq-screen[data-screen="start"] .sgq-text-button{
  font-size:clamp(14px,1.05vw,17px);
}

/* Short desktops/laptops: aggressively tighten the composition so the entire
   title screen is visible without scrolling whenever practical. */
@media (min-width: 769px) and (max-height: 980px){
  body.sgq-app-page.sgq-title-active .sgq-app-header-inner{height:56px}
  body.sgq-app-page.sgq-title-active .sgq-app-main{padding-top:12px}
  body.sgq-app-page.sgq-title-active .sgq-app-footer{padding:8px 20px 12px}
  body.sgq-app-page.sgq-title-active .sgq-app-footer-inner{padding-top:10px;font-size:12px}
  .sgq-screen[data-screen="start"] .sgq-title-screen{padding-bottom:6px}
  .sgq-title-logo{font-size:clamp(42px,4.4vw,66px)!important}
  .sgq-title-ornament{margin:12px auto 14px;width:174px}
  .sgq-title-ornament span{width:62px}
  .sgq-title-question{font-size:clamp(26px,2.4vw,36px)}
  .sgq-title-lead{margin-top:6px;font-size:clamp(12px,1.15vw,16px)}
  .sgq-film-scene{height:clamp(270px,29vw,390px);margin-top:6px;margin-bottom:-6px}
  .sgq-screen[data-screen="start"] .sgq-start-cta{min-height:54px;width:min(82%,380px)!important;font-size:clamp(20px,1.6vw,25px)!important}
  .sgq-rule-summary{margin-top:9px;font-size:clamp(13px,1.0vw,16px)}
  .sgq-screen[data-screen="start"] .sgq-start-links{gap:28px;margin-top:13px}
}

@media(max-width:768px){
  body.sgq-app-page.sgq-title-active .sgq-app-main{padding:10px 0 0}
  body.sgq-app-page.sgq-title-active .sgq-app-header-inner{width:calc(100% - 26px);height:54px}
  body.sgq-app-page.sgq-title-active .sgq-app-footer{padding:8px 16px 14px}
  .sgq-screen[data-screen="start"] .sgq-title-screen{padding:0 12px 10px}
  .sgq-title-logo{font-size:clamp(34px,9vw,48px)!important;line-height:1.16!important}
  .sgq-title-ornament{width:138px;margin:12px auto 14px;gap:9px}
  .sgq-title-ornament span{width:50px}
  .sgq-title-question{font-size:clamp(24px,6.6vw,33px);line-height:1.36}
  .sgq-title-lead{font-size:clamp(12px,3.5vw,15px);line-height:1.7;margin-top:8px}
  .sgq-film-scene{width:calc(100% + 24px);margin-left:-12px;height:clamp(238px,49vw,340px);margin-top:8px;margin-bottom:-2px;overflow:hidden}
  .sgq-film--main{left:11%;top:12%;width:78%}
  .sgq-film--rear-left{left:-10%;top:13%;width:49%}
  .sgq-film--rear-right{right:-10%;top:12%;width:50%}
  .sgq-film--side-left{left:-14%;bottom:2%;width:39%}
  .sgq-film--side-right{right:-14%;bottom:2%;width:39%}
  .sgq-screen[data-screen="start"] .sgq-start-cta{width:min(90%,370px)!important;min-height:56px;font-size:clamp(20px,5.8vw,26px)!important}
  .sgq-rule-summary{margin-top:11px;font-size:clamp(13px,3.7vw,17px)}
  .sgq-screen[data-screen="start"] .sgq-start-links{flex-direction:row;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:14px}
  .sgq-screen[data-screen="start"] .sgq-text-button{font-size:clamp(14px,4vw,17px)}
  body.sgq-app-page.sgq-title-active .sgq-app-footer-inner{gap:16px;font-size:11px;padding-top:10px;flex-wrap:wrap}
}

@media(max-width:420px){
  .sgq-title-logo{font-size:32px!important}
  .sgq-title-question{font-size:23px}
  .sgq-film-scene{height:230px}
  .sgq-screen[data-screen="start"] .sgq-start-cta{width:92%!important;min-height:54px}
  .sgq-screen[data-screen="start"] .sgq-start-links{gap:16px}
}

/* ========================================================================
   0.6.12 — Final title screen: two immutable PNG masters + HTML overlays.
   Coordinates below are derived from measured source pixels, then converted
   to percentages. The PNG files themselves are never transformed.
   ======================================================================== */
body.sgq-app-page.sgq-title-active{
  background:#f7f1e3!important;
  background-image:none!important;
}
body.sgq-app-page.sgq-title-active::before{display:none!important}
body.sgq-app-page.sgq-title-active .sgq-app-header,
body.sgq-app-page.sgq-title-active .sgq-app-footer{display:none!important}
body.sgq-app-page.sgq-title-active .sgq-app-main{
  min-height:100dvh;
  padding:0;
  align-items:center;
  justify-content:center;
}
body.sgq-app-page.sgq-title-active .sgq-app-stage,
body.sgq-app-page.sgq-title-active .sgq,
body.sgq-app-page.sgq-title-active .sgq-screen[data-screen="start"]{
  width:100%;
  max-width:none;
}
body.sgq-app-page.sgq-title-active .sgq > .sgq-sound-toggle{display:none!important}
body.sgq-app-page.sgq-title-active [data-screen="start"]{padding:0}

.sgq-title-stage{
  position:relative;
  margin:0 auto;
  width:min(calc((100dvh - 8px) * 1.3333333333),calc(100vw - 8px));
  aspect-ratio:1448 / 1086;
  overflow:hidden;
}
.sgq-title-picture,
.sgq-title-picture img{
  display:block;
  width:100%;
  height:100%;
}
.sgq-title-picture img{
  object-fit:contain;
  -webkit-user-drag:none;
  user-select:none;
  pointer-events:none;
}

.sgq-title-hotspot,
.sgq-title-start,
.sgq-title-sound{
  position:absolute;
  z-index:10;
  margin:0;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
}
.sgq-title-hotspot{
  display:block;
  border:0;
  background:transparent;
  color:transparent;
  cursor:pointer;
}
.sgq-title-hotspot:hover{background:transparent}
.sgq-title-hotspot:focus-visible,
.sgq-title-start:focus-visible,
.sgq-title-sound:focus-visible{
  outline:3px solid rgba(27,86,62,.48);
  outline-offset:2px;
}

/* PC source: 1448 × 1086 px.
   CTA measured outer region: x=471, y=794, w=506, h=90.
   Settings text/underline: x=565..661, y=977..999.
   Ranking text/underline: x=721..902, y=977..999.
   Help text: x=1253..1305, y=33..48.
   Header divider measured at x=1329..1330; sound is placed wholly to its right. */
.sgq-title-start{
  left:32.527624%;
  top:73.112339%;
  width:34.944751%;
  height:8.287293%;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fffdf2;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  font-size:clamp(18px,2vw,28px);
  font-weight:600;
  line-height:1;
  letter-spacing:.055em;
  text-shadow:0 1px 2px rgba(0,0,0,.30);
  cursor:pointer;
}
.sgq-title-start span,
.sgq-title-rule{
  opacity:0;
  transition:opacity .08s linear;
}
.sgq-title-stage.is-state-ready .sgq-title-start span,
.sgq-title-stage.is-state-ready .sgq-title-rule{opacity:1}
.sgq-title-rule{
  position:absolute;
  z-index:9;
  left:32.527624%;
  top:82.136280%;
  width:34.944751%;
  height:4.143646%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#342d24;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  font-size:clamp(11px,1.22vw,17px);
  font-weight:550;
  line-height:1.2;
  letter-spacing:.035em;
  white-space:nowrap;
  pointer-events:none;
}
.sgq-title-settings{left:38.604972%;top:89.318600%;width:7.458564%;height:3.130755%}
.sgq-title-ranking{left:49.378453%;top:89.318600%;width:13.397790%;height:3.130755%}
.sgq-title-help{left:86.118785%;top:2.486188%;width:4.488950%;height:2.578269%}
/* Footer link hotspots over baked-in Privacy / Contact text (PC master 1448x1086). */
.sgq-title-privacy{left:47.651934%;top:95.764273%;width:7.596685%;height:4.235727%}
.sgq-title-contact{left:55.939227%;top:95.764273%;width:7.251381%;height:4.235727%}

.sgq-title-sound{
  left:93.439227%;
  top:1.841621%;
  width:3.038674%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid rgba(55,58,48,.38);
  border-radius:50%;
  background:rgba(255,252,241,.68);
  color:#17372a;
  box-shadow:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
.sgq-title-sound:hover{background:rgba(255,252,241,.86)}
.sgq-title-sound .sgq-sound-glyph{width:48%;height:48%}
.sgq-title-sound .sgq-sound-glyph svg{display:block;width:100%;height:100%;overflow:visible}
.sgq-title-sound .sgq-sound-glyph path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sgq-title-sound .sgq-speaker-body{fill:currentColor!important;stroke:none!important}
.sgq-title-sound .sgq-speaker-muted{display:none}
.sgq-title-sound.is-muted .sgq-speaker-waves{display:none}
.sgq-title-sound.is-muted .sgq-speaker-muted{display:block}

/* Mobile standard source: 941 × 1672 px.
   CTA measured: x=150..784, y=1121..1234.
   Settings: around y=1335..1379.
   Ranking: around y=1457..1500.
   Help: around x=716..826, y=38..68.

   Mobile tall source: 880 × 1788 px.
   CTA measured: x=142..735, y=1084..1187.
   Settings: around y=1336..1375.
   Ranking: around y=1468..1509.
   Help: around x=678..752, y=41..66.

   Mobile super-tall source: 850 × 1850 px.
   CTA measured: x=136..710, y=1090..1191.
   Rule line should sit below the baked-in “現在の設定” label.
   Settings: around y=1492..1560.
   Ranking: around y=1600..1668.
   Help: around x=659..760, y=39..71.

   Breakpoints are chosen from the midpoints between adjacent source ratios:
   - 211/400 (=0.5275) between standard and tall.
   - 119/250 (=0.4760) between tall and super-tall. */
@media(max-width:768px){
  body.sgq-app-page.sgq-title-active .sgq-app-main{
    align-items:flex-start!important;
    justify-content:center!important;
    padding:0!important;
  }
  .sgq-title-stage{
    width:min(100vw,calc(100dvh * .5627990431));
    aspect-ratio:941 / 1672;
    margin-top:0!important;
  }
  .sgq-title-start{
    left:15.940489%;
    top:67.045455%;
    width:67.481403%;
    height:6.818182%;
    font-size:clamp(16px,4.25vw,26px);
    letter-spacing:.035em;
  }
  .sgq-title-rule{
    left:15.940489%;
    top:74.342105%;
    width:67.481403%;
    height:2.45%;
    font-size:clamp(10px,3.15vw,18px);
    letter-spacing:.02em;
  }
  .sgq-title-settings{left:36.5%;top:79.25%;width:27%;height:4.0%}
  .sgq-title-ranking{left:30.5%;top:86.65%;width:36.5%;height:4.1%}
  .sgq-title-help{left:75.5%;top:1.75%;width:12.5%;height:3.1%}
  .sgq-title-privacy{left:45.696068%;top:95.394737%;width:13.815090%;height:4.186603%}
  .sgq-title-contact{left:67.481403%;top:95.394737%;width:14.877789%;height:4.186603%}
  .sgq-title-sound{
    left:91%;
    top:1.37%;
    width:6%;
  }
}

/* Tall smartphones: use 880 × 1788 master. */
@media(max-width:768px) and (max-aspect-ratio:211/400){
  .sgq-title-stage{
    width:min(100vw,calc(100dvh * .4921700224));
    aspect-ratio:880 / 1788;
  }
  .sgq-title-start{
    left:16.136364%;
    top:60.626398%;
    width:67.500000%;
    height:5.816555%;
    font-size:clamp(16px,4.15vw,25px);
  }
  .sgq-title-rule{
    left:16.136364%;
    top:66.70%;
    width:67.500000%;
    height:2.35%;
    font-size:clamp(10px,3.0vw,17px);
  }
  .sgq-title-settings{left:37.5%;top:73.95%;width:25%;height:3.5%}
  .sgq-title-ranking{left:32.5%;top:81.65%;width:35%;height:3.7%}
  .sgq-title-help{left:76.2%;top:1.72%;width:10.5%;height:2.8%}
  .sgq-title-privacy{left:44.886364%;top:94.239374%;width:13.636364%;height:3.355705%}
  .sgq-title-contact{left:65.340909%;top:94.239374%;width:13.636364%;height:3.355705%}
  .sgq-title-sound{
    left:91%;
    top:1.37%;
    width:6%;
  }
}

/* Super-tall smartphones: use 850 × 1850 master. */
@media(max-width:768px) and (max-aspect-ratio:119/250){
  .sgq-title-stage{
    /* 0.6.32: bind the entire title coordinate system directly to the
       real dynamic viewport. The master itself is allowed to stretch by the
       small ratio difference, so neither horizontal nor vertical letterbox
       space can remain on Pixel-class extra-tall screens. */
    width:100vw;
    height:100dvh;
    aspect-ratio:auto;
    margin:0!important;
    left:auto;
    transform:none;
  }
  .sgq-title-picture,
  .sgq-title-picture img{
    width:100%;
    height:100%;
  }
  .sgq-title-picture img{
    object-fit:fill;
  }
  .sgq-title-start{
    left:16.000000%;
    top:58.918919%;
    width:67.647059%;
    height:5.513514%;
    font-size:clamp(16px,4.0vw,24px);
  }
  .sgq-title-rule{
    left:18.235294%;
    top:72.540541%;
    width:63.529412%;
    height:2.000000%;
    font-size:clamp(10px,2.85vw,16px);
    letter-spacing:.02em;
  }
  .sgq-title-settings{left:38.000000%;top:80.648649%;width:24.000000%;height:3.675676%}
  .sgq-title-ranking{left:31.058824%;top:86.648649%;width:37.882353%;height:3.891892%}
  .sgq-title-help{left:77.529412%;top:1.891892%;width:11.882353%;height:2.648649%}
  .sgq-title-privacy{left:46.470588%;top:95.135135%;width:14.705882%;height:3.243243%}
  .sgq-title-contact{left:65.882353%;top:95.135135%;width:14.705882%;height:3.243243%}
  .sgq-title-sound{
    left:91%;
    top:1.37%;
    width:6%;
  }
}


@media(prefers-reduced-motion:reduce){
  .sgq-title-start span,
  .sgq-title-rule{transition:none}
}


/* 0.6.14: Hide footer during active quiz play to avoid footer peeking and oversized footer area. */
body.sgq-app-page.sgq-screen-quiz .sgq-app-footer{display:none!important}
body.sgq-app-page.sgq-screen-quiz .sgq-app-main{
  min-height:calc(100vh - 66px);
  min-height:calc(100dvh - 66px);
  align-items:flex-start;
  padding-top:clamp(18px,3vh,28px);
  padding-bottom:20px;
}


/* 0.6.15: Hide header as well during active quiz play so no header edge peeks into the viewport. */
body.sgq-app-page.sgq-screen-quiz .sgq-app-header{display:none!important}
body.sgq-app-page.sgq-screen-quiz .sgq-app-main{
  min-height:100vh;
  min-height:100dvh;
  align-items:flex-start;
  padding-top:18px;
  padding-bottom:20px;
}


/* 0.6.16: Reserve the "next question" button footprint in button-transition mode.
   This prevents the document height from changing at the moment an answer is chosen,
   so the vertical scrollbar does not suddenly appear. Auto/swipe modes keep the
   historical no-slot layout. */
.sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next[hidden]{
  display:block!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next:not([hidden]){
  visibility:visible;
  opacity:1;
}

/* The low-height PC fit calculation must include the reserved next-button footprint. */
@media (min-width:769px) and (max-height:760px){
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"]{
    max-width:min(840px,calc(177.7778vh - 655.1111px));
    max-width:min(840px,calc(177.7778dvh - 655.1111px));
  }
}


/* 0.6.18: Wide-PC chevron trial — place a tall narrow SVG ">" control to the right of the unchanged 3-choice stack.
   The answer choices keep their existing width, position, spacing and height.
   On narrower PC widths, the 0.6.16 below-choices text-button layout remains as fallback. */
.sgq-answer-row{position:relative;width:100%}
.sgq-next-chevron{display:none}
.sgq-next-label{display:inline}


@media (min-width:1160px){
  /* In the side-button layout there is no need to reserve vertical space before answering. */
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next[hidden]{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  .sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next:not([hidden]){
    position:absolute;
    left:calc(100% + 14px);
    top:14px;
    width:56px!important;
    height:calc(100% - 36px);
    min-height:0;
    margin:0!important;
    padding:0!important;
    display:grid;
    place-items:center;
    visibility:visible;
    opacity:1;
    border-radius:14px!important;
  }
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next:not([hidden]) .sgq-next-label{
    display:none;
  }
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next:not([hidden]) .sgq-next-chevron{
    display:block;
    width:20px;
    height:40px;
  }
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next:not([hidden]) .sgq-next-chevron svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
  }
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next:not([hidden]) .sgq-next-chevron path{
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
}

/* With the button moved sideways, low-height wide PCs no longer need the extra
   vertical footprint that 0.6.16 reserved for the bottom button. */
@media (min-width:1160px) and (max-height:760px){
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"]{
    max-width:min(840px,calc(177.7778vh - 540.4444px));
    max-width:min(840px,calc(177.7778dvh - 540.4444px));
  }
  /* Low-height mode uses 10px top / 14px bottom choice padding. Match that inner stack exactly. */
  .sgq.sgq-reserve-next[data-sgq-screen="quiz"] .sgq-next:not([hidden]){
    top:10px;
    height:calc(100% - 24px);
  }
}


/* ========================================================================
   0.6.20 — Title-screen outer-background continuation.
   Keep the approved PC/mobile master fully visible (no cover crop).
   Fill only the unused viewport area with a heavily blurred, parchment-washed
   copy of the same master plus the existing paper texture so the letterbox/
   pillarbox area visually continues the artwork instead of appearing blank.
   ======================================================================== */
body.sgq-app-page.sgq-title-active{
  position:relative;
  overflow:hidden;
  background-color:#eee1cb!important;
  background-image:url('../images/paper-texture.webp')!important;
  background-repeat:repeat!important;
  background-size:512px 512px!important;
}
body.sgq-app-page.sgq-title-active::before{
  content:"";
  display:block!important;
  position:fixed;
  inset:-64px;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(244,235,218,.58),rgba(238,225,203,.66)),
    url('../images/sgq-master-pc-0668-wide.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
  filter:blur(42px) saturate(.62) brightness(1.045);
  transform:scale(1.055);
  transform-origin:center;
  opacity:.82;
}
body.sgq-app-page.sgq-title-active .sgq-app-shell{
  position:relative;
  z-index:1;
}

@media(max-width:768px){
  body.sgq-app-page.sgq-title-active::before{
    background-image:
      linear-gradient(rgba(244,235,218,.60),rgba(238,225,203,.68)),
      url('../images/sgq-master-mobile-standard-0659.png');
    filter:blur(36px) saturate(.60) brightness(1.045);
    transform:scale(1.06);
  }
}


/* ========================================================================
   0.6.21 — Mobile title master anchored to the top edge.
   Preserve the entire mobile master and its coordinate system; when the
   viewport is taller than the master display, all surplus space is placed
   below the master instead of being split above and below it.
   ======================================================================== */
@media(max-width:768px){
  body.sgq-app-page.sgq-title-active .sgq-app-main{
    align-items:flex-start;
    justify-content:center;
  }
}


/* ========================================================================
   0.6.22 — True viewport-top anchoring for the dedicated quiz document.
   0.6.21 aligned the stage inside .sgq-app-main, but a WordPress front-end
   admin-bar offset can exist above the body for logged-in users.  The quiz
   template now disables the admin bar; these rules also neutralize any
   residual html/body offset so the mobile master begins at viewport y=0.
   ======================================================================== */
html.sgq-app-html{
  margin:0!important;
  padding:0!important;
  width:100%;
  min-height:100%;
  background:#eee1cb;
}
html.sgq-app-html body.sgq-app-page{
  margin:0!important;
  padding:0!important;
}

@media(max-width:768px){
  html.sgq-app-html,
  html.sgq-app-html body.sgq-app-page.sgq-title-active,
  html.sgq-app-html body.sgq-app-page.sgq-title-active .sgq-app-shell,
  html.sgq-app-html body.sgq-app-page.sgq-title-active .sgq-app-main{
    margin-top:0!important;
    padding-top:0!important;
  }
  html.sgq-app-html body.sgq-app-page.sgq-title-active .sgq-app-main{
    min-height:100dvh;
    align-items:flex-start!important;
    justify-content:center!important;
  }
  html.sgq-app-html body.sgq-app-page.sgq-title-active .sgq-title-stage{
    margin-top:0!important;
  }
}


/* 0.6.29 — Three approved smartphone masters. */
@media(max-width:768px) and (max-aspect-ratio:211/400){
  body.sgq-app-page.sgq-title-active::before{
    background-image:
      linear-gradient(rgba(244,235,218,.60),rgba(238,225,203,.68)),
      url('../images/sgq-master-mobile-tall-0686.png');
  }
}

@media(max-width:768px) and (max-aspect-ratio:119/250){
  body.sgq-app-page.sgq-title-active::before{
    background-image:
      linear-gradient(rgba(244,235,218,.60),rgba(238,225,203,.68)),
      url('../images/sgq-master-mobile-super-tall-0658.png');
  }
}


/* 0.6.32 — Super-tall mobile direct viewport fit.
   The title stage is exactly 100vw × 100dvh and the selected super-tall
   master uses object-fit:fill. All percentage-positioned overlays therefore
   share the same stretched coordinate system as the image. */
@media(max-width:768px) and (max-aspect-ratio:119/250){
  html.sgq-app-html body.sgq-app-page.sgq-title-active,
  html.sgq-app-html body.sgq-app-page.sgq-title-active .sgq-app-shell,
  html.sgq-app-html body.sgq-app-page.sgq-title-active .sgq-app-main{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    overflow:hidden!important;
  }
}


/* ========================================================================
   0.6.33 — Mobile title stage must always span the real viewport width.
   Verified on a physical Pixel 7: the previous aspect-ratio-based min()
   could make the stage itself a few CSS pixels narrower than the viewport,
   exposing the page background at both sides. Keep each selected master's
   existing vertical coordinate system, but force the stage/picture to the
   full viewport width. No scaleX workaround is used.
   ======================================================================== */
@media (max-width:768px){
  html.sgq-app-html
  body.sgq-app-page.sgq-title-active
  .sgq-title-stage{
    width:100vw!important;
    max-width:none!important;
  }

  .sgq-title-picture,
  .sgq-title-picture img{
    width:100%!important;
  }

  .sgq-title-picture img{
    transform:none!important;
  }
}


/* ========================================================================
   0.6.37 — Mobile current-setting spacing.
   Move only the dynamic current-setting line 20px lower on smartphones,
   matching the value verified via Custom CSS. Other title elements stay put.
   ======================================================================== */
@media (max-width:768px){
  .sgq-title-rule{
    transform:translateY(10px)!important;
  }
}


/* 0.6.37 — Clickable footer text on title masters.
   Transparent hotspots are aligned to the baked-in Privacy and Contact labels
   for PC, standard-mobile, tall-mobile and super-tall-mobile masters. */

/* ========================================================================
   0.6.39 — New title masters + HTML lower controls/footer.
   The master keeps the artwork. Device-sensitive lower controls are HTML.
   ======================================================================== */

/* New master URLs for blurred continuation background. */
body.sgq-app-page.sgq-title-active::before{
  background-image:
    linear-gradient(rgba(244,235,218,.58),rgba(238,225,203,.66)),
    url('../images/sgq-master-pc-0668-wide.png');
}
@media(max-width:768px){
  body.sgq-app-page.sgq-title-active::before{
    background-image:
      linear-gradient(rgba(244,235,218,.60),rgba(238,225,203,.68)),
      url('../images/sgq-master-mobile-standard-0659.png');
  }
}
@media(max-width:768px) and (max-aspect-ratio:211/400){
  body.sgq-app-page.sgq-title-active::before{
    background-image:
      linear-gradient(rgba(244,235,218,.60),rgba(238,225,203,.68)),
      url('../images/sgq-master-mobile-tall-0686.png');
  }
}
@media(max-width:768px) and (max-aspect-ratio:119/250){
  body.sgq-app-page.sgq-title-active::before{
    background-image:
      linear-gradient(rgba(244,235,218,.60),rgba(238,225,203,.68)),
      url('../images/sgq-master-mobile-super-tall-0658.png');
  }
}

/* Generic HTML lower controls. */
.sgq-title-current-label,
.sgq-title-settings,
.sgq-title-ranking,
.sgq-title-footer{
  position:absolute;
  z-index:12;
  font-family:"Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
  color:#243129;
}
.sgq-title-current-label{
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}
.sgq-title-current-label::before,
.sgq-title-current-label::after{
  content:"";
  width:29%;
  height:1px;
  margin:0 4%;
  background:rgba(177,139,64,.72);
}
.sgq-title-settings,
.sgq-title-ranking{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  color:#17251f;
  line-height:1.25;
  text-decoration:underline;
  text-underline-offset:.22em;
  text-decoration-thickness:1px;
}
.sgq-title-settings:hover,
.sgq-title-ranking:hover{background:transparent;color:#102e20}
.sgq-title-settings:focus-visible,
.sgq-title-ranking:focus-visible,
.sgq-title-footer a:focus-visible{
  outline:2px solid rgba(27,86,62,.52);
  outline-offset:3px;
}
.sgq-title-ranking{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.22em;
}
.sgq-title-ranking-crown{
  display:block;
  color:#c39a31;
  font-size:1.18em;
  line-height:.85;
  text-decoration:none;
}
.sgq-title-footer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.45em;
  white-space:nowrap;
  line-height:1;
  color:#26312b;
}
.sgq-title-footer a{
  color:inherit;
  text-decoration:none;
}
.sgq-title-footer-sep{opacity:.72}

/* Reset obsolete hotspot geometry; lower buttons are now visible HTML. */
.sgq-title-settings,.sgq-title-ranking{width:auto;height:auto;left:auto;top:auto}
.sgq-title-privacy,.sgq-title-contact{display:none!important}

/* ---------------- PC: 1448 × 1086 ---------------- */
@media(min-width:769px){
  .sgq-title-stage{
    width:min(calc((100dvh - 8px) * 1.3333333333),calc(100vw - 8px));
    aspect-ratio:1448 / 1086;
  }
  .sgq-title-start{
    left:31.70%;
    top:71.05%;
    width:34.20%;
    height:8.35%;
  }
  .sgq-title-current-label{
    left:32.0%;
    top:81.5%;
    width:36.0%;
    height:3.2%;
    font-size:clamp(12px,1.15vw,17px);
  }
  .sgq-title-rule{
    left:31.0%;
    top:84.3%;
    width:38.0%;
    height:3.0%;
    transform:none!important;
    font-size:clamp(11px,1.02vw,15px);
  }
  .sgq-title-settings{
    left:37.2%;
    top:89.0%;
    width:10.5%;
    height:3.0%;
    font-size:clamp(12px,1.15vw,17px);
  }
  .sgq-title-ranking{
    left:51.0%;
    top:87.7%;
    width:15.0%;
    height:5.2%;
    font-size:clamp(12px,1.15vw,17px);
  }
  .sgq-title-footer{
    left:32%;
    width:36%;
    bottom:1.55%;
    font-size:clamp(10px,.95vw,14px);
  }
  .sgq-title-help{left:85.5%;top:2.1%;width:5.6%;height:3.3%}
}

/* ---------------- Mobile base: 941 × 1672 ---------------- */
@media(max-width:768px){
  .sgq-title-stage{
    width:100vw!important;
    max-width:none!important;
    aspect-ratio:941 / 1672;
  }
  .sgq-title-start{
    left:15.62%;
    top:66.03%;
    width:67.15%;
    height:6.55%;
  }
  .sgq-title-current-label{
    display:flex;
    left:17%;
    top:75.45%;
    width:66%;
    height:2.8%;
    font-size:clamp(13px,3.7vw,20px);
  }
  .sgq-title-rule{
    left:13%;
    top:78.45%;
    width:74%;
    height:2.7%;
    transform:none!important;
    font-size:clamp(11px,3.05vw,17px);
  }
  .sgq-title-settings{
    left:34%;
    top:83.7%;
    width:32%;
    height:3.5%;
    font-size:clamp(14px,3.9vw,21px);
  }
  .sgq-title-ranking{
    left:27%;
    top:88.25%;
    width:46%;
    height:5.7%;
    font-size:clamp(14px,3.9vw,21px);
  }
  .sgq-title-footer{
    left:8%;
    width:84%;
    bottom:max(1.65%, calc(env(safe-area-inset-bottom, 0px) + 8px));
    font-size:clamp(10px,3.15vw,16px);
    gap:1.15em;
  }
  .sgq-title-help{left:74.4%;top:1.45%;width:13.7%;height:3.4%}
}

/* ---------------- Tall mobile: 880 × 1788 ---------------- */
@media(max-width:768px) and (max-aspect-ratio:211/400){
  .sgq-title-stage{
    width:100vw!important;
    aspect-ratio:880 / 1788;
  }
  .sgq-title-start{
    left:15.8%;
    top:59.75%;
    width:67.0%;
    height:5.85%;
  }
  /* This master already contains the “現在の設定” heading. */
  .sgq-title-current-label{display:none!important}
  .sgq-title-rule{
    left:15%;
    top:72.15%;
    width:70%;
    height:2.35%;
    transform:none!important;
    font-size:clamp(11px,3.0vw,17px);
  }
  .sgq-title-settings{
    left:34%;
    top:78.8%;
    width:32%;
    height:3.5%;
    font-size:clamp(14px,3.8vw,21px);
  }
  .sgq-title-ranking{
    left:27%;
    top:84.1%;
    width:46%;
    height:5.7%;
    font-size:clamp(14px,3.8vw,21px);
  }
  .sgq-title-footer{
    bottom:max(1.6%, calc(env(safe-area-inset-bottom, 0px) + 8px));
  }
  .sgq-title-help{left:75.8%;top:1.45%;width:11.5%;height:3.0%}
}

/* ---------------- Super-tall mobile: 850 × 1850 ---------------- */
@media(max-width:768px) and (max-aspect-ratio:119/250){
  .sgq-title-stage{
    width:100vw!important;
    height:100dvh;
    aspect-ratio:auto;
  }
  .sgq-title-picture,
  .sgq-title-picture img{width:100%;height:100%}
  .sgq-title-picture img{object-fit:fill}
  .sgq-title-start{
    left:15.5%;
    top:58.0%;
    width:67.0%;
    height:5.7%;
  }
  .sgq-title-current-label{display:none!important}
  .sgq-title-rule{
    left:14%;
    top:70.75%;
    width:72%;
    height:2.4%;
    transform:none!important;
    font-size:clamp(11px,2.95vw,17px);
  }
  .sgq-title-settings{
    left:34%;
    top:78.4%;
    width:32%;
    height:3.5%;
    font-size:clamp(14px,3.8vw,21px);
  }
  .sgq-title-ranking{
    left:27%;
    top:84.0%;
    width:46%;
    height:5.8%;
    font-size:clamp(14px,3.8vw,21px);
  }
  .sgq-title-footer{
    bottom:max(1.7%, calc(env(safe-area-inset-bottom, 0px) + 10px));
  }
  .sgq-title-help{left:76.6%;top:1.35%;width:11.8%;height:3.0%}
}


/* ========================================================================
   0.6.39 — Rebuilt title-overlay geometry for the four 0.6.38 masters.
   Each master gets its own measured coordinate map. The master artwork stays
   unchanged; all device-sensitive lower controls/footer remain HTML.
   ======================================================================== */

/* Ranking icon is part of the same inline control, always to the LEFT. */
.sgq-title-ranking{
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42em!important;
  white-space:nowrap!important;
}
.sgq-title-ranking-crown{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:1.08em;
  height:.92em;
  flex:0 0 auto;
  color:#c39a31;
  line-height:1;
  text-decoration:none!important;
}
.sgq-title-ranking-crown svg{display:block;width:100%;height:100%;overflow:visible}
.sgq-title-ranking-crown path:first-child{fill:currentColor;stroke:none}
.sgq-title-ranking-crown path:last-child{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sgq-title-settings,.sgq-title-ranking{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}

/* ---------------- PC master: 1448 × 1086 ---------------- */
@media(min-width:769px){
  .sgq-title-stage{
    width:min(calc(100dvh * 1.3333333333),100vw)!important;
    aspect-ratio:1448/1086!important;
  }
  /* Green button measured at about y=798..878. */
  .sgq-title-start{
    left:32.87%!important;
    top:73.48%!important;
    width:34.26%!important;
    height:7.46%!important;
  }
  .sgq-title-current-label{
    display:flex!important;
    left:33.4%!important;
    top:81.8%!important;
    width:33.2%!important;
    height:2.5%!important;
    font-size:clamp(12px,1vw,16px)!important;
  }
  .sgq-title-rule{
    left:31%!important;
    top:84.6%!important;
    width:38%!important;
    height:2.4%!important;
    transform:none!important;
    font-size:clamp(11px,.95vw,15px)!important;
  }
  /* Text sits over the two baked-in underlines in the PC master. */
  .sgq-title-settings{
    left:38.9%!important;
    top:87.2%!important;
    width:7.0%!important;
    height:3.0%!important;
    font-size:clamp(12px,1.05vw,16px)!important;
    text-decoration:none!important;
  }
  .sgq-title-ranking{
    left:49.4%!important;
    top:87.2%!important;
    width:13.0%!important;
    height:3.0%!important;
    font-size:clamp(12px,1.05vw,16px)!important;
    text-decoration:none!important;
  }
  .sgq-title-footer{
    left:30%!important;
    width:40%!important;
    bottom:1.05%!important;
    font-size:clamp(10px,.82vw,13px)!important;
    gap:1.35em!important;
  }
}

/* ---------------- Shared smartphone HTML styling ---------------- */
@media(max-width:768px){
  .sgq-title-stage{width:100vw!important;max-width:none!important}
  .sgq-title-settings,.sgq-title-ranking{
    text-decoration:none!important;
    border-bottom:1px solid rgba(24,42,33,.88)!important;
    padding-bottom:.18em!important;
    height:auto!important;
  }
  .sgq-title-footer{
    left:7%!important;
    width:86%!important;
    font-size:clamp(10px,3vw,15px)!important;
    gap:1.05em!important;
  }
}

/* ---------------- Standard smartphone master: 941 × 1672 ---------------- */
@media(max-width:768px){
  .sgq-title-stage{aspect-ratio:941/1672!important;height:auto!important}
  /* Green button measured at about y=1120..1225. */
  .sgq-title-start{
    left:16.26%!important;
    top:66.99%!important;
    width:67.48%!important;
    height:6.34%!important;
  }
  .sgq-title-current-label{
    display:flex!important;
    left:18%!important;
    top:75.15%!important;
    width:64%!important;
    height:2.35%!important;
    font-size:clamp(13px,3.6vw,19px)!important;
  }
  .sgq-title-rule{
    left:13%!important;
    top:78.15%!important;
    width:74%!important;
    height:2.2%!important;
    transform:none!important;
    font-size:clamp(11px,3vw,16px)!important;
  }
  .sgq-title-settings{
    left:35%!important;
    top:83.7%!important;
    width:30%!important;
    font-size:clamp(14px,3.8vw,20px)!important;
  }
  .sgq-title-ranking{
    left:26%!important;
    top:88.3%!important;
    width:48%!important;
    font-size:clamp(14px,3.8vw,20px)!important;
  }
  .sgq-title-footer{
    bottom:max(2.7%,calc(env(safe-area-inset-bottom,0px) + 18px))!important;
  }
}

/* ---------------- Tall smartphone master: 880 × 1788 ---------------- */
@media(max-width:768px) and (max-aspect-ratio:211/400){
  .sgq-title-stage{aspect-ratio:880/1788!important;height:auto!important}
  /* Green button measured at about y=1092..1192. */
  .sgq-title-start{
    left:16.25%!important;
    top:61.07%!important;
    width:67.27%!important;
    height:5.65%!important;
  }
  /* “現在の設定” is baked into this master. */
  .sgq-title-current-label{display:none!important}
  .sgq-title-rule{
    left:14%!important;
    top:74.15%!important;
    width:72%!important;
    height:2.2%!important;
    transform:none!important;
    font-size:clamp(11px,3vw,16px)!important;
  }
  .sgq-title-settings{
    left:35%!important;
    top:81.0%!important;
    width:30%!important;
    font-size:clamp(14px,3.8vw,20px)!important;
  }
  .sgq-title-ranking{
    left:26%!important;
    top:85.6%!important;
    width:48%!important;
    font-size:clamp(14px,3.8vw,20px)!important;
  }
  .sgq-title-footer{
    bottom:max(2.9%,calc(env(safe-area-inset-bottom,0px) + 18px))!important;
  }
}

/* ---------------- Super-tall smartphone master: 850 × 1850 ---------------- */
@media(max-width:768px) and (max-aspect-ratio:119/250){
  /* Preserve the Pixel fix: bind the full master coordinate system to the
     dynamic viewport so no horizontal/vertical letterbox can reappear. */
  .sgq-title-stage{
    width:100vw!important;
    height:100dvh!important;
    aspect-ratio:auto!important;
  }
  .sgq-title-picture,.sgq-title-picture img{width:100%!important;height:100%!important}
  .sgq-title-picture img{object-fit:fill!important}
  /* Green button measured at about y=1089..1189. */
  .sgq-title-start{
    left:16.24%!important;
    top:58.86%!important;
    width:67.29%!important;
    height:5.46%!important;
  }
  .sgq-title-current-label{display:none!important}
  .sgq-title-rule{
    left:14%!important;
    top:72.35%!important;
    width:72%!important;
    height:2.15%!important;
    transform:none!important;
    font-size:clamp(11px,2.95vw,16px)!important;
  }
  .sgq-title-settings{
    left:35%!important;
    top:79.0%!important;
    width:30%!important;
    font-size:clamp(14px,3.8vw,20px)!important;
  }
  .sgq-title-ranking{
    left:26%!important;
    top:83.8%!important;
    width:48%!important;
    font-size:clamp(14px,3.8vw,20px)!important;
  }
  .sgq-title-footer{
    bottom:max(3.3%,calc(env(safe-area-inset-bottom,0px) + 22px))!important;
  }
}

/* ========================================================================
   0.6.40 — PC title lower-area rebuild.
   Keep all mobile geometry from 0.6.39 unchanged. On the 1448×1086 PC
   master, use the full blank lower area instead of compressing all controls
   immediately under the green CTA.
   ======================================================================== */
@media (min-width:769px){
  /* CTA remains exactly on the green plate. */
  .sgq-title-start{
    left:32.87%!important;
    top:73.48%!important;
    width:34.26%!important;
    height:7.46%!important;
  }

  /* Current-settings heading: comfortably separated from the CTA. */
  .sgq-title-current-label{
    display:flex!important;
    left:35%!important;
    top:82.75%!important;
    width:30%!important;
    height:2.50%!important;
    font-size:clamp(13px,1.8vmin,18px)!important;
    line-height:1!important;
  }
  .sgq-title-current-label::before,
  .sgq-title-current-label::after{
    width:27%!important;
    margin:0 3.8%!important;
  }

  /* Dynamic values get their own full line below the heading. */
  .sgq-title-rule{
    left:30%!important;
    top:85.70%!important;
    width:40%!important;
    height:2.15%!important;
    transform:none!important;
    font-size:clamp(13px,1.7vmin,17px)!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }

  /* The PC master already has two underlines at y≈999px.
     Center each HTML control directly above its corresponding underline. */
  .sgq-title-settings{
    left:37.8%!important;
    top:88.75%!important;
    width:9.0%!important;
    height:2.85%!important;
    font-size:clamp(14px,1.8vmin,18px)!important;
    line-height:1!important;
    text-decoration:none!important;
    border:0!important;
    padding:0!important;
  }
  .sgq-title-ranking{
    left:48.25%!important;
    top:88.75%!important;
    width:15.5%!important;
    height:2.85%!important;
    font-size:clamp(14px,1.8vmin,18px)!important;
    line-height:1!important;
    text-decoration:none!important;
    border:0!important;
    padding:0!important;
    gap:.42em!important;
  }
  .sgq-title-ranking-crown{
    width:1.02em!important;
    height:.88em!important;
  }

  /* Footer sits below the baked-in full-width separator near the bottom. */
  .sgq-title-footer{
    left:31%!important;
    top:96.40%!important;
    bottom:auto!important;
    width:38%!important;
    height:2.55%!important;
    font-size:clamp(10px,1.35vmin,14px)!important;
    line-height:1!important;
    gap:1.35em!important;
  }
}


/* ========================================================================
   0.6.42 — Restore the native WordPress front-end Admin Bar / Toolbar.
   The standalone quiz shell used to suppress it with show_admin_bar(false)
   and CSS. Logged-in users should instead see WordPress's normal toolbar
   (Edit, New, etc.). Because the quiz shell resets html margins for precise
   title-screen placement, re-apply the standard WordPress toolbar clearance.
   ======================================================================== */
html.sgq-app-html.sgq-admin-bar-showing{
  margin-top:32px!important;
}
@media screen and (max-width:782px){
  html.sgq-app-html.sgq-admin-bar-showing{
    margin-top:46px!important;
  }
}


/* ========================================================================
   0.6.46 — User-confirmed PC title geometry + CSS underlines.
   The PC master has NO baked-in underlines. Settings/ranking underlines are
   rendered here and therefore move together with their parent controls.
   ======================================================================== */

/* Settings icon: gear, shown to the LEFT of the label. */
.sgq-title-settings{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.42em!important;
  white-space:nowrap!important;
}
.sgq-title-settings-icon{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:1.02em;
  height:1.02em;
  flex:0 0 auto;
  color:#a9832f;
  line-height:1;
  text-decoration:none!important;
}
.sgq-title-settings-icon svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media (min-width:769px){
  /* Green CTA — unchanged from the current PC placement. */
  .sgq-title-start{
    top:73.48%!important;
  }

  /* Current-settings heading. */
  .sgq-title-current-label{
    top:82.95%!important;
  }

  /* Dynamic current-setting values. */
  .sgq-title-rule{
    top:86.5%!important;
  }

  /* Settings: icon + text + underline move as one control via top. */
  .sgq-title-settings{
    top:91.0%!important;
    position:absolute!important;
    text-decoration:none!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .sgq-title-settings::before{
    content:none!important;
    display:none!important;
  }
  .sgq-title-settings::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    bottom:-4px!important;
    width:69px!important;
    height:2px!important;
    background:#243129!important;
    border:0!important;
    pointer-events:none!important;
  }

  /* Ranking: crown + text + underline move as one control via top. */
  .sgq-title-ranking{
    top:91.0%!important;
    position:absolute!important;
    text-decoration:none!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .sgq-title-ranking::before{
    content:none!important;
    display:none!important;
  }
  .sgq-title-ranking::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    bottom:-3px!important;
    width:123px!important;
    height:2px!important;
    background:#243129!important;
    border:0!important;
    pointer-events:none!important;
  }

  /* Footer — unchanged. */
  .sgq-title-footer{
    top:96.40%!important;
  }
}


/* ========================================================================
   0.6.47 — Stable PC title sizing across browsers/login states.
   Do NOT size the PC master from 100dvh. Wide desktop viewports now use a
   stable width-based stage capped at 1040px, so Chrome/Edge with nearly the
   same viewport width render the same master size even when their available
   viewport heights differ. Overlay typography is sized from the stage itself
   using container-query width units (cqw), not viewport units.
   Mobile geometry remains unchanged.
   ======================================================================== */
@media (min-width:769px){
  body.sgq-app-page.sgq-title-active .sgq-app-main{
    align-items:center!important;
    justify-content:flex-start!important;
  }
  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    width:min(calc(100vw - 8px),1040px)!important;
    max-width:1040px!important;
    height:auto!important;
    aspect-ratio:1448 / 1086!important;
    container-type:inline-size;
  }

  /* Keep the user's confirmed PC geometry; only make type scale with stage. */
  .sgq-title-start{
    top:73.48%!important;
    font-size:clamp(20px,2.50cqw,27px)!important;
  }
  .sgq-title-current-label{
    top:82.95%!important;
    font-size:clamp(13px,1.50cqw,17px)!important;
  }
  .sgq-title-rule{
    top:86.5%!important;
    font-size:clamp(13px,1.45cqw,16px)!important;
  }
  .sgq-title-settings,
  .sgq-title-ranking{
    top:91.0%!important;
    font-size:clamp(13px,1.50cqw,17px)!important;
  }
  .sgq-title-footer{
    top:96.40%!important;
    font-size:clamp(10px,1.15cqw,13px)!important;
  }
}


/* ========================================================================
   0.6.48 — PC title: preserve stable 1040×780 layout, allow vertical scroll.
   0.6.47 correctly removed viewport-height scaling, but older title-shell
   rules still forced overflow:hidden. On shorter desktop viewports that
   clipped the lower controls/footer and made them unreachable. On PC only,
   keep the width-based stage geometry unchanged and let the document grow
   naturally beyond the viewport height.
   ======================================================================== */
@media (min-width:769px){
  html.sgq-app-html{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  html.sgq-app-html body.sgq-app-page.sgq-title-active{
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-shell{
    height:auto!important;
    min-height:100dvh!important;
    overflow:visible!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-main{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
    flex:0 0 auto!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-stage,
  body.sgq-app-page.sgq-title-active .sgq,
  body.sgq-app-page.sgq-title-active .sgq-screen[data-screen="start"]{
    overflow:visible!important;
  }
}


/* ========================================================================
   0.6.49 — PC title: make .sgq-app-main the explicit scroll container.
   Root/document scrolling proved unreliable in the standalone WordPress
   shell. On PC title screen only, keep the stable 1040×780 stage unchanged
   and scroll the main viewport itself whenever available height is smaller.
   ======================================================================== */
html.sgq-app-html{
  --sgq-admin-bar-offset:0px;
}
html.sgq-app-html.sgq-admin-bar-showing{
  --sgq-admin-bar-offset:32px;
}
@media screen and (max-width:782px){
  html.sgq-app-html.sgq-admin-bar-showing{
    --sgq-admin-bar-offset:46px;
  }
}

@media (min-width:769px){
  /* One and only one PC title scroller. */
  html.sgq-app-html,
  html.sgq-app-html body.sgq-app-page.sgq-title-active,
  body.sgq-app-page.sgq-title-active .sgq-app-shell{
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-main{
    display:block!important;
    width:100%!important;
    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    overflow-x:hidden!important;
    overflow-y:scroll!important;
    overscroll-behavior-y:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }

  /* Preserve the 0.6.47 stable geometry; the main element scrolls around it. */
  body.sgq-app-page.sgq-title-active .sgq-app-stage{
    width:100%!important;
    max-width:none!important;
    min-height:780px!important;
    margin:0 auto!important;
    overflow:visible!important;
  }
  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    width:min(calc(100vw - 8px),1040px)!important;
    max-width:1040px!important;
    height:auto!important;
    aspect-ratio:1448 / 1086!important;
    margin:0 auto!important;
  }
}


/* ========================================================================
   0.6.50 — PC title must NEVER clip vertically.
   Treat the complete 1448×1086 title composition as one 4:3 canvas.
   Its rendered width is the largest value that fits BOTH the real viewport
   width and the real available viewport height. Logged-in WordPress toolbar
   clearance is subtracted before sizing. No PC scrolling is used here.
   All overlay typography/decoration uses stage-relative units so image,
   labels, icons, underlines and footer scale together as one composition.
   Mobile rules are intentionally untouched.
   ======================================================================== */
@media (min-width:769px){
  html.sgq-app-html{
    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  html.sgq-app-html body.sgq-app-page.sgq-title-active{
    width:100%!important;
    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-shell{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-main{
    display:flex!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:0!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    scrollbar-gutter:auto!important;
    overscroll-behavior-y:auto!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-stage{
    display:flex!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-width:none!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    /* 4px total safety prevents fractional-pixel clipping at viewport edges. */
    width:min(
      calc(100vw - 4px),
      calc((100dvh - var(--sgq-admin-bar-offset) - 4px) * 1.3333333333)
    )!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:1448 / 1086!important;
    margin:0 auto!important;
    container-type:inline-size!important;
    overflow:hidden!important;
  }

  /* User-confirmed PC geometry, scaled from the stage itself. */
  .sgq-title-start{
    top:73.48%!important;
    font-size:2.50cqw!important;
  }
  .sgq-title-current-label{
    top:82.95%!important;
    font-size:1.50cqw!important;
  }
  .sgq-title-rule{
    top:86.5%!important;
    font-size:1.45cqw!important;
  }
  .sgq-title-settings,
  .sgq-title-ranking{
    top:91.0%!important;
    font-size:1.50cqw!important;
  }
  .sgq-title-footer{
    top:96.40%!important;
    bottom:auto!important;
    height:auto!important;
    font-size:1.15cqw!important;
  }

  /* Scale the confirmed CSS underlines with the entire PC composition. */
  .sgq-title-settings::after{
    bottom:-0.384615cqw!important;
    width:9.23cqw!important;
    height:0.192308cqw!important;
    min-height:1px!important;
  }
  .sgq-title-ranking::after{
    bottom:-0.288462cqw!important;
    width:13.3cqw!important;
    height:0.192308cqw!important;
    min-height:1px!important;
  }
}


/* ========================================================================
   0.6.51 — Keep the fitted PC 4:3 title canvas horizontally centered.
   0.6.50 accidentally overrode the earlier margin:auto with margin:0.
   ======================================================================== */
@media (min-width:769px){
  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* ========================================================================
   0.6.55 — User-confirmed PC title positions / underline geometry.
   Positions:
   start 73.48%, current label 82.95%, rule 86.5%,
   settings/ranking 90.0%, footer 96.40%.
   Underlines:
   settings bottom -0.384615cqw / width 9.23cqw / height 0.192308cqw;
   ranking bottom -0.288462cqw / width 13.3cqw / height 0.192308cqw.
   ======================================================================== */

/* ========================================================================
   0.6.56 — User-confirmed PC title layout override.
   ======================================================================== */
@media (min-width: 769px) {

  .sgq-title-footer {
    left: auto !important;
    right: 2.5% !important;
    transform: none !important;
    width: auto !important;
    text-align: right !important;
    justify-content: flex-end !important;
  }

}
@media (min-width: 769px) {

  /* =========================
     ～問で遊ぶ
     ========================= */
  .sgq-title-start {
    top: 73.48% !important;
  }


  /* =========================
     現在の設定
     ========================= */
  .sgq-title-current-label {
    top: 82.95% !important;
  }


  /* =========================
     10問 ｜ 10秒 ｜ フェイクなし
     ========================= */
  .sgq-title-rule {
    top: 86.5% !important;
  }


  /* =========================
     設定を変更
     歯車・文字・下線をまとめて移動
     ========================= */
  .sgq-title-settings {
    top: 92.0% !important;
  }

  .sgq-title-settings::after {
    /* 文字と下線の距離 */
    bottom: -0.384615cqw !important;

    /* 下線の長さ */
    width: 9.23cqw !important;

    /* 下線の太さ */
    height: 0.192308cqw !important;
    min-height: 1px !important;
  }


  /* =========================
     ランキングを見る
     王冠・文字・下線をまとめて移動
     ========================= */
  .sgq-title-ranking {
    top: 92.0% !important;
  }

  .sgq-title-ranking::after {
    /* 文字と下線の距離 */
    bottom: -0.288462cqw !important;

    /* 下線の長さ */
    width: 13.3cqw !important;

    /* 下線の太さ */
    height: 0.192308cqw !important;
    min-height: 1px !important;
  }


  /* =========================
     フッター
     © Sifr Insight | Privacy | Contact

     縦位置は維持して右端へ寄せる
     ========================= */
  .sgq-title-footer {
    top: 96.40% !important;

    left: auto !important;
    right: 2.5% !important;
    transform: none !important;

    width: auto !important;
    text-align: right !important;
    justify-content: flex-end !important;
    white-space: nowrap !important;
  }

}


/* ========================================================================
   0.6.59 — Settings / Ranking open as modal windows over the current screen.
   ======================================================================== */
.sgq-screen[data-screen="settings"],
.sgq-screen[data-screen="ranking"]{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  width:100%!important;
  height:100dvh!important;
  box-sizing:border-box!important;
  display:grid;
  place-items:center;
  padding:clamp(14px,3vw,28px)!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  background:rgba(18,22,19,.54)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}

.sgq-screen[data-screen="settings"][hidden],
.sgq-screen[data-screen="ranking"][hidden]{
  display:none!important;
}

.sgq-screen[data-screen="settings"] .sgq-panel,
.sgq-screen[data-screen="ranking"] .sgq-panel{
  position:relative;
  width:min(92vw,720px)!important;
  max-height:calc(100dvh - clamp(28px,6vw,56px));
  margin:auto!important;
  overflow:auto!important;
  overscroll-behavior:contain;
  background:rgba(255,253,247,.98)!important;
  border:1px solid rgba(126,99,50,.28)!important;
  border-radius:20px!important;
  box-shadow:0 28px 90px rgba(0,0,0,.30)!important;
}

.sgq-screen[data-screen="settings"] .sgq-screen-head,
.sgq-screen[data-screen="ranking"] .sgq-screen-head{
  position:sticky;
  top:0;
  z-index:3;
  margin:-1px -1px 28px!important;
  padding:20px 24px 16px!important;
  background:rgba(255,253,247,.96);
  border-bottom:1px solid rgba(126,99,50,.16);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.sgq-screen[data-screen="settings"] .sgq-back,
.sgq-screen[data-screen="ranking"] .sgq-back{
  justify-self:start;
}

body.sgq-overlay-open{
  overflow:hidden!important;
}

@media (max-width:768px){
  .sgq-screen[data-screen="settings"],
  .sgq-screen[data-screen="ranking"]{
    align-items:center!important;
    padding:12px!important;
  }

  .sgq-screen[data-screen="settings"] .sgq-panel,
  .sgq-screen[data-screen="ranking"] .sgq-panel{
    width:min(100%,620px)!important;
    max-height:calc(100dvh - 24px)!important;
    border-radius:16px!important;
  }

  .sgq-screen[data-screen="settings"] .sgq-screen-head,
  .sgq-screen[data-screen="ranking"] .sgq-screen-head{
    padding:17px 16px 14px!important;
    margin:-1px -1px 22px!important;
  }
}


/* ========================================================================
   0.6.60 — Mobile footer system-gesture safety.
   Keep © Sifr Insight / Privacy / Contact comfortably above:
   - iPhone Home Indicator / safe area
   - Android / Pixel gesture navigation bar when safe-area env() is zero
   The largest of:
     5.2% of the title stage,
     safe-area-inset-bottom + 24px,
     44px absolute fallback
   is used as the footer's bottom clearance.
   PC geometry is intentionally untouched.
   ======================================================================== */
@media (max-width:768px){
  .sgq-title-footer{
    bottom:max(
      5.2%,
      calc(env(safe-area-inset-bottom, 0px) + 24px),
      44px
    )!important;
  }
}

/* ========================================================================
   0.6.61 — Short smartphone footer override (iPhone SE class).
   Keep the 0.6.60 mobile footer safety rule for normal smartphones.
   For short/narrow screens such as 375×667, use the user-confirmed
   lower footer position below.
   ======================================================================== */
@media (max-width:390px) and (max-height:700px){
  .sgq-title-footer{
    bottom:max(
      4.2%,
      calc(env(safe-area-inset-bottom, 0px) + 0px),
      0px
    )!important;
  }
}


/* ========================================================================
   0.6.62 — Mobile settings/ranking underlines match PC.
   Only underline rendering is changed on smartphones.
   Positions and all other title-screen geometry remain unchanged.
   ======================================================================== */
@media (max-width:768px){

  .sgq-title-settings,
  .sgq-title-ranking{
    position:absolute!important;
    text-decoration:none!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    padding-bottom:0!important;
    overflow:visible!important;
  }

  .sgq-title-settings::before,
  .sgq-title-ranking::before{
    content:none!important;
    display:none!important;
  }

  .sgq-title-settings::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    bottom:-0.384615cqw!important;
    width:23.23cqw!important;
    height:0.192308cqw!important;
    min-height:1px!important;
    background:#243129!important;
    border:0!important;
    pointer-events:none!important;
  }

  .sgq-title-ranking::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    bottom:-0.288462cqw!important;
    width:34.0cqw!important;
    height:0.192308cqw!important;
    min-height:1px!important;
    background:#243129!important;
    border:0!important;
    pointer-events:none!important;
  }
}


/* 0.6.63
   Mobile underline widths only:
   settings = 23.23cqw
   ranking  = 34.0cqw
*/


/* ========================================================================
   0.6.64 — Remove title action underlines on PC and mobile.
   "設定を変更" / "ランキングを見る" keep text and icons only.
   ======================================================================== */
.sgq-title-settings,
.sgq-title-ranking{
  text-decoration:none!important;
  border-bottom:0!important;
  box-shadow:none!important;
}

.sgq-title-settings::after,
.sgq-title-ranking::after{
  content:none!important;
  display:none!important;
  width:0!important;
  height:0!important;
  background:none!important;
  border:0!important;
}


/* 0.6.65
   Title ranking label arrow removed.
   No layout/CSS behavior change from 0.6.64.
*/


/* ========================================================================
   0.6.66 — Wide PC master: 2048 × 926.
   The former 1448 × 1086 composition is centered within the new wide
   canvas. PC overlay x/width values are remapped into that centered area.
   Mobile layout is untouched.
   ======================================================================== */
@media (min-width:769px){

  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    width:min(
      calc(100vw - 4px),
      calc((100dvh - var(--sgq-admin-bar-offset) - 4px) * 2.57934508816)
    )!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:2048 / 794!important;
    margin-left:auto!important;
    margin-right:auto!important;
    container-type:inline-size!important;
    overflow:hidden!important;
  }

  /* Green CTA */
  .sgq-title-start{
    left:38.967578125%!important;
    width:20.61796875%!important;
    top:73.48%!important;
    font-size:1.5071614583cqw!important;
  }

  /* Current settings heading */
  .sgq-title-current-label{
    left:39.1484375%!important;
    width:21.703125%!important;
    top:82.95%!important;
    font-size:0.904296875cqw!important;
  }

  /* Dynamic current settings */
  .sgq-title-rule{
    left:38.5455729167%!important;
    width:22.9088541667%!important;
    top:86.5%!important;
    font-size:0.8741536458cqw!important;
  }

  /* Settings button */
  .sgq-title-settings{
    left:42.2833333333%!important;
    width:6.330078125%!important;
    top:92.0%!important;
    font-size:0.904296875cqw!important;
  }

  /* Ranking button */
  .sgq-title-ranking{
    left:50.6028645833%!important;
    width:9.04296875%!important;
    top:92.0%!important;
    font-size:0.904296875cqw!important;
  }

  /* Help hotspot follows the centered original composition. */
  .sgq-title-help{
    left:71.4016927083%!important;
    width:3.3760416667%!important;
  }

  /* Sound button follows the centered original composition. */
  .sgq-title-sound{
    left:76.1879714857%!important;
    width:1.8319089349%!important;
  }

  /* Footer remains intentionally aligned to the wide canvas right edge. */
  .sgq-title-footer{
    top:96.40%!important;
    left:auto!important;
    right:2.5%!important;
    width:auto!important;
    transform:none!important;
    justify-content:flex-end!important;
    text-align:right!important;
    font-size:0.6932942708cqw!important;
  }
}


/* 0.6.68
   PC master replaced with user-provided 2048x794 image.
   Only the PC stage aspect ratio/fit was changed.
   All overlay positions remain exactly as in 0.6.66.
*/


/* ========================================================================
   0.6.69 — PC title: fill available viewport height with no top/bottom gap.
   Preserve the 2048:794 master ratio. If the resulting width exceeds the
   viewport, the centered parent clips the left/right edges symmetrically.
   Overlay geometry remains unchanged from 0.6.68.
   ======================================================================== */
@media (min-width:769px){

  body.sgq-app-page.sgq-title-active .sgq-app-main,
  body.sgq-app-page.sgq-title-active .sgq-app-stage{
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-stage{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    flex:0 0 auto!important;

    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    width:calc(
      (100dvh - var(--sgq-admin-bar-offset))
      * 2048 / 794
    )!important;

    min-width:0!important;
    max-width:none!important;
    max-height:none!important;

    aspect-ratio:2048 / 794!important;

    margin:0!important;
    container-type:inline-size!important;
    overflow:hidden!important;
  }
}


/* ========================================================================
   0.6.70 — PC wide master: lock the actual master center to viewport center.
   Keep full available height and symmetric left/right cropping.
   ======================================================================== */
@media (min-width:769px){

  body.sgq-app-page.sgq-title-active .sgq-app-main,
  body.sgq-app-page.sgq-title-active .sgq-app-stage{
    position:relative!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-stage{
    display:block!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    position:absolute!important;

    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;

    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    width:calc(
      (100dvh - var(--sgq-admin-bar-offset))
      * 2048 / 794
    )!important;

    min-width:0!important;
    max-width:none!important;
    max-height:none!important;

    aspect-ratio:2048 / 794!important;
    margin:0!important;
    flex:none!important;

    container-type:inline-size!important;
    overflow:hidden!important;
  }
}


/* ========================================================================
   0.6.73 — PC wide master viewport fix.
   - The PC title viewport itself is fixed to the usable browser viewport.
   - The 2048×794 stage fills that height from top to bottom.
   - Excess width is clipped symmetrically.
   - Footer right alignment is compensated for the horizontal crop.
   Mobile is untouched.
   ======================================================================== */
@media (min-width:769px){

  html.sgq-app-html,
  html.sgq-app-html body.sgq-app-page.sgq-title-active,
  body.sgq-app-page.sgq-title-active .sgq-app-shell{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-main{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--sgq-admin-bar-offset)!important;
    bottom:0!important;

    width:100vw!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;

    padding:0!important;
    margin:0!important;

    display:block!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-stage{
    position:absolute!important;
    inset:0!important;

    width:100vw!important;
    height:100%!important;
    min-height:0!important;
    max-width:none!important;

    padding:0!important;
    margin:0!important;

    display:block!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    position:absolute!important;

    left:50%!important;
    top:0!important;
    transform:translateX(-50%)!important;

    height:100%!important;
    width:calc(
      (100dvh - var(--sgq-admin-bar-offset))
      * 2048 / 794
    )!important;

    min-width:0!important;
    max-width:none!important;
    min-height:0!important;
    max-height:none!important;

    aspect-ratio:2048 / 794!important;
    margin:0!important;
    flex:none!important;

    container-type:inline-size!important;
    overflow:hidden!important;
  }

  /* Keep the HTML footer inside the visible viewport even when the wide
     master is being clipped on both sides. */
  .sgq-title-footer{
    right:calc(
      max(0px, (100% - 100vw) / 2)
      + 2.5vw
    )!important;
  }
}

/* ========================================================================
   0.6.73 — PC wide master reset.
   Rebuild only the PC title viewport so the 2048×794 master fills the usable
   viewport height, stays truly centered, crops only left/right symmetrically,
   and never drops below the visible area or disappears entirely.
   Mobile rules remain unchanged.
   ======================================================================== */
@media (min-width:769px){
  html.sgq-app-html,
  html.sgq-app-html body.sgq-app-page.sgq-title-active{
    width:100%!important;
    height:auto!important;
    min-height:100%!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-shell{
    width:100%!important;
    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    min-height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-main{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:block!important;
    width:100%!important;
    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    min-height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    max-height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-app-stage,
  body.sgq-app-page.sgq-title-active .sgq,
  body.sgq-app-page.sgq-title-active .sgq-screen[data-screen="start"]{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  body.sgq-app-page.sgq-title-active .sgq-title-stage{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%)!important;
    width:calc((100dvh - var(--sgq-admin-bar-offset)) * 2048 / 794)!important;
    height:calc(100dvh - var(--sgq-admin-bar-offset))!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:2048 / 794!important;
    margin:0!important;
    container-type:inline-size!important;
    overflow:hidden!important;
  }

  /* Keep the footer visually inside the clipped viewport, not at the hidden
     far-right edge of the oversized stage. */
  .sgq-title-footer{
    top:96.40%!important;
    bottom:auto!important;
    left:auto!important;
    right:calc(max(0px, (100% - 100vw) / 2) + 2.5vw)!important;
    width:auto!important;
    transform:none!important;
    justify-content:flex-end!important;
    text-align:right!important;
  }
}


/* ========================================================================
   0.6.74 — PC sound button position only.
   Place the sound control immediately to the right of the baked-in
   「遊び方」 label with a small visual gap. Mobile is untouched.
   ======================================================================== */
@media (min-width:769px){
  .sgq-title-sound{
    left:71.80%!important;
    top:1.441621%!important;
    width:1.8319089349%!important;
  }
}


/* 0.6.75
   Removed the in-game "fresh retry" control that appeared after a wrong answer.
   The result-screen "もう一度挑戦" action remains unchanged.
*/


/* ========================================================================
   0.6.76 — Mobile quiz AdSense.
   Displayed only below the quiz content on smartphones.
   ======================================================================== */
.sgq-mobile-quiz-ad{
  display:none!important;
}

@media (max-width:768px){
  .sgq-screen[data-screen="quiz"] .sgq-mobile-quiz-ad{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:18px auto calc(24px + env(safe-area-inset-bottom, 0px))!important;
    padding:0 2px!important;
    text-align:center!important;
    overflow:visible!important;
  }

  .sgq-mobile-quiz-ad-label{
    margin:0 0 7px!important;
    padding:0!important;
    color:rgba(34,43,38,.48)!important;
    font-size:10px!important;
    font-weight:400!important;
    line-height:1.3!important;
    letter-spacing:.05em!important;
    text-align:center!important;
  }

  .sgq-mobile-quiz-ad .adsbygoogle{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
  }
}


/* ========================================================================
   0.6.77 — Mobile AdSense horizontal-isolation fix.
   Responsive AdSense can create an internal width wider than its parent.
   Keep that overflow from changing the quiz/page inline layout or horizontal
   scroll range. The quiz body remains centered; only the ad is clipped to
   the existing quiz content width.
   ======================================================================== */
@media (max-width:768px){
  html.sgq-app-html body.sgq-app-page.sgq-screen-quiz,
  body.sgq-app-page.sgq-screen-quiz .sgq-app-shell,
  body.sgq-app-page.sgq-screen-quiz .sgq-app-main,
  body.sgq-app-page.sgq-screen-quiz .sgq-app-stage{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

  body.sgq-app-page.sgq-screen-quiz .sgq-app-stage,
  body.sgq-app-page.sgq-screen-quiz .sgq,
  body.sgq-app-page.sgq-screen-quiz .sgq-screen[data-screen="quiz"]{
    min-width:0!important;
  }

  body.sgq-app-page.sgq-screen-quiz .sgq{
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .sgq-screen[data-screen="quiz"] .sgq-mobile-quiz-ad{
    position:relative!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:18px 0 calc(24px + env(safe-area-inset-bottom, 0px))!important;
    padding:0!important;
    overflow:hidden!important;
    contain:layout paint inline-size!important;
  }

  .sgq-mobile-quiz-ad .adsbygoogle{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:hidden!important;
  }

  .sgq-mobile-quiz-ad iframe{
    max-width:100%!important;
  }
}

/* ========================================================================
   0.6.79 — PC quiz AdSense: actual-right-space detection.
   JavaScript adds .is-visible only when the real free space to the right of
   the quiz is at least 348px (= 48px gap + 300px ad).
   ======================================================================== */
.sgq-pc-quiz-ad{
  display:none!important;
}

@media (min-width:769px){
  .sgq-screen[data-screen="quiz"]{
    overflow:visible!important;
  }

  .sgq-question-stage{
    position:relative!important;
    overflow:visible!important;
  }

  .sgq-pc-quiz-ad.is-visible{
    display:block!important;
    position:absolute!important;
    left:calc(100% + 48px)!important;
    top:0!important;
    width:300px!important;
    min-width:300px!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    z-index:3!important;
    contain:layout paint!important;
  }

  .sgq-pc-quiz-ad-label{
    margin:0 0 8px!important;
    padding:0!important;
    color:rgba(34,43,38,.44)!important;
    font-size:11px!important;
    font-weight:400!important;
    line-height:1.3!important;
    letter-spacing:.05em!important;
    text-align:center!important;
  }

  .sgq-pc-quiz-ad .adsbygoogle{
    display:inline-block!important;
    width:300px!important;
    height:250px!important;
    margin:0 auto!important;
    vertical-align:top!important;
  }
}


/* ========================================================================
   0.6.80 — PC AdSense zero-width initialization fix.
   The <ins class="adsbygoogle"> is now created only after this fixed-size slot
   is visible. Keep the wrapper out of size containment so AdSense can measure
   the real 300x250 box normally.
   ======================================================================== */
@media (min-width:769px){
  .sgq-pc-quiz-ad.is-visible{
    contain:none!important;
    overflow:visible!important;
  }

  .sgq-pc-quiz-ad-slot{
    display:block!important;
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
    height:250px!important;
    min-height:250px!important;
    max-height:250px!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:visible!important;
  }

  .sgq-pc-quiz-ad-slot > ins.adsbygoogle{
    display:inline-block!important;
    width:300px!important;
    min-width:300px!important;
    max-width:300px!important;
    height:250px!important;
    min-height:250px!important;
    max-height:250px!important;
    margin:0!important;
    padding:0!important;
  }
}


/* ========================================================================
   0.6.81 — PC title CTA horizontal centering only.
   The green CTA plate in the 2048px-wide master is centered at x=1024.
   Keep the existing CTA width (20.61796875%) and move its left edge so the
   HTML "～問で遊ぶ" text is centered on the master:
   50% - (20.61796875% / 2) = 39.691015625%.
   Mobile is untouched.
   ======================================================================== */
@media (min-width:769px){
  .sgq-title-start{
    left:39.691015625%!important;
    text-align:center!important;
  }
}


/* ========================================================================
   0.6.82 — PC title ranking horizontal position only.
   ======================================================================== */
@media (min-width:769px){
  .sgq-title-ranking{
    left:48.6028645833%!important;
  }
}


/* 0.6.83
   Mobile Back/edge-swipe behavior is implemented with the History API in JS.
   No visual styling or ad behavior is changed in this version.
*/


/* ========================================================================
   0.6.84 — SEO/user content below the completed game viewport.
   The existing game shell and all screen geometry remain unchanged.
   Only the document root is allowed to continue below the game shell so the
   server-rendered explanatory content can be reached by normal scrolling.
   ======================================================================== */
html.sgq-app-html{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
html.sgq-app-html::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}

/* Override old title-screen document clipping only. The game shell/main keep
   their existing 100dvh geometry and overflow rules, so the first viewport is
   unchanged while the document can continue beneath it. */
html.sgq-app-html body.sgq-app-page.sgq-seo-enabled.sgq-title-active{
  height:auto!important;
  min-height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:visible!important;
}

body.sgq-app-page.sgq-seo-enabled.sgq-title-active .sgq-app-shell{
  flex:none!important;
}

.sgq-seo-content{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  width:100%;
  margin:0;
  padding:64px 24px 80px;
  background:#fffdfa;
  color:#26312b;
  border-top:1px solid rgba(37,75,63,.10);
}

.sgq-seo-content *{
  box-sizing:border-box;
}

.sgq-seo-content-inner{
  width:min(100%,880px);
  margin:0 auto;
}

.sgq-seo-content h2{
  margin:0 0 20px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:#1d2a24!important;
  font-size:28px!important;
  font-weight:760!important;
  line-height:1.4!important;
  letter-spacing:-.02em!important;
}

.sgq-seo-content p{
  margin:0 0 18px;
  color:#4e5b54;
  font-size:15px;
  line-height:1.95;
  letter-spacing:.01em;
}

.sgq-seo-content a{
  color:#254b3f!important;
  text-decoration:underline!important;
  text-underline-offset:3px;
  font-weight:650;
}

.sgq-seo-faq{
  margin-top:54px;
  padding-top:46px;
  border-top:1px solid rgba(37,75,63,.12);
}

.sgq-seo-faq-item{
  margin:0;
  padding:22px 0;
  border-bottom:1px solid rgba(37,75,63,.10);
}

.sgq-seo-faq-item h3{
  margin:0 0 8px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:#26312b!important;
  font-size:17px!important;
  font-weight:720!important;
  line-height:1.55!important;
}

.sgq-seo-faq-item p{
  margin:0;
}

@media (max-width:768px){
  .sgq-seo-content{
    padding:44px 20px 60px;
  }

  .sgq-seo-content h2{
    margin-bottom:16px!important;
    font-size:23px!important;
  }

  .sgq-seo-content p{
    margin-bottom:16px;
    font-size:14px;
    line-height:1.9;
  }

  .sgq-seo-faq{
    margin-top:42px;
    padding-top:36px;
  }

  .sgq-seo-faq-item{
    padding:19px 0;
  }

  .sgq-seo-faq-item h3{
    font-size:16px!important;
  }
}


/* ========================================================================
   0.6.85 — Title header link hotspots.
   Add a real <a> over the baked-in SIFR INSIGHT brand on PC and all three
   mobile masters. Correct the PC "遊び方" hotspot to the actual 2048x794
   master coordinates. The artwork itself is unchanged.
   ======================================================================== */

/* PC master: 2048 x 794.
   SIFR INSIGHT visible text bbox is about x=523..617, y=25..36.
   Give the link a modest padded hit area around that exact label.
   "遊び方" visible text bbox is about x=1411..1450, y=24..36. */
@media (min-width:769px){
  .sgq-title-brand{
    left:25.146484375%!important;   /* x=515 */
    top:2.0151133501%!important;    /* y=16 */
    width:5.37109375%!important;    /* 110px */
    height:3.9042821159%!important; /* 31px */
  }

  .sgq-title-help{
    left:68.505859375%!important;   /* x=1403 */
    top:2.0151133501%!important;    /* y=16 */
    width:2.685546875%!important;   /* 55px */
    height:3.9042821159%!important; /* 31px */
  }
}

/* Standard mobile master: 941 x 1672.
   SIFR INSIGHT visible text bbox is about x=47..248, y=39..59. */
@media (max-width:768px){
  .sgq-title-brand{
    left:4.0382571732%!important;   /* x=38 */
    top:1.7942583732%!important;    /* y=30 */
    width:23.2731137088%!important; /* 219px */
    height:2.3923444976%!important; /* 40px */
  }
}

/* Tall mobile master: 880 x 1788.
   SIFR INSIGHT visible text bbox is about x=48..230, y=46..64. */
@media (max-width:768px) and (max-aspect-ratio:211/400){
  .sgq-title-brand{
    left:4.3181818182%!important;   /* x=38 */
    top:1.9574944072%!important;    /* y=35 */
    width:22.9545454545%!important; /* 202px */
    height:2.2371364653%!important; /* 40px */
  }
}

/* Super-tall mobile master: 850 x 1850.
   SIFR INSIGHT visible text bbox is about x=49..229, y=46..66. */
@media (max-width:768px) and (max-aspect-ratio:119/250){
  .sgq-title-brand{
    left:4.5882352941%!important;   /* x=39 */
    top:1.8918918919%!important;    /* y=35 */
    width:23.5294117647%!important; /* 200px */
    height:2.2162162162%!important; /* 41px */
  }
}


/* 0.6.86
   Replaced only the 880x1788 tall-mobile title master.
   Layout, hotspots and game behavior are unchanged.
*/


/* ========================================================================
   0.6.87 — Tall / super-tall mobile sound-button position only.
   ======================================================================== */
@media (max-width:768px) and (max-aspect-ratio:211/400){
  .sgq-title-sound{
    left:91%!important;
    top:1.67%!important;
    width:6%!important;
  }
}

@media (max-width:768px) and (max-aspect-ratio:119/250){
  .sgq-title-sound{
    left:91%!important;
    top:1.57%!important;
    width:6%!important;
  }
}


/* ========================================================================
   0.6.88 — SEO content is visible only on the actual title screen.
   The SEO HTML stays in the initial DOM at all times, but it is not rendered
   while playing, on the result screen, or while settings/ranking overlays
   are open.
   ======================================================================== */
.sgq-seo-content{
  display:none!important;
}

body.sgq-app-page.sgq-title-active:not(.sgq-overlay-open) > .sgq-seo-content{
  display:block!important;
}


/* 0.6.94 — smoother CSS-driven deblur. */
.sgq [data-scene-image]{
  backface-visibility:hidden;
  transform:translateZ(0);
}


/* ========================================================================
   0.6.95 — jitter-free reveal.
   The clear image never changes blur radius. A second, fixed-blur copy sits
   above it and only its opacity fades to zero.
   ======================================================================== */
.sgq .sgq-image-card > [data-scene-image]{
  position:relative;
  z-index:1;
  filter:none!important;
  will-change:auto!important;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.sgq .sgq-image-card > .sgq-scene-blur-layer{
  position:absolute!important;
  z-index:2;
  inset:0;
  display:block;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  object-fit:cover;
  filter:blur(32px)!important;
  opacity:1;
  pointer-events:none;
  will-change:opacity;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.sgq .sgq-image-card > .sgq-blur-progress{
  z-index:3;
}


/* ========================================================================
   0.6.96 — staged fixed-blur reveal.
   Keep every blur radius static and cross-fade only between adjacent fixed
   levels, so the clear image is not mixed in from the beginning.
   ======================================================================== */
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--weak{
  z-index:2;
  filter:blur(12px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--medium{
  z-index:3;
  filter:blur(26px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--strong{
  z-index:4;
  filter:blur(42px)!important;
}
.sgq .sgq-image-card > .sgq-blur-progress{
  z-index:5;
}

/* ========================================================================
   0.6.97 — edge-clamped fixed blur layers.
   Blur canvases include replicated edge pixels outside the visible 16:9 card,
   so filter sampling never falls into transparency at the card boundary.
   ======================================================================== */
.sgq .sgq-image-card > canvas.sgq-scene-blur-layer{
  object-fit:initial!important;
  max-width:none!important;
  max-height:none!important;
}


/* ========================================================================
   0.6.98 — stronger staged fixed blur.
   Keep the edge-clamped Canvas method from 0.6.97, but start from a much
   stronger fixed blur so the scene is not identifiable at question start.
   ======================================================================== */
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--weak{
  z-index:2;
  filter:blur(14px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--medium{
  z-index:3;
  filter:blur(30px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--strong{
  z-index:4;
  filter:blur(56px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--max{
  z-index:5;
  filter:blur(96px)!important;
}
.sgq .sgq-image-card > .sgq-blur-progress{
  z-index:6;
}


/* ========================================================================
   0.6.99 — gentler start, smoother final reveal.
   Reduce the initial blur and shorten its hold, then add finer low-blur
   layers so the transition into the clear image does not appear abrupt.
   ======================================================================== */
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--weak{
  z-index:2;
  filter:blur(4px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--faint{
  z-index:3;
  filter:blur(9px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--soft{
  z-index:4;
  filter:blur(18px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--medium{
  z-index:5;
  filter:blur(30px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--strong{
  z-index:6;
  filter:blur(48px)!important;
}
.sgq .sgq-image-card > .sgq-scene-blur-layer.sgq-scene-blur-layer--max{
  z-index:7;
  filter:blur(72px)!important;
}
.sgq .sgq-image-card > .sgq-blur-progress{
  z-index:8;
}


/* ========================================================================
   0.6.100 — 5-second adaptive fixed-blur reveal.
   The two adaptive Canvas layers receive their fixed blur radii inline while
   hidden; only opacity is animated while a layer is visible. Existing edge
   extension and all 10-second styling remain unchanged.
   ======================================================================== */