/* Kanji Dig — collection prototype. Same museum-card palette as Build-a-Kanji (play/style.css). Mobile first. */
:root {
  --paper: #f3eee2; --paper-2: #ebe4d3; --card: #fffdf8; --ink: #1d1d1f; --muted: #6f6a60; --line: #d9d0bc;
  --indigo: #274a78; --rust: #b0472d; --ok: #4f7a5a; --ok-bg: #e4efe5; --no: #a8a297; --no-bg: #e7e3da;
  --gold: #d39b2a; --gold-2: #f6d77a; --soil: #8d7350; --case: rgba(255,255,255,.55);
  --jp: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --en: 'Source Serif 4', Georgia, serif;
  --ui: Inter, 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --nav: 64px;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #16171b; --paper-2: #1e2026; --card: #22252c; --ink: #ece7dc; --muted: #a39d91; --line: #3a3d46;
          --indigo: #8fb0e0; --rust: #e0866a; --ok: #8cc49a; --ok-bg: #26382b; --no: #6c6a66; --no-bg: #2b2c30; --case: rgba(255,255,255,.04); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: var(--en); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
button { font: inherit; color: inherit; }
.app { max-width: 520px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column;
       padding: env(safe-area-inset-top) 16px calc(var(--nav) + 16px + env(safe-area-inset-bottom)); }
.fx-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
.haptic { position: fixed; left: -100px; top: 0; opacity: 0; pointer-events: none; }

/* header */
.top { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 8px; border-bottom: 1px solid var(--line); }
.brand { text-align: center; }
.brand-name { font: 700 18px var(--ui); letter-spacing: .04em; }
.brand-sub { font: 500 12px var(--ui); color: var(--muted); letter-spacing: .12em; text-transform: uppercase; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font: 700 17px var(--ui); cursor: pointer; }
.icon-btn.off { opacity: .4; text-decoration: line-through; }

/* tabs */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; gap: 4px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 88%, transparent);
        backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.tabs button { position: relative; flex: 1; max-width: 120px; height: 52px; border: 0; background: none; border-radius: 12px; cursor: pointer;
               display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 600 11px var(--ui); color: var(--muted); }
