/* ============================================================
   RESET & VARIABLES
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0a;
  --bg2:#1a1a2e;
  --bg-card:#16213e;
  --red:#e74c3c;
  --orange:#f39c12;
  --cyan:#00d4ff;
  --text:#ffffff;
  --text2:#a0a0a0;
  --glow-red:0 0 20px rgba(231,76,60,.5);
  --glow-cyan:0 0 15px rgba(0,212,255,.3);
  --sans:'Noto Sans JP',sans-serif;
  --digital:'Orbitron',monospace;
}
html,body{
  height:100%;background:var(--bg);color:var(--text);
  font-family:var(--sans);overflow-x:hidden;
}

/* ============================================================
   SCREEN SYSTEM
   ============================================================ */
.screen{
  display:none;min-height:100vh;min-height:100dvh;
  justify-content:center;align-items:center;
  padding:20px;position:relative;
}
.screen.active{display:flex}

/* ============================================================
   SCANLINE OVERLAY
   ============================================================ */
.scanline-overlay{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(
    0deg,
    transparent,transparent 2px,
    rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px
  );
}

/* ============================================================
   TOP SCREEN
   ============================================================ */
.top-container{text-align:center;max-width:480px;width:100%}
.top-label{
  font-size:11px;letter-spacing:.15em;color:var(--text2);
  margin-bottom:32px;
}
.top-title{margin-bottom:24px}
.top-title .line1,.top-title .line2,.top-title .line3{
  display:block;font-weight:900;line-height:1.3;
}
.top-title .line1{font-size:clamp(28px,7vw,42px);color:var(--text)}
.top-title .line2{font-size:clamp(28px,7vw,42px);color:var(--text)}
.top-title .line3{
  font-size:clamp(32px,8vw,48px);
  color:var(--red);
  text-shadow:var(--glow-red);
}
.top-sub{
  font-family:var(--digital);font-size:13px;
  letter-spacing:.2em;color:var(--cyan);margin-bottom:8px;
}
.top-time{font-size:12px;color:var(--text2);margin-bottom:40px}
.top-privacy{font-size:11px;color:var(--text2);margin-top:20px}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-start{
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 40px;background:var(--red);color:#fff;
  border:none;border-radius:4px;font-size:16px;font-weight:700;
  font-family:var(--sans);cursor:pointer;
  transition:all .3s;
}
.btn-start:hover{
  background:#c0392b;box-shadow:var(--glow-red);
  transform:translateY(-2px);
}
.btn-icon{font-size:14px}

.btn-next,.btn-back{
  border:none;cursor:pointer;font-family:var(--sans);
  transition:all .3s;
}
.btn-next{
  display:block;width:100%;padding:14px;margin-top:24px;
  background:var(--red);color:#fff;border-radius:4px;
  font-size:15px;font-weight:700;
}
.btn-next:disabled{
  background:#333;color:#666;cursor:not-allowed;
}
.btn-next:not(:disabled):hover{
  background:#c0392b;box-shadow:var(--glow-red);
}
.btn-back{
  background:none;color:var(--text2);font-size:13px;
  padding:4px 0;margin-bottom:20px;
}
.btn-back:hover{color:var(--text)}

/* ============================================================
   PULSE ANIMATION
   ============================================================ */
.pulse{animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(231,76,60,.5)}
  70%{box-shadow:0 0 0 15px rgba(231,76,60,0)}
  100%{box-shadow:0 0 0 0 rgba(231,76,60,0)}
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.progress-bar{
  position:fixed;top:0;left:0;width:100%;height:4px;
  background:#1a1a1a;z-index:100;
}
.progress-bar.hidden{display:none}
.progress-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--red),var(--orange));
  transition:width .4s ease;
}
.progress-text{
  position:fixed;top:8px;right:12px;z-index:101;
  font-family:var(--digital);font-size:11px;color:var(--text2);
}

