/* ===== On a Break 仲裁庭 前端页 · 案卷风 =====
   设计语言：法庭案卷——打字机字体、案卷编号、内框虚线、判决印章。
   三选项主题色：YES 红 #e84a5f / NO 蓝 #4650c9 / COMPLICATED 紫 #6d4aa6，
   金色 #d9a90d 为本庭公务色。
   弹幕层恒顶层（fixed 层叠上下文，层 z40 压过卡片 z10），
   pointer-events 穿透，不盖按钮/输入框由车道避让保证。 */

@font-face{
  font-family:Typewriter;
  src:url('/assets/fonts/american-typewriter.woff2') format('woff2'),
      url('/assets/fonts/american-typewriter.ttf') format('truetype');
  font-weight:400;font-display:swap;
}
@font-face{
  font-family:Typewriter;
  src:url('/assets/fonts/american-typewriter-bold.woff2') format('woff2'),
      url('/assets/fonts/american-typewriter-bold.ttf') format('truetype');
  font-weight:700;font-display:swap;
}

/* 页面氛围：顶部金晕 + 底部红晕的暗色法庭 */
.ob-app{position:relative;overflow-x:hidden;}
.ob-app::before{
  content:'';position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(217,169,13,.09), transparent 62%),
    radial-gradient(900px 460px at 50% 112%, rgba(232,74,95,.06), transparent 60%);
}
.ob-main{position:relative;}

