
/* Mythweaver UI refinement: navigation, focus and progressive disclosure */
:root{--ui-safe-bottom:env(safe-area-inset-bottom,0px);--ui-quiet:#999fb0}
:focus-visible{outline:2px solid #e3bd7d!important;outline-offset:3px}
html{scroll-padding-bottom:130px}
.sidebar{background:#121723;border-right-color:#30394b}
.sidebar nav button{display:flex;align-items:center;gap:9px;min-height:43px;font-size:14px;transition:background .15s ease,color .15s ease}
.sidebar nav button.ui-secondary-link{display:none!important}
.sidebar nav button.ui-main-link{font-weight:650}
#uiNavMore .ui-nav-glyph{font-size:17px}
#uiMoreMenu[hidden]{display:none!important}
#uiMoreMenu{position:fixed;z-index:65;left:175px;top:155px;width:250px;padding:13px;border-radius:15px;background:#222838;border:1px solid #6a6071;box-shadow:0 18px 55px #000b;display:grid;gap:4px}
.ui-menu-head{display:flex;align-items:center;justify-content:space-between;color:#e4c68f;padding:4px 4px 2px}
.ui-menu-sub{font-size:11px;color:#acb1c3;padding:0 4px 7px}
#uiMoreMenu button{width:100%;text-align:left;display:flex;align-items:center;gap:12px;min-height:39px;color:#e7e0d9;background:transparent;border:0;border-radius:9px;padding:9px 10px}
#uiMoreMenu button:hover,#uiMoreMenu button:focus-visible{background:#343c4d}
#uiMoreMenu .ui-menu-head button{width:35px;justify-content:center}
#uiMoreMenu .ui-logout{border-top:1px solid #475062;border-radius:0;margin-top:6px;color:#f0bcc0}
.app{grid-template-columns:207px minmax(0,1fr)}
main{padding:20px 26px 40px;max-width:1300px}
header{padding:15px 26px;background:#111620}
.hero{padding:23px;background:linear-gradient(112deg,#342c28,#1a2433);border-color:#60533f}
.hero h2{font-size:27px}.card{border-color:#313b50;background:#181e2b}
.story{height:min(56vh,610px);min-height:260px;padding:18px;scrollbar-color:#596174 transparent}
.bubble{padding:13px 16px;margin-bottom:11px;line-height:1.6}
.status{background:#193e35;border-color:#325548}
.ui-party-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:9px;margin:12px 0}
.ui-hero-mini{border:1px solid #484c61;background:linear-gradient(155deg,#262e3b,#1c2330);border-radius:12px;padding:11px 13px;min-width:0}
.ui-mini-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.ui-mini-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-mini-head span{font-size:11px;color:#e0c28c;white-space:nowrap}
.ui-mini-health{font-size:12px;color:#d4d9df;margin:4px 0}
.ui-mini-meter{height:5px;background:#493841;border-radius:8px;overflow:hidden}
.ui-mini-meter i{display:block;height:100%;background:linear-gradient(90deg,#78aa8e,#bad6a0);border-radius:8px}
.ui-combat-drawer{border:1px solid #3b4659;border-radius:12px;background:#1c2230;margin:12px 0 8px;min-width:0;overflow:hidden}
.ui-combat-drawer>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;padding:13px 17px;min-height:48px;font-weight:650;color:#e8d1ad}
.ui-combat-drawer>summary small{font-weight:400;color:#b2b8c7;font-size:11px;text-align:right}
.ui-combat-drawer[open]>summary{border-bottom:1px solid #3b4659}
.ui-combat-drawer .game-panel{margin:0;border:0;border-radius:0;background:#1b2030}
.ui-action-dock{position:sticky;bottom:8px;z-index:9;margin:11px 0 8px;padding:10px 12px;background:rgba(20,25,35,.96);border:1px solid #4d5466;border-radius:13px;box-shadow:0 8px 30px #0306089c;backdrop-filter:blur(12px)}
.ui-action-dock .suggest{margin:0 0 7px;max-height:77px;overflow:auto}
.ui-action-dock .action{margin:0;align-items:stretch}
.ui-action-dock .action textarea{min-height:51px;max-height:130px}
.ui-action-dock .action .row{align-content:center}
.ui-hide-begin{display:none!important}
.ui-campaign-hub{display:grid;grid-template-columns:minmax(260px,.88fr) minmax(0,1.12fr);gap:16px;align-items:start}
.ui-campaign-library .card{margin:0}
.ui-campaign-tools{display:grid;gap:11px}
.ui-panel-toggle{display:block;border:1px solid #404b60;border-radius:13px;background:#1a2030;overflow:hidden}
.ui-panel-toggle>summary{list-style:none;cursor:pointer;padding:15px 17px;font-weight:700;color:#efcf9f;min-height:52px;display:flex;align-items:center}
.ui-panel-toggle>summary::-webkit-details-marker{display:none}
.ui-panel-toggle>summary:after{content:'⌄';margin-left:auto;color:#b8bac5;transform:rotate(-90deg);font-size:19px}
.ui-panel-toggle[open]>summary:after{transform:rotate(0)}
.ui-panel-toggle[open]>summary{border-bottom:1px solid #404b60}
.ui-panel-toggle>.card{border:none;border-radius:0;background:transparent}
.ui-campaign-hub .ui-campaign-library>.card{position:sticky;top:18px}
.ui-api-info{margin-bottom:13px;border:1px solid #373f50;border-radius:9px}
.ui-api-info summary{padding:9px 12px;cursor:pointer;font-size:12px;color:#c4c8d5}
.ui-api-info .notice{margin:0;border:none;border-radius:0}
.ui-journal-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}
.ui-journal-tabs button{background:#252c3a;border:1px solid #444e60;color:#d7dbe1;border-radius:9px;padding:10px 14px;min-height:43px}
.ui-journal-tabs button.selected{background:#43392f;border-color:#b38d57;color:#ffdda3}
.ui-section-hidden{display:none!important}
.ui-journal-ready{grid-template-columns:1fr!important}
.ui-journal-advanced{grid-column:1/-1}
.ui-journal-advanced .card{border:none;background:transparent}
.forge-progress{border-color:#40495c}
.forge-steps{gap:5px}
.forge-step{min-height:43px}
.field label{letter-spacing:.35px}
@media(max-width:900px){
 .app{display:block}
 body{padding-bottom:calc(75px + var(--ui-safe-bottom))}
 .sidebar{position:fixed;top:auto;bottom:0;left:0;right:0;height:auto;z-index:50;padding:5px 5px calc(5px + var(--ui-safe-bottom));background:#161c2afa;border:0;border-top:1px solid #4b4b5b;box-shadow:0 -7px 25px #0008;overflow:visible}
 .sidebar .brand,.sidebar .sidebar-foot{display:none}
 .sidebar nav{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:2px;min-width:0}
 .sidebar nav button.ui-main-link{display:flex;flex-direction:column;gap:2px;justify-content:center;text-align:center;align-items:center;min-height:57px;padding:6px 1px;border-radius:10px;font-size:0;white-space:normal}
 .sidebar nav button.ui-main-link .ui-tab-name{font-size:11px;font-weight:600}
 .sidebar nav button.ui-main-link:not(#uiNavMore){font-size:19px}
 #uiNavMore{font-size:0}
 #uiNavMore .ui-nav-glyph{font-size:19px}
 #uiNavMore>span:last-child{font-size:11px}
 #uiMoreMenu{left:auto;right:10px;top:auto;bottom:calc(77px + var(--ui-safe-bottom));width:min(290px,calc(100vw - 20px));max-height:calc(100dvh - 115px);overflow:auto}
 header{padding:11px 15px}
 header h1{font-size:21px}
 header .head-right .status{font-size:0;width:12px;height:12px;padding:0;border-radius:50%;flex:none}
 header .head-right #logoutButton{display:none}
 main{padding:12px 13px 28px}
 .ui-campaign-hub{grid-template-columns:1fr}
 .ui-campaign-hub .ui-campaign-library>.card{position:static}
 .ui-action-dock{position:fixed;left:10px;right:10px;bottom:calc(74px + var(--ui-safe-bottom));margin:0;z-index:35} body[data-ui-tab="adventure"] #screen{padding-bottom:150px}
 .story{height:min(46dvh,510px);min-height:230px}
}
@media(max-width:570px){
 .grid{grid-template-columns:1fr}
 .ui-party-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:9px 0}
 .ui-hero-mini{padding:9px}
 .ui-mini-head{font-size:12px}
 .ui-mini-head span{font-size:10px}
 .ui-combat-drawer>summary{padding:11px 12px;display:block}
 .ui-combat-drawer>summary small{display:block;text-align:left;margin-top:3px}
 .ui-action-dock{padding:8px 9px}
 .ui-action-dock .action{display:flex;flex-direction:row;gap:8px}
 .ui-action-dock .action textarea{flex:1 1 100px;min-width:0;font-size:14px}
 .ui-action-dock .action .row{display:flex;flex:0 0 auto;align-items:stretch}
 .ui-action-dock .action button.primary{padding:9px 14px}
 .ui-action-dock .suggest{max-height:70px}
 .ui-action-dock .suggest button{font-size:11px;padding:5px 8px}
 .hero{padding:16px}
 .hero h2{font-size:23px}
 .story{height:min(34dvh,370px);min-height:205px;padding:11px}
 .bubble{padding:11px 12px;line-height:1.55}
 .game-panel .game-party{grid-template-columns:repeat(2,minmax(0,1fr))}
 .forge-progress{padding:10px}
 .forge-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .forge-step{font-size:11px;padding:9px 3px;white-space:normal}
 .builder-layout .card{padding:13px}
 .ui-journal-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
 .ui-journal-tabs button{font-size:11px;padding:8px 3px}
}
@media(prefers-reduced-motion:reduce){.sidebar nav button{transition:none}.ui-action-dock{backdrop-filter:none}}

.ui-forge-dock{display:none}
@media(max-width:900px){.ui-forge-dock{display:flex;position:fixed;bottom:calc(74px + var(--ui-safe-bottom));left:10px;right:10px;gap:8px;padding:9px 11px;background:rgba(23,29,42,.97);border:1px solid #626071;border-radius:12px;z-index:35;box-shadow:0 8px 25px #0009}.ui-forge-dock button{flex:1;min-height:44px}body[data-ui-tab="characters"] #screen{padding-bottom:92px}}
/* Keep authentication overlays above mobile navigation and action controls. */
.overlay{z-index:120}
.toast{z-index:115}
body[data-ui-tab="campaigns"] .ui-campaign-library > .card > h3{display:none}

.ui-speech-button{min-width:44px;min-height:44px;padding:7px;background:#323747;border:1px solid #655b58;border-radius:9px;font-size:20px}.ui-speech-button[aria-pressed="true"]{background:#78443f;box-shadow:0 0 0 2px #bd8572 inset}.ui-quick-commands{font-size:12px;margin:0 0 7px}
.ui-quick-commands summary{cursor:pointer;display:inline-block;color:#d3bf9d;font-weight:600;padding:5px 2px;min-height:27px}
.ui-quick-commands summary:focus-visible{outline:2px solid #e3bd7d}
.ui-quick-command-list{display:flex;flex-wrap:wrap;gap:5px;padding:5px 0}
.ui-quick-command-list button{border:1px solid #575c6c;color:#e4ddce;background:#282e3b;border-radius:18px;padding:6px 10px;font-size:11px;cursor:pointer}
.ui-quick-command-list button:active{background:#514132}


/* Landscape phones: recover story space while keeping the send target touch-friendly. */
@media(max-width:900px) and (max-height:500px){
 .ui-action-dock{padding:5px 8px}
 .ui-action-dock .suggest{display:flex;flex-wrap:nowrap;max-height:30px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
 .ui-action-dock .suggest button{white-space:nowrap;flex:0 0 auto}
 .ui-action-dock .action textarea{min-height:42px;max-height:80px}
 .ui-action-dock .action button.primary{min-height:44px}
 .ui-quick-commands summary{min-height:22px;padding:2px}
 .story{min-height:165px}
}
