@font-face{font-family:"HAB Cadent";src:url('../assets/fonts/hab-cadent.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"HAB Backset";src:url('../assets/fonts/hab-backset.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}

/* HABITAT archive treatment shared by artwork details and detective case files. */
#modal,#vault-inventory{--case-black:#14120f;--case-panel:#211e19;--case-paper:#f2eee6;--case-ink:#272119;--case-muted:#c4b8a6;--case-orange:#e05c10;--case-orange-light:#ff994f;--case-line:#77624b;--orange:var(--case-orange);--orange-lt:var(--case-orange-light);--white:var(--case-paper);--muted:var(--case-muted);--border:var(--case-line);--black:var(--case-black);--offblack:var(--case-panel)}
#modal{background:#100d09d9;color:var(--case-paper)}
#modal .modal{background:var(--case-panel);border-color:var(--case-line);box-shadow:0 20px 90px #0009}
#modal .modal-img{background:var(--case-black)}
#modal .modal-body{color:var(--case-paper)}
#modal .modal-close{background:var(--case-black);color:var(--case-paper);border-color:var(--case-line)}
#modal .modal-close:hover{background:var(--case-orange);color:var(--case-black);border-color:var(--case-orange)}
#modal .modal-series{color:var(--case-orange-light);font:10px/1.5 "Space Mono",monospace;letter-spacing:.13em}
#modal .modal-title{font:400 clamp(38px,4vw,60px)/1.05 "HAB Cadent","Arial Narrow",sans-serif;font-feature-settings:"calt" 0,"ss01" 1;letter-spacing:.015em;color:var(--case-paper);overflow-wrap:anywhere}
#modal .modal-specs{border-color:var(--case-line);gap:8px}
#modal .modal-specs .k{color:var(--case-muted);font-weight:400}
#modal .modal-specs .v{color:var(--case-paper)}
#modal .modal-desc{color:var(--case-paper);font:17px/1.65 Georgia,serif}
#modal .modal-cta{background:var(--case-orange);color:var(--case-black);font-family:"Space Mono",monospace}
#modal .modal-cta:hover{background:var(--case-orange-light)}
#modal .modal-flag{color:var(--case-muted);border-color:var(--case-line)}
#modal .modal-img .redact{background:radial-gradient(circle at 50% 38%,#33291f 0%,var(--case-black) 70%)}
#m-img[hidden]{display:none!important}
#modal[data-detective="true"].open{align-items:flex-start}
#modal[data-detective="true"] .modal{margin:auto;max-width:1040px;grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);border-color:#75624d88;background:var(--case-panel)}
#modal[data-detective="true"] .modal-title{font-family:"HAB Cadent","Arial Narrow",system-ui,sans-serif;font-feature-settings:"calt" 0,"ss01" 0;font-weight:400;font-size:clamp(40px,4vw,64px);letter-spacing:.025em;line-height:1.06;color:var(--case-paper);overflow-wrap:anywhere}
#modal[data-detective="true"][data-sealed="true"] .modal-specs{display:none}
#modal[data-detective="true"] .redact{position:relative;inset:auto;align-self:stretch;width:100%}
#modal[data-detective="true"] .redact::after{content:none}
#modal[data-detective="true"] .modal-body{min-width:0;padding:36px}
#modal[data-detective="true"] .vault-lock{font:14px/1.55 system-ui,sans-serif;color:var(--case-paper);padding:0}
#modal[data-detective="true"] .modal-series{color:var(--case-orange-light);font:10px/1.5 system-ui,sans-serif;letter-spacing:.16em;margin-bottom:12px}
#modal[data-detective="true"] .case-progress{font:10px/1.5 system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;margin:0 0 12px;color:var(--case-muted)}
#modal .artifact-tray,.artifact-inventory{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0 0 24px}
#modal .vault-lock .artifact-tile{padding:3px;min-width:0;aspect-ratio:1;background:var(--case-black);border:1px solid #6e5c4788;border-radius:5px;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
#modal .artifact-tile:hover{background:#32281f;border-color:var(--case-orange-light)}
#modal .artifact-tile[aria-pressed="true"]{background:#402718;border-color:var(--case-orange);box-shadow:0 0 0 2px var(--case-orange)}
.artifact-portrait{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
#modal button:focus-visible,#modal a:focus-visible,#modal input:focus-visible{outline:2px solid var(--case-orange);outline-offset:4px}
#modal .vault-lock .hint-button{padding:8px 0;background:none;border:0;border-bottom:1px solid var(--case-orange);color:var(--case-orange-light);font:12px/1.5 system-ui,sans-serif;min-height:44px}
#modal .case-clue{font:13px/1.65 system-ui,sans-serif;color:var(--case-muted);margin:10px 0;min-height:0}
#modal .case-source{color:var(--case-paper);text-decoration:underline;text-underline-offset:3px}
#modal .case-status{font:13px/1.5 system-ui,sans-serif;color:var(--case-orange-light);margin:12px 0 0;min-height:1.5em}
#modal .case-hints{margin-top:12px}
#modal .case-warning{font:13px/1.5 system-ui,sans-serif;color:var(--case-orange-light);padding:12px;border:1px solid var(--case-line)}
#modal .case-surface{box-sizing:border-box;width:100%;min-height:440px;padding:78px 24px 32px;display:flex;align-items:center;justify-content:center;position:relative;color:var(--case-paper);background:radial-gradient(ellipse at 50% 40%,#3b2e21,#151310 80%);overflow:hidden}
#modal .case-stamp{position:absolute;top:32px;left:24px;font:400 25px/1 "HAB Backset",system-ui,sans-serif;transform:rotate(-4deg);color:var(--case-orange-light)}
#modal .visual-case *{box-sizing:border-box}
#modal .visual-case button{font:inherit;color:inherit;background:transparent;border:0;min-height:44px;padding:8px;cursor:pointer}
#modal .visual-case button:disabled{cursor:default;opacity:.48}
#modal .visual-case[data-solved="true"] button:disabled{opacity:1}
#modal .visual-case [hidden],#modal .vault-lock [hidden]{display:none!important}
#modal .visual-case .artifact-portrait{pointer-events:none;object-fit:contain}
#modal .surface-note{font:italic 17px/1.5 Georgia,serif;color:var(--case-muted);text-align:center;margin:0}
#modal .location-label{display:block;margin-top:11px;color:#d2bd9e;font:12px/1.5 "Space Mono",monospace}
#modal .vault-lock .case-view{display:inline-block;background:var(--case-orange);color:var(--case-black);font:13px/1.5 system-ui,sans-serif;padding:12px 16px;min-height:44px;border:1px solid var(--case-orange);border-radius:2px;margin-top:18px}
#modal .vault-lock .case-view:hover{background:var(--case-orange-light);border-color:var(--case-orange-light)}
#modal .seal-scene{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:22px;width:100%}
#modal .seal-top{font:10px/1.5 "Space Mono",monospace;letter-spacing:.18em;color:#b9a17f;text-align:center}
#modal .seal-word{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;font:38px/1.2 "HAB Cadent",sans-serif;letter-spacing:.04em}
#modal .word-second{display:inline-flex;align-items:center;white-space:nowrap}
#modal .visual-case .letter-gap{width:34px;height:53px;border-bottom:2px solid var(--case-orange-light);margin:0 2px;padding:0;color:#ffb078;font:38px/1.2 "HAB Cadent",sans-serif}
#modal .seal-rule{width:150px;height:1px;background:#82684b}
#modal .crown-tableau{display:flex;justify-content:center;align-items:center;gap:20px;width:100%;padding-top:24px}
#modal .visual-case .head-target{position:relative;display:flex;align-items:center;flex-direction:column;width:150px;min-width:0;height:238px;justify-content:flex-end;padding:8px 0}
#modal .face{width:104px;height:132px;border:2px solid #bd9f75;border-radius:43% 43% 48% 48%;position:relative;background:#2b251d;transition:transform .45s;flex-shrink:0}
#modal .eye{position:absolute;top:48px;width:24px;height:10px;border-top:2px solid #e1c7a2;border-radius:50%;transition:height .3s,top .3s}
#modal .eye.left{left:15px;transform:rotate(8deg)}
#modal .eye.right{right:15px;transform:rotate(-8deg)}
#modal .mouth{position:absolute;bottom:26px;left:36px;width:28px;height:8px;border-top:2px solid #e1c7a2;border-radius:50%}
#modal .neck{width:39px;height:22px;border-left:2px solid #bd9f75;border-right:2px solid #bd9f75}
#modal .shoulders{width:128px;height:28px;border:2px solid #bd9f75;border-bottom:0;border-radius:50% 50% 0 0}
#modal .visual-case .crown-on-head{width:124px;height:96px;position:absolute;top:-42px;left:12px;z-index:2}
#modal .visual-case .rest-target{width:106px;min-width:0;align-self:flex-end;margin-bottom:18px;border-bottom:2px solid #bd9f75;padding:8px 0 6px}
#modal .rest-space{height:87px;display:flex;align-items:center;justify-content:center;border:1px dashed #ad885b70;border-radius:5px}
#modal .visual-case .rest-space img{width:94px;height:78px}
#modal .zzz{position:absolute;right:-24px;top:-9px;color:#ee934d;font:bold 24px/1.1 Georgia,serif;transform:rotate(-12deg)}
#modal .visual-case[data-place="head"] .face{transform:rotate(-7deg)}
#modal .visual-case[data-place="head"] .eye{height:13px;top:45px;border:2px solid #f4d9b2;background:#8d6e47}
#modal .visual-case[data-place="head"] .mouth{transform:rotate(-10deg)}
#modal .visual-case[data-place="rest"] .face{transform:rotate(8deg) translateY(6px)}
#modal .visual-case[data-place="rest"] .eye{height:8px;border-top:0;border-bottom:2px solid #e1c7a2;transform:none}
#modal .table-scene{width:100%;padding-top:6px}
#modal .story{background:#e9ddc1;color:#302719;font:16px/1.5 Georgia,serif;padding:16px 18px;margin:0 0 20px;min-height:112px;border-left:3px solid #ed9147}
#modal .story-source{display:block;font:10px/1.5 "Space Mono",monospace;letter-spacing:.08em;margin-top:9px}
#modal .tableau{display:grid;grid-template-columns:1fr 1fr;gap:30px;min-height:180px;align-items:end;position:relative}
#modal .tableau:after{content:'';position:absolute;width:1px;background:#645543;top:30px;bottom:25px;left:50%;transform:rotate(10deg);pointer-events:none}
#modal .visual-case .table-place{position:relative;display:flex;align-items:center;flex-direction:column;justify-content:flex-end;padding:0}
#modal .table-place.rich{align-self:start}
#modal .plinth{width:100%;height:13px;background:#685038;position:relative;border-top:2px solid #c19a65}
#modal .plinth:after{content:'';display:block;position:absolute;height:30px;left:14%;right:14%;top:12px;border-left:5px solid #685038;border-right:5px solid #685038}
#modal .cup{width:68px;height:32px;border:2px solid #b9996b;border-top:0;border-radius:0 0 38% 38%;margin-top:3px}
#modal .drop-slot{width:75px;height:68px;border:1px dashed #7d654a;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:3px}
#modal .visual-case .drop-slot img{width:64px;height:64px}
#modal .rich .location-label{margin-top:35px}
#modal .visual-case[data-solved="true"] .cup{background:#e9ae56;box-shadow:0 0 26px #e8944240;transition:background .5s}
#modal .record{width:100%;min-width:0}
#modal .record-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px;font:10px/1.5 "Space Mono",monospace;letter-spacing:.08em;color:var(--case-orange-light)}
#modal .record-top>:last-child{white-space:nowrap}
#modal .fragments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#modal .visual-case .fragment{padding:0;display:flex;align-items:stretch;min-width:0;border:1px solid #63513c;border-radius:2px;overflow:hidden;background:#27211b}
#modal .visual-case .record-crop{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;filter:blur(1.5px) saturate(.7);transition:filter .4s;pointer-events:none}
#modal .fragment[data-reviewed="true"] .record-crop{filter:none}
#modal .visual-case .fragment[data-reviewed="true"]{border-color:var(--case-orange-light)}
#modal .record-detail{font:italic 16px/1.5 Georgia,serif;color:#ddc9a8;min-height:48px;margin:17px 0 0;text-align:left}
#vault-inventory .artifact-inventory{margin:18px 0;gap:6px}
#vault-inventory .artifact-inventory img{box-sizing:border-box;width:100%;padding:2px;min-width:0;height:auto;aspect-ratio:1;background:var(--case-black);border:1px solid #9c806266;border-radius:4px}
@media(max-width:700px){
  #modal[data-detective="true"] .modal{margin:auto;grid-template-columns:1fr}
  #modal[data-detective="true"] .modal-body{padding:24px}
  #modal[data-detective="true"] .modal-title{font-size:42px}
  #modal .case-surface{min-height:330px;padding:70px 20px 28px}
  #modal .case-stamp{top:25px;left:24px;font-size:24px}
  #modal .artifact-tray{gap:6px}
  #modal .crown-tableau{gap:16px;padding-top:20px}
  #modal .visual-case .head-target{width:126px}
  #modal .shoulders{width:110px}
  #modal .visual-case .rest-target{width:80px}
  #modal .visual-case .crown-on-head{left:1px}
  #modal .zzz{right:-18px}
}
@media(max-width:380px){
  #modal .case-surface{padding-left:12px;padding-right:12px}
  #modal[data-detective="true"] .modal-body{padding:20px}
  #modal .seal-word{font-size:34px}
  #modal .visual-case .letter-gap{width:30px;font-size:34px}
  #modal .fragments{gap:6px}
  #modal .story{padding:13px;font-size:15px}
  #modal .tableau{gap:24px}
}
@media(prefers-reduced-motion:reduce){#modal .visual-case *,#modal .visual-case *:before,#modal .visual-case *:after,#modal .artifact-tile{transition:none!important}}

/* Digital works keep their native shape; hidden players never occupy the canvas. */
#modal .artwork-video{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;background:var(--case-black)}
#modal .artwork-video[hidden]{display:none!important}
#modal .currency-scene{isolation:isolate;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;min-height:320px;padding:24px 0 0}
#modal .currency-web{position:absolute;z-index:-1;inset:0 0 50px;background:repeating-linear-gradient(38deg,transparent 0 38px,#ae96774d 39px 40px,transparent 41px 72px),repeating-linear-gradient(-38deg,transparent 0 38px,#ae96774d 39px 40px,transparent 41px 72px);mask-image:radial-gradient(ellipse,#000 25%,transparent 72%)}
#modal .currency-figure{position:absolute;top:5px;left:50%;width:170px;height:210px;transform:translateX(-50%);overflow:hidden;opacity:.72}
#modal .currency-head{display:block;position:absolute;top:12px;left:49px;width:72px;height:95px;border:2px solid #cdb991;border-radius:47% 47% 44% 44%;background:#31271e}
#modal .currency-shoulders{position:absolute;top:110px;left:6px;width:158px;height:115px;border:2px solid #cdb991;border-radius:55% 55% 0 0;background:#31271e}
#modal .visual-case .banknote-slot{position:relative;display:block;width:min(100%,310px);aspect-ratio:2.13;min-height:100px;margin:114px 0 26px;background:#171510ee;border:2px dashed #e0ad75;border-radius:4px;box-shadow:0 5px 28px #0005;transition:border-color .2s,background .2s}
#modal .visual-case .banknote-slot:hover{border-color:var(--case-orange);background:#38271de8}
#modal .banknote-outline{position:absolute;inset:8px;border:1px solid #b399745e;pointer-events:none}
#modal .banknote-slot .artifact-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
@media(max-width:700px){#modal .artwork-video{max-height:60dvh}}
