/* layout.game.css
 * Grid shell for primary play surface.
 * Regions (UPDATED): left (Power Cards shop), center (arena), right (Monsters + ancillary panels)
 */
:root {
  --gl-gap: 18px;
  --gl-side-width: 350px;
  --gl-header-height: 86px; /* used to allow side panels to overlap header without pushing arena */
}

.game-layout-shell { width:100%; display:flex; flex-direction:column; gap:16px; padding:0 20px 0; box-sizing:border-box; margin:0; position:relative; }
.game-layout-shell .gl-header { padding:14px 32px 16px; display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; right:0; height:var(--gl-header-height); z-index:6500; pointer-events:auto; background:rgba(0,0,0,.85); border:2px solid #333; border-left:0; border-right:0; box-shadow:0 4px 22px rgba(0,0,0,.65); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); gap:24px; }
.game-layout-shell .gl-header .gl-head-spacer { flex:1 1 0; display:flex; align-items:center; justify-content:flex-start; min-width:0; }
.game-layout-shell .gl-header .gl-head-right { justify-content:flex-end; }
.game-layout-shell .gl-header .gl-title { flex:0 0 auto; margin:0; text-align:center; }
.game-layout-shell .gl-header #ai-thinking-banner { 
  display: none !important; /* Hidden per user request */
  pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:10px; background:linear-gradient(135deg,#1f1f1f,#2c2c2c); border:2px solid #444; padding:6px 14px 6px 12px; border-radius:30px; font-family:'Bangers',cursive; letter-spacing:1px; color:#fff; font-size:18px; position:relative; top:auto; left:auto; transform:none; box-shadow:0 0 0 2px #000,0 4px 12px -2px rgba(0,0,0,.65); opacity:1; transition:opacity .35s ease, transform .45s cubic-bezier(.19,1,.22,1); z-index:600; }
.game-layout-shell .gl-header #ai-thinking-banner.is-active { opacity:1; transform:scale(1); }
.game-layout-shell .gl-header #ai-thinking-banner.entering { opacity:0; transform:scale(.9); }
.game-layout-shell .gl-header #ai-thinking-banner.leaving { opacity:0; transform:scale(.85); }
.game-layout-shell .gl-header #ai-thinking-banner[data-hidden] { display:none; }
.game-layout-shell .gl-header #ai-thinking-banner .label { text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000; }
.game-layout-shell .gl-header #ai-thinking-banner .dots { display:inline-flex; gap:4px; }
.game-layout-shell .gl-header #ai-thinking-banner .dots::before, 
.game-layout-shell .gl-header #ai-thinking-banner .dots::after, 
.game-layout-shell .gl-header #ai-thinking-banner .dots span { content:""; width:6px; height:6px; background:#ffd400; border-radius:50%; box-shadow:0 0 6px rgba(255,212,0,.7); animation:aiDots 1s ease-in-out infinite; }
.game-layout-shell .gl-header #ai-thinking-banner .dots::after { animation-delay:.25s; }
.game-layout-shell .gl-header #ai-thinking-banner .dots span { animation-delay:.5s; }
/* Exit animation */
/* Legacy keyframe hooks replaced by transition classes above; keep selector for backward compatibility */
.game-layout-shell .gl-header #ai-thinking-banner.out { opacity:0; transform:translateY(-30%) scale(.85); }
@keyframes aiDots { 0%,80%,100%{ transform:scale(.4); opacity:.35;} 40%{ transform:scale(1); opacity:1; } }
/* Removed aiBannerIn / aiBannerOut keyframes in favor of transitions */
@keyframes aiBannerIn { 0%{ opacity:0;} 100%{ opacity:1;} }
@keyframes aiBannerOut { 0%{ opacity:1;} 100%{ opacity:0;} }
.game-layout-shell .gl-header::before, .game-layout-shell .gl-header::after { content:""; position:absolute; top:50%; width:18%; height:4px; background:linear-gradient(90deg,rgba(255,215,0,.65),rgba(255,215,0,0)); pointer-events:none; }
.game-layout-shell .gl-header::before { left:0; transform:translateY(-50%); }
.game-layout-shell .gl-header::after { right:0; transform:translateY(-50%) scaleX(-1); }
.game-layout-shell .gl-title { font-family:'Bangers',cursive; font-size:54px; letter-spacing:2px; color:#FFD700; text-shadow:-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,3px 3px 0 #000; margin:0; line-height:1; }
/* Compact active player indicator (header right) */
/* removed header active-indicator block */
.game-layout-shell .gl-main { display:grid; grid-template-columns: var(--gl-side-width) 1fr var(--gl-side-width); gap: var(--gl-gap); align-items:start; width:100%; /* header overlay handled per-column */ }
.game-layout-shell > .gl-main > .gl-left { display:flex; flex-direction:column; gap:14px; min-width:0; position:relative; z-index:6600; margin-top:calc(var(--gl-header-height) * -1); padding-top:var(--gl-header-height); height:calc(98vh + var(--gl-header-height)); max-height:calc(98vh + var(--gl-header-height)); overflow:visible; }
.game-layout-shell > .gl-main > .gl-center { position:relative; min-height:640px; display:flex; flex-direction:column; margin-top:var(--gl-header-height); }
.game-layout-shell > .gl-main > .gl-right { display:flex; flex-direction:column; gap:14px; align-items:stretch; min-width:0; position:relative; z-index:6600; margin-top:calc(var(--gl-header-height) * -1); padding-top:var(--gl-header-height); height:calc(98vh + var(--gl-header-height)); max-height:calc(98vh + var(--gl-header-height)); overflow:visible; }
/* Ensure scrollable overflow inside tall side rails without moving header */
.game-layout-shell > .gl-main > .gl-left > *,
.game-layout-shell > .gl-main > .gl-right > * { flex-shrink:0; }
.game-layout-shell > .gl-main { position:relative; padding-top:0; }
/* Side panels now span nearly full viewport height; disable internal scroll to show full stacked cards */
.game-layout-shell > .gl-main > .gl-left { overflow:visible; }
.game-layout-shell > .gl-main > .gl-right { overflow:visible; }
.game-layout-shell .gl-center-content { flex:1; position:relative; }
.game-layout-shell .gl-center-bottom { display:flex; flex-direction:row; gap:14px; flex-wrap:wrap; align-items:flex-start; padding-top:8px; }
.game-layout-shell .gl-footer { position:fixed; left:0; right:0; bottom:0; height:64px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.65)); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); z-index:5000; padding:6px 20px; gap:20px; }
.game-layout-shell .gl-footer > * { position:relative; }

