/* TEAM30 PHOENIX QUIZ 1ST — OFFLINE */
:root{
  --red:#d50000;
  --red-dark:#a80000;
  --black:#080808;
  --black-2:#111111;
  --white:#ffffff;
  --paper:#f4f2ee;
  --gray:#b6b6b6;
  --correct:#ffffff;
  --danger:#ff243d;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%}
body{
  margin:0;
  overflow:hidden;
  color:var(--white);
  font-family:"Hiragino Sans","Yu Gothic UI","Yu Gothic",Arial,sans-serif;
  background:var(--red);
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid #ffe44d;outline-offset:3px}

.app{
  width:100%;
  min-height:100%;
  display:grid;
  place-items:center;
  padding:18px;
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(circle at 88% 12%,rgba(255,255,255,.08),transparent 24%),
    linear-gradient(130deg,var(--red-dark),var(--red) 50%,#ee0000);
}
.background-lines{
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.13;
  background:repeating-linear-gradient(115deg,transparent 0 62px,rgba(0,0,0,.45) 63px 66px,transparent 67px 128px);
}
.screen{
  display:none;
  width:min(1260px,100%);
  height:min(820px,calc(100vh - 36px));
  min-height:560px;
}
.screen.active{display:flex}
.frame{
  width:100%;
  height:100%;
  position:relative;
  overflow:hidden;
  background:var(--red);
  border:3px solid var(--black);
  box-shadow:16px 16px 0 var(--black);
}
.topbar{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px;
  background:var(--black);
}
.brand-button{
  display:flex;
  align-items:center;
  gap:14px;
  border:0;
  padding:0;
  color:var(--white);
  background:transparent;
  font-family:Impact,"Arial Black",sans-serif;
  font-size:18px;
  letter-spacing:.08em;
}
.brand-box{
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  color:var(--white);
  background:var(--red);
  border:2px solid var(--white);
}
.fullscreen-button{
  min-height:42px;
  padding:0 15px;
  border:2px solid var(--white);
  color:var(--white);
  background:transparent;
  font-weight:900;
}
.start-content{
  height:calc(100% - 74px);
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(240px,.55fr);
  gap:38px;
  align-items:center;
  padding:46px 52px 42px;
}
.start-copy{display:flex;flex-direction:column;align-items:flex-start}
.kicker{
  padding:9px 18px 9px 13px;
  color:var(--white);
  background:var(--black);
  clip-path:polygon(0 0,100% 0,94% 100%,0 100%);
  font-size:12px;
  font-weight:1000;
  letter-spacing:.13em;
}
.start-copy h1{
  margin:18px 0 16px;
  color:var(--white);
  font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(58px,7.2vw,102px);
  line-height:.82;
  letter-spacing:-.055em;
  text-shadow:6px 6px 0 var(--black);
}
.start-copy h1 span{
  display:block;
  width:max-content;
  max-width:100%;
  margin-top:11px;
  padding:11px 20px 13px 15px;
  color:var(--black);
  background:var(--white);
  clip-path:polygon(2% 0,100% 4%,96% 100%,0 95%);
  font-size:.82em;
  text-shadow:none;
}
.lead{
  width:min(620px,100%);
  margin:0 0 18px;
  padding:11px 15px;
  color:var(--black);
  background:var(--white);
  font-size:clamp(16px,1.5vw,20px);
  font-weight:1000;
  line-height:1.42;
  box-shadow:4px 4px 0 var(--black);
}
.rule-grid{
  width:min(580px,100%);
  display:grid;
  grid-template-columns:.8fr .8fr 1.4fr;
  gap:8px;
  margin-bottom:20px;
}
.rule-grid>div{
  min-height:54px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  color:var(--white);
  background:var(--black);
}
.rule-grid>div:nth-child(2){
  color:var(--black);
  background:var(--white);
}
.rule-grid b{
  color:var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:24px;
}
.rule-grid span{font-size:13px;font-weight:1000}
.start-error{
  width:min(580px,100%);
  margin-bottom:12px;
  padding:11px 14px;
  color:var(--white);
  background:#6f0010;
  border:2px solid var(--white);
  font-weight:900;
}
.start-actions{
  width:min(580px,100%);
  display:grid;
  grid-template-columns:minmax(0,1fr) 150px;
  gap:12px;
  align-items:end;
}
.start-button{
  min-height:76px;
  padding:15px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border:0;
  color:var(--white);
  background:linear-gradient(90deg,var(--black) 0 82%,var(--red) 82%);
  box-shadow:7px 7px 0 var(--white);
  font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(24px,2.7vw,35px);
  letter-spacing:.05em;
}
.start-button:disabled{opacity:.45;cursor:not-allowed}
.start-actions p{
  margin:0;
  padding:9px 10px;
  color:var(--white);
  background:var(--black);
  font-size:11px;
  line-height:1.35;
  font-weight:1000;
}
.start-art{
  width:min(282px,26vw);
  aspect-ratio:.93;
  display:grid;
  align-content:center;
  justify-items:start;
  padding-left:20px;
  color:var(--white);
  background:linear-gradient(145deg,var(--black) 0 76%,var(--white) 76%);
  box-shadow:11px 11px 0 var(--white);
  transform:rotate(-4deg);
}
.start-art small,.start-art em{
  font-family:Impact,"Arial Black",sans-serif;
  font-style:normal;
  letter-spacing:.1em;
}
.start-art small{font-size:clamp(16px,1.9vw,23px)}
.start-art strong{
  color:var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(122px,14vw,190px);
  line-height:.76;
  -webkit-text-stroke:4px var(--white);
  text-shadow:5px 5px 0 #222;
}
.start-art em{font-size:clamp(30px,3.7vw,44px)}
.pack-label{
  position:absolute;
  right:18px;
  bottom:14px;
  max-width:52%;
  padding:6px 9px;
  color:var(--white);
  background:var(--black);
  font-size:11px;
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Countdown */
.countdown-screen{
  align-items:center;
  justify-content:center;
  background:rgba(213,0,0,.96);
}
.countdown-value{
  color:var(--white);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(120px,25vw,270px);
  line-height:.85;
  -webkit-text-stroke:4px var(--black);
  text-shadow:12px 12px 0 var(--black);
  animation:countPop .46s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes countPop{
  from{opacity:0;transform:scale(.3)}
  to{opacity:1;transform:scale(1)}
}

/* Quiz */
.quiz-frame{background:var(--black)}
.quiz-header{
  height:88px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:0 24px;
  color:var(--white);
  background:linear-gradient(90deg,var(--black) 0 75%,var(--red) 75%);
}
.progress-label{
  width:max-content;
  padding:6px 15px 8px 12px;
  color:var(--black);
  background:var(--white);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:27px;
  box-shadow:4px 4px 0 var(--red);
}
.progress-bars{display:flex;gap:10px}
.progress-bars span{
  width:42px;
  height:10px;
  background:rgba(255,255,255,.24);
}
.progress-bars span.current{background:var(--red);box-shadow:0 0 0 2px var(--white)}
.progress-bars span.correct{background:var(--white)}
.progress-bars span.wrong{background:transparent;box-shadow:inset 0 0 0 2px var(--white)}
.time-wrap{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
}
.time-wrap small{
  padding:6px 9px;
  color:var(--black);
  background:var(--white);
  font-size:11px;
  font-weight:1000;
}
.circle-timer{
  width:80px;
  height:80px;
  display:grid;
  place-items:center;
  position:relative;
  border-radius:50%;
  background:#111;
  filter:drop-shadow(5px 5px 0 var(--white));
}
.circle-timer svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.circle-progress,.circle-eraser,.circle-track{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.circle-progress{
  stroke:var(--white);
  stroke-width:5;
  filter:drop-shadow(0 0 5px var(--white));
}
.circle-eraser{stroke:#111;stroke-width:9}
.circle-track{stroke:rgba(255,255,255,.22);stroke-width:4}
.circle-timer span{
  position:relative;
  z-index:2;
  font-family:Impact,"Arial Black",sans-serif;
  font-size:31px;
}
.circle-timer.urgent{background:#2c050c}
.circle-timer.urgent .circle-progress{stroke:var(--danger);filter:drop-shadow(0 0 7px var(--danger))}
.quiz-content{
  height:calc(100% - 88px);
  display:grid;
  grid-template-rows:minmax(170px,.84fr) minmax(250px,1.16fr);
  gap:20px;
  padding:26px 30px 32px;
  background:
    radial-gradient(circle,rgba(255,255,255,.055) 0 2px,transparent 2.5px) 90% 20%/14px 14px,
    var(--black);
}
.question-box{
  position:relative;
  display:grid;
  place-items:center start;
  padding:26px 40px;
  overflow:hidden;
  background:#0d0d0d;
}
.question-box h2{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:0;
  color:var(--white);
  font-family:"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(34px,4.2vw,56px);
  line-height:1.12;
  letter-spacing:-.03em;
  text-shadow:2px 2px 0 rgba(213,0,0,.48);
}
.question-timer-svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
}
.question-glow,.question-eraser,.question-track{
  fill:none;
  vector-effect:non-scaling-stroke;
}
.question-glow{
  stroke:var(--white);
  stroke-width:5;
  stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--white)) drop-shadow(0 0 11px var(--white));
}
.question-eraser{stroke:#0d0d0d;stroke-width:9;stroke-linecap:butt}
.question-track{stroke:rgba(255,255,255,.20);stroke-width:4}
.question-box.urgent .question-glow{
  stroke:var(--danger);
  filter:drop-shadow(0 0 6px var(--danger)) drop-shadow(0 0 14px var(--danger));
}
.answer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:12px;
}
.answer-button{
  min-height:88px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  gap:17px;
  border:0;
  color:#050505;
  background:var(--white);
  box-shadow:5px 5px 0 var(--red);
  text-align:left;
  transition:transform .11s ease,box-shadow .11s ease,opacity .12s ease;
}
.answer-button:active{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--red)}
.answer-key{
  flex:0 0 52px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  color:var(--white);
  background:var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:25px;
}
.answer-text{
  color:#050505;
  font-family:"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(22px,2.2vw,31px);
  line-height:1.08;
}
.answer-button.dimmed{opacity:.62}
.answer-button.correct{
  box-shadow:0 0 0 4px var(--red),5px 5px 0 var(--red);
}
.answer-button.correct .answer-key{background:var(--red)}
.answer-button.wrong{
  box-shadow:0 0 0 4px var(--red),5px 5px 0 #5e0000;
}

/* Feedback / reach / result */
.feedback-screen,.reach-screen,.result-screen{
  align-items:center;
  justify-content:center;
  background:linear-gradient(151deg,var(--black) 0 86%,var(--red) 86%);
}
.feedback-panel,.reach-panel,.result-panel{
  width:min(920px,calc(100% - 40px));
  display:grid;
  justify-items:center;
  text-align:center;
  position:relative;
}
.feedback-panel h2,.reach-panel h2,.result-panel h2{
  width:min(820px,100%);
  margin:0;
  padding:10px 18px 12px;
  color:var(--black);
  background:var(--white);
  font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(52px,7vw,86px);
  line-height:1;
  letter-spacing:-.03em;
  text-shadow:3px 3px 0 var(--red);
  box-shadow:5px 5px 0 rgba(213,0,0,.45);
}
.feedback-panel p{
  width:min(620px,100%);
  margin:18px 0 0;
  padding:14px 16px;
  color:var(--white);
  background:#111;
  font-size:clamp(18px,2.1vw,28px);
  font-weight:1000;
  line-height:1.35;
  box-shadow:4px 4px 0 rgba(255,255,255,.15);
}
.feedback-panel.success h2{box-shadow:0 0 0 4px var(--red),5px 5px 0 var(--red)}
.feedback-panel.fail h2{box-shadow:0 0 0 4px var(--red),5px 5px 0 #5e0000}
.feedback-panel.time h2{font-size:clamp(46px,6.4vw,74px)}
.reach-panel small{
  padding:8px 13px;
  color:var(--white);
  background:var(--black);
  font-weight:1000;
  letter-spacing:.12em;
}
.reach-panel h2{margin-top:17px}
.reach-panel p{
  width:min(650px,100%);
  margin:16px 0 0;
  padding:15px 17px;
  color:var(--white);
  background:#111;
  font-size:clamp(22px,2.8vw,36px);
  font-weight:1000;
  line-height:1.2;
}
.reach-panel p strong{
  display:inline-block;
  margin-top:8px;
  padding:4px 9px;
  color:var(--black);
  background:var(--white);
}
.reach-panel>div{
  margin-top:18px;
  padding:11px 19px;
  color:var(--white);
  background:var(--red);
  border:2px solid var(--white);
  font-family:Impact,"Arial Black",sans-serif;
  letter-spacing:.12em;
}
.result-panel>small{
  position:absolute;
  top:-58px;
  left:0;
  padding:7px 22px;
  color:var(--black);
  background:var(--white);
  font-family:Impact,"Arial Black",sans-serif;
  letter-spacing:.15em;
}
.result-panel p{
  width:min(650px,100%);
  margin:24px 0 0;
  color:var(--white);
  font-family:Impact,"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(24px,3vw,38px);
  line-height:1.12;
}
.result-panel p strong{
  display:block;
  margin-top:12px;
  padding:11px 14px;
  color:var(--black);
  background:var(--white);
  font-family:"Arial Black","Hiragino Sans",sans-serif;
  font-size:.64em;
}
.result-badge{
  margin-top:18px;
  padding:12px 20px;
  color:var(--white);
  background:var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  letter-spacing:.08em;
}
.reset-button{
  width:min(520px,100%);
  min-height:66px;
  margin-top:24px;
  border:0;
  color:var(--black);
  background:var(--white);
  box-shadow:6px 6px 0 var(--red);
  font-size:19px;
  font-weight:1000;
}

/* Staff */
.staff-screen{
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.84);
}
.staff-panel{
  width:min(1180px,100%);
  height:min(780px,calc(100vh - 36px));
  overflow:auto;
  padding:26px;
  color:var(--black);
  background:var(--paper);
  border:5px solid var(--red);
  box-shadow:12px 12px 0 var(--black);
}
.staff-panel>header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  padding-bottom:18px;
  border-bottom:4px solid var(--black);
}
.staff-panel>header small{font-weight:1000;letter-spacing:.12em;color:var(--red)}
.staff-panel>header h2{margin:4px 0 0;font-family:Impact,"Arial Black",sans-serif;font-size:44px}
.staff-panel button{
  min-height:42px;
  padding:8px 14px;
  border:0;
  color:var(--white);
  background:var(--black);
  font-weight:1000;
}
.staff-panel button:disabled{opacity:.4;cursor:not-allowed}
.staff-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
}
.staff-card{
  padding:17px;
  background:var(--white);
  border:2px solid var(--black);
  box-shadow:5px 5px 0 var(--red);
}
.staff-card h3{margin:0 0 12px;font-size:20px}
.staff-card p{font-size:13px;line-height:1.55}
.staff-card dl,.staff-panel dl{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:7px 12px;
  margin:0;
  font-size:13px;
}
.staff-card dt{font-weight:1000}
.staff-card dd{margin:0;word-break:break-word}
.staff-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px}
.staff-card input[type=file]{width:100%;padding:10px;background:#eee;border:1px solid #aaa}
.staff-card input[type=range]{width:100%}
.toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-weight:900}
.import-result{
  min-height:46px;
  margin:12px 0;
  padding:10px;
  background:#eee;
  font-size:13px;
  line-height:1.45;
  white-space:pre-line;
}
.import-result.ok{background:#ffffff;border-left:6px solid var(--red)}
.import-result.error{background:#ffe3e7;border-left:6px solid var(--red)}
.staff-note{color:#555}
.preview-area{
  margin-top:20px;
  padding:18px;
  color:var(--black);
  background:var(--white);
  border:3px solid var(--black);
}
.preview-area>header{display:flex;justify-content:space-between;align-items:center}
.preview-area h3{margin:0}
.preview-question{
  margin-top:12px;
  padding:12px;
  border-left:6px solid var(--red);
  background:#f1f1f1;
}
.preview-question strong{display:block;margin-bottom:5px}
.preview-question ol{margin:7px 0 0;padding-left:25px}
.staff-panel>footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-top:20px;
  padding-top:14px;
  border-top:3px solid var(--black);
  font-size:12px;
  font-weight:900;
}
.staff-panel>footer a{color:var(--red)}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:100;
  padding:11px 17px;
  color:var(--white);
  background:var(--black);
  border:2px solid var(--white);
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  font-weight:900;
  transition:.18s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:850px){
  .app{padding:10px}
  .screen{height:calc(100vh - 20px);min-height:0}
  .frame{box-shadow:8px 8px 0 var(--black)}
  .start-content{grid-template-columns:1fr;padding:42px 18px 24px}
  .start-art{display:none}
  .start-copy h1{font-size:clamp(46px,12vw,72px);text-shadow:4px 4px 0 var(--black)}
  .rule-grid{grid-template-columns:1fr 1fr}
  .rule-grid>div:last-child{grid-column:1/-1}
  .start-actions{grid-template-columns:1fr}
  .start-actions p{width:max-content;max-width:100%}
  .pack-label{max-width:78%}
  .quiz-header{height:82px;padding:0 12px}
  .progress-label{font-size:21px;padding:5px 8px}
  .progress-bars{display:none}
  .time-wrap small{display:none}
  .circle-timer{width:66px;height:66px;filter:drop-shadow(3px 3px 0 var(--white))}
  .circle-timer span{font-size:25px}
  .quiz-content{height:calc(100% - 82px);grid-template-rows:minmax(132px,.68fr) minmax(320px,1.5fr);gap:12px;padding:14px}
  .question-box{padding:18px}
  .question-box h2{font-size:clamp(28px,6vw,40px);line-height:1.16}
  .answer-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr);gap:9px}
  .answer-button{min-height:70px;padding:10px 12px}
  .answer-key{width:46px;height:46px;flex-basis:46px;font-size:22px}
  .answer-text{font-size:clamp(19px,4.5vw,27px)}
  .staff-grid{grid-template-columns:1fr}
  .staff-panel{padding:17px}
  .staff-panel>header h2{font-size:34px}
  .feedback-panel h2,.reach-panel h2,.result-panel h2{font-size:clamp(40px,11.5vw,64px)}
}
@media(max-height:650px) and (orientation:landscape){
  .start-content{padding:34px 34px 18px}
  .start-copy h1{margin:8px 0 10px;font-size:53px}
  .lead{margin-bottom:9px;padding:7px 12px;font-size:15px}
  .rule-grid{margin-bottom:10px}
  .rule-grid>div{min-height:44px}
  .start-button{min-height:60px;font-size:25px}
  .start-art{width:205px}
  .quiz-header{height:72px}
  .circle-timer{width:60px;height:60px}
  .quiz-content{height:calc(100% - 72px);grid-template-rows:minmax(100px,.68fr) minmax(200px,1.14fr);gap:11px;padding:13px 24px 18px}
  .question-box{padding:15px 24px}
  .question-box h2{font-size:31px}
  .answer-button{min-height:76px}
  .answer-text{font-size:22px}
}


