/*
 * Axinar v0.24 consolidated layout presentation.
 *
 * Replaces the former layout/camera/header stylesheet chain. Sections retain the
 * historical source order so cascade behaviour remains stable while ownership
 * is consolidated into one functional stylesheet.
 */

/* ---- Desktop game shell / side panels ----------------------------------- */
/* Axinar v0.21.0: fixed-header, tabbed side-panel architecture. */

/* Side columns become fixed-header shells. Only the selected pane scrolls. */
#gameView .side.left-side,#gameView .side.right-side{display:flex!important;flex-direction:column!important;min-height:0!important;overflow:hidden!important}
.layout-side-fixed{flex:0 0 auto;min-width:0;position:relative;z-index:12}
.layout-side-tabs{flex:0 0 auto;display:flex;align-items:flex-end;gap:3px;padding:4px 4px 0;border-bottom:1px solid #36506a;background:rgba(4,14,23,.9);position:relative;z-index:11}
.layout-side-tab{appearance:none;border:1px solid #36506a;border-bottom:0;border-radius:7px 7px 0 0;background:#0a1825;color:#9fb7c8;padding:7px 10px;font-weight:800;line-height:1.1;cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.layout-side-tab:hover{background:#10263a;color:#e9f3fb}
.layout-side-tab.active{background:#172b3d;color:#f4cf73;border-color:#56728d;box-shadow:0 -2px 8px rgba(244,207,115,.08)}
.layout-side-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-top:7px}
.layout-side-pane{min-width:0}
.layout-side-pane[hidden]{display:none!important}
.layout-side-pane.active{display:block}

/* Desktop game view owns the full viewport. The global header must not consume
   board height; its real brand/account controls live in the side columns. */
html.desktop-layout.game-active #globalHeader,html.game-active:not(.touch-layout) #globalHeader{display:none!important;height:0!important;min-height:0!important;overflow:hidden!important}
html.desktop-layout.game-active #gameView.game-screen,html.game-active:not(.touch-layout) #gameView.game-screen{height:100dvh!important;max-height:100dvh!important}

/* Dashboard/Games view is a fixed app shell. The header stays put while the
   dashboard itself owns vertical scrolling on desktop and touch layouts. */
#appView:not(.hidden){height:100dvh;max-height:100dvh;overflow:hidden;display:flex;flex-direction:column}
#appView:not(.hidden)>#globalHeader{flex:0 0 56px;min-height:56px}
#appView:not(.hidden)>#dashboard:not(.hidden){flex:1 1 auto;min-height:0!important;height:auto!important;max-height:none!important;margin:0 auto!important;padding-top:16px;padding-bottom:24px;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;align-content:start}
#appView:not(.hidden)>#gameView:not(.hidden){flex:1 1 auto;min-height:0}

/* Left permanent zone: real Axinar brand/menu plus the existing game artwork. */
.layout-left-fixed .desktop-game-brand-slot{margin:0 0 5px!important;min-height:42px}
.layout-left-fixed .wizard-lockup{margin:0 0 6px!important}
html.desktop-layout.game-active .layout-left-fixed .desktop-game-brand-slot{display:flex!important}
html.desktop-layout.game-active .layout-left-fixed .brand{width:100%;display:flex;align-items:center;justify-content:space-between;min-width:0}
html.desktop-layout.game-active .layout-left-fixed .axinar-wordmark{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Other Games intentionally omits duplicate account identity information. The
   old nodes remain hidden in the DOM for compatibility with legacy renderers. */
.left-side>.mini-profile,.layout-retained-profile{display:none!important}
.layout-side-pane[data-tab="other-games"] .side-game-page{margin-top:2px}
.layout-side-pane[data-tab="other-games"]>h3{margin-top:12px}

/* Right permanent account control remains outside the scroll area. */
.layout-right-fixed{overflow:visible!important}
.layout-right-fixed .desktop-game-account-slot{margin:0 0 5px!important;min-height:42px;overflow:visible!important}
html.desktop-layout.game-active .layout-right-fixed .desktop-game-account-slot{display:flex!important}
html.desktop-layout.game-active .layout-right-fixed .account-menu-wrap{width:100%;position:relative;overflow:visible}
html.desktop-layout.game-active .layout-right-fixed .account-button{width:100%;justify-content:flex-end}
html.desktop-layout.game-active .layout-right-fixed .account-menu{z-index:60;max-height:min(72vh,620px);overflow-y:auto}

/* Player cards: avatar is the unchanged left cell spanning all three text rows.
   Every text row begins on the same left edge to the avatar's right. */
#players .layout-player-card{overflow:hidden}
#players .layout-player-card.current{outline:none!important;border:3px solid #e6cc45!important;padding:6px!important}
#players .layout-player-row{display:grid!important;grid-template-columns:max-content minmax(0,1fr)!important;column-gap:10px!important;align-items:stretch!important}
#players .layout-player-row>.avatar{grid-column:1;align-self:center!important;margin:0!important}
#players .layout-player-info{grid-column:2;min-width:0;display:grid;grid-template-rows:auto auto auto;align-content:center}
#players .layout-player-top{display:flex!important;align-items:center!important;gap:8px!important;min-width:0}
#players .layout-player-top>strong:first-child{display:flex!important;align-items:center!important;flex:1 1 auto!important;min-width:0!important;gap:0!important;overflow:hidden}
#players .layout-player-top>.color-dot{flex:0 0 auto!important;margin:0 2px 0 8px!important}
#players .layout-player-meta{display:flex!important;align-items:center!important;gap:8px!important;min-width:0!important;min-height:30px!important;margin:3px 0 1px!important}
#players .layout-player-badge-strip{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
#players .layout-player-badge-track{display:inline-flex!important;align-items:center;gap:8px;min-width:max-content}
#players .layout-player-badge-track .tier-badge,#players .layout-player-badge-track .level-badge{flex:0 0 auto!important;width:auto!important;margin:0!important}
#players .layout-player-score{flex:0 0 auto;margin-left:auto;font-weight:900}
#players .layout-player-stats{min-width:0!important;margin:0!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important}
#players .layout-player-stats>span{display:inline-block;min-width:max-content}

/* Existing content keeps its own styling; tabs only establish containment. */
.layout-side-pane .current-game-summary{margin-top:0}
.layout-side-pane[data-tab="spellcraft"]>#spellPowerBox{margin-top:0}
.layout-side-pane[data-tab="history"]>h3:first-child{margin-top:4px}

/* Mobile drawers use the same pane architecture and remember the selected tab.
   Global mobile navigation/account chrome remains outside the drawer, so the
   fixed zone only retains the artwork where appropriate. */
html.touch-layout #gameView .side.left-side,html.touch-layout #gameView .side.right-side{overflow:hidden!important}
html.touch-layout .layout-side-tabs{padding-left:3px;padding-right:3px}
html.touch-layout .layout-side-tab{flex:1 1 50%;padding:8px 6px;font-size:.92rem}
html.touch-layout .layout-side-scroll{padding-top:5px}
html.touch-layout .layout-left-fixed .desktop-game-brand-slot,html.touch-layout .layout-right-fixed .desktop-game-account-slot{display:none!important}
html.touch-layout .layout-left-fixed .wizard-lockup{margin-top:0!important}
html.touch-layout #appView:not(.hidden)>#globalHeader{flex-basis:50px;min-height:50px}
html.touch-layout #appView:not(.hidden)>#dashboard:not(.hidden){padding-top:10px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));touch-action:pan-y}

@media(max-width:800px){
 #appView:not(.hidden)>#globalHeader{flex-basis:50px;min-height:50px}
 #appView:not(.hidden)>#dashboard:not(.hidden){padding-top:10px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:700px){
 .layout-side-tabs{gap:2px}
 .layout-side-tab{font-size:.88rem;padding:7px 5px}
}

/* ---- Board camera / touch interaction ----------------------------------- */
/* Axinar v0.21.1 board-camera and gesture polish. */
#boardViewport.camera-panning{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
html.touch-layout #boardViewport{overscroll-behavior:contain;touch-action:none}
html.touch-layout #boardViewport.camera-panning .tile.locked{pointer-events:none}

/* ---- UI polish / semantic presentation ---------------------------------- */
/* Axinar v0.21.2 UI polish. Keep visual hooks semantic so later themes can override them cleanly. */
:root{
 --ax-ui-accent:var(--gold,#d7a94d);
 --ax-ui-line:var(--line,#24405c);
 --ax-ui-muted:var(--muted,#9db0c3);
 --ax-ui-tab-bg:#0a1825;
 --ax-ui-tab-active-bg:#172b3d;
}

/* Header controls share one centre line. The wordmark belongs beside the menu
   button rather than floating across the available slot. */
.app-header{align-items:center!important}
.app-header .brand{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-width:0}
.app-header .brand>.mobile-nav-wrap{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;flex:0 0 auto}
.app-header .axinar-wordmark{display:block;align-self:center;margin:0!important;line-height:1!important;white-space:nowrap}
.app-header .account-menu-wrap{align-self:center;display:flex;align-items:center}
.app-header .account-button{display:flex!important;align-items:center!important;justify-content:flex-end;min-height:40px;margin:0!important}

/* The same real brand is moved into the desktop game side header. Keep its
   geometry identical and left aligned so future theme logos can simply swap in. */
html.desktop-layout.game-active .layout-left-fixed .brand{justify-content:flex-start!important;gap:8px!important}
html.desktop-layout.game-active .layout-left-fixed .axinar-wordmark{flex:0 1 auto;margin:0!important;line-height:1!important}

/* Browser-style tabs get restrained, consistent geometry. Theme colours can
   replace the variables without changing layout or semantics. */
.layout-side-tabs{gap:4px!important;padding:5px 5px 0!important;border-bottom-color:var(--ax-ui-line)!important}
.layout-side-tab{background:var(--ax-ui-tab-bg)!important;min-height:34px;display:flex;align-items:center;justify-content:center}
.layout-side-tab.active{background:var(--ax-ui-tab-active-bg)!important;color:var(--ax-ui-accent)!important}
.layout-side-scroll{padding-top:9px!important}

/* Current game title stays on one line. JS only enables motion when overflow is
   real, matching the established game/player marquee behaviour. */
.game-title-row{display:flex!important;align-items:center!important;gap:6px!important;min-width:0}
#gameTitle{flex:1 1 auto;min-width:0;margin:9px 0 2px!important;overflow:hidden;white-space:nowrap}
#gameTitle .header-title-track{display:inline-block;min-width:max-content;white-space:nowrap}
#gameTitle.header-scrolling .header-title-track{animation:header-title-pan 7s ease-in-out 1.1s infinite alternate}
@keyframes header-title-pan{0%,12%{transform:translateX(0)}88%,100%{transform:translateX(calc(-1 * var(--header-title-overflow)))}}
#renameGameBtn{flex:0 0 auto}

/* Game actions are peers, not a vertical hierarchy. */
.current-game-summary .side-actions{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important;margin-top:14px!important}
.current-game-summary .side-actions>button{width:100%;min-width:0;padding-left:7px;padding-right:7px;white-space:normal;line-height:1.15}

/* Modest spacing cleanup around the stable side-panel architecture. */
.layout-side-pane .current-game-summary{padding:0 2px 4px}
.layout-side-pane[data-tab="other-games"] .side-game-page{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.layout-side-pane[data-tab="other-games"]>h3{margin-top:14px!important;margin-bottom:7px!important}

@media(max-width:800px){
 .app-header{padding-top:4px!important;padding-bottom:4px!important}
 .app-header .brand{gap:7px!important;height:100%}
 .app-header .mobile-nav-button{align-self:center;margin:0!important}
 .app-header .axinar-wordmark{align-self:center!important}
 .app-header .account-menu-wrap{height:100%;align-items:center!important}
 .app-header .account-button{min-height:38px;height:auto}
}

@media(max-width:700px){
 .current-game-summary .side-actions{grid-template-columns:1fr 1fr!important}
 .layout-side-tab{min-height:36px}
}

@media(prefers-reduced-motion:reduce){#gameTitle.header-scrolling .header-title-track{animation:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}}