@font-face {
  font-family: "Huiwen Mincho UI";
  src: url("assets/fonts/HuiwenMincho-ui.woff2") format("woff2");
  font-display: swap;
  font-weight: 400 500;
}
:root {
  color-scheme: dark;
  font-family: "Huiwen Mincho UI", serif;
  font-synthesis: none;
  --paper: #eee0ba;
  --paper-ink: #291d12;
  --brass: #b18a44;
  --wax: #8d271d;
  --ink: #0c0907;
  --painting-share: 72%;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --safe-x: max(4.5vw, env(safe-area-inset-left));
  --safe-y: max(3.5vh, env(safe-area-inset-top));
}
* { box-sizing: border-box; cursor:url("assets/ui-v2/paintbrush-cursor.png") 3 60,auto !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
button, input { font: inherit; }
button { min-width: 44px; min-height: 44px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
#gallery-app { position: relative; width: 100%; height: 100%; color: var(--paper); isolation: isolate; }
.start-menu {
  position:absolute;
  z-index:5;
  inset:0;
  overflow:hidden;
  background:#080604;
}
.start-menu[hidden] { display:none; }
.start-menu-visual { position:absolute; inset:0; z-index:0; overflow:hidden; background:#080604; }
.start-menu-visual::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#03020120 72%,#03020166),radial-gradient(ellipse at 38% 46%,transparent 42%,#03020142 100%); }
#start-menu-poster,#start-menu-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; }
#start-menu-poster { z-index:0; display:block; }
#start-menu-video { z-index:1; display:block; mix-blend-mode:lighten; }
#start-menu-video.is-failed { display:none; }
.start-menu-panel { position:absolute; z-index:2; right:clamp(28px,6.5vw,132px); bottom:clamp(105px,14vh,155px); display:grid; grid-template-columns:minmax(0,.9fr) minmax(180px,1.1fr); align-items:center; gap:clamp(12px,2vw,28px); width:clamp(360px,34vw,590px); min-height:190px; padding:10px 0; color:#2a1b11; text-align:left; background:transparent; border:0; box-shadow:none; }
.start-dossier-copy { min-width:0; padding:0 4px 0 10px; }
.start-kicker { margin:0 0 5px; color:#6f4b25; font-size:16px; letter-spacing:.18em; }
.start-menu h1 { margin:0 0 8px; color:#2a1b11; font-size:clamp(34px,3.3vw,56px); font-weight:400; line-height:1; letter-spacing:.16em; text-indent:.16em; text-shadow:0 1px #fff5cf80; }
.start-intro { margin:0; color:#49331f; font-size:16px; line-height:1.55; text-shadow:0 1px #fff4cf66; }
.start-actions { position:fixed; z-index:3; inset:0; width:auto; height:auto; margin:0; pointer-events:none; }
.start-actions button { position:absolute; left:calc(78.75vw - clamp(95px,9vw,125px)); width:clamp(190px,18vw,250px); min-height:52px; padding:0; color:transparent; background:none; border:0; filter:none; font-size:17px; text-shadow:none; pointer-events:auto; transform:rotate(2deg) skewX(-1deg); transform-origin:center; transition:transform 160ms var(--ease-out),filter 160ms ease-out; }
#start-game { bottom:calc(24.84375vw - 26px); }
#continue-game { bottom:calc(18.90625vw - 26px); }
#start-settings { bottom:calc(13.203125vw - 26px); }
.start-actions button::after { content:""; position:absolute; left:24%; right:24%; bottom:5px; height:2px; background:#70421f; transform:scaleX(0); transition:transform 160ms var(--ease-out); }
.start-actions button:hover:not(:disabled)::after,.start-actions button:focus-visible::after { transform:scaleX(1); }
.start-actions button:hover:not(:disabled) { filter:drop-shadow(0 2px 3px #4b2b1470); transform:rotate(2deg) skewX(-1deg) translateY(-1px); }
.start-actions button:active:not(:disabled) { filter:none; transform:rotate(2deg) skewX(-1deg) translateY(1px); }
.start-actions button:disabled { filter:none; cursor:inherit; opacity:1; }
.start-actions button:focus-visible { outline:3px solid #f1d27f; outline-offset:4px; }
.settings-from-menu .start-menu-panel { visibility:hidden; pointer-events:none; }
.start-page-flip { position:fixed; z-index:6; right:8vw; bottom:13vw; width:clamp(165px,18vw,280px); aspect-ratio:1.15; pointer-events:none; opacity:0; perspective:1200px; }
.start-page-flip i { position:absolute; inset:0; display:block; border:1px solid #826238; border-radius:7% 13% 11% 5%; background:linear-gradient(100deg,#8a6a3a33,#ead7aa 13%,#f1dfb5 72%,#b99155 100%); box-shadow:inset 18px 0 28px #77572b35,6px 10px 22px #1b0d0780; transform-origin:left center; backface-visibility:hidden; }
.start-menu.is-opening-book .start-actions { pointer-events:none; }
.start-menu.is-opening-book { pointer-events:none; }
.start-menu.is-opening-book .start-page-flip { opacity:1; }
.start-menu.is-opening-book .start-page-flip i { animation:start-page-turn 900ms cubic-bezier(.38,.05,.18,1) forwards; }
.start-menu.is-opening-book .start-menu-visual { animation:start-scene-reveal 900ms ease-in forwards; }
.start-menu.is-opening-book .start-menu-panel { animation:start-dossier-release 700ms ease-in forwards; }
#start-page-turn-video { position:absolute; inset:0; z-index:7; width:100%; height:100%; object-fit:cover; object-position:center bottom; pointer-events:none; background:#080604; }
#start-page-turn-video[hidden] { display:none; }
.start-menu.has-page-turn-video .start-page-flip { display:none; }
.start-menu.has-page-turn-video .start-menu-visual,.start-menu.has-page-turn-video .start-menu-panel,.start-menu.has-page-turn-video .start-actions { visibility:hidden; }
@keyframes start-page-turn {
  0% { transform:rotateY(0deg) skewY(0deg); filter:brightness(1); }
  65% { transform:rotateY(-48deg) skewY(-2deg); filter:brightness(.88); box-shadow:inset 42px 0 38px #39220d75,18px 14px 30px #12080599; }
  100% { transform:rotateY(-166deg) skewY(1deg); filter:brightness(.74); }
}
@keyframes start-scene-reveal { 0%,65% { opacity:1; } 100% { opacity:0; } }
@keyframes start-dossier-release { 0%,55% { opacity:1; } 100% { opacity:0; } }
.gallery {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(68px, 12vh) minmax(0, 1fr) minmax(66px, 10vh);
  align-items: center;
  padding: var(--safe-y) var(--safe-x) max(2vh, env(safe-area-inset-bottom));
  background:
    linear-gradient(90deg, rgba(3,2,2,.74), rgba(5,4,3,.12) 42%, rgba(3,2,2,.65)),
    linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.66)),
    url("assets/gallery-background.png") center/cover no-repeat;
}
.gallery[hidden] { display:none; }
.gallery::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; box-shadow:inset 0 0 9vw #020101, inset 0 0 0 1.2vw #160d08; }
.gallery-heading { position:relative; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; width:min(72vw,1040px); margin:auto; }
.gallery-heading > span { height:2px; background:linear-gradient(90deg,transparent,#9c7132); }
.gallery-heading > span:last-child { transform:scaleX(-1); }
.gallery-title-plaque h1 { margin:0; padding:.35em 1.5em .44em; color:#c9a467; background:linear-gradient(#18130f,#0e0b09); border:1px solid #8b6630; border-radius:22% / 42%; box-shadow:inset 0 0 0 3px #080604,0 6px 12px #000; font-size:clamp(25px,3vw,42px); font-weight:400; line-height:1; letter-spacing:.28em; text-indent:.28em; text-shadow:0 1px #f0ce8a55; }
.paintings { position:relative; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(260px,1fr)); align-items:center; justify-items:center; gap:clamp(42px,7vw,120px); width:min(84vw,1320px); height:var(--painting-share); min-height:0; margin:auto; }
.gallery-archive-line { position:absolute; left:16%; right:16%; bottom:-7%; height:2px; z-index:-1; background:linear-gradient(90deg,transparent,#7b221b 12%,#bb4535 50%,#7b221b 88%,transparent); box-shadow:0 1px #110504; }
.painting-card { position:relative; width:min(100%,540px); height:100%; min-width:0; padding:0 0 58px; border:0; color:inherit; background:none; cursor:pointer; transition:transform 220ms ease-out,filter 220ms ease-out; }
.painting-card:hover { transform:translateY(-5px); filter:brightness(1.06); }
.painting-card:focus-visible { outline:3px solid #f0ce83; outline-offset:8px; }
.painting-card:active { transform:translateY(-1px) scale(.99); }
.painting-card[disabled], .painting-card:disabled { cursor:not-allowed; opacity:.6; }
.gallery-spotlight { position:absolute; left:8%; right:8%; top:-10%; height:38%; pointer-events:none; opacity:.78; background:conic-gradient(from 168deg at 50% 0,#e7bb5c00,#e7bb5c3f 9deg,#ffe9a05e 18deg,#e7bb5c00 36deg); filter:blur(5px); }
.frame { position:relative; display:block; width:100%; height:100%; padding:clamp(26px,3vw,52px); filter:drop-shadow(0 18px 20px #000c); }
.frame::before { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border:44px solid transparent; border-image:url("assets/ui-v2/frame-9slice.png") 115 fill / 44px / 0 stretch; }
.frame img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.86) contrast(1.04); box-shadow:inset 0 0 26px #000; }
.dust-cloth { display:none; position:absolute; inset:12px 10px 10px; z-index:3; background:linear-gradient(120deg,#231b18f2,#4c3b31f5 48%,#161210f7); clip-path:polygon(0 0,100% 0,96% 90%,78% 95%,59% 91%,40% 97%,19% 92%,4% 96%); box-shadow:inset 0 -20px 40px #000a; }
.archive-cord { display:none; position:absolute; inset:47% -1% auto; z-index:4; height:3px; background:#6f4d29; box-shadow:0 0 0 1px #1b0d06,0 7px 16px #000; transform:rotate(-8deg); }
.archive-cord::after { content:""; position:absolute; left:0; right:0; height:3px; background:inherit; transform:rotate(16deg); }
.wax-lock { display:none; position:absolute; left:50%; top:52%; z-index:5; width:72px; height:72px; background:url("assets/ui-v2/wax-seal.png") center/contain no-repeat; transform:translate(-50%,-50%) rotate(-8deg); }
.painting-card.is-locked .dust-cloth,.painting-card.is-locked .archive-cord,.painting-card.is-locked .wax-lock { display:block; }
.painting-card.is-locked img { filter:grayscale(.72) brightness(.52); }
.painting-card.is-locked:hover { transform:none; filter:none; }
.plaque { position:absolute; left:10%; right:10%; bottom:0; z-index:6; display:grid; grid-template-columns:minmax(0,1fr) 58px; grid-template-areas:"title mark" "status mark"; align-items:center; min-height:64px; padding:9px 26px 9px 48px; color:var(--paper-ink); background:url("assets/ui-v2/plaque-default.png") center/100% 100% no-repeat; filter:drop-shadow(0 8px 8px #000a); }
.painting-card:hover .plaque { background-image:url("assets/ui-v2/plaque-hover.png"); }
.painting-card.is-locked .plaque { background-image:url("assets/ui-v2/plaque-locked.png"); }
.painting-card.is-completed .plaque { background-image:url("assets/ui-v2/plaque-completed.png"); }
.plaque strong { grid-area:title; min-width:0; font-size:clamp(18px,1.65vw,26px); font-weight:400; letter-spacing:.14em; white-space:nowrap; }
.plaque small { grid-area:status; min-width:0; display:block; font-size:clamp(15px,.82vw,16px); letter-spacing:.02em; white-space:nowrap; }
.plaque-state-mark { grid-area:mark; justify-self:center; display:none; width:50px; height:50px; place-items:center; font-style:normal; }
.painting-card.is-locked .plaque-state-mark { display:grid; color:#3a2818; background:url("assets/ui-v2/seal-default.png") center/contain no-repeat; }
.painting-card.is-locked .plaque-state-mark::after { content:"锁"; font-size:15px; }
.painting-card.is-completed .collection-stamp { display:grid; color:#752018; border:3px double #752018; border-radius:50%; font-size:21px; transform:rotate(-9deg); }
.gallery-actions { position:absolute; z-index:4; right:var(--safe-x); bottom:max(2vh,env(safe-area-inset-bottom)); display:flex; gap:14px; }
.round-seal { position:relative; width:64px; height:64px; padding:0; border:0; border-radius:50%; color:#2c1a0b; background:url("assets/ui-v2/seal-default.png") center/contain no-repeat; cursor:pointer; filter:drop-shadow(0 7px 8px #000b); transition:transform 200ms ease-out,filter 200ms ease-out; }
.round-seal span { font-size:25px; }
.round-seal:hover { background-image:url("assets/ui-v2/seal-hover.png"); transform:translateY(-3px); }
.round-seal:focus-visible { outline:3px solid #ffe0a0; outline-offset:4px; }
.round-seal:active { background-image:url("assets/ui-v2/seal-pressed.png"); transform:translateY(1px) scale(.97); }
.settings-drawer { position:absolute; z-index:30; right:var(--safe-x); bottom:calc(max(2vh,env(safe-area-inset-bottom)) + 76px); width:min(390px,88vw); max-height:calc(100vh - 48px); overflow:auto; padding:24px 26px 26px; color:#312217; background:#dfcca2; border:2px solid #7f5a2c; box-shadow:0 0 0 100vmax #050302b8,0 20px 50px #000d,inset 0 0 40px #7f5a2c2b; }
.settings-drawer { border:18px solid transparent; border-image:url("assets/ui-v2/frame-9slice.png") 115 / 22px / 4px stretch; background-color:#e3d0a4; }
.settings-from-menu .settings-drawer { left:50%; right:auto; top:50%; bottom:auto; transform:translate(-50%,-50%); }
.settings-drawer[hidden] { display:none; }
.settings-drawer header { display:grid; grid-template-columns:1fr auto; margin-bottom:18px; border-bottom:1px solid #8f693c; }
.settings-drawer header span { font-size:14px; letter-spacing:.14em; }
.settings-drawer h2 { grid-column:1; margin:1px 0 12px; font-size:28px; font-weight:400; }
.settings-group { padding:10px 0; border-top:1px solid #967143; }.settings-group h3 { margin:0 0 6px; font-size:18px; font-weight:500; }.settings-group p { margin:4px 0 10px; font-size:15px; }
.settings-drawer header button { grid-column:2; grid-row:1/3; color:#3d2516; background:transparent; border:0; font-size:28px; cursor:pointer; }
.settings-drawer label { display:grid; gap:7px; margin:13px 0; font-size:17px; }
.settings-drawer .toggle-line { display:flex; align-items:center; min-height:44px; }
.settings-drawer input[type="checkbox"] { width:24px; height:24px; }
.settings-drawer input[type="range"] { appearance:none; width:100%; height:12px; border:2px solid #5d3d20; border-radius:8px; background:linear-gradient(180deg,#e1bd6a,#76501f); box-shadow:inset 0 2px 3px #2b180c88; }
.settings-drawer input[type="range"]::-webkit-slider-thumb { appearance:none; width:26px; height:26px; border:3px double #5b391a; border-radius:50%; background:radial-gradient(circle at 35% 30%,#f0ce79,#8c6326 70%); box-shadow:0 3px 7px #0008; }
.settings-drawer input[type="checkbox"] { appearance:none; width:52px; height:28px; border:2px solid #5b3b20; border-radius:16px; background:radial-gradient(circle at 13px 50%,#d9b763 0 9px,#6f4b24 10px,transparent 11px),#3b291b; transition:background-position 200ms ease-out; }
.settings-drawer input[type="checkbox"]:checked { background:radial-gradient(circle at 37px 50%,#f1d27f 0 9px,#77501f 10px,transparent 11px),#7a2c22; }
.settings-drawer button:not(#settings-close),.confirm-panel button,.load-error button { width:100%; min-height:48px; margin-top:8px; color:#efe0ba; background:#392718; border:1px solid #8e6b3b; cursor:pointer; }
.settings-drawer button:not(#settings-close),.confirm-panel button { color:#2f2116; border:0; background:url("assets/ui-v2/plaque-default.png") center/100% 100% no-repeat; }
.settings-drawer .danger-action,.confirm-panel #clear-yes { color:#f7e5c2; background:url("assets/ui-v2/plaque-locked.png") center/100% 100% no-repeat; text-shadow:0 1px #2d0e09; }
.confirm-panel { position:absolute; z-index:31; left:50%; top:50%; width:min(440px,90vw); padding:26px; color:#322319; background:#e5d2a8; border:2px solid #8e6334; box-shadow:0 0 0 100vmax #050302c9,0 20px 50px #000; transform:translate(-50%,-50%); }
.confirm-panel[hidden] { display:none; }
.confirm-panel p { margin:0 0 10px; font-size:17px; line-height:1.6; }
.confirm-panel #clear-confirm-stage { color:#7b2119; }
.confirm-panel section[hidden] { display:none; }
.confirm-panel button:focus-visible,.settings-drawer button:focus-visible,.settings-drawer input:focus-visible { outline:3px solid #7b2119; outline-offset:3px; }
.level-shell { position:absolute; z-index:10; inset:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(0,1fr); background:linear-gradient(180deg,#241811,#100b08); }
.level-shell[hidden] { display:none; }
#level-frame { grid-column:1; grid-row:2; width:100%; height:100%; min-width:0; min-height:0; display:block; border:0; background:#050505; }
.return-button { position:relative; z-index:20; grid-column:1; grid-row:1; align-self:center; justify-self:start; margin-left:max(14px,env(safe-area-inset-left)); min-width:80px; min-height:50px; max-width:min(440px,calc(100vw - 28px)); padding:8px 18px; color:#f1ddb0; border:1px solid #b08a4c; border-radius:2px; background:#17100c; box-shadow:0 4px 14px #000b,inset 0 0 0 2px #080503; font-size:16px; line-height:1.25; text-shadow:0 1px 2px #000; cursor:pointer; }
.return-button:hover { color:#fff0c7; background:#2c1e15; border-color:#d1ab65; }
.return-button:active { background:#0e0a08; transform:translateY(1px); }
.return-button:focus-visible { outline:3px solid #ffe2a1; outline-offset:4px; }
.loading-card,.load-error { position:relative; z-index:14; grid-column:1; grid-row:2; width:100%; height:100%; min-width:0; min-height:0; display:grid; place-content:center; justify-items:center; gap:12px; background:#100c09; color:#d7c8a5; }
.loading-card i { width:38px; height:38px; border:3px solid #6b5633; border-top-color:#dec27c; border-radius:50%; animation:spin 1s linear infinite; }
.loading-card[hidden],.load-error[hidden] { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
.rotate-notice { display:none; position:fixed; z-index:40; inset:0; place-content:center; color:#eadcba; background:radial-gradient(circle,#2d2117,#0d0907 70%); }
.rotate-notice strong { font-size:25px; font-weight:400; letter-spacing:.18em; }
.is-error { animation:ui-error 220ms ease-out; --error-shift:4px; }
@keyframes ui-error { 35% { transform:translateX(4px); } 70% { transform:translateX(-4px); } }
@media (max-width:920px) and (orientation:landscape) {
  :root { --painting-share:74%; --safe-x:max(3vw,env(safe-area-inset-left)); --safe-y:max(2vh,env(safe-area-inset-top)); }
  .gallery { grid-template-rows:58px minmax(0,1fr) 46px; }
  .gallery-title-plaque h1 { font-size:25px; padding:.3em 1.2em .38em; }
  .paintings { width:82vw; grid-template-columns:repeat(2,minmax(190px,1fr)); gap:7vw; }
  .painting-card { padding-bottom:46px; }
  .frame { padding:25px; }
  .frame::before { border-width:30px; border-image-width:30px; }
  .plaque { left:6%; right:6%; min-height:52px; padding:8px 45px 8px 38px; }
  .plaque { grid-template-columns:minmax(0,1fr) 46px; padding:7px 18px 7px 30px; }
  .plaque strong { font-size:15px; }.plaque small { font-size:15px; }
  .plaque-state-mark { width:42px; height:42px; }
  .gallery-actions { right:2.5vw; bottom:8px; gap:7px; }.round-seal { width:48px; height:48px; }
  .gallery-archive-line { bottom:-4%; }
  .start-menu-panel { right:max(2px,env(safe-area-inset-right)); bottom:max(50px,env(safe-area-inset-bottom)); grid-template-columns:minmax(0,.85fr) minmax(178px,1.15fr); gap:10px; width:min(46vw,410px); min-height:176px; padding:5px 0; }
  .start-dossier-copy { padding-left:20px; text-align:center; }
  .start-kicker,.start-intro { display:none; }
  .start-menu h1 { margin:0; font-size:30px; }
  .start-actions button { min-height:48px; font-size:16px; }
  .settings-drawer { right:14px; bottom:14px; max-height:calc(100vh - 28px); }
  .level-shell { grid-template-rows:52px minmax(0,1fr); }
  .return-button { min-height:48px; }
}
@media (max-width:920px) { #gallery-app,#gallery-app input,#gallery-app label,#gallery-app small { font-size:15px; } }
@media (orientation:portrait) { html,body,#gallery-app { width:100vw; max-width:100vw; min-width:0; overflow:hidden; } .gallery { display:none; } .rotate-notice { display:grid; position:fixed; inset:0; width:100vw; max-width:100vw; overflow:hidden; } }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:1ms !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation-duration:1ms !important; transition-duration:1ms !important; }
.reduce-motion #start-menu-video { display:none; }
.reduce-motion .start-page-flip { display:none; }
.reduce-motion #start-page-turn-video { display:none; }
.high-contrast .gallery { filter:contrast(1.16) brightness(1.08); }
.high-contrast .plaque,.high-contrast .settings-drawer,.high-contrast .confirm-panel { color:#080604; background-color:#fff8dc; }
.high-contrast .settings-drawer button,.high-contrast .confirm-panel button { color:#fff; background:#130d09; border-color:#fff1b7; }
.high-contrast .painting-card:focus-visible,.high-contrast button:focus-visible { outline-color:#fff; outline-width:4px; }
.high-contrast .start-menu-panel { color:#090604; }
.high-contrast .start-actions button { color:#090604; filter:contrast(1.12) brightness(1.04); }