/* Allow components to opt-in to full width in side rails */
.gl-left > *:not(.cmp-player-profile-cards),
.gl-right > * { width:100%; }

/* Dice tray initial anchor (still draggable) */
.gl-right .cmp-dice-tray { position:relative; left:0; bottom:0; transform:none; margin-top:4px; order:3; }
.gl-center-bottom .cmp-dice-tray { order:1; }
.gl-center-bottom .cmp-action-menu { order:2; }
.gl-center-bottom .cmp-action-menu { transition: margin .3s ease; }
/* If either side panel expanded (heuristic: body has class panels-expanded-left/right added via JS later) */
/* Margins removed - action menu positioned with fixed right value to avoid monsters panel */
body.panels-expanded-left .gl-center-bottom .cmp-action-menu { margin-left: 0; }
body.panels-expanded-right .gl-center-bottom .cmp-action-menu { margin-right: 0; }
.gl-footer .cmp-toolbar { width:auto; margin-bottom:40px; }

/* Shop ordering and stacking with effect panels */
/* Ordering inside right rail (monsters & ancillary) */
.gl-right .cmp-monsters-panel { order:1; }
.gl-right .cmp-effect-queue { order:2; }
.gl-right .cmp-effect-inspector { order:4; }

/* Power cards panel ordering now implicit (first inserted) */

@media (max-width: 1024px) {
  :root { --gl-side-width: 260px; }
}

/* On mobile, show arena round badge near the header title (left) while keeping header free on desktop */
/* Position AI banner in footer area when screen is narrow or touch device */
@media (max-width: 1024px) {
    #ai-thinking-banner.footer-positioned { 
      position: fixed !important; 
      left: 50% !important; 
      top: auto !important; 
      bottom: 20px !important; 
      right: auto !important;
      transform: translate(-50%,0) !important; 
      z-index: 6700 !important; 
      margin: 0 !important;
      clip: unset !important;
      overflow: visible !important;
      transition:opacity .35s ease, transform .5s cubic-bezier(.19,1,.22,1);
    }
    #ai-thinking-banner.footer-positioned.footer-enter { opacity:0; transform:translate(-50%,15px) scale(.92) !important; }
    #ai-thinking-banner.footer-positioned.footer-enter-active { opacity:1; transform:translate(-50%,0) scale(1) !important; }
    #ai-thinking-banner.footer-positioned.footer-exit { opacity:1; transform:translate(-50%,0) scale(1) !important; }
    #ai-thinking-banner.footer-positioned.footer-exit-active { opacity:0; transform:translate(-50%,10px) scale(.9) !important; }
}

