:root{
  --bg:#f6f0df;
  --panel:#fffaf0;
  --panel2:#fff3cc;
  --line:rgba(18,34,52,.18);
  --text:#132234;
  --muted:#66717e;
  --accent:#ff4d2e;
  --accent2:#087f5b;
  --danger:#d92d20;
  --map-base:#d7d0bf;
  --iwaki:#00a66a;
  --blue:#1b57d8;
  --yellow:#ffd744;
  --ink:#132234;
}
*{box-sizing:border-box}
html,body{
  margin:0;
  min-height:100%;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,215,68,.55) 0 4%,transparent 4.5%),
    radial-gradient(circle at 88% 20%,rgba(27,87,216,.12) 0 7%,transparent 7.5%),
    linear-gradient(#f7f1df,#efe7d1);
  color:var(--text);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
}
body{min-height:100vh;overflow-x:hidden}
button{font:inherit}
.app{width:min(100%,760px);min-height:100vh;margin:auto;padding:18px 18px 30px;display:flex;flex-direction:column}
.screen{display:none;flex:1}
.screen.active{display:flex;flex-direction:column}
.brand{padding:8vh 0 16px}
.eyebrow{font-size:12px;letter-spacing:.22em;color:var(--accent2);font-weight:800}
h1{font-size:clamp(38px,9vw,74px);line-height:.94;margin:13px 0 22px;letter-spacing:-.055em}
h1 span{display:block;color:var(--accent)}
.lead{font-size:16px;line-height:1.85;color:var(--muted);max-width:600px}
.base-unit{margin:30px 0 36px;display:flex;align-items:baseline;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}
.base-unit strong{font-size:32px}
.base-unit span{color:var(--muted);font-size:13px}
.primary{width:100%;border:0;border-radius:18px;background:var(--accent);color:#03140d;font-weight:900;padding:18px 22px;font-size:18px;box-shadow:0 12px 40px rgba(32,211,138,.2);cursor:pointer;transition:.18s}
.primary:active{transform:scale(.985)}
.smallnote{text-align:center;color:var(--muted);font-size:12px;margin-top:14px}

/* Quiz */
.topbar{display:flex;align-items:center;gap:12px;padding:8px 0 18px}
.progress-wrap{flex:1}
.progress-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:7px}
.progress-track{height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden}
#progressBar{height:100%;background:var(--accent);border-radius:99px;transition:width .35s ease}
.quiz-card{margin:auto 0;min-height:470px;display:flex;flex-direction:column;justify-content:center}
.quiz-card.enter{animation:cardIn .38s cubic-bezier(.2,.8,.2,1)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.category{display:inline-flex;align-self:flex-start;padding:7px 11px;border:1px solid var(--line);border-radius:99px;color:var(--accent2);font-size:12px;font-weight:800;letter-spacing:.04em;margin-bottom:22px}
.question-prefix{font-size:18px;color:var(--muted);font-weight:700}
.target-name{font-size:clamp(35px,8vw,62px);line-height:1.08;font-weight:950;letter-spacing:-.04em;margin:8px 0 10px;overflow-wrap:anywhere}
.question-suffix{font-size:24px;font-weight:900;margin-bottom:36px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice{min-height:94px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));color:var(--text);font-size:20px;font-weight:900;padding:16px;cursor:pointer;transition:.17s;overflow-wrap:anywhere}
.choice:hover{border-color:rgba(32,211,138,.6);transform:translateY(-2px)}
.choice:active{transform:scale(.985)}
.choice.long{font-size:16px}

