/* === Transplanted Enhanced layout.css === */
/* NOTE: This is a verbatim copy (at time of transplant) of the enhanced root css/layout.css. */
/*       Future enhancements must occur ONLY in this file (inside new/). Root file is now frozen. */

/* === Z-INDEX HIERARCHY === */
/* 
 * Z-Index stack (high@keyframes fadeInSimple { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOutSimple { from { opacity:1; } to { opacity:0; } }t to lowest):
 * 10000+ : Splash screen (always highest)
 * 9000-9999 : Winner/end of game modals 
 * 8000-8999 : Modal dialogs (toolbar-launched) + Monster Selection dialog
 * 7000-7999 : Pause overlay (covers area above toolbar)
 * 6000-6999 : Monsters and power cards side panels  
 * 5000-5999 : Main "King of Tokyo" header
 * 4000-4999 : Bottom-ui "table" (cpu-notifications, action-menu, dice-area, toolbar)
 * 3000-3999 : Active player card and round-incrementor
 * 2000-2999 : Reserved for transient overlays/dragging
 * 1000-1999 : Reserved for future use
 * 500-999   : Playing area hover effects and highlights
 * 300-499   : Playing area base content (Tokyo areas, player cards)
 * 100-299   : Background patterns and base elements
 * 1-99      : Document flow and basic positioning
 * 
 * NOTE: Pause overlay stops above toolbar (bottom: 90px) to keep toolbar accessible
 */

*::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; }

