/* Sifr Ghibli Date Quiz 0.1.5
   Visual system aligned to Sifr Ghibli Scene Quiz.
   The start screen is still provisional; game/settings/ranking/result use
   the same typography, spacing, colors, controls and feedback language. */

html.sgdq-app-html{
  --sgdq-admin-bar-offset:0px;
  --sgdq-page:#f7f2e4;
  --sgdq-surface:#fffdf7;
  --sgdq-surface-soft:#fbf8ef;
  --sgdq-ink:#151b18;
  --sgdq-muted:#6f7772;
  --sgdq-line:#dfe3de;
  --sgdq-line-strong:#cbd2cc;
  --sgdq-accent:#254b3f;
  --sgdq-accent-2:#315f50;
  --sgdq-accent-soft:#eaf1ed;
  --sgdq-gold:#9b7439;
  --sgdq-danger:#a7443f;
  --sgdq-danger-soft:#f8e9e7;
  --sgdq-success:#255d43;
  --sgdq-success-soft:#e7f1eb;
  --sgdq-shadow:0 24px 70px rgba(25,36,30,.08);
  width:100%;
  min-height:100%;
}
html.sgdq-app-html.sgdq-admin-bar-showing{--sgdq-admin-bar-offset:32px}
@media(max-width:782px){
  html.sgdq-app-html.sgdq-admin-bar-showing{--sgdq-admin-bar-offset:46px}
}

