/* DETHRONED 0.3.4 - MOBILE ONLY.
   The original desktop stylesheet is intentionally unchanged.
   No rule in this file changes desktop layouts at >=901px. */
.mobile-hud,.mobile-online-strip,.mobile-bottom-nav,.mobile-scrim,.mobile-drawer-head{display:none}
@media(max-width:900px){
  :root{--mobile-nav-h:73px;--mobile-top-h:57px;--mobile-status-h:70px}
  html{scroll-padding-top:75px}
  body{overflow-x:hidden;background:radial-gradient(ellipse at 0 -160px,#392d42 0%,transparent 66%),#11131e}
  body.mobile-drawer-open{overflow:hidden}
  .app{min-height:100dvh;min-width:0}
  .topbar{height:var(--mobile-top-h);min-height:var(--mobile-top-h);padding:0 12px 0 16px;gap:8px;z-index:45;background:#131723f5;border-bottom:1px solid #514151;backdrop-filter:blur(16px)}
  .topbar .crown{font-size:22px;margin-right:5px}.topbar .logo{font-size:16px;letter-spacing:.12em}
  .topbar .top-right{gap:7px}.topbar .top-right .hide-mid{display:none}
  .topbar .top-right .gold{font-size:12px;white-space:nowrap}
  .topbar .top-right #logout,.topbar .top-right #open-admin{display:none}
  .topbar .top-right button[data-nav="notifications"]{border-radius:10px;min-width:43px;min-height:39px;padding:8px}
  .mobile-hud{display:flex;align-items:center;gap:11px;min-height:var(--mobile-status-h);padding:9px 14px;border-bottom:1px solid #38394b;background:linear-gradient(110deg,#262637,#1b2030);box-shadow:0 5px 18px #05071045;overflow:hidden}
  .mobile-hud-avatar{height:46px;width:46px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:#272b3a;border:1px solid #8a734e;color:#dec18d;overflow:hidden;font:24px Cinzel,Georgia,serif}
  .mobile-hud-avatar img{width:100%;height:100%;object-fit:cover}
  .mobile-hud-body{display:grid;align-content:center;gap:5px;flex:1;min-width:0}
  .mobile-hud-title{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden}
  .mobile-hud-title .mobile-hud-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:700;line-height:1.5}
  .mobile-hud-level{font-size:10px;padding:3px 6px;border-radius:30px;background:#493d31;color:#edd09c;flex:0 0 auto}
  .mobile-bars{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .mobile-bar{height:5px;background:#0e1420;border:1px solid #343744;border-radius:100px;overflow:hidden}
  .mobile-bar>span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b15d69,#f1a08b)}
  .mobile-bar.xp>span{background:linear-gradient(90deg,#9b7945,#efd49b)}
  .mobile-hud-place{font-size:11px;color:#c8b8a0;max-width:96px;min-width:62px;padding:5px 7px;border:1px solid #65523b;border-radius:8px;background:#271f22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-online-strip{display:flex;align-items:center;gap:9px;min-height:37px;padding:5px 12px;border-bottom:1px solid #343747;background:#191c29;min-width:0}
  .mobile-online-label{display:inline-flex;align-items:center;gap:5px;color:#b7baae;font-size:10px;text-transform:uppercase;letter-spacing:.04em;flex:0 0 auto}
  .mobile-online-label b{color:#f0d39a}
  .mobile-online-names{display:flex;gap:5px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;white-space:nowrap}
  .mobile-online-names .online-person{font-size:10px;min-height:27px;padding:5px 8px;flex:0 0 auto}
  .layout,.layout.realm-chat,.layout.realm-page{display:block;grid-template-columns:none;grid-template-areas:none;gap:0;max-width:none;width:100%;min-height:0;margin:0;padding:10px 10px calc(var(--mobile-nav-h) + 28px + env(safe-area-inset-bottom, 0px));overflow:visible}
  .layout>.leftside{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;position:fixed!important;inset:0 auto auto 0;z-index:72;width:min(90vw,355px);max-width:100%;height:100vh;height:100dvh;max-height:100dvh;min-height:0;background:#151826;padding:env(safe-area-inset-top,0px) 12px calc(32px + env(safe-area-inset-bottom,0px));overflow-x:hidden;overflow-y:scroll;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior-y:contain;scrollbar-width:thin;scroll-padding-top:64px;box-shadow:18px 0 90px #000b;transform:translate3d(-105%,0,0);transition:transform .23s ease;visibility:hidden;pointer-events:none}
  .layout>.leftside>.player-card,.layout>.leftside>.navigation,.layout>.leftside>.online-panel{display:block;order:initial;flex:0 0 auto;min-height:min-content;height:auto;max-height:none;overflow:visible}
  body.mobile-drawer-open .layout>.leftside{transform:translate3d(0,0,0);visibility:visible;pointer-events:auto}
  .mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;min-height:64px;margin:0 -12px;padding:10px 15px;position:sticky;top:0;background:#1c1d2d;border-bottom:1px solid #494057;z-index:2}
  .mobile-drawer-head strong{font:600 14px Cinzel,Georgia,serif;letter-spacing:.08em;color:#ebcda0}
  .mobile-drawer-head .btn{min-height:37px;min-width:40px}
  .layout>.leftside .nav-list{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px}
  .layout>.leftside .nav-list button{font-size:12px;line-height:1.3;text-align:left;min-height:45px;padding:9px 10px;background:#242839;border:1px solid #353b4d;border-radius:9px;color:#e0dce0}
  .layout>.leftside .nav-list button.active{border-color:#b08d5a;background:#393345;color:#ffe0ab}
  .layout>.leftside .nav-timer{float:none;display:block;width:max-content;margin:5px 0 0}
  .layout>.leftside .player-card .pad{padding:13px}
  .layout>.leftside .online-list{max-height:none;min-height:0;overflow:visible;overflow-wrap:anywhere}
  .mobile-scrim{display:block;position:fixed;inset:0;z-index:70;background:#05060dc7;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s;border:0;width:100%;height:100%}
  body.mobile-drawer-open .mobile-scrim{opacity:1;pointer-events:auto}
  .layout.realm-page>.chat{display:none}
  .layout.realm-chat>.action-pane{display:none}
  .layout.realm-chat>.chat{display:flex;width:100%;min-width:0;height:calc(100dvh - var(--mobile-top-h) - var(--mobile-status-h) - 37px - var(--mobile-nav-h) - 28px - env(safe-area-inset-bottom, 0px));min-height:275px;position:relative;top:auto;border-radius:14px;box-shadow:0 12px 35px #090b164d;overflow:hidden}
  .chat-head{padding:14px 13px 10px;background:linear-gradient(120deg,#2c293d,#1d2131)}
  .chat-head h2{font-size:19px}.chat-head p{font-size:11px;line-height:1.45;margin-top:3px}
  .chat-head .tabs{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin-top:10px;scrollbar-width:none}
  .chat-head .tabs button{flex:0 0 auto;min-height:37px;padding:8px 14px;background:#202638;border:1px solid #454253;border-radius:100px;color:#d4cfda}
  .chat-head .tabs button.active{border-color:#b99b68;background:#473728;color:#ffdfae}
  .chat-messages{padding:12px 12px 10px;gap:14px;overflow-x:hidden;overscroll-behavior:contain;min-height:0}
  .msg{grid-template-columns:30px minmax(0,1fr);gap:9px}
  .msg-row{align-items:baseline}.msg-body{font-size:13px;line-height:1.6}.msg-author{font-size:13px}
  .msg-body .bb-image{max-width:100%!important;height:auto;max-height:240px!important}
  .chat-compose{padding:9px 10px calc(10px + env(safe-area-inset-bottom,0px));background:#1e2230}
  .compose-form{align-items:end;gap:7px}.compose-form .btn[type="submit"]{min-width:59px;padding:11px 9px;min-height:44px;border-radius:10px}
  .compose-form textarea.control{font-size:16px;min-height:44px;max-height:130px;resize:vertical;padding:11px}
  .chat-compose .bb-toolbar{gap:5px;max-height:65px;overflow-x:auto;overflow-y:visible;flex-wrap:nowrap;scrollbar-width:none}
  .bb-menu{flex-basis:100%;max-height:150px;overflow-y:auto}
  .layout.realm-page>.action-pane{display:block;position:static;top:auto;width:100%;max-height:none;overflow:visible;min-width:0}
  .layout.realm-page>.action-pane>.panel:not(.mobile-online-panel){border:0;background:transparent;box-shadow:none;min-height:0;overflow:visible}
  .layout.realm-page>.action-pane>.panel>.panel-header{display:none}
  .layout.realm-page .content{padding:0;display:block;overflow:visible}
  .action-pane .mobile-action-toggle,.action-pane .mobile-online-panel{display:none!important}
  .mobile-page{display:grid;gap:13px;min-width:0}
  .mobile-page-heading{padding:19px 17px 17px;border:1px solid #63506a;border-radius:14px;background:linear-gradient(125deg,#373044,#24283a 70%,#1c2330);box-shadow:0 12px 26px #06071040}
  .mobile-page-eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#d1aa72}
  .mobile-page-heading h1{font-size:clamp(19px,5.2vw,24px);line-height:1.25;color:#f6e2c4;margin:7px 0 8px;overflow-wrap:anywhere}
  .mobile-page-heading p{font-size:12px;line-height:1.6;color:#c9c4cd}
  .mobile-page-body{display:grid;gap:12px;min-width:0}
  .mobile-page-intro,.mobile-page-section{min-width:0;display:grid;gap:10px;padding:14px;background:linear-gradient(145deg,#212535,#1b202d);border:1px solid #3b3d52;border-radius:12px;box-shadow:0 7px 18px #08091230}
  .mobile-page-intro:empty{display:none}
  .mobile-section-heading{color:#e9c794;border-bottom:1px solid #494352;font-family:Cinzel,Georgia,serif;font-size:14px;line-height:1.4;padding-bottom:11px;margin:0}
  .mobile-section-content{display:grid;gap:9px;min-width:0}
  .mobile-page .section-title{font-size:12px}
  .mobile-page .item{display:grid;gap:10px;align-items:start;padding:13px;border-radius:10px;min-width:0}
  .mobile-page .item>div{min-width:0}.mobile-page .item .actions{justify-content:flex-start;align-self:stretch;gap:6px}
  .mobile-page .item .btn{white-space:normal;min-height:38px}
  .mobile-page .form-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .mobile-page .form-card{padding:13px;border-radius:10px;min-width:0}
  .mobile-page .between,.mobile-page .row{min-width:0}
  .mobile-page .pill-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;padding-bottom:4px}
  .mobile-page .pill-tabs>.btn{flex:0 0 auto}
  .mobile-page .store-hero{padding:14px;gap:11px}.mobile-page .store-sigil{font-size:29px}
  .mobile-page .store-grid,.mobile-page .skill-forest{grid-template-columns:1fr}
  .mobile-page .skill-node{margin-left:calc(var(--tree-indent)*9px)}
  .mobile-page .store-item-action{flex-wrap:wrap;gap:7px}
  .mobile-page .raid-member,.mobile-page .raid-reward{font-size:12px;flex-wrap:wrap}
  .mobile-page .construction-card{padding:13px}
  .mobile-page .info{padding:13px}
  .mobile-page .bb-toolbar{flex-wrap:wrap;max-height:none}
  .mobile-page button,.mobile-page .control{max-width:100%}
  .mobile-page input.control,.mobile-page textarea.control,.mobile-page select.control{font-size:16px;min-height:44px}
  .mobile-page select.control{height:auto}
  .mobile-page .btn{min-height:42px;white-space:normal;overflow-wrap:anywhere}
  .mobile-page .btn.tiny{min-height:36px}
  .mobile-page .store-item{min-width:0}
  .mobile-page .kv{min-width:0;overflow-wrap:anywhere}
  .mobile-page .entry{overflow-wrap:anywhere}
  .mobile-page .stack{min-width:0}
  .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;position:fixed;z-index:52;bottom:0;left:0;right:0;min-height:var(--mobile-nav-h);padding:7px 7px calc(8px + env(safe-area-inset-bottom, 0px));background:#151927f7;backdrop-filter:blur(20px);border-top:1px solid #55465a;box-shadow:0 -11px 32px #080915a8}
  .mobile-bottom-nav:has(button:nth-child(4):last-child){grid-template-columns:repeat(4,minmax(0,1fr))}
  .mobile-bottom-nav>button{display:grid;justify-items:center;align-content:center;gap:4px;background:transparent;border:1px solid transparent;border-radius:10px;color:#9d9daa;min-width:0;min-height:54px;padding:6px 2px;font-size:10px;font-weight:600;letter-spacing:.012em}
  .mobile-bottom-nav>button .mobile-nav-icon{font-size:20px;line-height:1}
  .mobile-bottom-nav>button.active{color:#f4d5a1;background:#3d3340;border-color:#6f5a5b}
  .mobile-bottom-nav>button:focus-visible,.mobile-page button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .mobile-bottom-nav>button:disabled{opacity:.35}
  .profile-screen{padding:10px;overflow-y:auto;max-height:100dvh}
  .profile-paper{max-width:100%;width:100%;margin:0 auto}
  .staff-modal{max-width:100vw;border-radius:0}.staff-shell{padding:13px}
  .staff-columns{grid-template-columns:1fr}.staff-footer{grid-template-columns:1fr}
  #toast-stack{left:12px;right:12px;bottom:calc(var(--mobile-nav-h) + 14px + env(safe-area-inset-bottom,0px));z-index:100}
  #toast-stack .toast{max-width:none}
  body:has(.profile-screen) .mobile-bottom-nav,body:has(.modal-backdrop) .mobile-bottom-nav{display:none}
  body:has(#chat-text:focus) .mobile-bottom-nav{display:none}
  body:has(#chat-text:focus) .layout.realm-chat>.chat{height:calc(100dvh - var(--mobile-top-h) - var(--mobile-status-h) - 37px - 25px)}
  body:has(#chat-text:focus) #toast-stack{bottom:10px}
}
@media(max-width:390px){
 .topbar .logo{font-size:14px}.topbar .crown{font-size:19px}.topbar .top-right .gold{font-size:10px}
 .mobile-hud-place{max-width:75px;min-width:50px;font-size:10px}
 .mobile-hud-name{font-size:12px}
 .mobile-page-section,.mobile-page-intro{padding:12px}
}
@media (prefers-reduced-motion:reduce) and (max-width:900px){
 .layout>.leftside,.mobile-scrim{transition:none}
}

/* v0.3.6: mobile Realm drawer is one full-height, independently scrollable surface. */
@media (max-width:900px){
  .layout>.leftside>.panel .pad,.layout>.leftside>.panel .nav-list,.layout>.leftside>.panel .online-list{height:auto;max-height:none}
  .layout>.leftside .nav-list button{min-width:0;overflow-wrap:anywhere}
  .layout>.leftside .player-card .strong,.layout>.leftside .player-card small{max-width:100%;overflow-wrap:anywhere}
  .layout>.leftside>.online-panel{margin-bottom:8px}
}
