/* ============================================================
   Recall — "Neon Shrine" (神社)
   Cyberpunk × medieval-anime design system.

   ALL visual design lives here. app.js holds logic only.
   To restyle the app, you should not need to touch any other file.

   Palette is grounded in feudal Japanese materials rather than
   generic sci-fi: indigo dye (藍), torii vermilion (朱), gold leaf
   (金) — with one neon cyan as the "cyber" intrusion.
   ============================================================ */

:root{
  /* --- surfaces: indigo dye, not black --- */
  --void:        #0A0E1C;
  --void-deep:   #060911;
  --panel:       #101733;
  --panel-lift:  #16203F;
  --field:       #0B1329;   /* input wells */
  --line:        #24325C;
  --line-hot:    #33477F;

  /* --- ink --- */
  --ink:         #EDEBF5;
  --ink-soft:    #A6AECB;
  --ink-faint:   #6B769B;

  /* --- accents (each has ONE job) --- */
  --shu:         #E8433F;   /* 朱 vermilion — seals, borders, glow */
  --shu-lift:    #FF5A56;   /* brighter 朱 — kanji/text on dark (5.7:1) */
  --shu-deep:    #CC332F;   /* button fill — white label clears AA (5.1:1) */
  --shu-deep-lift:#D93A36;
  --kin:         #D9A441;   /* 金 gold leaf — scores, what you missed */
  --kin-lift:    #F0C062;
  --neon:        #4FE3D2;   /* the cyber intrusion — HUD, system, progress */
  --neon-dim:    #2A8C86;
  --jade:        #46D6A0;   /* correct */

  /* --- type --- */
  --display: 'Shippori Mincho B1', 'Times New Roman', serif;
  --hud:     'Chakra Petch', ui-monospace, monospace;
  --body:    'Zen Kaku Gothic New', system-ui, sans-serif;

  --chamfer: 14px;
  --glow-neon: 0 0 24px rgba(79,227,210,.25);
  --glow-shu:  0 0 28px rgba(232,67,63,.35);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  min-height:100vh;
  background:var(--void);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ------------------------------------------------------------
   Background: asanoha (麻の葉) lattice.
   A traditional hemp-leaf pattern built from a triangular grid —
   it reads as feudal textile AND as a tech wireframe at once,
   which is the whole brief in one texture.
   ------------------------------------------------------------ */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.bg__lattice{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(60deg,  transparent 0 27px, rgba(79,227,210,.055) 27px 28px),
    repeating-linear-gradient(-60deg, transparent 0 27px, rgba(79,227,210,.055) 27px 28px),
    repeating-linear-gradient(0deg,   transparent 0 47px, rgba(79,227,210,.04)  47px 48px);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%);
}
.bg__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(680px 420px at 15% -8%,  rgba(232,67,63,.16), transparent 62%),
    radial-gradient(760px 500px at 88% 4%,   rgba(79,227,210,.13), transparent 60%),
    radial-gradient(900px 700px at 50% 108%, rgba(217,164,65,.07), transparent 60%);
}
.bg__vignette{
  position:absolute; inset:0;
  background:radial-gradient(ellipse 120% 90% at 50% 40%, transparent 45%, var(--void-deep) 100%);
}

/* Decorative vertical kanji: 記憶 (kioku — "memory"). The subject of
   the whole product, set like a shrine banner. Hidden from AT. */
.banner{
  position:fixed; top:50%; right:26px; transform:translateY(-50%);
  z-index:1; pointer-events:none;
  font-family:var(--display); font-weight:800; font-size:44px;
  writing-mode:vertical-rl; letter-spacing:.28em;
  color:transparent;
  -webkit-text-stroke:1px rgba(79,227,210,.20);
  text-shadow:0 0 30px rgba(79,227,210,.10);
}

/* ------------------------------------------------------------ */
.wrap{ position:relative; z-index:2; max-width:780px; margin:0 auto; padding:38px 24px 90px; }