body.sgdq-app-page{
  margin:0!important;
  padding:0!important;
  min-height:100vh;
  min-height:100dvh;
  background:
    radial-gradient(900px 480px at 50% -180px,rgba(255,255,255,.68),rgba(255,255,255,0) 72%),
    linear-gradient(180deg,#faf6ea 0%,var(--sgdq-page) 100%)!important;
  color:var(--sgdq-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;
  overflow:hidden;
}
body.sgdq-app-page *{box-sizing:border-box}
body.sgdq-app-page a{color:inherit}
body.sgdq-app-page button:not(.sgdq-title-start):not(.sgdq-title-settings):not(.sgdq-title-ranking):not(.sgdq-title-sound),
body.sgdq-app-page input,
body.sgdq-app-page select{font:inherit}
body.sgdq-app-page #wpadminbar{z-index:99999}

.sgdq-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
}

.sgdq-app-main{
  min-height:calc(100dvh - var(--sgdq-admin-bar-offset));
  height:calc(100dvh - var(--sgdq-admin-bar-offset));
  display:flex;
  align-items:center;
  padding:clamp(18px,4vh,42px) 20px;
  overflow:hidden;
}
.sgdq{
  position:relative;
  width:min(100%,840px);
  max-height:100%;
  margin:0 auto;
  color:var(--sgdq-ink);
  font-family:inherit;
  line-height:1.65;
}
.sgdq *{box-sizing:border-box}
.sgdq button{appearance:none;-webkit-appearance:none;touch-action:manipulation}
.sgdq-screen[hidden],.sgdq [hidden],.sgdq-overlay[hidden],.sgdq-modal[hidden]{display:none!important}

/* ---------- Shared controls: Scene Quiz baseline ---------- */
.sgdq-primary,.sgdq-secondary,.sgdq-danger,.sgdq-text-button,
.sgdq-tabs button,.sgdq-choice,.sgdq-next,.sgdq-gamebar-exit,
.sgdq-close,.sgdq-nickname button{
  cursor:pointer;
  transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease
}
.sgdq button:focus-visible,.sgdq input:focus-visible{
  outline:3px solid rgba(37,75,63,.22);
  outline-offset:3px
}
.sgdq-primary{
  display:block;
  width:min(100%,380px);
  margin:0 auto;
  padding:14px 20px;
  border:0;
  border-radius:12px;
  background:var(--sgdq-accent);
  color:#fff;
  font-weight:760;
}
.sgdq-primary:hover{background:#1f4036;transform:translateY(-1px)}
.sgdq-secondary{
  border:0;border-radius:12px;padding:11px 16px;
  background:#eef1ee;color:var(--sgdq-ink);font-weight:700
}
.sgdq-secondary:hover{background:#e5eae6}
.sgdq-danger{
  border:0;border-radius:12px;padding:11px 16px;
  background:var(--sgdq-danger);color:#fff;font-weight:700
}
.sgdq-kicker{
  margin:0 0 20px;
  font-size:11px;
  font-weight:760;
  letter-spacing:.22em;
  color:var(--sgdq-accent);
  text-transform:uppercase
}

/* ---------- Provisional start: same design language, not final artwork ---------- */
.sgdq-screen-start{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-height:100%;
  overflow:auto
}
.sgdq-start-card{
  width:min(100%,800px);
  margin:0 auto;
  padding:clamp(38px,6vw,70px) 24px;
  text-align:center;
  background:transparent;
  border:0;
  box-shadow:none
}
.sgdq-start-title{
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  color:var(--sgdq-ink)!important;
  font-family:inherit!important;
  font-size:clamp(40px,6vw,64px)!important;
  font-weight:760!important;
  line-height:1.08!important;
  letter-spacing:-.045em!important;
  text-wrap:balance
}
.sgdq-start-copy{
  max-width:580px;
  margin:24px auto 28px;
  color:var(--sgdq-muted);
  font-size:15px;
  line-height:1.9;
  letter-spacing:.01em
}
.sgdq-current{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:31px;
  margin:0 auto 18px;
  padding:5px 11px;
  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;
  white-space:normal
}
.sgdq-start-button{min-height:58px;font-size:16px;letter-spacing:.02em}
.sgdq-start-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-top:24px
}
.sgdq-text-button{
  border:0;
  background:transparent;
  color:#58655e;
  padding:6px 4px;
  font-size:13px;
  font-weight:650;
  text-decoration:none
}
.sgdq-text-button:hover{color:var(--sgdq-accent)}
.sgdq-start-links .sgdq-text-button + .sgdq-text-button{
  position:relative;
  margin-left:1px
}
.sgdq-start-links .sgdq-text-button + .sgdq-text-button:before{
  content:"";
  position:absolute;
  left:-9px;
  top:50%;
  width:1px;
  height:14px;
  transform:translateY(-50%);
  background:#cfd5d0
}
.sgdq-help-link{
  display:inline-block;
  margin-top:14px;
  color:var(--sgdq-muted);
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:3px
}

/* ---------- Game screen ---------- */
.sgdq-screen-quiz{width:100%;height:100%;overflow:visible}
.sgdq-game-shell{
  width:100%;
  height:100%;
  margin:auto;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.sgdq-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
}
.sgdq-progress-wrap{justify-self:center;text-align:center}

.sgdq-gamebar-exit{
  justify-self:start;
  border:0;
  background:transparent;
  color:#6a736e;
  padding:5px 0;
  font-size:12px;
  font-weight:650
}
.sgdq-progress-wrap{justify-self:center;text-align:center}
.sgdq-counter{font-weight:760;letter-spacing:.03em}
.sgdq-progress{height:3px;margin:0 2px 12px;background:#e0e4e0;border-radius:999px;overflow:hidden}
.sgdq-progress span{display:block;height:100%;width:0;background:var(--sgdq-accent);transition:width .22s ease}
.sgdq-timer{
  justify-self:end;
  color:#39423d;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  font-weight:700
}
.sgdq-timer small{font-size:1em;margin-left:2px}
.sgdq-question-stage{width:100%;min-height:0}
.sgdq-screen-quiz .sgdq-game-shell{gap:0}
.sgdq-question-visual{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  min-height:0;
  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);
  display:flex;
  align-items:center;
  justify-content:center;
  background-size:cover;
  background-position:center
}
.sgdq-date-prompt{
  width:100%;
  margin:0;
  padding:22px;
  border-top:1px solid rgba(37,75,63,.13);
  border-bottom:1px solid rgba(37,75,63,.13);
  background:rgba(255,255,255,.93);
  color:var(--sgdq-ink);
  font-family:inherit;
  font-size:clamp(28px,5.2vw,54px);
  font-weight:760;
  line-height:1.25;
  letter-spacing:-.025em;
  text-align:center;
  font-variant-numeric:tabular-nums
}
.sgdq-question-band{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:12px 16px;
  background:rgba(20,29,24,.68);
  color:#fff;
  text-align:center;
  font-size:clamp(18px,3vw,30px);
  font-weight:760;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px)
}
.sgdq-answer-row{position:relative;width:100%;margin:0 auto}
.sgdq-choices{display:flex;flex:1;flex-direction:column;gap:9px;padding:14px 2px 22px}
.sgdq-choice{width:100%;min-height:50px;border:1px solid var(--sgdq-line);border-radius:12px;background:rgba(255,255,255,.86);color:var(--sgdq-ink);padding:12px 16px;text-align:left;font-weight:680;box-shadow:0 4px 14px rgba(25,36,30,.025);display:flex;align-items:center;gap:8px}
.sgdq-choice:hover:not(:disabled){
  border-color:#abbab1;
  background:#fff;
  transform:translateY(-1px)
}
.sgdq-choice:disabled{cursor:default;opacity:1;transform:none}
.sgdq-choice.is-correct{background:var(--sgdq-success-soft)!important;border-color:#82ad96!important;color:#214f3a!important}
.sgdq-choice.is-wrong{background:var(--sgdq-danger-soft)!important;border-color:#d18c87!important;color:#7d2925!important}
.sgdq-choice.is-correct::before,.sgdq-choice.is-wrong::before{display:inline-block;flex:0 0 auto;font-weight:760;font-size:1.05em;line-height:1}
.sgdq-choice.is-correct::before{content:'✓'}
.sgdq-choice.is-wrong::before{content:'×'}
.sgdq-next{margin:0 auto 18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:220px;min-height:54px;padding:0 18px;border:0;border-radius:12px;background:var(--sgdq-accent);color:#fff;font-size:16px;line-height:1;font-weight:700}
.sgdq-next:hover{background:#1f4036}
.sgdq-next-chevron{display:none}
.sgdq-next-label{display:inline}
.sgdq-swipe-hint{
  margin:9px 0 0;
  text-align:center;
  color:var(--sgdq-muted);
  font-size:12px
}

/* ---------- Result ---------- */
.sgdq-screen-result{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  max-height:100%;
  overflow:auto
}
.sgdq-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(--sgdq-shadow);
  text-align:center
}
.sgdq-result-card h2{
  margin:0 0 20px;
  color:var(--sgdq-ink);
  font-family:inherit;
  font-size:25px;
  font-weight:760
}
.sgdq-result-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
}
.sgdq-result-time{
  margin:10px 0 24px;
  color:var(--sgdq-muted);
  font-size:20px;
  font-variant-numeric:tabular-nums
}
.sgdq-rank-message{
  min-height:1.5em;
  margin:0 auto 20px;
  color:#77551c;
  font-weight:720
}
.sgdq-nickname{
  max-width:520px;
  margin:0 auto 22px;
  padding:17px;
  border-radius:13px;
  background:#f7f8f6;
  text-align:left
}
.sgdq-nickname label{display:block;margin-bottom:8px;font-size:13px;font-weight:720}
.sgdq-nickname>div{display:flex;gap:8px}
.sgdq-nickname input{
  min-width:0;
  flex:1;
  border:1px solid var(--sgdq-line);
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  color:var(--sgdq-ink)
}
.sgdq-nickname button{
  border:0;
  border-radius:12px;
  background:var(--sgdq-gold);
  color:#fff;
  padding:9px 16px;
  font-weight:720
}
.sgdq-result-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  margin-top:18px
}
.sgdq-result-actions .sgdq-primary{margin:0}
.sgdq-result-actions .sgdq-secondary{width:min(100%,380px);padding:12px 16px}

/* ---------- Settings / ranking overlays ---------- */
.sgdq-overlay{
  position:fixed;
  inset:var(--sgdq-admin-bar-offset) 0 0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px
}
.sgdq-overlay-backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,21,18,.54);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px)
}
.sgdq-panel{
  position:relative;
  z-index:1;
  width:min(100%,720px);
  max-height:calc(100dvh - var(--sgdq-admin-bar-offset) - 36px);
  overflow:auto;
  padding:clamp(28px,5vw,48px);
  background:rgba(255,255,255,.97);
  border:1px solid rgba(37,75,63,.10);
  border-radius:22px;
  box-shadow:var(--sgdq-shadow)
}
.sgdq-panel>h2{
  margin:0 0 24px;
  color:var(--sgdq-ink);
  font-family:inherit;
  font-size:25px;
  line-height:1.3;
  font-weight:760;
  letter-spacing:-.02em
}
.sgdq-close{
  position:absolute;
  right:18px;
  top:16px;
  border:0;
  background:transparent;
  color:var(--sgdq-muted);
  font-size:13px
}
.sgdq-setting-group{margin:18px 0}
.sgdq-setting-group h3{
  margin:0 0 8px;
  color:#3e4742;
  font-size:13px;
  font-weight:760
}
.sgdq-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:9px
}
.sgdq-tabs button{
  flex:1 1 100px;
  min-height:44px;
  border:1px solid var(--sgdq-line);
  border-radius:11px;
  padding:10px 12px;
  background:#fafaf8;
  color:var(--sgdq-ink);
  font-weight:650
}
.sgdq-tabs button:hover{border-color:#b8c4bd}
.sgdq-tabs button.is-active{
  background:var(--sgdq-accent);
  border-color:var(--sgdq-accent);
  color:#fff
}
.sgdq-ranking-controls{display:grid;gap:10px}
.sgdq-ranking-list{
  min-height:160px;
  margin:18px 0 24px;
  overflow-x:auto
}
.sgdq-ranking-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px
}
.sgdq-ranking-table th,.sgdq-ranking-table td{
  padding:12px 10px;
  border-bottom:1px solid var(--sgdq-line);
  text-align:left
}
.sgdq-ranking-table th{
  color:var(--sgdq-muted);
  font-size:11px;
  letter-spacing:.04em
}
.sgdq-ranking-table th:first-child,.sgdq-ranking-table td:first-child{
  width:72px;text-align:center
}
.sgdq-ranking-table th:nth-child(2),.sgdq-ranking-table td:nth-child(2){
  width:110px;text-align:right;font-variant-numeric:tabular-nums
}

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