/* v1.1: 正解表示 */
.feedback-panel p{
  white-space:pre-line;
}
.answer-button.correct{
  opacity:1 !important;
  background:#ffffff !important;
}
.preview-question strong{
  color:#8d0000;
}


/* =========================================================
   v1.3 EFFECT LAYER
   ========================================================= */
.fx-layer{
  position:fixed;
  inset:0;
  z-index:90;
  pointer-events:none;
  overflow:hidden;
}
.screen-flash{
  position:fixed;
  inset:0;
  z-index:89;
  pointer-events:none;
  opacity:0;
  background:#fff;
}
.screen-flash.correct{
  animation:fxFlashCorrect .48s ease-out both;
}
.screen-flash.wrong{
  background:var(--red);
  animation:fxFlashWrong .46s ease-out both;
}
.screen-flash.timeout{
  background:#ff243d;
  animation:fxFlashTimeout .62s ease-out both;
}

@keyframes fxFlashCorrect{
  0%{opacity:0}
  22%{opacity:.85}
  100%{opacity:0}
}
@keyframes fxFlashWrong{
  0%{opacity:0}
  24%{opacity:.38}
  100%{opacity:0}
}
@keyframes fxFlashTimeout{
  0%{opacity:0}
  18%{opacity:.32}
  42%{opacity:.10}
  62%{opacity:.26}
  100%{opacity:0}
}

/* General particles */
.fx-particle{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--w);
  height:var(--h);
  background:var(--c);
  transform:translate(-50%,-50%) rotate(var(--r));
  animation:fxParticleFly var(--t) cubic-bezier(.12,.75,.22,1) forwards;
  animation-delay:var(--d);
  opacity:.96;
}
@keyframes fxParticleFly{
  to{
    transform:
      translate(calc(-50% + var(--dx)),calc(-50% + var(--dy)))
      rotate(calc(var(--r) + 680deg))
      scale(.35);
    opacity:0;
  }
}

/* Start countdown explosion */
.countdown-screen.fx-countdown{
  animation:countdownScreenPulse .45s ease-out both;
}
@keyframes countdownScreenPulse{
  0%{filter:brightness(.85)}
  45%{filter:brightness(1.55)}
  100%{filter:brightness(1)}
}
.countdown-value{
  filter:drop-shadow(0 0 26px rgba(255,255,255,.5));
}
.countdown-value.start-go{
  animation:countStartGo .56s cubic-bezier(.15,1.5,.3,1) both;
}
@keyframes countStartGo{
  0%{opacity:0;transform:scale(.25) rotate(-8deg)}
  65%{opacity:1;transform:scale(1.18) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

/* Quiz entrance */
.quiz-frame.fx-enter{
  animation:quizEnter .48s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes quizEnter{
  from{opacity:0;transform:translateX(28px) scale(.985);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}
}
.question-box.fx-question-enter{
  animation:questionBoxEnter .42s cubic-bezier(.18,.9,.24,1) both;
}
@keyframes questionBoxEnter{
  from{opacity:0;transform:translateY(-14px) scale(.985)}
  to{opacity:1;transform:none}
}
.answer-button{
  animation:answerEnter .34s cubic-bezier(.18,.86,.28,1.18) both;
  animation-delay:calc(var(--answer-index) * 65ms);
}
@keyframes answerEnter{
  from{opacity:0;transform:translateY(18px) scale(.965)}
  to{opacity:1;transform:none}
}

/* Selected answer impact */
.answer-button.fx-selected{
  animation:answerImpact .26s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes answerImpact{
  0%{transform:scale(1)}
  45%{transform:scale(.965)}
  100%{transform:scale(1.025)}
}
.answer-button.wrong.fx-selected{
  animation:wrongShake .32s ease both;
}
@keyframes wrongShake{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-8px)}
  47%{transform:translateX(8px)}
  70%{transform:translateX(-4px)}
}

/* Feedback screen */
.feedback-screen.active .feedback-panel{
  animation:feedbackPanelIn .42s cubic-bezier(.18,1.2,.25,1) both;
}
@keyframes feedbackPanelIn{
  from{opacity:0;transform:scale(.72) rotate(-3deg)}
  to{opacity:1;transform:none}
}
.feedback-panel.success::before,
.feedback-panel.fail::before,
.feedback-panel.time::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(72vw,700px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  pointer-events:none;
}
.feedback-panel.success::before{
  border:5px solid var(--red);
  animation:feedbackRing 1s ease-out both;
}
.feedback-panel.fail::before{
  border:5px solid var(--red);
  animation:feedbackRing .8s ease-out both;
}
.feedback-panel.time::before{
  border:5px solid var(--danger);
  animation:feedbackRing 1.05s ease-out both;
}
@keyframes feedbackRing{
  0%{transform:translate(-50%,-50%) scale(.15);opacity:.95}
  100%{transform:translate(-50%,-50%) scale(1.35);opacity:0}
}

/* Reach screen: much more dramatic */
.reach-screen{
  background:
    radial-gradient(circle at 50% 45%,rgba(213,0,0,.26),transparent 34%),
    linear-gradient(151deg,var(--black) 0 78%,var(--red) 78%);
}
.reach-screen.active .reach-panel{
  animation:reachPanelIn .7s cubic-bezier(.18,1.4,.22,1) both;
}
@keyframes reachPanelIn{
  0%{opacity:0;transform:scale(.42) rotate(-5deg)}
  70%{opacity:1;transform:scale(1.08) rotate(1deg)}
  100%{transform:scale(1) rotate(0)}
}
.reach-panel::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(72vw,720px);
  aspect-ratio:1;
  border:6px solid var(--red);
  transform:translate(-50%,-50%);
  box-shadow:
    0 0 40px rgba(213,0,0,.42),
    inset 0 0 40px rgba(213,0,0,.18);
  animation:reachRingPulse .9s ease-in-out infinite alternate;
  z-index:-1;
}
@keyframes reachRingPulse{
  from{transform:translate(-50%,-50%) scale(.88);opacity:.38}
  to{transform:translate(-50%,-50%) scale(1.04);opacity:.9}
}
.reach-panel h2{
  text-shadow:
    4px 4px 0 var(--red),
    8px 8px 0 rgba(255,255,255,.18);
}
.reach-panel>div{
  animation:reachBadgePulse .55s ease-in-out infinite alternate;
}
@keyframes reachBadgePulse{
  to{transform:scale(1.055);box-shadow:0 0 32px rgba(213,0,0,.45)}
}

/* Result */
.result-screen.active .result-panel{
  animation:resultPanelIn .62s cubic-bezier(.18,1.25,.28,1) both;
}
@keyframes resultPanelIn{
  from{opacity:0;transform:translateY(26px) scale(.72)}
  to{opacity:1;transform:none}
}
.result-panel.perfect h2{
  animation:perfectTitlePulse 1.05s ease-in-out infinite alternate;
}
@keyframes perfectTitlePulse{
  to{
    transform:scale(1.025);
    box-shadow:
      0 0 0 4px var(--red),
      0 0 34px rgba(32,201,120,.42),
      5px 5px 0 var(--red);
  }
}

/* Confetti */
.fx-confetti{
  position:absolute;
  left:var(--x);
  top:-32px;
  width:var(--w);
  height:var(--h);
  background:var(--c);
  transform:rotate(var(--r));
  animation:confettiFall var(--t) cubic-bezier(.15,.72,.3,1) forwards;
  animation-delay:var(--d);
}
@keyframes confettiFall{
  to{
    transform:
      translate3d(var(--dx),110vh,0)
      rotate(calc(var(--r) + 760deg));
    opacity:.12;
  }
}

/* Staff manager link */
.manager-link{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:8px 13px;
  color:#fff !important;
  background:var(--red);
  text-decoration:none;
  font-weight:1000;
}


/* =========================================================
   v1.4 PHOENIX RED / BLACK / WHITE EFFECT PASS
   UI配置は変更せず、演出と正解確認のみ強化
   ========================================================= */

/* 待機画面：控えめなコミックモーション */
.start-frame::before{
  content:"";
  position:absolute;
  inset:-28% -20%;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 74px,
      rgba(0,0,0,.52) 75px 80px,
      transparent 81px 150px
    );
  animation:startBackdropMove 14s linear infinite;
}
@keyframes startBackdropMove{
  to{transform:translateX(150px)}
}
.start-content,.topbar,.pack-label{position:relative;z-index:1}

