* { box-sizing: border-box; }
html, body {
    height: 100%; margin: 0; padding: 0; overflow: hidden;
    background: #0b1020;
    font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
}
#apps { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ================= 顶部指标条（单行紧凑布局） ================= */
.sg-header {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 12px;
    background: linear-gradient(180deg, #17223c 0%, #0f1729 100%);
    border-bottom: 1px solid rgba(110, 170, 255, .18);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
    color: #cfe3ff; white-space: nowrap; z-index: 30;
}
.sg-brand { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 15px; font-weight: 700;
    color: #eaf4ff; letter-spacing: .5px; flex: 0 0 auto; }
.sg-brand a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 7px; transition: color .18s; }
.sg-brand a:hover { color: #6fd0ff; text-decoration: none; }
.sg-brand i { color: #57d1ff; font-size: 17px; text-shadow: 0 0 12px rgba(87,209,255,.7); }

.sg-metrics { display: flex; align-items: center; justify-content: center; gap: 5px;
    flex: 1 1 auto; overflow: hidden; }
.sg-metric {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(90, 150, 240, .12);
    border: 1px solid rgba(110, 170, 255, .16);
    font-size: 13px; line-height: 1.25; color: #d6e8ff; flex: 0 0 auto;
    transition: background .2s, border-color .2s, transform .15s;
}
.sg-metric i { color: #6fb3ff; font-size: 12px; }
.sg-metric b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 12px; text-align: center; }
.sg-metric small { color: #7f96b8; font-size: 11px; }
.sg-metric.hot { background: rgba(255, 138, 61, .18); border-color: rgba(255, 168, 90, .45); }
.sg-metric.hot i { color: #ffa24d; }
.sg-metric.danger { background: rgba(255, 76, 96, .18); border-color: rgba(255, 110, 128, .5); animation: pulseDanger 1s infinite; }
.sg-metric.danger i { color: #ff6b7f; }
@keyframes pulseDanger { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.06);} }

.sg-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sg-actions .btn { border-radius: 8px; font-size: 12px; padding: 4px 10px;
    background: rgba(90,150,240,.14); border: 1px solid rgba(110,170,255,.25); color: #cfe3ff;
    transition: all .18s; }
.sg-actions .btn:hover, .sg-actions .btn:focus {
    background: rgba(110,180,255,.3); color: #fff; border-color: rgba(140,200,255,.6);
    box-shadow: 0 0 14px rgba(90,170,255,.4); outline: none;
}

/* ================= 游戏舞台 ================= */
.sg-stage { position: relative; flex: 1 1 auto; overflow: hidden; background: #7ec8e3; }
#gameCanvas { display: block; width: 100%; height: 100%; }

/* ================= 通用弹层：水平 + 垂直绝对居中 ================= */
.sg-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    padding: 20px;
    background: rgba(5, 10, 24, .78);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}
.sg-mask.show { opacity: 1; visibility: visible; }
.sg-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    margin: auto;
    padding: 26px 28px 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #1b2745 0%, #121b30 100%);
    border: 1px solid rgba(110, 170, 255, .26);
    box-shadow: 0 26px 80px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255,255,255,.06);
    color: #dce9ff;
    transform: translateY(16px) scale(.96);
    transition: transform .28s cubic-bezier(.2,.85,.32,1.2);
    flex-shrink: 0;
}
.sg-mask.show .sg-modal { transform: translateY(0) scale(1); }
.sg-modal::-webkit-scrollbar { width: 6px; }
.sg-modal::-webkit-scrollbar-thumb { background: rgba(110,170,255,.35); border-radius: 3px; }

.sg-modal-title {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 800;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 0 2px 18px rgba(90,170,255,.55);
    line-height: 1.35;
}
.sg-modal .sg-sub { text-align: center; color: #8ba4c9; font-size: 13px; margin-bottom: 18px; line-height: 1.7; }
.sg-modal .sg-sub b { color: #6fd0ff; }
.sg-modal kbd { background: rgba(110,170,255,.2); border: 1px solid rgba(110,170,255,.35);
    border-radius: 5px; padding: 1px 7px; font-size: 12px; color: #eaf4ff; font-family: monospace; }

/* 弹层内的按钮组 */
.sg-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.sg-btns .btn { border-radius: 10px; font-weight: 700; padding: 10px 20px; font-size: 14px;
    border: 1px solid transparent; transition: all .18s; letter-spacing: .5px; }
.sg-btns .btn i { margin-right: 6px; }
.btn-sg-primary { background: linear-gradient(180deg, #3ea0ff 0%, #1c6fe0 100%); color: #fff;
    box-shadow: 0 6px 20px rgba(50, 140, 255, .45); }
.btn-sg-primary:hover, .btn-sg-primary:focus { background: linear-gradient(180deg,#57b3ff,#2a7ff0); color:#fff;
    transform: translateY(-2px); box-shadow: 0 10px 26px rgba(60, 150, 255, .6); }
.btn-sg-ghost { background: rgba(110,170,255,.1); color: #b9d4f5; border-color: rgba(110,170,255,.3); }
.btn-sg-ghost:hover, .btn-sg-ghost:focus { background: rgba(110,170,255,.24); color: #fff; border-color: rgba(150,200,255,.6); }
.btn-sg-warn { background: linear-gradient(180deg,#ff9f43,#f07616); color: #fff;
    box-shadow: 0 6px 20px rgba(240,120,20,.42); }
.btn-sg-warn:hover, .btn-sg-warn:focus { background: linear-gradient(180deg,#ffb15c,#ff8c26); color:#fff;
    transform: translateY(-2px); }

/* 统计表格（弹层内） */
.sg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 4px; }
.sg-stat { background: rgba(90, 150, 240, .1); border: 1px solid rgba(110, 170, 255, .16);
    border-radius: 10px; padding: 10px 6px; text-align: center; }
.sg-stat i { color: #6fb3ff; font-size: 15px; display: block; margin-bottom: 4px; }
.sg-stat b { display: block; font-size: 19px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.2; }
.sg-stat small { color: #7f96b8; font-size: 11px; }

/* 设置项 */
.sg-field { margin-bottom: 16px; }
.sg-field > label { display: block; font-size: 12px; color: #8ba4c9; margin-bottom: 8px; letter-spacing: .5px; }
.sg-seg { display: flex; gap: 10px; }
.sg-seg button {
    flex: 1; padding: 10px 8px; border-radius: 10px; font-size: 13px; cursor: pointer;
    background: rgba(90,150,240,.1); color: #b9d4f5;
    border: 1px solid rgba(110,170,255,.22); transition: all .18s;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    white-space: nowrap;
}
.sg-seg button i { font-size: 13px; }
.sg-seg button:hover { background: rgba(90,150,240,.22); color: #fff; }
.sg-seg button.on { background: linear-gradient(180deg,#3ea0ff,#1c6fe0); color: #fff;
    border-color: #4aa8ff; box-shadow: 0 4px 16px rgba(50,140,255,.45); }

/* 规则列表 */
.sg-rules { list-style: none; padding: 0; margin: 0; }
.sg-rules li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0;
    border-bottom: 1px dashed rgba(110,170,255,.14); font-size: 13px; line-height: 1.65; color: #c3d8f2; }
.sg-rules li:last-child { border-bottom: none; }
.sg-rules li i { color: #57d1ff; font-size: 14px; margin-top: 3px; flex: 0 0 auto; }
.sg-rules li b { color: #6fd0ff; }

/* 胜利 / 失败 标题特效 */
.sg-title-win { animation: winPop .7s cubic-bezier(.2,1.6,.4,1) both; }
.sg-title-lose { animation: loseShake .6s ease both; }
@keyframes winPop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.14); opacity: 1; } 100% { transform: scale(1); } }
@keyframes loseShake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* 彩带画布：层级高于所有弹层，实现“花在弹层上面显示” */
#fxCanvas { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
    pointer-events: none; z-index: 3000; }

/* Toast 提示（水平 + 垂直居中） */
#toast {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9);
    padding: 14px 30px; border-radius: 12px; font-size: 16px; font-weight: 700;
    background: rgba(20, 32, 58, .95); color: #eaf4ff; letter-spacing: 1px;
    border: 1px solid rgba(110,170,255,.4); box-shadow: 0 14px 44px rgba(0,0,0,.6);
    z-index: 4000; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .22s, transform .22s, visibility .22s;
    white-space: nowrap;
}
#toast.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* ================= 响应式收敛 ================= */
@media (max-width: 1180px) { .sg-metric small { display: none; } }
@media (max-width: 860px) {
    .sg-brand span { display: none; }
    .sg-metric { padding: 3px 7px; font-size: 12px; }
    .sg-actions .btn span { display: none; }
    .sg-actions .btn { padding: 4px 8px; }
}
@media (max-width: 560px) {
    .sg-header { padding: 5px 6px; gap: 4px; }
    .sg-metric { padding: 2px 6px; font-size: 11px; }
    .sg-metric i { font-size: 11px; }
    .sg-modal { padding: 20px 16px; }
    .sg-stats { grid-template-columns: repeat(2, 1fr); }
    .sg-btns .btn { padding: 8px 14px; font-size: 13px; }
}