/* style.css */
@font-face { font-family: 'Press Start 2P'; src: url('./PressStart2P-Regular.ttf') format('truetype'); font-display: swap; }
* { box-sizing: border-box; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body, html { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #202020; overflow: hidden; font-family: sans-serif; overscroll-behavior: none;}
#start-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: rgba(0,0,0,0.92); display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; overflow-y: auto; }
h2 { font-size: 32px; margin: 10px 0 5px 0; line-height: 1.2; background: linear-gradient(180deg, #ffeb3b 0%, #f44336 100%); background-clip: text; -webkit-background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0px #5d1c15); font-weight: 900; letter-spacing: 2px; flex-shrink: 0; }
.version-text { color: #888; font-size: 12px; font-family: monospace; margin-bottom: 15px; letter-spacing: 1px; flex-shrink: 0; }
.start-content-layout { display: flex; flex-direction: column; align-items: center; width: 90%; max-width: 800px; transition: all 0.3s; }
.layout-column { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
#netplay-area { background: #333; border-radius: 10px; border: 1px solid #555; width: 100%; max-width: 320px; margin-bottom: 20px; padding: 5px 15px 15px 15px; margin-inline: 0; min-width: 0; }
#netplay-area legend { color: #ddd; font-size: 12px; font-weight: bold; padding: 0 8px; margin-left: 10px; }
@media (orientation: landscape) and (max-height: 600px) { .start-content-layout { flex-direction: row; align-items: flex-start; justify-content: center; gap: 40px; } #netplay-area { margin-bottom: 0; } .layout-column { width: auto; } }
.net-btn { background: #304ffe; color: #fff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-size: 14px; margin: 5px; transition: transform 0.1s; }
.net-btn:active { transform: scale(0.95); }
.net-input { padding: 8px; border-radius: 5px; border: 1px solid #666; background: #222; color: #fff; width: 140px; text-align: center; font-size: 16px; letter-spacing: 2px; user-select: text; -webkit-user-select: text; }
#my-peer-id { color: #2ecc71; font-weight: bold; font-family: monospace; user-select: text; -webkit-user-select: text; margin-top: 5px; display: block; font-size: 24px; letter-spacing: 5px; background: #000; padding: 5px; border-radius: 5px; width: fit-content; margin: 10px auto; }
#rom-select { padding: 12px; font-size: 16px; margin-bottom: 25px; border-radius: 8px; background: #eee; color: #333; border: 3px solid #c0392b; width: 280px; text-align: center; font-weight: bold; }
#resume-area { display: none; flex-direction: column; align-items: center; margin-bottom: 25px; width: 100%; }
.resume-title { color: #2ecc71; font-weight: bold; font-size: 18px; margin-bottom: 10px; text-shadow: 0 2px 2px #000; }
.resume-file { color: #fff; font-size: 16px; font-weight: bold; margin-bottom: 20px; border-bottom: 1px dashed #666; padding-bottom: 5px; }
.btn-discard { background: transparent; border: 1px solid #666; color: #888; padding: 8px 20px; border-radius: 20px; margin-top: 15px; font-size: 12px; cursor: pointer; }
#start-btn { padding: 15px 40px; font-size: 18px; background: #c0392b; color: #fff; border: none; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 0 #922b21; font-family: 'Press Start 2P', sans-serif; transition: all 0.2s; }
#start-btn.resume-mode { background: #27ae60; box-shadow: 0 6px 0 #1e8449; margin-bottom: 10px; }
#start-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #922b21; }
#start-btn:disabled { background: #555; box-shadow: none; cursor: not-allowed; }
#loading-msg { color:#888; font-size:12px; margin-top:20px; font-family: monospace; min-height: 1.2em; }
.pc-tips { position: absolute; bottom: 10px; font-size: 11px; color: #aaa; background: rgba(0,0,0,0.8); padding: 12px 20px; border-radius: 8px; line-height: 1.6; text-align: center; border: 1px solid #444; width: 90%; pointer-events: none; }
.tips-header { font-weight: bold; color: #fff; margin-bottom: 5px; font-size: 12px; display: block; }
.tip-row { display: block; margin-bottom: 2px; }
#custom-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); backdrop-filter: blur(3px); z-index: 9999; display: none; justify-content: center; align-items: center; }
.modal-box { background: #2c3e50; width: 300px; padding: 25px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); text-align: center; border: 2px solid #34495e; animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes modalPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-msg { color: #ecf0f1; font-size: 16px; margin-bottom: 25px; line-height: 1.5; font-weight: bold; }
.modal-btns { display: flex; justify-content: center; gap: 15px; }
.modal-btn { padding: 10px 25px; border-radius: 25px; border: none; cursor: pointer; font-size: 14px; font-weight: bold; transition: transform 0.1s; }
.modal-btn:active { transform: scale(0.95); }
.btn-ok { background: #27ae60; color: white; box-shadow: 0 4px 0 #1e8449; }
.btn-cancel { background: #95a5a6; color: white; box-shadow: 0 4px 0 #7f8c8d; }
#gb-shell { display: flex; flex-direction: column; width: 100%; height: 100%; max-width: min(600px, calc(100vh * 0.65)); margin: 0 auto; background-color: #c4c4c4; position: relative; border-radius: 10px 10px 40px 40px; box-shadow: 0 0 50px rgba(0,0,0,0.5); overflow: hidden; font-size: clamp(10px, 3.5vh, 16px); }
.screen-container { width: 98%; margin: 5px auto 5px auto; aspect-ratio: 4 / 3; background-color: #000; border-radius: 8px; box-shadow: inset 0 0 10px rgba(0,0,0,1); position: relative; flex-shrink: 0; border: 2px solid #333; z-index: 5; overflow: hidden; }
.screen-container canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: contain !important; image-rendering: pixelated; }
#remote-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; display: none; background: #000; z-index: 20; }
.gb-branding { text-align: center; margin: 0.2em auto; font-family: sans-serif; font-weight: 800; font-style: italic; opacity: 0.6; flex-shrink: 0; z-index: 5; }
.brand-nintendo { color: #555; font-size: 0.8em; margin-right: 5px; }
.brand-gameboy { color: #304ffe; font-size: 1.2em; }
.controls-area { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; padding: 1% 5%; position: relative; }
.upper-controls { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 1%; flex-shrink: 0; }
.dpad-visual-base { position: fixed; width: 120px; height: 120px; background: rgba(255, 255, 255, 0.15); border-radius: 50%; border: 2px solid rgba(255,255,255,0.3); transform: translate(-50%, -50%); pointer-events: none; display: none; z-index: 9999; box-shadow: 0 0 15px rgba(0,0,0,0.3); }
.dpad-visual-knob { position: fixed; width: 50px; height: 50px; background: rgba(255, 255, 255, 0.6); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; display: none; z-index: 10000; box-shadow: 0 0 10px rgba(255,255,255,0.6); backdrop-filter: blur(2px); border: 2px solid rgba(255,255,255,0.8); }
.dpad-group { width: 36%; aspect-ratio: 1 / 1; position: relative; pointer-events: none; }
.dpad-bg { position: absolute; top: 33.33%; left: 0; width: 100%; height: 33.33%; background: #333; border-radius: 4px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.5); z-index: 1;}
.dpad-bg::after { content: ''; position: absolute; top: -100%; left: 33.33%; width: 33.33%; height: 300%; background: #333; border-radius: 4px; z-index: 1;}
.dpad-arrow { position: absolute; background: rgba(255, 255, 255, 0.3); border-radius: 2px; z-index: 2; display: none; box-shadow: 0 0 5px rgba(255,255,255,0.5); }
.dpad-arrow.active { display: block; }
.dpad-up    { top: 0; left: 33.33%; width: 33.33%; height: 33.33%; }
.dpad-down  { bottom: 0; left: 33.33%; width: 33.33%; height: 33.33%; }
.dpad-left  { top: 33.33%; left: 0; width: 33.33%; height: 33.33%; }
.dpad-right { top: 33.33%; right: 0; width: 33.33%; height: 33.33%; }
.action-group { width: 42%; aspect-ratio: 1 / 1; position: relative; z-index: 101; pointer-events: none; }
.round-btn { width: 35%; height: 35%; border-radius: 50%; position: absolute; color: rgba(255,255,255,0.6); font-weight: 900; box-shadow: 3px 3px 6px rgba(0,0,0,0.4); font-size: 1.2em; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(0,0,0,0.1); font-family: sans-serif; transition: transform 0.05s, opacity 0.05s; }
.round-btn::after { content: attr(data-label); transform: rotate(0deg); } 
.btn-red { background: #8b1d28; border-color: #731822; }
.btn-blue { background: #2980b9; border-color: #1a5276; }
.btn-ta { top: 0; left: 50%; transform: translateX(-50%); }
.btn-b  { bottom: 0; left: 50%; transform: translateX(-50%); }
.btn-tb { top: 50%; left: 0; transform: translateY(-50%); }
.btn-a  { top: 50%; right: 0; transform: translateY(-50%); }
.btn-ta.active, .btn-b.active { transform: translateX(-50%) scale(0.9); }
.btn-tb.active, .btn-a.active { transform: translateY(-50%) scale(0.9); }
.round-btn.active { opacity: 0.9; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.5); filter: brightness(1.2); }
.middle-controls { display: flex; justify-content: center; gap: 15%; width: 100%; margin-top: 5%; margin-bottom: auto; z-index: 300; pointer-events: none; }
.capsule-btn { width: 16%; aspect-ratio: 2.8 / 1; background: #666; border-radius: 50px; border: 1px solid #555; box-shadow: 2px 2px 4px rgba(0,0,0,0.3); transform: rotate(-20deg); position: relative; pointer-events: auto; }
.capsule-label { position: absolute; width: 100%; text-align: center; top: 130%; color: #777; font-size: 0.6em; font-weight: bold; transform: rotate(0deg); white-space: nowrap; }
.capsule-btn:active { transform: rotate(-20deg) scale(0.95); opacity: 0.8; }
#gamepad-ui { display: none; width: 100%; text-align: center; margin-bottom: 8px; animation: fadeIn 0.5s; z-index: 50; pointer-events: none; }
.gp-layout-selector { pointer-events: auto; background: rgba(0, 0, 0, 0.3); color: #fff; border: 1px solid #555; padding: 4px 8px; border-radius: 4px; font-size: 12px; outline: none; cursor: pointer; font-family: sans-serif; }
.gp-icon { font-size: 14px; margin-right: 5px; vertical-align: middle; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.bottom-controls { display: flex; justify-content: center; align-items: center; width: 100%; margin-bottom: 10px; position: relative; flex-shrink: 0; z-index: 300; pointer-events: auto; }
.emu-sys-btns { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    grid-template-rows: repeat(2, 1fr);    /* 2行 */
    gap: 8px 15px; /* 行间距8px，列间距15px */
    width: 100%; 
    max-width: 230px; /* 【核心修复】限制最大宽度，不让它无限撑大 */
    margin: 0 auto;   /* 【核心修复】让这块区域在屏幕中间 */
    padding: 0 5px;
}
.sys-btn { background: #2980b9; color: #fff; padding: 0 0.8em; font-size: 0.7em; border: none; height: 2.6em; border-radius: 1.3em; box-shadow: 0 3px 0 rgba(0,0,0,0.3); white-space: nowrap; transition: transform 0.1s; min-width: 4.5em;}
.sys-btn:active { transform: scale(0.95); box-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.speaker { position: absolute; right: 15px; bottom: 15px; display: flex; gap: 5px; transform: rotate(-25deg); opacity: 0.2; pointer-events: none; }
.speaker div { width: 5px; height: 30px; background: #000; border-radius: 2px; }
#toast { position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-100px); background: rgba(50,50,50,0.95); color: #fff; padding: 10px 25px; border-radius: 30px; z-index: 2000; transition: transform 0.3s; white-space: nowrap; max-width: 90%; text-align: center; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
#toast.show { transform: translateX(-50%) translateY(0); }
#dpad-hitbox { position: absolute; z-index: 999; touch-action: none; background: rgba(0,255,0,0.0); }
#action-hitbox { position: absolute; z-index: 999; touch-action: none; background: rgba(255,0,0,0.0); }
@media (orientation: landscape) {
    #gb-shell { max-width: none; width: calc(100% - 4px); height: calc(100% - 4px); margin: 2px auto; border-radius: 15px; background-color: #c4c4c4; display: block; --screen-max-w: calc(100vw - 360px); --screen-ratio-w: calc(94vh * 4 / 3); --real-screen-w: min(var(--screen-max-w), var(--screen-ratio-w)); --side-gap: calc((100vw - var(--real-screen-w)) / 2); }
    .screen-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 94%; aspect-ratio: 4 / 3; width: auto; max-width: var(--screen-max-w); margin: 0; border-width: 0 6px; box-shadow: 0 0 0 1px #333; z-index: 10; }
    .controls-area { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; pointer-events: none; }
    .controls-area * { pointer-events: auto; }
    .upper-controls { position: absolute; width: 100%; height: 100%; margin: 0; }
    .gb-branding { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 3%; left: calc(var(--side-gap) / 2); transform: translateX(-50%); width: auto; opacity: 0.8; margin: 0; }
    .brand-nintendo { display: block; font-size: 0.8em; color: #555; margin-bottom: 2px; font-weight: 700; line-height: 1; } 
    .brand-gameboy { display: block; font-size: 1.3em; font-style: italic; font-weight: 900; color: #304ffe; line-height: 1; }
    .speaker { display: flex; position: absolute; top: 15px; right: 15px; bottom: auto; left: auto; transform: rotate(-25deg); gap: 6px; opacity: 0.2; }
    .speaker div { height: 35px; width: 5px; background: #000; border-radius: 3px; }
    .dpad-group { position: absolute; top: 45%; transform: translateY(-50%); width: 140px; height: 140px; left: calc(var(--side-gap) / 2 - 70px); }
    .middle-controls { position: absolute; top: 82%; width: 140px; justify-content: space-between; margin: 0; gap: 0; left: calc(var(--side-gap) / 2 - 70px); }
    .capsule-btn { transform: rotate(-20deg); width: 42%; aspect-ratio: 2.8/1; }
    .capsule-label { top: 120%; font-size: 0.6em; transform: rotate(0deg); } 
    .action-group { position: absolute; top: 42%; transform: translateY(-50%); width: 140px; height: 140px; right: calc(var(--side-gap) / 2 - 70px); }
    #gamepad-ui { position: absolute; top: 65%; bottom: 85px; right: calc(var(--side-gap) / 2 - 75px); width: 150px; margin: 0; }
    .bottom-controls { position: absolute; top: 75%; width: 160px; margin: 0; justify-content: center; right: calc(var(--side-gap) / 2 - 80px); }
    .emu-sys-btns { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px 6px; width: 100%; }
    .sys-btn { width: 100%; height: 28px; font-size: 10px; padding: 0; margin: 0; box-shadow: 0 2px 0 rgba(0,0,0,0.3); border-radius: 4px; min-width: 0; }
}

/* 新增：房间大厅样式 */
.room-code-display { margin: 10px 0; font-size: 14px; color: #ccc; }
#display-room-code { background: #000; color: #2ecc71; padding: 5px 10px; border-radius: 5px; font-size: 20px; letter-spacing: 3px; cursor: pointer; border: 1px dashed #555; }
.player-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 10px; }
.player-slot { background: #222; border: 1px solid #444; border-radius: 4px; padding: 8px; font-size: 12px; color: #666; transition: all 0.3s; }
.player-slot.active { background: #27ae60; color: #fff; border-color: #2ecc71; box-shadow: 0 0 5px rgba(46, 204, 113, 0.5); font-weight: bold; }
#slot-p1.active { background: #3498db; border-color: #5dade2; } /* P1 蓝色 */
/* 新增：中转(Relay)状态的颜色 - 比如用紫色或蓝色，一眼就能区分 */
.player-slot.relay {
    background: #8e44ad !important; /* 紫色 */
    border-color: #9b59b6 !important;
    box-shadow: 0 0 5px rgba(142, 68, 173, 0.5);
}
/* 新增：客户端等待遮罩 */
#client-wait-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 2000; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; text-align: center; }
.wait-content { animation: pulse 2s infinite; }
.wait-spinner { font-size: 50px; margin-bottom: 20px; display: inline-block; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } }
.wait-sub { color: #888; font-size: 12px; margin-top: 10px; }