/* v1.11.1 · compact world UI, immersive-safe layout and material depth */
:root{
  --composer-reserve:calc(var(--composer-h,58px) + 28px + env(safe-area-inset-bottom,0px));
  --reading-edge:rgba(111,83,54,.16);
  --paper-light:rgba(255,253,247,.78);
  --paper-shadow:rgba(62,43,26,.14);
}

/* One scrolling document, one fixed composer. No transformed ancestor may trap fixed positioning. */
html{min-height:100%;scroll-padding-bottom:var(--composer-reserve)}
body{min-height:100%;overflow-x:hidden}
.game-page{
  width:100%;
  min-height:var(--app-height,100dvh)!important;
  display:flex;
  flex-direction:column;
  overflow:visible!important;
  transform:none!important;
  contain:none!important;
}
.game-page>.game-top{flex:0 0 auto;z-index:42!important}
.game-page>.reading-shell{
  flex:1 0 auto;
  box-sizing:border-box;
  width:100%;
  min-height:0;
  padding-bottom:var(--composer-reserve)!important;
  scroll-padding-bottom:var(--composer-reserve);
  overflow:visible!important;
}
.game-page .story-stream{
  box-sizing:border-box;
  min-height:0!important;
  overflow:visible!important;
  contain:none!important;
  padding-bottom:18px!important;
}
.game-page .story-reading-surface{overflow:visible!important}
.game-page .node:last-child{padding-bottom:0!important;margin-bottom:0!important}
.game-page .node:last-child .interaction-panel{
  position:relative;
  z-index:6;
  box-sizing:border-box;
  padding-bottom:16px;
  margin-bottom:4px;
}
.game-page .node:last-child .options-wrap{padding-bottom:6px!important;margin-bottom:0!important}
.game-page .node:last-child .option:last-child{margin-bottom:0!important}
.game-page>.composer{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:var(--keyboard-gap,0px)!important;
  transform:translate3d(-50%,0,0)!important;
  box-sizing:border-box;
  width:min(780px,calc(100% - 24px))!important;
  z-index:90!important;
  margin:0!important;
  padding:8px 9px calc(8px + env(safe-area-inset-bottom,0px))!important;
  border:1px solid rgba(116,88,58,.16)!important;
  border-bottom:0!important;
  border-radius:20px 20px 0 0!important;
  background:
    linear-gradient(180deg,rgba(251,247,238,.94),rgba(239,230,214,.96)),
    repeating-linear-gradient(90deg,rgba(83,57,35,.018) 0 1px,transparent 1px 4px)!important;
  box-shadow:0 -14px 42px rgba(54,39,23,.10),inset 0 1px rgba(255,255,255,.78)!important;
  isolation:isolate;
}
.game-page>.composer::before{
  content:"";
  position:absolute;
  inset:1px 9% auto;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(191,145,82,.42),transparent);
  pointer-events:none;
}
.game-page>.composer input{
  min-width:0;
  height:42px!important;
  font-size:16px!important;
  border-color:rgba(120,91,59,.15)!important;
  background:rgba(255,253,248,.72)!important;
  box-shadow:inset 0 1px 3px rgba(72,48,25,.045),0 1px rgba(255,255,255,.52);
}
.game-page>.composer input:focus{
  border-color:rgba(153,111,67,.38)!important;
  box-shadow:inset 0 1px 3px rgba(72,48,25,.035),0 0 0 3px rgba(185,143,88,.10)!important;
}
.game-page>.composer button{transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}
.game-page>.composer button:active{transform:translateY(1px) scale(.97)}
body.keyboard-open .game-page>.composer{
  padding-bottom:8px!important;
  border-radius:18px 18px 0 0!important;
}
body[data-input-position="flow"] .game-page>.reading-shell{padding-bottom:22px!important}
body[data-input-position="flow"] .game-page>.composer{
  position:sticky!important;
  left:auto!important;
  bottom:0!important;
  transform:none!important;
  width:min(780px,calc(100% - 24px))!important;
  margin:0 auto!important;
}
body[data-immersive="on"] .game-page{
  min-height:var(--app-height,100dvh)!important;
  padding-top:0!important;
}
body[data-immersive="on"] .game-page>.game-top{
  padding-top:calc(8px + env(safe-area-inset-top,0px))!important;
}
body[data-immersive="on"] .game-page>.composer{
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
}

