:root{
  --ink:#1C2430; --ink-soft:#3C4759; --paper:#E9ECEC; --paper-raised:#F6F7F6; --line:#C7CDCB;
  --amber:#ED7D31; --amber-dark:#C7621F; --green:#3B7A57; --green-bg:#DEEAE1;
  --rust:#A63D2E; --rust-bg:#F0DEDA;
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--paper); color:var(--ink); font-family:sans-serif; min-height:100vh; }
#app{ max-width:480px; margin:0 auto; padding:24px 16px 60px; }
.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:16px; padding:22px 20px; }
h1{ font-size:22px; margin:0 0 10px; }
p{ line-height:1.55; color:var(--ink-soft); font-size:14.5px; }
label{ display:block; font-size:12.5px; font-weight:600; color:var(--amber-dark); margin:14px 0 4px; }
input{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:6px; font-size:15px; }
button{ font-family:inherit; font-size:14px; font-weight:600; border-radius:6px; cursor:pointer; padding:12px 16px; width:100%; margin-top:12px; border:none; }
button.primary{ background:var(--ink); color:#fff; }
button.primary:hover{ background:var(--amber-dark); }
button.primary:disabled{ background:#B7BDC6; cursor:not-allowed; }
button.secondary{ background:#fff; border:1px solid var(--amber-dark); color:var(--amber-dark); }
button.secondary:disabled{ opacity:.4; cursor:not-allowed; }
.error{ color:var(--rust); font-size:13px; margin-top:8px; }
.waiting{ text-align:center; padding:20px 0; }
.meta{ font-size:12.5px; color:var(--ink-soft); margin-bottom:12px; }
.label{ font-size:12px; font-weight:600; color:var(--amber-dark); margin:14px 0 6px; }
.box{ background:#fff; border:1px solid var(--line); border-left:3px solid var(--ink-soft); padding:10px 12px; font-size:14.5px; }
.clue{ font-size:13.5px; padding:8px 10px; margin-bottom:6px; border:1px dashed var(--line); background:#fff; }
.clue.locked{ color:#9AA2AC; font-style:italic; }
.clue.revealed{ border-style:solid; border-left:3px solid var(--amber-dark); }
.timer-row{ display:flex; justify-content:space-between; align-items:baseline; margin:14px 0; }
.timer{ font-size:26px; font-weight:700; }
.muted{ font-size:12px; color:var(--ink-soft); }
.instruction{ font-size:13.5px; }
.barrier-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin:10px 0; }
.barrier{ background:#fff; border:1px solid var(--line); padding:10px 6px; font-size:11.5px; min-height:56px; }
.barrier.selected{ border-color:var(--amber-dark); background:#FBF1E1; font-weight:700; }
.warning{ color:var(--rust); font-size:12.5px; font-weight:600; margin:-4px 0 10px; }
.banner{ text-align:center; font-weight:700; font-size:17px; padding:12px; border:2px solid; margin:14px 0; }
.banner.full{ color:var(--green); border-color:var(--green); background:var(--green-bg); }
.banner.partial{ color:var(--amber-dark); border-color:var(--amber-dark); background:#FBF1E1; }
.banner.none{ color:var(--rust); border-color:var(--rust); background:var(--rust-bg); }
.result-detail{ font-size:13.5px; line-height:1.6; }