/* --- Masthead --- */
.mast{ display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:30px; }
.brand{ display:flex; align-items:center; gap:14px; }
.brand__mark{
  width:38px; height:38px; flex:none; position:relative;
  border:1px solid var(--shu);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  display:grid; place-items:center;
  background:rgba(232,67,63,.09);
  box-shadow:var(--glow-shu);
}
.brand__mark span{ font-family:var(--display); font-weight:800; font-size:19px; color:var(--shu-lift); line-height:1; }
.brand__name{ font-family:var(--display); font-weight:800; font-size:27px; letter-spacing:.01em; color:var(--ink); }
.brand__name b{ color:var(--neon); font-weight:800; text-shadow:0 0 18px rgba(79,227,210,.5); }
.mast__hud{
  font-family:var(--hud); font-size:10.5px; font-weight:600;
  text-transform:uppercase; letter-spacing:.22em; color:var(--neon-dim);
  text-align:right; line-height:1.7;
}
.mast__hud i{ color:var(--ink-faint); font-style:normal; }

/* ------------------------------------------------------------
   Panel: chamfered like a HUD plate, bracketed like a byōbu
   screen corner. Same device reads as both.
   ------------------------------------------------------------ */
.panel{
  position:relative;
  background:linear-gradient(160deg, var(--panel) 0%, var(--void-deep) 140%);
  border:1px solid var(--line);
  clip-path:polygon(
    var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)
  );
  padding:32px;
  box-shadow:0 26px 70px rgba(3,6,16,.75), inset 0 1px 0 rgba(255,255,255,.04);
  animation:rise .5s cubic-bezier(.2,.8,.25,1) both;
}
.panel::before,
.panel::after{
  content:""; position:absolute; width:16px; height:16px; pointer-events:none;
}
.panel::before{ top:9px;    left:9px;  border-top:1px solid var(--neon);    border-left:1px solid var(--neon); opacity:.55; }
.panel::after{  bottom:9px; right:9px; border-bottom:1px solid var(--neon); border-right:1px solid var(--neon); opacity:.55; }

@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* --- Type --- */
.eyebrow{
  font-family:var(--hud); font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.26em; color:var(--shu-lift);
  margin:0 0 12px; display:flex; align-items:center; gap:10px;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, rgba(232,67,63,.5), transparent); }

.lede{
  font-family:var(--display); font-weight:800; font-size:33px; line-height:1.2;
  margin:0 0 12px; color:var(--ink);
}
.lede em{ font-style:normal; color:var(--shu-lift); text-shadow:0 0 26px rgba(232,67,63,.4); }

.sub{ color:var(--ink-soft); margin:0 0 24px; font-size:15px; }

.field-label{
  display:block; font-family:var(--hud); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--neon);
  margin:0 0 9px;
}

/* --- Inputs --- */
textarea{
  width:100%; min-height:210px; resize:vertical;
  font-family:var(--body); font-size:15px; line-height:1.7; color:var(--ink);
  background:var(--field);
  border:1px solid var(--line-hot);
  border-radius:0;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  padding:15px 17px;
  transition:border-color .16s, box-shadow .16s;
}
textarea::placeholder{ color:var(--ink-faint); }
textarea:focus{
  outline:none; border-color:var(--neon);
  box-shadow:var(--glow-neon), inset 0 0 26px rgba(79,227,210,.05);
}

/* --- Segmented control --- */
.row{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-top:20px; }
.ctrl{ flex:1; min-width:150px; }
.ctrl__label{
  display:block; font-family:var(--hud); font-size:11px; font-weight:600;
  text-transform:uppercase; letter-spacing:.16em; color:var(--ink-soft); margin-bottom:8px;
}
.seg{ display:inline-flex; border:1px solid var(--line-hot); background:var(--field); }
.seg button{
  font-family:var(--hud); font-size:14px; font-weight:600; color:var(--ink-soft);
  background:transparent; border:0; padding:10px 18px; cursor:pointer;
  transition:color .14s, background .14s;
}
.seg button:hover{ color:var(--neon); }
.seg button[aria-pressed="true"]{
  background:var(--neon); color:var(--void-deep); text-shadow:none;
  box-shadow:var(--glow-neon);
}
.seg button + button{ border-left:1px solid var(--line-hot); }

/* --- Buttons --- */
.actions{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:26px; }

.btn{
  font-family:var(--hud); font-weight:700; font-size:14px;
  text-transform:uppercase; letter-spacing:.12em;
  padding:13px 24px; cursor:pointer; border:1px solid transparent;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
  transition:transform .06s, background .16s, box-shadow .16s, color .16s;
}
.btn:active{ transform:translateY(1px); }