.sgdq-data-error{
  margin:18px auto 0;
  max-width:520px;
  padding:13px 16px;
  border:1px solid #d18c87;
  border-radius:12px;
  background:var(--sgdq-danger-soft);
  color:#7d2925;
  font-size:13px;
  line-height:1.7;
  text-align:center
}
.sgdq-mobile-only{display:none!important}

/* ---------- Responsive: Scene Quiz baseline ---------- */
@media(max-width:768px){
  .sgdq-app-main{align-items:flex-start;padding:14px 14px 20px}
  .sgdq{width:100%;height:100%}
  .sgdq-pc-only{display:none!important}
  .sgdq-mobile-only{display:block!important}

  .sgdq-start-card{padding:42px 8px 38px}
  .sgdq-kicker{margin-bottom:16px;font-size:10px;letter-spacing:.18em}
  .sgdq-start-title{font-size:clamp(30px,8vw,42px)!important;line-height:1.1!important}
  .sgdq-start-copy{margin:20px auto 27px;font-size:13px;line-height:1.8}
  .sgdq-start-button{width:100%;max-width:380px;min-height:54px;font-size:15px}
  .sgdq-current{font-size:10px}
  .sgdq-start-links{margin-top:22px;gap:13px}
  .sgdq-text-button{font-size:12px}

  .sgdq-game-shell{justify-content:flex-start}
  .sgdq-gamebar{padding:0 2px 9px}
  .sgdq-progress{margin-bottom:10px}
  .sgdq-question-visual{border-radius:14px;max-height:50dvh}
  .sgdq-date-prompt{font-size:clamp(26px,8vw,42px);padding:18px 8px}
  .sgdq-question-band{font-size:clamp(17px,5vw,24px);padding:9px 10px}
  .sgdq-choices{padding:11px 0 18px;gap:8px}
  .sgdq-choice{min-height:48px;padding:11px 13px;font-size:14px;border-radius:11px}

  .sgdq-result-card,.sgdq-panel{padding:26px 18px;border-radius:18px}
  .sgdq-panel>h2{font-size:21px}
  .sgdq-tabs{gap:7px}
  .sgdq-tabs button{min-height:42px;font-size:13px}
  .sgdq-nickname>div{flex-direction:column}
  .sgdq-nickname button{width:100%}
}