/* Hide game container initially */
.game-container { display:none; min-height:100vh; background: linear-gradient(45deg, transparent 25%, rgba(255, 215, 0, 0.1) 25%, rgba(255, 215, 0, 0.1) 50%, transparent 50%, transparent 75%, rgba(255, 140, 0, 0.1) 75%),
		linear-gradient(-45deg, transparent 25%, rgba(255, 69, 0, 0.1) 25%, rgba(255, 69, 0, 0.1) 50%, transparent 50%, transparent 75%, rgba(220, 20, 60, 0.1) 75%),
		linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
	background-size:60px 60px, 80px 80px, 100% 100%; padding:20px; position:relative; border:4px solid #000; border-radius:0; box-shadow:inset 0 0 50px rgba(0,0,0,.8); }
#game-container.show { display:block; }

/* Body Background */
body { background: radial-gradient(circle at 4px 4px, rgba(255,255,255,0.05) 1px, transparent 0),
		linear-gradient(to bottom, transparent 85%, #000 85.5%, #000 88%, #111 88.5%, #111 91%, #000 91.5%, #000 94%, #222 94.5%, #222 97%, #000 97.5%, #000 100%),
		linear-gradient(135deg, #000 0%, #1a1a1a 25%, #2a2a2a 50%, #3a3a3a 75%, #4a4a4a 100%);
	background-size:20px 20px, 100% 100%, 100% 100%; min-height:100vh; position:relative; }
body::before { content:''; position:fixed; top:0; left:0; width:100%; height:100%; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0); background-size:20px 20px; pointer-events:none; z-index:100; }

#game-container { max-width:100vw; height:100vh; margin:0; padding:10px 0; position:relative; z-index:200; overflow:visible; box-sizing:border-box; }

/* Header */
.game-header { background: linear-gradient(135deg, #2c1810 0%, #8b4513 20%, #ff6b00 40%, #ffaa00 60%, #8b4513 80%, #2c1810 100%); padding:15px 20px; border-radius:15px; margin-bottom:15px; display:flex; justify-content:center; align-items:center; box-shadow:8px 8px 0px #000,12px 12px 25px rgba(0,0,0,.5); border:6px solid #000; position:relative; overflow:hidden; background-image: radial-gradient(circle at 3px 3px, rgba(0,0,0,0.1) 1px, transparent 0), linear-gradient(135deg, #2c1810 0%, #8b4513 20%, #ff6b00 40%, #ffaa00 60%, #8b4513 80%, #2c1810 100%); background-size:12px 12px, 100% 100%; }
.active-player-name { font-family:'Bangers',cursive; font-size:2em; font-weight:bold; color:#FFD700; text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,2px 2px 4px rgba(0,0,0,.8); letter-spacing:1px; margin-right:20px; }
.game-header::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: radial-gradient(circle at 30% 20%, rgba(255,200,0,.2) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(255,100,0,.2) 0%, transparent 50%); pointer-events:none; }
.game-header h1 { font-family:'Bangers',cursive; font-size:5em; font-weight:900; color:#FFD700; text-shadow: var(--ts-comic-heavy, -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000, 4px 4px 8px rgba(0,0,0,.8)); letter-spacing:6px; transform:perspective(800px) rotateX(-3deg) rotateY(-2deg) translateX(-100px); margin:0; position:relative; z-index:5000; filter:drop-shadow(8px 8px 0px #000) drop-shadow(10px 10px 15px rgba(0,0,0,.5)); display:inline-block; text-transform:uppercase; }
.game-info { display:flex; flex-direction:column; gap:10px; font-size:1.1em; font-weight:bold; color:#fff; text-shadow:2px 2px 4px rgba(0,0,0,.8); background: linear-gradient(135deg, #2c1810 0%, #8b4513 50%, #ff6b00 100%); padding:15px 20px; border:4px solid #000; border-radius:0; position:absolute; right:20px; top:50%; transform:translateY(-50%) perspective(400px) rotateX(2deg) rotateZ(-1.5deg); z-index:1; box-shadow:6px 6px 0px #000,8px 8px 20px rgba(0,0,0,.4); background-image: radial-gradient(circle at 3px 3px, rgba(0,0,0,0.15) 1px, transparent 0), linear-gradient(135deg, #2c1810 0%, #8b4513 50%, #ff6b00 100%); background-size:12px 12px, 100% 100%; }
#current-player { font-family:'Bangers',cursive; font-size:2.5em; color:#FFD700; text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,4px 4px 8px rgba(0,0,0,.8); letter-spacing:1px; position:absolute; top:50%; left:120px; transform:translateY(-50%); z-index:2; }
/* LEGACY ARENA SELECTOR (DEPRECATED - superseded by .cmp-arena) */
.game-board { display:block; height:calc(100vh - 140px); margin-top:5px; position:relative; padding:0; overflow:visible; }
/* LEGACY ARENA SELECTOR (DEPRECATED) */
.tokyo-area { position:absolute; left:15px; right:450px; top:10px; height:80%; max-width:none; margin:0; overflow:visible; }
.game-actions { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.game-actions > * { pointer-events:auto; }
.game-container .cards-area { position:fixed; left:15px; top:10px; bottom:45px; width:430px; z-index:6000; opacity:1; }
.game-container .players-area { position:fixed; right:15px; top:20px; bottom:15px; width:420px; z-index:6000; overflow:visible; opacity:1; }

/* In new layout overlay mode, hide legacy areas completely to avoid interaction and layout wrap */
body[data-panels-force-overlay] .cards-area,
body[data-panels-force-overlay] .players-area { display:none; }

/* Roll-off Scoreboard */
.rolloff-scoreboard-container { position:fixed; top:45%; left:50%; transform:translate(-50%, -50%); z-index:1000; background:rgba(0,0,0,.95); border:3px solid #FFD700; border-radius:15px; padding:35px; box-shadow:0 0 30px rgba(255,215,0,.5); max-width:1024px; width:auto; min-width:1000px; }
.rolloff-title { text-align:center; color:#FFD700; font-size:36px; font-weight:bold; margin-bottom:25px; text-shadow:2px 2px 4px rgba(0,0,0,.8); }
.rolloff-commentary { text-align:center; color:#000; font-size:22px; font-style:italic; margin-bottom:20px; min-height:30px; padding:12px; background:rgba(255,215,0,0.1); border-radius:8px; border:1px solid rgba(255,215,0,0.3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; box-shadow:none; }
#rolloff-table { width:100%; border-collapse:collapse; margin-top:15px; table-layout:fixed; }
#rolloff-table th { background:rgba(255,215,0,0.2); color:#FFD700; padding:16px 12px; text-align:center; font-size:20px; font-weight:bold; border:1px solid rgba(255,215,0,0.3); }
#rolloff-table td { padding:20px 12px; border:1px solid rgba(255,255,255,0.2); text-align:center; font-size:18px; }
.rolloff-player-info { display:flex; align-items:center; justify-content:flex-start; text-align:left; }
.rolloff-monster-pic { width:50px; height:50px; border-radius:50%; margin-right:15px; border:2px solid #FFD700; }
.rolloff-player-name { color:#000; font-weight:bold; font-size:20px; flex:1; }
.rolloff-dice-display { display:flex; gap:6px; justify-content:center; align-items:center; min-height:50px; max-height:50px; flex-wrap:wrap; width:240px; overflow:hidden; }
/* .mini-die base + attack now provided by util.dice-mini.css; rolling animation retained below */
.mini-die.rolling { animation:shake3D .6s cubic-bezier(0.68,-0.55,0.265,1.55); }
.rolloff-attack-count { color:#FFD700; font-size:24px; font-weight:bold; text-shadow:2px 2px 4px rgba(0,0,0,.8); }
.rolloff-attack-count.highlight { color:#FF4444; animation:pulseEmphasis 1s ease-in-out; }
.roll-button { background:linear-gradient(45deg,#FFD700,#FFA500); border:none; color:#000; padding:10px 20px; border-radius:8px; font-size:16px; font-weight:bold; cursor:pointer; box-shadow:none; transition:all .3s ease; }
.roll-button:hover { background:linear-gradient(45deg,#FFA500,#FFD700); transform:translateY(-2px); box-shadow:none; }
.roll-button:disabled { background:#666; color:#999; cursor:not-allowed; transform:none; box-shadow:none; }
.action-menu.hidden-for-rolloff { display:none; }
@keyframes pulseEmphasis { 0%,100%{transform:scale(1);}50%{transform:scale(1.1);} }

/* Dice overlay */
.bottom-ui-table .dice-area { position:fixed; bottom:110px; left:480px; right:460px; height:120px; z-index:4000; margin:0; opacity:1; }
.bottom-ui-table .dice-area.hidden-until-game-start { display:none; }
.bottom-ui-table .action-menu { position:fixed; bottom:110px; right:380px; width:250px; z-index:4000; margin:0; opacity:1; display:none; }
.bottom-ui-table .action-menu.game-active { display:block; }
.action-menu.cpu-rolling { filter:grayscale(1); transform:scale(.95); transition:filter .3s ease, transform .3s ease, opacity .3s ease; }
.action-menu.cpu-rolling button { cursor:not-allowed; }

.round-indicator-container { position:absolute; top:30px; left:480px; display:flex; align-items:center; gap:10px; z-index:3500; overflow:visible; }
.round-indicator-container .round-label { font-family:'Bangers',cursive; font-size:3em; font-weight:bold; color:#FFD700; text-shadow:-4px -4px 0 #000,4px -4px 0 #000,-4px 4px 0 #000,4px 4px 0 #000,-3px -3px 0 #000,3px -3px 0 #000,-3px 3px 0 #000,3px 3px 0 #000,-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,4px 4px 8px rgba(0,0,0,.8); letter-spacing:1px; transform:translateZ(20px) translateX(-15px); }
.round-indicator { background:#E6C200; border:4px solid #000; border-radius:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; transform-style:preserve-3d; perspective:1000px; }
.round-indicator #round-counter { font-family:'Bangers',cursive; font-size:24px; font-weight:bold; color:#000; transform:translateZ(20px); }
@keyframes roundGlow { 0%{ box-shadow:0 0 20px rgba(255,215,0,.8), inset 0 0 20px rgba(255,255,255,.3);}100%{ box-shadow:0 0 30px rgba(255,215,0,1), inset 0 0 30px rgba(255,255,255,.5);} }
@keyframes roundSpin { 0%{ transform:rotate(0deg) scale(1); opacity:1;}25%{ transform:rotate(180deg) scale(1.2); opacity:.8;}50%{ transform:rotate(360deg) scale(1.4); opacity:.3;}75%{ transform:rotate(540deg) scale(1.2); opacity:.8;}100%{ transform:rotate(720deg) scale(1); opacity:1; } }
.round-indicator.spinning { animation:roundSpin 1.5s ease-in-out; }

/* Draggable */
.draggable { position:fixed; z-index:2000; border:2px solid #333; border-radius:8px; background:rgba(0,0,0,.9); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); cursor:move; transition:box-shadow .2s ease; }
.draggable:hover { box-shadow:0 0 15px rgba(255,255,255,.3); }
.draggable.dragging { opacity:.8; transform:rotate(2deg); box-shadow:0 8px 25px rgba(0,0,0,.6); z-index:2100; }
.dice-area.draggable { padding:10px; }
.dice-area.draggable:not([style*="transform"]) { bottom:80px; left:40%; transform:translateX(-50%); }
.action-menu.draggable { padding:10px; display:flex; gap:10px; flex-wrap:wrap; }
.action-menu.draggable:not([style*="transform"]) { bottom:80px; left:65%; transform:translateX(-50%); }

/* Bottom UI Table */
.bottom-ui-table { position:fixed; bottom:0; left:0; right:0; display:flex; flex-direction:column; justify-content:flex-end; z-index:4000; pointer-events:none; }
.ui-row { display:flex; justify-content:center; align-items:center; width:100%; pointer-events:none; }
.notification-row { min-height:40px; padding:5px 0; justify-content:flex-start; padding-left:20px; }
.cpu-action-notification { background:rgba(255,255,255,.7); color:#000; padding:8px 16px; border-radius:4px; font-weight:bold; text-align:center; max-width:60%; box-shadow:none; border:2px solid #333; font-family:'Comic Neue',cursive; pointer-events:auto; }
.action-row { justify-content:space-between; padding:10px 20px; min-height:80px; }
.action-row .dice-area, .action-row .action-menu { pointer-events:auto; position:relative; }
.toolbar-row { justify-content:center; padding:10px 0 15px 0; min-height:60px; }
.bottom-ui-table .toolbar-row .game-toolbar { pointer-events:auto; position:relative; transform:none; left:auto; bottom:auto; margin-bottom:40px; }

@media (max-width:1200px){ .action-row { padding:10px 15px; } .action-row .dice-area, .action-row .action-menu { max-width:45%; } }
@media (max-width:900px){ .action-row { flex-direction:column; gap:10px; padding:10px; } .action-row .dice-area, .action-row .action-menu { max-width:100%; width:100%; } }
@media (max-width:1024px){ .cards-area.collapsible-panel, .players-area.collapsible-panel { transform:translateX(-100%); } .players-area.collapsible-panel { transform:translateX(100%); } .action-row { padding:10px 5px; } }

.game-paused { filter:grayscale(.3) brightness(.8); }
.game-pause-overlay { position:fixed; top:0; left:0; right:0; bottom:90px; background-color:rgba(128,128,128,.6); display:flex; justify-content:center; align-items:center; z-index:7000; pointer-events:none; }
.game-pause-overlay.hidden { display:none; }
.game-pause-overlay:not(.hidden) { pointer-events:auto; }
.pause-message { background-color:rgba(255,255,255,.95); color:#000; padding:30px 50px; border-radius:8px; font-size:32px; font-weight:bold; font-family:'Comic Neue',cursive; text-align:center; border:3px solid #333; box-shadow:none; }
.game-container.game-paused::before { content:"⏸️ GAME PAUSED"; position:fixed; top:20px; left:50%; transform:translateX(-50%); background:rgba(255,140,0,.95); color:#000; padding:8px 16px; border-radius:4px; font-weight:bold; z-index:7100; box-shadow:none; border:2px solid #333; font-family:'Comic Neue',cursive; font-size:14px; pointer-events:none; }
/* Pause button explicit states (no !important required due to specificity and source order) */
#pause-game-btn.paused { background-color:#4CAF50; border-color:#45a049; }
#pause-game-btn.paused:hover { background-color:#45a049; }

/* === AI LOGIC FLOW REDESIGN === */
.ai-turn-container { background:#f5f5f5; border:3px solid #444; border-radius:12px; margin:15px 0; padding:0; box-shadow:0 4px 8px rgba(0,0,0,.2); overflow:hidden; font-size:16px; color:#333; font-family:Calibri,Arial,sans-serif; }
.ai-turn-header { background:#fff; padding:15px 20px; border-bottom:3px solid #444; display:flex; justify-content:space-between; align-items:center; }
.ai-turn-title h3 { color:#333; margin:0 0 8px 0; font-size:22px; font-weight:bold; font-family:Calibri,Arial,sans-serif; }
.ai-turn-personality { font-size:16px; color:#666; }
.personality-traits { display:flex; flex-direction:column; gap:4px; }
.personality-name { color:#333; font-weight:bold; }
.personality-stats { display:flex; gap:12px; }
.trait-item { font-size:14px; color:#333; }
.ai-turn-player-info { text-align:right; color:#333; }
.ai-player-stats { font-size:16px; margin-bottom:4px; }
.ai-turn-position { font-size:16px; color:#333; }
.ai-turn-summary { background:#f8f9fa; border:1px solid #e0e0e0; padding:10px 20px; border-bottom:1px solid #ddd; }
.ai-turn-stats { display:flex; gap:20px; align-items:center; }
.stat-item { color:#333; font-size:16px; }
.stat-item .roll-count, .stat-item .final-decision, .stat-item .avg-confidence { color:#333; font-weight:bold; margin-left:4px; }
.final-decision.complete { color:#4CAF50; }
.final-decision.rolling { color:#ff9800; }
.ai-turn-rolls { padding:0; }
.ai-roll-entry { background:#fff; border-bottom:2px solid #ddd; padding:15px 20px; }
.ai-roll-entry:last-child { border-bottom:none; }
.ai-roll-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.ai-roll-title { display:flex; align-items:center; gap:12px; }
.roll-number { color:#333; font-weight:bold; font-size:18px; }
.roll-timestamp { color:#666; font-size:14px; }
.decision-badge { padding:6px 14px; border-radius:20px; font-size:14px; font-weight:bold; text-transform:uppercase; border:2px solid; }
.decision-badge.reroll { background:#fff3e0; color:#ff9800; border-color:#ff9800; }
.decision-badge.endroll { background:#e8f5e8; color:#4CAF50; border-color:#4CAF50; }
.ai-logic-die { width:35px; height:35px; border:2px solid #333; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:bold; background:#f0f0f0; box-shadow:2px 2px 4px rgba(0,0,0,.3); color:#333; margin:2px; }
.ai-logic-die.attack { border-color:#FF4444; background:#FF6666; color:#fff; box-shadow:0 0 8px rgba(255,68,68,.6); }
.ai-logic-die.energy { border-color:#B8860B; background:#DAA520; color:#333; box-shadow:0 0 8px rgba(184,134,11,.6); }
.ai-logic-die.heal { border-color:#4CAF50; background:#81C784; color:#fff; box-shadow:0 0 8px rgba(76,175,80,.6); }
.ai-logic-die.vp { border-color:#9C27B0; background:#BA68C8; color:#fff; box-shadow:0 0 8px rgba(156,39,176,.6); }
.ai-logic-die.selected { border-color:#2196F3; background:#64B5F6; box-shadow:0 0 10px rgba(33,150,243,.8); }
.decision-badge.keep, .decision-badge.endroll { background:#4CAF50; color:#fff; }
.ai-roll-dice { margin:12px 0; }
.dice-outcome { margin-bottom:8px; }
.dice-outcome strong, .dice-kept strong { color:#333; font-size:16px; }
.dice-kept { font-size:16px; color:#333; }
.kept-die { display:inline-block; margin-right:4px; color:#4CAF50; font-weight:bold; font-size:16px; }
.ai-roll-analysis { margin-top:15px; }
.ai-reasoning { margin-bottom:15px; }
.ai-reasoning strong { color:#333; font-size:16px; }
.ai-reasoning p { color:#333; margin:4px 0; font-size:15px; line-height:1.4; }
.ai-probability-analysis, .ai-strategic-analysis { background:#fff; border:2px solid #ddd; border-radius:6px; padding:12px; margin:15px 0; }
.ai-probability-analysis strong, .ai-strategic-analysis strong { color:#333; font-size:16px; }
.probability-breakdown { margin-top:8px; }
.current-value { color:#333; font-size:15px; margin-bottom:8px; }
.improvement-chances { display:flex; flex-direction:column; gap:6px; }
.improvement-item { display:flex; align-items:center; gap:8px; font-size:15px; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:4px; padding:6px 8px; }
.improvement-type { color:#333; min-width:120px; font-size:15px; }
.improvement-probability { color:#333; font-weight:bold; min-width:35px; font-size:15px; }
.probability-bar { flex:1; height:14px; background:#e0e0e0; border:2px solid #ccc; border-radius:4px; overflow:hidden; max-width:100px; }
.probability-fill { height:100%; transition:width .3s ease; }
.probability-low { background:#f44336; }
.probability-medium { background:#ff9800; }
.probability-high { background:#4CAF50; }
.strategic-points { list-style:none; padding:0; margin:8px 0; }
.strategic-points li { color:#333; font-size:15px; margin:4px 0; padding:6px 8px; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:4px; line-height:1.3; }
.ai-confidence-meter { margin-top:15px; display:flex; align-items:center; gap:12px; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:4px; padding:8px; }
.ai-confidence-meter strong { color:#333; font-size:16px; min-width:80px; }
.confidence-bar { flex:1; height:14px; background:#e0e0e0; border:2px solid #ccc; border-radius:6px; overflow:hidden; max-width:150px; }
.confidence-fill { height:100%; transition:width .3s ease; }
.confidence-low { background:#f44336; }
.confidence-medium { background:#ff9800; }
.confidence-high { background:#4CAF50; }
.confidence-text { color:#333; font-weight:bold; font-size:15px; min-width:35px; }
/* AI log content typography: increase specificity via container scoping to avoid !important */
#ai-log-content, #ai-log-content * { font-family:Calibri,Arial,sans-serif; }
#ai-log-content { font-size:16px; line-height:1.4; }
#ai-log-content .ai-section-title { color:#333; font-size:16px; font-weight:bold; margin:8px 0; }
#ai-log-content .ai-text-primary { color:#333; font-size:15px; }
#ai-log-content .ai-text-secondary { color:#666; font-size:15px; }
#ai-log-content .ai-text-accent { color:#333; font-size:15px; font-weight:bold; }
#ai-log-content .ai-reasoning-text { color:#333; font-size:15px; line-height:1.4; margin:4px 0; }
#ai-log-content .ai-metric-value { color:#333; font-weight:bold; font-size:15px; }
@media (max-width:1024px){ .ai-turn-header { flex-direction:column; align-items:flex-start; gap:10px; } .ai-turn-player-info { text-align:left; } .ai-turn-stats { flex-wrap:wrap; gap:10px; } .ai-roll-header { flex-direction:column; align-items:flex-start; gap:8px; } .improvement-item { flex-wrap:wrap; } .ai-confidence-meter { flex-wrap:wrap; } }
.center-notification { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:6500; background:rgba(255,255,255,.9); color:#333; padding:20px 30px; border-radius:8px; border:2px solid #333; font-size:18px; font-weight:normal; text-align:center; opacity:0; visibility:hidden; transition:all .3s ease; max-width:80%; word-wrap:break-word; }
.center-notification.visible { opacity:1; visibility:visible; }
/* Game Start Toast Enhancements */
.game-start-toast { 
	position: fixed;
	inset: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: none;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	transition: none;
	background: radial-gradient(circle at 30% 25%, rgba(255,215,0,0.25), rgba(0,0,0,0.95) 60%) , linear-gradient(145deg,#1d1f21,#101112 65%);
	color:#FFD700; 
	border: none;
	border-radius: 0;
	padding: 20px; 
	box-shadow: none;
	font-family:'Bangers',cursive;
	letter-spacing:2px;
	overflow: hidden;
	z-index:9000;
	display: flex;
	align-items: center;
	justify-content: center;
	--gst-accent:#ffcf33;
	--gst-accent-glow:rgba(255,207,51,0.8);
	--gst-pulse:rgba(255,160,0,0.55);
	animation: gstEnter .65s cubic-bezier(.22,1.4,.32,1) forwards;
}
.game-start-toast.dismiss { animation: gstExit .5s ease forwards; }
.game-start-toast.exploding { 
	/* Keep z-index high during explosion animation, JS will lower it near the end */
	animation: gstExplode 0.8s cubic-bezier(.25,.46,.45,.94) forwards;
}
.game-start-toast .gst-inner { 
	position:relative; 
	z-index:2; 
	display:flex; 
	flex-direction:column; 
	align-items:center; 
	justify-content:center;
	gap:10px; 
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	padding: 20px;
	box-sizing: border-box;
}
.game-start-toast .gst-icon-wrap { position:relative; width:84px; height:84px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 40% 35%, #ffb300, #ff6b00); border:3px solid #000; border-radius:50%; box-shadow:0 0 0 2px #222,0 0 18px rgba(255,170,0,.5); /* animation removed */ }
.game-start-toast .gst-icon { font-size:46px; filter:drop-shadow(0 0 6px rgba(0,0,0,.8)); transform:translateY(2px); }
.game-start-toast .gst-flare { position:absolute; inset:-6px; background:conic-gradient(from 0deg, rgba(255,255,255,0.0) 0deg, rgba(255,215,0,0.55) 35deg, rgba(255,140,0,0.0) 140deg, rgba(255,255,255,0) 360deg); mix-blend-mode:screen; filter:blur(6px) brightness(1.1); /* spin removed */ border-radius:inherit; pointer-events:none; }
/* Revised per request: white font with black drop shadow */
.game-start-toast .gst-title { 
	margin:4px 0 0; 
	font-size:56px; 
	line-height:.9; 
	letter-spacing:4px; 
	color:#fff; /* solid white text */
	background:none; 
	-webkit-background-clip:initial; 
	background-clip:initial; 
	text-shadow:0 0 2px rgba(0,0,0,.9), 0 2px 4px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.75);
	filter:none;
	animation: none; /* remove prior glow to keep crisp white per spec */
	text-align: center;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.game-start-toast .gst-sub { 
	font-size:20px; 
	letter-spacing:1px; 
	color:#fff; 
	text-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 6px rgba(0,0,0,.6);
	animation: gstSubFade .9s ease .2s both; 
	text-align: center;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.game-start-toast .gst-energy-bar { position:relative; width:240px; height:12px; background:linear-gradient(180deg,#151515,#202224); border:2px solid #000; border-radius:8px; overflow:hidden; box-shadow:0 0 0 1px #333 inset,0 0 8px rgba(255,200,0,.25); margin-top:4px; }
.game-start-toast .gst-energy-fill { position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#ff9c00,#ffcf33,#ffe8a3); box-shadow:0 0 8px rgba(255,180,0,.6),0 0 16px rgba(255,140,0,.35); animation: gstEnergyFill 2s cubic-bezier(.55,.12,.25,1) .25s forwards; }

/* Particle sparks */
.game-start-toast::before, .game-start-toast::after { content:""; position:absolute; inset:0; pointer-events:none; background-repeat:no-repeat; mix-blend-mode:screen; opacity:.75; }
.game-start-toast::before { background-image:radial-gradient(circle at 20% 30%, rgba(255,200,0,.9) 0, rgba(255,200,0,0) 60%), radial-gradient(circle at 80% 65%, rgba(255,120,0,.85) 0, rgba(255,120,0,0) 55%); filter:blur(12px); animation: gstSparks 3.8s ease-in-out infinite; }
.game-start-toast::after { background-image:radial-gradient(circle at 35% 70%, rgba(255,255,255,.35) 0, rgba(255,255,255,0) 55%), radial-gradient(circle at 70% 25%, rgba(255,255,255,.25) 0, rgba(255,255,255,0) 55%); filter:blur(4px); animation: gstSparks2 4.4s ease-in-out infinite; }

@keyframes gstEnter { 0% { opacity:0; } 100% { opacity:1; } }
@keyframes gstExit { 0% { opacity:1; } 100% { opacity:0; } }
/* Removed icon pulse and flare spin animations */
@keyframes gstTitleGlow { 0%,100% { filter:drop-shadow(0 0 6px rgba(255,200,0,.65)); } 50% { filter:drop-shadow(0 0 14px rgba(255,210,60,.9)); } }
@keyframes gstSubFade { 0% { opacity:0; transform:translateY(8px);} 100% { opacity:1; transform:translateY(0);} }
@keyframes gstEnergyFill { 0% { width:0%; } 25% { width:35%; } 55% { width:78%; } 100% { width:100%; } }
@keyframes gstSparks { 0%,100% { opacity:.7; transform:scale(1);} 50% { opacity:.35; transform:scale(1.15);} }
@keyframes gstSparks2 { 0%,100% { opacity:.45; transform:scale(1);} 50% { opacity:.8; transform:scale(1.05);} }

/* Mobile adjustments - ensure content fits on small screens */
@media (max-width: 767px) {
	.game-start-toast .gst-icon-wrap { width: 70px; height: 70px; }
	.game-start-toast .gst-icon { font-size: 38px; }
	.game-start-toast .gst-title { font-size: 48px; letter-spacing: 2px; }
	.game-start-toast .gst-sub { font-size: 18px; }
	.game-start-toast .gst-energy-bar { width: 200px; height: 10px; }
	.game-start-toast .gst-inner { gap: 8px; padding: 15px; }
}

/* Responsive scaling for larger screens */
@media (min-width: 1025px) {
	.game-start-toast .gst-icon-wrap { width: 120px; height: 120px; }
	.game-start-toast .gst-icon { font-size: 66px; }
	.game-start-toast .gst-title { font-size: 80px; }
	.game-start-toast .gst-sub { font-size: 28px; }
	.game-start-toast .gst-energy-bar { width: 320px; height: 16px; }
}

@media (min-width: 1024px) {
	.game-start-toast .gst-icon-wrap { width: 160px; height: 160px; border-width: 4px; }
	.game-start-toast .gst-icon { font-size: 88px; }
	.game-start-toast .gst-title { font-size: 110px; letter-spacing: 6px; }
	.game-start-toast .gst-sub { font-size: 36px; letter-spacing: 2px; }
	.game-start-toast .gst-energy-bar { width: 420px; height: 20px; border-width: 3px; }
}

@media (min-width: 1440px) {
	.game-start-toast .gst-icon-wrap { width: 200px; height: 200px; border-width: 5px; }
	.game-start-toast .gst-icon { font-size: 110px; }
	.game-start-toast .gst-title { font-size: 140px; letter-spacing: 8px; }
	.game-start-toast .gst-sub { font-size: 44px; letter-spacing: 3px; }
	.game-start-toast .gst-energy-bar { width: 520px; height: 24px; border-width: 4px; border-radius: 12px; }
}

/* Reduced motion preference: simplify animations */
@media (prefers-reduced-motion: reduce) {
	.game-start-toast { animation: fadeInSimple .4s ease forwards; }
	.game-start-toast.dismiss { animation: fadeOutSimple .35s ease forwards; }
	.game-start-toast .gst-icon-wrap, .game-start-toast::before, .game-start-toast::after, .game-start-toast .gst-energy-fill { animation:none !important; }
	.game-start-toast .gst-title { animation:none; }
}
@keyframes fadeInSimple { from { opacity:0; transform:translate(-50%, -50%) scale(.92);} to { opacity:1; transform:translate(-50%, -50%) scale(1);} }
@keyframes fadeOutSimple { from { opacity:1; transform:translate(-50%, -50%) scale(1);} to { opacity:0; transform:translate(-50%, -50%) scale(.94);} }

/* Progressive shake phases and explosion finale */
.game-start-toast[data-shake-phase="1"] { animation: gstShake1 .25s linear infinite; }
.game-start-toast[data-shake-phase="2"] { animation: gstShake2 .2s linear infinite; }
.game-start-toast[data-shake-phase="3"] { animation: gstShake3 .14s linear infinite; }
.game-start-toast[data-shake-phase="4"] { animation: gstShake4 .1s linear infinite; }
.game-start-toast.exploding { animation: gstExplode 1.45s cubic-bezier(.55,.08,.42,1.05) forwards; }

@keyframes gstShake1 { 0%,100% { transform:translate(0, 0) rotate(0deg); } 25% { transform:translate(-2px, 1px) rotate(-0.6deg); } 50% { transform:translate(2px, -1px) rotate(0.6deg); } 75% { transform:translate(-1px, -1px) rotate(-0.4deg); } }
@keyframes gstShake2 { 0%,100% { transform:translate(0, 0) rotate(0deg); } 20% { transform:translate(-3px, 2px) rotate(-1deg); } 40% { transform:translate(3px, -2px) rotate(1deg); } 60% { transform:translate(-2px, 1px) rotate(-0.8deg); } 80% { transform:translate(2px, -1px) rotate(0.8deg); } }
@keyframes gstShake3 { 0%,100% { transform:translate(0, 0) rotate(0deg); } 20% { transform:translate(-4px, 2px) rotate(-1.4deg); } 40% { transform:translate(4px, -2px) rotate(1.4deg); } 60% { transform:translate(-3px, 1px) rotate(-1deg); } 80% { transform:translate(3px, -1px) rotate(1deg); } }
@keyframes gstShake4 { 0%,100% { transform:translate(0, 0) rotate(0deg); } 10% { transform:translate(-5px, 2px) rotate(-2deg); } 30% { transform:translate(5px, -2px) rotate(2deg); } 50% { transform:translate(-4px, 1px) rotate(-1.6deg); } 70% { transform:translate(4px, -1px) rotate(1.6deg); } 90% { transform:translate(-3px, 1px) rotate(-1.2deg); } }
@keyframes gstExplode { 
	0% { transform:scale(1); opacity:1; filter:none; }
	22% { transform:scale(1.09); filter:brightness(1.16); }
	44% { transform:scale(0.99); box-shadow:0 0 22px rgba(255,255,255,.5),0 0 90px rgba(255,170,0,.48); }
	60% { transform:scale(1.32); opacity:.98; filter:brightness(1.42) contrast(1.18); }
	72% { transform:scale(1.02) rotate(2deg); opacity:.78; filter:blur(.4px) brightness(1.36); }
	84% { transform:scale(.78) rotate(5deg); opacity:.54; filter:blur(1.2px) brightness(1.34); }
	92% { transform:scale(.52) rotate(8deg); opacity:.3; filter:blur(2.2px) brightness(1.36); }
	100% { transform:scale(.26) rotate(11deg); opacity:0; filter:blur(3.8px) brightness(1.42); }
}

/* Particle burst elements (spawned via JS at explosion) */
.game-start-toast .gst-particle { position:absolute; top:50%; left:50%; width:7px; height:7px; background:hsl(var(--h,42) 100% 55%); border-radius:50%; pointer-events:none; box-shadow:0 0 6px rgba(255,180,0,.85), 0 0 14px rgba(255,150,0,.55); opacity:0; animation: gstParticle 1.25s cubic-bezier(.55,.1,.48,1) forwards; transform:translate(-50%, -50%) scale(.65); }
.game-start-toast .gst-particle[data-variant="2"] { width:5px; height:5px; filter:brightness(1.2) saturate(1.2); animation-duration:1.35s; }
.game-start-toast .gst-particle[data-variant="3"] { width:9px; height:9px; box-shadow:0 0 8px rgba(255,210,60,.9),0 0 18px rgba(255,170,0,.5); animation-duration:1.42s; }
/* Spark (long-travel) variant */
.game-start-toast .gst-particle[data-spark="1"] { width:4px; height:14px; border-radius:40%; transform:translate(-50%, -50%) rotate(var(--ang,0deg)) scale(.7); background:linear-gradient(180deg, hsl(var(--h,42) 100% 65%), hsl(var(--h,42) 100% 45%)); box-shadow:0 0 10px rgba(255,200,60,.85), 0 0 18px rgba(255,160,0,.55); animation: gstParticleSpark 1.6s cubic-bezier(.55,.1,.48,1) forwards; opacity:0; }
@keyframes gstParticle { 0% { opacity:1; transform:translate(-50%, -50%) scale(.65); } 58% { opacity:1; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.55); } 82% { opacity:.85; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.32); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px))) scale(.15); filter:blur(2.3px) brightness(1.45); } }
@keyframes gstParticleSpark { 0% { opacity:1; transform:translate(-50%, -50%) rotate(var(--ang,0deg)) scale(.7); } 55% { opacity:1; transform:translate(calc(-50% + var(--dx2,0px)), calc(-50% + var(--dy2,0px))) rotate(var(--ang,0deg)) scale(.58); } 78% { opacity:.75; transform:translate(calc(-50% + var(--dx2,0px)), calc(-50% + var(--dy2,0px))) rotate(var(--ang,0deg)) scale(.38); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx2,0px)), calc(-50% + var(--dy2,0px))) rotate(var(--ang,0deg)) scale(.28); filter:blur(3.2px) brightness(1.55); } }

@media (prefers-reduced-motion: reduce) { .game-start-toast .gst-particle { display:none; animation:none !important; } }

/* Shockwave ring (optional) */
.game-start-toast .gst-shockwave { position:absolute; top:50%; left:50%; width:40px; height:40px; border:4px solid rgba(255,210,60,.85); border-radius:50%; transform:translate(-50%, -50%) scale(.2); opacity:0; pointer-events:none; mix-blend-mode:screen; animation: gstShockwave 1.2s ease-out forwards; box-shadow:0 0 12px rgba(255,200,50,.8), 0 0 28px rgba(255,160,0,.5); }
@keyframes gstShockwave { 0% { transform:translate(-50%, -50%) scale(.2); opacity:.75; filter:blur(0); } 40% { opacity:.9; } 70% { opacity:.4; } 100% { transform:translate(-50%, -50%) scale(5.5); opacity:0; filter:blur(2px); } }

/* Color band variation (applies subtle hue cycling) */
/* Apply hue cycle to inner wrapper so root can keep shake/explosion animations */
.game-start-toast[data-color-band="pulse"] .gst-inner { animation: gstHueCycle 5.5s linear infinite; }
@keyframes gstHueCycle { 0% { filter:hue-rotate(0deg); } 50% { filter:hue-rotate(32deg) saturate(1.15); } 100% { filter:hue-rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .game-start-toast[data-color-band="pulse"] { animation: fadeInSimple .4s ease forwards; filter:none; } }

/* End of transplanted layout.css */

/* --- Panel fallback styles for rewrite components (candidate for removal after full migration) --- */
.players-area.collapsible-panel, .cards-area.collapsible-panel { background:rgba(0,0,0,.85); border:2px solid #222; border-radius:4px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.players-area.collapsible-panel .panel-header, .cards-area.collapsible-panel .panel-header { position:relative; -webkit-user-select:none; user-select:none; }
.players-area.collapsible-panel .toggle-arrow, .cards-area.collapsible-panel .toggle-arrow { display:inline-block; transition:transform .25s ease; }
.players-area.collapsible-panel.collapsed .toggle-arrow, .cards-area.collapsible-panel.collapsed .toggle-arrow { transform:rotate(-90deg); }
.players-area .panel-header, .cards-area .panel-header { font-family:'Bangers',cursive; font-size:1.1rem; letter-spacing:1px; padding:8px 12px; margin:0; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
.players-area .panel-content, .cards-area .panel-content { padding:6px 10px 10px; max-height:60vh; overflow:auto; }
.players-area.collapsed .panel-content, .cards-area.collapsed .panel-content { display:none; }

/* --- Enhanced full-panel collapse with vertical header text (legacy parity) --- */
.monsters-panel.collapsible-panel { transition:width .3s ease, padding .3s ease; }
.card-shop-panel.collapsible-panel { transition:width .3s ease, padding .3s ease; }

/* Base explicit widths so animation has a start/end target (may be overridden by responsive rules) */
.monsters-panel.collapsible-panel:not(.monsters-collapsed) { width:300px; }
.card-shop-panel.collapsible-panel:not(.cards-collapsed) { width:320px; }

/* Collapsed states shrink panel and hide content visually */
.monsters-panel.collapsible-panel.monsters-collapsed { width:60px; padding:15px 10px; overflow:hidden; }
.card-shop-panel.collapsible-panel.cards-collapsed { width:60px; padding:15px 10px; overflow:hidden; }

/* Rotate header text vertically when collapsed (mirrors legacy rotate rules) */
.monsters-panel.monsters-collapsed .panel-header .header-text { transform:rotate(-90deg) translateX(-30px); transform-origin:center; white-space:nowrap; margin-top:20px; display:inline-block; }
.card-shop-panel.cards-collapsed .panel-header .header-text { transform:rotate(90deg) translateX(30px); transform-origin:center; white-space:nowrap; margin-top:20px; display:inline-block; }

/* Ensure arrow always visible when collapsed */
.monsters-panel.monsters-collapsed .toggle-arrow, .card-shop-panel.cards-collapsed .toggle-arrow { opacity:1; }

/* Hide panel content via zero sizing for smoother transitions */
.monsters-panel.monsters-collapsed .panel-content, .card-shop-panel.cards-collapsed .panel-content { width:0; height:0; opacity:0; margin:0; padding:0; overflow:hidden; }

/* Provide smooth fade/size transition for panel content (when expanding) */
.monsters-panel .panel-content, .card-shop-panel .panel-content { transition:opacity .25s ease, width .25s ease, height .25s ease; }

/* Draggable visual feedback */
.monsters-panel[data-draggable="true"], .card-shop-panel[data-draggable="true"] { cursor:move; }
.players-area .player-card { display:flex; gap:6px; font-size:.8rem; padding:4px 6px; border-bottom:1px solid rgba(255,255,255,.08); color:#fff; font-family:Arial,sans-serif; }
.players-area .player-card:last-child { border-bottom:none; }
.players-area .player-card .tokyo { color:#FFD700; font-weight:bold; }

/* Fallback arena visuals (rewrite) */
.cmp-arena.game-board { position:relative; min-height:60vh; border:2px solid #222; background:rgba(0,0,0,.4); box-shadow:0 0 20px rgba(0,0,0,.6) inset; }
.cmp-arena .tokyo-area { position:absolute; top:20px; left:50%; transform:translateX(-50%); width:60%; min-height:300px; display:flex; gap:40px; justify-content:center; }
/* Responsive scaling for Tokyo tiles: scale with viewport while preserving min legibility */
.cmp-arena .tokyo-bay, .cmp-arena .tokyo-city {
	flex:1 1 auto;
	background:rgba(0,0,0,.55);
	border:2px solid #333; padding:12px; border-radius:8px; text-align:center;
	--tokyo-base-min: 200px;
	--tokyo-base-max: 380px;
	width:clamp(var(--tokyo-base-min), 24vw, var(--tokyo-base-max));
	min-height:clamp(200px, 30vh, 420px);
	display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:flex-start;
	transition:width .35s ease, min-height .35s ease, padding .25s ease;
}
/* Slightly reduce gap on narrower viewports */
@media (max-width: 1024px) {
	.cmp-arena .tokyo-area { gap:28px; width:72%; }
}
@media (max-width: 1024px) {
	.cmp-arena .tokyo-area { gap:20px; width:80%; }
	.cmp-arena .tokyo-bay, .cmp-arena .tokyo-city { width:clamp(160px, 34vw, 300px); min-height:clamp(150px, 30vh, 300px); }
}
@media (max-width: 880px) {
	.cmp-arena .tokyo-area { flex-wrap:wrap; width:94%; position:static; transform:none; }
	.cmp-arena .tokyo-bay, .cmp-arena .tokyo-city { flex:1 1 240px; width:clamp(200px, 44vw, 280px); }
}
.cmp-arena .monster-slot { height:140px; border:2px dashed #555; border-radius:4px; margin-top:10px; }
.cmp-arena .round-indicator-container { position:absolute; top:-10px; right:-120px; }

/* Action Menu & Toolbar (rewrite) */
.cmp-action-menu.action-menu { 
  position: fixed; 
  bottom: 140px; 
  /* Align left edge with toolbar's left edge using similar centering calculation */
  /* Toolbar is at left:50% translateX(-50%), so we calculate from center minus half toolbar width */
  left: 50%; 
  transform: translateX(-50%);
  /* Shift to left to align with toolbar's left edge - toolbar has ~12 buttons * 46px + gaps ~10px = ~650px width */
  /* Adjusted to align action menu left edge with toolbar left edge */
  margin-left: -305px; /* Approximate: shifts left from center to align with toolbar start */
  display: flex; 
  gap: 8px; 
  background: rgba(0,0,0,.85); 
  padding: 10px 14px; 
  border: 2px solid #333; 
  border-radius: 8px; 
  box-shadow: 0 4px 18px rgba(0,0,0,.6); 
}

/* Hide desktop action menu in mobile view */
@media (max-width: 1024px), (pointer: coarse) {
  .cmp-action-menu.action-menu { display: none !important; }
}

.cmp-action-menu.action-menu button { font-family:'Bangers',cursive; letter-spacing:1px; }
.cmp-toolbar.game-toolbar { position:fixed; bottom:60px; left:50%; transform:translateX(-50%); display:flex; gap:10px; background:rgba(0,0,0,.85); padding:8px 14px; border:2px solid #333; border-radius:8px; box-shadow:0 4px 18px rgba(0,0,0,.6); }
/* Legacy toolbar button styles removed - now handled by components.toolbar.css */
/* .cmp-toolbar .toolbar-btn { font-size:20px; line-height:1; background:transparent; border:none; cursor:pointer; color:#ddd; padding:4px 8px; } */
/* .cmp-toolbar .toolbar-btn:hover { color:#fff; text-shadow:0 0 6px rgba(255,255,255,.6); } */
.tokyo-occupant { display:flex; flex-direction:column; gap:2px; font-size:.75rem; background:rgba(0,0,0,.6); border:1px solid #444; padding:4px 6px; border-radius:4px; color:#eee; }
.slot-empty { font-size:.7rem; color:#777; font-style:italic; }

/* Removed obsolete legacy dice tray styles (now fully component-scoped) */

/* Hide dice tray under splash (splash sets ui.splash.visible true) */
body.splash-visible .cmp-dice-tray { visibility:hidden; opacity:0; transition:opacity .3s ease; }
body:not(.splash-visible) .cmp-dice-tray { visibility:visible; opacity:1; }
/* Fully hide underlying layout content while splash visible to prevent early peek */
/* Completely hide game layout (not just opacity) until game-active class set (after player selection + first player decided) */
/* Legacy gating (retained for compatibility) */
body:not(.game-active) .game-layout-shell { visibility:hidden; opacity:0; pointer-events:none; }
body.game-active .game-layout-shell { visibility:visible; opacity:1; transition: opacity .45s ease; }
/* New gating: prefer .game-ready (stricter) – added once >=2 players chosen & RFF resolved */
body:not(.game-ready) .game-layout-shell .in-game-panel,
body:not(.game-ready) .cmp-arena,
body:not(.game-ready) .power-card-shop,
body:not(.game-ready) .card-shop-panel,
body:not(.game-ready) .players-area,
body:not(.game-ready) .cmp-player-profile-cards,
body:not(.game-ready) .cmp-action-menu,
body:not(.game-ready) .cmp-dice-tray,
body:not(.game-ready) .cmp-toolbar,
body:not(.game-ready) .round-indicator-container,
body:not(.game-ready) .rolloff-scoreboard-container:not(.is-active) /* scoreboard only during RFF */ {
	visibility:hidden !important; /* stylelint-disable-line declaration-no-important */
	opacity:0 !important; /* stylelint-disable-line declaration-no-important */
	pointer-events:none !important; /* stylelint-disable-line declaration-no-important */
}
/* Standalone player profile cards container until game ready (if mounted early) */
body:not(.game-ready) .cmp-player-profile-cards { visibility:hidden !important; opacity:0 !important; }
/* When game-ready (post gating), also add game-active for legacy selectors if absent */
body.game-ready .game-layout-shell { visibility:visible; opacity:1; transition: opacity .45s ease; }
/* Keep legacy splash blur (redundant now but retained for transition aesthetics) */
body.splash-visible .game-layout-shell > .gl-main,
body.splash-visible .game-layout-shell > .gl-footer,
body.splash-visible .game-layout-shell > .gl-header #ai-thinking-banner { opacity:0; filter:blur(2px); pointer-events:none; }
body.splash-visible .game-layout-shell > .gl-header { opacity:0; pointer-events:none; }
body.game-active:not(.splash-visible) .game-layout-shell > .gl-main,
body.game-active:not(.splash-visible) .game-layout-shell > .gl-footer,
body.game-active:not(.splash-visible) .game-layout-shell > .gl-header { opacity:1; filter:none; pointer-events:auto; transition: opacity .45s ease, filter .45s ease; }

/* Post-splash blackout overlay (persists until Roll For First resolved) */
.post-splash-blackout { position:fixed; inset:0; background:#000; opacity:1; z-index:7000; transition: opacity .5s ease; pointer-events:auto; }
.post-splash-blackout.is-hidden { opacity:0; pointer-events:none; visibility:hidden; z-index:-1; }

/* Unified global blackout overlay (ref-counted) */
.global-blackout-overlay { position:fixed; inset:0; background:rgba(0,0,0,.78); opacity:0; pointer-events:none; z-index:8200; transition:opacity .3s ease; }
.global-blackout-overlay.is-active { opacity:1; pointer-events:auto; }

/* Player profile cards rail (basic) - detailed styles in components.player-profile-card.css */
.cmp-player-profile-cards { position:fixed; left:50px; top:120px; display:flex; flex-direction:column; gap:12px; z-index:3000; }