/* ==========================================================================
   게임 플로팅 창 (Stake 스타일) — game-window.js 와 짝
   구조: 헤더 44px / iframe 16:9 / small 400 · large 800. 색은 전부 --gw-* 변수 구동.
   :root = Default 스킨 팔레트(기본). 각 스킨은 파일 끝 body.skin-* 블록에서 자기 테마로 오버라이드.
   ========================================================================== */
:root {
    --gw-bg: #1a2c38;
    --gw-title: #ffffff;
    --gw-icon: #b1bad3;
    --gw-icon-hover: #1475e1;
    --gw-hover: rgba(255, 255, 255, 0.08);
    --gw-game-bg: #0f212e;
    --gw-radius: 8px;
    --gw-shadow: 0 -12px 10px -4px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.16);
    --gw-header-h: 44px;
    --gw-small-w: 400px;
    --gw-large-w: 800px;
    --gw-z-window: 1500;
    --gw-z-dock: 9200;
}

.gw-root { }

/* ── 창 본체 ── */
.gw-window {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: var(--gw-small-w);
    max-width: calc(100vw - 16px);
    background: var(--gw-bg);
    border-radius: var(--gw-radius);
    box-shadow: var(--gw-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--gw-z-window);
    font-family: inherit;
    -webkit-user-select: none;
    user-select: none;
}
.gw-window.is-large { width: var(--gw-large-w); }
.gw-window.is-min { display: none; }
.gw-window.is-dragging { opacity: 0.96; }

/* ── 제목표시줄 (드래그 핸들) ── */
.gw-header {
    height: var(--gw-header-h);
    min-height: var(--gw-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 0 12px;
    background: var(--gw-bg);
    cursor: move;
}
.gw-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}
.gw-title-icon { color: var(--gw-icon); font-size: 14px; opacity: 0.8; flex: 0 0 auto; }
.gw-title {
    color: var(--gw-title);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.gw-actions { display: flex; align-items: center; flex: 0 0 auto; }

/* ── 아이콘 버튼 ── */
.gw-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--gw-icon);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 6px;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.gw-header .gw-btn { width: var(--gw-header-h); height: var(--gw-header-h); font-size: 15px; }
.gw-btn:hover { background: var(--gw-hover); color: var(--gw-icon-hover); }

/* ── 본문 (게임 iframe) ── */
.gw-body {
    position: relative;
    background: var(--gw-game-bg);
    line-height: 0;
}
.gw-iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: #000;
}
/* aspect-ratio 미지원 브라우저 폴백 (padding-top 방식은 생략 — 대상 브라우저 모두 지원) */
/* 드래그 중: 게임 iframe 이 포인터 이벤트를 가로채 드래그가 멈추는 것 방지 (game-window.js gw-dragging) */
.gw-root.gw-dragging .gw-iframe { pointer-events: none; }

.gw-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--gw-title);
    font-size: 14px;
    line-height: 1.4;
    background: var(--gw-game-bg);
    text-align: center;
    padding: 16px;
}
.gw-window.is-loaded .gw-loading { display: none; }
.gw-loading-note { max-width: 260px; }

/* ── 하단 툴바 ── */
.gw-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    min-height: 44px;
    padding: 0 8px;
    background: var(--gw-bg);
    color: var(--gw-title);
}
.gw-footer .gw-btn { height: 30px; padding: 0 10px; gap: 6px; font-size: 13px; }
.gw-btn-label { font-size: 13px; font-weight: 500; }

