:root{
  color-scheme:dark;
  --bg:#08090b;--panel:#12151a;--panel2:#191d24;--line:#303641;--text:#f3f4f6;--muted:#a9b0bb;
  --accent:#8b5cf6;--surv:#d6b35d;--killer:#d95b5b;--ok:#59c68a;--shadow:0 16px 40px rgba(0,0,0,.38)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at top,#171921 0,#0a0b0f 38%,#060709 100%);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;min-height:100vh}
button,input,select{font:inherit}.app{max-width:1380px;margin:auto;padding:18px 18px 84px}.topbar{display:flex;gap:18px;align-items:center;justify-content:space-between;margin-bottom:16px}.brand h1{font-size:clamp(22px,4vw,36px);margin:0;letter-spacing:.03em}.brand p{margin:5px 0 0;color:var(--muted);font-size:13px}.status{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.pill{border:1px solid var(--line);background:#11141a;border-radius:999px;padding:7px 11px;color:#d6d9df;font-size:12px}.pill.ok{border-color:#2f7654;color:#9ce7ba}
.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;position:sticky;top:0;z-index:20;padding:8px;background:rgba(8,9,11,.9);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.nav button{border:0;background:transparent;color:var(--muted);padding:12px;border-radius:11px;font-weight:800;cursor:pointer}.nav button.active{background:linear-gradient(135deg,#5b36b3,#8b5cf6);color:white}.toolbar{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:10px;margin:16px 0}.toolbar input,.toolbar select{width:100%;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:12px 13px;outline:none}.toolbar input:focus,.toolbar select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,92,246,.18)}.segmented{display:flex;background:var(--panel);border:1px solid var(--line);padding:4px;border-radius:12px}.segmented button{border:0;background:transparent;color:var(--muted);padding:8px 13px;border-radius:8px;cursor:pointer;font-weight:700}.segmented button.active{background:var(--panel2);color:white}.meta-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;margin:10px 2px 14px}.accent-picker{display:flex;align-items:center;gap:7px}.accent-picker input{width:35px;height:28px;border:0;padding:0;background:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}.card{position:relative;background:linear-gradient(155deg,#181c23,#101217);border:1px solid var(--line);border-radius:16px;padding:13px;min-height:250px;cursor:pointer;transition:.18s transform,.18s border-color,.18s box-shadow;overflow:hidden}.card:hover{transform:translateY(-3px);border-color:#665389;box-shadow:var(--shadow)}.card.learned::after{content:"✓";position:absolute;right:10px;top:9px;background:var(--ok);color:#05140b;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-weight:900}.icon-shell{width:142px;height:142px;margin:0 auto 10px;display:grid;place-items:center;position:relative}.icon-shell::before{content:"";position:absolute;inset:18px;background:var(--accent);transform:rotate(45deg);border-radius:8px;box-shadow:0 0 24px color-mix(in srgb,var(--accent) 55%,transparent)}.icon-shell img{position:relative;width:100%;height:100%;object-fit:contain;z-index:1;filter:drop-shadow(0 5px 9px #000)}.card h3{font-size:16px;margin:2px 0 6px;text-align:center}.card .en{text-align:center;color:#7f8793;font-size:11px;min-height:16px}.tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:9px}.tag{font-size:11px;padding:4px 7px;border-radius:999px;background:#222733;color:#cdd2db}.tag.survivor{color:#ffe09a}.tag.killer{color:#ff9c9c}
.empty{border:1px dashed var(--line);border-radius:16px;text-align:center;padding:54px;color:var(--muted)}
.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:13px}.character{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden}.character-head{display:grid;grid-template-columns:88px 1fr;gap:12px;align-items:center;padding:12px}.portrait{width:88px;height:110px;border-radius:11px;background:#090a0d;object-fit:cover;object-position:50% 15%;border:1px solid #353b46}.character h3{margin:0;font-size:17px}.character .en{color:var(--muted);font-size:12px;margin-top:4px}.mini-perks{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 10px 12px}.mini-perk{border:1px solid var(--line);background:#0f1116;border-radius:10px;padding:6px;text-align:center;cursor:pointer;color:var(--text)}.mini-perk img{width:58px;height:58px;object-fit:contain}.mini-perk span{display:block;font-size:10px;line-height:1.25}
.study-wrap,.quiz-wrap{max-width:820px;margin:18px auto}.study-card,.quiz-card{background:linear-gradient(145deg,#171b22,#0d0f13);border:1px solid var(--line);border-radius:22px;padding:22px;box-shadow:var(--shadow);min-height:520px}.study-card .icon-shell,.quiz-card .icon-shell{width:230px;height:230px}.study-front{text-align:center}.study-front h2{font-size:28px;margin:8px 0}.answer-box{background:#0b0d11;border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:15px}.answer-box h3{margin:0 0 7px;font-size:13px;color:#bca7f5}.answer-box p{margin:0;line-height:1.7;white-space:pre-line}.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}.btn{border:1px solid var(--line);background:#1c212a;color:white;border-radius:12px;padding:11px 17px;font-weight:800;cursor:pointer}.btn.primary{background:var(--accent);border-color:transparent}.btn.good{background:#276344;border-color:#388a60}.btn:disabled{opacity:.45;cursor:not-allowed}.progress{text-align:center;color:var(--muted);font-size:13px;margin-bottom:12px}.quiz-prompt{text-align:center;color:#c6cad1;margin:4px 0 12px}.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.choice{border:1px solid var(--line);background:#171b22;color:white;border-radius:13px;padding:14px;text-align:left;cursor:pointer;font-weight:700}.choice.correct{border-color:#4bc983;background:#173727}.choice.wrong{border-color:#e66868;background:#401d22}.score{display:flex;gap:10px;justify-content:center;margin:12px 0;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.78);display:grid;place-items:center;padding:18px;z-index:100}.modal{width:min(760px,100%);max-height:92vh;overflow:auto;background:#11141a;border:1px solid #3a414d;border-radius:20px;box-shadow:0 28px 80px #000;padding:20px}.modal-head{display:flex;gap:18px;align-items:center}.modal-head .icon-shell{width:145px;height:145px;flex:0 0 auto}.modal h2{margin:0 0 5px}.modal .sub{color:var(--muted)}.close{margin-left:auto;align-self:flex-start;border:1px solid var(--line);background:#20252e;color:white;border-radius:10px;width:38px;height:38px;cursor:pointer}.detail-tabs{display:flex;gap:8px;margin:16px 0 10px}.detail-tabs button{border:1px solid var(--line);background:#171b22;color:var(--muted);padding:8px 12px;border-radius:9px;cursor:pointer}.detail-tabs button.active{background:var(--accent);color:white}.detail-body{white-space:pre-line;line-height:1.75;color:#e5e7eb}.modal-actions{display:flex;justify-content:flex-end;margin-top:18px}
.open-note{background:#151b18;border:1px solid #315b42;color:#bce7ca;border-radius:13px;padding:10px 13px;font-size:12px;margin:13px 0}.hidden{display:none!important}
@media(max-width:720px){.app{padding:10px 10px 84px}.topbar{align-items:flex-start;flex-direction:column}.status{justify-content:flex-start}.nav{grid-template-columns:repeat(4,1fr);gap:3px}.nav button{font-size:12px;padding:10px 5px}.toolbar{grid-template-columns:1fr}.segmented{justify-content:stretch}.segmented button{flex:1}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card{min-height:215px;padding:9px}.icon-shell{width:112px;height:112px}.card h3{font-size:13px}.card .en{font-size:9px}.character-grid{grid-template-columns:1fr}.choices{grid-template-columns:1fr}.modal-head{align-items:flex-start}.modal-head .icon-shell{width:105px;height:105px}.study-card,.quiz-card{padding:14px;min-height:480px}.study-card .icon-shell,.quiz-card .icon-shell{width:190px;height:190px}}