/* 喝酒局 · 纯前端 MVP — 共享底座（v3.3 浅色牌面） */
:root{
  --paper:#F7EFE2;--paper-2:#EFE2CE;--white:#FFFBF3;
  --ink:#1B1512;--ink-2:#5D4C3E;--ink-3:#75604D;
  --orange:#F26B38;--yellow:#F5B942;--ox:#B3453F;
  --green:#3E6B5A;--blue:#3E7C9A;--darkbox:#080605;
  --desk:#141110;--desk-ring:#221D1A;
  --font:-apple-system,BlinkMacSystemFont,'PingFang SC','HarmonyOS Sans SC','Source Han Sans SC','Microsoft YaHei',sans-serif;
  --mono:'SF Mono','Cascadia Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:16px;--r-lg:20px;--r-btn:14px;
  --sh-card:4px 4px 0 var(--ink);
  --sh-btn:4px 4px 0 rgba(27,21,18,.22);
  --dock-bg:rgba(27,21,18,.06);
  --btn-bg:var(--ink);--btn-fg:var(--paper);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font);font-size:13px;line-height:1.5;overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
svg{display:block}
.mono{font-family:var(--mono)}
.hide{display:none!important}
/* 100vh 兜底：旧版安卓 WebView / 系统浏览器不支持 dvh */
.app{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);color:var(--ink)}
.app[data-tone="yellow"]{background:var(--yellow);color:var(--ink)}
.app[data-tone="orange"]{background:var(--orange);color:var(--ink)}
.app[data-tone="ox"]{background:var(--ox);color:var(--white)}
.app[data-tone="paper"]{background:var(--paper);color:var(--ink)}
.app[data-tone="blue"]{--white:#FFFFFF;background:var(--blue);color:var(--white);--btn-bg:var(--white);--btn-fg:var(--ink);--dock-bg:rgba(27,21,18,.14)}
.app[data-tone="green"]{--white:#FFFFFF;background:var(--green);color:var(--white);--btn-bg:var(--white);--btn-fg:var(--ink);--dock-bg:rgba(27,21,18,.14)}
.app[data-tone="ink"]{--white:#FFFFFF;background:var(--ink);color:var(--white);--btn-bg:var(--white);--btn-fg:var(--ink);--dock-bg:rgba(255,255,255,.10)}
.app[data-tone="paper2"]{background:var(--paper-2);color:var(--ink)}
/* 深色舞台白字：次要文字不再降透明度，守住 >=4.5:1 */
.app[data-tone="blue"] .gb__sub,.app[data-tone="blue"] .st-top__meta,.app[data-tone="blue"] .hint,
.app[data-tone="ox"] .gb__sub,.app[data-tone="ox"] .st-top__meta,.app[data-tone="ox"] .hint,
.app[data-tone="green"] .gb__sub,.app[data-tone="green"] .st-top__meta,.app[data-tone="green"] .hint,
.app[data-tone="ink"] .gb__sub,.app[data-tone="ink"] .st-top__meta,.app[data-tone="ink"] .hint{opacity:1}
/* 桌面预览壳：宽且高才套手机框。手机横屏（844x390）虽然也够宽，但高度不足，此时应铺满整屏 */
@media(min-width:500px) and (min-height:600px){
  body{background:var(--desk);padding:26px 0}
  .app{width:390px;min-height:calc(100vh - 52px);min-height:calc(100dvh - 52px);margin:0 auto;border-radius:44px;box-shadow:0 0 0 8px var(--desk-ring),0 26px 60px rgba(0,0,0,.5)}
}

/* ---- 顶栏（仅大厅） ---- */
.topbar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(14px + env(safe-area-inset-top, 0px)) 16px 6px}
.topbar__meta{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em;opacity:.8}
.topbar__right{display:flex;align-items:center;gap:8px}
.tbtn{min-height:44px;padding:0 12px;border:2px solid var(--ink);border-radius:9px;background:var(--orange);color:var(--ink);font-size:12px;font-weight:900;box-shadow:3px 3px 0 var(--ink);display:flex;align-items:center;justify-content:center;gap:6px}
.tbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tbtn--icon{width:44px;padding:0;background:var(--white)}

/* ---- 游戏内返回条 ---- */
.ghostbar{flex-shrink:0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top, 0px)) 18px 6px}
.gback{width:44px;height:44px;border:2px solid currentColor;border-radius:12px;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 rgba(27,21,18,.35)}
.gback:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(27,21,18,.35)}
.gb__title{text-align:center;font-size:13px;font-weight:900;line-height:1.2}
.gb__sub{text-align:center;font-family:var(--mono);font-size:10px;opacity:.9;letter-spacing:.04em}
.gb__right{justify-self:end;font-family:var(--mono);font-size:10px;font-weight:700;border:2px solid currentColor;border-radius:9px;min-height:44px;padding:0 12px;display:flex;align-items:center;white-space:nowrap;font-size:11px;opacity:1}