/* ── 최소화 도킹 (하단 가장자리) ── */
.gw-dock {
    position: fixed;
    right: 0;                     /* Stake: 화면 우측 끝에 딱 붙는 하나의 띠 */
    bottom: 0;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    /* gap 제거 → 탭끼리 붙어 하나의 연결 띠 */
    z-index: var(--gw-z-dock);
    pointer-events: none;
    /* Stake: 그림자·라운드를 개별 탭이 아니라 띠 전체(컨테이너)에 (좌상단만 둥글게) */
    border-top-left-radius: var(--gw-radius);
    box-shadow: 0 -4px 6px -1px rgba(27, 23, 23, 0.2), 0 -2px 4px -1px rgba(0, 0, 0, 0.12);
}
.gw-dock-item {
    pointer-events: auto;
    display: flex;
    align-items: center;
    height: var(--gw-header-h);
    max-width: 320px;              /* Stake 식: 폭 고정/최소폭 없이 제목에 맞춤(hug), 아주 긴 이름만 여기서 컷 */
    padding: 0 4px 0 12px;
    background: var(--gw-bg);
    border-radius: 0;             /* 연결 띠: 기본 각지게, 바깥 왼쪽 끝만 라운드(아래 :last-child) */
}
.gw-dock-item:last-child { border-top-left-radius: var(--gw-radius); }
.gw-dock-title {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    color: var(--gw-title);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 1 auto;               /* 늘리지 않고 제목 내용폭에 맞춤(Stake hug). 초과 시 shrink+ellipsis */
    min-width: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0;
    height: 100%;
}
.gw-dock-item .gw-btn { width: 34px; height: 34px; font-size: 14px; }

/* ── 스킨별 테마 오버라이드 ────────────────────────────────────────────────
   각 스킨(body.skin-*)의 자체 팔레트로 창 크롬을 맞춰 어우러지게 한다.
   변수만 재정의 → 컴포넌트 규칙·game-window.js 무변경. Default(bare <body>)는 위 :root 사용.
   은은하게: 크롬=스킨 surface · 제목=스킨 제목색 · 강조색은 아이콘 hover(--gw-icon-hover)에만.
   밝은 스킨(st02·w04)은 흰 크롬 대신 어두운 극장 크롬 + 브랜드 강조색(어두운 게임 iframe 과 이질감 방지).
   ────────────────────────────────────────────────────────────────────────── */
body.skin-st02 { --gw-bg: #1c1c1c; --gw-title: #ffffff; --gw-icon: #b9b9b9; --gw-icon-hover: #cc2124; --gw-game-bg: #000000; }
body.skin-st10 { --gw-bg: #0a1628; --gw-title: #ffffff; --gw-icon: #8fa3bf; --gw-icon-hover: #00d4aa; --gw-game-bg: #050d1a; }
body.skin-st11 { --gw-bg: #1a1033; --gw-title: #ffffff; --gw-icon: #a78bfa; --gw-icon-hover: #a855f7; --gw-game-bg: #0f0a1f; }
body.skin-st10-venus { --gw-bg: #0a1628; --gw-title: #ffffff; --gw-icon: #8fa3bf; --gw-icon-hover: #00d4aa; --gw-game-bg: #050d1a; }
body.skin-w01  { --gw-bg: #0f1e2b; --gw-title: #f3f7fb; --gw-icon: #9eb2c8; --gw-icon-hover: #1992ff; --gw-game-bg: #08131f; }
body.skin-w04  { --gw-bg: #1d2230; --gw-title: #ffffff; --gw-icon: #aeb4c2; --gw-icon-hover: #fe139c; --gw-game-bg: #14171f; }
body.skin-w12  { --gw-bg: #152133; --gw-title: #edf4ff; --gw-icon: #9cb2cc; --gw-icon-hover: #32c5ff; --gw-game-bg: #0a0f18; }
body.skin-w15  { --gw-bg: #1f1f1e; --gw-title: #d5b27a; --gw-icon: #b6a581; --gw-icon-hover: #cfa968; --gw-game-bg: #0f0f10; }
body.skin-w16  { --gw-bg: #1f2630; --gw-title: #ffffff; --gw-icon: #9090b6; --gw-icon-hover: #f56406; --gw-game-bg: #171c22; }
body.skin-w17  { --gw-bg: #242528; --gw-title: #ffffff; --gw-icon: #9ca3af; --gw-icon-hover: #eab208; --gw-game-bg: #000000; }
body.skin-w18a { --gw-bg: #0c2973; --gw-title: #ffffff; --gw-icon: #80b3ff; --gw-icon-hover: #3f91fd; --gw-game-bg: #000e32; }