/* Gallery wall: each work hangs as a plate with a museum-style wall label; the verdict stamps onto it. */
:root{
  --wall:#ECEEEE; --plate:#F8F9F9; --ink:#15171A; --muted:#5C6168; --line:#C9CDD0;
  --real:#15171A; --ai:#0F62FE; --ok:#1F7A4D; --bad:#C2362B; --chip:#E1E4E6;
  --f-display:'Noto Serif TC','Songti TC',Georgia,serif;
  --f-body:'Noto Sans TC','PingFang TC','Microsoft JhengHei',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --wall:#121417; --plate:#1B1E22; --ink:#ECEEF0; --muted:#9AA0A7; --line:#33383E;
  --real:#ECEEF0; --ai:#78A9FF; --ok:#5BC08A; --bad:#F07B70; --chip:#262A2F; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--wall);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--ai);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding-block:24px 120px;display:flex;flex-direction:column;gap:24px}
header{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:end;justify-content:space-between}
.eyebrow{font-family:var(--f-mono);font-size:13px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
h1{font-family:var(--f-display);font-weight:900;font-size:clamp(30px,6vw,60px);line-height:1.12;margin:4px 0 0;text-wrap:balance}
h1 em{font-style:normal;color:var(--ai)}
.lede{max-width:62ch;color:var(--muted);margin:8px 0 0}
.btn{border:1px solid var(--ink);background:var(--ink);color:var(--wall);padding:10px 20px;border-radius:999px;font-weight:700}
.btn.ghost{background:transparent;color:var(--ink)}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.status{font-family:var(--f-mono);font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.notice{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:18px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr));gap:28px 22px}
.plate{display:flex;flex-direction:column;gap:10px;min-width:0}
.frame{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--chip);overflow:hidden;border-radius:2px;
  box-shadow:0 1px 0 var(--line),0 10px 24px -18px rgba(0,0,0,.5);padding:0;border:0;display:block;width:100%}
.frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.frame:hover img{transform:scale(1.03)}
.num{position:absolute;left:10px;top:10px;font-family:var(--f-mono);font-weight:500;font-size:14px;background:var(--plate);color:var(--ink);
  padding:2px 9px;border-radius:2px;font-variant-numeric:tabular-nums}
.stamp{position:absolute;right:10px;bottom:10px;font-family:var(--f-display);font-weight:900;font-size:22px;padding:4px 14px;border:2px solid;border-radius:3px;
  background:color-mix(in srgb,var(--plate) 88%,transparent);transform:rotate(-4deg);animation:stamp .35s cubic-bezier(.2,1.6,.4,1) both}
.stamp.real{color:var(--real);border-color:var(--real)}
.stamp.ai{color:var(--ai);border-color:var(--ai)}
@keyframes stamp{from{transform:scale(1.8) rotate(-12deg);opacity:0}to{transform:scale(1) rotate(-4deg);opacity:1}}
.label{display:flex;flex-direction:column;gap:4px;min-width:0}
.label .cat{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--muted)}
.label .t{font-family:var(--f-display);font-weight:700;font-size:18px;line-height:1.35;text-wrap:balance}
.label .m{font-size:14px;color:var(--muted)}
.label .aw{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:baseline}
.label .aw b{font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.08em;border:1px solid var(--line);padding:0 5px;border-radius:2px;flex:none}
.label .bio{font-size:13.5px;color:var(--muted);line-height:1.55}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick button{border:1px solid var(--line);background:var(--plate);padding:9px 0;border-radius:4px;font-weight:700;font-size:15px}
.pick button[data-v="real"][aria-pressed="true"]{background:var(--real);color:var(--wall);border-color:var(--real)}
.pick button[data-v="ai"][aria-pressed="true"]{background:var(--ai);color:#fff;border-color:var(--ai)}
.pick button[disabled]{cursor:default}
.verdict{font-size:14px;font-weight:700}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}
.more{border:0;background:none;padding:0;color:var(--ai);font-size:14px;text-align:left;text-decoration:underline;text-underline-offset:3px}

/* split bar: how the room voted */
.split{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.split .bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--chip)}
.split .bar i{display:block;height:100%}
.split .bar .r{background:var(--real)} .split .bar .a{background:var(--ai)}
.split .legend{display:flex;justify-content:space-between}

.score{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:16px}
.score .big{font-family:var(--f-display);font-weight:900;font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.score p{margin:0;max-width:60ch}

dialog{border:0;padding:0;max-width:min(980px,calc(100% - 24px));width:100%;background:var(--plate);color:var(--ink);border-radius:6px}
dialog::backdrop{background:rgba(10,12,14,.72)}
.sheet{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:760px){.sheet{grid-template-columns:1fr}}
.sheet img{width:100%;height:100%;object-fit:contain;background:#0d0f11;max-height:70vh}
.sheet .info{padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0;overflow:auto;max-height:80vh}
.sheet h2{font-family:var(--f-display);font-size:24px;line-height:1.3;margin:0}
.sheet .row{font-size:14px;color:var(--muted)}
.sheet .row b{color:var(--ink);font-weight:700}
.sheet .prompt{font-family:var(--f-mono);font-size:12.5px;background:var(--chip);padding:12px;border-radius:4px;white-space:pre-wrap;word-break:break-word}
.sheet a{color:var(--ai)}
.close{position:absolute;right:10px;top:10px;border:0;background:var(--plate);width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1;z-index:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}