/* Result */
#resultScreen{justify-content:center;padding:18px 0}
.result-panel{position:relative;text-align:center}
.result-panel.pop{animation:resultPop .52s cubic-bezier(.16,1,.3,1)}
@keyframes resultPop{0%{opacity:0;transform:scale(.9) translateY(18px)}100%{opacity:1;transform:none}}
.judge{display:inline-block;font-size:clamp(35px,8vw,64px);font-weight:1000;letter-spacing:-.05em;margin-bottom:8px}
.judge.correct{color:var(--accent)}
.judge.wrong{color:#ffc760}
.answer-title{font-size:clamp(22px,6vw,36px);font-weight:900;overflow-wrap:anywhere}
.answer-area{color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.comparison{font-size:13px;font-weight:800;color:var(--muted);margin-top:3px}
.map-amount{margin:24px 0 12px;min-height:260px;display:flex;flex-direction:column;justify-content:center}
.map-row{display:flex;align-items:flex-end;justify-content:center;gap:5px;flex-wrap:wrap;max-width:680px;margin:0 auto;min-height:150px}
.map-row[data-count="1"] .iwaki-map{width:160px;height:175px}
.map-row[data-count="2"] .iwaki-map,.map-row[data-count="3"] .iwaki-map{width:128px;height:140px}
.map-row[data-count="4"] .iwaki-map,.map-row[data-count="5"] .iwaki-map,.map-row[data-count="6"] .iwaki-map{width:94px;height:106px}
.iwaki-map{width:78px;height:88px;position:relative;flex:0 0 auto;filter:drop-shadow(0 8px 15px rgba(0,0,0,.2));opacity:0;transform:translateY(18px) scale(.92);animation:mapEnter .45s cubic-bezier(.2,.9,.2,1) forwards;animation-delay:var(--delay)}
.iwaki-map.mini{width:72px;height:81px}
@keyframes mapEnter{to{opacity:1;transform:none}}
.map-layer{position:absolute;inset:0}
.map-layer svg{width:100%;height:100%;display:block}
.map-base path{fill:var(--map-base)}
.map-fill{clip-path:inset(100% 0 0 0);animation:fillUp 1s cubic-bezier(.15,.9,.25,1) forwards;animation-delay:calc(var(--delay) + 140ms)}
.map-fill path{fill:var(--iwaki)}
@keyframes fillUp{to{clip-path:inset(var(--fill-top) 0 0 0)}}
.map-outline path{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.7;vector-effect:non-scaling-stroke}
.map-row.mega{flex-wrap:nowrap;min-height:110px;overflow:hidden;mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent 100%)}
.map-row.mega .iwaki-map:nth-child(5),.map-row.mega .iwaki-map:nth-child(6){opacity:.55}
.map-dots{font-size:58px;color:var(--muted);align-self:center;margin-left:4px}
.ratio-label{margin-top:15px;display:flex;justify-content:center;align-items:baseline;gap:8px;font-weight:900}
.ratio-label strong{font-size:clamp(55px,13vw,96px);letter-spacing:-.07em;font-variant-numeric:tabular-nums}
.ratio-label span{font-size:18px;color:var(--accent2);letter-spacing:.08em}
.ratio-label .times{font-size:42px;color:var(--muted)}
.next-wrap{margin-top:10px}

/* Finish */
.modal{position:fixed;inset:0;background:rgba(2,7,12,.78);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:22px;z-index:20}
.modal.show{display:flex}
.modal-card{width:min(100%,520px);background:#101e31;border:1px solid var(--line);border-radius:28px;padding:30px 24px;box-shadow:0 30px 100px rgba(0,0,0,.5);text-align:center;animation:resultPop .45s cubic-bezier(.16,1,.3,1)}
.modal-card .label{color:var(--muted);font-size:13px}
.final-score{font-size:72px;font-weight:1000;letter-spacing:-.08em;color:var(--accent);margin:6px 0 2px}
.final-message{font-size:17px;font-weight:800;margin:8px 0 24px}
.secondary{width:100%;margin-top:10px;border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--muted);padding:14px;cursor:pointer}

@media (max-width:520px){
  .app{padding:14px 14px 22px}
  .quiz-card{min-height:440px}
  .choices{grid-template-columns:1fr}
  .choice{min-height:74px}
  .map-amount{min-height:230px}
  .map-row[data-count="4"] .iwaki-map,.map-row[data-count="5"] .iwaki-map,.map-row[data-count="6"] .iwaki-map{width:78px;height:88px}
  .map-row[data-count="7"] .iwaki-map,.map-row[data-count="8"] .iwaki-map,.map-row[data-count="9"] .iwaki-map,.map-row[data-count="10"] .iwaki-map{width:60px;height:68px}
  .map-row.mega .iwaki-map{width:54px;height:62px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* Answer explainer */
.about-card{
  margin:18px auto 18px;
  width:min(100%,620px);
  text-align:left;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035));
  border-radius:20px;
  padding:17px 18px 15px;
  opacity:0;
  transform:translateY(12px);
}
.about-card.reveal{animation:aboutReveal .5s .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes aboutReveal{to{opacity:1;transform:none}}
.about-label{
  display:inline-flex;
  color:var(--accent2);
  font-size:12px;
  font-weight:950;
  letter-spacing:.06em;
  margin-bottom:8px;
}
.about-card p{
  margin:0;
  color:#e6eef8;
  font-size:14px;
  font-weight:650;
  line-height:1.75;
}
.source-link{
  display:inline-block;
  margin-top:10px;
  color:var(--muted);
  font-size:11px;
  text-decoration:none;
  border-bottom:1px solid rgba(159,176,197,.35);
}
.source-link:hover{color:var(--accent2)}
@media(max-width:520px){
  #resultScreen{justify-content:flex-start;padding-top:18px}
  .about-card{margin-top:10px;padding:14px 15px}
  .about-card p{font-size:13px;line-height:1.7}
}


/* Iwaki-scale punchline */
.punchline{
  width:min(100%,620px);
  margin:4px auto 8px;
  padding:11px 15px;
  border-radius:14px;
  background:rgba(32,211,138,.10);
  border:1px solid rgba(32,211,138,.28);
  color:var(--accent2);
  font-size:15px;
  line-height:1.5;
  font-weight:950;
  text-align:center;
  letter-spacing:.01em;
}


/* ===== IWAKI SIZE / fun mode ===== */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(90deg,transparent 49%,rgba(19,34,52,.11) 50%,transparent 51%),
    linear-gradient(0deg,transparent 49%,rgba(19,34,52,.08) 50%,transparent 51%);
  background-size:48px 48px;
  z-index:-1;
}
.fun-brand{padding-top:6vh}
.warning-tape{
  display:inline-block;
  transform:rotate(-2deg);
  background:var(--yellow);
  color:var(--ink);
  border:3px solid var(--ink);
  padding:6px 13px;
  font-weight:1000;
  font-size:12px;
  letter-spacing:.12em;
  box-shadow:4px 4px 0 var(--ink);
  margin-bottom:18px;
}
.logo-mark{
  display:flex;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 5px;
  line-height:.82;
}
.logo-iwaki,
.logo-size{
  display:inline-block;
  font-weight:1000;
  letter-spacing:-.075em;
  font-size:clamp(66px,17vw,125px);
  text-shadow:4px 4px 0 rgba(19,34,52,.10);
}
.logo-iwaki{color:var(--blue)}
.logo-size{
  color:var(--accent);
  transform:rotate(-3deg);
}
.title-copy{
  display:inline-block;
  background:var(--ink);
  color:#fff;
  padding:8px 13px 9px;
  font-size:clamp(18px,4vw,28px);
  font-weight:1000;
  transform:rotate(.8deg);
  margin:9px 0 24px;
  box-shadow:5px 5px 0 var(--yellow);
}
.measure-board{
  position:relative;
  background:#fffdf7;
  border:4px solid var(--ink);
  border-radius:10px;
  padding:17px 18px 13px;
  box-shadow:8px 8px 0 var(--ink);
  margin:4px 7px 29px 0;
  overflow:hidden;
}
.measure-board:after{
  content:"IWAKI";
  position:absolute;
  right:-16px;
  top:6px;
  font-size:60px;
  font-weight:1000;
  color:rgba(27,87,216,.045);
  transform:rotate(-8deg);
}
.measure-label{
  font-size:10px;
  font-weight:1000;
  letter-spacing:.2em;
  color:var(--muted);
}
.measure-main{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  margin:2px 0 13px;
}
.measure-main strong{
  font-size:clamp(34px,9vw,58px);
  color:var(--accent);
  letter-spacing:-.055em;
}
.measure-main span{
  font-weight:900;
  font-size:15px;
}
.measure-scale{
  display:grid;
  grid-template-columns:auto 1fr 1fr 1fr 1fr auto;
  align-items:center;
  gap:0;
  border-top:4px solid var(--ink);
  padding-top:4px;
  font-size:10px;
  font-weight:1000;
}
.measure-scale i{
  height:15px;
  border-left:3px solid var(--ink);
}
.measure-scale strong{
  color:var(--blue);
  font-size:11px;
  letter-spacing:.08em;
}
.fun-lead{
  color:var(--ink);
  font-size:15px;
}
.fun-lead strong{
  background:linear-gradient(transparent 55%,var(--yellow) 55%);
}
.fun-primary{
  background:var(--accent);
  color:#fff;
  border:4px solid var(--ink);
  border-radius:12px;
  box-shadow:7px 7px 0 var(--ink);
  font-size:20px;
  letter-spacing:.03em;
}
.fun-primary:hover{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.fun-primary:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--ink)}
.game-stamp{
  align-self:flex-start;
  margin-top:4px;
  background:var(--blue);
  color:#fff;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  padding:6px 10px;
  transform:rotate(-2deg);
  border:2px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}