.start-copy h1{
  animation:startTitleIn .72s cubic-bezier(.16,.9,.24,1) both;
}
.start-copy h1 span{
  animation:startTitleSubIn .76s .12s cubic-bezier(.16,.9,.24,1) both;
}
@keyframes startTitleIn{
  from{opacity:0;transform:translateX(-42px) skew(-4deg)}
  to{opacity:1;transform:none}
}
@keyframes startTitleSubIn{
  from{opacity:0;transform:translateX(52px) rotate(2deg)}
  to{opacity:1;transform:none}
}
.start-art{
  animation:startArtFloat 2.8s ease-in-out infinite alternate;
}
@keyframes startArtFloat{
  to{transform:translateY(-9px) rotate(-2.5deg)}
}
.start-button{
  position:relative;
  overflow:hidden;
  animation:startButtonPulse 1.35s ease-in-out infinite alternate;
}
.start-button::before{
  content:"";
  position:absolute;
  inset:-80% auto -80% -35%;
  width:24%;
  background:rgba(255,255,255,.30);
  transform:skewX(-18deg);
  animation:startButtonSweep 2.8s ease-in-out infinite;
}
@keyframes startButtonSweep{
  0%,38%{left:-35%;opacity:0}
  48%{opacity:.75}
  72%,100%{left:125%;opacity:0}
}
@keyframes startButtonPulse{
  to{box-shadow:9px 9px 0 var(--white),0 0 22px rgba(255,255,255,.22)}
}

/* READY演出 */
.countdown-screen{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at center,rgba(255,255,255,.12),transparent 32%),
    linear-gradient(135deg,var(--red-dark),var(--red));
}
.countdown-screen::before,
.countdown-screen::after{
  content:"";
  position:absolute;
  width:140%;
  height:24%;
  left:-20%;
  background:var(--black);
  pointer-events:none;
}
.countdown-screen::before{
  top:12%;
  transform:rotate(-7deg);
  animation:readySlashTop .9s ease-out both;
}
.countdown-screen::after{
  bottom:10%;
  transform:rotate(6deg);
  animation:readySlashBottom .9s ease-out both;
}
@keyframes readySlashTop{
  from{transform:translateX(-120%) rotate(-7deg)}
  to{transform:translateX(0) rotate(-7deg)}
}
@keyframes readySlashBottom{
  from{transform:translateX(120%) rotate(6deg)}
  to{transform:translateX(0) rotate(6deg)}
}
.countdown-value{
  position:relative;
  z-index:2;
}
.countdown-value.ready{
  font-size:clamp(88px,17vw,190px);
  letter-spacing:.02em;
  transform:rotate(-2deg);
  animation:readyTextIn .62s cubic-bezier(.18,1.45,.25,1) both;
}
.countdown-value.number{
  animation:countPop .46s cubic-bezier(.2,1.6,.4,1) both;
}
.countdown-value.start{
  font-size:clamp(84px,18vw,190px);
  animation:countStartGo .58s cubic-bezier(.15,1.5,.3,1) both;
}
@keyframes readyTextIn{
  from{opacity:0;transform:scale(.35) rotate(-10deg)}
  70%{opacity:1;transform:scale(1.12) rotate(2deg)}
  to{transform:scale(1) rotate(-2deg)}
}

/* 正解選択肢：緑を使わず、赤地＋白文字で明確化 */
.answer-button.correct{
  opacity:1 !important;
  color:var(--white) !important;
  background:var(--red) !important;
  box-shadow:
    0 0 0 4px var(--white),
    0 0 28px rgba(213,0,0,.58),
    5px 5px 0 var(--black) !important;
}
.answer-button.correct .answer-key{
  color:var(--red) !important;
  background:var(--white) !important;
}
.answer-button.correct .answer-text{
  color:var(--white) !important;
}
.answer-button.wrong{
  color:var(--white) !important;
  background:var(--black) !important;
  box-shadow:
    0 0 0 4px var(--red),
    5px 5px 0 #4b0000 !important;
}
.answer-button.wrong .answer-text{color:var(--white) !important}

/* フィードバック：正解内容を主役に */
.feedback-panel{
  gap:16px;
}
.feedback-panel.success h2{
  box-shadow:
    0 0 0 4px var(--white),
    6px 6px 0 var(--red) !important;
}
.answer-reveal{
  width:min(760px,100%);
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:13px;
  padding:14px 18px;
  color:var(--black);
  background:var(--white);
  border:5px solid var(--red);
  box-shadow:
    8px 8px 0 var(--black),
    0 0 30px rgba(213,0,0,.34);
  animation:answerRevealIn .52s .12s cubic-bezier(.16,1.25,.24,1) both;
}
.answer-reveal-caption{
  grid-column:1/-1;
  justify-self:start;
  padding:5px 9px;
  color:var(--white);
  background:var(--black);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:13px;
  letter-spacing:.15em;
}
.answer-reveal-letter{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  color:var(--white);
  background:var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:39px;
  line-height:1;
}
.answer-reveal-text{
  min-width:0;
  color:var(--black);
  font-family:"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(27px,3.8vw,48px);
  line-height:1.08;
  text-align:left;
  word-break:break-word;
}
.feedback-next{
  width:max-content !important;
  max-width:100%;
  margin-top:4px !important;
  padding:10px 17px !important;
  color:var(--white) !important;
  background:var(--black) !important;
  font-size:clamp(17px,1.9vw,24px) !important;
  letter-spacing:.04em;
}
@keyframes answerRevealIn{
  from{opacity:0;transform:translateY(24px) scale(.90) rotate(-2deg)}
  to{opacity:1;transform:none}
}

/* 正解系の演出をフェニックスカラーへ */
.feedback-panel.success::before{
  border-color:var(--red) !important;
  box-shadow:0 0 34px rgba(213,0,0,.45);
}
.result-panel.perfect h2{
  animation:perfectTitlePulseRed 1.05s ease-in-out infinite alternate;
}
@keyframes perfectTitlePulseRed{
  to{
    transform:scale(1.025);
    box-shadow:
      0 0 0 4px var(--white),
      0 0 38px rgba(213,0,0,.55),
      6px 6px 0 var(--red);
  }
}

/* スタッフ画面のOKも赤黒白で統一 */
.import-result.ok{
  color:var(--black);
  background:var(--white);
  border-left:6px solid var(--red);
}
.status.ok{
  color:var(--white);
  background:var(--black);
  border-left:7px solid var(--red);
}

@media(max-width:850px){
  .answer-reveal{
    grid-template-columns:auto minmax(0,1fr);
    gap:10px;
    padding:12px;
  }
  .answer-reveal-caption{grid-column:1/-1}
  .answer-reveal-letter{
    width:58px;
    height:58px;
    font-size:31px;
  }
  .answer-reveal-text{
    font-size:clamp(23px,6vw,34px);
  }
}


/* =========================================================
   v1.5 FEEDBACK REVIEW
   問題文・自分の回答・正解を確認できる結果画面
   ========================================================= */

.feedback-panel{
  gap:12px;
}

.feedback-question{
  width:min(760px,100%);
  display:grid;
  gap:7px;
  padding:12px 16px;
  color:var(--white);
  background:var(--black);
  border-left:7px solid var(--red);
  box-shadow:5px 5px 0 rgba(255,255,255,.14);
  text-align:left;
  animation:feedbackQuestionIn .42s ease-out both;
}

.feedback-question>span{
  width:max-content;
  padding:4px 8px;
  color:var(--black);
  background:var(--white);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:12px;
  letter-spacing:.14em;
}

.feedback-question p{
  margin:0;
  color:var(--white);
  font-family:"Arial Black","Hiragino Sans",sans-serif;
  font-size:clamp(18px,2.2vw,29px);
  line-height:1.22;
  text-align:left;
  word-break:break-word;
}

@keyframes feedbackQuestionIn{
  from{opacity:0;transform:translateX(-24px)}
  to{opacity:1;transform:none}
}

.user-answer-reveal{
  color:var(--white);
  background:var(--black);
  border-color:var(--red);
  box-shadow:
    8px 8px 0 #4c0000,
    0 0 22px rgba(213,0,0,.24);
}

.user-answer-reveal .answer-reveal-caption{
  color:var(--white);
  background:var(--red);
}

.user-answer-reveal .answer-reveal-letter{
  color:var(--white);
  background:#62000d;
  box-shadow:inset 0 0 0 3px var(--red);
}

.user-answer-reveal .answer-reveal-text{
  color:var(--white);
}

.correct-answer-reveal{
  border-color:var(--red);
}

.correct-answer-reveal .answer-reveal-caption{
  color:var(--white);
  background:var(--red);
}

.feedback-panel.fail .user-answer-reveal{
  animation-delay:.08s;
}

.feedback-panel.fail .correct-answer-reveal{
  animation-delay:.28s;
}

.feedback-panel.success .correct-answer-reveal,
.feedback-panel.time .correct-answer-reveal{
  animation-delay:.18s;
}

/* 結果確認中は情報量が増えるため、タイトルを少しコンパクトに */
.feedback-panel h2{
  font-size:clamp(44px,6.2vw,72px);
  padding:8px 15px 10px;
}

.feedback-panel.time h2{
  font-size:clamp(40px,5.8vw,66px);
}

.feedback-next{
  margin-top:1px !important;
}

/* 非表示属性を確実に優先 */
.answer-reveal[hidden]{
  display:none !important;
}

@media(max-width:850px){
  .feedback-question{
    padding:10px 12px;
  }

  .feedback-question p{
    font-size:clamp(17px,4.5vw,24px);
  }

  .feedback-panel{
    gap:9px;
  }

  .feedback-panel h2{
    font-size:clamp(36px,10vw,56px);
  }
}

@media(max-height:650px) and (orientation:landscape){
  .feedback-screen{
    padding:10px 0;
  }

  .feedback-panel{
    gap:7px;
  }

  .feedback-panel h2{
    font-size:44px;
    padding:6px 12px 8px;
  }

  .feedback-question{
    padding:8px 12px;
  }

  .feedback-question p{
    font-size:18px;
  }

  .answer-reveal{
    padding:8px 12px;
    gap:9px;
  }

  .answer-reveal-caption{
    font-size:10px;
    padding:3px 7px;
  }

  .answer-reveal-letter{
    width:54px;
    height:54px;
    font-size:29px;
  }

  .answer-reveal-text{
    font-size:27px;
  }

  .feedback-next{
    padding:7px 13px !important;
    font-size:16px !important;
  }
}


/* =========================================================
   v1.6 STYLISH MOTION PASS
   Core layout and clickable interface remain unchanged.
   Red / black / white only. Flat fills, halftone, slashes,
   immediate reaction and screen-specific motion.
   ========================================================= */

/* Scene-responsive abstract background */
.fx-backdrop{
  position:fixed;
  inset:0;
  z-index:-.5;
  overflow:hidden;
  pointer-events:none;
  opacity:.72;
}
.fx-backdrop-slash,
.fx-backdrop-dots{
  position:absolute;
  display:block;
  pointer-events:none;
}
.fx-backdrop-slash{
  height:13vh;
  min-height:62px;
  background:var(--black);
  transform:rotate(-9deg) skewX(-8deg);
  transition:transform .55s cubic-bezier(.17,.85,.24,1),opacity .3s ease;
}
.slash-a{width:64vw;left:-18vw;top:10vh}
.slash-b{width:72vw;right:-24vw;bottom:12vh;transform:rotate(8deg) skewX(8deg)}
.slash-c{width:38vw;right:-12vw;top:42vh;background:var(--white);opacity:.18;transform:rotate(-18deg)}
.fx-backdrop-dots{
  width:290px;
  height:290px;
  opacity:.22;
  background:radial-gradient(circle,var(--black) 0 2px,transparent 2.7px) 0 0/14px 14px;
}
.dots-a{right:5vw;top:10vh;transform:rotate(8deg)}
.dots-b{left:4vw;bottom:4vh;transform:rotate(-12deg);background:radial-gradient(circle,var(--white) 0 2px,transparent 2.7px) 0 0/14px 14px}