/* ============================================================
   QUESTION SCREENS
   ============================================================ */
.question-container{
  max-width:480px;width:100%;
}
.q-title{
  font-size:clamp(18px,5vw,22px);font-weight:700;
  margin-bottom:8px;line-height:1.5;
}
.q-subtitle{
  font-size:13px;color:var(--text2);margin-bottom:24px;
}

/* DATE SELECTS */
.date-selects{
  display:flex;align-items:center;gap:6px;
  justify-content:center;flex-wrap:wrap;
}
.date-select{
  background:#111;border:1px solid #333;border-radius:4px;
  color:var(--text);font-size:16px;font-family:var(--sans);
  padding:12px 8px;width:90px;appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 8px center;
}
.date-select:focus{outline:none;border-color:var(--cyan)}
.date-label{font-size:14px;color:var(--text2)}

/* OPTIONS */
.options-list{display:flex;flex-direction:column;gap:10px}
.option-btn{
  display:block;width:100%;text-align:left;
  padding:14px 16px;background:#111;border:1px solid #2a2a2a;
  border-radius:6px;color:var(--text);font-size:14px;
  font-family:var(--sans);cursor:pointer;
  transition:all .2s;
}
.option-btn:hover{border-color:var(--cyan);background:#1a1a2e}
.option-btn.selected{
  border-color:var(--cyan);background:rgba(0,212,255,.08);
  box-shadow:var(--glow-cyan);
}
.option-btn.multi-selected{
  border-color:var(--orange);background:rgba(243,156,18,.08);
}

/* ============================================================
   LOADING SCREEN
   ============================================================ */
.loading-container{text-align:center;max-width:400px;width:100%}
.loading-ring{
  width:80px;height:80px;margin:0 auto 24px;
  border:3px solid #1a1a1a;border-top:3px solid var(--red);
  border-radius:50%;animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-msg{
  font-size:16px;font-weight:500;margin-bottom:20px;
  min-height:24px;
}
.loading-bar-wrap{
  width:100%;height:4px;background:#1a1a1a;
  border-radius:2px;overflow:hidden;margin-bottom:20px;
}
.loading-bar-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--red),var(--orange));
  transition:width .5s ease;
}
.loading-note{font-size:12px;color:var(--text2)}

/* ============================================================
   RESULT SCREEN
   ============================================================ */
.result-container{
  max-width:480px;width:100%;padding:20px 0;
}
.result-label{
  text-align:center;font-size:14px;color:var(--text2);
  letter-spacing:.1em;margin-bottom:16px;
}

