/* Overlay layout (loaded last): the game world fills the whole window and every panel floats on top of it, semi-transparent.
   Desktop and phone use the same page; overlay-layout.js sets the scale, the panel toggle and the transparency.
   To go back to the old fixed layout, remove the <link> and <script> for overlay-layout from index.html. */
:root{--ui-alpha:.62}
#game{position:fixed;inset:0;height:100dvh;overflow:hidden;background:#000;padding:0}
/* The grid wrappers disappear: their children are placed by position:absolute inside #game. */
#game .client,#game .main-area{display:contents}
#game .viewport{position:absolute;inset:0;z-index:0;border:0;background:#000;overflow:hidden;display:block;container-type:normal}
#game #world{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);max-width:none!important;max-height:none!important;min-height:0;aspect-ratio:auto!important;object-fit:fill;image-rendering:pixelated;image-rendering:crisp-edges}
#game .world-heading,#game .world-bottom,#game #chat-divider,#game .app-header{display:none!important}

/* Top bar: auto / movement / use items, gold, hunt buttons. */
#game #client-top{position:absolute;top:0;left:0;right:0;z-index:20;background:rgba(22,22,22,var(--ui-alpha));border:0;border-bottom:1px solid rgba(255,255,255,.12);padding-right:112px}
/* Right column: minimap, stats, equipment, skills, backpack, VIP, party. */
#game .sidebar{position:absolute;top:34px;right:0;bottom:0;width:190px;z-index:20;overflow-y:auto;border:0;border-left:1px solid rgba(255,255,255,.12);background:rgba(22,22,22,var(--ui-alpha));padding:3px;backdrop-filter:blur(1px)}
#game .sidebar .panel{background:rgba(60,60,60,calc(var(--ui-alpha) + .1))}
/* Chat / log: bottom left, see-through. */
#game .console{position:absolute;left:0;bottom:0;width:min(620px,calc(100vw - 200px));height:150px;z-index:20;margin:0;border:0;border-top:1px solid rgba(255,255,255,.12);background:rgba(22,22,22,var(--ui-alpha))}
#game .console #log{background:transparent}
#game .console-tabs{background:rgba(40,40,40,var(--ui-alpha))}
/* Messages over the map. */
#game #world-note,#game #action-note{z-index:15}

/* Small floating buttons (top right): panels on/off, fill/fit, transparency. */
#ui-controls{position:fixed;top:36px;right:196px;z-index:40;display:flex;gap:4px}
#ui-controls button{width:30px;height:26px;padding:0;font:bold 14px Verdana;line-height:1;color:#eee;background:rgba(30,30,30,.7);border:1px solid rgba(255,255,255,.3);cursor:pointer}
#ui-controls button:hover{background:rgba(70,70,70,.85)}
#game.ui-panels-off .sidebar{display:none}
#game.ui-panels-off~#ui-controls,body.ui-panels-off #ui-controls{right:8px}
#game.ui-chat-off .console{display:none}

/* Phones: panels start closed, chat is narrower, touch-friendly controls. */
@media (max-width:760px),(pointer:coarse) and (max-width:1024px){
 #game .sidebar{width:min(220px,62vw);top:34px}
 #game .console{width:min(100vw,460px);height:112px}
 #game #client-top{padding-right:96px}
 #ui-controls{right:8px;top:38px}
 #ui-controls button{width:38px;height:34px;font-size:17px}
 #game:not(.ui-panels-on) .sidebar{display:none}
}

/* The Party panel is not wanted in the side column: parties are handled in the Room window (Party tab / Room button). */
#party-panel,#game .client-actions button[data-panel="party-panel"]{display:none!important}