/* 案卷卡：方正、金框、内虚线（证书感） */
.ob-card{
  position:relative;z-index:10;
  width:100%;max-width:420px;margin:34px auto 0;padding:26px 26px 24px;
  background:linear-gradient(180deg,#1e1a16,#151210);
  border:1px solid rgba(217,169,13,.4);border-radius:8px;
  box-shadow:0 26px 64px rgba(0,0,0,.55);
}
.ob-card::before{
  content:'';position:absolute;inset:9px;pointer-events:none;
  border:1px dashed rgba(217,169,13,.28);border-radius:5px;
}

/* 案卷编号行 */
.ob-case{
  display:flex;justify-content:space-between;gap:10px;
  padding-bottom:10px;margin-bottom:18px;
  border-bottom:1px solid rgba(217,169,13,.3);
  font-family:Typewriter,Courier New,monospace;font-size:11px;
  letter-spacing:.14em;color:rgba(217,169,13,.8);
}
/* 案号脚注（投票卡底部） */
.ob-case-no{
  margin-top:14px;padding-top:10px;
  border-top:1px dashed rgba(217,169,13,.25);
  font-family:Typewriter,Courier New,monospace;font-size:11px;
  letter-spacing:.14em;color:rgba(217,169,13,.55);text-align:right;
}

/* 提问 */
.ob-question{
  margin:0 0 6px;font-family:Typewriter,Courier New,monospace;
  font-size:22px;font-weight:700;color:#f0ead8;text-align:center;
}
.ob-question-cn{
  margin:0 0 20px;font-size:13px;text-align:center;color:rgba(240,234,216,.5);
}

/* 三个选项：传票式横排，左色轨 + 悬停点亮 */
.ob-options{display:flex;flex-direction:column;gap:12px;}
.ob-opt{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;padding:15px 18px;border-radius:8px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);
  border-left-width:4px;border-left-style:solid;
  font-family:Typewriter,Courier New,monospace;
  font-size:15px;font-weight:700;letter-spacing:.08em;color:#f0ead8;
  cursor:pointer;text-align:left;
  transition:transform .1s,background .2s,border-color .2s;
}
.ob-opt::after{content:'›';font-size:18px;opacity:.4;transition:opacity .2s,transform .2s;}
.ob-opt:hover{transform:translateX(3px);}
.ob-opt:hover::after{opacity:.9;transform:translateX(2px);}
.ob-opt:active{transform:scale(.98);}
.ob-opt:disabled{opacity:.4;cursor:default;transform:none;}
.ob-opt--yes{border-left-color:#e84a5f;}
.ob-opt--no{border-left-color:#4650c9;}
.ob-opt--complicated{border-left-color:#6d4aa6;}
.ob-opt--yes:hover{background:rgba(232,74,95,.12);border-color:rgba(232,74,95,.5);border-left-color:#e84a5f;}
.ob-opt--no:hover{background:rgba(70,80,201,.12);border-color:rgba(70,80,201,.5);border-left-color:#4650c9;}
.ob-opt--complicated:hover{background:rgba(109,74,166,.12);border-color:rgba(109,74,166,.5);border-left-color:#6d4aa6;}
.ob-hint{margin:16px 0 0;font-size:13px;text-align:center;color:rgba(240,234,216,.45);}

/* 判决结果区 */
.ob-verdict-head{position:relative;margin-bottom:16px;}
.ob-bar-row{
  display:grid;grid-template-columns:100px 1fr 52px;align-items:center;gap:10px;
  padding:4px 0;
}
.ob-bar-label{
  font-family:Typewriter,Courier New,monospace;
  font-size:12px;letter-spacing:.05em;color:rgba(240,234,216,.65);text-align:right;
}
.ob-bar-track{
  position:relative;height:14px;border-radius:7px;
  background:rgba(255,255,255,.07);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.ob-bar-fill{
  position:absolute;inset:0 auto 0 0;width:0;border-radius:7px;
  transition:width .6s ease;
}
.ob-bar-fill::after{ /* 亮色端头 */
  content:'';position:absolute;top:0;bottom:0;right:0;width:3px;
  background:rgba(255,255,255,.35);
}
.ob-bar-row[data-choice="yes"] .ob-bar-fill{background:linear-gradient(90deg,#b23548,#e84a5f);}
.ob-bar-row[data-choice="no"] .ob-bar-fill{background:linear-gradient(90deg,#37409e,#4650c9);}
.ob-bar-row[data-choice="complicated"] .ob-bar-fill{background:linear-gradient(90deg,#553a86,#6d4aa6);}
.ob-bar-pct{font-family:Typewriter,Courier New,monospace;font-size:13px;color:#f0ead8;}
.ob-total{
  margin:12px 0 0;padding-top:10px;
  border-top:1px dashed rgba(217,169,13,.25);
  font-family:Typewriter,Courier New,monospace;
  font-size:13px;color:rgba(240,234,216,.55);text-align:center;letter-spacing:.06em;
}

/* 判决印章：投票后盖在案卷右上角 */
.ob-stamp{
  position:absolute;top:-6px;right:-4px;z-index:3;
  padding:8px 12px;transform:rotate(9deg);
  border:3px double var(--ink,#d9a90d);border-radius:8px;
  font-family:Typewriter,Courier New,monospace;
  font-size:17px;font-weight:700;letter-spacing:.12em;white-space:nowrap;
  color:var(--ink,#d9a90d);
  animation:obStampIn .5s cubic-bezier(.2,1.5,.45,1);
  pointer-events:none;
}
.ob-stamp--yes{--ink:#e84a5f;}
.ob-stamp--no{--ink:#5b6ef5;}
.ob-stamp--complicated{--ink:#a98fd8;font-size:13px;}
@keyframes obStampIn{
  0%{transform:rotate(9deg) scale(2.6);opacity:0;}
  55%{opacity:1;}
  100%{transform:rotate(9deg) scale(1);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .ob-stamp{animation:none;}
}

/* 旁听席留言 */
.ob-comment{
  display:flex;flex-direction:column;gap:10px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(217,169,13,.25);
}
.ob-comment-title{
  font-family:Typewriter,Courier New,monospace;
  font-size:11px;letter-spacing:.16em;color:rgba(217,169,13,.7);
}
.ob-text{
  width:100%;padding:12px 14px;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);color:#f0ead8;
  font-family:Typewriter,Courier New,monospace;
  font-size:14px;outline:none;transition:border-color .2s,background .2s;
}
.ob-text::placeholder{color:rgba(240,234,216,.35);}
.ob-text:focus{border-color:#d9a90d;background:rgba(0,0,0,.38);}
.ob-comment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.ob-color-toggle{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:rgba(240,234,216,.65);cursor:pointer;
}
.ob-color-toggle input{accent-color:#d9a90d;}
.ob-send{
  padding:10px 24px;border:1px solid rgba(217,169,13,.55);border-radius:6px;
  background:linear-gradient(180deg,#e5b62a,#c9970e);
  color:#221a08;font-family:Typewriter,Courier New,monospace;
  font-size:14px;font-weight:700;letter-spacing:.08em;cursor:pointer;
  transition:transform .1s,filter .2s;
}
.ob-send:hover{filter:brightness(1.08);}
.ob-send:active{transform:scale(.96);}
.ob-send:disabled{opacity:.5;cursor:default;}
.ob-error{margin:10px 0 0;font-size:13px;color:#e84a5f;min-height:18px;text-align:center;}

/* 落款小字 */
.ob-fineprint{
  margin:18px auto 0;max-width:420px;text-align:center;
  font-family:Typewriter,Courier New,monospace;
  font-size:11px;letter-spacing:.08em;color:rgba(240,234,216,.35);
}

/* ===== 弹幕层（旁听席）：恒顶层，不拦截点击 ===== */
.dm-layer{
  position:fixed;inset:0;z-index:40;
  overflow:hidden;pointer-events:none;
}
.dm-pill{
  position:absolute;left:100vw;z-index:40;
  white-space:nowrap;padding:6px 14px;border-radius:6px;
  font-family:Typewriter,Courier New,monospace;
  font-size:13px;line-height:1.4;
  will-change:transform;
  animation:dmScroll linear forwards;
  background:rgba(16,14,12,.85);color:rgba(240,234,216,.88);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.dm-pill--yes{border-color:#e84a5f;background:rgba(40,16,18,.88);color:#ffd7dc;}
.dm-pill--no{border-color:#4650c9;background:rgba(16,17,34,.88);color:#d7dcff;}
.dm-pill--complicated{border-color:#6d4aa6;background:rgba(28,20,38,.88);color:#e2d7ff;}
@keyframes dmScroll{
  from{transform:translateX(0);}
  to{transform:translateX(calc(-100vw - 100%));}
}
@media (prefers-reduced-motion: reduce){
  .dm-pill{animation:none;left:auto;right:16px;}
}

/* ===== 返回链接固定在视口底部，正文预留空间避免遮挡 ===== */
/* iOS 全屏铺满一律 100svh，禁用 vh/dvh（2026-10-02 Bamboozled 踩坑） */
.ob-app{min-height:100svh;display:flex;flex-direction:column;box-sizing:border-box;}
.ob-app .ob-main{flex:1;display:flex;flex-direction:column;width:100%;padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px));}
.ob-app .admin-links{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  margin:0;padding:12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events:none;
}
.ob-app .admin-links .admin-link{pointer-events:auto;text-decoration:none;}