/* ---- 舞台三段：状态行 / 舞台 / 操作台 ---- */
.stage{flex:1;min-height:0;display:flex;flex-direction:column}
.st-top{flex-shrink:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 18px 4px;font-size:12px;font-weight:700}
.st-top__n{font-size:24px;font-weight:900;letter-spacing:-1px;margin-left:8px}
.st-top__meta{font-family:var(--mono);font-size:10px;font-weight:700;opacity:.85;letter-spacing:.04em}
.st-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14px 18px;overflow-y:auto;overscroll-behavior:contain}
.dock{flex-shrink:0;border-top:2px solid currentColor;padding:12px 18px calc(12px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;background:var(--dock-bg)}
.hint{font-size:12px;line-height:1.5;opacity:.9}
.btn{min-height:48px;padding:0 12px;border:2px solid var(--ink);border-radius:var(--r-btn);background:var(--btn-bg);color:var(--btn-fg);font-size:16px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--sh-btn);text-align:center}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(27,21,18,.22)}
.btn--ghost{background:transparent;color:inherit;border-color:currentColor;box-shadow:none;font-size:13px;min-height:44px}
.btn--ghost:active{transform:none;box-shadow:none;opacity:.7}
.btn--sm{min-height:44px;font-size:13px}
.link{min-height:44px;min-width:44px;justify-content:center;display:flex;align-items:center;font-family:var(--mono);font-size:11px;font-weight:700;text-decoration:underline;opacity:.85}
.rowline{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ---- 设置面板 / 遮罩 ---- */
.mask{position:fixed;inset:0;z-index:30;background:rgba(27,21,18,.55);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:390px;max-height:86dvh;overflow-y:auto;background:var(--paper);color:var(--ink);border-top:3px solid var(--ink);border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
.sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sheet__title{font-size:22px;font-weight:900;letter-spacing:-1px}
.sheet__done{min-height:34px;padding:0 12px;background:var(--white);border:2px solid var(--ink);border-radius:9px;font-size:12px;font-weight:900}
.field{margin-top:18px}
.field__label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;opacity:.65;margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{min-height:38px;padding:0 14px;border:2px solid var(--ink);border-radius:9px;background:var(--white);font-size:13px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.tag.is-on{background:var(--orange);color:var(--ink)}
.tag.is-warn{background:var(--ox);color:var(--white);border-color:var(--ox)}
.sw{width:46px;height:26px;border:2px solid var(--ink);border-radius:14px;background:var(--white);position:relative;flex-shrink:0}
.sw__knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--ink);transition:transform .15s}
.sw.is-on{background:var(--orange)}
.sw.is-on .sw__knob{transform:translateX(20px)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:12px}
.swrow__name{font-size:14px;font-weight:900}
.warnbox{margin-top:12px;padding:10px 12px;border:2px solid var(--ox);border-radius:10px;background:rgba(179,69,63,.08);font-size:11px;line-height:1.5}
.range{margin-top:10px;font-family:var(--mono);font-size:12px;font-weight:700}
.sheet__foot{margin-top:22px}

/* ---- 选人抽屉 ---- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pseat{min-height:48px;border:2px solid var(--ink);border-radius:10px;background:var(--white);box-shadow:3px 3px 0 var(--ink);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:6px;position:relative}
.pseat:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pseat.is-winner{background:var(--orange)}
.pseat__badge{font-family:var(--mono);font-size:9px;font-weight:700;border:1px solid currentColor;border-radius:4px;padding:1px 4px}
.pnote{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.06em;opacity:.7;margin-top:4px}

/* ---- 18+ 年龄门 ---- */
.gate{position:fixed;inset:0;z-index:50;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center}
.gate__badge{font-family:var(--mono);font-size:64px;font-weight:900;letter-spacing:-4px;color:var(--orange);border:3px solid var(--orange);padding:6px 16px;border-radius:16px;transform:rotate(-2deg)}
.gate__title{font-size:26px;font-weight:900;line-height:1.2}
.gate__desc{font-size:13px;opacity:.75;max-width:280px;line-height:1.6}
.gate .btn{background:var(--orange);color:var(--ink);border-color:var(--paper);min-width:200px}

/* ---- toast / modal ---- */
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(8px);z-index:60;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:10px;font-family:var(--mono);font-size:12px;font-weight:700;max-width:calc(100% - 48px);text-align:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.is-on{opacity:1;transform:translateX(-50%) translateY(0)}
.modal{position:fixed;inset:0;z-index:40;background:rgba(27,21,18,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.modal__card{width:100%;max-width:320px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:20px;box-shadow:6px 6px 0 rgba(0,0,0,.35)}
.modal__title{font-size:18px;font-weight:900;margin-bottom:8px}
.modal__body{font-size:13px;line-height:1.6;opacity:.8}
.modal__btns{display:flex;gap:8px;margin-top:18px}
.modal__btns .btn{flex:1;min-height:44px;font-size:14px}

/* ---- 图标 ---- */
.ico{width:24px;height:24px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico--sm{width:14px;height:14px}
.ico--lg{width:34px;height:34px;stroke-width:1.8}
.ico--xl{width:120px;height:120px;stroke-width:1.4}

/* 音效开关：顶栏 44×44 图标按钮，静音时降透明度 */
.gback--sfx,.tbtn--sfx{transition:opacity .15s}
.gback--sfx.is-off,.tbtn--sfx.is-off{opacity:.45}