/* Different compositions per screen, with no layout changes */
.fx-backdrop.scene-start .slash-a{transform:translateX(0) rotate(-9deg) skewX(-8deg)}
.fx-backdrop.scene-start .slash-b{transform:translateX(0) rotate(8deg) skewX(8deg)}
.fx-backdrop.scene-countdown .slash-a{transform:translateX(18vw) rotate(-14deg) scaleX(1.25)}
.fx-backdrop.scene-countdown .slash-b{transform:translateX(-18vw) rotate(13deg) scaleX(1.25)}
.fx-backdrop.scene-quiz{opacity:.28}
.fx-backdrop.scene-quiz .slash-a{transform:translateX(-34vw) rotate(-4deg)}
.fx-backdrop.scene-quiz .slash-b{transform:translateX(34vw) rotate(4deg)}
.fx-backdrop.scene-feedback .slash-a,
.fx-backdrop.scene-reach .slash-a,
.fx-backdrop.scene-result .slash-a{transform:translateX(24vw) rotate(-16deg) scaleX(1.35)}
.fx-backdrop.scene-feedback .slash-b,
.fx-backdrop.scene-reach .slash-b,
.fx-backdrop.scene-result .slash-b{transform:translateX(-24vw) rotate(15deg) scaleX(1.35)}

/* Four-piece hard wipe */
.transition-curtain{
  position:fixed;
  inset:0;
  z-index:96;
  pointer-events:none;
  overflow:hidden;
}
.transition-curtain span{
  position:absolute;
  left:-18%;
  width:136%;
  height:31%;
  background:var(--red);
  transform:translateX(-125%) skewX(-16deg);
}
.transition-curtain span:nth-child(1){top:-5%}
.transition-curtain span:nth-child(2){top:22%}
.transition-curtain span:nth-child(3){top:49%}
.transition-curtain span:nth-child(4){top:76%}
.transition-curtain.active span{animation:curtainSlash .70s cubic-bezier(.18,.82,.27,1) both}
.transition-curtain.active span:nth-child(2){animation-delay:.025s}
.transition-curtain.active span:nth-child(3){animation-delay:.05s}
.transition-curtain.active span:nth-child(4){animation-delay:.075s}
.transition-curtain.black span,
.transition-curtain.black-fast span{background:var(--black)}
.transition-curtain.white span,
.transition-curtain.white-fast span{background:var(--white)}
.transition-curtain.red span,
.transition-curtain.red-fast span{background:var(--red)}
.transition-curtain.black-fast.active span,
.transition-curtain.white-fast.active span,
.transition-curtain.red-fast.active span{animation-duration:.48s}
@keyframes curtainSlash{
  0%{transform:translateX(-125%) skewX(-16deg)}
  43%{transform:translateX(0) skewX(-16deg)}
  57%{transform:translateX(0) skewX(-16deg)}
  100%{transform:translateX(125%) skewX(-16deg)}
}

/* Fast graphic impact lines */
.fx-speed-line{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--len);
  height:var(--thick);
  background:var(--c);
  transform-origin:left center;
  transform:translate(-50%,-50%) rotate(var(--rot)) scaleX(.06);
  animation:speedLineHit var(--time) cubic-bezier(.1,.75,.18,1) forwards;
  animation-delay:var(--delay);
}
@keyframes speedLineHit{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) scaleX(.06)}
  28%{opacity:1}
  68%{transform:translate(-50%,-50%) rotate(var(--rot)) scaleX(1)}
  100%{opacity:0;transform:translate(calc(-50% + 55px),-50%) rotate(var(--rot)) scaleX(1.08)}
}

/* Radial flat shards */
.fx-comic-ray{
  position:absolute;
  left:50%;
  top:50%;
  width:var(--width);
  height:var(--length);
  background:var(--color);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(var(--angle)) scaleY(.03);
  animation:comicRayHit .82s cubic-bezier(.08,.82,.2,1) forwards;
  animation-delay:var(--delay);
  opacity:.95;
}
@keyframes comicRayHit{
  0%{opacity:0;transform:translate(-50%,-100%) rotate(var(--angle)) scaleY(.03)}
  38%{opacity:.95}
  72%{transform:translate(-50%,-100%) rotate(var(--angle)) scaleY(1)}
  100%{opacity:0;transform:translate(-50%,-100%) rotate(var(--angle)) scaleY(1.18)}
}

/* Halftone pulse */
.fx-halftone-pop{
  position:absolute;
  left:50%;
  top:50%;
  width:min(88vw,960px);
  aspect-ratio:1;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.12);
  opacity:0;
  background:radial-gradient(circle,var(--black) 0 3px,transparent 3.6px) 0 0/18px 18px;
  animation:halftonePop .92s ease-out forwards;
}
.fx-halftone-pop.white{background:radial-gradient(circle,var(--white) 0 3px,transparent 3.6px) 0 0/18px 18px}
.fx-halftone-pop.red{background:radial-gradient(circle,var(--red) 0 3px,transparent 3.6px) 0 0/18px 18px}
@keyframes halftonePop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(-8deg)}
  26%{opacity:.52}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.2) rotate(8deg)}
}

