/* ===========================================================
   小游戏厅统一样式 —— 手机优先
   用法：<link rel="stylesheet" href="assets/arcade.css">
   =========================================================== */

:root {
    --bg-1:#141a35;
    --bg-2:#1d2a56;
    --bg-3:#2b1b4d;
    --ink:#eaf2ff;          /* 主文字（深色底） */
    --ink-2:#a8bcdd;        /* 次要文字 */
    --ink-dark:#12203a;     /* 浅色卡片上的文字 */
    --card:rgba(255,255,255,.09);
    --card-solid:#ffffff;
    --line:rgba(150,200,255,.28);
    --acc:#3fd8ff;          /* 主色：亮青 */
    --acc-2:#ffcf3f;        /* 强调：金 */
    --acc-3:#ff6fae;        /* 强调：粉 */
    --ok:#3ddc97;
    --danger:#ff5c6c;
    --r-lg:20px;
    --r:14px;
    --r-sm:10px;
    --gap:10px;
    --tap:44px;             /* 最小点击区域 */
    --top:52px;             /* 顶栏高度 */
    --safe-t:env(safe-area-inset-top,0px);
    --safe-b:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; }

html, body { height:100%; }

body {
    margin:0;
    padding:calc(var(--top) + var(--safe-t) + 6px) 10px calc(12px + var(--safe-b));
    min-height:100%;
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",
        "Helvetica Neue",Arial,sans-serif;
    background:
        radial-gradient(1200px 600px at 15% -10%, #3a2a70 0%, transparent 55%),
        radial-gradient(900px 500px at 110% 10%, #17607d 0%, transparent 50%),
        linear-gradient(170deg, var(--bg-1) 0%, var(--bg-2) 55%, var(--bg-3) 100%);
    background-attachment:fixed;
    -webkit-tap-highlight-color:transparent;
    -webkit-text-size-adjust:100%;
    overscroll-behavior:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* 内容不满一屏时纵向居中，超出时仍从顶部开始，不会被顶掉 */
    justify-content:safe center;
    gap:var(--gap);
}

/* ============ 顶栏 ============ */
.topbar {
    position:fixed; top:0; left:0; right:0; z-index:80;
    height:calc(var(--top) + var(--safe-t));
    padding:var(--safe-t) 10px 0;
    display:flex; align-items:center; gap:10px;
    background:linear-gradient(180deg, rgba(10,16,36,.92), rgba(10,16,36,.55) 70%, transparent);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}
.topbar .back {
    width:38px; height:38px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%; border:1px solid var(--line);
    background:rgba(255,255,255,.14); color:var(--ink);
    font-size:19px; text-decoration:none; line-height:1;
    transition:transform .15s, background .15s;
}
.topbar .back:active { transform:scale(.92); background:rgba(255,255,255,.26); }
.topbar h1 {
    flex:1; margin:0; font-size:17px; font-weight:800; letter-spacing:1px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.topbar h1 .emo { margin-right:5px; }
.topbar .slot { display:flex; align-items:center; gap:8px; flex-shrink:0; }

/* 顶栏右侧的圆形小按钮 */
.icon-btn {
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    border:1px solid var(--line); background:rgba(255,255,255,.14); color:var(--ink);
    font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center;
    padding:0;
}
.icon-btn:active { transform:scale(.92); }

/* ============ 版心 ============ */
.wrap {
    width:100%; max-width:520px;
    display:flex; flex-direction:column; align-items:center; gap:var(--gap);
}
.wrap.wide { max-width:760px; }

/* ============ 玻璃面板 ============ */
.panel {
    width:100%;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    padding:12px;
    box-shadow:0 8px 26px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.14);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}
.panel.tight { padding:8px; }
.panel.board { padding:8px; background:rgba(6,12,28,.42); }

/* ============ 数据条 ============ */
.hud {
    width:100%;
    display:flex; align-items:stretch; justify-content:center; gap:8px;
    flex-wrap:wrap;
}
.stat {
    flex:1 1 0; min-width:72px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2px; padding:7px 6px;
    border-radius:var(--r); border:1px solid var(--line);
    background:linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
}
.stat b {
    font-size:20px; font-weight:900; line-height:1.1; color:var(--acc);
    font-variant-numeric:tabular-nums;
}
.stat.gold b { color:var(--acc-2); }
.stat.pink b { color:var(--acc-3); }
.stat.ok b { color:var(--ok); }
.stat span { font-size:11px; color:var(--ink-2); }

/* ============ 按钮 ============ */
.btn {
    min-height:var(--tap);
    padding:11px 18px;
    border-radius:var(--r);
    border:1px solid rgba(255,255,255,.35);
    background:linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
    color:var(--ink);
    font-size:15px; font-weight:700; font-family:inherit;
    cursor:pointer; user-select:none; -webkit-user-select:none;
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    transition:transform .12s, filter .12s, opacity .12s;
}
.btn:active:not(:disabled) { transform:translateY(2px) scale(.99); filter:brightness(1.1); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.primary {
    color:#06263a; border-color:#fff;
    background:linear-gradient(180deg,#8df0ff,#22b6e6);
    box-shadow:0 4px 0 #12718f;
}
.btn.primary:active:not(:disabled) { box-shadow:0 1px 0 #12718f; }
.btn.gold {
    color:#4b3000; border-color:#fff;
    background:linear-gradient(180deg,#ffe89a,#ffb724);
    box-shadow:0 4px 0 #b57500;
}
.btn.gold:active:not(:disabled) { box-shadow:0 1px 0 #b57500; }
.btn.pink {
    color:#4d0b28; border-color:#fff;
    background:linear-gradient(180deg,#ffb3d5,#ff5fa2);
    box-shadow:0 4px 0 #c02766;
}
.btn.pink:active:not(:disabled) { box-shadow:0 1px 0 #c02766; }
.btn.ghost { background:rgba(255,255,255,.08); }
.btn.sm { min-height:36px; padding:8px 12px; font-size:13px; border-radius:var(--r-sm); }
.btn.lg { min-height:54px; font-size:17px; padding:14px 24px; }
.btn.block { width:100%; }

.btn-row { width:100%; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.btn-row > .btn { flex:1 1 0; min-width:96px; }

/* 选项胶囊（难度、模式切换） */
.chips { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.chip {
    padding:7px 13px; min-height:34px; border-radius:999px; cursor:pointer;
    border:1px solid var(--line); background:rgba(255,255,255,.09);
    color:var(--ink-2); font-size:13px; font-weight:700; font-family:inherit;
    display:inline-flex; align-items:center; gap:4px;
}
.chip.on {
    color:#06263a; border-color:#fff;
    background:linear-gradient(180deg,#8df0ff,#31c3ef);
    box-shadow:0 0 14px rgba(63,216,255,.5);
}

/* ============ 画布 / 棋盘 ============ */
.stage {
    width:100%;
    display:flex; align-items:center; justify-content:center;
}
.stage canvas {
    display:block; max-width:100%;
    border-radius:var(--r); touch-action:none;
    background:#0a1024;
}

/* ============ 方向键 ============ */
.dpad {
    display:grid; gap:8px;
    grid-template-columns:repeat(3,58px);
    grid-template-rows:repeat(2,52px);
    justify-content:center;
}
.dpad button {
    border-radius:var(--r); border:1px solid rgba(255,255,255,.35);
    background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
    color:var(--ink); font-size:20px; cursor:pointer; font-family:inherit;
    display:flex; align-items:center; justify-content:center;
}
.dpad button:active { transform:translateY(2px); filter:brightness(1.15); }
.dpad .up { grid-area:1 / 2 / 2 / 3; }
.dpad .left { grid-area:2 / 1 / 3 / 2; }
.dpad .down { grid-area:2 / 2 / 3 / 3; }
.dpad .right { grid-area:2 / 3 / 3 / 4; }

/* ============ 提示 / 说明 ============ */
.tip { font-size:12px; color:var(--ink-2); text-align:center; line-height:1.7; }
details.help {
    width:100%; border-radius:var(--r); padding:9px 13px;
    background:rgba(255,255,255,.06); border:1px solid var(--line);
    font-size:13px; line-height:1.8; color:var(--ink-2);
}
details.help summary { cursor:pointer; font-weight:800; color:var(--acc); }
details.help ol, details.help ul { margin:8px 0 0; padding-left:20px; }

/* ============ 弹窗 ============ */
.modal {
    position:fixed; inset:0; z-index:200; padding:18px;
    background:rgba(4,8,20,.78);
    display:none; align-items:center; justify-content:center;
    backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.modal.on { display:flex; }
.modal-box {
    width:min(420px,100%); max-height:86vh; overflow:auto; text-align:center;
    border-radius:var(--r-lg); padding:20px 18px;
    background:linear-gradient(180deg,#1b2955,#101733);
    border:1px solid var(--line);
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    animation:popIn .28s cubic-bezier(.2,1.3,.5,1);
}
.modal-box h3 { margin:0 0 8px; font-size:20px; color:var(--acc-2); }
.modal-box p { margin:0 0 14px; color:var(--ink-2); font-size:14px; line-height:1.8; }
@keyframes popIn { from { transform:scale(.85); opacity:0 } to { transform:none; opacity:1 } }

/* ============ 通用动效 ============ */
@keyframes floatUp { from { transform:translateY(8px); opacity:0 } to { transform:none; opacity:1 } }
.rise { animation:floatUp .3s ease both; }
@keyframes pulse { 0%,100% { transform:scale(1) } 50% { transform:scale(1.06) } }
.pulse { animation:pulse 1.4s ease-in-out infinite; }

/* ============ 屏幕适配 ============ */
@media (max-width:380px) {
    :root { --top:48px; --gap:8px; }
    .topbar h1 { font-size:15px; }
    .stat b { font-size:18px; }
    .btn { font-size:14px; padding:10px 14px; }
    .dpad { grid-template-columns:repeat(3,52px); grid-template-rows:repeat(2,46px); }
}
@media (min-width:820px) {
    :root { --top:56px; }
    .topbar h1 { font-size:19px; }
    body { padding-bottom:24px; }
}
/* 横屏矮屏：压扁竖向留白 */
@media (max-height:520px) and (orientation:landscape) {
    :root { --top:42px; --gap:6px; }
    .panel { padding:8px; }
    .btn { min-height:38px; padding:8px 14px; }
}