/* CyberFish world — peripheral, monochrome HUD. The picture is the canvas; words stay at the edges. */
:root {
  --bg: #010102; --ink: #e6e3dc; --mut: #8f8b84; --dim: #57544f; --line: rgba(255, 255, 255, .085);
  --panel: rgba(6, 6, 8, .66); --keep: #93c29d; --drop: #d98a7f; --rev: #d3b16c; --front: #ffae70;
  --f: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden; font: 12.5px/1.6 var(--f); }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: grab; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.cf-hide { display: none !important; }
.cf-mut { color: var(--mut); }
p { margin: .2em 0; }
button, select, input { font: inherit; color: var(--ink); }

.cf-head { position: absolute; left: 20px; top: 16px; max-width: min(560px, 60vw); pointer-events: none; }
.cf-title { font-size: 15px; letter-spacing: .06em; }
.cf-sub { color: var(--mut); font-size: 11.5px; }
.cf-status { color: var(--dim); font-size: 11px; margin-top: 4px; }

.cf-loop { position: absolute; left: 16px; bottom: 16px; width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 150px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px 12px; backdrop-filter: blur(6px); }
.cf-phase { color: var(--dim); font-size: 11px; letter-spacing: .08em; margin-bottom: 4px; }
.cf-sec { padding: 7px 0 6px; border-top: 1px solid var(--line); }
.cf-sec:first-of-type { border-top: 0; }
.cf-lab { color: var(--mut); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.cf-dir { font-size: 13.5px; line-height: 1.55; }
.cf-claim { color: #cfcac0; }
.cf-note { color: #e9e5dd; margin-top: 5px; }
.cf-tag { font-size: 10.5px; padding: 0 5px; border: 1px solid var(--line); border-radius: 3px; }
.cf-tag.rev { color: var(--rev); }
.cf-evs { display: grid; gap: 3px; margin-top: 3px; }
.cf-ev { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 8px; color: var(--mut); font-size: 11px; }
.cf-ev.top { color: var(--ink); }
.cf-ev i { display: block; height: 3px; background: rgba(217, 138, 127, .75); border-radius: 2px; transition: width .6s; }
.cf-ev i.pos { background: rgba(147, 194, 157, .8); }
.cf-verdict { font-size: 17px; letter-spacing: .2em; margin-top: 4px; }
.cf-verdict.inline { font-size: 12px; letter-spacing: .1em; margin: 0 0 0 4px; }
.v-KEEP { color: var(--keep); } .v-DROP { color: var(--drop); } .v-REVISE { color: var(--rev); }
.cf-gateinfo { color: var(--mut); margin-bottom: 6px; }
.cf-reason { width: 100%; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; margin-bottom: 6px; }
.cf-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cf-b { background: rgba(255, 255, 255, .045); border: 1px solid var(--line); border-radius: 6px; padding: 4px 11px; cursor: pointer; }
.cf-b:hover { border-color: rgba(255, 255, 255, .25); }
.cf-b.keep { color: var(--keep); } .cf-b.drop { color: var(--drop); } .cf-b.rev { color: var(--rev); }
.cf-b.sm { padding: 3px 8px; font-size: 11.5px; }
.cf-b.ghost { color: var(--mut); }
.cf-sel { background: rgba(10, 10, 12, .9); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; font-size: 11.5px; }

.cf-side { position: absolute; right: 14px; top: 14px; bottom: 116px; width: 340px; display: none; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; backdrop-filter: blur(6px); overflow: hidden; }
body.cf-sideopen .cf-side { display: flex; }
.cf-sidetoggle { position: absolute; right: 14px; top: 14px; z-index: 3; width: 30px; height: 30px; border-radius: 7px; background: var(--panel);
  border: 1px solid var(--line); cursor: pointer; color: var(--mut); }
body.cf-sideopen .cf-sidetoggle { right: 362px; }
.cf-tabs { display: flex; border-bottom: 1px solid var(--line); }
.cf-tab { flex: 1; background: none; border: 0; padding: 8px 0; cursor: pointer; color: var(--mut); font-size: 12px; }
.cf-tab.on { color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
.cf-pane { overflow: auto; padding: 10px 12px; flex: 1; }
.cf-list { display: grid; gap: 2px; margin-top: 6px; }
.cf-li { display: flex; gap: 7px; align-items: baseline; padding: 2px 4px; border-radius: 4px; cursor: pointer; font-size: 11.5px; }
.cf-li:hover { background: rgba(255, 255, 255, .05); }
.cf-li.pre { opacity: .6; }
.cf-g { color: var(--dim); min-width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.cf-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; background: currentColor; }
.cf-k { min-width: 46px; }
.cf-hm { color: var(--front); font-size: 9px; }
.cf-st { color: var(--dim); margin-left: auto; }
.cf-revitem { border-top: 1px solid var(--line); padding: 7px 0; }
.cf-revitem.vetoed { opacity: .6; }
.cf-census div { display: grid; grid-template-columns: 76px 1fr 28px; gap: 8px; align-items: center; }
.cf-census i { height: 3px; background: rgba(230, 227, 220, .6); border-radius: 2px; }
.cf-census b { font-weight: 400; color: var(--mut); text-align: right; }
.cf-q { font-size: 13.5px; margin: 0 0 10px; }
.cf-pane ul { margin: 2px 0 10px; padding-left: 16px; color: #cfc9be; }
.cf-pane ul.forbid li { color: #d7aaa3; }

.cf-ctrl { position: absolute; right: 14px; bottom: 14px; display: grid; gap: 5px; justify-items: end; max-width: calc(100vw - 440px); }
.cf-views { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

.cf-toasts { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); display: grid; gap: 4px; justify-items: center; pointer-events: none; width: min(560px, 80vw); }
.cf-toast { background: rgba(0, 0, 0, .55); border: 1px solid var(--line); border-radius: 14px; padding: 3px 12px; color: #d9d5cd; font-size: 11.5px; transition: opacity 1.6s; text-align: center; }
.cf-toast.front { color: var(--front); }
.cf-toast.rev { color: var(--rev); }
.cf-fade { opacity: 0; }

.cf-rev { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(460px, calc(100vw - 32px)); background: rgba(8, 8, 10, .86);
  border: 1px solid rgba(211, 177, 108, .35); border-radius: 10px; padding: 10px 14px; backdrop-filter: blur(6px); z-index: 4; }
.cf-rev p { font-size: 12px; }
.cf-rev b { color: var(--mut); font-weight: 400; margin-right: 4px; }

.cf-fishcard { position: absolute; left: 20px; top: 92px; width: 250px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.cf-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: var(--dim); font-size: 11px; transition: opacity 2s; pointer-events: none; white-space: nowrap; }
.cf-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); letter-spacing: .15em; background: var(--bg); pointer-events: none; text-align: center; padding: 20px; }

body.bare #ui { display: none; }

@media (max-width: 900px) {
  .cf-head { max-width: calc(100vw - 80px); }
  .cf-ctrl { max-width: calc(100vw - 28px); right: 14px; bottom: auto; top: 128px; }
  .cf-loop { max-height: 44vh; }
  .cf-side { left: 14px; right: 14px; width: auto; top: 56px; bottom: 50vh; }
  body.cf-sideopen .cf-sidetoggle { right: 14px; }
  .cf-hint { display: none; }
  .cf-fishcard { top: auto; bottom: calc(44vh + 30px); }
}