/* Play is an app surface; prose belongs to optional help and Academy screens. */
body[data-route='play'] .app-shell{display:block;min-height:100dvh}
body[data-route='play'] .sidebar,body[data-route='play'] .workspace>.side-panel,body[data-route='play'] .chapter-card,body[data-route='play'] .breadcrumb,body[data-route='play'] .resource-label{display:none}
body[data-route='play'] .main{margin:0;padding:0 12px calc(76px + env(safe-area-inset-bottom));max-width:none}
body[data-route='play'] .workspace{display:block;max-width:760px;margin:0 auto}
body[data-route='play'] .topbar{max-width:760px;margin:auto;min-height:44px;padding:4px 0;border:0}
body[data-route='play'] .resources{width:100%;justify-content:flex-end}
body[data-route='play'] .cloud-badge{margin-right:auto}
body[data-route='play'] .practice{margin-top:0;border-radius:18px;overflow:hidden}
body[data-route='play'] .mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:40;padding:4px 8px max(4px,env(safe-area-inset-bottom));background:#10252bf5;border-top:1px solid #58706e}
body[data-route='play'] .mobile-nav button{min-height:48px}
body[data-route='play'] .mobile-nav svg{width:20px;height:20px}
.mode-progress{flex:1;padding:10px 14px;color:#cfdbd7;align-self:center}
body[data-route='play'] .mode-tabs{display:flex;align-items:center;gap:2px}
body[data-route='play'] .mode-tab{min-width:44px;padding:8px 10px;min-height:44px}
body[data-route='play'] .journey-goal{margin:0;padding:6px 12px}
body[data-route='play'] .journey-goal>br{display:none}
body[data-route='play'] .journey-goal small{display:block}
body[data-route='play'] .instruction{padding:6px 12px;min-height:0}
body[data-route='play'] .seal-guide{display:none}
body[data-route='play'] .tools{display:flex;flex-wrap:wrap;gap:4px;padding:8px}
body[data-route='play'] .tool{flex:1;min-width:72px;min-height:52px;padding:6px 3px;border-radius:10px}
body[data-route='play'] .tool-symbol{margin:0}
body[data-route='play'] .play-skills,body[data-route='play'] .companion-panel{margin:4px 12px;padding:4px 0}
.play-skills summary,.companion-panel summary,.merge-help summary{min-height:44px;align-content:center;cursor:pointer}
body[data-route='play'] .essence-manifest{margin:4px 12px}
body[data-route='play'] .essence-manifest p{margin:3px 0}
body[data-route='play'] .essence-manifest small{display:none}
body[data-route='play'][data-mode='sort'] .sort-board{padding:8px 14px;gap:8px;min-height:0}
body[data-route='play'] .flask-glass{height:min(25dvh,240px);width:100%;max-width:130px}
body[data-route='play'] .match-board{width:min(100%,52dvh,540px);margin:8px auto}
body[data-route='academy'] .room-source{display:none}
body[data-route='merge'] .page-heading p{display:none}
.session-goal{padding:12px;border-radius:12px;background:#173638;margin-top:12px;text-align:left}
.session-goal p{margin:6px 0}
@media(max-width:420px){body[data-route='play'] .main{padding-inline:4px}body[data-route='play'] .mode-tab{padding-inline:6px}body[data-route='play'] .tool{min-width:68px}body[data-route='play'] .flask-glass{height:min(24dvh,180px)}}
@media(max-height:540px) and (orientation:landscape){body[data-route='play'] .flask-glass{height:160px}body[data-route='play'] .match-board{width:330px}}
/* Reserve the iOS status-bar/notch area in standalone and browser fullscreen. */
body .main,body[data-route='play'] .main{padding-top:max(8px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
body[data-route='play'] .topbar{height:auto;min-height:48px;flex-shrink:0}
body[data-route='play'] .resources{min-width:0;flex-wrap:nowrap;gap:8px}
body[data-route='play'] .cloud-badge{flex:1 1 auto;min-width:0;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-route='play'] .resource{flex:0 0 auto}
body[data-route='play'] .icon-button{flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px}
.dialog-backdrop{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
.dialog{max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain}

/* 0.22: one viewport shell, one scrolling content pane. Navigation never overlays content. */
@media(max-width:900px){
 html,body{height:100%;overflow:hidden}
 #app{height:100dvh;overflow:hidden}
 body .app-shell,body[data-route='play'] .app-shell{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-top:env(safe-area-inset-top);background:#091a20}
 body .main,body[data-route='play'] .main{flex:1 1 0;min-height:0;width:100%;overflow-y:auto;overscroll-behavior-y:contain;padding-bottom:24px;-webkit-overflow-scrolling:touch;scroll-padding-block:16px;padding-top:8px}
 body .mobile-nav,body[data-route='play'] .mobile-nav{position:relative;inset:auto;flex:0 0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));min-height:60px;padding:6px max(4px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));z-index:40;background:#091a20;backdrop-filter:none}
 body[data-tutorial='true'] .mobile-nav{display:none}
}
.character-identity .character-role{color:#d3ded8;margin-top:6px;text-transform:none}
.character-identity .character-cycle{color:var(--muted);margin-top:6px}
.card-viewer-caption{flex:0 0 auto;padding:10px 16px;text-align:center;background:#0c1b20;color:#e5e5db}
.card-viewer-caption small{display:block;margin-top:4px}

/* 0.23: names and actual book roles have separate, readable typographic levels. */
.book-profile .character-identity h3{word-break:normal;overflow-wrap:normal;hyphens:none;text-wrap:wrap}
.book-profile .character-identity .character-role{text-wrap:wrap;overflow-wrap:normal}
.card-viewer header span{word-break:normal;overflow-wrap:normal}
.card-viewer-caption{max-height:30dvh;overflow-y:auto}