@media(max-width:380px){
  .sgdq-start-title{font-size:29px!important}
  .sgdq-start-card{padding-left:2px;padding-right:2px}
}

@media(max-height:700px) and (min-width:769px){
  .sgdq-app-main{padding-top:8px;padding-bottom:8px}
  .sgdq-gamebar{min-height:40px;padding-bottom:7px}
  .sgdq-question-visual{max-height:52vh}
  .sgdq-choices{gap:7px;padding:10px 2px 14px}
  .sgdq-choice{min-height:44px;padding:8px 13px;font-size:14px}
}

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


/* ========================================================================
   0.1.7 — Next button: single visibility source + unclipped scene-quiz layout.
   JS toggles only .is-visible. The quiz screen itself is overflow:visible,
   matching Sifr Ghibli Scene Quiz, so the wide-PC side button is not clipped.
   ======================================================================== */
.sgdq .sgdq-next{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.sgdq .sgdq-next.is-visible{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* Normal PC: conventional button below the choices. */
@media (min-width:769px) and (max-width:1159px){
  .sgdq .sgdq-answer-row .sgdq-next.is-visible{
    position:static!important;
    width:min(100%,280px)!important;
    min-width:0!important;
    height:auto!important;
    min-height:52px!important;
    margin:0 auto 18px!important;
    padding:0 18px!important;
  }
  .sgdq .sgdq-answer-row .sgdq-next.is-visible .sgdq-next-label{display:inline!important}
  .sgdq .sgdq-answer-row .sgdq-next.is-visible .sgdq-next-chevron{display:none!important}
}

/* Wide PC: same side-chevron placement as the scene quiz. */
@media (min-width:1160px){
  .sgdq .sgdq-answer-row .sgdq-next.is-visible{
    position:absolute!important;
    left:calc(100% + 14px)!important;
    top:14px!important;
    width:56px!important;
    min-width:56px!important;
    height:calc(100% - 36px)!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
  }
  .sgdq .sgdq-answer-row .sgdq-next.is-visible .sgdq-next-label{display:none!important}
  .sgdq .sgdq-answer-row .sgdq-next.is-visible .sgdq-next-chevron{
    display:block!important;
    width:20px;
    height:40px;
  }
  .sgdq .sgdq-answer-row .sgdq-next.is-visible .sgdq-next-chevron svg{
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
  }
  .sgdq .sgdq-answer-row .sgdq-next.is-visible .sgdq-next-chevron path{
    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
}


/* 0.1.8 — Sound system parity with Sifr Ghibli Scene Quiz. */
.sgdq-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(--sgdq-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
}
.sgdq-sound-toggle:hover{background:#fff;transform:translateY(-1px)}
.sgdq-sound-toggle.is-muted{opacity:.68}
.sgdq-sound-glyph{display:block;width:19px;height:19px}
.sgdq-sound-glyph svg{display:block;width:100%;height:100%;overflow:visible}
.sgdq-sound-glyph path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sgdq-speaker-body{fill:currentColor!important;stroke:none!important}
.sgdq-speaker-muted{display:none}
.sgdq-sound-toggle.is-muted .sgdq-speaker-waves{display:none}
.sgdq-sound-toggle.is-muted .sgdq-speaker-muted{display:block}
/* Scene Quiz exposes the control on the title screen, not in the active quiz HUD. */
.sgdq[data-screen="quiz"] > .sgdq-sound-toggle,
.sgdq[data-screen="result"] > .sgdq-sound-toggle{display:none!important}
@media(max-width:768px){.sgdq-sound-toggle{top:0;right:0;width:38px;height:38px;font-size:15px}}


/* ========================================================================
   0.1.9 — Final master-art title screen.
   Four user-approved masters are displayed unchanged; all interactive and
   changing content is HTML layered over the artwork, matching Scene Quiz.
   ======================================================================== */

body.sgdq-state-start .sgdq-app-main{
  width:100vw!important;
  height:calc(100dvh - var(--sgdq-admin-bar-offset))!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  display:block!important;
  overflow:hidden!important;
}
body.sgdq-state-start .sgdq{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden!important;
}
body.sgdq-state-start .sgdq-screen-start{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  overflow:hidden!important;
}
.sgdq-title-stage{
  position:relative;
  container-type:inline-size;
  overflow:hidden;
  color:#152e25;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
}
.sgdq-title-picture,.sgdq-title-picture img{
  position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;
}
.sgdq-title-picture img{object-fit:fill;user-select:none;-webkit-user-drag:none}
.sgdq-title-start,.sgdq-title-settings,.sgdq-title-ranking,.sgdq-title-sound{
  position:absolute;z-index:5;border:0;background:transparent;color:#182f27;cursor:pointer;
}
.sgdq-title-start{
  display:flex;align-items:center;justify-content:center;padding:0;color:#fff;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,.26);
}
.sgdq-title-start span{display:block;white-space:nowrap}
.sgdq-title-current-label,.sgdq-title-rule,.sgdq-title-footer{
  position:absolute;z-index:5;display:flex;align-items:center;justify-content:center;text-align:center;
}
.sgdq-title-current-label{font-weight:500;white-space:nowrap}
.sgdq-title-current-label::before,.sgdq-title-current-label::after{
  content:"";height:1px;background:#aa8127;opacity:.82;flex:1 1 auto;
}
.sgdq-title-current-label span{padding:0 .9em}
.sgdq-title-rule{white-space:nowrap;font-weight:500;line-height:1.4}
.sgdq-title-settings,.sgdq-title-ranking{
  display:inline-flex;align-items:center;justify-content:center;gap:.45em;padding:.15em .2em;
  font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-weight:500;white-space:nowrap;
}
.sgdq-title-settings-icon,.sgdq-title-ranking-crown{display:inline-grid;place-items:center;color:#bc8e1e;flex:0 0 auto}
.sgdq-title-settings-icon svg{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sgdq-title-ranking-crown svg{width:1.15em;height:.9em;fill:currentColor;stroke:currentColor;stroke-width:1}
.sgdq-title-hotspot{position:absolute;z-index:6;display:block;background:transparent}
.sgdq-title-header-visible{display:none}
.sgdq-mobile-header,.sgdq-mobile-header-right{display:contents}
.sgdq-title-footer{gap:1.1em;color:#423c31;white-space:nowrap}
.sgdq-title-footer a{text-decoration:none}
.sgdq-title-sound{
  display:grid;place-items:center;aspect-ratio:1;border:1px solid rgba(37,75,63,.28);border-radius:50%;
  background:rgba(255,252,241,.58);color:#1f463a;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.sgdq-title-sound:hover{background:rgba(255,252,241,.82)}
.sgdq-title-sound.is-muted{opacity:.62}
.sgdq-title-sound .sgdq-sound-glyph{width:48%;height:48%}
.sgdq-title-sound .sgdq-sound-glyph svg{display:block;width:100%;height:100%;overflow:visible}
.sgdq-title-sound .sgdq-sound-glyph path{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sgdq-title-sound .sgdq-speaker-body{fill:currentColor!important;stroke:none!important}
.sgdq-title-sound .sgdq-speaker-muted{display:none}
.sgdq-title-sound.is-muted .sgdq-speaker-waves{display:none}
.sgdq-title-sound.is-muted .sgdq-speaker-muted{display:block}
.sgdq-title-stage .sgdq-data-error{
  position:absolute;left:50%;bottom:1.5%;transform:translateX(-50%);z-index:20;width:min(84%,520px);margin:0;
}

/* PC master: 2048 × 682. Fill available height and crop only the sides. */
@media(min-width:769px){
  .sgdq-title-stage{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    height:calc(100dvh - var(--sgdq-admin-bar-offset));
    width:calc((100dvh - var(--sgdq-admin-bar-offset)) * 2048 / 682);
    aspect-ratio:2048/682;
  }
  .sgdq-title-start{left:39.6973%;top:74.9334%;width:20.5078%;height:9.3842%;font-size:1.35cqw!important}
  .sgdq-title-current-label{display:flex;left:42.2%;top:86.2%;width:15.6%;height:2.2%;font-size:.86cqw}
  .sgdq-title-rule{left:34%;top:89.8%;width:32%;height:2.2%;font-size:.68cqw}
  .sgdq-title-settings{left:42.0%;top:94.5%;width:8.6%;height:2.2%;font-size:.72cqw}
  .sgdq-title-ranking{left:47.8%;top:94.5%;width:10.6%;height:2.2%;font-size:.72cqw}
  .sgdq-title-footer{left:auto;right:calc((100% - 100vw)/2 + 1.5vw);top:96.0%;width:auto;height:2.7%;font-size:.57cqw;justify-content:flex-end;text-align:right}
  .sgdq-title-brand{left:22.75%;top:1.6%;width:6.3%;height:4.3%}
  .sgdq-title-help{left:73.55%;top:1.55%;width:4.3%;height:4.4%}
  .sgdq-title-sound{left:76.55%;top:2.0%;width:1.38%;padding:0}
}

/* Shared mobile master geometry.
   0.1.20: the stage is always edge-to-edge (100vw) and exactly fills the
   currently available dynamic viewport height. The master artwork is chosen
   from standard / tall / super-tall using the *visible viewport aspect ratio*,
   so only a very small vertical correction is needed and no side gutters are
   created on real Android Chrome devices such as Pixel 7. */
@media(max-width:768px){
  body.sgdq-state-start .sgdq-app-main{height:calc(100dvh - var(--sgdq-admin-bar-offset))!important}
  .sgdq-title-stage{
    width:100vw!important;
    max-width:none!important;
    height:100%!important;
    aspect-ratio:auto!important;
    margin:0!important;
  }
  .sgdq-title-start{font-size:clamp(20px,5.3vw,30px)}
  .sgdq-title-rule{font-size:clamp(11px,3.05vw,15px)}
  body.sgdq-app-page .sgdq-title-settings,body.sgdq-app-page .sgdq-title-ranking{font-size:clamp(15px,4.0vw,20px)!important}
  body.sgdq-app-page .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-settings,
  body.sgdq-app-page .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-ranking{font-size:clamp(15px,4.0vw,20px)!important}
  /* 0.1.25: Set the visible text spans directly so WordPress/theme button font shorthands cannot override the standard-mobile label size. */
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-settings > .sgdq-title-settings-text,
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-ranking > .sgdq-title-ranking-text{
    font-size:clamp(15px,4.0vw,20px)!important;
    font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
  }
  .sgdq-title-footer{font-size:clamp(10px,3.0vw,14px)}

  .sgdq-mobile-header{
    position:absolute;
    z-index:8;
    left:6.2%;
    right:6.2%;
    top:2.05%;
    height:3.4%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    pointer-events:none;
  }
  .sgdq-mobile-header-right{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.1vw;
    height:100%;
    pointer-events:auto;
  }
  .sgdq-mobile-header .sgdq-title-brand,
  .sgdq-mobile-header .sgdq-title-help{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    display:flex;
    align-items:center;
    height:100%;
    color:#263b31;
    text-decoration:none;
    font-family:"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif;
    font-weight:600;
    line-height:1;
    white-space:nowrap;
    pointer-events:auto;
  }
  .sgdq-mobile-header .sgdq-title-brand{
    width:32vw;
    font-size:clamp(12px,3.3vw,16px);
    letter-spacing:.035em;
    justify-content:flex-start;
  }
  .sgdq-mobile-header .sgdq-title-help{
    width:14vw;
    font-size:clamp(12px,3.3vw,16px);
    justify-content:center;
  }
  .sgdq-mobile-header .sgdq-title-sound{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:6.2vw;
    height:auto;
    padding:0;
    flex:0 0 6.2vw;
    pointer-events:auto;
  }
  .sgdq-title-header-visible{display:block}
}

/* Standard mobile master: 941 × 1672. */
@media(max-width:768px){
  .sgdq-title-stage[data-mobile-master="standard"]{aspect-ratio:941/1672}
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-mobile-header{top:2.05%}
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-start{left:17.322%;top:71.890%;width:64.506%;height:8.134%}
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-current-label{display:none}
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-rule{left:9%;top:86.8%;width:82%;height:2.5%}
  /* 0.1.27: Standard mobile only — tune the side-by-side Settings / Ranking positions. */
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-settings{left:10%;top:91.3%;width:34%;height:3.2%}
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-ranking{left:45%;top:91.3%;width:40%;height:3.2%}
  .sgdq-title-stage[data-mobile-master="standard"] .sgdq-title-footer{left:10%;top:96.5%;width:80%;height:2.2%}
}

/* Tall mobile master: 880 × 1788. */
@media(max-width:768px){
  .sgdq-title-stage[data-mobile-master="tall"]{aspect-ratio:880/1788}
  .sgdq-title-stage[data-mobile-master="tall"] .sgdq-mobile-header{top:.90%}
  .sgdq-title-stage[data-mobile-master="tall"] .sgdq-title-start{left:21.364%;top:62.640%;width:56.591%;height:5.481%}
  .sgdq-title-stage[data-mobile-master="tall"] .sgdq-title-current-label{display:none}
  .sgdq-title-stage[data-mobile-master="tall"] .sgdq-title-rule{left:10%;top:74.0%;width:80%;height:2.4%}
  .sgdq-title-stage[data-mobile-master="tall"] .sgdq-title-settings{left:28%;top:80.0%;width:44%;height:3.1%}
  .sgdq-title-stage[data-mobile-master="tall"] .sgdq-title-ranking{left:23%;top:84.7%;width:54%;height:3.1%}
  .sgdq-title-stage[data-mobile-master="tall"] .sgdq-title-footer{left:10%;top:94%;width:80%;height:2.2%}
}

/* Super-tall mobile master: 850 × 1850.
   In 0.1.20 the shared mobile stage controls final viewport geometry; this
   selector only identifies the overlay coordinates for this master. */
@media(max-width:768px){
  .sgdq-title-stage[data-mobile-master="super-tall"]{height:auto;aspect-ratio:850/1850}
  .sgdq-title-stage[data-mobile-master="super-tall"] .sgdq-mobile-header{top:2.05%}
  .sgdq-title-stage[data-mobile-master="super-tall"] .sgdq-title-start{left:20.588%;top:67.405%;width:58.471%;height:6.270%}
  .sgdq-title-stage[data-mobile-master="super-tall"] .sgdq-title-current-label{display:flex;left:22%;top:76.3%;width:56%;height:2.4%;font-size:clamp(13px,3.6vw,18px)}
  .sgdq-title-stage[data-mobile-master="super-tall"] .sgdq-title-rule{left:9%;top:79.3%;width:82%;height:2.3%}
  .sgdq-title-stage[data-mobile-master="super-tall"] .sgdq-title-settings{left:28%;top:84.2%;width:44%;height:3.0%}
  .sgdq-title-stage[data-mobile-master="super-tall"] .sgdq-title-ranking{left:23%;top:88.6%;width:54%;height:3.0%}
  .sgdq-title-stage[data-mobile-master="super-tall"] .sgdq-title-footer{left:10%;top:95%;width:80%;height:2.2%}
}



/* ---------- SEO content below the full-screen start view (0.1.30) ----------
   Keep the game/title viewport unchanged. Only the start state can scroll
   down to this static, crawlable explanatory/FAQ content. */
body.sgdq-app-page.sgdq-state-start{
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
body.sgdq-app-page:not(.sgdq-state-start) .sgdq-seo-content{
  display:none!important;
}
.sgdq-seo-content{
  position:relative;
  z-index:2;
  width:100%;
  margin:0;
  padding:clamp(44px,7vw,76px) 20px clamp(60px,9vw,96px);
  background:#fffdf7;
  color:#26332e;
  border-top:1px solid rgba(77,91,82,.16);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK JP","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9;
}
.sgdq-seo-inner{
  width:min(100%,860px);
  margin:0 auto;
}
.sgdq-seo-content h2{
  margin:0 0 22px;
  padding:0 0 12px;
  color:#254b3f;
  font-family:"Yu Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-size:clamp(24px,3.2vw,34px);
  font-weight:600;
  line-height:1.45;
  border-bottom:1px solid rgba(155,116,57,.32);
}
.sgdq-seo-content h2:not(:first-child){margin-top:54px}
.sgdq-seo-content p{
  margin:0 0 18px;
  font-size:15px;
}
.sgdq-seo-help-link{
  color:#254b3f!important;
  font-weight:700;
  text-decoration:underline!important;
  text-underline-offset:4px;
}
.sgdq-seo-faq{
  display:grid;
  gap:0;
  border-top:1px solid rgba(77,91,82,.13);
}
.sgdq-seo-faq-item{
  padding:22px 0 20px;
  border-bottom:1px solid rgba(77,91,82,.13);
}
.sgdq-seo-faq-item h3{
  margin:0 0 9px;
  color:#263b31;
  font-size:17px;
  font-weight:750;
  line-height:1.6;
}
.sgdq-seo-faq-item p{margin:0;color:#4d5752}
@media(max-width:768px){
  .sgdq-seo-content{padding:38px 20px 64px}
  .sgdq-seo-content h2{font-size:24px;margin-bottom:18px}
  .sgdq-seo-content h2:not(:first-child){margin-top:44px}
  .sgdq-seo-content p{font-size:14px;line-height:1.9}
  .sgdq-seo-faq-item{padding:19px 0 17px}
  .sgdq-seo-faq-item h3{font-size:16px}
}


/* ========================================================================
   0.1.35 — AdSense parity with Sifr Ghibli Scene Quiz 0.6.92.
   Mobile: responsive unit below quiz content, initialized only after the quiz
   is visible. Desktop: 300x250 right rail only when real right-side free
   space is at least 348px (= 48px gap + 300px ad width).
   ======================================================================== */
.sgdq-mobile-quiz-ad{
  display:none!important;
}

@media (max-width:768px){
  /* The Date Quiz app uses a fixed-height main viewport. Allow only that main
     quiz viewport to scroll vertically so the below-quiz ad is reachable,
     while preserving the fixed title screen and keeping SEO content outside
     the game viewport. */
  body.sgdq-app-page.sgdq-state-quiz .sgdq-app-main{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }

  html.sgdq-app-html body.sgdq-app-page.sgdq-state-quiz,
  body.sgdq-app-page.sgdq-state-quiz .sgdq-app-main{
    max-width:100vw!important;
    overflow-x:hidden!important;
  }

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

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

  .sgdq-screen[data-screen="quiz"] .sgdq-mobile-quiz-ad{
    display:block!important;
    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;
    text-align:center!important;
    overflow:hidden!important;
    contain:layout paint inline-size!important;
  }

  .sgdq-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;
  }

  .sgdq-mobile-quiz-ad .adsbygoogle{
    display:block!important;
    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;
  }

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

.sgdq-pc-quiz-ad{
  display:none!important;
}

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

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

  .sgdq-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:none!important;
    overflow:visible!important;
  }

  .sgdq-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;
  }

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

  .sgdq-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;
  }

  .sgdq-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;
  }
}