/* 方寸汉印：地图与游戏之间的叙事场景 */
#view-seal-intro{display:none}
html.mode-seal-intro,body.mode-seal-intro{height:100%!important;overflow:hidden!important}
body.mode-seal-intro{display:block!important;min-width:0!important}
body.mode-seal-intro .site-header,body.mode-seal-intro #home,
body.mode-seal-intro #view-detail,body.mode-seal-intro #view-album,
body.mode-seal-intro #view-play{display:none!important}
body.mode-seal-intro #view-seal-intro{display:block;height:100dvh}

.seal-scene{position:relative;isolation:isolate;width:100%;height:100%;min-height:520px;overflow:hidden;background:#3f342a;color:#fff8e9}
.seal-scene__backdrop{position:absolute;inset:0;background:url('./workshop.jpg') center center / cover no-repeat;filter:sepia(.12) saturate(.83) contrast(.94) brightness(.79);transform:scale(1.015)}
.seal-scene__backdrop::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,26,21,.22),transparent 52%),linear-gradient(0deg,rgba(27,22,18,.46),transparent 57%)}
.seal-scene__top{position:absolute;z-index:4;top:clamp(18px,3vw,42px);left:clamp(18px,4vw,58px);right:clamp(18px,4vw,58px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.seal-scene__heading{display:flex;flex-direction:column;gap:5px;text-shadow:0 2px 12px rgba(0,0,0,.55)}
.seal-scene__heading small{font-size:12px;letter-spacing:.24em;color:#f0d9ae}
.seal-scene__heading strong{font:600 clamp(22px,2.5vw,34px)/1.2 'Noto Serif SC',serif;letter-spacing:.2em}
.seal-scene__tools{display:flex;gap:10px;align-items:center}
.seal-scene__tool{border:1px solid rgba(250,233,205,.7);border-radius:2px;background:rgba(40,34,27,.62);color:#fff8e9;padding:9px 14px;font-size:13px;letter-spacing:.06em;backdrop-filter:blur(4px)}
.seal-scene__tool:hover{background:rgba(123,53,39,.82)}
.seal-scene__character{position:absolute;z-index:2;left:0;bottom:-18vh;height:min(110vh,1150px);width:auto;max-width:64vw;object-fit:contain;object-position:bottom;filter:drop-shadow(8px 10px 17px rgba(24,18,13,.5));pointer-events:none;animation:seal-appear .55s ease-out both}
.seal-scene__ambient{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(70,51,34,.18),transparent 52%);pointer-events:none}

.seal-dialogue{position:absolute;z-index:3;left:50%;bottom:clamp(20px,3.5vh,45px);transform:translateX(-50%);width:min(1040px,calc(100% - 72px));min-height:245px;background:rgba(247,237,217,.80);color:#302d27;box-shadow:0 18px 48px rgba(24,16,10,.36);border:31px solid transparent;border-image:url('./dialogue-frame.png') 145 145 145 145 / 31px 31px 31px 31px stretch;display:flex;flex-direction:column;padding:7px 22px 5px}
.seal-dialogue__name{align-self:flex-start;margin:-32px 0 9px 3px;padding:8px 21px 9px;background:#8e4938;border:1px solid #e6c9a5;color:#fff8e8;font:600 16px/1.2 'Noto Serif SC',serif;letter-spacing:.18em;box-shadow:0 5px 14px rgba(36,23,14,.22)}
.seal-dialogue__name small{font:400 11px/1.2 'Noto Sans SC',sans-serif;letter-spacing:.08em;opacity:.85;margin-left:12px}
.seal-dialogue__line{flex:1;min-height:72px;padding:6px 10px;font:500 clamp(17px,1.55vw,22px)/1.85 'Noto Serif SC',serif;letter-spacing:.035em;cursor:pointer}
.seal-dialogue__line.fade-in{animation:seal-line-in .32s ease-out both}
.seal-dialogue__bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 8px 1px}
.seal-dialogue__progress{font:14px/1 Georgia,serif;color:#9a7357;letter-spacing:.15em}
.seal-dialogue__controls{display:flex;align-items:center;gap:18px}
.seal-dialogue__skip{border:0;background:transparent;color:#765d4e;padding:10px;font-size:13px}
.seal-dialogue__skip:hover{text-decoration:underline}
.seal-dialogue__next{border:1px solid #8d4031;background:#914632;color:#fff9e9;padding:10px 24px;min-width:130px;letter-spacing:.1em;font-size:15px}
.seal-dialogue__next:hover{background:#713628}
.seal-dialogue button:focus-visible,.seal-scene button:focus-visible{outline:3px solid #e9b954;outline-offset:3px}

.seal-history{width:min(720px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:28px;border:1px solid #ae9276;background:#f7f0df;color:#30392f;box-shadow:0 24px 80px rgba(0,0,0,.35);overflow:auto}
.seal-history::backdrop{background:rgba(19,22,18,.75);backdrop-filter:blur(3px)}
.seal-history__top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.seal-history__top strong{font:600 19px/1.3 'Noto Serif SC',serif;color:#884634}
.seal-history__close{border:0;background:transparent;color:#53483d;font-size:30px;line-height:1;padding:0 6px}
.seal-history .history-card{min-height:0;margin:0;padding:25px;background:#eef0e8}

@keyframes seal-appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes seal-line-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
  html.mode-seal-intro,body.mode-seal-intro{height:100%!important;overflow:hidden!important}
  body.mode-seal-intro #view-seal-intro{height:100dvh}
  .seal-scene{min-height:0}
  .seal-scene__backdrop{background-position:52% center}
  .seal-scene__top{top:18px;left:18px;right:18px;align-items:flex-start}
  .seal-scene__heading small{font-size:10px}
  .seal-scene__heading strong{font-size:23px}
  .seal-scene__tools{flex-direction:column;align-items:stretch;gap:6px}
  .seal-scene__tool{padding:7px 10px;font-size:11px}
  .seal-scene__character{height:min(95vh,850px);max-width:none;left:-16vw;bottom:-14vh}
  .seal-dialogue{width:calc(100% - 24px);bottom:12px;min-height:225px;border-width:22px;border-image-width:22px;padding:4px 5px 1px}
  .seal-dialogue__name{margin:-25px 0 5px 1px;padding:6px 11px;font-size:14px}
  .seal-dialogue__name small{font-size:10px;margin-left:6px}
  .seal-dialogue__line{font-size:16px;line-height:1.65;min-height:78px;padding:5px 4px}
  .seal-dialogue__bottom{padding:0;gap:4px}
  .seal-dialogue__controls{gap:3px}
  .seal-dialogue__skip{padding:9px 4px;font-size:11px}
  .seal-dialogue__next{min-width:94px;padding:9px 10px;font-size:13px}
  .seal-history{padding:16px}
  .seal-history .history-card{padding:18px!important}
}
@media(max-height:650px){.seal-scene__character{height:110vh;bottom:-18vh}.seal-dialogue{min-height:205px}.seal-dialogue__line{min-height:45px}}
@media(prefers-reduced-motion:reduce){.seal-scene__character,.seal-dialogue__line.fade-in{animation:none}}