.progress-track{background:rgba(19,34,52,.12)}
#progressBar{background:var(--accent)}
.category{
  border:3px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
  border-radius:8px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-1deg);
}
.target-name{
  color:var(--blue);
  text-shadow:2px 2px 0 rgba(255,215,68,.85);
}
.question-prefix{color:var(--ink)}
.question-suffix{
  display:inline-block;
  color:var(--ink);
  font-size:23px;
}
.choice{
  background:#fffdf7;
  border:4px solid var(--ink);
  border-radius:12px;
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
}
.choice:hover{
  border-color:var(--ink);
  background:var(--yellow);
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 var(--ink);
}
.choice:active{
  transform:translate(3px,3px);
  box-shadow:2px 2px 0 var(--ink);
}
#resultScreen{padding-top:8px}
.result-panel{
  background:rgba(255,253,247,.74);
  border:4px solid var(--ink);
  border-radius:20px;
  padding:20px 16px 18px;
  box-shadow:9px 9px 0 var(--ink);
}
.judge{
  padding:4px 15px 7px;
  border:4px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  transform:rotate(-2deg);
  background:#fff;
}
.judge.correct{
  color:#fff;
  background:var(--iwaki);
}
.judge.wrong{
  color:#fff;
  background:var(--accent);
}
.answer-title{color:var(--blue);margin-top:16px}
.answer-area{color:var(--ink);font-weight:850}
.comparison{
  display:inline-block;
  color:var(--ink);
  background:var(--yellow);
  padding:4px 10px;
  border-radius:99px;
  margin-top:7px;
}
.map-outline path{stroke:var(--ink);stroke-width:2.2}
.ratio-label strong{color:var(--accent);text-shadow:2px 2px 0 rgba(19,34,52,.08)}
.ratio-label span{color:var(--blue);font-weight:1000}
.punchline{
  background:var(--yellow);
  border:3px solid var(--ink);
  color:var(--ink);
  border-radius:8px;
  box-shadow:4px 4px 0 var(--ink);
  transform:rotate(.4deg);
  font-size:16px;
}
.about-card{
  background:#fffdf7;
  border:3px solid var(--ink);
  border-radius:10px;
  box-shadow:4px 4px 0 rgba(19,34,52,.17);
}
.about-label{
  background:var(--blue);
  color:#fff;
  padding:4px 8px;
  transform:rotate(-1deg);
}
.about-card p{color:var(--ink)}
.source-link{color:var(--blue);border-color:rgba(27,87,216,.35)}
.next-wrap .primary{
  border:3px solid var(--ink);
  border-radius:10px;
  box-shadow:5px 5px 0 var(--ink);
  background:var(--accent);
  color:#fff;
}
.modal{background:rgba(19,34,52,.62)}
.modal-card{
  background:#fff9e9;
  border:4px solid var(--ink);
  border-radius:16px;
  box-shadow:10px 10px 0 var(--ink);
  color:var(--ink);
}
.modal-card .label{
  display:inline-block;
  background:var(--blue);
  color:#fff;
  padding:4px 9px;
  font-weight:1000;
  transform:rotate(-2deg);
}
.final-score{color:var(--accent);text-shadow:3px 3px 0 var(--yellow)}
.secondary{
  border:3px solid var(--ink);
  background:#fff;
  color:var(--ink);
  border-radius:10px;
}
.smallnote{color:var(--muted);font-weight:750}
@media(max-width:520px){
  .logo-mark{gap:5px}
  .logo-iwaki,.logo-size{font-size:clamp(58px,20vw,92px)}
  .title-copy{font-size:18px}
  .measure-board{box-shadow:6px 6px 0 var(--ink)}
  .result-panel{box-shadow:6px 6px 0 var(--ink)}
}


