/* 笏 tablet — court dark. drag the threshold; watch judgment happen. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#040304}
body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff5ee;line-height:1.65;font-size:16px;overflow-x:hidden;-webkit-user-select:none;user-select:none}
.ghost{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;font-size:64vw;line-height:1;color:#10a0a0;opacity:.06;pointer-events:none;user-select:none;z-index:0}
main{position:relative;z-index:1;max-width:38em;margin:0 auto;padding:2.2em 1.2em 4em}
.home{font-size:.85em;margin:0 0 1.6em}
.home a{color:#10a0a0;text-decoration:none}
.home a:hover{text-decoration:underline}
.seat{color:#9a8f9a;font-size:.85em;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .4em}
h1{font-size:1.7em;font-weight:400;margin:0 0 .5em}
h1 .zh{color:#10a0a0}
#readout{font-size:.95em;margin:0 0 .3em;font-variant-numeric:tabular-nums}
#readout b{color:#10a0a0;font-weight:400}
#presets{display:flex;gap:.6em;margin:.8em 0 1.6em;flex-wrap:wrap}
#presets button{font:inherit;font-size:.82em;background:none;border:1px solid #211921;border-radius:20px;padding:5px 13px;color:#9a8f9a;cursor:pointer}
#presets button:hover,#presets button.on{border-color:#10a0a0;color:#fff5ee}
#field{position:relative;border-top:1px solid #211921}
.case{display:flex;gap:.7em;align-items:baseline;padding:.5em .2em;border-bottom:1px solid #211921;transition:opacity .22s ease,filter .22s ease}
.case .pct{color:#9a8f9a;font-size:.82em;min-width:3.2em;font-variant-numeric:tabular-nums}
.case .pill{font-size:.7em;letter-spacing:.1em;padding:.18em .55em;border:1px solid;border-radius:10px;white-space:nowrap}
.pill.allow{color:#10a0a0;border-color:#10a0a0}
.pill.ask{color:#e8a33d;border-color:#e8a33d}
.pill.deny{color:#c8402a;border-color:#c8402a}
.case .label{flex:1;font-size:.88em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.case .mark{font-size:.85em;min-width:1.4em;text-align:right}
.mark.ok{color:#10a0a0}
.mark.no{color:#c8402a}
.case .esc-tag{display:none;font-size:.72em;color:#9a8f9a;letter-spacing:.08em;white-space:nowrap}
.case.esc{opacity:.36;filter:grayscale(.7)}
.case.esc .esc-tag{display:inline}
.case.esc .mark{visibility:hidden}
#tline{position:absolute;left:0;right:0;height:0;border-top:2px solid #fff5ee;z-index:2;cursor:ns-resize;touch-action:none}
#tline::before{content:"";position:absolute;left:0;right:0;top:-14px;height:28px}
#tline .tval{position:absolute;left:0;top:-1.7em;font-size:.75em;color:#fff5ee;background:#040304;padding:0 .4em 0 0;font-variant-numeric:tabular-nums}
#tline .grip{position:absolute;right:2px;top:-16px;width:16px;height:32px;background:#fff5ee;border-radius:3px;box-shadow:0 0 10px rgba(255,245,238,.35)}
#pline{position:absolute;left:0;right:0;height:0;border-top:1px dashed #10a0a0;opacity:.7;pointer-events:none}
#pline span{position:absolute;right:0;top:-1.6em;font-size:.72em;color:#10a0a0;letter-spacing:.06em}
#essay{margin-top:2.5em;border-top:1px solid #211921;padding-top:1.2em}
#essay h1{display:none}
#essay h2{font-size:.95em;font-weight:400;color:#9a8f9a;margin:1.2em 0 .4em;letter-spacing:.08em;text-transform:uppercase}
#essay p{margin:.7em 0;font-size:.92em}
#essay strong{color:#fff5ee}
#badge{margin-top:2em;font-size:12px;color:#9a8f9a;opacity:.7}
#flash{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;background:radial-gradient(ellipse at 50% 40%,var(--fc,#10a0a0) 0%,transparent 65%);transition:opacity 1.6s ease}
#flash.on{opacity:.28;transition:opacity .25s ease}
#oracle{display:flex;gap:.6em;margin:0 0 .4em}
#oracle-input{flex:1;font:inherit;font-size:.9em;background:#0a0908;border:1px solid #211921;border-radius:6px;color:#fff5ee;padding:.6em .8em;outline:none}
#oracle-input:focus{border-color:#10a0a0}
#oracle-go{font:inherit;font-size:.85em;background:none;border:1px solid #10a0a0;border-radius:6px;color:#10a0a0;padding:.6em 1.1em;cursor:pointer}
#oracle-go:hover{background:#10a0a0;color:#040304}
#oracle-go:disabled{opacity:.4;cursor:wait}
#oracle-status{font-size:.85em;color:#9a8f9a;min-height:1.5em;margin:0 0 1em}
#oracle-status b{font-weight:400}
#oracle-status .v-allow{color:#10a0a0}#oracle-status .v-ask{color:#e8a33d}#oracle-status .v-deny{color:#c8402a}
#live{margin-top:1.6em;border-top:1px dashed #211921;padding-top:.8em}
#live h3{font-size:.8em;font-weight:400;color:#9a8f9a;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .4em}
#live .case{animation:slidein .4s ease}
@keyframes slidein{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:700px){.case .label{font-size:.8em}body{font-size:15px}}