/* 曲名探偵（/games/detective/）：黒ぬりの事件ファイル。games.js の GAMES.detective */
.game[data-game="detective"]{background:radial-gradient(120% 80% at 50% -10%,rgba(255,214,140,.22),transparent 60%),#221c17;border-color:#3a2f26;color:#f4ead6}
.dt{--paper:#f6ecd4;--paper2:#ecdcb6;--ink:#2a221b;--red:#c8102e;--tape:rgba(255,236,170,.72);width:100%;display:grid;gap:18px;justify-items:center;text-align:left}
.dt kbd{display:inline-block;min-width:1.6em;padding:1px 5px;border-radius:5px;background:rgba(0,0,0,.12);font:700 11px/1.4 ui-monospace,Consolas,monospace;text-align:center;vertical-align:middle}

/* ---------- 表紙 ---------- */
.dt-cover{position:relative;width:100%;text-align:center;padding:10px 6px 4px}
.dt-stamp-s{display:inline-block;margin:0 0 8px;padding:3px 12px;border:3px solid var(--red);border-radius:6px;color:var(--red);font:400 18px/1 var(--disp);letter-spacing:.18em;transform:rotate(-4deg);background:rgba(200,16,46,.06)}
.dt-logo{margin:0;font:900 clamp(44px,9vw,78px)/1 var(--jp);letter-spacing:.08em;color:#fff3d6;text-shadow:0 4px 0 #000,0 0 40px rgba(255,200,110,.35)}
.dt-logo small{display:block;margin-bottom:6px;font:italic 700 clamp(16px,2.6vw,22px)/1 "Playfair Display",serif;letter-spacing:.12em;color:#f5b82e;text-shadow:none}
.dt-lead{margin:14px auto 0;max-width:34em;color:#e3d5bb;font-size:15px;line-height:1.8}.dt-lead b{color:#ffd57a}
.dt-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;width:100%}
.dt-mode{position:relative;display:grid;gap:4px;align-content:start;text-align:left;padding:22px 16px 14px;border:0;border-radius:4px 14px 14px 14px;background:linear-gradient(160deg,var(--paper),var(--paper2));color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.4);cursor:pointer;transition:transform .18s,box-shadow .18s}
.dt-mode::before{content:"";position:absolute;top:-9px;left:14px;width:74px;height:16px;border-radius:6px 6px 0 0;background:var(--paper2)}
.dt-mode::after{content:"";position:absolute;top:-12px;right:22px;width:14px;height:38px;border:3px solid #9aa3ad;border-radius:8px;transform:rotate(8deg)}
.dt-mode:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 16px 30px rgba(0,0,0,.5)}
.dt-mode:focus-visible{outline:3px solid #f5b82e;outline-offset:3px}
.dt-mode-i{font-size:28px;line-height:1}
.dt-mode b{font-size:17px;font-weight:900}
.dt-mode small{font-size:12.5px;color:#5d5142;line-height:1.6}
.dt-mode em{margin-top:6px;font:400 16px/1 var(--disp);letter-spacing:.04em;color:#8f5600;font-style:normal}
.dt-mode.day{background:linear-gradient(160deg,#fff4dc,#f3d79c)}
.dt-new{position:absolute;top:10px;right:46px;padding:2px 10px;background:var(--red);color:#fff;font:400 15px/1.3 var(--disp);letter-spacing:.12em;transform:rotate(4deg)}
.dt-done{display:inline-block;margin-top:4px;padding:3px 8px;border-radius:6px;background:rgba(31,154,87,.14);color:#17663c;font-size:12px;font-weight:700}
.dt-next{margin:0;font:400 18px/1 var(--disp);letter-spacing:.08em;color:#cdb68b}
.dt-how{width:100%;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.06);color:#e9dcc2;font-size:14px}
.dt-how summary{cursor:pointer;font-weight:700}.dt-how ul{margin:10px 0 0;padding-left:1.2em;line-height:1.8}.dt-how b{color:#ffd57a}.dt-how kbd{background:rgba(255,255,255,.14)}

/* ---------- 事件ファイル ---------- */
.dt-play .g-hud div{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}.dt-play .g-hud small{color:#c9b693}.dt-play .g-hud b{color:#f5b82e}
.dt-play .g-mute{color:#e9dcc2}
.dt-file{position:relative;width:100%;margin-top:14px;padding:18px clamp(12px,2.4vw,24px) 18px;border-radius:4px 16px 16px 16px;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(120,90,40,.07) 27px 28px),linear-gradient(170deg,var(--paper),var(--paper2));color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.dt-tab{position:absolute;top:-24px;left:0;padding:5px 16px 4px;border-radius:10px 10px 0 0;background:var(--paper);font:400 17px/1 var(--disp);letter-spacing:.14em;color:#6b5a43}
.dt-file-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
.dt-file-h span:first-child{font:700 12px/1 ui-monospace,Consolas,monospace;letter-spacing:.2em;color:#8a7658}
.dt-file-h b{font-size:20px;font-weight:900}
.dt-pts{margin-left:auto;font-size:13px;color:#6b5a43}
.dt-pts strong{display:inline-block;font:400 34px/1 var(--disp);color:var(--red);vertical-align:-4px}
.dt-pts strong.pop{animation:dtPop .45s ease}
@keyframes dtPop{0%{transform:scale(1.5);color:#000}100%{transform:none}}
.dt-timer{height:6px;border-radius:9px;background:rgba(0,0,0,.1);overflow:hidden;margin-bottom:14px}
.dt-timer i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8f5600,#f5b82e);border-radius:9px}
.dt-timer i.last{background:linear-gradient(90deg,#7a0a1d,var(--red))}

.dt-clues{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px 14px}
.dt-clue{perspective:900px}
.dt-back,.dt-front{border-radius:10px}
.dt-back{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#2d251e;color:#d9c7a4;box-shadow:inset 0 0 0 2px rgba(255,255,255,.06)}
.dt-back span{font:400 20px/1 var(--disp);letter-spacing:.16em}.dt-back small{font:400 18px/1 var(--disp);color:#f5b82e;letter-spacing:.06em}
.dt-front{position:relative;padding:16px 16px 14px;background:#fffdf7;box-shadow:0 6px 14px rgba(60,40,10,.18);display:none}
.dt-front::before{content:"";position:absolute;top:-9px;left:50%;width:76px;height:20px;margin-left:-38px;background:var(--tape);transform:rotate(-3deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.dt-clue:nth-child(even) .dt-front::before{transform:rotate(4deg)}
.dt-clue.on .dt-back{display:none}
.dt-clue.on .dt-front{display:block;transform:rotate(-.5deg);animation:dtFlip .55s cubic-bezier(.3,1.4,.5,1)}
.dt-clue.on:nth-child(even) .dt-front{transform:rotate(.6deg)}
.dt-clue.all .dt-front{animation:none}
@keyframes dtFlip{0%{transform:rotateX(-90deg);opacity:0}100%{opacity:1}}
.dt-h{display:flex;align-items:center;gap:6px;margin:0 0 6px;font:700 12px/1.3 var(--jp);letter-spacing:.06em;color:#8a7658}
.dt-h span{font-size:17px}
.dt-b{margin:0;font-size:15px;line-height:1.75;overflow-wrap:anywhere}
.dt-big{font:400 30px/1 var(--disp);letter-spacing:.04em;color:var(--red)}
.dt-tag{display:inline-block;padding:1px 8px;border-radius:99px;background:#ffe2a8;font-size:12px;font-weight:700}
.dt-en{display:block;font:italic 700 19px/1.4 "Playfair Display",serif}.dt-ja{display:block;font-size:13.5px;color:#5d5142}
.dt-x{display:inline-block;width:calc(var(--n,2) * 1.5em);height:1.05em;margin:0 .15em;vertical-align:-.15em;background:#15110d;border-radius:2px;transform:rotate(-.8deg)}
.dt-sil{display:flex;flex-wrap:wrap;gap:6px 14px;font:700 20px/1 ui-monospace,Consolas,monospace}
.dt-w{display:inline-flex;gap:3px}
.dt-w i{display:inline-grid;place-items:center;width:1.05em;height:1.35em;border-bottom:3px solid #2a221b;font-style:normal}
.dt-w i.on{color:var(--red)}.dt-w b{align-self:end;padding:0 1px}

.dt-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.dt-acts .btn{background:#fff;color:var(--ink)}.dt-acts .btn:disabled{opacity:.45;cursor:default}

/* 4択 */
.dt-opts{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));width:100%}
.dt-opts button{position:relative;padding:14px 16px 14px 48px;text-align:left;color:var(--ink)}
.dt-opts button kbd{position:absolute;left:14px;top:50%;transform:translateY(-50%)}
.dt-opts button.gone{opacity:.28;text-decoration:line-through}
/* 名探偵モード */
.dt-type{width:100%;display:grid;gap:8px}
.dt-type label{font-weight:900;font-size:16px;color:#fff3d6}.dt-type label small{display:block;font-weight:400;font-size:12.5px;color:#cdb68b}
.dt-type input{width:100%;padding:14px 16px;border:2px solid #f5b82e;border-radius:12px;background:#fffdf7;color:var(--ink);font-size:18px}
.dt-type input:focus{outline:3px solid rgba(245,184,46,.45)}
.dt-type input.shake{animation:dtShake .4s}
@keyframes dtShake{25%{transform:translateX(-8px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.dt-sug{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dt-sug button{width:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 14px;border:1px solid rgba(255,255,255,.16);border-radius:10px;background:rgba(255,255,255,.07);color:#fff3d6;text-align:left}
.dt-sug button:hover,.dt-sug button:focus-visible{background:rgba(245,184,46,.2);border-color:#f5b82e}
.dt-sug small{color:#cdb68b}.dt-none{padding:8px;color:#cdb68b;font-size:13px}
.dt-tries{margin:0;color:#ffb3a8;font-weight:700;font-size:14px}

/* 結果 */
.dt-res{position:relative;width:100%;display:grid;gap:14px;justify-items:center;padding-top:8px}
.dt-stamp{padding:6px 22px;border:5px double currentColor;border-radius:10px;font:900 clamp(34px,7vw,52px)/1 var(--jp);letter-spacing:.2em;transform:rotate(-7deg);animation:dtSlam .45s cubic-bezier(.2,1.6,.4,1)}
.dt-stamp.ok{color:#ff4d5e;text-shadow:0 0 18px rgba(255,77,94,.4)}.dt-stamp.ng{color:#a39a8e}
@keyframes dtSlam{0%{transform:scale(2.6) rotate(-14deg);opacity:0}100%{transform:rotate(-7deg);opacity:1}}
.dt-ans{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:14px;align-items:center;width:100%;padding:12px;border-radius:14px;background:#fffdf7;color:var(--ink);text-align:left;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.dt-ans img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000}
.dt-ans span{display:grid;gap:2px}.dt-ans small{font-size:13px;color:#6b5a43}.dt-ans small b{color:var(--red);font-size:16px}
.dt-ans span>b{font-size:20px;font-weight:900;line-height:1.3}.dt-ans em{font-style:normal;color:#4a4036}.dt-ans i{font-style:normal;font-size:12.5px;color:#8a7658}
.dt-ans u{margin-top:4px;text-decoration:none;color:#8f5600;font-weight:700;font-size:13.5px}
.dt-ans:hover u{text-decoration:underline}

/* 事件簿（終了画面） */
.game[data-game="detective"] :is(.q-n,.g-rank,.note,.g-xp){color:#e9dcc2}.game[data-game="detective"] .g-rank b{color:#ffd57a}
.dt-book{width:100%;display:grid;gap:12px;margin:8px 0}
.dt-book-h{margin:0;color:#fff3d6;font-size:15px}.dt-book-h b{color:#f5b82e}
.dt-marks{font-size:20px;letter-spacing:.12em;color:#ffd57a}
.dt-book ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:10px}
.dt-book li a{position:relative;display:grid;gap:6px;height:100%;padding:8px;border-radius:10px;background:#fffdf7;color:var(--ink);text-align:left;overflow:hidden}
.dt-book li a::after{content:"解決";position:absolute;top:6px;right:-26px;width:90px;padding:2px 0;background:#c8102e;color:#fff;font-size:11px;font-weight:900;text-align:center;transform:rotate(35deg)}
.dt-book li.ng a::after{content:"迷宮";background:#7d756b}
.dt-book li img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#000}
.dt-book li b{font-size:13.5px;line-height:1.3}.dt-book li small{font-size:11.5px;color:#6b5a43}.dt-book li em{font-style:normal;font-size:11.5px;font-weight:700;color:#8f5600}
.dt-book .btn{justify-self:center}

@media (max-width:640px){
  .dt-ans{grid-template-columns:1fr}
  .dt-file-h b{font-size:17px}.dt-pts{margin-left:0;width:100%}
  .dt-b{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.dt-clue.on .dt-front,.dt-stamp,.dt-mode,.dt-pts strong.pop{transition:none;animation:none}}