@font-face{font-family:Eos Mobile Serif;src:url('/assets/fonts/noto-serif-glossary-v1.woff2') format('woff2');font-display:swap}
html.eos-phone-blocked,html.eos-phone-blocked body{overflow:hidden!important}
#eosMobileGate{box-sizing:border-box;position:fixed;inset:0;width:100vw!important;height:100dvh;max-width:none!important;max-height:none;margin:0;border:0;padding:max(20px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));background:#101315;color:#e9dfcf;text-align:center;overflow:auto;overscroll-behavior:contain;color-scheme:dark;font:16px/1.55 Arial,sans-serif}
#eosMobileGate[open]{display:grid;place-items:center}
#eosMobileGate::backdrop{background:#101315}
#eosMobileGate section{width:min(100%,580px);margin:auto}
#eosMobileGate svg{display:block;width:52px;height:52px;margin:0 auto 18px;fill:none;stroke:#d2b17a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#eosMobileGate h1{margin:0 0 16px;font:400 clamp(24px,4.5vw,34px)/1.2 'Eos Mobile Serif',Georgia,serif;color:#ebcf9e;text-wrap:balance}
#eosMobileGate p{margin:0 auto 24px;max-width:58ch;color:#e9dfcf}
#eosMobileGate section>div{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
#eosMobileGate button{box-sizing:border-box;min-height:48px;padding:12px 22px;border:1px solid #b59763;border-radius:4px;background:#d2b17a;color:#171b1d;font:600 16px/1.4 Arial,sans-serif;cursor:pointer}
#eosMobileGate button[data-exit]{background:transparent;color:#e9dfcf;border-color:#786851}
#eosMobileGate button:focus-visible{outline:3px solid #f4dcac;outline-offset:4px}
#eosMobileGate button:disabled{opacity:.6;cursor:wait}
#eosMobileGate button[hidden]{display:none}
#eosMobileGate ::selection{background:#d2b17a;color:#101315}
@media(max-height:440px){#eosMobileGate svg{width:36px;height:36px;margin-bottom:10px}#eosMobileGate h1{margin-bottom:10px;font-size:25px}#eosMobileGate p{margin-bottom:16px}}

/* Phone landscape is height-constrained, not a small desktop. Keep native text/44px controls,
   reduce display type and empty space instead of zooming the whole document and its dialogs. */
@media(orientation:landscape) and (max-height:600px){
  :root.eos-phone{--site-header-height:56px;--header-height:56px;--site-text-body:14px;--site-text-small:12px;--site-text-button:14px;--site-heading-section:28px;--site-heading-item:21px;scroll-padding-top:56px!important}
  .eos-phone body .header{height:56px!important;padding-block:4px!important;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))!important}
  .eos-phone body .hero{height:100dvh!important;min-height:100dvh!important;padding-top:56px!important}
  .eos-phone body .hero h1{font-size:clamp(32px,11dvh,62px)!important;line-height:.98!important}
  .eos-phone body .hero-chapter{margin-top:12px;font-size:12px}
  .eos-phone body main>.game-section,.eos-phone body main>.books,.eos-phone body main>.glossary-promo,.eos-phone body main>.final-screen{height:calc(100dvh - 56px)!important;min-height:0!important;max-height:calc(100dvh - 56px)!important;scroll-margin-top:0!important}
  .eos-phone body .game-promo{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important}
  .eos-phone body .game-promo .game-visual{position:absolute;inset:0;width:100%;height:100%!important}
  .eos-phone body .game-promo .game-copy{grid-area:1/1;width:62%;height:100%!important;min-height:0!important;padding:12px 5vw!important;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-content:safe center;background:transparent;overflow:auto}
  .eos-phone body .game-promo .game-copy>h2,.eos-phone body .game-promo .game-copy>p{grid-column:1/-1}
  .eos-phone body .game-promo .game-world-link{display:inline-flex;align-items:center;min-height:44px;margin:0;font-size:13px}
  .eos-phone body .game-promo .game-copy h2{font-size:30px;margin:4px 0 8px}
  .eos-phone body .game-promo .game-copy h2.has-title-image{margin:2px 0 6px}
  .eos-phone body .game-title-image{max-height:clamp(64px,28dvh,120px);width:auto;max-width:100%}
  .eos-phone body .game-promo .game-copy>p:not(.section-mark){font-size:14px;line-height:1.4;margin:0 0 10px}
  .eos-phone body .game-promo .section-mark{margin:0 0 4px;font-size:11px}
  .eos-phone body .game-promo .game-title-divider{display:none}
  .eos-phone body .game-promo .game-play-cta,.eos-phone body .game-promo .game-play-cta .button{height:44px;min-height:44px;flex-shrink:0}
  .eos-phone body .books{--book-tabs-height:44px;--mobile-book-height:calc(100dvh - 124px)}
  .eos-phone body .book-showcase{padding:8px 0;bottom:44px}
  .eos-phone body .book-showcase-content{grid-template-areas:'copy cover';grid-template-columns:minmax(0,1fr) minmax(90px,27%);grid-template-rows:minmax(0,1fr);width:calc(100% - 116px);height:100%;gap:22px;margin:0 auto}
  .eos-phone body .book-copy{grid-area:copy;margin:0;max-height:100%;overflow:auto}
  .eos-phone body .book-copy h2{font-size:26px;line-height:1.1}
  .eos-phone body .book-series{font-size:18px;margin-bottom:4px}
  .eos-phone body .book-copy time{margin-bottom:4px}
  .eos-phone body .book-copy-divider{margin:6px 0}
  .eos-phone body .book-description-text{font-size:14px;line-height:1.35;max-height:18dvh}
  .eos-phone body .book-actions{margin-top:8px;gap:8px}
  .eos-phone body .book-actions button{height:44px;min-height:44px;font-size:13px}
  .eos-phone body .book-object-frame{grid-area:cover;height:100%;min-height:0}
  .eos-phone body .book-object,.eos-phone body .book-front{height:100%;max-height:calc(100dvh - 124px);min-height:0}
  .eos-phone body .book-front img{height:100%;max-height:100%;max-width:100%;width:auto;object-fit:contain}
  .eos-phone body .book-tabs-shell{display:block;height:44px;padding:0 44px}
  .eos-phone body .book-tabs button{min-height:44px;padding-inline:16px}
  .eos-phone body .book-mobile-dots{display:none}
  .eos-phone body .book-edge-nav{display:block;width:44px}
  .eos-phone body .glossary-promo,.eos-phone body .tavern-end>.tavern-promo{padding:12px 5vw;align-items:center}
  .eos-phone body .glossary-promo-copy,.eos-phone body .tavern-promo-copy{width:60%;padding:0;max-height:100%;overflow:auto}
  .eos-phone body .glossary-promo h2,.eos-phone body .tavern-promo h2{font-size:clamp(28px,8.5dvh,42px);line-height:1.05;margin-bottom:10px}
  .eos-phone body .glossary-promo p,.eos-phone body .tavern-promo p{font-size:14px;line-height:1.4;margin-bottom:10px;max-width:52ch}
  .eos-phone body .tavern-promo-copy{width:64%}
  .eos-phone body .tavern-promo-copy p+p{font-size:12px}
  .eos-phone body .glossary-promo-button{height:44px;min-height:44px;margin-top:4px}
  .eos-phone body .final-screen{display:grid!important;grid-template-rows:minmax(0,1fr) 48px}
  .eos-phone body .final-screen>.world{height:100%!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) 44px!important;gap:6px 12px!important;padding:8px 4vw!important}
  .eos-phone body .community-showcase{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'heading feature' 'tabs feature' 'copy feature';grid-template-rows:auto 44px minmax(0,1fr);gap:4px 20px;padding:0;height:100%}
  .eos-phone body .world .community-heading{text-align:left}
  .eos-phone body .world .community-heading h2{font-size:26px;margin:0}
  .eos-phone body .community-tabs{margin:0;flex-wrap:nowrap;gap:4px;align-items:center}
  .eos-phone body .community-tabs button{min-height:44px;font-size:12px;padding:6px}
  .eos-phone body .community-feature-copy{padding:0;overflow:auto}
  .eos-phone body .community-feature-copy h3{font-size:20px;margin:0 0 4px}
  .eos-phone body .community-feature-copy p{font-size:14px;line-height:1.35;margin-bottom:4px}
  .eos-phone body .community-feature{min-height:0;height:100%}
  .eos-phone body .community-rail-shell{grid-column:1;min-width:0}
  .eos-phone body .world .community-rail{height:44px;display:flex!important;overflow-x:auto}
  .eos-phone body .community-thumb{height:44px;width:72px;min-width:72px;flex-basis:72px}
  .eos-phone body .community-rail-arrow{height:44px;width:44px}
  .eos-phone body .community-all-button{grid-column:2;height:44px;width:auto;min-width:0;margin:0!important;padding:0 16px;font-size:12px}
  .eos-phone body .final-screen footer{height:48px!important;min-height:48px!important;padding:2px 4vw!important;gap:12px}
  .eos-phone body .final-screen footer .social-link{width:44px;height:44px}
  .eos-phone body .final-screen footer small,.eos-phone body .footer-contact{margin:0;font-size:11px}
  .eos-phone body dialog:not(#eosMobileGate):not(.glossary-detail):not(.game-player):not(.image-viewer):not(.video-viewer){max-height:calc(100dvh - 16px);max-width:calc(100vw - 24px)!important;overscroll-behavior:contain}
  .eos-phone body :is(.paper-dialog,.player-profile,.achievement-collection,.player-chronicle){padding:20px 24px;overflow:auto}
  .eos-phone body :is(.dialog-close,.dialog-exit,.detail-close){min-width:44px;min-height:44px}
  .eos-phone body .book-dialog[open],.eos-phone body .book-reader-dialog.is-offer[open]{grid-template-columns:minmax(90px,24%) minmax(0,1fr);grid-template-rows:1fr;gap:20px;padding:20px 44px 20px 20px;overflow:auto}
  .eos-phone body .book-dialog .dialog-cover,.eos-phone body .book-reader-dialog.is-offer .dialog-cover{height:auto;max-height:calc(100dvh - 64px);width:100%;object-fit:contain}
  .eos-phone body .reader-heading{padding:12px 54px 12px 18px}
  .eos-phone body .reader-page{padding:16px 24px;font-size:16px;line-height:1.5}
  .eos-phone body .novel-story{font-size:16px;line-height:1.45}
  .eos-phone body .novel-actions button,.eos-phone body .novel-menu button{min-height:44px;font-size:14px}
  .eos-phone body .game-tutorial-card{max-height:calc(100dvh - 24px)}
  .eos-phone body .game-tutorial-card>p{font-size:14px;line-height:1.45}
  .eos-phone body .game-tutorial-hint{font-size:13px;line-height:1.4}
  .eos-phone body .game-tutorial-card footer button{min-height:44px;font-size:13px}
  .eos-phone body .game-tutorial-close{width:44px;height:44px}
  .eos-phone body .book-reader-dialog .reader-controls{min-height:56px;padding:6px 12px}
  .eos-phone body .glossary-header{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;gap:12px;padding:0 max(12px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left))}
  .eos-phone body .glossary-brand{font-size:18px}
  .eos-phone body .glossary-tabs{grid-column:2;grid-row:1;width:auto;display:flex;justify-self:center;padding:0;gap:0}
  .eos-phone body .glossary-tabs button{padding:0 10px;min-height:44px;font-size:12px}
  .eos-phone body .glossary-back{grid-column:3;grid-row:1;min-height:44px;min-width:44px;display:grid;place-items:center;padding:0}
  .eos-phone body .glossary-back span{display:none}.eos-phone body .glossary-back b{display:block}
  :root.eos-phone{--entity-sheet-width:88vw;--map-sheet-width:72vw}
  .eos-phone body .glossary-detail.is-sheet{grid-template-columns:minmax(0,42%) minmax(0,1fr);grid-template-rows:minmax(0,1fr);max-height:calc(100dvh - var(--header-height))}
  .eos-phone body .glossary-detail.is-sheet .detail-media{grid-column:1;grid-row:1;height:100%;min-height:0}
  .eos-phone body .glossary-detail.is-sheet .detail-copy{grid-column:2;grid-row:1;padding:18px 24px;align-content:start}
  .eos-phone body .glossary-detail.is-sheet .detail-copy h2{font-size:28px;margin:0 24px 10px 0;padding-bottom:10px}
  .eos-phone body .glossary-detail.is-sheet #detailDescription{font-size:16px;line-height:1.5}
  .eos-phone body .map-detail{grid-template-columns:45% minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
  .eos-phone body .map-detail .detail-copy{padding:18px 22px;font-size:16px}
  .eos-phone body .map-detail h2,.eos-phone body .glossary-detail.is-term h2{font-size:28px;margin-bottom:12px}
  .eos-phone body .glossary-detail.is-term .detail-copy{padding:20px 50px 20px 24px}
  .eos-phone body .entity-grid{grid-template-columns:repeat(auto-fill,minmax(135px,1fr))}
  .eos-phone body .library-search input{font-size:16px}
  .eos-phone body .room.is-open{height:100dvh;min-height:100dvh;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:56px max(12px,env(safe-area-inset-right)) 60px max(12px,env(safe-area-inset-left));gap:8px}
  .eos-phone body .room.is-open .room-world{grid-area:1/1;width:min(100%,calc((100dvh - 182px)*16/9));height:auto;position:relative;left:auto;top:auto;transform:none}
  .eos-phone body .room-caption{display:none}
  .eos-phone body .room-destinations{grid-area:2/1;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}
  .eos-phone body .room-destinations button{min-height:50px;padding:6px;gap:2px}
  .eos-phone body .room-destinations strong{font-size:13px}
  .eos-phone body .room-destinations span{font-size:10px}
  /* Cover without stretching; the lower focal point keeps the return stair reachable on wide phones. */
  .eos-phone body .upstairs-world{right:50%;top:62.5%;width:max(100vw,177.6854dvh);transform:translate(50%,-62.5%)}
  .eos-phone body .chat-room{height:100dvh;min-height:0;padding:56px 16px 56px}
  .eos-phone body .chat-paper{height:100%;min-height:0;padding:8px 16px}
  .eos-phone body .chat-paper header{flex:none}.eos-phone body .chat-paper header p{line-height:1.3}
  .eos-phone body .chat-paper h1{font-size:21px;margin-bottom:4px}
  .eos-phone body .chat-paper textarea{font-size:16px;max-height:70px}
  .eos-phone body .chat-paper .messages{min-height:30px;padding-top:4px}
  .eos-phone body .match-chat.chat-paper{height:auto;max-height:calc(100dvh - 112px);overflow:auto}
  .eos-phone body .tavern-header{padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
  .eos-phone body .tavern-tools{bottom:max(6px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}
}
@media(orientation:landscape) and (max-height:360px){
  .eos-phone body .game-promo .game-copy{padding-block:8px!important}
  .eos-phone body .game-promo .section-mark{display:none}
  .eos-phone body .game-title-image{max-height:20dvh}
}