:root{
    --night:#0d1420; --night-2:#141d2e; --ink:#eef2f8; --ink-dim:#9aa7bb;
    --chat-bg:#a9b8cb; --paper:#ffffff; --me-bubble:#9fdd7d; --bond:#e8617a;
    --alert-1:#f2a232; --alert-2:#e5484d;
    --memo-bg:#fff6d8; --memo-edge:#d9a92f; --memo-ink:#4a3a10;
    --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
    --gothic:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%}
  body{
    font-family:var(--gothic);
    background:
      radial-gradient(1200px 700px at 70% -10%, #1b2946 0%, transparent 60%),
      radial-gradient(900px 600px at 10% 110%, #16233c 0%, transparent 55%),
      var(--night);
    color:var(--ink);
    display:flex;align-items:center;justify-content:center;
    min-height:100dvh;overflow:hidden;
  }
  .sideCopy{
    position:fixed;left:6vw;top:50%;transform:translateY(-50%);
    writing-mode:vertical-rl;font-family:var(--serif);
    font-size:clamp(18px,2.2vw,30px);letter-spacing:.45em;color:#33415c;
    user-select:none;pointer-events:none;
  }
  .sideCopy small{font-size:.5em;letter-spacing:.6em;color:#273349;margin-top:1.5em}
  @media (max-width:860px){.sideCopy{display:none}}

  .phone{
    position:relative;width:min(420px,100vw);height:min(820px,100dvh);
    background:var(--chat-bg);overflow:hidden;display:flex;flex-direction:column;
    box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px #2a3854;transition:box-shadow .6s;
  }
  @media (min-width:480px) and (min-height:880px){.phone{border-radius:36px}}
  .phone.alarm{box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px #5a2a34, inset 0 0 60px rgba(229,72,77,.28);}

  .chatHead{
    background:#2c3a52;color:#fff;
    padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
    display:flex;align-items:center;gap:10px;flex-shrink:0;
  }
  .chatHead .ava{width:36px;height:36px;border-radius:50%;background:#f3e2c8;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;}
  .chatHead .who{line-height:1.25;min-width:0;flex:1}
  .chatHead .who b{font-size:15px;font-weight:600;display:block}
  .chatHead .who span{font-size:11px;color:#aebbd2}
  .nbBtn{
    flex-shrink:0;border:1px solid #45597e;background:transparent;color:#dfe7f2;
    border-radius:8px;padding:6px 10px;font-size:12px;cursor:pointer;font-family:var(--gothic);
  }
  .nbBtn:active{transform:translateY(1px)}

  .hud{background:#212d42;padding:7px 14px 9px;display:flex;gap:16px;flex-shrink:0;position:relative;}
  .meter{flex:1;min-width:0}
  .meter .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:.18em;color:#8fa0bb;margin-bottom:4px;}
  .meter .lab b{font-family:var(--serif);font-size:12px;color:#dfe7f2;letter-spacing:.3em}
  .meter .lab .val{font-variant-numeric:tabular-nums;letter-spacing:0}
  .bar{height:6px;border-radius:3px;background:#0e1626;overflow:hidden}
  .bar i{display:block;height:100%;border-radius:3px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
  .bar.bond i{background:linear-gradient(90deg,#c94f6b,var(--bond))}
  .bar.danger i{background:linear-gradient(90deg,var(--alert-1),var(--alert-2))}
  .chip{position:absolute;top:-4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:99px;pointer-events:none;animation:chipUp .95s ease forwards;white-space:nowrap;}
  .chip.good{background:var(--bond);color:#fff}
  .chip.bad{background:var(--alert-2);color:#fff}
  .chip.calm{background:#3d8f6b;color:#fff}
  @keyframes chipUp{0%{opacity:0;transform:translateY(6px)}18%{opacity:1;transform:translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}

  .log{flex:1;overflow-y:auto;padding:14px 12px 18px;display:flex;flex-direction:column;gap:10px;-webkit-overflow-scrolling:touch;}
  .row{display:flex;gap:8px;align-items:flex-end;animation:pop .28s ease}
  .row.me{justify-content:flex-end}
  @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  .row .ava{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:#f3e2c8;display:flex;align-items:center;justify-content:center;font-size:17px;}
  .bub{max-width:76%;padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.65;word-break:break-word;box-shadow:0 1px 1px rgba(20,30,50,.15);}
  .row:not(.me) .bub{background:var(--paper);color:#1c2430;border-bottom-left-radius:5px}
  .row.me .bub{background:var(--me-bubble);color:#17300e;border-bottom-right-radius:5px}
  .bub .img{display:block;background:#3b4252;color:#dce3f2;text-align:center;border-radius:8px;padding:18px 10px;font-size:12px;margin:4px 0;min-width:150px}
  .sysRow{align-self:center;animation:pop .3s ease}
  .sysPill{font-size:11px;color:#e9eef6;background:rgba(30,42,64,.55);padding:3px 12px;border-radius:99px;letter-spacing:.08em;}
  .typing .bub{display:flex;gap:4px;align-items:center;padding:12px 14px}
  .typing .dot{width:6px;height:6px;border-radius:50%;background:#9aa7bb;animation:blink 1s infinite}
  .typing .dot:nth-child(2){animation-delay:.18s}
  .typing .dot:nth-child(3){animation-delay:.36s}
  @keyframes blink{0%,70%,100%{opacity:.25}35%{opacity:1}}

  .tray{
    flex-shrink:0;padding:10px 12px calc(14px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;gap:8px;
    background:linear-gradient(to top, rgba(20,30,50,.20), transparent);min-height:12px;
    max-height:46%;overflow-y:auto;
  }
  .trayTitle{font-size:10.5px;letter-spacing:.3em;color:#3c4c68;text-align:center}
  .chBtn{
    font-family:var(--gothic);font-size:13.5px;line-height:1.5;text-align:left;
    padding:11px 15px;border-radius:14px;border:0;cursor:pointer;
    background:#fdfefe;color:#1c2430;box-shadow:0 2px 0 rgba(20,30,50,.22);
    animation:pop .3s ease backwards;
  }
  .chBtn small{display:block;font-size:11px;color:#7286a0;margin-top:1px}
  .chBtn:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(20,30,50,.22)}
  .chBtn:focus-visible{outline:3px solid var(--bond);outline-offset:2px}

  .ov{position:absolute;inset:0;z-index:30;display:none;flex-direction:column;align-items:center;justify-content:center;padding:32px 26px;text-align:center;}
  .ov.on{display:flex}
  #narrOv,#lessonOv{z-index:45}
  #narrOv{background:rgba(8,12,20,.96);cursor:pointer}
  #narrOv .narrBox{display:flex;flex-direction:column;gap:18px;max-width:30ch}
  #narrOv p{font-family:var(--serif);font-size:17px;line-height:2;color:var(--ink);letter-spacing:.06em;animation:fadeIn .5s ease;text-wrap:balance;}
  #narrOv .hint{position:absolute;bottom:26px;left:0;right:0;font-size:11px;color:#5b6a84;letter-spacing:.3em;animation:blink 1.6s infinite;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  #lessonOv{background:rgba(8,12,20,.82);overflow-y:auto}
  .memo{background:var(--memo-bg);color:var(--memo-ink);border-left:5px solid var(--memo-edge);border-radius:6px;padding:20px 20px 16px;max-width:340px;text-align:left;box-shadow:0 18px 50px rgba(0,0,0,.5);animation:pop .35s ease;}
  .memo .tag{font-size:10.5px;letter-spacing:.28em;color:#8a6d14;margin-bottom:8px;font-weight:700;}
  .memo h3{font-family:var(--serif);font-size:17px;line-height:1.5;margin-bottom:10px;text-wrap:balance}
  .memo p{font-size:13.5px;line-height:1.85}
  .memo button{margin-top:16px;width:100%;padding:10px;border:0;border-radius:8px;cursor:pointer;background:#4a3a10;color:#ffedb0;font-size:13px;letter-spacing:.2em;font-family:var(--gothic);}

  #callOv{background:linear-gradient(175deg,#131b2b 0%,#0a0f19 100%);justify-content:flex-start;padding:0;text-align:left;cursor:pointer;}
  .callTop{padding:40px 20px 12px;text-align:center;flex-shrink:0}
  .callTop .ring{width:80px;height:80px;border-radius:50%;margin:0 auto 12px;background:#f3e2c8;display:flex;align-items:center;justify-content:center;font-size:42px;box-shadow:0 0 0 0 rgba(232,97,122,.4);animation:pulse 2.2s infinite;}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(232,97,122,.35)}70%{box-shadow:0 0 0 22px rgba(232,97,122,0)}100%{box-shadow:0 0 0 0 rgba(232,97,122,0)}}
  .callTop b{font-size:18px;font-weight:600}
  .callTop .t{font-size:12px;color:#7f8ea8;margin-top:4px;letter-spacing:.15em}
  #callLog{flex:1;overflow-y:auto;padding:8px 22px 12px;display:flex;flex-direction:column;gap:12px;}
  .cline{animation:fadeIn .4s ease;max-width:100%}
  .cline .cwho{font-size:10.5px;letter-spacing:.25em;color:#6b7d9c;margin-bottom:3px}
  .cline p{font-family:var(--serif);font-size:15.5px;line-height:1.9;color:#e6ecf6}
  .cline.meLine p{color:#9fdd7d;font-family:var(--gothic);font-size:14px}
  #callTray{flex-shrink:0;padding:10px 16px calc(20px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
  #callTray .chBtn{background:#1f2b42;color:#e6ecf6;box-shadow:0 2px 0 rgba(0,0,0,.4)}
  .callHint{text-align:center;font-size:10.5px;color:#4c5b76;letter-spacing:.3em;padding-bottom:6px;animation:blink 1.6s infinite;flex-shrink:0;}

  #titleScreen,#resultScreen{
    position:absolute;inset:0;z-index:40;
    background:radial-gradient(700px 420px at 80% -5%, #1d2c4d 0%, transparent 60%), var(--night);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:36px 30px;text-align:center;
  }
  #resultScreen{display:none;overflow-y:auto;justify-content:flex-start;padding-top:44px;z-index:50}
  .eyebrow{font-size:10.5px;letter-spacing:.42em;color:#6d7f9e;margin-bottom:18px}
  .gameTitle{font-family:var(--serif);font-size:32px;line-height:1.4;letter-spacing:.12em;text-wrap:balance;margin-bottom:10px;}
  .gameTitle small{display:block;font-size:14px;letter-spacing:.3em;color:var(--bond);margin-top:10px}
  .lead{font-size:13px;line-height:2;color:var(--ink-dim);max-width:30ch;margin:18px 0 30px}
  .startBtn{font-family:var(--serif);font-size:16px;letter-spacing:.5em;text-indent:.5em;padding:15px 44px;border:1px solid #45597e;border-radius:2px;cursor:pointer;background:transparent;color:var(--ink);transition:background .3s,border-color .3s;}
  .startBtn:hover{background:#1a2740;border-color:var(--bond)}
  .credit{position:absolute;bottom:20px;left:24px;right:24px;font-size:10px;line-height:1.8;color:#43526e}

  .gradeBig{font-family:var(--serif);font-size:96px;line-height:1;margin:6px 0 2px}
  .gradeBig.s{color:#f5c84b}.gradeBig.a{color:#7fd1a8}.gradeBig.b{color:#8fa9d6}.gradeBig.c{color:var(--alert-2)}
  .gradeName{font-family:var(--serif);font-size:19px;letter-spacing:.3em;margin-bottom:8px}
  .gradeNote{font-size:12.5px;line-height:2;color:var(--ink-dim);max-width:32ch;margin-bottom:22px}
  .statRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px;}
  .stat{font-size:11px;padding:5px 12px;border-radius:99px;letter-spacing:.1em;background:#1a2438;color:#aebbd2;border:1px solid #2b3a56;}
  .stat.ok{color:#7fd1a8;border-color:#2e5a47}
  .stat.ng{color:#e08795;border-color:#5a2e38}
  .zukan{background:#111a2c;border:1px solid #2b3a56;border-radius:10px;padding:18px 20px;max-width:340px;width:100%;text-align:left;margin-bottom:22px;}
  .zukan .zt{font-size:10px;letter-spacing:.3em;color:#6d7f9e;margin-bottom:6px}
  .zukan h3{font-family:var(--serif);font-size:18px;letter-spacing:.1em;margin-bottom:12px;color:#f0d78a}
  .zukan ul{list-style:none;display:flex;flex-direction:column;gap:9px}
  .zukan li{font-size:12.5px;line-height:1.7;color:#cfd9e8;padding-left:20px;position:relative;}
  .zukan li::before{content:"✓";position:absolute;left:0;color:#7fd1a8;font-weight:700}
  .zukan li.mist::before{content:"？";color:#6d7f9e}
  .zukan li.mist{color:#5f6f8c}
  .slotList{list-style:none;display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
  .slotList li{display:flex;gap:10px;font-size:12px;color:#cfd9e8;border-bottom:1px dashed #223150;padding-bottom:4px}
  .slotList .sl{width:48px;color:#6d7f9e;letter-spacing:.1em;flex-shrink:0}
  .slotList .known{color:#f0d78a}
  .proto{font-size:10.5px;color:#43526e;line-height:1.8;margin-top:4px;margin-bottom:28px;max-width:34ch}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}