/* RANK CARD */
.rank-card{
  text-align:center;padding:32px 20px;
  background:linear-gradient(135deg,#1a1a2e,#16213e);
  border:1px solid #2a2a4a;border-radius:12px;
  margin-bottom:24px;
}
.rank-value{
  font-family:var(--digital);font-size:clamp(56px,15vw,80px);
  font-weight:900;color:var(--red);
  text-shadow:var(--glow-red);
  line-height:1;margin-bottom:8px;
}
.rank-label{
  font-size:18px;font-weight:700;color:var(--orange);
  margin-bottom:20px;
}
.danger-gauge{
  width:100%;height:8px;background:#1a1a1a;
  border-radius:4px;overflow:hidden;margin-bottom:8px;
}
.danger-fill{
  height:100%;width:0;border-radius:4px;
  transition:width 1.5s ease;
}
.danger-score{
  font-family:var(--digital);font-size:13px;color:var(--text2);
}

/* RANK COLORS */
.rank-card.rank-sss{border-color:var(--red)}
.rank-card.rank-sss .rank-value{color:var(--red)}
.rank-card.rank-sss .danger-fill{background:var(--red)}
.rank-card.rank-ss{border-color:#e67e22}
.rank-card.rank-ss .rank-value{color:#e67e22}
.rank-card.rank-ss .danger-fill{background:#e67e22}
.rank-card.rank-s{border-color:var(--orange)}
.rank-card.rank-s .rank-value{color:var(--orange)}
.rank-card.rank-s .danger-fill{background:var(--orange)}
.rank-card.rank-a{border-color:var(--cyan)}
.rank-card.rank-a .rank-value{color:var(--cyan)}
.rank-card.rank-a .danger-fill{background:var(--cyan)}
.rank-card.rank-b{border-color:#2ecc71}
.rank-card.rank-b .rank-value{color:#2ecc71}
.rank-card.rank-b .danger-fill{background:#2ecc71}

.result-headline{
  text-align:center;font-size:clamp(16px,4.5vw,20px);
  font-weight:700;padding:16px;margin-bottom:24px;
  border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;
  line-height:1.6;
}

/* RESULT SECTIONS */
.result-section{margin-bottom:24px}
.result-section-title{
  font-size:14px;font-weight:700;color:var(--cyan);
  margin-bottom:10px;
}
.result-box{
  padding:16px;background:#111;border:1px solid #2a2a2a;
  border-radius:8px;font-size:14px;line-height:1.8;
  color:var(--text);
}
.sanmeigaku-box{border-color:#4a3a1a;background:#1a1508}

/* CTA AREA */
.result-cta-area{
  text-align:center;padding:24px 0;margin-bottom:24px;
  border-top:1px solid #2a2a2a;
}
.cta-warning{
  font-size:20px;font-weight:900;color:var(--orange);
  margin-bottom:12px;
}
.cta-advice{
  font-size:14px;line-height:1.8;color:var(--text);
  margin-bottom:20px;padding:0 8px;
}
.btn-cta{
  display:inline-block;padding:16px 32px;
  background:var(--orange);color:#000;
  border-radius:6px;font-size:16px;font-weight:700;
  text-decoration:none;font-family:var(--sans);
  transition:all .3s;
}
.btn-cta:hover{
  background:#e67e22;transform:translateY(-2px);
  box-shadow:0 0 20px rgba(243,156,18,.5);
}

/* SHARE & FOOTER */
.result-share{text-align:center;margin-bottom:32px}
.btn-share{
  padding:10px 24px;background:none;
  border:1px solid #333;border-radius:4px;
  color:var(--text2);font-size:13px;
  font-family:var(--sans);cursor:pointer;
  transition:all .2s;
}
.btn-share:hover{border-color:var(--cyan);color:var(--cyan)}
.result-footer{
  text-align:center;font-size:12px;color:#555;
  padding-bottom:40px;
}
.result-footer a{color:var(--text2);text-decoration:none}
.result-footer a:hover{color:var(--cyan)}

/* ============================================================
   ERROR SCREEN
   ============================================================ */
.error-container{text-align:center;max-width:400px;width:100%}
.error-title{font-size:24px;color:var(--red);margin-bottom:12px}
.error-msg{font-size:14px;color:var(--text2);margin-bottom:24px}

/* ============================================================
   GLITCH EFFECT
   ============================================================ */
.glitch{position:relative}
.glitch.animate{animation:glitchAnim .3s linear 3}
@keyframes glitchAnim{
  0%{text-shadow:2px 0 var(--cyan),-2px 0 var(--red)}
  25%{text-shadow:-2px -1px var(--cyan),2px 1px var(--red)}
  50%{text-shadow:1px 2px var(--cyan),-1px -2px var(--red)}
  75%{text-shadow:-1px 1px var(--cyan),1px -1px var(--red)}
  100%{text-shadow:0 0 transparent}
}

/* ============================================================
   TYPEWRITER EFFECT
   ============================================================ */
.typewriter{overflow:hidden;border-right:2px solid var(--cyan)}
.typewriter.done{border-right:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(min-width:768px){
  .screen{padding:40px}
  .option-btn{padding:16px 20px;font-size:15px}
  .date-select{width:100px;padding:14px 10px}
}