/* Iwaki "former No.1" history */
.history-badge{
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  max-width:100%;
  margin:-4px 0 20px;
  transform:rotate(-1deg);
  color:var(--ink);
}
.history-badge b{
  flex:0 0 auto;
  background:var(--accent);
  color:#fff;
  border:3px solid var(--ink);
  padding:6px 9px;
  font-size:13px;
  box-shadow:3px 3px 0 var(--ink);
}
.history-badge span{
  font-size:13px;
  line-height:1.45;
  font-weight:1000;
  background:var(--yellow);
  padding:5px 8px;
  border-bottom:3px solid var(--ink);
}
.history-card{
  width:min(100%,620px);
  margin:13px auto 18px;
  text-align:left;
  background:#fff2b7;
  border:4px solid var(--ink);
  border-radius:10px;
  padding:14px 15px 13px;
  box-shadow:5px 5px 0 var(--accent);
  opacity:0;
  transform:translateY(13px) rotate(.4deg);
}
.history-card.reveal{
  animation:historyReveal .5s .34s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes historyReveal{
  to{opacity:1;transform:translateY(0) rotate(.4deg)}
}
.history-card-head{
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:9px;
}
.history-icon{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--ink);
  background:var(--accent);
  color:#fff;
  font-size:23px;
  font-weight:1000;
}
.history-card-head small{
  display:block;
  font-size:9px;
  letter-spacing:.12em;
  font-weight:900;
  color:#735f23;
}
.history-card-head strong{
  display:block;
  font-size:18px;
  line-height:1.1;
  font-weight:1000;
  color:var(--ink);
}
.history-card p{
  margin:0;
  color:var(--ink);
  font-size:13px;
  line-height:1.75;
  font-weight:750;
}
.history-source{
  display:inline-block;
  margin-top:9px;
  color:var(--blue);
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid rgba(27,87,216,.35);
}
@media(max-width:520px){
  .history-badge{align-items:flex-start}
  .history-badge span{font-size:11px}
  .history-card{padding:12px 13px}
  .history-card p{font-size:12px;line-height:1.7}
}


/* =========================================================
   v6 — Iwaki symbol-inspired palette: BLUE / RED / WHITE / BLACK
   ========================================================= */