/* State ribbon: content decides width; typography never shrinks to illegibility. */
.game-page .state-ribbon{
  position:relative;
  display:flex!important;
  align-items:stretch;
  width:max-content!important;
  max-width:100%!important;
  min-height:44px!important;
  margin:10px auto 8px!important;
  padding:3px!important;
  overflow:hidden;
  border:1px solid rgba(126,94,59,.15)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 74% 0,rgba(245,207,137,.14),transparent 44%),
    linear-gradient(180deg,rgba(251,247,238,.76),rgba(238,229,212,.68))!important;
  box-shadow:0 9px 24px rgba(74,52,28,.07),inset 0 1px rgba(255,255,255,.72)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.04);
  backdrop-filter:blur(8px) saturate(1.04);
}
.game-page .state-ribbon-scroll{
  display:flex!important;
  flex:0 1 auto!important;
  min-width:0;
  width:auto!important;
  gap:2px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.game-page .state-ribbon-scroll::-webkit-scrollbar{display:none}
.game-page .state-chip{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:72px!important;
  max-width:148px!important;
  min-height:38px!important;
  display:grid!important;
  grid-template-columns:minmax(0,auto) auto!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:6px 10px!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  color:inherit;
  box-shadow:none!important;
  white-space:nowrap;
}
.game-page .state-chip+.state-chip{border-left:1px solid rgba(112,84,55,.10)!important;border-radius:0 12px 12px 0!important}
.game-page .state-chip b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:560!important;
  letter-spacing:.015em!important;
  color:rgba(68,57,45,.76)!important;
}
.game-page .state-chip em{
  font-size:15px!important;
  line-height:1!important;
  font-weight:690!important;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em!important;
  color:#9a692f!important;
  text-shadow:0 1px rgba(255,255,255,.7),0 0 9px rgba(225,176,102,.18)!important;
}
.game-page .state-chip.is-long{max-width:178px!important}
.game-page .state-chip.is-text-value{grid-template-columns:auto!important;grid-template-rows:auto auto!important;gap:2px!important;min-width:92px!important}
.game-page .state-chip.is-text-value em{font-size:12px!important;max-width:146px;overflow:hidden;text-overflow:ellipsis}
.game-page .state-expand{
  flex:0 0 auto!important;
  min-width:58px!important;
  min-height:38px!important;
  margin-left:1px!important;
  padding:4px 8px!important;
  border:0!important;
  border-left:1px solid rgba(112,84,55,.12)!important;
  border-radius:0 12px 12px 0!important;
  background:rgba(255,255,255,.16)!important;
  font-size:10.5px!important;
  color:rgba(69,58,46,.65)!important;
}
.game-page .state-expand b{font-size:13px!important;color:#8f632f!important}
.game-page .state-ribbon.is-compact .state-chip{min-width:86px!important;padding-inline:13px!important}
.game-page .state-ribbon.is-dense .state-chip{min-width:66px!important;padding-inline:8px!important;gap:5px!important}
.game-page .state-ribbon-glow{opacity:.52!important;filter:blur(12px)!important;pointer-events:none!important}

/* Material depth: static composition remains attractive without animation. */
.game-page .story-reading-surface{
  border-color:var(--reading-edge)!important;
  background:
    linear-gradient(105deg,rgba(255,255,255,.26),transparent 22% 78%,rgba(100,70,38,.035)),
    repeating-linear-gradient(0deg,rgba(91,65,39,.013) 0 1px,transparent 1px 4px),
    radial-gradient(ellipse at 50% -8%,rgba(255,251,239,.76),transparent 58%),
    linear-gradient(180deg,rgba(248,243,233,.92),rgba(241,233,219,.89))!important;
  box-shadow:
    0 24px calc(48px*var(--quality-shadow,.56)) var(--paper-shadow),
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 1px rgba(255,255,255,.22) inset!important;
}
.game-page .story-reading-surface::before{
  content:"";
  position:absolute;
  inset:7px;
  z-index:0;
  border:1px solid rgba(121,91,60,.075);
  border-radius:inherit;
  box-shadow:inset 0 0 28px rgba(91,64,38,.035);
  pointer-events:none;
}
.game-page .story-reading-surface::after{
  pointer-events:none!important;
}
.game-page .story-paragraph,.game-page .npc-dialogue,.game-page .player-line,.game-page .option{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.game-page .option{
  border-color:rgba(123,93,60,.12)!important;
  background:linear-gradient(180deg,rgba(255,253,247,.36),rgba(242,233,218,.30))!important;
  box-shadow:0 1px rgba(255,255,255,.55) inset!important;
  transition:transform .16s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.game-page .option:hover{
  border-color:rgba(150,109,65,.24)!important;
  background:linear-gradient(180deg,rgba(255,253,247,.52),rgba(240,229,210,.44))!important;
  box-shadow:0 7px 16px rgba(73,51,29,.055),0 1px rgba(255,255,255,.65) inset!important;
}
.game-page .option:active{transform:translateY(1px) scale(.995)!important;box-shadow:inset 0 2px 5px rgba(69,48,27,.06)!important}
body[data-dynamic-effects="on"] .game-page .node-new .story-paragraph,
body[data-dynamic-effects="on"] .game-page .node-new .npc-dialogue,
body[data-dynamic-effects="on"] .game-page .node-new .option{
  animation:v1111ContentSettle .42s cubic-bezier(.2,.78,.26,1) both;
}
body[data-dynamic-effects="on"] .game-page .node-new .option:nth-child(2){animation-delay:.04s}
body[data-dynamic-effects="on"] .game-page .node-new .option:nth-child(3){animation-delay:.08s}
body[data-dynamic-effects="on"] .game-page .node-new .option:nth-child(4){animation-delay:.12s}
@keyframes v1111ContentSettle{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Books feel printed into their spines rather than carrying web labels. */
.library-v2-book-hit{
  border-radius:4% 4% 3% 3%!important;
  box-shadow:inset 1px 0 rgba(255,255,255,.06),inset -2px 0 rgba(34,20,12,.10)!important;
}
.library-v2-book-hit::after{
  box-shadow:inset 1px 0 rgba(255,255,255,.09),inset -2px 0 rgba(30,18,10,.10),inset 0 0 0 1px rgba(255,255,255,.025);
}
.library-v2-book-title{
  left:50%!important;
  top:48%!important;
  width:42%!important;
  height:55%!important;
  transform:translate(-50%,-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  writing-mode:vertical-rl!important;
  text-orientation:upright!important;
  padding:2% 1%!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(73,50,32,.88)!important;
  font-family:"Songti SC","STSong","Noto Serif SC",serif!important;
  font-size:clamp(11px,3.45vw,15px)!important;
  line-height:1.12!important;
  letter-spacing:.075em!important;
  text-align:center!important;
  font-weight:600!important;
  text-shadow:0 1px rgba(255,242,210,.42),0 -1px rgba(43,25,13,.16),0 0 7px rgba(235,195,126,.14)!important;
  mix-blend-mode:multiply;
  filter:none!important;
}
.library-v2-book-title::before{
  content:"";
  position:absolute;
  inset:0 18%;
  border-inline:1px solid rgba(91,58,33,.08);
  background:linear-gradient(90deg,transparent,rgba(255,239,202,.08),transparent);
  pointer-events:none;
}
.library-v2-book-title.is-two{font-size:clamp(13px,4.15vw,17px)!important;letter-spacing:.18em!important}
.library-v2-book-title.is-short{font-size:clamp(12px,3.7vw,16px)!important;letter-spacing:.11em!important}
.library-v2-book-title.is-medium{font-size:clamp(10.5px,3.25vw,14px)!important;letter-spacing:.045em!important}
.library-v2-book-title.is-long{font-size:clamp(9.3px,2.86vw,12.4px)!important;line-height:1.03!important;letter-spacing:.012em!important}
.library-v2-book-title.is-very-long{font-size:clamp(8.3px,2.52vw,10.9px)!important;line-height:1!important;letter-spacing:0!important;width:48%!important;height:60%!important}
.library-v2-book-title.is-latin{
  writing-mode:vertical-rl!important;
  text-orientation:mixed!important;
  word-break:break-word!important;
  overflow-wrap:anywhere!important;
  letter-spacing:.035em!important;
  font-family:Georgia,"Times New Roman",serif!important;
}
.library-v2-book-progress{
  left:50%!important;
  top:auto!important;
  bottom:6.2%!important;
  width:64%!important;
  height:auto!important;
  min-height:0!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  flex-direction:row!important;
  gap:3px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:rgba(79,57,40,.55)!important;
  text-shadow:0 1px rgba(255,240,208,.18)!important;
  opacity:.82;
}
.library-v2-book-progress b,.library-v2-book-progress em{
  font-size:clamp(7.8px,2.25vw,10px)!important;
  line-height:1.05!important;
  font-weight:500!important;
  white-space:nowrap!important;
}
.library-v2-book-progress em{letter-spacing:0!important}
.library-v2-book-hit.slot-4 .library-v2-book-title,
.library-v2-book-hit.slot-5 .library-v2-book-title,
.library-v2-book-hit.slot-6 .library-v2-book-title{color:rgba(229,206,168,.84)!important;mix-blend-mode:normal;text-shadow:0 1px rgba(29,19,12,.55),0 0 6px rgba(236,194,122,.10)!important}
.library-v2-book-hit.slot-4 .library-v2-book-progress,
.library-v2-book-hit.slot-5 .library-v2-book-progress,
.library-v2-book-hit.slot-6 .library-v2-book-progress{color:rgba(231,211,178,.54)!important;text-shadow:0 1px rgba(15,10,7,.48)!important}
.library-v2-book-hit.is-opening .library-v2-book-title{box-shadow:none!important;text-shadow:0 1px rgba(255,242,210,.48),0 -1px rgba(43,25,13,.13),0 0 10px rgba(247,206,135,.28)!important}

@media (min-width:900px){
  .game-page>.composer{width:min(1040px,calc(100% - 64px))!important}
  body[data-input-position="flow"] .game-page>.composer{width:min(1040px,calc(100% - 64px))!important}
}
@media (max-width:600px){
  :root{--composer-reserve:calc(var(--composer-h,56px) + 20px + env(safe-area-inset-bottom,0px))}
  .game-page>.reading-shell{padding-inline:8px!important;padding-bottom:var(--composer-reserve)!important}
  .game-page .story-stream{padding-bottom:10px!important}
  .game-page .node:last-child .interaction-panel{padding-bottom:12px!important}
  .game-page>.composer{width:calc(100% - 12px)!important;padding:6px 7px calc(6px + env(safe-area-inset-bottom,0px))!important;border-radius:18px 18px 0 0!important;gap:5px!important}
  .game-page>.composer input{height:42px!important}
  .game-page .state-ribbon{justify-content:flex-start;width:max-content!important;max-width:100%!important;min-height:43px!important;margin:7px auto 6px!important}
  .game-page .state-chip{min-width:68px!important;max-width:128px!important;min-height:37px!important;padding:5px 8px!important;gap:5px!important}
  .game-page .state-chip b{font-size:11.5px!important}
  .game-page .state-chip em{font-size:14px!important}
  .game-page .state-chip.is-long{max-width:148px!important}
  .game-page .state-ribbon.is-compact .state-chip{min-width:82px!important;padding-inline:11px!important}
  .game-page .state-expand{min-width:54px!important;padding-inline:6px!important}
  .game-page .story-reading-surface{box-shadow:0 14px calc(28px*var(--quality-shadow,.56)) rgba(62,43,26,.10),inset 0 1px rgba(255,255,255,.58)!important}
  .library-v2-book-title{top:47%!important;height:53%!important}
  .library-v2-book-progress{bottom:5.5%!important}
}
@media (max-width:360px){
  .game-page .state-chip{min-width:64px!important;padding-inline:7px!important}
  .game-page .state-chip b{font-size:11px!important}
  .game-page .state-chip em{font-size:13.5px!important}
}

/* Balanced and low avoid expensive continuous blur; low preserves every interaction. */
body[data-quality="balanced"] .game-page .state-ribbon,
body[data-quality="low"] .game-page .state-ribbon{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body[data-quality="balanced"] .game-page>.composer,
body[data-quality="low"] .game-page>.composer{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body[data-quality="low"] .game-page .story-reading-surface{
  background:#f4eddf!important;
  box-shadow:0 1px rgba(255,255,255,.45) inset!important;
}
body[data-quality="low"] .game-page .story-reading-surface::before,
body[data-quality="low"] .game-page .state-ribbon-glow,
body[data-quality="low"] .library-v2-book-hit::after{display:none!important}
body[data-quality="low"] .game-page .option,
body[data-quality="low"] .game-page>.composer button{transition:none!important}

@media (prefers-reduced-motion:reduce){
  .game-page .node-new .story-paragraph,.game-page .node-new .npc-dialogue,.game-page .node-new .option{animation:none!important}
  .game-page .option,.game-page>.composer button,.library-v2-book-hit,.library-v2-book-title,.library-v2-book-progress{transition:none!important}
  .game-page::after,.game-page .state-ribbon-glow{display:none!important}
}

/* Cross-view continuity without transforms that could disturb fixed positioning. */
body[data-dynamic-effects="on"] #app>.app{animation:v1111PageReveal .24s ease-out both}
@keyframes v1111PageReveal{from{opacity:.82}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body[data-dynamic-effects="on"] #app>.app{animation:none!important}}