.btn--seal{ background:var(--shu-deep); color:#fff; box-shadow:var(--glow-shu); }
.btn--seal:hover{ background:var(--shu-deep-lift); box-shadow:0 0 36px rgba(232,67,63,.55); }
.btn--seal:disabled{ background:var(--line); color:var(--ink-faint); box-shadow:none; cursor:not-allowed; }

.btn--ghost{ background:transparent; color:var(--ink-soft); border-color:var(--line-hot); }
.btn--ghost:hover{ color:var(--neon); border-color:var(--neon); }

.btn-link{
  background:none; border:0; cursor:pointer; padding:7px 0;
  font-family:var(--hud); font-size:13px; font-weight:600; letter-spacing:.06em;
  color:var(--neon); border-bottom:1px solid rgba(79,227,210,.35);
}
.btn-link:hover{ color:var(--kin-lift); border-bottom-color:var(--kin); }

:focus-visible{ outline:2px solid var(--neon); outline-offset:3px; }

.hint{ font-family:var(--hud); font-size:11px; letter-spacing:.08em; color:var(--ink-faint); text-transform:uppercase; }

/* --- Progress: a HUD rail --- */
.progress{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.progress__rail{ flex:1; height:3px; background:var(--line); position:relative; overflow:hidden; }
.progress__fill{
  height:100%; background:linear-gradient(90deg, var(--neon-dim), var(--neon));
  box-shadow:var(--glow-neon); transition:width .4s cubic-bezier(.2,.8,.25,1);
}
.progress__count{
  font-family:var(--hud); font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--neon); white-space:nowrap;
}

/* --- The question --- */
.question{
  font-family:var(--display); font-weight:700; font-size:25px; line-height:1.42;
  margin:0 0 24px; color:var(--ink);
  padding-left:18px; border-left:2px solid var(--shu);
}

/* ------------------------------------------------------------
   SIGNATURE — the verdict seal (印).
   A vermilion hanko stamps the result: 正 correct / 半 half / 誤 error.
   This is the one bold element; everything else stays quiet.
   ------------------------------------------------------------ */
.verdict{ display:flex; align-items:center; gap:18px; margin-bottom:20px; }

.seal{
  width:64px; height:64px; flex:none; position:relative;
  display:grid; place-items:center;
  border:2px solid var(--shu);
  border-radius:6px;
  background:rgba(232,67,63,.10);
  box-shadow:var(--glow-shu), inset 0 0 18px rgba(232,67,63,.15);
  animation:stamp .42s cubic-bezier(.3,1.5,.5,1) both;
}
.seal__kanji{
  font-family:var(--display); font-weight:800; font-size:30px; line-height:1;
  color:var(--shu-lift); text-shadow:0 0 16px rgba(232,67,63,.7);
}
.seal--correct{ border-color:var(--jade); background:rgba(70,214,160,.10); box-shadow:0 0 28px rgba(70,214,160,.34), inset 0 0 18px rgba(70,214,160,.14); }
.seal--correct .seal__kanji{ color:var(--jade); text-shadow:0 0 16px rgba(70,214,160,.7); }
.seal--partial{ border-color:var(--kin); background:rgba(217,164,65,.10); box-shadow:0 0 28px rgba(217,164,65,.32), inset 0 0 18px rgba(217,164,65,.14); }
.seal--partial .seal__kanji{ color:var(--kin-lift); text-shadow:0 0 16px rgba(217,164,65,.7); }

@keyframes stamp{
  0%{ opacity:0; transform:scale(2.1) rotate(-14deg); }
  60%{ opacity:1; transform:scale(.94) rotate(2deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}

.verdict__meta{ display:flex; flex-direction:column; gap:3px; }
.verdict__word{
  font-family:var(--hud); font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.22em; color:var(--ink);
}
.verdict__score{ font-family:var(--hud); font-size:12px; letter-spacing:.1em; color:var(--ink-faint); }

.feedback{ font-size:15px; color:var(--ink); margin:0 0 20px; }

/* --- Content blocks --- */
.block{ margin-top:22px; }
.block__head{
  font-family:var(--hud); font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.2em; color:var(--ink-faint); margin:0 0 11px;
  display:flex; align-items:center; gap:10px;
}
.block__head::after{ content:""; flex:1; height:1px; background:var(--line); }

.points{ margin:0; padding:0; list-style:none; }
.points li{ position:relative; padding:5px 0 5px 22px; font-size:15px; color:var(--ink-soft); }
.points li::before{
  content:""; position:absolute; left:2px; top:13px;
  width:6px; height:6px; background:var(--neon-dim); transform:rotate(45deg);
}

/* Gold leaf marks what you failed to recall — the gaps are the value. */
.points--missed li{ color:var(--ink); padding-left:24px; }
.points--missed li::before{
  background:var(--kin); box-shadow:0 0 10px rgba(217,164,65,.8);
}

.your-answer{
  background:var(--field); border:1px solid var(--line);
  border-left:2px solid var(--neon-dim);
  padding:13px 16px; font-size:14px; color:var(--ink-soft);
  white-space:pre-wrap; margin-top:6px;
}

.reveal{ margin-top:20px; border-top:1px solid var(--line); padding-top:16px; }
.reveal summary{
  cursor:pointer; list-style:none;
  font-family:var(--hud); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ink-faint);
}
.reveal summary::-webkit-details-marker{ display:none; }
.reveal summary::before{ content:"▶ "; color:var(--neon-dim); font-size:9px; }
.reveal[open] summary::before{ content:"▼ "; }
.reveal summary:hover{ color:var(--neon); }
.reveal p{ margin:12px 0 0; font-size:15px; color:var(--ink-soft); }

/* --- Results --- */
.score{ text-align:center; padding:12px 0 4px; }
.score__num{
  font-family:var(--display); font-weight:800; font-size:78px; line-height:1;
  background:linear-gradient(180deg, var(--kin-lift), var(--kin) 60%, #8A6420);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(217,164,65,.4));
}
.score__num span{ font-size:26px; color:var(--ink-faint); -webkit-text-fill-color:var(--ink-faint); }
.score__label{
  font-family:var(--hud); font-size:11px; text-transform:uppercase;
  letter-spacing:.24em; color:var(--ink-faint); margin-top:10px;
}
.score__verdict{ text-align:center; color:var(--ink-soft); font-size:15px; margin:16px 0 0; }

.tally{ margin-top:26px; border-top:1px solid var(--line); }
.tally__row{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 0; border-bottom:1px solid var(--line);
}
.tally__mark{
  font-family:var(--display); font-weight:800; font-size:15px; line-height:1.5;
  flex:none; width:20px; text-align:center;
}
.tally__mark--correct{ color:var(--jade); }
.tally__mark--partial{ color:var(--kin); }
.tally__mark--bad{ color:var(--shu-lift); }
.tally__q{ flex:1; font-size:14px; color:var(--ink-soft); }
.tally__score{ font-family:var(--hud); font-size:13px; font-weight:600; color:var(--ink-faint); }

/* --- Loading: a revolving seal ring --- */
.load{ display:flex; flex-direction:column; align-items:center; gap:20px; padding:44px 0; text-align:center; }
.load__ring{
  width:46px; height:46px; position:relative;
  border:2px solid var(--line-hot);
  border-top-color:var(--neon); border-right-color:var(--shu);
  border-radius:50%;
  animation:spin 1.05s cubic-bezier(.6,.15,.4,.85) infinite;
  box-shadow:var(--glow-neon);
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.load p{ margin:0; font-family:var(--hud); font-size:12px; text-transform:uppercase; letter-spacing:.18em; color:var(--neon-dim); }

/* --- Errors: direction, not mood --- */
.error{
  border:1px solid rgba(232,67,63,.5);
  border-left:3px solid var(--shu);
  background:rgba(232,67,63,.09);
  color:#FFC9C7; padding:14px 16px; font-size:14px; margin-top:18px;
}

/* --- Footer --- */
.foot{
  margin-top:34px; text-align:center;
  font-family:var(--hud); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.2em; color:var(--ink-faint);
}
.foot b{ color:var(--neon-dim); font-weight:600; }

/* --- Responsive --- */
@media (max-width:640px){
  .banner{ display:none; }
  .wrap{ padding:26px 15px 64px; }
  .panel{ padding:22px 18px; }
  .lede{ font-size:26px; }
  .question{ font-size:20px; padding-left:14px; }
  .score__num{ font-size:60px; }
  .mast{ flex-direction:column; align-items:flex-start; gap:10px; }
  .mast__hud{ text-align:left; }
  .seal{ width:54px; height:54px; }
  .seal__kanji{ font-size:25px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}