.tabs button .ti { font: 700 20px var(--jp); line-height: 1; }
.tabs button.on { color: var(--ink); background: var(--paper-2); }
.badge { position: absolute; top: 2px; right: 18%; min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: var(--rust);
         color: #fff; font: 700 11px/18px var(--ui); display: none; }
.badge.show { display: block; }
.bump { animation: bump .45s cubic-bezier(.3,1.8,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* generic */
.view-title { margin: 16px 0 4px; font: 700 13px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.lede { margin: 0 0 12px; color: var(--muted); font-size: 16px; }
.btn { min-height: 48px; padding: 0 22px; border-radius: 24px; border: 1.5px solid var(--ink); background: var(--card); font: 700 16px var(--ui); cursor: pointer; touch-action: manipulation; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn:disabled { opacity: .35; cursor: default; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.label { display: inline-block; font: 700 11px var(--ui); letter-spacing: .14em; padding: 5px 10px; border-radius: 6px; }
.label.ORIGIN { background: var(--indigo); color: var(--card); }
.label.THEORY { border: 1.5px dashed var(--muted); color: var(--muted); }
.label.OLD { border: 1.5px solid var(--rust); color: var(--rust); }
.label.RARE { background: linear-gradient(135deg, #f6d77a, #d39b2a); color: #3a2a06; }
.src { font: 500 12px var(--ui); color: var(--muted); } .src a { color: var(--muted); }
.story { font-size: 18px; line-height: 1.45; margin: 10px 0 8px; border-left: 3px solid var(--rust); padding-left: 10px; }

/* dig: puzzle board */
.prompt { text-align: center; padding-top: 14px; }
.prompt-label { font: 500 12px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.target { font: italic 600 clamp(30px, 9vw, 42px)/1.1 var(--en); margin: 4px 0 2px; }
.meta { font: 500 13px var(--ui); color: var(--muted); }
.jl { display: inline-block; font: 700 11px var(--ui); padding: 2px 7px; border-radius: 5px; background: var(--paper-2); color: var(--indigo); margin-left: 6px; }
.slots { display: flex; justify-content: center; gap: 10px; min-height: 64px; margin: 14px 0; }
.slot { width: 58px; height: 64px; border: 2px dashed var(--line); border-radius: 12px; display: grid; place-items: center; font: 600 30px var(--jp); }
.slot.filled { border-style: solid; border-color: var(--indigo); background: var(--card); animation: drop .22s cubic-bezier(.3,1.6,.5,1); }
.slot.plus { width: auto; border: 0; color: var(--muted); font: 600 22px var(--ui); }
@keyframes drop { from { transform: translateY(-10px) scale(.9); } to { transform: none; } }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { min-height: clamp(84px, 27vw, 108px); border-radius: 14px; border: 1.5px solid var(--line); background: var(--card); display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 2px; padding: 8px 4px; cursor: pointer; touch-action: manipulation; transition: transform .08s, background .2s, border-color .2s; }
.tile:active { transform: scale(.96); }
.tile .g { font: 600 clamp(32px, 10vw, 42px)/1 var(--jp); } .tile .m { font: 500 13px/1.2 var(--ui); color: var(--muted); text-align: center; }
.tile.sel { border-color: var(--indigo); box-shadow: 0 0 0 2px var(--indigo) inset; }
.tile.ok { background: var(--ok-bg); border-color: var(--ok); } .tile.no { background: var(--no-bg); border-color: var(--no-bg); opacity: .5; }
.controls { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.tries { display: flex; gap: 8px; } .try-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); } .try-dot.used { background: var(--no); }
.msg { min-height: 20px; font: 600 14px var(--ui); color: var(--rust); text-align: center; }
.wrongshake { animation: wrong .35s; }
@keyframes wrong { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }

/* dig: excavation */
.site { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 18px; }
.site-title { font: 700 13px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.slab { position: relative; width: min(78vw, 280px); aspect-ratio: 1; border-radius: 18px; background: radial-gradient(circle at 50% 45%, #fffaf0, #efe5cf 70%);
        box-shadow: inset 0 0 0 1px #d9c9a6, inset 0 8px 30px rgba(120,90,40,.18); display: grid; place-items: center; overflow: hidden; touch-action: none; }
@media (prefers-color-scheme: dark) { .slab { background: radial-gradient(circle at 50% 45%, #3a342a, #24211c 70%); box-shadow: inset 0 0 0 1px #4a4134; } }
.slab .kj { font: 700 min(48vw, 170px)/1 var(--jp); color: var(--ink); position: relative; }
.slab.rare .kj { background: linear-gradient(110deg, #9a6a12 0%, #d39b2a 30%, #fff1c1 45%, #d39b2a 60%, #9a6a12 100%); background-size: 250% 100%;
                 -webkit-background-clip: text; background-clip: text; color: transparent; }
.slab.rare.shown .kj { animation: sheen 2.4s .2s ease-in-out infinite; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.slab.mystery .kj { color: var(--indigo); }
.slab.shown { animation: glow 1.2s ease-out; }
@keyframes glow { 0% { box-shadow: 0 0 0 0 rgba(232,184,74,.9), inset 0 0 0 1px #d9c9a6; } 100% { box-shadow: 0 0 0 28px rgba(232,184,74,0), inset 0 0 0 1px #d9c9a6; } }
.slab.cracked .kj { opacity: .55; filter: grayscale(1); }
.slab .crackline { position: absolute; inset: 0; pointer-events: none; }
.dirt { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 18px; cursor: grab; z-index: 2; }
.brush-hint { font: 600 14px var(--ui); color: var(--soil); display: flex; align-items: center; gap: 8px; }
.brush-hint .hand { display: inline-block; animation: sweep 1.2s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: translateX(-10px) rotate(-12deg); } 50% { transform: translateX(10px) rotate(12deg); } }
.stamp { position: absolute; right: -6px; top: 12px; z-index: 3; transform: rotate(-12deg); font: 800 12px var(--ui); letter-spacing: .12em; padding: 7px 10px;
         border: 3px solid var(--rust); color: var(--rust); border-radius: 6px; background: color-mix(in srgb, var(--card) 70%, transparent); opacity: 0; }
.stamp.in { animation: slam .32s cubic-bezier(.2,.9,.3,1.3) forwards; }
.stamp.rare { border-color: var(--gold); color: #8a5d0a; } .stamp.mystery { border-color: var(--indigo); color: var(--indigo); border-style: dashed; }
@keyframes slam { 0% { opacity: 0; transform: rotate(-12deg) scale(2.6); } 70% { opacity: 1; transform: rotate(-12deg) scale(.92); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
.found-parts { display: flex; gap: 12px; justify-content: center; min-height: 86px; }
.ptoken { width: 74px; height: 82px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line); display: flex; flex-direction: column; align-items: center;
          justify-content: center; position: relative; opacity: 0; }
.ptoken .g { font: 600 34px/1 var(--jp); } .ptoken .m { font: 500 11px var(--ui); color: var(--muted); text-align: center; padding: 0 4px; }
.ptoken .new { position: absolute; top: -8px; right: -8px; background: var(--rust); color: #fff; font: 800 10px var(--ui); padding: 3px 6px; border-radius: 8px; letter-spacing: .08em; }
.ptoken.in { animation: popin .4s cubic-bezier(.3,1.7,.5,1) forwards; }
@keyframes popin { from { opacity: 0; transform: translateY(18px) scale(.6); } to { opacity: 1; transform: none; } }
.flyer { position: fixed; z-index: 40; pointer-events: none; font: 700 30px var(--jp); }
.reveal-card { width: 100%; opacity: 0; transform: translateY(16px); transition: opacity .35s, transform .35s; }
.reveal-card.in { opacity: 1; transform: none; }
.reveal-card .row { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; }
.reveal-card .kanji { font: 700 48px/1 var(--jp); } .reveal-card .romaji { font-style: italic; color: var(--indigo); font-size: 20px; }
.eq { font: 500 15px var(--ui); color: var(--muted); margin: 10px 0 0; } .eq b { font-family: var(--jp); color: var(--ink); font-size: 18px; }
.cta-row { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* drawer */
.drawer { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.cell { aspect-ratio: .9; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cell .g { font: 600 28px/1 var(--jp); } .cell .m { font: 500 10px/1.15 var(--ui); color: var(--muted); text-align: center; padding: 0 3px; }
.cell.lock { background: var(--paper-2); border-style: dashed; } .cell.lock .g { color: transparent; text-shadow: 0 0 0 var(--line); filter: blur(.5px); }
.cell.fresh { box-shadow: 0 0 0 2px var(--rust); }
.progress { height: 8px; border-radius: 4px; background: var(--paper-2); overflow: hidden; margin: 6px 0 14px; }
.progress i { display: block; height: 100%; background: var(--indigo); border-radius: 4px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.progress.gold i { background: linear-gradient(90deg, #d39b2a, #f6d77a); }

/* museum */
.room { margin-bottom: 18px; }
.room-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.room-name { font: 700 17px var(--ui); } .room-name small { font: 500 12px var(--ui); color: var(--muted); margin-left: 6px; }
.room-count { font: 700 13px var(--ui); color: var(--muted); }
.room.complete .room-name::after { content: ' ★'; color: var(--gold); }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.case { aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: linear-gradient(160deg, var(--case), transparent 60%), var(--paper-2);
        display: grid; place-items: center; position: relative; cursor: pointer; overflow: hidden; }
.case .g { font: 700 32px/1 var(--jp); }
.case.empty { cursor: default; } .case.empty .g { color: var(--line); font: 600 20px var(--ui); }
.case.rare { border-color: var(--gold); background: linear-gradient(160deg, rgba(246,215,122,.35), transparent 60%), var(--card); }
.case.mystery { border: 1.5px dashed var(--indigo); }
.case.cracked .g { opacity: .4; } .case.cracked::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 46%, var(--muted) 47%, transparent 49%), linear-gradient(60deg, transparent 55%, var(--muted) 56%, transparent 57%); opacity: .5; }
.case.placed { animation: placed .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes placed { 0% { transform: scale(.4); filter: brightness(2); } 100% { transform: none; filter: none; } }
.case::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%); transform: translateX(-120%); }
.case.rare::before { animation: caseglint 4s ease-in-out infinite; }
@keyframes caseglint { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.plaque { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #f6d77a, #d39b2a); color: #3a2a06; font: 700 13px var(--ui); text-align: center; }
.note { font: 500 12px var(--ui); color: var(--muted); line-height: 1.5; }

/* workshop */
.bench { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 96px; margin: 8px 0 12px; border-radius: 16px;
         background: repeating-linear-gradient(90deg, #c9a878 0 6px, #c19f6f 6px 12px); box-shadow: inset 0 3px 10px rgba(80,50,20,.25); padding: 12px; position: relative; }
@media (prefers-color-scheme: dark) { .bench { background: repeating-linear-gradient(90deg, #4a3b28 0 6px, #443626 6px 12px); } }
.bench .slot { background: rgba(255,255,255,.5); border-color: rgba(80,50,20,.35); }
.bench .result-kj { font: 700 72px/1 var(--jp); }
.hint-line { font: italic 500 16px var(--en); color: var(--muted); text-align: center; min-height: 22px; }
.wpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; margin-top: 12px; }
.wpick button { aspect-ratio: .95; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wpick button .g { font: 600 26px/1 var(--jp); } .wpick button .m { font: 500 9.5px/1.1 var(--ui); color: var(--muted); text-align: center; padding: 0 2px; }
.wpick button.sel { border-color: var(--indigo); box-shadow: 0 0 0 2px var(--indigo) inset; }
.merge { animation: merge .6s cubic-bezier(.6,0,.4,1) forwards; }
@keyframes merge { to { transform: translateX(var(--to)) scale(.3) rotate(200deg); opacity: 0; } }

/* pass (monetisation mock) */
.pass { border: 1.5px solid var(--gold); background: linear-gradient(160deg, rgba(246,215,122,.25), transparent 50%), var(--card); }
.pass h3 { margin: 0 0 6px; font: 800 14px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #8a5d0a; }
.pass ul { margin: 6px 0 10px; padding-left: 18px; line-height: 1.5; font-size: 15px; }
.proto { font: 700 10px var(--ui); letter-spacing: .1em; color: var(--rust); border: 1px solid var(--rust); border-radius: 4px; padding: 1px 5px; vertical-align: middle; }

/* dialog + toast */
.dlg { border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); max-width: min(440px, 92vw); padding: 20px; }
.dlg::backdrop { background: rgba(0,0,0,.4); }
.dlg h2 { margin: 0 0 10px; font: 700 20px var(--ui); }
.dlg .big { font: 700 96px/1 var(--jp); text-align: center; margin: 6px 0; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav) + 24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 30;
         background: var(--ink); color: var(--paper); font: 600 14px var(--ui); padding: 10px 16px; border-radius: 20px; transition: .3s; pointer-events: none; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.dev { display: flex; flex-direction: column; gap: 8px; } .dev .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.flyer.rare { color: #d39b2a; text-shadow: 0 0 12px #f6d77a; }
.bench-wrap { position: sticky; top: 0; z-index: 5; background: var(--paper); padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.wpick { scroll-margin-bottom: calc(var(--nav) + 20px); }

/* ===== v2: premium motion ===== */
/* springs: one-shot pop-ins use the linear() spring generated in fx.js (plain ease where unsupported) */
.ptoken.in { animation-timing-function: var(--spring, cubic-bezier(.3,1.7,.5,1)); animation-duration: .7s; }
.slot.filled { animation-timing-function: var(--spring, cubic-bezier(.3,1.6,.5,1)); animation-duration: .6s; }
.case.placed { animation-timing-function: var(--spring-soft, cubic-bezier(.3,1.6,.5,1)); animation-duration: 1s; }

/* foreshadow: light leaking out of the soil on the first stroke */
.slab-wrap { position: relative; display: grid; place-items: center; }
.aura { position: absolute; inset: -30%; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .9s ease; }
.tell-rare .aura { opacity: 1; background: repeating-conic-gradient(from 0deg, rgba(246,215,122,.0) 0 8deg, rgba(246,215,122,.55) 10deg 13deg, rgba(246,215,122,0) 15deg 24deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%); animation: rays 9s linear infinite; }
.tell-mystery .aura { opacity: 1; background: radial-gradient(circle, rgba(110,140,220,.55), rgba(39,74,120,0) 62%); animation: hum 1.6s ease-in-out infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes hum { 0%, 100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }
.slab .leak { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; transition: opacity .8s; mix-blend-mode: screen; }
.tell-rare .slab .leak { opacity: 1; background: radial-gradient(circle at 50% 50%, rgba(255,236,170,.9), rgba(246,215,122,.25) 35%, transparent 60%); animation: hum 1.2s ease-in-out infinite; }
.tell-mystery .slab .leak { opacity: 1; background: radial-gradient(circle, rgba(150,175,240,.7), transparent 55%); }
.slab.shown .leak { opacity: 0; }
.tell-rare .slab { box-shadow: 0 0 0 1px #e8c46a, 0 0 36px rgba(246,215,122,.55); }
.tell-mystery .slab { box-shadow: 0 0 0 1px #8fb0e0, 0 0 30px rgba(110,140,220,.45); }

/* HOLD IT: the inspect stage */
.dlg.inspect { max-width: 100vw; width: 100vw; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-radius: 0; padding: 24px 16px 32px;
  background: radial-gradient(ellipse 70% 45% at 50% 32%, #3a3a44 0%, #15161b 60%, #0b0b0e 100%); color: #ece7dc; overflow-y: auto; }
.dlg.inspect::backdrop { background: #0b0b0e; }
.dlg.inspect .card { max-width: 480px; margin: 18px auto 0; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 480px; margin: 0 auto; }
.stage-hint { font: 600 13px var(--ui); letter-spacing: .08em; color: #a39d91; transition: opacity .4s; }
.btn.ghost { background: transparent; color: #ece7dc; border-color: #5a5650; }
.holo { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; --d: 0; width: min(70vw, 290px); aspect-ratio: 5 / 7; perspective: 900px; touch-action: none; cursor: grab; margin-top: 8px; }
.h-in { position: relative; width: 100%; height: 100%; border-radius: 18px; overflow: hidden; transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform;
  box-shadow: calc(var(--ry) * -0.9) calc(18px + var(--rx) * 0.9) 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.h-base, .h-shine, .h-glare { position: absolute; inset: 0; }
.h-kj { position: absolute; inset: 0; display: grid; place-items: center; font: 700 min(40vw, 170px)/1 var(--jp); padding-bottom: 8%; }
.h-top, .h-bot { position: absolute; left: 16px; right: 16px; font: 600 13px var(--ui); letter-spacing: .06em; display: flex; justify-content: space-between; }
.h-top { top: 14px; } .h-bot { bottom: 14px; flex-direction: column; font: italic 600 17px var(--en); letter-spacing: 0; }
.h-bot small { font: 700 10px var(--ui); letter-spacing: .16em; opacity: .7; margin-top: 3px; font-style: normal; }
.h-glare { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,calc(.15 + var(--d) * .45)), transparent 45%); mix-blend-mode: soft-light; }

/* material 1: washi & sumi (common) */
.holo.common .h-base { background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.7), transparent 50%),
    repeating-linear-gradient(17deg, rgba(150,120,80,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-63deg, rgba(150,120,80,.04) 0 1px, transparent 1px 11px), #f4ecdb; }
.holo.common .h-kj, .holo.common .h-top, .holo.common .h-bot { color: #1d1b18; }
.holo.common .h-kj { text-shadow: 0 0 1px rgba(0,0,0,.4); }
.holo.common .h-shine { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%) var(--mx) 0 / 260% 100%; mix-blend-mode: overlay; opacity: calc(.3 + var(--d) * .7); }

/* material 2: mother-of-pearl on black lacquer (mystery / ONE THEORY) */
.holo.mystery .h-base { background: radial-gradient(ellipse at 50% 30%, #262833, #0d0e13 75%); }
.holo.mystery .h-kj { background: linear-gradient(125deg, #7fe0d4, #8c8cf0, #e39ad8, #f0d48c, #7fd0f0, #b8f0a0, #8c8cf0) var(--mx) var(--my) / 320% 320%;
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 6px rgba(140,160,240,.35)); }
.holo.mystery .h-top, .holo.mystery .h-bot { color: #c9d6ea; }
.holo.mystery .h-shine { background:
    repeating-linear-gradient(calc(110deg + var(--d) * 30deg), rgba(127,224,212,.0) 0 14px, rgba(127,224,212,.35) 20px, rgba(227,154,216,.35) 28px, rgba(140,140,240,.0) 36px) var(--mx) var(--my) / 200% 200%;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000 0 20%, transparent 65%); mask: radial-gradient(circle at var(--mx) var(--my), #000 0 20%, transparent 65%);
  mix-blend-mode: color-dodge; opacity: calc(.35 + var(--d) * .65); }

/* material 3: gold leaf with lacquer-black kanji (rare / kokuji) */
.holo.rare .h-base { background:
    repeating-linear-gradient(0deg, rgba(90,60,10,.13) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(90,60,10,.11) 0 1px, transparent 1px 46px),
    radial-gradient(ellipse at 30% 20%, rgba(255,240,190,.55), transparent 40%),
    radial-gradient(ellipse at 75% 80%, rgba(140,95,20,.35), transparent 45%),
    linear-gradient(135deg, #b98a2e, #e8c66e 45%, #c9972f 70%, #a8781f); }
.holo.rare .h-kj { color: #17120c; text-shadow: 0 1px 0 rgba(255,236,170,.45), 0 -1px 0 rgba(60,40,5,.5); }
.holo.rare .h-top, .holo.rare .h-bot { color: #3a2a06; }
.holo.rare .h-shine { background: linear-gradient(110deg, transparent 38%, rgba(255,250,225,.95) 50%, transparent 62%) var(--mx) 0 / 300% 100%;
  mix-blend-mode: color-dodge; opacity: calc(.35 + var(--d) * .65); }
.holo.cracked .h-in { filter: grayscale(.85) brightness(.9); }
.holo.cracked .h-glare { background: linear-gradient(115deg, transparent 46%, rgba(0,0,0,.5) 47%, transparent 48.5%), linear-gradient(55deg, transparent 58%, rgba(0,0,0,.45) 59%, transparent 60%); mix-blend-mode: normal; }

/* workshop drag token */
.drag-token { position: fixed; z-index: 45; pointer-events: none; border-radius: 12px; background: var(--card); border: 1.5px solid var(--indigo);
  display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 14px 30px rgba(0,0,0,.28); will-change: transform; }
.drag-token .g { font: 600 26px/1 var(--jp); } .drag-token .m { font: 500 9.5px/1.1 var(--ui); color: var(--muted); text-align: center; }
.wpick button.lifted { opacity: .25; }
.wpick button { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.bench .slot[data-k] { cursor: pointer; }
.holo, .holo * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.dlg.inspect .card { color: var(--ink); }

/* ===== v3: per-hall finish for HOLD IT (N5 plain wood -> N1 gold) ===== */
.h-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.h-frame { position: absolute; inset: 0; border-radius: 18px; padding: 7px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.h-lv { font-weight: 800; letter-spacing: .1em; }
.lv-N5 .h-frame { padding: 6px; background:
  repeating-linear-gradient(92deg, rgba(120,80,40,.0) 0 3px, rgba(120,80,40,.18) 3px 4px, rgba(120,80,40,0) 4px 9px), linear-gradient(180deg, #e2c9a0, #c9a671); }
.lv-N4 .h-frame { background: linear-gradient(115deg, #7a3f1f, #c9784a 35%, #f2b48a calc(var(--mx) * .6 + 20%), #9c5530 70%, #6b3519) 0 0 / 100% 100%; }
.lv-N3 .h-frame { background: linear-gradient(115deg, #8d939c, #d9dee5 30%, #ffffff calc(var(--mx) * .6 + 20%), #b4bbc4 65%, #7d838c); }
.lv-N2 .h-frame { padding: 8px; background:
  linear-gradient(115deg, transparent 30%, rgba(255,220,200,.55) calc(var(--mx) * .6 + 20%), transparent 70%), linear-gradient(180deg, #c23b2e, #8f1f17); }
.lv-N1 .h-frame { padding: 9px; background:
  linear-gradient(115deg, #8a5d0a, #e8b84a 30%, #fff4c8 calc(var(--mx) * .6 + 20%), #d39b2a 62%, #8a5d0a);
  box-shadow: inset 0 0 0 1px rgba(255,250,220,.6); }
.lv-N1 .h-in { box-shadow: calc(var(--ry) * -0.9) calc(18px + var(--rx) * 0.9) 40px rgba(0,0,0,.55), 0 0 calc(18px + var(--d) * 30px) rgba(246,215,122,.45); }
.lv-KOKUJI .h-frame { padding: 9px; background:
  repeating-linear-gradient(0deg, rgba(90,60,10,.2) 0 1px, transparent 1px 14px),
  linear-gradient(115deg, #a8781f, #e8c66e 35%, #fff1c1 calc(var(--mx) * .6 + 20%), #c9972f 65%, #8a5d0a); }
.lv-KOKUJI .h-in { box-shadow: calc(var(--ry) * -0.9) calc(18px + var(--rx) * 0.9) 40px rgba(0,0,0,.55), 0 0 calc(22px + var(--d) * 34px) rgba(246,215,122,.55); }
.lv-DEEP .h-frame { padding: 8px; background: linear-gradient(115deg, #101014, #2a2a33 calc(var(--mx) * .6 + 20%), #0c0c10); }
/* the hall badge on the frame */
.lv-N1 .h-lv, .lv-KOKUJI .h-lv { background: linear-gradient(135deg, #f6d77a, #d39b2a); color: #3a2a06; padding: 2px 7px; border-radius: 5px; }
.lv-N2 .h-lv { background: #a8281e; color: #fde9e2; padding: 2px 7px; border-radius: 5px; }
.lv-N3 .h-lv { background: linear-gradient(135deg, #f2f4f7, #aeb5bf); color: #2b2f36; padding: 2px 7px; border-radius: 5px; }
.lv-N4 .h-lv { background: linear-gradient(135deg, #e3a27a, #9c5530); color: #2a1206; padding: 2px 7px; border-radius: 5px; }
.lv-N5 .h-lv { background: #d9bf93; color: #3a2a12; padding: 2px 7px; border-radius: 5px; }
.lv-DEEP .h-lv { background: #22222a; color: #d8d4cc; padding: 2px 7px; border-radius: 5px; }
.h-top, .h-bot { z-index: 2; padding: 0 4px; } .h-top { top: 18px; } .h-bot { bottom: 18px; }
.lv-N1 .h-base { box-shadow: inset 0 0 60px rgba(214,160,40,.35); }

/* ===== v4: 図鑑 halls ===== */
.search input { width: 100%; min-height: 44px; border-radius: 22px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); padding: 0 16px; font: 500 16px var(--ui); margin: 10px 0; }
#qres .cases { margin-bottom: 12px; }
.halls { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.hall { position: relative; text-align: left; border-radius: 16px; border: 1px solid var(--line); background: var(--card); padding: 14px 14px 12px; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; overflow: hidden; }
.hall::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; }
.hall.lv-N5::before { background: linear-gradient(#e2c9a0, #c9a671); } .hall.lv-N4::before { background: linear-gradient(#c9784a, #7a3f1f); }
.hall.lv-N3::before { background: linear-gradient(#d9dee5, #8d939c); } .hall.lv-N2::before { background: linear-gradient(#c23b2e, #8f1f17); }
.hall.lv-N1::before, .hall.lv-KOKUJI::before { background: linear-gradient(#f6d77a, #b8862b); } .hall.lv-DEEP::before { background: #22222a; }
.hall-badge { grid-column: 2; grid-row: 1; justify-self: end; font: 800 11px var(--ui); letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; background: var(--paper-2); }
.hall-name { grid-column: 1; grid-row: 1; font: 700 17px var(--ui); }
.hall-sub { grid-column: 1 / -1; font: 500 12px var(--ui); color: var(--muted); }
.hall .progress { grid-column: 1 / -1; margin: 4px 0 2px; }
.hall-count { grid-column: 1 / -1; font: 600 12px var(--ui); color: var(--muted); }
.hall.locked { background: linear-gradient(160deg, var(--paper-2), var(--card)); }
.hall.locked .hall-name { color: var(--muted); }
.hall.complete .hall-name::after { content: ' ★'; color: var(--gold); }
.back { border: 0; background: none; font: 700 14px var(--ui); color: var(--indigo); padding: 14px 0 4px; cursor: pointer; }
.hall-head { display: grid; gap: 4px; margin-bottom: 8px; } .hall-head .hall-badge { justify-self: start; grid-column: auto; grid-row: auto; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chip-f { flex: none; border: 1px solid var(--line); background: var(--card); border-radius: 16px; padding: 7px 12px; font: 600 13px var(--ui); cursor: pointer; }
.chip-f.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cases.dense { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.case.zk { background: var(--card); border-style: solid; }
.case.zk .g { font: 600 26px/1 var(--jp); color: var(--ink); opacity: .32; }
.case.zk.mine .g { opacity: 1; }
.case.zk.mine { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); }
.case.zk.mine.rare { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); background: linear-gradient(160deg, rgba(246,215,122,.35), transparent 60%), var(--card); }
.case.zk.locked { background: var(--paper-2); } .case.zk.locked .g { opacity: .18; filter: blur(1.2px); }
.case .md { position: absolute; bottom: 2px; right: 4px; font: 600 9px var(--jp); color: var(--muted); opacity: .8; }
.case .st { position: absolute; top: 1px; left: 4px; font: 700 9px var(--ui); color: var(--gold); }
.lockcard { margin-bottom: 10px; font-size: 15px; line-height: 1.45; }
.readings { display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 13px var(--ui); color: var(--muted); margin: 8px 0 0; }
.snd { font: 700 10px var(--ui); letter-spacing: .08em; color: var(--indigo); border: 1px solid var(--indigo); border-radius: 4px; padding: 0 4px; vertical-align: 2px; }
.story.muted { color: var(--muted); font-size: 16px; border-left-color: var(--line); }
.locked-big { filter: blur(2px); opacity: .5; }

/* review fixes */
.fx-layer { width: auto; height: auto; }
.tabs { -webkit-backdrop-filter: blur(10px); }
.toast { max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
button, .tile, .case, .chip-f, .hall { touch-action: manipulation; }
.case.zk { content-visibility: auto; contain-intrinsic-size: 56px 56px; }
.parts-note { font: 600 11px var(--ui); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; margin: 10px 0 2px; }
.typeline { font: 500 12px var(--ui); color: var(--muted); }
.unoff { font: 600 10px var(--ui); color: var(--muted); margin-left: 4px; }
.credits { font: 500 11px/1.5 var(--ui); color: var(--muted); margin-top: 10px; }
.credits a { color: var(--muted); }
.wpick button .cnt { position: absolute; top: 2px; right: 5px; font: 800 10px var(--ui); color: var(--indigo); }
.wpick button { position: relative; }
.expedition { border: 1.5px solid var(--line); }
.expedition h3 { margin: 0 0 4px; font: 800 13px var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.label.CAT { border: 1.5px solid var(--muted); color: var(--muted); }

/* coming-soon card + museum share (2026-10-08) */
.museum-cta { margin: 6px 0 14px; }
.ok-note { color: var(--ok); font-weight: 600; }
.card.pass .proto { background: var(--gold-2); color: #5a4310; }