:root{
  --blue:#005bac;
  --red:#e60012;
  --white:#ffffff;
  --black:#111111;
  --ink:#111111;
  --accent:#e60012;
  --accent2:#005bac;
  --iwaki:#005bac;
  --bg:#ffffff;
  --panel:#ffffff;
  --panel2:#f3f7fb;
  --line:rgba(17,17,17,.18);
  --text:#111111;
  --muted:#626b73;
  --map-base:#e2e7ec;
  --yellow:#ffffff;
}
html,body{
  background:
    linear-gradient(135deg,rgba(0,91,172,.055) 25%,transparent 25%) 0 0/36px 36px,
    linear-gradient(315deg,rgba(230,0,18,.04) 25%,transparent 25%) 0 0/36px 36px,
    #fff;
  color:var(--black);
}
body:before{background-image:none!important;border:0!important}
.app{width:min(100%,780px);padding:12px 16px 16px}
.warning-tape{background:var(--black);color:var(--white);border-color:var(--black);box-shadow:4px 4px 0 var(--red)}
.logo-iwaki{color:var(--blue);text-shadow:none}
.logo-size{color:var(--red);text-shadow:none}
.title-copy{background:var(--black);color:var(--white);box-shadow:5px 5px 0 var(--blue)}
.history-badge b{background:var(--red);border-color:var(--black);box-shadow:3px 3px 0 var(--blue)}
.history-badge span{background:var(--white);border:3px solid var(--black)}
.measure-board{background:var(--white);border-color:var(--black);box-shadow:8px 8px 0 var(--blue)}
.measure-main strong{color:var(--red)}
.measure-scale strong{color:var(--blue)}
.fun-lead strong{background:linear-gradient(transparent 60%,rgba(0,91,172,.18) 60%)}
.primary,.fun-primary,.next-wrap .primary{background:var(--red);color:var(--white);border-color:var(--black);box-shadow:5px 5px 0 var(--black)}
.game-stamp{background:var(--blue);border-color:var(--black);box-shadow:3px 3px 0 var(--red)}
.progress-track{background:rgba(0,91,172,.12)}
#progressBar{background:var(--red)}
.category{background:var(--white);color:var(--blue);border-color:var(--blue);box-shadow:3px 3px 0 var(--black)}
.target-name{color:var(--blue);text-shadow:none}
.choice{background:var(--white);color:var(--black);border-color:var(--black);box-shadow:5px 5px 0 var(--blue)}
.choice:hover{background:#eef6fc;border-color:var(--black);box-shadow:7px 7px 0 var(--red)}
.result-panel{background:var(--white);border-color:var(--black);box-shadow:7px 7px 0 var(--blue)}
.judge.correct{background:var(--blue);color:var(--white)}
.judge.wrong{background:var(--red);color:var(--white)}
.answer-title{color:var(--black)}
.comparison{background:var(--black);color:var(--white)}
.map-fill path,.review-map-fill{fill:var(--blue)}
.ratio-label strong{color:var(--red);text-shadow:none}
.ratio-label span{color:var(--blue)}
.punchline{background:#eef6fc;border-color:var(--blue);box-shadow:4px 4px 0 var(--black);color:var(--black)}
.about-card{background:var(--white);border-color:var(--black);box-shadow:4px 4px 0 var(--blue)}
.about-label{background:var(--blue);color:var(--white)}
.source-link,.history-source{color:var(--blue)}
.history-card{background:#f7f9fc;border-color:var(--black);box-shadow:5px 5px 0 var(--red)}
.history-icon{background:var(--red)}
.modal{background:rgba(0,0,0,.72)}
.modal-card{background:var(--white);border-color:var(--black);box-shadow:10px 10px 0 var(--blue)}
.modal-card .label{background:var(--blue);color:var(--white)}
.final-score{color:var(--red);text-shadow:none}
.secondary{background:var(--white);color:var(--black);border-color:var(--black)}

/* matching action zones */
#quizScreen,#resultScreen{min-height:calc(100dvh - 28px)}
.quiz-card{
  flex:1;min-height:0;margin:0;padding:8px 0 4px;
  display:flex;flex-direction:column;justify-content:flex-start
}
.category{margin-bottom:12px}
.question-prefix{margin-top:auto}
.target-name{margin:6px 0}
.question-suffix{margin-bottom:16px}
.choices{margin-top:auto;min-height:86px;align-items:stretch}
.choice{min-height:78px}

#resultScreen{justify-content:stretch;padding:4px 0}
.result-panel{
  min-height:calc(100dvh - 34px);max-height:calc(100dvh - 34px);
  overflow:hidden;display:flex;flex-direction:column;padding:10px 13px 11px
}
.judge{font-size:clamp(27px,5.4vw,43px);margin:0 auto 2px;padding:1px 12px 4px}
.answer-title{font-size:clamp(20px,4.4vw,31px);margin-top:7px;line-height:1.08}
.answer-area{margin-top:2px;font-size:12px}
.comparison{margin-top:4px;padding:3px 8px;font-size:11px}
.map-amount{margin:7px 0 2px;min-height:145px;max-height:180px}
.map-row{min-height:90px;gap:3px}
.map-row[data-count="1"] .iwaki-map{width:92px;height:104px}
.map-row[data-count="2"] .iwaki-map,.map-row[data-count="3"] .iwaki-map{width:78px;height:88px}
.map-row[data-count="4"] .iwaki-map,.map-row[data-count="5"] .iwaki-map,.map-row[data-count="6"] .iwaki-map{width:62px;height:70px}
.iwaki-map{width:54px;height:62px}
.iwaki-map.mini{width:50px;height:57px}
.ratio-label{margin-top:1px;gap:5px}
.ratio-label strong{font-size:clamp(38px,8vw,59px)}
.ratio-label span{font-size:13px}
.ratio-label .times{font-size:27px}
.map-dots{font-size:35px}
.punchline{margin:3px auto 5px;padding:6px 9px;font-size:12px;line-height:1.35;box-shadow:2px 2px 0 var(--black)}
.history-card,.about-card{margin:4px auto 5px;padding:8px 10px 7px;box-shadow:2px 2px 0 var(--blue)}
.history-card{box-shadow:2px 2px 0 var(--red)}
.history-card-head{margin-bottom:4px;gap:7px}
.history-icon{width:27px;height:27px;font-size:16px}
.history-card-head small{font-size:7px}
.history-card-head strong{font-size:13px}
.history-card p,.about-card p{font-size:10.5px;line-height:1.45}
.about-label{font-size:9px;margin-bottom:4px;padding:2px 6px}
.source-link,.history-source{font-size:9px;margin-top:4px}
.next-wrap{margin-top:auto;min-height:86px;display:flex;align-items:flex-end}
.next-wrap .primary{min-height:78px;width:100%;font-size:17px}

/* review results */
.review-modal{
  width:min(96vw,980px);height:min(94dvh,900px);max-height:94dvh;
  padding:16px;display:flex;flex-direction:column;text-align:left
}
.review-summary{display:flex;align-items:center;gap:22px;padding:0 2px 10px;border-bottom:4px solid var(--black)}
.review-summary .final-score{font-size:48px;margin:0;line-height:1}
.review-summary .final-message{margin:0;font-size:15px}
.review-title{display:flex;align-items:baseline;gap:10px;padding:10px 2px 7px}
.review-title strong{font-size:19px}
.review-title span{font-size:11px;color:var(--muted)}
.review-table-wrap{flex:1;overflow:auto;border:3px solid var(--black);background:var(--white)}
.review-table{width:100%;border-collapse:collapse;font-size:12px}
.review-table thead{position:sticky;top:0;z-index:2;background:var(--black);color:var(--white)}
.review-table th,.review-table td{padding:7px 8px;border-bottom:1px solid #cfd5db;vertical-align:middle}
.review-table th{text-align:left;font-size:10px;letter-spacing:.04em}
.review-no{width:36px;text-align:center;font-weight:900}
.review-mark{width:48px;text-align:center}
.review-mark span{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:50%;font-size:21px;font-weight:1000;color:var(--white)}
.correct-row .review-mark span{background:var(--blue)}
.wrong-row .review-mark span{background:var(--red)}
.review-question strong{display:block;font-size:12px}
.review-question small{display:block;color:var(--muted);font-size:9px;margin-top:2px}
.review-ratio{font-weight:1000;color:var(--red);white-space:nowrap}
.review-ratio small{font-size:9px;color:var(--blue)}
.review-map-cell{min-width:120px}
.review-map-set{display:flex;align-items:center;gap:2px;white-space:nowrap}
.review-map{display:inline-block;width:27px;height:31px}
.review-map svg{width:100%;height:100%;display:block}
.review-map-base{fill:#e3e8ed}
.review-map-outline{fill:none;stroke:var(--black);stroke-width:2}
.review-map-more{font-size:11px;font-weight:1000;color:var(--blue);margin-left:3px}
.review-links{white-space:nowrap}
.review-links a,.review-toggle{color:var(--blue);font-size:10px;font-weight:900;background:none;border:0;padding:2px 5px;cursor:pointer;text-decoration:underline}
.review-toggle{color:var(--red)}
.review-detail-row td{background:#f3f7fb;padding:0!important}
.review-detail{padding:9px 14px 11px 58px;font-size:11px;line-height:1.55;border-left:6px solid var(--blue)}
.review-detail>div{margin:2px 0}
.review-detail b{color:var(--black)}
.review-about,.review-history{margin-top:6px!important;padding-top:5px;border-top:1px dashed #aeb6bf}
.review-about b,.review-history b{display:inline-block;margin-right:8px;color:var(--blue)}
.review-history b{color:var(--red)}
.review-detail a{color:var(--blue)}
.review-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:10px}
.review-actions .primary,.review-actions .secondary{margin:0;min-height:48px}

@media(max-width:600px){
  .app{padding:8px 10px 10px}
  #quizScreen,#resultScreen{min-height:calc(100dvh - 18px)}
  .quiz-card{min-height:0}
  .choices{grid-template-columns:1fr 1fr;gap:7px;min-height:72px}
  .choice{min-height:66px;padding:9px 5px;font-size:15px;box-shadow:3px 3px 0 var(--blue)}
  .choice.long{font-size:12px}
  .result-panel{min-height:calc(100dvh - 20px);max-height:calc(100dvh - 20px);padding:7px 9px 8px;box-shadow:4px 4px 0 var(--blue)}
  .map-amount{min-height:120px;max-height:145px;margin:3px 0 0}
  .map-row{min-height:72px}
  .map-row[data-count="1"] .iwaki-map{width:72px;height:82px}
  .map-row[data-count="2"] .iwaki-map,.map-row[data-count="3"] .iwaki-map{width:62px;height:70px}
  .map-row[data-count="4"] .iwaki-map,.map-row[data-count="5"] .iwaki-map,.map-row[data-count="6"] .iwaki-map{width:48px;height:55px}
  .map-row[data-count="7"] .iwaki-map,.map-row[data-count="8"] .iwaki-map,.map-row[data-count="9"] .iwaki-map,.map-row[data-count="10"] .iwaki-map{width:39px;height:45px}
  .ratio-label strong{font-size:38px}
  .history-card p,.about-card p{font-size:9.5px;line-height:1.35}
  .next-wrap{min-height:72px}
  .next-wrap .primary{min-height:66px}
  .review-modal{width:98vw;height:96dvh;max-height:96dvh;padding:10px 8px}
  .review-summary{gap:10px}
  .review-summary .final-score{font-size:39px}
  .review-summary .final-message{font-size:11px}
  .review-title{display:block;padding:7px 1px 5px}
  .review-title strong{font-size:15px}
  .review-title span{display:block;margin-top:2px;font-size:9px}
  .review-table{min-width:0}
  .review-table th,.review-table td{padding:6px}
  .review-actions{grid-template-columns:1fr 1fr}
}


/* v7: simplify title screen */
.fun-brand{padding-top:10vh}
.logo-mark{margin-top:0}
.title-copy{margin:10px 0 20px}
.measure-board{margin-top:2px}


/* =========================================================
   v8 — result screen: slightly larger, keep action button position
   ========================================================= */
#resultScreen{padding:6px 0}
.result-panel{
  padding:14px 16px 12px;
}
.judge{
  font-size:clamp(31px,6vw,48px);
  margin-bottom:4px;
  padding:2px 14px 5px;
}
.answer-title{
  font-size:clamp(23px,5vw,35px);
  margin-top:9px;
}
.answer-area{font-size:13px;margin-top:3px}
.comparison{font-size:12px;padding:4px 10px;margin-top:5px}
.map-amount{
  min-height:165px;
  max-height:200px;
  margin:9px 0 4px;
}
.map-row{min-height:104px;gap:4px}
.map-row[data-count="1"] .iwaki-map{width:112px;height:126px}
.map-row[data-count="2"] .iwaki-map,.map-row[data-count="3"] .iwaki-map{width:92px;height:104px}
.map-row[data-count="4"] .iwaki-map,.map-row[data-count="5"] .iwaki-map,.map-row[data-count="6"] .iwaki-map{width:72px;height:82px}
.iwaki-map{width:62px;height:70px}
.iwaki-map.mini{width:58px;height:66px}
.ratio-label{margin-top:3px;gap:6px}
.ratio-label strong{font-size:clamp(44px,9vw,68px)}
.ratio-label span{font-size:14px}
.ratio-label .times{font-size:31px}
.punchline{
  margin:5px auto 7px;
  padding:7px 11px;
  font-size:13px;
  line-height:1.4;
}
.history-card,.about-card{
  margin:6px auto 7px;
  padding:10px 12px 9px;
}
.history-card-head{margin-bottom:5px;gap:8px}
.history-icon{width:30px;height:30px;font-size:18px}
.history-card-head small{font-size:8px}
.history-card-head strong{font-size:14px}
.history-card p,.about-card p{font-size:11.5px;line-height:1.52}
.about-label{font-size:10px;margin-bottom:5px;padding:3px 7px}
.source-link,.history-source{font-size:9.5px;margin-top:5px}
/* Keep next button in the same bottom action zone */
.next-wrap{min-height:86px;margin-top:auto}
.next-wrap .primary{min-height:78px}

@media(max-width:600px){
  .result-panel{padding:10px 11px 9px}
  .judge{font-size:clamp(29px,8vw,40px)}
  .answer-title{font-size:clamp(21px,6vw,30px)}
  .map-amount{min-height:140px;max-height:165px;margin:5px 0 1px}
  .map-row{min-height:84px}
  .map-row[data-count="1"] .iwaki-map{width:86px;height:98px}
  .map-row[data-count="2"] .iwaki-map,.map-row[data-count="3"] .iwaki-map{width:72px;height:82px}
  .map-row[data-count="4"] .iwaki-map,.map-row[data-count="5"] .iwaki-map,.map-row[data-count="6"] .iwaki-map{width:55px;height:63px}
  .map-row[data-count="7"] .iwaki-map,.map-row[data-count="8"] .iwaki-map,.map-row[data-count="9"] .iwaki-map,.map-row[data-count="10"] .iwaki-map{width:43px;height:49px}
  .ratio-label strong{font-size:43px}
  .punchline{font-size:11.5px;padding:6px 9px;margin:4px auto 5px}
  .history-card,.about-card{padding:8px 10px 7px;margin:4px auto 5px}
  .history-card p,.about-card p{font-size:10.5px;line-height:1.42}
  .next-wrap{min-height:72px}
  .next-wrap .primary{min-height:66px}
}


/* v9: title logo gets closer to the Iwaki symbol-mark feeling */
.logo-mark{
  gap:0;
  align-items:flex-end;
}
.brush-logo{
  position:relative;
  display:inline-block;
  font-family:"Arial Black","Impact","Noto Sans JP",sans-serif;
  font-style:italic;
  font-weight:1000;
  line-height:.82;
  letter-spacing:-.11em;
  -webkit-text-stroke:2px var(--black);
  paint-order:stroke fill;
  text-shadow:none;
}
.brush-logo::before{
  content:attr(data-text);
  position:absolute;
  inset:0;
  z-index:-1;
  color:var(--white);
  -webkit-text-stroke:4px var(--black);
  transform:translate(4px,4px) skewX(-12deg);
  opacity:.95;
}
.brush-logo::after{
  content:"";
  position:absolute;
  left:-1%;
  right:-1%;
  top:18%;
  bottom:14%;
  background:repeating-linear-gradient(-62deg,
    rgba(255,255,255,0) 0 20px,
    rgba(255,255,255,.72) 20px 26px,
    rgba(255,255,255,0) 26px 42px);
  mix-blend-mode:screen;
  opacity:.65;
  pointer-events:none;
  clip-path:polygon(1% 18%,8% 7%,18% 11%,28% 0,39% 6%,51% 1%,60% 10%,70% 5%,82% 13%,91% 10%,99% 18%,96% 33%,100% 46%,95% 61%,98% 74%,92% 89%,83% 84%,74% 100%,64% 92%,52% 100%,43% 91%,32% 97%,22% 88%,11% 92%,2% 78%,6% 61%,0 47%,4% 31%);
}
.logo-iwaki{
  color:var(--blue);
  transform:skewX(-12deg) rotate(-5deg);
  margin-right:-6px;
}
.logo-size{
  color:var(--red);
  transform:skewX(-12deg) rotate(-2deg) translateY(7px);
}
.logo-iwaki,.logo-size{
  font-size:clamp(74px,18vw,138px);
}
@media(max-width:600px){
  .logo-iwaki,.logo-size{font-size:clamp(60px,22vw,102px)}
  .brush-logo{ -webkit-text-stroke:1.6px var(--black); }
  .brush-logo::before{ -webkit-text-stroke:3px var(--black); transform:translate(3px,3px) skewX(-12deg); }
}


/* v10: final review can be vertically long; prioritize readability over one-screen fit */
.review-modal{
  width:min(96vw,980px);
  height:auto;
  max-height:92dvh;
}
.review-table-wrap{
  overflow-y:auto;
  overflow-x:hidden;
}
.review-table{
  table-layout:fixed;
}
.review-table th:nth-child(1), .review-table td.review-no{width:5%}
.review-table th:nth-child(2), .review-table td.review-mark{width:9%}
.review-table th:nth-child(3), .review-table td.review-question{width:33%}
.review-table th:nth-child(4), .review-table td.review-ratio{width:14%}
.review-table th:nth-child(5), .review-table td.review-map-cell{width:19%}
.review-table th:nth-child(6), .review-table td.review-links{width:20%}
.review-question strong,
.review-question small,
.review-links,
.review-links a{
  overflow-wrap:anywhere;
  word-break:break-word;
}
.review-map-cell{min-width:0}
.review-links a,.review-toggle{display:inline-block;margin-right:4px}

@media(max-width:760px){
  .review-modal{
    width:96vw;
    height:auto;
    max-height:94dvh;
    padding:12px 10px;
  }
  .review-summary{
    display:block;
    padding-bottom:8px;
  }
  .review-summary .final-score{font-size:42px;margin-top:6px}
  .review-summary .final-message{margin-top:6px}
  .review-table-wrap{
    overflow:auto;
    border-width:0;
    background:transparent;
  }
  .review-table,
  .review-table thead,
  .review-table tbody,
  .review-table th,
  .review-table td,
  .review-table tr{
    display:block;
    width:100%;
  }
  .review-table{
    min-width:0;
    font-size:12px;
  }
  .review-table thead{
    display:none;
  }
  .review-row{
    background:var(--white);
    border:3px solid var(--black);
    box-shadow:4px 4px 0 var(--blue);
    margin-bottom:8px;
    padding:4px 0;
  }
  .wrong-row.review-row{box-shadow:4px 4px 0 var(--red)}
  .review-row td{
    border:0;
    padding:6px 10px;
    min-height:unset;
  }
  .review-row td::before{
    content:attr(data-label);
    display:block;
    font-size:10px;
    font-weight:900;
    color:var(--muted);
    margin-bottom:2px;
    letter-spacing:.04em;
  }
  .review-no,.review-mark,.review-ratio,.review-map-cell,.review-links,.review-question{
    width:100%!important;
    text-align:left;
  }
  .review-mark span{width:24px;height:24px;font-size:18px}
  .review-question strong{font-size:14px}
  .review-ratio{font-size:18px}
  .review-ratio small{font-size:11px}
  .review-map-set{justify-content:flex-start;flex-wrap:wrap}
  .review-map{width:30px;height:34px}
  .review-links{padding-top:4px}
  .review-detail-row{
    display:block;
    margin:-5px 0 10px;
  }
  .review-detail-row td.review-detail-cell{
    display:block;
    width:100%;
    border:0;
    padding:0!important;
    background:transparent;
  }
  .review-detail{
    padding:9px 11px 10px;
    font-size:11px;
    border:2px solid var(--blue);
    border-left:6px solid var(--blue);
    background:#f3f7fb;
    margin:0 4px 0 4px;
  }
  .review-actions{
    position:sticky;
    bottom:0;
    background:linear-gradient(180deg,rgba(255,255,255,0),#fff 18px);
    padding-top:14px;
    margin-top:2px;
  }
}


/* v11: true brush-stroke title based on the supplied Iwaki symbol-mark reference */
.brush-title{
  width:min(100%,760px);
  margin:0 0 2px;
  overflow:visible;
}
.iwaki-title-svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.svg-logo-text{
  font-family:"Arial Black","Impact","Helvetica Neue",sans-serif;
  font-weight:1000;
  font-size:128px;
  font-style:italic;
  letter-spacing:-13px;
}
.svg-iwaki{fill:var(--blue)}
.svg-size{fill:var(--red)}
.brush-swish{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.blue-swish{stroke:var(--blue)}
.red-swish{stroke:var(--red)}
.brush-swish path:nth-child(1){stroke-width:9}
.brush-swish path:nth-child(2){stroke-width:6}
.brush-swish path:nth-child(3){stroke-width:3.5}
.brush-swish path:nth-child(4){stroke-width:2.2}
.brush-swish path:nth-child(5){stroke-width:1.5}
/* old CSS-text logo is no longer used */
.logo-iwaki,.logo-size,.brush-logo{display:none!important}
@media(max-width:600px){
  .brush-title{margin-top:2px}
  .svg-logo-text{font-size:126px;letter-spacing:-13px}
}


/* v12: desktop vertical balance — keep action buttons in place */
@media (min-width: 761px){
  /* Question: avoid the large empty band between category and question text */
  .quiz-card{
    padding-top:4px;
  }
  .quiz-card .category{
    margin-bottom:0;
  }
  .quiz-card .question-prefix{
    margin-top:clamp(72px,12vh,118px);
  }
  .quiz-card .target-name{
    margin:8px 0 5px;
  }
  .quiz-card .question-suffix{
    margin-bottom:0;
  }
  /* choices remain anchored at the same lower action zone */
  .quiz-card .choices{
    margin-top:auto;
  }

  /* Result: use the middle of the card more evenly without moving Next */
  .result-panel{
    padding-top:clamp(24px,3.2vh,38px);
    padding-bottom:12px;
  }
  .result-panel .judge{
    margin-bottom:5px;
  }
  .result-panel .answer-title{
    margin-top:10px;
  }
  .result-panel .map-amount{
    min-height:178px;
    max-height:215px;
    margin:14px 0 7px;
  }
  .result-panel .punchline{
    margin:7px auto 9px;
  }
  .result-panel .history-card,
  .result-panel .about-card{
    margin:8px auto 10px;
    padding:11px 13px 10px;
  }
  .result-panel .history-card p,
  .result-panel .about-card p{
    font-size:12px;
    line-height:1.56;
  }
  /* Keep the already-approved bottom button position */
  .result-panel .next-wrap{
    margin-top:auto;
  }
}