@media (pointer: coarse) and (max-width: 960px) {
  .cmp-arena [data-round-indicator] { position: fixed; top: 10px; left: 10px; transform:none; z-index: 6605; }
  
  /* Ensure header is visible on mobile */
  body.game-active .game-layout-shell .gl-header { opacity: 1 !important; }
  
  /* Ensure header doesn't clip the AI banner */
  .game-layout-shell .gl-header { overflow: visible !important; }
  /* Make header a flex row so banner can sit to right of title without overlapping */
  .game-layout-shell .gl-header { justify-content:flex-start; padding-left:16px; padding-right:16px; }
  .game-layout-shell .gl-header .gl-title { font-size:42px; }
  .game-layout-shell .gl-header .ai-thinking-banner:not(.footer-positioned) { position:static; transform:translateY(-50%); margin-left:16px; font-size:16px; padding:4px 12px; }

  /* Reserve placeholder width to avoid title shift when banner appears */
  .game-layout-shell .gl-header .gl-head-left { min-width:160px; }
  
  /* Vertically align the header round counter label block center (ensured by top:50% translateY(-50%) above) */

  /* Mobile no-scroll policy: prevent page scroll, rely on panel internal scroll */
  html, body { height:100%; overflow:hidden; }
  .game-layout-shell { height:100vh; overflow:hidden; }
  /* Preserve original grid layout; only constrain height */
  .game-layout-shell > .gl-main { height:calc(100vh - var(--gl-header-height)); }
  .game-layout-shell > .gl-main > .gl-left,
  .game-layout-shell > .gl-main > .gl-right { height:100%; max-height:100%; }
  /* Allow only the panel containers to scroll internally */
  .game-layout-shell > .gl-main > .gl-left { overflow:hidden; }
  .game-layout-shell > .gl-main > .gl-right { overflow:hidden; }
  .game-layout-shell > .gl-main > .gl-left > .cmp-power-cards-panel,
  .game-layout-shell > .gl-main > .gl-right > .cmp-monsters-panel { flex:1 1 auto; min-height:0; overflow:auto; }
  /* Hide scrollbars (WebKit) */
  .cmp-power-cards-panel::-webkit-scrollbar,
  .cmp-monsters-panel::-webkit-scrollbar { width:0; height:0; }
  /* Hide scrollbars (Firefox) */
  /* Firefox scrollbar suppression omitted for compatibility; relying on thin default */
  /* Prevent internal panel chrome adding extra spacing */
  .cmp-power-cards-panel.k-panel,
  .cmp-monsters-panel.k-panel { max-height:100%; }
}

/* When overlay is active, ensure the left/right containers don't consume space so center uses full width */
body[data-panels-force-overlay] .game-layout-shell > .gl-main > .gl-left,
body[data-panels-force-overlay] .game-layout-shell > .gl-main > .gl-right {
  width: 0;
  min-width: 0;
  padding: 0;
  margin: 0;
}
/* When panels are in overlay mode, let individual panels size to their content instead of stretching full width */
body[data-panels-force-overlay] .game-layout-shell > .gl-main > .gl-left > *,
body[data-panels-force-overlay] .game-layout-shell > .gl-main > .gl-right > * {
  width: auto;
  max-width: min(360px, calc(100vw - 20px));
}
/* Desktop layout - ensure proper restoration of side panel heights */
@media (min-width: 1101px) {
  .game-layout-shell > .gl-main > .gl-left { 
    flex-direction: column; 
    margin-top: calc(var(--gl-header-height) * -1); 
    padding-top: var(--gl-header-height); 
    height: calc(98vh + var(--gl-header-height)); 
    max-height: calc(98vh + var(--gl-header-height)); 
    order: initial;
  }
  .game-layout-shell > .gl-main > .gl-right { 
    margin-top: calc(var(--gl-header-height) * -1); 
    padding-top: var(--gl-header-height); 
    height: calc(98vh + var(--gl-header-height)); 
    max-height: calc(98vh + var(--gl-header-height)); 
    order: initial;
  }
  .game-layout-shell > .gl-main > .gl-center { order: initial; }
  .game-layout-shell .gl-center-bottom { order: initial; }
}

@media (max-width: 1024px) {
  .game-layout-shell .gl-main { grid-template-columns: 1fr; }
  .game-layout-shell > .gl-main > .gl-left { order:2; flex-direction:row; flex-wrap:wrap; margin-top:0; padding-top:0; height:auto; max-height:none; }
  .game-layout-shell > .gl-main > .gl-right { order:3; margin-top:0; padding-top:0; height:auto; max-height:none; }
  .game-layout-shell > .gl-main > .gl-center { order:1; }
  .game-layout-shell .gl-center-bottom { order:4; }
}