/* Start screen: flat graphic energy, no geometry change */
.start-frame{
  background:var(--red);
}
.start-frame::after{
  content:"";
  position:absolute;
  right:-90px;
  top:92px;
  width:310px;
  height:310px;
  border:36px solid var(--black);
  border-radius:50%;
  opacity:.16;
  animation:startCircleDrift 5s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes startCircleDrift{
  to{transform:translate(-18px,12px) rotate(8deg)}
}
.start-copy h1{
  filter:drop-shadow(0 0 0 transparent);
  animation:startHeadlineBreath 2.4s ease-in-out infinite alternate;
}
@keyframes startHeadlineBreath{
  to{transform:translateY(-3px)}
}
.start-button{
  isolation:isolate;
}
.start-button::after{
  animation:startArrowBeat .68s ease-in-out infinite alternate;
}
@keyframes startArrowBeat{
  to{transform:translateY(-52%) translateX(7px) scale(1.12)}
}
.start-art strong{
  animation:startNumberBeat 1.4s steps(2,end) infinite;
}
@keyframes startNumberBeat{
  50%{transform:translateX(4px);text-shadow:-5px 5px 0 var(--white)}
}

/* Question entry feels cut-in, while layout remains identical */
.quiz-frame.fx-enter{
  animation:quizCutIn .44s cubic-bezier(.12,.82,.2,1) both;
}
@keyframes quizCutIn{
  from{opacity:0;transform:translateX(36px);clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
  to{opacity:1;transform:none;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
}
.question-box.fx-question-enter{
  animation:questionCutIn .42s cubic-bezier(.12,.85,.2,1) both;
}
@keyframes questionCutIn{
  from{opacity:0;transform:translateX(-34px);clip-path:inset(0 100% 0 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
}
.answer-button{
  animation:answerSnapIn .30s cubic-bezier(.12,.88,.2,1.18) both;
}
@keyframes answerSnapIn{
  from{opacity:0;transform:translateX(calc((var(--answer-index) - 1.5) * 22px)) scale(.95)}
  to{opacity:1;transform:none}
}

/* Feedback layers are allowed to be loud; content stays readable */
.feedback-screen.active::before,
.reach-screen.active::before,
.result-screen.active::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.16;
  background:
    linear-gradient(118deg,transparent 0 27%,var(--red) 27% 29%,transparent 29% 63%,var(--white) 63% 64%,transparent 64%),
    radial-gradient(circle,var(--white) 0 2px,transparent 2.6px) 87% 16%/15px 15px;
}
.feedback-panel,.reach-panel,.result-panel{z-index:1}
.feedback-panel h2,
.reach-panel h2,
.result-panel h2{
  animation:headlineHit .48s cubic-bezier(.1,1.25,.22,1) both;
}
@keyframes headlineHit{
  from{opacity:0;transform:translateX(-38px) rotate(-2deg) scale(.86)}
  70%{opacity:1;transform:translateX(4px) rotate(.5deg) scale(1.04)}
  to{transform:none}
}
.answer-reveal{
  position:relative;
  overflow:hidden;
}
.answer-reveal::after{
  content:"";
  position:absolute;
  inset:-100% auto -100% -30%;
  width:18%;
  background:rgba(213,0,0,.18);
  transform:skewX(-18deg);
  animation:answerCardSweep 1.8s .42s ease-out both;
  pointer-events:none;
}
@keyframes answerCardSweep{
  to{left:126%}
}

/* Reach screen: flat red/black/white poster explosion */
.reach-screen{
  background:var(--black);
}
.reach-screen::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:min(94vw,1100px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:.25;
  background:repeating-conic-gradient(var(--red) 0 7deg,transparent 7deg 15deg);
  animation:reachSpin 8s linear infinite;
}
@keyframes reachSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.reach-panel{z-index:2}
.reach-panel::before{
  border-color:var(--white);
  box-shadow:0 0 0 13px var(--red),0 0 44px rgba(213,0,0,.58);
}

/* Perfect clear: no green, club palette only */
.result-panel.perfect h2{
  box-shadow:
    0 0 0 4px var(--white),
    0 0 40px rgba(213,0,0,.58),
    7px 7px 0 var(--red);
}
.result-panel.perfect::before{
  content:"PERFECT";
  position:absolute;
  right:-36px;
  top:-86px;
  z-index:-1;
  color:rgba(213,0,0,.24);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(100px,19vw,220px);
  line-height:1;
  transform:rotate(-8deg);
  letter-spacing:-.04em;
  pointer-events:none;
}

/* Immediate pressed feeling */
.start-button:active,
.answer-button:active,
.reset-button:active{
  filter:brightness(.92) contrast(1.12);
}

/* Avoid motion overload on small displays */
@media(max-width:850px){
  .fx-backdrop-dots{width:190px;height:190px}
  .fx-comic-ray{max-height:58vh}
  .start-frame::after{width:210px;height:210px;border-width:24px}
}


/* =========================================================
   v1.7 GAME FEEL / EMOTIONAL ARC
   Core interface geometry stays unchanged.
   ========================================================= */

/* Graphic stamp overlay */
.fx-stamp{
  position:fixed;
  inset:0;
  z-index:99;
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
}
.fx-stamp span{
  max-width:92vw;
  padding:11px 32px 14px;
  color:var(--black);
  background:var(--white);
  border:5px solid var(--black);
  box-shadow:11px 11px 0 var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(46px,9vw,116px);
  line-height:.88;
  letter-spacing:.025em;
  text-align:center;
  white-space:nowrap;
  transform:scale(.35) rotate(-7deg);
}
.fx-stamp.red span{
  color:var(--white);
  background:var(--red);
  border-color:var(--white);
  box-shadow:11px 11px 0 var(--black);
}
.fx-stamp.black span{
  color:var(--white);
  background:var(--black);
  border-color:var(--red);
  box-shadow:11px 11px 0 var(--white);
}
.fx-stamp.show{
  opacity:1;
  visibility:visible;
}
.fx-stamp.show span{
  animation:stampHit .62s cubic-bezier(.12,1.32,.22,1) both;
}
@keyframes stampHit{
  0%{opacity:0;transform:scale(.28) rotate(-10deg)}
  52%{opacity:1;transform:scale(1.12) rotate(2deg)}
  72%{transform:scale(.97) rotate(-1deg)}
  100%{opacity:0;transform:scale(1.04) rotate(0)}
}

/* Locked-in micro interaction */
.answer-button.locked-in{
  transform:scale(.965) !important;
  box-shadow:
    inset 0 0 0 5px var(--black),
    3px 3px 0 var(--red) !important;
  filter:contrast(1.08);
}
.answer-button.locked-in .answer-key{
  animation:lockKey .12s steps(2,end) infinite;
}
@keyframes lockKey{
  50%{transform:translateX(2px)}
}

/* Heat progression after consecutive correct answers */
body[data-streak="1"] .quiz-content{
  background:
    radial-gradient(circle,rgba(213,0,0,.10) 0 2px,transparent 2.7px) 90% 20%/14px 14px,
    var(--black);
}
body[data-streak="1"] .question-glow{
  filter:
    drop-shadow(0 0 6px var(--white))
    drop-shadow(0 0 16px rgba(213,0,0,.60));
}
body[data-streak="1"] .progress-label{
  box-shadow:5px 5px 0 var(--red),0 0 18px rgba(213,0,0,.34);
}
body[data-streak="2"] .quiz-content{
  background:
    linear-gradient(145deg,transparent 0 80%,rgba(213,0,0,.20) 80% 86%,transparent 86%),
    radial-gradient(circle,rgba(213,0,0,.16) 0 2px,transparent 2.7px) 88% 18%/13px 13px,
    var(--black);
}
body[data-streak="2"] .question-glow{
  stroke:var(--red);
  filter:
    drop-shadow(0 0 7px var(--red))
    drop-shadow(0 0 20px rgba(213,0,0,.78));
}
body[data-streak="2"] .circle-timer{
  animation:finalTimerHeat .58s ease-in-out infinite alternate;
}
@keyframes finalTimerHeat{
  to{filter:drop-shadow(5px 5px 0 var(--white)) drop-shadow(0 0 18px rgba(213,0,0,.62))}
}

/* Last-five-seconds escalation */
body.danger-soft .quiz-frame{
  animation:dangerSoft .30s ease-out both;
}
body.danger-medium .quiz-frame{
  animation:dangerMedium .32s ease-out both;
}
body.danger-hard .quiz-frame{
  animation:dangerHard .34s ease-out both;
}
@keyframes dangerSoft{
  50%{filter:brightness(1.06)}
}
@keyframes dangerMedium{
  32%{filter:brightness(1.14)}
  64%{filter:brightness(.96)}
}
@keyframes dangerHard{
  0%,100%{transform:translateX(0)}
  22%{transform:translateX(-3px);filter:brightness(1.20)}
  48%{transform:translateX(3px)}
  72%{transform:translateX(-1px)}
}

/* Staged answer review */
.feedback-question{
  animation-delay:.05s !important;
}
.feedback-panel.fail .user-answer-reveal{
  animation-delay:.28s !important;
}
.feedback-panel .correct-answer-reveal{
  animation-delay:.54s !important;
}
.feedback-panel .feedback-next{
  opacity:0;
  animation:feedbackNextIn .34s .86s ease-out forwards;
}
@keyframes feedbackNextIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
.feedback-panel.success .correct-answer-reveal{
  animation-delay:.32s !important;
}
.feedback-panel.time .correct-answer-reveal{
  animation-delay:.40s !important;
}

/* Attract-mode enhancement */
.start-frame .pack-label{
  animation:packLabelBlink 3.2s steps(2,end) infinite;
}
@keyframes packLabelBlink{
  50%{opacity:.72}
}

/* Perfect clear has a second steady afterglow */
.result-panel.perfect{
  filter:drop-shadow(0 0 18px rgba(213,0,0,.26));
}
.result-panel.perfect .result-badge{
  animation:kingBadge 1.15s ease-in-out infinite alternate;
}
@keyframes kingBadge{
  to{transform:scale(1.035);box-shadow:0 0 24px rgba(213,0,0,.46)}
}

/* Effect level fallbacks */
body[data-effect="standard"] .fx-backdrop{
  opacity:.48;
}
body[data-effect="standard"] .start-frame::before{
  animation-duration:22s;
}
body[data-effect="light"] .fx-backdrop,
body[data-effect="light"] .start-frame::before,
body[data-effect="light"] .start-frame::after{
  display:none;
}
body[data-effect="light"] .transition-curtain span{
  animation-duration:.32s !important;
}
body[data-effect="light"] .start-copy h1,
body[data-effect="light"] .start-copy h1 span,
body[data-effect="light"] .start-art,
body[data-effect="light"] .start-button,
body[data-effect="light"] .result-panel.perfect h2,
body[data-effect="light"] .result-panel.perfect .result-badge{
  animation:none !important;
}
body[data-effect="light"] .fx-stamp span{
  font-size:clamp(38px,7vw,78px);
}

/* Staff select consistency */
.staff-card select{
  width:100%;
  min-height:42px;
  padding:8px 10px;
  border:1px solid #999;
  color:var(--black);
  background:var(--white);
  font:inherit;
}

/* Motion accessibility */
@media (prefers-reduced-motion:reduce){
  .fx-backdrop,
  .fx-layer,
  .transition-curtain,
  .screen-flash,
  .fx-stamp{
    display:none !important;
  }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media(max-width:850px){
  .fx-stamp span{
    padding:9px 18px 11px;
    border-width:4px;
    box-shadow:7px 7px 0 var(--red);
    font-size:clamp(38px,12vw,70px);
    white-space:normal;
  }
}


/* =========================================================
   v1.8 PACING / FOCUS PASS
   Persona-like impact remains, followed by calm reading time.
   ========================================================= */

.fx-backdrop.scene-quiz{
  opacity:.12 !important;
}

/* 0.65 sec settling window before the timer starts */
.answer-grid.settling .answer-button{
  opacity:.82;
  filter:saturate(.88);
  pointer-events:none;
}
.answer-grid:not(.settling) .answer-button{
  transition:
    opacity .18s ease,
    filter .18s ease,
    transform .11s ease,
    box-shadow .11s ease;
}

/* Calm transition for question two and three */
.quiz-frame.fx-enter-soft{
  animation:quizEnterSoft .38s ease-out both;
}
@keyframes quizEnterSoft{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* Slower staged review */
.feedback-question{
  opacity:0;
  animation:feedbackQuestionCalm .42s .18s ease-out forwards !important;
}
.feedback-panel.fail .user-answer-reveal{
  opacity:0;
  animation:answerRevealCalm .46s .82s cubic-bezier(.16,.95,.24,1) forwards !important;
}
.feedback-panel .correct-answer-reveal{
  opacity:0;
  animation:answerRevealCalm .48s 1.45s cubic-bezier(.16,.95,.24,1) forwards !important;
}
.feedback-panel.success .correct-answer-reveal{
  animation-delay:.78s !important;
}
.feedback-panel.time .correct-answer-reveal{
  animation-delay:1.08s !important;
}
.feedback-panel .feedback-next{
  opacity:0;
  animation:feedbackNextCalm .34s 2.15s ease-out forwards !important;
}
.feedback-panel.success .feedback-next{
  animation-delay:1.55s !important;
}
.feedback-panel.time .feedback-next{
  animation-delay:1.85s !important;
}

@keyframes feedbackQuestionCalm{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes answerRevealCalm{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes feedbackNextCalm{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* One sweep, then stillness */
.feedback-panel .answer-reveal::after{
  animation-duration:1.05s !important;
  animation-iteration-count:1 !important;
}
.feedback-panel.leaving{
  animation:feedbackLeave .48s ease-in both;
}
@keyframes feedbackLeave{
  to{opacity:0;transform:translateY(-12px) scale(.985)}
}

/* Timer urgency stays readable; hard effects begin at 3 seconds */
.question-box.urgent{
  transition:box-shadow .25s ease;
}
.circle-timer.urgent{
  transition:filter .25s ease,background .25s ease;
}

/* Cue that the 15-second clock is now active */
.answer-grid:not(.settling){
  animation:answersLive .26s ease-out both;
}
@keyframes answersLive{
  0%{filter:brightness(.94)}
  55%{filter:brightness(1.08)}
  100%{filter:brightness(1)}
}

@media(max-width:850px){
  .feedback-panel .feedback-next{
    animation-delay:2.0s !important;
  }
  .feedback-panel.success .feedback-next{
    animation-delay:1.45s !important;
  }
}


/* =========================================================
   v1.9 JUDGEMENT FLOW
   Remove redundant CORRECT / MISS stamps.
   Put the impact into the selected option and answer review.
   ========================================================= */

/* Answer grid becomes the judgement stage */
.answer-grid.judgement-hit{
  position:relative;
}
.answer-grid.judgement-hit::before{
  content:"";
  position:absolute;
  inset:-14px;
  z-index:3;
  pointer-events:none;
  opacity:0;
  border:4px solid var(--red);
  animation:judgementFrame .72s ease-out both;
}
.answer-grid.judgement-hit.timeout-hit::before{
  border-color:var(--white);
  box-shadow:0 0 0 7px var(--red);
}
@keyframes judgementFrame{
  0%{opacity:0;transform:scale(.96)}
  24%{opacity:.85}
  68%{opacity:.34;transform:scale(1.015)}
  100%{opacity:0;transform:scale(1.025)}
}

/* Correct answer lands strongly on the button itself */
.answer-grid.judgement-hit .answer-button.correct{
  animation:correctButtonLand .72s cubic-bezier(.12,1.22,.22,1) both !important;
}
@keyframes correctButtonLand{
  0%{transform:scale(.97);filter:brightness(1)}
  30%{transform:scale(1.055);filter:brightness(1.28)}
  56%{transform:scale(.995);filter:brightness(1.05)}
  100%{transform:scale(1);filter:brightness(1)}
}

/* Wrong selection breaks, while the true answer remains stable */
.answer-grid.judgement-hit .answer-button.wrong{
  animation:wrongButtonBreak .62s ease-out both !important;
}
@keyframes wrongButtonBreak{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-8px) rotate(-.5deg)}
  38%{transform:translateX(8px) rotate(.5deg)}
  58%{transform:translateX(-4px)}
  76%{transform:translateX(2px)}
}

/* A single graphic sweep over the correct option */
.answer-grid.judgement-hit .answer-button.correct::after{
  content:"";
  position:absolute;
  inset:-70% auto -70% -28%;
  display:block !important;
  width:18%;
  height:auto;
  background:rgba(255,255,255,.68);
  transform:skewX(-18deg);
  animation:correctOptionSweep .72s ease-out both;
  z-index:5;
  pointer-events:none;
}
@keyframes correctOptionSweep{
  0%{left:-28%;opacity:0}
  18%{opacity:.88}
  100%{left:126%;opacity:0}
}

/* Feedback screen is the judgement itself */
.feedback-panel.entering h2{
  animation:judgementTitleLand .54s cubic-bezier(.12,1.18,.22,1) both !important;
}
@keyframes judgementTitleLand{
  0%{opacity:0;transform:translateX(-34px) scale(.90)}
  68%{opacity:1;transform:translateX(5px) scale(1.035)}
  100%{transform:none}
}

/* Make the correct answer card the strongest secondary beat */
.feedback-panel.entering .correct-answer-reveal{
  position:relative;
}
.feedback-panel.entering .correct-answer-reveal::before{
  content:"";
  position:absolute;
  inset:-7px;
  z-index:-1;
  background:var(--red);
  opacity:0;
  animation:answerCardImpact .82s 1.02s ease-out both;
}
.feedback-panel.success.entering .correct-answer-reveal::before{
  animation-delay:.62s;
}
.feedback-panel.time.entering .correct-answer-reveal::before{
  animation-delay:.88s;
}
@keyframes answerCardImpact{
  0%{opacity:0;transform:scale(.92)}
  28%{opacity:.82}
  62%{opacity:.30;transform:scale(1.025)}
  100%{opacity:0;transform:scale(1.045)}
}

/* Remove any expectation of an extra intermediate judgement layer */
.feedback-screen{
  isolation:isolate;
}
.feedback-panel{
  position:relative;
  z-index:2;
}

/* Preserve important stamps only: READY, FINAL QUESTION, PERFECT CLEAR, QUIZ KING */
body[data-scene="feedback"] .fx-stamp{
  display:none !important;
}

@media(max-width:850px){
  .answer-grid.judgement-hit::before{
    inset:-8px;
    border-width:3px;
  }
}


/* =========================================================
   v2.0 EXIT CUE
   NEXT is an exit sign, not another judgement screen.
   ========================================================= */

.next-cue{
  width:min(760px,100%);
  min-height:62px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  justify-self:end;
  margin-top:0;
  padding:9px 17px 10px;
  color:var(--white);
  background:transparent;
  opacity:0;
  transform:translateX(30px);
  pointer-events:none;
}

.next-cue span{
  padding:8px 17px 9px;
  color:var(--white);
  background:var(--black);
  border-left:7px solid var(--red);
  font-family:Impact,"Arial Black",sans-serif;
  font-size:clamp(22px,3vw,38px);
  line-height:1;
  letter-spacing:.075em;
  white-space:nowrap;
  box-shadow:5px 5px 0 rgba(213,0,0,.45);
}

.next-cue b{
  display:grid;
  place-items:center;
  width:56px;
  height:48px;
  color:var(--white);
  background:var(--red);
  font-family:Arial,sans-serif;
  font-size:37px;
  line-height:1;
  box-shadow:5px 5px 0 var(--white);
}

.next-cue.show{
  animation:nextCueIn .44s cubic-bezier(.12,1.12,.22,1) forwards;
}

.next-cue.show b{
  animation:nextArrowBeat .46s ease-in-out infinite alternate;
}

.next-cue.final span{
  color:var(--black);
  background:var(--white);
  border-left-color:var(--red);
  box-shadow:6px 6px 0 var(--red);
}

.next-cue.final b{
  color:var(--red);
  background:var(--white);
  box-shadow:5px 5px 0 var(--red);
}

.next-cue.result span{
  color:var(--black);
  background:var(--white);
  border-left-color:var(--black);
  box-shadow:6px 6px 0 var(--red);
}

.next-cue.result b{
  color:var(--white);
  background:var(--black);
  box-shadow:5px 5px 0 var(--red);
}

@keyframes nextCueIn{
  0%{opacity:0;transform:translateX(34px)}
  72%{opacity:1;transform:translateX(-4px)}
  100%{opacity:1;transform:none}
}

@keyframes nextArrowBeat{
  to{transform:translateX(7px) scale(1.06)}
}

/* Keep the exit cue visually below the answer information */
.feedback-panel{
  align-content:center;
}

.feedback-panel .next-cue{
  animation-delay:0s;
}

/* Prevent the Japanese transition note from competing with NEXT */
.feedback-next{
  font-size:clamp(14px,1.6vw,20px) !important;
  opacity:.72;
  box-shadow:none !important;
  background:transparent !important;
  padding:3px 8px !important;
}

/* Cue is the last thing visible before leaving */
.feedback-panel.leaving .next-cue{
  opacity:1;
}

@media(max-width:850px){
  .next-cue{
    min-height:52px;
    gap:10px;
    padding:7px 5px;
  }

  .next-cue span{
    padding:7px 11px 8px;
    font-size:clamp(19px,5.4vw,29px);
  }

  .next-cue b{
    width:46px;
    height:42px;
    font-size:31px;
  }
}

@media(max-height:650px) and (orientation:landscape){
  .next-cue{
    min-height:44px;
    margin-top:-2px;
  }

  .next-cue span{
    padding:6px 12px 7px;
    font-size:22px;
  }

  .next-cue b{
    width:43px;
    height:36px;
    font-size:28px;
  }
}


/* =========================================================
   v2.1 QUESTION READY INTRO
   Q1 full countdown / Q2 brief READY / Q3 special intro.
   Core quiz interface is unchanged.
   ========================================================= */

.countdown-value.brief-ready{
  font-size:clamp(92px,19vw,210px);
  line-height:.88;
  letter-spacing:.02em;
  transform:rotate(-2deg);
  animation:briefReadyIn .66s cubic-bezier(.14,1.30,.24,1) both;
}

.countdown-value.final-label{
  max-width:94vw;
  padding:12px 28px 16px;
  color:var(--white);
  background:var(--black);
  border:5px solid var(--white);
  box-shadow:12px 12px 0 var(--red);
  font-size:clamp(58px,12vw,145px);
  line-height:.90;
  letter-spacing:.025em;
  white-space:nowrap;
  -webkit-text-stroke:0;
  text-shadow:none;
  transform:rotate(-2deg);
  animation:finalLabelIn .64s cubic-bezier(.12,1.30,.22,1) both;
}

.countdown-value.final-ready{
  max-width:94vw;
  color:var(--white);
  font-size:clamp(70px,15vw,170px);
  line-height:.88;
  letter-spacing:.015em;
  white-space:nowrap;
  transform:rotate(1deg);
  animation:finalReadyIn .68s cubic-bezier(.14,1.32,.24,1) both;
}

@keyframes briefReadyIn{
  0%{opacity:0;transform:translateX(-42px) scale(.78) rotate(-7deg)}
  68%{opacity:1;transform:translateX(5px) scale(1.06) rotate(1deg)}
  100%{transform:scale(1) rotate(-2deg)}
}

@keyframes finalLabelIn{
  0%{opacity:0;transform:translateX(70px) scale(.72) rotate(5deg)}
  70%{opacity:1;transform:translateX(-6px) scale(1.04) rotate(-3deg)}
  100%{transform:scale(1) rotate(-2deg)}
}

@keyframes finalReadyIn{
  0%{opacity:0;transform:scale(.35) rotate(-8deg)}
  68%{opacity:1;transform:scale(1.10) rotate(2deg)}
  100%{transform:scale(1) rotate(1deg)}
}

/* Q2 intro is intentionally lighter than the first full countdown */
body[data-scene="countdown"] .countdown-value.brief-ready{
  filter:
    drop-shadow(7px 7px 0 var(--black))
    drop-shadow(0 0 20px rgba(255,255,255,.28));
}

/* Q3 intro receives the strongest pre-question emphasis */
body[data-scene="countdown"] .countdown-value.final-label,
body[data-scene="countdown"] .countdown-value.final-ready{
  filter:drop-shadow(0 0 28px rgba(213,0,0,.42));
}

@media(max-width:850px){
  .countdown-value.final-label{
    padding:9px 14px 12px;
    border-width:4px;
    box-shadow:7px 7px 0 var(--red);
    font-size:clamp(42px,10vw,82px);
    white-space:normal;
    text-align:center;
  }

  .countdown-value.final-ready{
    font-size:clamp(48px,12vw,95px);
    white-space:normal;
    text-align:center;
  }
}


/* =========================================================
   v2.2 PHOENIX LOGO + LONGER FEEDBACK
   Add the club logo to the start and feedback screens.
   ========================================================= */

.screen-logo{
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}

.start-frame{
  position:relative;
}
.start-screen-logo{
  position:absolute;
  left:28px;
  top:72px;
  z-index:2;
  width:clamp(160px,20vw,245px);
  height:auto;
  filter:
    drop-shadow(4px 4px 0 rgba(255,255,255,.12))
    drop-shadow(0 0 18px rgba(213,0,0,.24));
  opacity:.97;
}

.start-content{
  position:relative;
  z-index:3;
  padding-top:28px;
}

/* feedback screen logo */
.feedback-panel{
  position:relative;
}
.feedback-screen-logo{
  width:clamp(145px,15vw,210px);
  height:auto;
  margin:0 0 6px;
  align-self:flex-start;
  filter:
    drop-shadow(4px 4px 0 rgba(255,255,255,.10))
    drop-shadow(0 0 14px rgba(213,0,0,.18));
  animation:feedbackLogoIn .48s cubic-bezier(.12,1.18,.22,1) both;
}

@keyframes feedbackLogoIn{
  0%{opacity:0;transform:translateX(-24px) scale(.94)}
  72%{opacity:1;transform:translateX(4px) scale(1.02)}
  100%{transform:none}
}

.feedback-panel h2{
  margin-top:0;
}

@media(max-width:850px){
  .start-screen-logo{
    left:14px;
    top:60px;
    width:clamp(118px,28vw,165px);
  }

  .start-content{
    padding-top:42px;
  }

  .feedback-screen-logo{
    width:clamp(105px,25vw,145px);
    margin-bottom:4px;
  }
}

@media(max-height:650px) and (orientation:landscape){
  .start-screen-logo{
    top:54px;
    left:18px;
    width:132px;
  }

  .start-content{
    padding-top:18px;
  }

  .feedback-screen-logo{
    width:118px;
    margin-bottom:2px;
  }
}


/* =========================================================
   v2.3 LOGO LAYOUT REFINEMENT
   ========================================================= */

/* Move start logo away from the TEAM30 label */
.start-screen-logo{
  left:auto !important;
  right:22px !important;
  top:66px !important;
  width:clamp(126px,15vw,195px) !important;
  opacity:.94;
}

/* Reduce extra top padding introduced in v2.2 */
.start-content{
  padding-top:8px !important;
}

/* Add logo to result screen */
.result-panel{
  position:relative;
}
.result-screen-logo{
  width:clamp(148px,16vw,214px);
  height:auto;
  margin:0 auto 8px;
  filter:
    drop-shadow(4px 4px 0 rgba(255,255,255,.10))
    drop-shadow(0 0 16px rgba(213,0,0,.22));
  animation:resultLogoIn .50s cubic-bezier(.12,1.18,.22,1) both;
}

@keyframes resultLogoIn{
  0%{opacity:0;transform:translateY(-18px) scale(.94)}
  72%{opacity:1;transform:translateY(2px) scale(1.02)}
  100%{transform:none}
}

@media(max-width:850px){
  .start-screen-logo{
    right:12px !important;
    top:58px !important;
    width:clamp(96px,23vw,138px) !important;
  }

  .start-content{
    padding-top:6px !important;
  }

  .result-screen-logo{
    width:clamp(110px,24vw,150px);
    margin-bottom:6px;
  }
}

@media(max-height:650px) and (orientation:landscape){
  .start-screen-logo{
    right:16px !important;
    top:50px !important;
    width:110px !important;
  }

  .start-content{
    padding-top:2px !important;
  }

  .result-screen-logo{
    width:116px;
    margin-bottom:4px;
  }
}


/* =========================================================
   v2.4 iPad / PWA
   ========================================================= */

html,
body{
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}

body{
  min-height:100dvh;
  touch-action:manipulation;
}

.app{
  min-height:100dvh;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
}

@supports(height:100dvh){
  .screen{
    height:min(820px, calc(100dvh - 36px));
  }

  .staff-panel{
    height:min(780px, calc(100dvh - 36px));
  }
}

body.pwa-standalone .fullscreen-button,
body.apple-tablet .fullscreen-button{
  display:none !important;
}

.ipad-install-hint{
  position:fixed;
  left:max(18px, env(safe-area-inset-left));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:80;
  display:flex;
  flex-direction:column;
  gap:3px;
  max-width:min(420px, calc(100vw - 36px));
  padding:12px 16px;
  color:#080808;
  background:#ffffff;
  border:3px solid #080808;
  box-shadow:7px 7px 0 #080808;
  font-size:14px;
  line-height:1.35;
}

.ipad-install-hint strong{
  color:#d50000;
  font-family:Impact,"Arial Black",sans-serif;
  font-size:18px;
  letter-spacing:.04em;
}

.pwa-ready-badge{
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:81;
  padding:10px 15px;
  color:#ffffff;
  background:#080808;
  border:2px solid #ffffff;
  box-shadow:5px 5px 0 #d50000;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.05em;
  transition:opacity .3s ease, transform .3s ease;
}

.pwa-ready-badge.is-hiding{
  opacity:0;
  transform:translateY(12px);
}

.orientation-notice{
  display:none;
}

@media(orientation:portrait) and (max-width:900px){
  body.apple-tablet .orientation-notice{
    position:fixed;
    inset:0;
    z-index:999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    padding:40px;
    color:#ffffff;
    background:
      repeating-linear-gradient(
        120deg,
        #d50000 0 80px,
        #b40000 81px 84px,
        #d50000 85px 160px
      );
    text-align:center;
  }

  body.apple-tablet .orientation-notice::before{
    content:"";
    position:absolute;
    inset:28px;
    border:5px solid #080808;
    box-shadow:12px 12px 0 #080808;
  }

  body.apple-tablet .orientation-notice img{
    position:relative;
    width:min(62vw, 360px);
    height:auto;
    padding:12px;
    background:#ffffff;
    border:4px solid #080808;
  }

  body.apple-tablet .orientation-notice strong{
    position:relative;
    font-size:clamp(25px, 6vw, 44px);
    font-weight:1000;
    text-shadow:4px 4px 0 #080808;
  }
}

@media(display-mode:standalone){
  .app{
    min-height:100dvh;
  }
}


/* =========================================================
   v2.5 RESPONSIVE SMARTPHONE PASS
   Smartphone portrait/landscape, iPhone and narrow browsers.
   iPad remains landscape-preferred, but phones are not locked.
   ========================================================= */

/* Dynamic viewport and safe-area baseline */
@media(max-width:950px), (max-height:500px){
  html,body{height:100%;min-height:100%;}
  body{overflow:hidden;}
  .app{
    width:100%;
    height:100dvh;
    min-height:100dvh;
    padding:0 !important;
    place-items:stretch;
  }
  .screen{
    width:100%;
    max-width:none;
    height:100dvh !important;
    min-height:0 !important;
  }
  .frame{
    width:100%;
    height:100%;
    border:0;
    box-shadow:none;
  }
  .fullscreen-button{display:none !important;}
  button{touch-action:manipulation;}
}

/* ---------------------------------------------------------
   Smartphone portrait
   --------------------------------------------------------- */
@media(max-width:600px) and (orientation:portrait){
  .topbar{
    height:56px;
    padding:0 max(11px,env(safe-area-inset-right)) 0 max(11px,env(safe-area-inset-left));
  }
  .brand-button{gap:8px;font-size:11px;letter-spacing:.055em;white-space:nowrap;}
  .brand-box{width:34px;height:34px;font-size:15px;}

  /* Start */
  .start-frame{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .start-screen-logo{
    position:relative !important;
    inset:auto !important;
    width:clamp(112px,34vw,145px) !important;
    margin:9px auto 0 !important;
    opacity:.96;
  }
  .start-content{
    height:auto !important;
    min-height:0;
    display:block;
    padding:5px 14px 14px !important;
  }
  .start-copy{width:100%;align-items:stretch;}
  .kicker{
    align-self:center;
    padding:6px 11px 7px 9px;
    font-size:9px;
    letter-spacing:.085em;
    text-align:center;
  }
  .start-copy h1{
    width:100%;
    margin:10px 0 10px;
    font-size:clamp(39px,12.5vw,57px);
    line-height:.87;
    text-align:center;
    text-shadow:4px 4px 0 var(--black);
  }
  .start-copy h1 span{
    width:100%;
    margin-top:8px;
    padding:9px 8px 10px;
    font-size:.70em;
    text-align:center;
  }
  .lead{
    margin:0 0 10px;
    padding:8px 10px;
    font-size:13px;
    line-height:1.35;
    text-align:center;
    box-shadow:3px 3px 0 var(--black);
  }
  .rule-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
    margin-bottom:11px;
  }
  .rule-grid>div,
  .rule-grid>div:last-child{
    grid-column:auto !important;
    min-height:50px;
    flex-direction:column;
    justify-content:center;
    gap:1px;
    padding:4px 3px;
    text-align:center;
  }
  .rule-grid b{font-size:20px;line-height:1;}
  .rule-grid span{font-size:10px;line-height:1.15;}
  .start-actions{grid-template-columns:1fr;gap:8px;}
  .start-button{
    min-height:58px;
    padding:10px 14px;
    font-size:clamp(20px,6.2vw,26px);
    box-shadow:5px 5px 0 var(--white);
  }
  .start-actions p{width:100%;padding:7px 9px;font-size:10px;text-align:center;}
  .start-art{display:none;}
  .pack-label{
    position:relative;
    inset:auto;
    width:calc(100% - 28px);
    max-width:none;
    margin:0 14px 10px;
    font-size:9px;
    text-align:center;
  }

  /* Quiz */
  .quiz-header{
    height:60px;
    grid-template-columns:auto 1fr auto;
    gap:8px;
    padding:0 10px;
  }
  .progress-label{
    padding:5px 7px 6px;
    font-size:15px;
    white-space:nowrap;
    box-shadow:3px 3px 0 var(--red);
  }
  .progress-bars{display:flex;justify-content:center;gap:5px;}
  .progress-bars span{width:18px;height:6px;}
  .circle-timer{width:52px;height:52px;filter:drop-shadow(2px 2px 0 var(--white));}
  .circle-timer span{font-size:21px;}
  .quiz-content{
    height:calc(100% - 60px) !important;
    grid-template-rows:clamp(108px,24dvh,170px) minmax(0,1fr) !important;
    gap:8px;
    padding:8px max(8px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  }
  .question-box{min-height:0;padding:13px 15px;}
  .question-box h2{font-size:clamp(21px,6.1vw,30px);line-height:1.16;}
  .answer-grid{
    min-height:0;
    grid-template-columns:1fr;
    grid-template-rows:repeat(4,minmax(0,1fr));
    gap:7px;
  }
  .answer-button{
    width:100%;
    height:100%;
    min-height:0 !important;
    padding:6px 9px;
    gap:9px;
    box-shadow:3px 3px 0 var(--red);
  }
  .answer-key{width:38px;height:38px;flex-basis:38px;font-size:20px;}
  .answer-text{font-size:clamp(16px,5vw,22px);line-height:1.12;}

  /* Feedback */
  .feedback-screen,.reach-screen,.result-screen{
    align-items:flex-start;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:max(9px,env(safe-area-inset-top)) 10px max(14px,env(safe-area-inset-bottom));
  }
  .feedback-panel,.reach-panel,.result-panel{
    width:100%;
    min-height:calc(100dvh - 24px);
    align-content:center;
    gap:8px;
    padding:8px 0 18px;
  }
  .feedback-screen-logo,.result-screen-logo{
    justify-self:center;
    align-self:center;
    width:clamp(96px,28vw,130px);
    margin:0 auto 2px;
  }
  .feedback-panel h2,.reach-panel h2,.result-panel h2{
    width:100%;
    padding:7px 10px 9px;
    font-size:clamp(34px,10.5vw,50px);
    line-height:1;
  }
  .feedback-question{width:100%;padding:8px 10px;gap:5px;border-left-width:5px;}
  .feedback-question>span{font-size:9px;padding:3px 6px;}
  .feedback-question p{font-size:clamp(15px,4.4vw,21px);line-height:1.2;}
  .answer-reveal{
    width:100%;
    grid-template-columns:auto minmax(0,1fr);
    gap:8px;
    padding:8px 9px;
    border-width:3px;
    box-shadow:4px 4px 0 var(--black);
  }
  .answer-reveal-caption{grid-column:1/-1;font-size:9px;padding:3px 6px;}
  .answer-reveal-letter{width:44px;height:44px;font-size:24px;}
  .answer-reveal-text{font-size:clamp(18px,5.4vw,26px);line-height:1.1;}
  .feedback-next{
    width:100% !important;
    margin:0 !important;
    padding:7px 9px !important;
    font-size:13px !important;
  }
  .next-cue{width:100%;min-height:42px;margin-top:0;}
  .next-cue span{padding:6px 10px 7px;font-size:clamp(18px,6vw,24px);}
  .next-cue b{width:44px;height:38px;font-size:28px;}

  /* Reach */
  .reach-panel small{font-size:10px;padding:6px 9px;}
  .reach-panel h2{margin-top:4px;}
  .reach-panel p{width:100%;margin:4px 0 0;padding:10px;font-size:clamp(19px,6vw,28px);}
  .reach-panel>div{margin-top:5px;padding:8px 12px;font-size:14px;}

  /* Result */
  .result-panel>small{position:relative;top:auto;left:auto;margin:0 0 2px;padding:5px 13px;font-size:11px;}
  .result-panel p{width:100%;margin:7px 0 0;font-size:clamp(20px,6vw,29px);}
  .result-panel p strong{margin-top:7px;padding:8px;font-size:.62em;}
  .result-badge{margin-top:6px;padding:8px 12px;font-size:13px;}
  .reset-button{min-height:54px;margin-top:8px;padding:8px 10px;font-size:15px;}

  /* Staff */
  .staff-screen{overflow-y:auto;align-items:flex-start;padding:0;}
  .staff-panel{width:100%;height:100dvh !important;padding:14px;border:0;box-shadow:none;}
  .staff-panel>header{position:sticky;top:-14px;z-index:4;padding:12px 0;background:var(--paper);}
  .staff-panel>header h2{font-size:29px;}
  .staff-card dl,.staff-panel dl{grid-template-columns:96px 1fr;}
  .staff-panel>footer{flex-direction:column;gap:5px;}

  .ipad-install-hint{left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-width:none;font-size:12px;}
  .pwa-ready-badge{right:10px;bottom:max(10px,env(safe-area-inset-bottom));font-size:11px;}
}

/* Extra-narrow phone */
@media(max-width:360px) and (orientation:portrait){
  .brand-button>span:last-child{font-size:9px;}
  .start-screen-logo{width:104px !important;}
  .start-copy h1{font-size:37px;}
  .lead{font-size:12px;}
  .rule-grid span{font-size:9px;}
  .progress-label{font-size:13px;}
  .progress-bars{display:none;}
  .question-box h2{font-size:20px;}
  .answer-text{font-size:15px;}
}

/* ---------------------------------------------------------
   Smartphone landscape
   --------------------------------------------------------- */
@media(max-height:500px) and (orientation:landscape){
  .topbar{height:48px;padding:0 12px;}
  .brand-button{gap:8px;font-size:10px;letter-spacing:.055em;}
  .brand-box{width:32px;height:32px;font-size:14px;}

  /* Start */
  .start-frame{overflow:hidden;}
  .start-screen-logo{
    position:absolute !important;
    inset:52px 10px auto auto !important;
    width:88px !important;
  }
  .start-content{
    height:calc(100% - 48px) !important;
    min-height:0;
    grid-template-columns:1fr;
    align-items:center;
    padding:5px 122px 5px 16px !important;
  }
  .start-copy{width:100%;}
  .kicker{padding:4px 8px;font-size:8px;}
  .start-copy h1{margin:4px 0 5px;font-size:clamp(34px,8.6vh,46px);line-height:.84;text-shadow:3px 3px 0 var(--black);}
  .start-copy h1 span{margin-top:4px;padding:5px 9px 6px;font-size:.68em;}
  .lead{margin:0 0 5px;padding:5px 8px;font-size:11px;line-height:1.2;box-shadow:3px 3px 0 var(--black);}
  .rule-grid{grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:5px;}
  .rule-grid>div,.rule-grid>div:last-child{grid-column:auto !important;min-height:34px;padding:3px 6px;gap:5px;}
  .rule-grid b{font-size:17px;}
  .rule-grid span{font-size:9px;}
  .start-actions{grid-template-columns:minmax(0,1fr) 130px;gap:7px;}
  .start-button{min-height:44px;padding:6px 11px;font-size:18px;box-shadow:4px 4px 0 var(--white);}
  .start-actions p{padding:5px 6px;font-size:8px;}
  .start-art{display:none;}
  .pack-label{right:8px;bottom:4px;max-width:38%;padding:3px 6px;font-size:7px;}

  /* Quiz */
  .quiz-header{height:54px;grid-template-columns:auto 1fr auto;gap:8px;padding:0 10px;}
  .progress-label{font-size:16px;padding:4px 7px;}
  .progress-bars{display:flex;justify-content:center;gap:5px;}
  .progress-bars span{width:23px;height:6px;}
  .circle-timer{width:46px;height:46px;filter:drop-shadow(2px 2px 0 var(--white));}
  .circle-timer span{font-size:19px;}
  .quiz-content{
    height:calc(100% - 54px) !important;
    grid-template-rows:clamp(76px,25dvh,98px) minmax(0,1fr) !important;
    gap:7px;
    padding:7px 10px 8px;
  }
  .question-box{padding:9px 16px;}
  .question-box h2{font-size:clamp(20px,5.6vh,27px);line-height:1.12;}
  .answer-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px;}
  .answer-button{min-height:0 !important;height:100%;padding:5px 9px;gap:8px;box-shadow:3px 3px 0 var(--red);}
  .answer-key{width:36px;height:36px;flex-basis:36px;font-size:18px;}
  .answer-text{font-size:clamp(15px,4.3vh,20px);line-height:1.08;}

  /* Feedback: compact editorial two-column layout */
  .feedback-screen,.reach-screen,.result-screen{padding:5px 10px;overflow-y:auto;align-items:center;}
  .feedback-panel{
    width:min(920px,100%);
    min-height:0;
    grid-template-columns:1fr 1fr;
    align-content:center;
    gap:5px 8px;
    padding:2px 0;
  }
  .feedback-screen-logo{grid-column:1;justify-self:start;align-self:center;width:82px;margin:0;}
  .feedback-panel h2{grid-column:2;width:100%;padding:5px 8px 6px;font-size:clamp(31px,9vh,44px);}
  .feedback-question{grid-column:1/-1;width:100%;padding:6px 9px;gap:3px;}
  .feedback-question>span{font-size:8px;padding:2px 5px;}
  .feedback-question p{font-size:clamp(13px,3.9vh,17px);line-height:1.13;}
  .answer-reveal{width:100%;grid-template-columns:auto minmax(0,1fr);gap:6px;padding:5px 7px;border-width:3px;box-shadow:3px 3px 0 var(--black);}
  .user-answer-reveal{grid-column:1;}
  .correct-answer-reveal{grid-column:2;}
  .feedback-panel.success .correct-answer-reveal,
  .feedback-panel.time .correct-answer-reveal{grid-column:1/-1;}
  .answer-reveal-caption{grid-column:1/-1;font-size:8px;padding:2px 5px;}
  .answer-reveal-letter{width:38px;height:38px;font-size:21px;}
  .answer-reveal-text{font-size:clamp(16px,4.7vh,22px);}
  .feedback-next{grid-column:1;width:100% !important;margin:0 !important;padding:5px 7px !important;font-size:11px !important;}
  .next-cue{grid-column:2;width:100%;min-height:34px;margin:0;}
  .next-cue span{padding:4px 8px 5px;font-size:17px;}
  .next-cue b{width:36px;height:31px;font-size:23px;}

  /* Reach */
  .reach-panel{width:min(700px,100%);gap:4px;}
  .reach-panel small{padding:4px 8px;font-size:8px;}
  .reach-panel h2{margin-top:2px;padding:5px 10px;font-size:clamp(32px,10vh,46px);}
  .reach-panel p{margin:3px 0 0;padding:6px 9px;font-size:clamp(17px,5.5vh,24px);}
  .reach-panel p strong{margin-top:3px;}
  .reach-panel>div{margin-top:3px;padding:5px 10px;font-size:11px;}

  /* Result */
  .result-panel{width:min(720px,100%);grid-template-columns:105px 1fr;gap:5px 10px;align-items:center;}
  .result-screen-logo{grid-column:1;grid-row:1/3;width:94px;margin:0;}
  .result-panel>small{position:relative;top:auto;left:auto;grid-column:2;justify-self:start;padding:4px 11px;font-size:9px;}
  .result-panel h2{grid-column:2;width:100%;padding:5px 9px;font-size:clamp(30px,9vh,43px);}
  .result-panel p,.result-badge,.reset-button{grid-column:1/-1;}
  .result-panel p{margin:2px 0 0;font-size:clamp(17px,5.2vh,24px);}
  .result-panel p strong{margin-top:4px;padding:5px 8px;}
  .result-badge{margin-top:2px;padding:5px 10px;font-size:11px;}
  .reset-button{min-height:42px;margin-top:3px;font-size:13px;}

  /* Staff */
  .staff-panel{height:100dvh !important;padding:10px 14px;border:0;box-shadow:none;}
  .staff-panel>header h2{font-size:26px;}
  .staff-grid{grid-template-columns:1fr 1fr;gap:9px;}
  .staff-card{padding:10px;}
  .staff-card h3{font-size:16px;margin-bottom:6px;}
  .staff-card p,.staff-card dl,.staff-panel dl{font-size:11px;}
}

/* Normal tablet widths: prevent start logo/title collisions */
@media(min-width:601px) and (max-width:950px) and (min-height:501px){
  .start-screen-logo{right:18px !important;top:66px !important;width:150px !important;}
  .start-content{padding-left:30px !important;padding-right:30px !important;}
  .start-copy h1{font-size:clamp(54px,8vw,76px);}
}


/* =========================================================
   v2.6 LANDSCAPE-FIRST MOBILE PASS
   - iPad and smartphones use landscape orientation.
   - Portrait shows only the rotate-device screen.
   - Smartphone landscape UI is intentionally compact.
   - No visible "Add to Home Screen" prompt.
   ========================================================= */

.ipad-install-hint{
  display:none !important;
}

/* Portrait lock for mobile phones and tablets */
@media(orientation:portrait){
  body.mobile-device .orientation-notice{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:
      max(34px,env(safe-area-inset-top))
      max(28px,env(safe-area-inset-right))
      max(34px,env(safe-area-inset-bottom))
      max(28px,env(safe-area-inset-left));
    color:#ffffff;
    background:
      repeating-linear-gradient(
        120deg,
        #d50000 0 74px,
        #b40000 75px 78px,
        #d50000 79px 148px
      );
    text-align:center;
  }

  body.mobile-device .orientation-notice::before{
    content:"";
    position:absolute;
    inset:22px;
    border:4px solid #080808;
    box-shadow:9px 9px 0 #080808;
    pointer-events:none;
  }

  body.mobile-device .orientation-notice img{
    position:relative;
    width:min(58vw,300px);
    max-height:34vh;
    object-fit:contain;
    padding:10px;
    background:#ffffff;
    border:4px solid #080808;
  }

  body.mobile-device .orientation-notice strong{
    position:relative;
    max-width:90vw;
    font-size:clamp(25px,7vw,43px);
    line-height:1.08;
    font-weight:1000;
    text-shadow:4px 4px 0 #080808;
  }
}

/* Smartphone landscape — compact, readable, never oversized */
@media(
  orientation:landscape
) and (
  max-height:540px
){
  .app{
    padding:
      max(4px,env(safe-area-inset-top))
      max(6px,env(safe-area-inset-right))
      max(4px,env(safe-area-inset-bottom))
      max(6px,env(safe-area-inset-left)) !important;
  }

  .screen{
    width:min(100%,980px) !important;
    height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))) !important;
    min-height:0 !important;
  }

  .frame{
    border-width:2px;
    box-shadow:6px 6px 0 var(--black);
  }

  .topbar{
    height:40px !important;
    padding:0 9px !important;
  }

  .brand-button{
    gap:6px !important;
    font-size:8.5px !important;
    letter-spacing:.045em !important;
  }

  .brand-box{
    width:27px !important;
    height:27px !important;
    font-size:12px !important;
    border-width:1px !important;
  }

  .fullscreen-button{
    padding:4px 8px !important;
    font-size:9px !important;
  }

  /* Start screen */
  .start-screen-logo{
    inset:43px 7px auto auto !important;
    width:72px !important;
  }

  .start-content{
    height:calc(100% - 40px) !important;
    grid-template-columns:1fr !important;
    align-items:center !important;
    padding:4px 88px 4px 10px !important;
  }

  .start-copy{
    width:100% !important;
  }

  .kicker{
    width:max-content;
    max-width:100%;
    padding:3px 6px !important;
    font-size:7px !important;
    letter-spacing:.06em !important;
  }

  .start-copy h1{
    margin:3px 0 4px !important;
    font-size:clamp(27px,8.2vh,38px) !important;
    line-height:.84 !important;
    text-shadow:3px 3px 0 var(--black) !important;
  }

  .start-copy h1 span{
    margin-top:3px !important;
    padding:4px 7px 5px !important;
    font-size:.66em !important;
  }

  .lead{
    margin:0 0 4px !important;
    padding:4px 7px !important;
    font-size:9px !important;
    line-height:1.15 !important;
    box-shadow:2px 2px 0 var(--black) !important;
  }

  .rule-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:4px !important;
    margin-bottom:4px !important;
  }

  .rule-grid>div,
  .rule-grid>div:last-child{
    grid-column:auto !important;
    min-height:27px !important;
    padding:2px 4px !important;
    gap:3px !important;
  }

  .rule-grid b{
    font-size:14px !important;
  }

  .rule-grid span{
    font-size:7.5px !important;
  }

  .start-actions{
    grid-template-columns:minmax(0,1fr) 112px !important;
    gap:5px !important;
  }

  .start-button{
    min-height:35px !important;
    padding:4px 9px !important;
    font-size:15px !important;
    box-shadow:3px 3px 0 var(--white) !important;
  }

  .start-actions p{
    padding:4px 5px !important;
    font-size:7px !important;
    line-height:1.15 !important;
  }

  .start-art{
    display:none !important;
  }

  .pack-label{
    right:6px !important;
    bottom:3px !important;
    max-width:42% !important;
    padding:2px 5px !important;
    font-size:6.5px !important;
  }

  /* READY / countdown */
  .countdown-value{
    font-size:clamp(72px,31vh,126px) !important;
    -webkit-text-stroke:2px var(--black) !important;
    text-shadow:6px 6px 0 var(--black) !important;
  }

  .countdown-value.ready,
  .countdown-value.brief-ready{
    font-size:clamp(55px,24vh,94px) !important;
  }

  .countdown-value.start,
  .countdown-value.final-ready{
    max-width:92vw !important;
    font-size:clamp(49px,21vh,82px) !important;
    white-space:nowrap !important;
  }

  .countdown-value.final-label{
    max-width:88vw !important;
    padding:6px 13px 8px !important;
    border-width:3px !important;
    box-shadow:5px 5px 0 var(--red) !important;
    font-size:clamp(34px,15vh,58px) !important;
    white-space:nowrap !important;
  }

  /* Quiz screen */
  .quiz-header{
    height:43px !important;
    gap:6px !important;
    padding:0 8px !important;
  }

  .progress-label{
    padding:3px 5px 4px !important;
    font-size:13px !important;
    box-shadow:2px 2px 0 var(--red) !important;
  }

  .progress-bars{
    gap:4px !important;
  }

  .progress-bars span{
    width:18px !important;
    height:5px !important;
  }

  .circle-timer{
    width:37px !important;
    height:37px !important;
    filter:drop-shadow(1px 1px 0 var(--white)) !important;
  }

  .circle-timer span{
    font-size:15px !important;
  }

  .quiz-content{
    height:calc(100% - 43px) !important;
    grid-template-rows:clamp(60px,23dvh,79px) minmax(0,1fr) !important;
    gap:5px !important;
    padding:5px 7px 6px !important;
  }

  .question-box{
    min-height:0 !important;
    padding:7px 11px !important;
    border-left-width:5px !important;
  }

  .question-box h2{
    font-size:clamp(16px,4.7vh,22px) !important;
    line-height:1.09 !important;
  }

  .answer-grid{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:1fr 1fr !important;
    gap:5px !important;
  }

  .answer-button{
    min-height:0 !important;
    height:100% !important;
    padding:3px 7px !important;
    gap:6px !important;
    border-width:2px !important;
    box-shadow:2px 2px 0 var(--red) !important;
  }

  .answer-key{
    width:29px !important;
    height:29px !important;
    flex-basis:29px !important;
    font-size:15px !important;
    border-width:2px !important;
  }

  .answer-text{
    font-size:clamp(12px,3.6vh,16px) !important;
    line-height:1.05 !important;
  }

  /* Feedback */
  .feedback-screen,
  .reach-screen,
  .result-screen{
    align-items:center !important;
    overflow:hidden !important;
    padding:4px 7px !important;
  }

  .feedback-panel{
    width:min(820px,100%) !important;
    min-height:0 !important;
    grid-template-columns:1fr 1fr !important;
    align-content:center !important;
    gap:4px 6px !important;
    padding:0 !important;
  }

  .feedback-screen-logo{
    grid-column:1 !important;
    justify-self:start !important;
    width:66px !important;
    margin:0 !important;
  }

  .feedback-panel h2{
    grid-column:2 !important;
    width:100% !important;
    padding:4px 7px 5px !important;
    font-size:clamp(25px,7.5vh,35px) !important;
  }

  .feedback-question{
    grid-column:1/-1 !important;
    padding:4px 7px !important;
    gap:2px !important;
    border-left-width:4px !important;
  }

  .feedback-question>span{
    padding:2px 4px !important;
    font-size:6.5px !important;
  }

  .feedback-question p{
    font-size:clamp(10px,3.1vh,14px) !important;
    line-height:1.08 !important;
  }

  .answer-reveal{
    padding:4px 5px !important;
    gap:4px !important;
    border-width:2px !important;
    box-shadow:2px 2px 0 var(--black) !important;
  }

  .answer-reveal-caption{
    padding:1px 4px !important;
    font-size:6.5px !important;
  }

  .answer-reveal-letter{
    width:31px !important;
    height:31px !important;
    font-size:17px !important;
  }

  .answer-reveal-text{
    font-size:clamp(13px,3.8vh,18px) !important;
    line-height:1.04 !important;
  }

  .feedback-next{
    padding:4px 5px !important;
    font-size:9px !important;
  }

  .next-cue{
    min-height:27px !important;
  }

  .next-cue span{
    padding:3px 6px 4px !important;
    font-size:13px !important;
  }

  .next-cue b{
    width:29px !important;
    height:26px !important;
    font-size:19px !important;
  }

  /* Reach */
  .reach-panel{
    width:min(620px,100%) !important;
    gap:3px !important;
  }

  .reach-panel small{
    padding:3px 6px !important;
    font-size:7px !important;
  }

  .reach-panel h2{
    padding:4px 8px !important;
    font-size:clamp(26px,8vh,36px) !important;
  }

  .reach-panel p{
    padding:5px 7px !important;
    font-size:clamp(14px,4.4vh,19px) !important;
  }

  .reach-panel>div{
    padding:4px 8px !important;
    font-size:9px !important;
  }

  /* Result */
  .result-panel{
    width:min(650px,100%) !important;
    grid-template-columns:84px 1fr !important;
    gap:4px 7px !important;
    align-items:center !important;
  }

  .result-screen-logo{
    grid-column:1 !important;
    grid-row:1/3 !important;
    width:76px !important;
    margin:0 !important;
  }

  .result-panel>small{
    grid-column:2 !important;
    padding:3px 8px !important;
    font-size:7px !important;
  }

  .result-panel h2{
    grid-column:2 !important;
    padding:4px 7px !important;
    font-size:clamp(24px,7.4vh,34px) !important;
  }

  .result-panel p,
  .result-badge,
  .reset-button{
    grid-column:1/-1 !important;
  }

  .result-panel p{
    margin:1px 0 0 !important;
    font-size:clamp(14px,4.2vh,19px) !important;
  }

  .result-panel p strong{
    margin-top:3px !important;
    padding:4px 6px !important;
  }

  .result-badge{
    margin-top:1px !important;
    padding:4px 8px !important;
    font-size:9px !important;
  }

  .reset-button{
    min-height:34px !important;
    margin-top:2px !important;
    padding:4px 8px !important;
    font-size:10px !important;
  }

  /* Staff screen */
  .staff-screen{
    overflow-y:auto !important;
    align-items:flex-start !important;
    padding:0 !important;
  }

  .staff-panel{
    width:100% !important;
    height:100dvh !important;
    padding:8px 10px !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .staff-panel>header{
    top:-8px !important;
    padding:7px 0 !important;
  }

  .staff-panel>header h2{
    font-size:22px !important;
  }

  .staff-grid{
    grid-template-columns:1fr 1fr !important;
    gap:6px !important;
  }

  .staff-card{
    padding:7px !important;
  }

  .staff-card h3{
    margin-bottom:4px !important;
    font-size:13px !important;
  }

  .staff-card p,
  .staff-card dl,
  .staff-panel dl{
    font-size:9px !important;
  }

  .pwa-ready-badge{
    right:max(7px,env(safe-area-inset-right)) !important;
    bottom:max(7px,env(safe-area-inset-bottom)) !important;
    padding:6px 9px !important;
    font-size:8px !important;
  }
}

/* Very short landscape phones */
@media(orientation:landscape) and (max-height:380px){
  .topbar{
    height:36px !important;
  }

  .start-content{
    height:calc(100% - 36px) !important;
  }

  .start-screen-logo{
    top:39px !important;
    width:62px !important;
  }

  .start-copy h1{
    font-size:clamp(24px,7.8vh,31px) !important;
  }

  .lead{
    display:none !important;
  }

  .rule-grid>div,
  .rule-grid>div:last-child{
    min-height:23px !important;
  }

  .quiz-header{
    height:39px !important;
  }

  .quiz-content{
    height:calc(100% - 39px) !important;
    grid-template-rows:54px minmax(0,1fr) !important;
  }

  .question-box h2{
    font-size:15px !important;
  }

  .answer-text{
    font-size:12px !important;
  }
}