/* ============================================================ menu.css — Main menu portrait collage & chat bubble ============================================================ */ #screen-menu.active{display:block;background:#000;}#menu-bg{position:absolute;top:-80px;left:0;right:0;bottom:0;height:calc(100% + 80px);background-image:url('../assets/menu_background.png');background-size:cover;background-position:center top;z-index:0;}#menu-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom, transparent 0%, transparent 55%, rgba(0,0,0,0.75) 100%);}#menu-portrait-collage{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;}.menu-collage-wrap{position:absolute;bottom:36px;width:min(17.6%, 232px);height:min(88vh, 860px);filter:drop-shadow(0 12px 40px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 24px rgba(0, 80, 220, 0.22));transition:opacity 0.5s ease, transform 0.75s ease-in-out;}.menu-collage-wrap[data-slot="0"]{left:-4%;z-index:1;}.menu-collage-wrap[data-slot="1"]{left:6%;z-index:2;}.menu-collage-wrap[data-slot="2"]{left:16%;z-index:3;}.menu-collage-wrap[data-slot="3"]{left:26%;z-index:5;}.menu-collage-wrap[data-slot="4"]{left:36%;z-index:6;}.menu-collage-wrap[data-slot="5"]{right:36%;z-index:6;}.menu-collage-wrap[data-slot="6"]{right:26%;z-index:5;}.menu-collage-wrap[data-slot="7"]{right:16%;z-index:3;}.menu-collage-wrap[data-slot="8"]{right:6%;z-index:2;}.menu-collage-wrap[data-slot="9"]{right:-4%;z-index:1;}.menu-collage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom center;transition:opacity 0.45s ease, filter 0.45s ease;}#menu-center-panel{position:absolute;left:50%;transform:translateX(-50%);top:24%;z-index:10;display:flex;flex-direction:column;align-items:center;gap:20px;pointer-events:none;white-space:nowrap;}#menu-title-area{position:relative;text-align:center;transition:opacity 0.35s ease;pointer-events:none;}.game-title{font-size:clamp(2.4rem, 5.5vw, 4.8rem);letter-spacing:0.18em;color:#fff;text-shadow:0 0 12px rgba(80, 160, 255, 0.9), 0 0 40px rgba(60, 120, 255, 0.6), 0 0 80px rgba(40, 80, 220, 0.35), 2px 2px 0 rgba(0,0,0,0.8);margin:0;font-family:monospace;text-transform:uppercase;animation:titlePulse 4s ease-in-out infinite;}@keyframes titlePulse{0%, 100%{text-shadow:0 0 12px rgba(80,160,255,0.9), 0 0 40px rgba(60,120,255,0.6), 0 0 80px rgba(40,80,220,0.35), 2px 2px 0 rgba(0,0,0,0.8);}50%{text-shadow:0 0 18px rgba(100,180,255,1.0), 0 0 60px rgba(80,140,255,0.8), 0 0 120px rgba(60,100,240,0.5), 2px 2px 0 rgba(0,0,0,0.8);}}.game-subtitle{font-size:clamp(0.65rem, 1.4vw, 0.95rem);letter-spacing:0.28em;color:#8ab4e8;text-transform:uppercase;margin:8px 0 0;font-family:monospace;text-shadow:0 0 10px rgba(80,140,255,0.6);background:rgba(0, 5, 20, 0.60);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:6px;padding:6px 18px;}#menu-buttons-area{position:relative;text-align:center;transition:opacity 0.35s ease;pointer-events:auto;}#menu-buttons-area::before{content:'';display:block;width:min(380px, 80%);height:1px;background:linear-gradient(to right, transparent, rgba(80,140,255,0.6), rgba(80,140,255,0.9), rgba(80,140,255,0.6), transparent);margin:0 auto 18px;}.menu-buttons{display:flex;flex-direction:column;gap:12px;align-items:center;}#menu-buttons-area .btn-primary{background:rgba(0, 80, 180, 0.88);color:#cce4ff;min-width:180px;}#menu-buttons-area .btn-primary:hover{background:rgba(0, 120, 255, 0.95);color:#fff;}#menu-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:36px;background:rgba(0, 0, 0, 1);border-top:1px solid rgba(40, 80, 140, 0.35);z-index:5;pointer-events:none;}.menu-chat-bubble{position:absolute;background:#f8f8f0;border:3px solid #1a1a1a;border-radius:14px;padding:12px 18px;min-width:180px;max-width:300px;font-family:monospace;font-size:0.80rem;line-height:1.5;color:#111;z-index:25;opacity:0;pointer-events:none;text-align:center;box-shadow:3px 3px 0 #1a1a1a;transition:opacity 0.5s ease;}.menu-chat-bubble.visible{opacity:1;}.menu-chat-speaker{font-weight:bold;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.12em;color:#444;margin-bottom:6px;}.menu-chat-bubble::after{content:'';position:absolute;bottom:calc(-1 * var(--arrow-height, 24px));left:var(--tri-left, 50%);transform:translateX(-50%);width:18px;height:var(--arrow-height, 24px);background:#1a1a1a;clip-path:polygon(0 0, 100% 0, 50% 100%);}.menu-chat-bubble::before{content:'';position:absolute;bottom:calc(-1 * var(--arrow-height, 24px) + 3px);left:var(--tri-left, 50%);transform:translateX(-50%);width:12px;height:calc(var(--arrow-height, 24px) - 7px);background:#f8f8f0;clip-path:polygon(0 0, 100% 0, 50% 100%);z-index:1;}#menu-scanlines{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0, 0, 0, 0.07) 3px, rgba(0, 0, 0, 0.07) 4px );}@media (max-width:700px){.menu-collage-wrap{width:min(29%, 160px);height:min(65vh, 520px);}.menu-collage-wrap[data-slot="0"], .menu-collage-wrap[data-slot="9"]{display:none;}}