/* ════════════════════════════════════════════════════════════
   웰컴스 3D 오목 — HUD/모달/레이아웃 스타일
   모든 셀렉터는 .omok-wrap 스코프 내에서 동작 (테마 간섭 방지)
   ════════════════════════════════════════════════════════════ */

.omok-wrap *,
.omok-wrap *::before,
.omok-wrap *::after { box-sizing:border-box; }

.omok-wrap {
    position:fixed;
    top:0; left:0;
    width:100vw;
    height:100vh; height:100dvh;
    overflow:hidden;
    background:linear-gradient(180deg, #1a1a2e 0%, #0f0f1e 100%);
    font-family:'Pretendard','Noto Sans KR',sans-serif;
    color:#fff;
    z-index:99999;
}

/* 캔버스 컨테이너 (두 HUD 사이) */
.omok-wrap .omok-canvas-container {
    position:absolute;
    top:56px; bottom:56px;
    left:0; right:0;
    touch-action:none;
    -webkit-touch-callout:none;
}
.omok-wrap .omok-canvas-container canvas {
    display:block;
    width:100%; height:100%;
}

/* ── 상단/하단 HUD 공통 ── */
.omok-wrap .omok-top-hud,
.omok-wrap .omok-bottom-hud {
    position:fixed;
    left:0; right:0;
    height:56px;
    background:rgba(15,15,30,0.85);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    z-index:10;
}
.omok-wrap .omok-top-hud {
    top:0;
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.omok-wrap .omok-bottom-hud {
    bottom:0;
    border-top:1px solid rgba(255,255,255,0.1);
}

.omok-wrap .omok-hud-left,
.omok-wrap .omok-hud-right,
.omok-wrap .omok-hud-center {
    display:flex;
    align-items:center;
    gap:12px;
}

/* ── 홈 링크 + 타이틀 ── */
.omok-wrap .omok-home-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:#fff;
    text-decoration:none;
    padding:6px 10px;
    border-radius:8px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    font-size:14px;
    font-weight:600;
    transition:background 0.2s;
}
.omok-wrap .omok-home-link:hover { background:rgba(255,255,255,0.18); }
.omok-wrap .omok-home-icon { font-size:18px; line-height:1; }
.omok-wrap .omok-title {
    font-size:16px;
    font-weight:700;
    letter-spacing:0.02em;
    white-space:nowrap;
    color:#fff;
}

/* ── HUD 버튼 ── */
.omok-wrap .omok-btn {
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:8px;
    color:#fff;
    padding:8px 16px;
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.2s, transform 0.1s;
}
.omok-wrap .omok-btn:hover { background:rgba(255,255,255,0.2); }
.omok-wrap .omok-btn:active { transform:scale(0.96); }

/* ── 차례 표시 ── */
.omok-wrap .omok-turn-indicator {
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    color:#fff;
    min-height:20px;
}
.omok-wrap .omok-stone-mark { font-size:16px; line-height:1; }
.omok-wrap .omok-stone-black { color:#1a1a1a; text-shadow:0 0 2px rgba(255,255,255,0.6); }
.omok-wrap .omok-stone-white { color:#f0f0f0; }
.omok-wrap .omok-turn-text.thinking { color:#ffd700; }

/* ── 스피너 ── */
.omok-wrap .omok-spinner {
    display:inline-block;
    width:16px; height:16px;
    border:2px solid rgba(255,255,255,0.3);
    border-top-color:#fff;
    border-radius:50%;
    animation:omok-spin 0.8s linear infinite;
}

/* ── 점수 ── */
.omok-wrap .omok-score {
    font-size:14px;
    font-weight:600;
    color:#d0d0d0;
    white-space:nowrap;
}

/* ── 난이도 토글 ── */
.omok-wrap .omok-difficulty {
    display:inline-flex;
    gap:4px;
    background:rgba(0,0,0,0.25);
    padding:3px;
    border-radius:10px;
}
.omok-wrap .omok-diff-btn {
    background:rgba(255,255,255,0.1);
    border:none;
    border-radius:8px;
    color:#c0c0c0;
    padding:6px 12px;
    font-family:inherit;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background 0.2s, color 0.2s;
}
.omok-wrap .omok-diff-btn:hover { background:rgba(255,255,255,0.18); color:#fff; }
.omok-wrap .omok-diff-btn.active {
    background:#ffd700;
    color:#1a1a2e;
}

/* ── 모달 공통 ── */
.omok-wrap .omok-modal {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.7);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:100;
    padding:20px;
}
.omok-wrap .omok-modal.active { display:flex; }

.omok-wrap .omok-modal-card {
    background:linear-gradient(145deg, #1e1e3a, #15152b);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:16px;
    padding:32px;
    max-width:400px;
    width:100%;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
    animation:omok-pop 0.25s ease-out;
}
.omok-wrap .omok-modal-card-wide { max-width:500px; text-align:left; }

@keyframes omok-pop {
    from { opacity:0; transform:scale(0.92); }
    to   { opacity:1; transform:scale(1); }
}

.omok-wrap .omok-modal-result {
    margin:0 0 8px;
    font-size:28px;
    font-weight:700;
    line-height:1.2;
}
.omok-wrap .omok-modal-result.win  { color:#4ade80; }
.omok-wrap .omok-modal-result.lose { color:#f87171; }
.omok-wrap .omok-modal-result.draw { color:#fbbf24; }

.omok-wrap .omok-modal-subtext {
    margin:0;
    font-size:15px;
    line-height:1.5;
    color:#a0a0a0;
}
.omok-wrap .omok-modal-btn {
    background:#ffd700;
    color:#000;
    font-weight:600;
    border:none;
    border-radius:8px;
    padding:12px 32px;
    font-family:inherit;
    font-size:16px;
    cursor:pointer;
    margin-top:20px;
    transition:transform 0.1s, filter 0.2s;
}
.omok-wrap .omok-modal-btn:hover { filter:brightness(1.08); }
.omok-wrap .omok-modal-btn:active { transform:scale(0.96); }

/* ── 규칙 모달 본문 ── */
.omok-wrap .omok-modal-title {
    margin:0 0 16px;
    font-size:22px;
    font-weight:700;
    text-align:center;
    color:#fff;
}
.omok-wrap .omok-rules-body { margin-bottom:8px; }
.omok-wrap .omok-rules-body h3 {
    margin:16px 0 6px;
    font-size:15px;
    font-weight:700;
    color:#ffd700;
}
.omok-wrap .omok-rules-body p {
    margin:0 0 8px;
    font-size:13px;
    line-height:1.6;
    color:#c0c0c0;
}
.omok-wrap .omok-rules-body ul {
    margin:0 0 8px;
    padding-left:18px;
}
.omok-wrap .omok-rules-body li {
    font-size:13px;
    line-height:1.7;
    color:#c0c0c0;
}
.omok-wrap .omok-rules-body strong { color:#fff; }

/* ── SEO 섹션 ── */
.omok-seo-section {
    padding:24px 20px 60px;
    font-size:14px;
    line-height:1.6;
    color:#a0a0a0;
    max-width:800px;
    margin:0 auto;
    font-family:'Pretendard','Noto Sans KR',sans-serif;
    background:#0f0f1e;
}
.omok-seo-section h1 {
    font-size:22px;
    font-weight:800;
    line-height:1.4;
    margin:0 0 14px;
    color:#f3f4f6;
}
.omok-seo-section h2 {
    font-size:18px;
    font-weight:700;
    margin:24px 0 10px;
    color:#e5e7eb;
}
.omok-seo-section p { margin:0 0 12px; }
.omok-seo-section strong { color:#60a5fa; }
.omok-seo-section .omok-seo-links {
    list-style:none;
    padding:0;
    margin:12px 0 0;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.omok-seo-section .omok-seo-links a {
    display:inline-block;
    padding:6px 14px;
    background:rgba(88,166,255,0.12);
    border:1px solid rgba(88,166,255,0.3);
    border-radius:8px;
    font-size:13px;
    color:#58a6ff;
    text-decoration:none;
    transition:background 0.15s;
}
.omok-seo-section .omok-seo-links a:hover { background:rgba(88,166,255,0.2); }

@keyframes omok-spin { to { transform:rotate(360deg); } }

/* ══════════ 반응형 ══════════ */
html, body { overscroll-behavior:none; }

@media (max-width:768px) {
    .omok-wrap .omok-top-hud,
    .omok-wrap .omok-bottom-hud { height:48px; padding:0 10px; }
    .omok-wrap .omok-canvas-container { top:48px; bottom:48px; }
    .omok-wrap .omok-title { font-size:14px; }
    .omok-wrap .omok-home-text { display:none; }
    .omok-wrap .omok-home-icon { font-size:20px; }
    .omok-wrap .omok-btn { padding:6px 10px; font-size:12px; }
    .omok-wrap .omok-hud-left,
    .omok-wrap .omok-hud-right,
    .omok-wrap .omok-hud-center { gap:6px; }
    .omok-wrap .omok-turn-indicator { font-size:12px; }
    .omok-wrap .omok-score { font-size:12px; }
    .omok-wrap .omok-diff-btn { padding:5px 8px; font-size:11px; }
    .omok-wrap .omok-modal-card { padding:24px 20px; }
    .omok-wrap .omok-modal-result { font-size:24px; }
    .omok-wrap .omok-rules-body h3 { font-size:14px; }
    .omok-wrap .omok-rules-body p,
    .omok-wrap .omok-rules-body li { font-size:12px; }
}

@media (max-width:480px) {
    .omok-wrap .omok-title { display:none; }
    .omok-wrap .omok-diff-btn { padding:4px 6px; font-size:10px; }
    .omok-wrap .omok-turn-text { font-size:11px; }
    .omok-wrap .omok-score { font-size:11px; }
}

/* ── 정보 모달 스크롤 ── */
.omok-wrap .omok-modal-scroll {
    max-height: 80vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.omok-wrap .omok-modal-scroll .omok-seo-links {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.omok-wrap .omok-modal-scroll .omok-seo-links a {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(88,166,255,0.12);
    border: 1px solid rgba(88,166,255,0.3);
    border-radius: 8px;
    font-size: 13px;
    color: #58a6ff;
    text-decoration: none;
    transition: background 0.15s;
}
.omok-wrap .omok-modal-scroll .omok-seo-links a:hover { background: rgba(88,166,255,0.2); }

/* ── 홈 아이콘 버튼 (우측 상단) ── */
.omok-wrap .omok-btn-home {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    padding:0;
    border-radius:8px;
    background:rgba(255,255,255,0.1);
    border:1px solid rgba(255,255,255,0.15);
    text-decoration:none;
    color:#fff;
    transition:background 0.2s, transform 0.1s;
}
.omok-wrap .omok-btn-home:hover { background:rgba(255,255,255,0.22); }
.omok-wrap .omok-btn-home:active { transform:scale(0.92); }
.omok-wrap .omok-home-icon-btn {
    font-size:20px; line-height:1;
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 24;
}

/* ── 화면 플래시 ── */
.omok-wrap .omok-flash {
    position:fixed; inset:0;
    pointer-events:none;
    z-index:200;
    opacity:0;
    transition:opacity 0.4s ease-out;
}
.omok-wrap .omok-flash.flash-win  { background:radial-gradient(ellipse at center, rgba(74,222,128,0.35) 0%, transparent 70%); }
.omok-wrap .omok-flash.flash-lose { background:radial-gradient(ellipse at center, rgba(248,113,113,0.35) 0%, transparent 70%); }
.omok-wrap .omok-flash.flash-draw { background:radial-gradient(ellipse at center, rgba(251,191,36,0.25) 0%, transparent 70%); }
.omok-wrap .omok-flash.active { opacity:1; }

/* ── 게임오버 모달 액션 버튼 ── */
.omok-wrap .omok-modal-actions {
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:20px;
    flex-wrap:wrap;
}
.omok-wrap .omok-modal-btn-home {
    background:transparent !important;
    color:rgba(255,255,255,0.85) !important;
    border:1px solid rgba(255,255,255,0.22) !important;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.omok-wrap .omok-modal-btn-home:hover {
    background:rgba(255,255,255,0.08) !important;
    border-color:rgba(255,255,255,0.4) !important;
    color:#fff !important;
}

/* ── 금수 안내 토스트 ── */
.omok-wrap .omok-toast {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    background: linear-gradient(135deg, rgba(248,113,113,0.96), rgba(220,80,80,0.96));
    color: #fff;
    padding: 16px 28px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    max-width: 340px;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.2);
}
.omok-wrap .omok-toast.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
@media (max-width:480px) {
    .omok-wrap .omok-toast { font-size: 12px; padding: 14px 20px; max-width: 280px; }
}