/* 聚游墟 · 水墨游艺设计系统 */
:root {
    --paper: #f4efe6;
    --paper-deep: #e8dfcf;
    --paper-light: #fffdf8;
    --bg: var(--paper);
    --bg2: var(--paper-deep);
    --panel: rgba(255,253,248,.84);
    --panel2: #eee5d5;
    --panel-solid: #fffdf8;
    --ink: #1a1a18;
    --ink-soft: #3f403c;
    --ink-faint: #737268;
    --txt-h: var(--ink);
    --txt: #343530;
    --txt-muted: #69695f;
    --muted: #69695f;
    --line: rgba(26,26,24,.3);
    --line-soft: rgba(26,26,24,.14);
    --seal: #a5231f;
    --seal-dark: #791915;
    --red: #a5231f;
    --green: #3f6b52;
    --blue: #385c6c;
    --purple: #65536f;
    --gold: #927128;
    --gold2: #72571e;
    --grad-gold: linear-gradient(145deg,#b2352d,#8f1f1b);
    --grad-red: linear-gradient(145deg,#b2352d,#791915);
    --grad-green: linear-gradient(145deg,#587b65,#355846);
    --grad-purple: linear-gradient(145deg,#75617e,#51445a);
    --grad-blue: linear-gradient(145deg,#55788a,#354f5c);
    --grad-gold-text: linear-gradient(135deg,#1a1a18,#56564f);
    --shadow-paper: 5px 6px 0 rgba(26,26,24,.09);
    --shadow-soft: 0 12px 32px rgba(47,40,30,.12);
    --shadow-gold: var(--shadow-paper);
    --shadow-red: 4px 5px 0 rgba(121,25,21,.15);
    --font-gufeng: "KaiTi","STKaiti","楷体","Noto Serif SC","Source Han Serif SC","SimSun","宋体",serif;
    --font-body: "Noto Serif SC","Source Han Serif SC","Songti SC","SimSun","宋体",serif;
    --dur-fast: .13s;
    --dur-hover: .2s;
    --dur-card: .28s;
    --ease-out: cubic-bezier(.2,.75,.3,1);
    --clip: none;
}

@keyframes ink-breathe { 0%,100%{opacity:.82} 50%{opacity:1} }
@keyframes float-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
@keyframes mist-drift { from{transform:translate3d(-2%,0,0)} to{transform:translate3d(2%,0,0)} }
@keyframes seal-in { from{opacity:0;transform:scale(1.15) rotate(-5deg)} to{opacity:1;transform:scale(1) rotate(-2deg)} }

* { box-sizing: border-box; }
html { min-height:100%; background:var(--paper); color-scheme:light; }
body {
    min-height:100vh; margin:0; color:var(--txt); font-family:var(--font-body);
    background:
      radial-gradient(ellipse at 14% 17%,rgba(102,92,72,.09),transparent 34%),
      radial-gradient(ellipse at 87% 72%,rgba(82,78,62,.08),transparent 34%),
      linear-gradient(180deg,#f8f3ea 0%,#f3ede3 54%,#e9e0d2 100%);
    /* 不要用 background-attachment:fixed —— 安卓 WebView 上固定背景会渲染成黑色区域，
       半透明卡片叠上去整片发黑（"屏幕莫名变黑"的元凶） */
    overflow-x:hidden;
}
body::before {
    content:""; position:fixed; left:0; top:0; right:0; bottom:0; z-index:0; pointer-events:none; opacity:.58;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.075'/%3E%3C/svg%3E"),
      repeating-linear-gradient(1deg,transparent 0 4px,rgba(55,48,38,.015) 4px 5px);
}
body::after {
    content:""; position:fixed; left:0; right:0; bottom:0; height:34vh; z-index:0; pointer-events:none;
    opacity:.16; background-repeat:no-repeat; background-position:center bottom; background-size:100% 100%;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 330' preserveAspectRatio='none'%3E%3Cpath d='M0 235 Q120 145 245 213 T470 190 T705 230 T950 172 T1190 218 T1440 185V330H0Z' fill='%23232622' opacity='.25'/%3E%3Cpath d='M0 275 Q165 225 320 263 T650 242 T980 270 T1250 235 T1440 260V330H0Z' fill='%23171917' opacity='.33'/%3E%3C/svg%3E");
}
::selection { background:rgba(165,35,31,.18); color:var(--ink); }
a { color:var(--blue); text-decoration:none; transition:color var(--dur-fast),opacity var(--dur-fast); }
a:hover { color:var(--seal); }
h1,h2,h3,h4,.page-title,.game-title,.section-title { color:var(--ink); font-family:var(--font-gufeng); font-weight:700; }
h1 { font-size:26px; letter-spacing:.18em; }
h2 { letter-spacing:.12em; }
p,li,td { line-height:1.72; }
.muted { color:var(--muted)!important; }
.accent { color:var(--seal)!important; background:none!important; filter:none!important; }

/* 宣纸容器与四角墨线 */
/* 注意：不要给卡片/容器加 backdrop-filter —— 部分安卓内核会把它渲染成纯黑 */
.card,.dcard,.stat,.feature,.tile,.key-card,.hint,.round-card,.panel,.section-card,.apanel {
    position:relative; color:var(--txt); background:rgba(255,253,248,.93); border:1px solid var(--line);
    border-radius:1px; box-shadow:var(--shadow-paper);
}
.card,.dcard { overflow:hidden; }
.card::before,.dcard::before,.feature::before,.tile::before,.stat::before {
    content:""; position:absolute; left:7px; top:7px; width:15px; height:15px;
    border-left:2px solid var(--ink); border-top:2px solid var(--ink); background:none; opacity:.72; pointer-events:none;
}
.card::after,.dcard::after,.feature::after,.tile::after,.stat::after {
    content:""; position:absolute; right:7px; bottom:7px; width:15px; height:15px;
    border-right:2px solid var(--ink); border-bottom:2px solid var(--ink); background:none; opacity:.72; pointer-events:none;
}
.card:hover,.dcard:hover,.feature:hover,.tile:hover,.stat:hover { border-color:rgba(26,26,24,.65); box-shadow:7px 8px 0 rgba(26,26,24,.1); }

/* 印章式按钮 */
button,.btn {
    appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.42em;
    min-height:39px; padding:9px 22px; border:2px solid var(--ink); border-radius:1px;
    background:transparent; color:var(--ink); font:700 14px/1.2 var(--font-gufeng); letter-spacing:.12em;
    cursor:pointer; box-shadow:none; animation:none; transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast);
}
button::before,.btn::before { content:none; }
button:hover,.btn:hover { background:var(--ink); color:var(--paper-light); transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(26,26,24,.18); filter:none; }
button:active,.btn:active { transform:translate(0,0); box-shadow:none; }
button:disabled,.btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
button.danger,.btn.danger,.btn.primary,.seal-btn { background:var(--seal); border-color:var(--seal-dark); color:#fff8ed; }
button.danger:hover,.btn.danger:hover,.btn.primary:hover,.seal-btn:hover { background:var(--seal-dark); color:#fff; box-shadow:3px 3px 0 rgba(121,25,21,.2); }
.btn.ghost { background:rgba(255,253,248,.35); color:var(--ink); border-color:var(--ink); }
.btn.ghost:hover { background:var(--ink); color:var(--paper-light); }
button.small,.btn.small { min-height:31px; padding:6px 13px; font-size:12px; }

/* 书写式表单 */
input,select,textarea {
    width:100%; padding:10px 12px; border:0; border-bottom:1.5px solid rgba(26,26,24,.54); border-radius:0;
    outline:none; background:rgba(255,253,248,.48); color:var(--ink); font:14px/1.45 var(--font-body);
    box-shadow:none; transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast);
}
input:hover,select:hover,textarea:hover { border-color:var(--ink); }
input:focus,select:focus,textarea:focus { border-color:var(--seal); background:rgba(255,253,248,.9); box-shadow:0 2px 0 rgba(165,35,31,.12); }
input::placeholder,textarea::placeholder { color:#969284; }
label { color:var(--ink-soft); font-family:var(--font-gufeng); font-weight:700; letter-spacing:.08em; }

/* 账簿表格 */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line-soft); }
table { width:100%; border-collapse:collapse; color:var(--txt); background:rgba(255,253,248,.34); }
th,td { padding:10px 12px; border:1px solid var(--line-soft); text-align:left; }
th { color:var(--ink); background:rgba(58,57,51,.07); font-family:var(--font-gufeng); font-size:12px; letter-spacing:.12em; border-bottom:2px solid var(--ink); }
tr:hover td { background:rgba(165,35,31,.035); }

code { padding:2px 7px; color:var(--seal-dark); background:rgba(255,253,248,.7); border:1px solid var(--line-soft); border-radius:1px; }
pre { padding:17px; color:#282924; background:rgba(238,231,216,.72); border:1px solid var(--line); border-left:4px solid var(--ink); border-radius:1px; box-shadow:inset 8px 0 20px rgba(26,26,24,.03); }

.stats { display:flex; gap:12px; flex-wrap:wrap; }
.stat { flex:1; min-width:150px; padding:17px 18px; }
.stat .num,.dcard .kv .v,.dcard .kv .num { color:var(--seal-dark)!important; background:none!important; filter:none!important; font:700 23px/1.2 var(--font-gufeng); }
.stat .lbl,.dcard .kv .t { color:var(--muted); font-size:11px; letter-spacing:.15em; margin-top:6px; }
.badge,.pill { display:inline-block; padding:3px 10px; border:1px solid var(--line); border-radius:1px; background:rgba(255,253,248,.55); color:var(--ink-soft); font-size:11px; }
.badge.ok { color:var(--green); border-color:rgba(63,107,82,.5); }
.badge.off { color:var(--seal); border-color:rgba(165,35,31,.5); }
.flash { padding:11px 15px; margin-bottom:13px; border:1px solid var(--line); border-left:5px solid var(--ink); border-radius:0; background:rgba(255,253,248,.8); color:var(--ink); }
.flash.success { border-left-color:var(--green); color:#315442; background:rgba(63,107,82,.07); }
.flash.error { border-left-color:var(--seal); color:var(--seal-dark); background:rgba(165,35,31,.07); }
.key-text { color:var(--seal-dark); font-family:Consolas,monospace; }

/* 公共顶栏 */
.navbar {
    position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:22px;
    min-height:74px; padding:0 max(24px,calc((100vw - 1200px)/2));
    background:rgba(247,242,233,.97); border-bottom:2px solid var(--ink); box-shadow:0 3px 12px rgba(30,28,23,.05);
}
.navbar::after { content:""; position:absolute; left:0; right:0; bottom:-5px; height:3px; opacity:.12; background:linear-gradient(90deg,transparent,var(--ink),transparent); }
.navbar .logo { display:flex; align-items:center; font:700 29px/1 var(--font-gufeng); letter-spacing:.22em; white-space:nowrap; }
.navbar .logo a { color:var(--ink); }
.navbar .logo .skull,.side-logo .mark,.auth-box .brand .mark {
    display:inline-grid; place-items:center; width:42px; height:42px; margin-right:11px; border:2px solid var(--seal); border-radius:1px;
    color:#fff8ed; background:var(--seal); font:700 20px/1 var(--font-gufeng); transform:rotate(-2deg); box-shadow:inset 0 0 0 3px var(--paper-light); animation:seal-in .45s ease both;
}
.navbar .nav-right { display:flex; align-items:center; gap:3px; flex-wrap:wrap; }
.navbar .nav-right a { position:relative; padding:9px 15px; color:var(--ink-soft); font:700 14px var(--font-gufeng); letter-spacing:.08em; }
.navbar .nav-right a:not(.btn)::after { content:""; position:absolute; left:50%; right:50%; bottom:3px; height:2px; background:var(--ink); transition:left var(--dur-hover),right var(--dur-hover); }
.navbar .nav-right a:hover { color:var(--seal); background:transparent; }
.navbar .nav-right a:hover::after { left:28%; right:28%; }

/* 控制台书卷骨架 */
.sidebar { position:relative; color:var(--ink); background:#ece4d3; border-right:2px solid var(--ink); }
.sidebar::before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none; opacity:.12; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 900'%3E%3Cpath d='M0 760 Q55 660 100 735 T230 650V900H0Z' fill='%231a1a18'/%3E%3Cpath d='M0 810 Q70 750 125 795 T230 740V900H0Z' fill='%231a1a18' opacity='.55'/%3E%3C/svg%3E") bottom/100% 42% no-repeat; }
.sidebar::after { content:""; position:absolute; top:0; right:4px; width:1px; height:100%; background:rgba(26,26,24,.22); }
.side-logo { position:relative; z-index:1; border-bottom:1px solid var(--line); }
.side-logo .mark { width:38px; height:38px; margin:0; font-size:17px; }
.side-logo b { color:var(--ink)!important; font:700 17px var(--font-gufeng); letter-spacing:.15em; }
.side-group { position:relative; z-index:1; }
.side-group .cap { color:var(--ink-faint); letter-spacing:.28em; }
.side-group .cap::before { content:"—"; margin-right:5px; }
.side-group a { color:var(--ink-soft)!important; border-left:3px solid transparent; border-radius:0!important; }
.side-group a:hover { color:var(--seal)!important; background:rgba(255,253,248,.42)!important; transform:translateX(2px); }
.side-group a.on { color:var(--seal-dark)!important; background:linear-gradient(90deg,rgba(165,35,31,.1),transparent)!important; border-left-color:var(--seal); font-weight:700; }
.side-foot { position:relative; z-index:1; }
.side-foot .btn-logut { color:var(--seal-dark)!important; }
.topbar { background:rgba(247,242,233,.96); border-bottom:1px solid var(--ink); }
.page-title { color:var(--ink)!important; letter-spacing:.18em; }
.icon-btn { padding:0; border:1px solid var(--ink); color:var(--ink); background:transparent; }
.avatar { color:#fff8ed!important; background:var(--seal)!important; border:2px solid var(--paper-light); box-shadow:0 0 0 1px var(--seal); }
.uname { color:var(--ink)!important; }
.content,.container { position:relative; z-index:1; background:transparent!important; }
/* .layout/.main-col 绝不能加 z-index：会创建层叠上下文把侧栏锁进去，
   导致遮罩(z-19)反压住侧栏 —— 手机端"点菜单没反应、点哪都回弹"的根因 */
.layout,.main-col { background:transparent!important; }

/* 游戏大厅：水墨牌匾 */
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:17px; }
.tile { display:block; overflow:hidden; color:var(--ink); }
.tile:hover { transform:translateY(-4px); color:var(--ink); }
.tile .cover { position:relative; height:118px; display:grid; place-items:center; font-size:48px; filter:grayscale(.12); background:transparent!important; }
.tile .cover::before { content:""; position:absolute; inset:0; opacity:.17; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120'%3E%3Cpath d='M0 90 Q45 42 88 77 T164 65 T235 78 T300 52V120H0Z' fill='%231a1a18'/%3E%3C/svg%3E") bottom/100% 100% no-repeat; }
.tile .body { min-height:112px; padding:16px 18px 20px; border-top:1px solid var(--line-soft); background:rgba(255,253,248,.5); }
.tile .body b { display:block; margin-bottom:7px; color:var(--ink); font:700 18px var(--font-gufeng); letter-spacing:.16em; }
.tile .body p { color:var(--muted); font-size:12px; }
.tile .go,.tile .ribbon { position:absolute; z-index:4; padding:5px 10px; color:#fff8ed; background:var(--seal)!important; border:1px solid var(--seal-dark); border-radius:0; font:700 10px var(--font-gufeng); letter-spacing:.12em; }
.tile .go { top:10px; right:10px; }
.tile .ribbon { top:10px; left:10px; }

/* 认证卷轴 */
.auth-wrap { min-height:calc(100vh - 74px); display:grid; place-items:center; padding:45px 16px; }
.auth-box { width:100%; max-width:440px; padding:42px 38px; position:relative; overflow:visible; background:rgba(255,253,248,.88); border:1px solid var(--ink); border-radius:1px; box-shadow:10px 12px 0 rgba(26,26,24,.09); }
.auth-box::before,.auth-box::after { content:""; position:absolute; left:-14px; right:-14px; height:12px; border:1px solid var(--ink); background:#e7dcc9; }
.auth-box::before { top:-7px; }
.auth-box::after { bottom:-7px; }
.auth-box .brand { text-align:center; margin-bottom:28px; }
.auth-box .brand .mark { width:60px; height:60px; margin:0; font-size:28px; }
.auth-box .brand b { display:block; margin-top:14px; color:var(--ink); font:700 23px var(--font-gufeng); letter-spacing:.22em; }
.auth-box .brand span:last-child { display:block; margin-top:7px; color:var(--muted); font-size:12px; letter-spacing:.2em; }

@media(max-width:860px){
    .navbar { position:relative; min-height:64px; padding:8px 13px; flex-wrap:wrap; gap:4px; }
    .navbar .logo { font-size:19px; letter-spacing:.12em; }
    .navbar .logo .skull { width:34px; height:34px; font-size:16px; margin-right:7px; }
    .navbar .nav-right { width:100%; justify-content:center; border-top:1px solid var(--line-soft); padding-top:3px; }
    .navbar .nav-right a { padding:7px 8px; font-size:12px; }
    .container,.content { padding-left:12px!important; padding-right:12px!important; }
    .game-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
    .tile .cover { height:82px; font-size:36px; }
    .tile .body { min-height:74px; padding:11px 12px 13px; }
    .tile .body b { font-size:14px; letter-spacing:.08em; }
    .tile .body p { display:none; }
    .stats { gap:9px; }
    .stat { min-width:calc(50% - 5px); padding:13px; }
    .auth-wrap { min-height:auto; padding:34px 12px; }
    .auth-box { padding:30px 20px; }
    input,select,textarea { font-size:16px; }
    h1 { font-size:21px!important; }
}
@media(max-width:390px){ .game-grid{grid-template-columns:1fr}.stat{min-width:100%} }

/* ============================================================
   手机端窄屏补充适配（≤760px）
   救援各页面内联固定宽度的控件，防止右侧溢出/横向滚动
   ============================================================ */
@media (max-width: 760px) {
    /* 宽表格：滚动容器内保持表格布局（>=5 列宽表给最小可读宽度） */
    .tbl-wrap table { min-width: 100%; }
    .tbl-wrap table.tbl-wide { min-width: 560px; }
    th, td { padding: 8px 9px; font-size: 12px; }

    /* 管理后台：搜索框与批量操作下拉全宽 */
    .usearch input { width: 100%; }
    .ubatch-bar select, .lbatch-bar select { width: 100% !important; min-width: 0 !important; }

    /* 借贷页钱包：数字与筹码两列排布 */
    .hero-num { font-size: 30px; }
    .hero-side { width: 100%; }
    .hchip { flex: 1 1 calc(50% - 6px); min-width: calc(50% - 6px); }

    /* 借贷页：内联固定宽表单（240px 下拉/150px 输入）改全宽，杜绝右侧溢出 */
    .card input[style*="width:1"] { width: 100% !important; flex: 1 1 100%; }
    .card select[style*="min-width"] { width: 100% !important; min-width: 0 !important; flex: 1 1 100%; }

    /* 令牌管理：操作按钮区换行铺满 */
    .key-card { padding: 12px; }
    .key-card .ops { margin-left: 0; width: 100%; }
    .key-card .ops .btn, .key-card .ops button { flex: 1; }
}
@media (max-width: 380px) {
    .hchip { flex-basis: 100%; min-width: 100%; }
}
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }