/* Viberts — carved wood, parchment, stone and brass.
   Layout sizes the game code depends on stay fixed: top bar 40px, bottom bar 176px,
   minimap frame 160px, panel 330px. */
:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --mono: "Courier New", "Courier Prime", ui-monospace, monospace;
  --ink: #2a1b0e; --ink-dim: #6b5536; --ink-faint: #9a825c;
  --parch: #e4cf9d; --parch-hi: #f1e3bf; --parch-lo: #cfb47d; --parch-edge: #8c6b3c;
  --wood: #3a2614; --wood-hi: #5a3c20; --wood-lo: #23160b; --wood-edge: #15100a;
  --stone: #4a4742; --stone-hi: #6a665f; --stone-lo: #2f2d2a;
  --brass: #c89b4a; --brass-hi: #efd38a; --brass-lo: #7a5420; --gold: #e2b65b;
  --cream: #efe0bd; --cream-dim: #b9a780;
  --good: #5fae4a; --bad: #c9473d; --warn: #d79b2c;
  --frame: 0 0 0 1px var(--wood-edge), 0 0 0 3px var(--brass-lo), 0 0 0 4px var(--brass), 0 0 0 5px var(--wood-edge);
  --frame-thin: 0 0 0 1px var(--wood-edge), 0 0 0 2px var(--brass-lo), 0 0 0 3px var(--wood-edge);
  --wood-grain:
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 2px, transparent 2px 9px, rgba(255,230,180,.04) 9px 11px, transparent 11px 23px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 7px),
    linear-gradient(var(--wood-hi), var(--wood) 40%, var(--wood-lo));
  --parchment:
    radial-gradient(ellipse at 18% 8%, rgba(255,255,255,.35), transparent 45%),
    radial-gradient(ellipse at 85% 95%, rgba(120,80,30,.28), transparent 50%),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(110,70,25,.22)),
    repeating-linear-gradient(0deg, rgba(90,60,20,.04) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(90,60,20,.035) 0 3px, transparent 3px 7px),
    linear-gradient(var(--parch-hi), var(--parch) 55%, var(--parch-lo));
  --stonework:
    linear-gradient(rgba(255,255,255,.07), transparent 40%, rgba(0,0,0,.25)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.1) 0 1px, transparent 1px 44px),
    linear-gradient(var(--stone-hi), var(--stone) 50%, var(--stone-lo));
}
* { box-sizing: border-box; }
html, body { margin:0; height:100%; background:#0b0806; color:var(--cream); font: 14px/1.4 var(--serif); overflow:hidden; }
::selection { background: var(--brass); color: var(--ink); }
button, select, input { font: inherit; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: .04em; }
::-webkit-scrollbar { width:10px; height:10px; } ::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--brass), var(--brass-lo)); border:2px solid #1a1008; border-radius:5px; }

/* Buttons: a wooden tablet with a brass edge. */
button { cursor:pointer; color:var(--cream); padding:6px 14px; border:1px solid var(--brass-lo); border-radius:3px;
  background: linear-gradient(var(--wood-hi), var(--wood) 55%, var(--wood-lo));
  box-shadow: inset 0 1px 0 rgba(255,220,160,.18), inset 0 -2px 0 rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.6);
  text-shadow: 0 1px 0 rgba(0,0,0,.7); letter-spacing:.02em; }
button:hover { border-color: var(--gold); color:#fff5dc; background: linear-gradient(#6a4a28, #43301a 55%, #2a1b0e); }
button:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.6); transform: translateY(1px); }
button.go { color:#2a1b0e; text-shadow: 0 1px 0 rgba(255,240,200,.5); font-weight:700; border-color:#5a3a12;
  background: linear-gradient(var(--brass-hi), var(--brass) 45%, #a77a2e 70%, var(--brass-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,230,.6), inset 0 -2px 0 rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.6); }
button.go:hover { background: linear-gradient(#fff0b8, #e2b65b 45%, #b9893a 70%, #8a6124); }
button:disabled { opacity:.45; cursor:default; }
input[type=text], input[type=number], select { color:var(--ink); border:1px solid var(--parch-edge); border-radius:2px; padding:5px 8px;
  background: linear-gradient(#f6ead0, #ecdcb3); box-shadow: inset 0 1px 3px rgba(90,60,20,.35); }
input:focus, select:focus { outline:none; border-color: var(--brass-lo); box-shadow: inset 0 1px 3px rgba(90,60,20,.35), 0 0 0 2px rgba(200,155,74,.45); }
input:disabled, select:disabled { opacity:.6; }
.hidden { display:none !important; }
.dim { color: var(--cream-dim); }
.screen { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:auto; }

/* Menu: a torchlit hall. */
#loading, #menu { background:
  radial-gradient(ellipse at 50% 30%, rgba(226,182,91,.22), transparent 50%),
  radial-gradient(ellipse at 50% 110%, rgba(120,70,20,.5), transparent 60%),
  repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 28px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1px, transparent 1px 56px),
  linear-gradient(#1d1510, #0d0906 70%, #070503); }
#loading p { color:var(--cream-dim); font-variant: small-caps; letter-spacing:.2em; }
.menu-card { display:flex; flex-direction:column; gap:12px; align-items:stretch; width:380px; padding:28px 30px 30px; position:relative;
  background: var(--wood-grain); border:1px solid var(--wood-edge); border-radius:4px; box-shadow: var(--frame), 0 30px 60px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.5); }
.menu-card::before, .menu-card::after { content:""; position:absolute; left:12px; right:12px; height:1px; background: linear-gradient(90deg, transparent, var(--brass), transparent); opacity:.7; }
.menu-card::before { top:10px; } .menu-card::after { bottom:10px; }
.title { font-size:48px; letter-spacing:.18em; margin:0 0 2px; text-align:center; font-weight:700; padding-left:.18em; white-space:nowrap;
  background: linear-gradient(#fff2c2, var(--gold) 45%, #a0702a 75%, var(--brass-hi)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 2px 0 #3b2612) drop-shadow(0 0 18px rgba(226,182,91,.35)); }
.tagline { text-align:center; color:var(--cream-dim); margin:0 0 16px; font-variant: small-caps; letter-spacing:.3em; font-size:13px; }
button.big { padding:12px; font-size:19px; font-variant: small-caps; letter-spacing:.1em; color:var(--cream);
  background: var(--stonework); border:1px solid #1a1612; box-shadow: var(--frame-thin), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.4); margin:3px; }
button.big:hover { color:#fff5dc; box-shadow: 0 0 0 1px var(--wood-edge), 0 0 0 2px var(--gold), 0 0 0 3px var(--wood-edge), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.4), 0 0 18px rgba(226,182,91,.35);
  background: linear-gradient(rgba(226,182,91,.12), rgba(226,182,91,.04)), var(--stonework); }

/* Setup screens: a parchment sheet pinned to the board. */
.setup { position:relative; color:var(--ink); background: var(--parchment); border:1px solid #5a3f1c; border-radius:3px; padding:22px 26px;
  width:820px; max-width:95vw; display:flex; flex-direction:column; gap:12px; max-height:95vh; overflow:auto;
  box-shadow: var(--frame), 0 30px 60px rgba(0,0,0,.8), inset 0 0 60px rgba(110,70,25,.25); }
.setup.narrow { width:420px; } .setup.wide { width:1100px; }
.setup h2 { margin:0 0 2px; font-size:26px; color:var(--ink); font-variant: small-caps; letter-spacing:.12em; padding-bottom:6px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass) 30%, transparent) bottom / 100% 2px no-repeat; }
.setup .dim { color: var(--ink-dim); }
.setup label { color: var(--ink-dim); }
.row { display:flex; gap:10px; align-items:center; }
.row .go { margin-left:auto; }
.seats { display:flex; flex-direction:column; gap:6px; }
.seat { display:grid; grid-template-columns: 28px 100px 1fr 130px 130px 100px; gap:8px; align-items:center; }
.seat-no { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#1a1008; font-weight:700; border:2px solid rgba(42,27,14,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.seat-name { font-weight:600; }
.settings { display:flex; gap:14px; flex-wrap:wrap; }
.settings label { display:flex; gap:6px; align-items:center; }
.settings input { width:120px; }
.civ-cards { display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.civ-card { border:2px solid; border-radius:3px; padding:8px; font-size:12px; background: rgba(255,245,220,.35); box-shadow: inset 0 0 0 1px rgba(42,27,14,.25); }
.civ-card p { margin:4px 0; color:var(--ink-dim); }
.civ-card b { font-variant: small-caps; letter-spacing:.06em; font-size:14px; }
.code { font-family: var(--mono); letter-spacing:.25em; color:#7a4a12; font-weight:700; }
.chatlog { background: rgba(255,245,220,.45); border:1px solid var(--parch-edge); border-radius:2px; min-height:60px; max-height:120px; overflow-y:auto; padding:6px; font-size:12px; box-shadow: inset 0 1px 3px rgba(90,60,20,.3); }
.tt-age { border:1px solid rgba(90,60,20,.45); border-radius:3px; padding:10px 12px; margin-bottom:10px; background: rgba(255,245,220,.25); }
.tt-age h3 { margin:0 0 6px; color:#7a4a12; font-variant: small-caps; letter-spacing:.12em; font-size:18px; }
.tt-age h4 { margin:8px 0 4px; color:var(--ink-dim); font-weight:normal; font-variant: small-caps; letter-spacing:.1em; }
.tt-row { display:flex; flex-wrap:wrap; gap:6px; }
.tt-item { border:1px solid rgba(90,60,20,.45); border-radius:2px; padding:6px 8px; width:200px; font-size:12px; background: rgba(255,245,220,.35); }
.tt-item small { color:var(--ink-dim); display:block; }
.saves { display:flex; flex-direction:column; gap:6px; max-height:60vh; overflow:auto; }
.save { display:flex; gap:10px; align-items:center; border:1px solid rgba(90,60,20,.5); border-radius:3px; padding:8px 12px; background: rgba(255,245,220,.35); }
.save .save-body { flex:1; min-width:0; } .save small { color:var(--ink-dim); display:block; }
.save .danger:hover { border-color:var(--bad); color:#ffd9d4; }

/* In play */
#game { display:block; background:#000; }
#topbar { height:40px; display:flex; align-items:center; gap:10px; padding:0 12px; position:relative; z-index:2;
  background: var(--wood-grain); border-bottom:1px solid var(--wood-edge);
  box-shadow: 0 2px 0 var(--brass-lo), 0 3px 0 var(--wood-edge), 0 6px 14px rgba(0,0,0,.6); }
#resources { display:flex; gap:5px; }
.res { display:flex; align-items:center; gap:4px; padding:2px 6px 2px 4px; min-width:66px; font-variant-numeric: tabular-nums; font-size:12px; color:var(--cream); border-radius:2px;
  background: linear-gradient(#2a1c10, #1a1109); border:1px solid var(--brass-lo); box-shadow: inset 0 1px 0 rgba(255,220,160,.1), inset 0 0 6px rgba(0,0,0,.6); }
.res-div { width:1px; background:var(--brass-lo); margin:4px 3px; opacity:.6; }
.res canvas { image-rendering:pixelated; width:16px; height:16px; }
.res b { font-weight:700; color:#f6e8c6; }
.res i { font-style:normal; color:var(--cream-dim); font-size:10px; margin-left:auto; }
.res.pop { min-width:72px; } .res.full { border-color: var(--bad); } .res.full b { color: #ff8a7a; }
.age { color:var(--gold); font-variant: small-caps; letter-spacing:.12em; margin-left:8px; font-size:15px; text-shadow: 0 1px 0 #000; }
.idle { border-radius:999px; padding:2px 10px !important; font-weight:700; font-size:12px; color:#2a1b0e !important; text-shadow:none !important; border:1px solid #5a3a12 !important;
  background: radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 45%, var(--brass-lo)) !important; box-shadow: 0 0 0 1px var(--wood-edge), 0 1px 3px rgba(0,0,0,.6), inset 0 -1px 0 rgba(0,0,0,.3) !important; }
.idle::before { content:"👤 "; font-size:11px; }
#players { display:flex; gap:6px; margin-left:12px; }
.pl { display:flex; align-items:center; gap:5px; padding:1px 9px; border:1px solid var(--brass-lo); border-radius:999px; font-size:11px; color:var(--cream); background: rgba(0,0,0,.35); }
.pl i { width:9px; height:9px; border-radius:50%; display:inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.pl.me { border-color:var(--gold); box-shadow: 0 0 6px rgba(226,182,91,.35); }
.pl.dead { opacity:.45; text-decoration: line-through; }
#clock { margin-left:auto; font-family: var(--mono); font-weight:700; color:var(--cream-dim); letter-spacing:.05em; }
label.speed { color:var(--cream-dim); font-size:12px; display:flex; gap:4px; align-items:center; font-variant: small-caps; }
label.speed select { padding:1px 4px; font-size:12px; }
#topbar button { padding:3px 10px; font-size:13px; }
#toasts { position:absolute; left:50%; top:46px; transform:translateX(-50%); display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; z-index:3; }
.toast { color:var(--ink); background: var(--parchment); border:1px solid #5a3f1c; padding:5px 18px; font-size:13px; pointer-events:auto; animation: toast-in .25s ease-out;
  box-shadow: var(--frame-thin), 0 6px 16px rgba(0,0,0,.6); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); padding-left:22px; padding-right:22px; }
.toast.gold { color:#6a3f0a; font-weight:700; } .toast.red { color:#8a1f14; font-weight:700; }
.toast.click { cursor:pointer; } .toast.click:hover { filter: brightness(1.06); }
.toast.out { opacity:0; transition: opacity .4s; }
@keyframes toast-in { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
#game-canvas { display:block; image-rendering: pixelated; }
#bottombar { height:176px; display:flex; gap:12px; padding:8px 12px; position:relative;
  background: var(--wood-grain); border-top:1px solid var(--wood-edge);
  box-shadow: 0 -2px 0 var(--brass-lo), 0 -3px 0 var(--wood-edge), 0 -6px 14px rgba(0,0,0,.6); }
#minimap-wrap { padding:4px; height:160px; background: linear-gradient(var(--brass-hi), var(--brass) 30%, var(--brass-lo)); border:1px solid var(--wood-edge); border-radius:2px;
  box-shadow: 0 0 0 1px var(--brass-lo), 0 2px 6px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.5); }
#minimap { display:block; width:152px; height:152px; image-rendering: pixelated; cursor:crosshair; background:#000; box-shadow: inset 0 0 0 1px var(--wood-edge); }
#panel { width:330px; font-size:12px; display:flex; flex-direction:column; gap:8px; color:var(--ink); padding:8px 10px; border-radius:2px;
  background: var(--parchment); border:1px solid #5a3f1c; box-shadow: var(--frame-thin), inset 0 0 24px rgba(110,70,25,.25); overflow:hidden; }
#panel .dim { color: var(--ink-dim); }
.hint { color:var(--ink-dim); line-height:1.8; padding-top:4px; font-style: italic; }
kbd { border:1px solid #6b5536; border-bottom-width:2px; border-radius:3px; padding:0 5px; font-size:10px; font-family: var(--mono); font-weight:700; font-style:normal;
  background: linear-gradient(#f6ead0, #dcc48f); color:var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.card { display:flex; gap:10px; }
.portrait-wrap { width:72px; height:72px; padding:4px; flex:none; border-radius:2px; background: linear-gradient(#2a1c10, #1a1109); border:1px solid var(--wood-edge);
  box-shadow: 0 0 0 1px var(--brass-lo), 0 0 0 2px var(--wood-edge), inset 0 0 8px rgba(0,0,0,.8); }
.portrait { image-rendering:pixelated; display:block; }
.card-body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sel-name { font-weight:700; font-size:16px; font-variant: small-caps; letter-spacing:.06em; line-height:1.1; }
.sel-owner { font-size:11px; font-weight:700; text-shadow: 0 0 2px rgba(255,245,220,.8); }
.sel-line { color:var(--ink-dim); } .sel-line.dim { font-size:11px; font-style: italic; }
.hpbar { position:relative; height:12px; background:#2a1b0e; border:1px solid #5a3f1c; border-radius:2px; overflow:hidden; width:180px; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.hpbar i { position:absolute; inset:0; width:100%; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 0 rgba(0,0,0,.25); }
.hpbar span { position:absolute; inset:0; text-align:center; font-size:10px; line-height:11px; color:#fff; text-shadow:0 0 2px #000, 0 0 2px #000; font-weight:700; }
.stats { display:flex; gap:10px; color:var(--ink); font-size:12px; font-weight:600; }
.queue { display:flex; gap:4px; flex-wrap:wrap; }
.queue .q { position:relative; width:36px; height:36px; padding:0; overflow:hidden; background: linear-gradient(#2a1c10, #1a1109); border:1px solid var(--brass-lo); box-shadow:none; }
.queue .q canvas { image-rendering:pixelated; display:block; margin:2px; }
.queue .q i { position:absolute; left:0; right:0; bottom:0; background:rgba(226,182,91,.45); pointer-events:none; }
.queue .q em { position:absolute; right:1px; top:0; font-size:10px; font-style:normal; color:var(--cream); }
.queue .q:hover { border-color:var(--bad); }
.sel-many-head { font-weight:700; font-variant: small-caps; letter-spacing:.06em; font-size:14px; }
.thumbs { display:flex; flex-wrap:wrap; gap:3px; }
.thumb { position:relative; width:34px; height:36px; padding:2px 2px 4px; background: linear-gradient(#2a1c10, #1a1109); border:1px solid var(--brass-lo); border-radius:2px; box-shadow:none; }
.thumb:hover { border-color: var(--gold); }
.thumb canvas { image-rendering:pixelated; display:block; }
.thumb i { position:absolute; left:2px; bottom:2px; height:2px; background:var(--good); }
#cmds { flex:1; display:flex; flex-wrap:wrap; gap:4px; align-content:flex-start; overflow-y:auto; padding:4px 4px 4px 12px; border-left:1px solid var(--brass-lo); box-shadow: -1px 0 0 var(--wood-edge); }
#cmds::-webkit-scrollbar { width:6px; }
.cmd-group { width:100%; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:2px 0 -2px; height:12px; text-shadow: 0 1px 0 #000; }
.cmd { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; width:62px; height:64px; padding:4px 2px 2px; font-size:10px; line-height:1.1; color:var(--cream);
  background: var(--stonework); border:1px solid #1a1612; border-top:3px solid var(--stone-hi); border-radius:2px;
  box-shadow: 0 0 0 1px var(--stone-lo), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.6); text-shadow: 0 1px 0 #000; }
.cmd.build { border-top-color:#a0652c; } .cmd.train { border-top-color:#6f8fb3; } .cmd.research { border-top-color:#9a7fc0; }
.cmd canvas { image-rendering:pixelated; width:36px; height:36px; display:block; }
.cmd-label { max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmd kbd { position:absolute; right:2px; top:2px; padding:0 3px; font-size:9px; }
.cmd em { position:absolute; left:3px; top:2px; font-style:normal; color:var(--gold); font-weight:700; }
.cmd.dim { opacity:.4; } .cmd.on { border-color:var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(226,182,91,.45), inset 0 0 0 1px var(--gold); }
.cmd:not(.dim):hover { border-color:var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 10px rgba(226,182,91,.35), inset 0 1px 0 rgba(255,255,255,.1); background: linear-gradient(rgba(226,182,91,.14), rgba(226,182,91,.05)), var(--stonework); }
#tooltip { position:fixed; z-index:20; color:var(--ink); background: var(--parchment); border:1px solid #5a3f1c; padding:8px 12px; font-size:12px; max-width:280px; pointer-events:none;
  box-shadow: var(--frame-thin), 0 8px 24px rgba(0,0,0,.7); }
#tooltip b { font-size:14px; display:block; margin-bottom:2px; font-variant: small-caps; letter-spacing:.06em; }
#tooltip .dim { color:var(--ink-dim); margin-top:2px; }
#tooltip .warn { color:#8a4a0a; margin-top:2px; font-weight:700; }
.cost { color:var(--ink); margin-right:6px; font-weight:600; } .cost.short { color:var(--bad); }
.chatlog.ingame { position:absolute; left:10px; bottom:212px; width:360px; background:rgba(0,0,0,.45); border:none; pointer-events:none; min-height:0; color:var(--cream); box-shadow:none; text-shadow: 0 1px 0 #000; }
#chat-input { position:absolute; left:10px; bottom:184px; width:360px; background:rgba(20,12,6,.6); color:var(--cream); border:1px solid var(--brass-lo); opacity:.6; box-shadow:none; }
#chat-input:focus { opacity:1; }
#overlay, .modal { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.65); z-index:15; }
#overlay .card, .modal .card { color:var(--ink); background: var(--parchment); border:1px solid #5a3f1c; border-radius:3px; padding:26px 34px; text-align:center; display:flex; flex-direction:column; gap:10px;
  box-shadow: var(--frame), 0 30px 60px rgba(0,0,0,.8), inset 0 0 40px rgba(110,70,25,.25); }
/* The end-of-game plaque is wood: player colours were picked for a dark field. */
#overlay .card { color:var(--cream); background: var(--wood-grain); border-color: var(--wood-edge); box-shadow: var(--frame), 0 30px 60px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.5); min-width:360px; }
#overlay h2 { margin:0 0 6px; font-size:46px; font-variant: small-caps; letter-spacing:.18em; padding-left:.18em;
  background: linear-gradient(#fff2c2, var(--gold) 45%, #a0702a 75%, var(--brass-hi)); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 2px 0 #3b2612) drop-shadow(0 0 14px rgba(226,182,91,.35)); }
#overlay .scores { display:flex; flex-direction:column; gap:4px; font-weight:700; text-shadow: 0 1px 0 #000, 0 0 3px rgba(0,0,0,.8); }
#overlay .dim { color: var(--cream-dim); }
.modal .card { text-align:left; width:380px; } .modal h3 { margin:0; color:#5a3a0a; font-variant: small-caps; letter-spacing:.12em; font-size:24px; }
.modal input { width:100%; } .modal p { margin:0; min-height:1.4em; font-size:12px; color: var(--ink-dim); }

/* Esc menu: a small wooden plaque, like the end-of-game one. */
.modal .card.plaque { color:var(--cream); background: var(--wood-grain); border-color: var(--wood-edge); text-align:center; width:320px; gap:8px;
  box-shadow: var(--frame), 0 30px 60px rgba(0,0,0,.8), inset 0 0 40px rgba(0,0,0,.5); }
.modal .card.plaque h3 { color:transparent; font-size:34px; letter-spacing:.2em; padding-left:.2em; margin-bottom:0;
  background: linear-gradient(#fff2c2, var(--gold) 45%, #a0702a 75%, var(--brass-hi)); -webkit-background-clip:text; background-clip:text; filter: drop-shadow(0 2px 0 #3b2612); }
.modal .card.plaque p { color:var(--cream-dim); font-variant: small-caps; letter-spacing:.15em; min-height:1.4em; margin-bottom:4px; }
.modal .card.plaque button { padding:9px 14px; font-size:15px; font-variant: small-caps; letter-spacing:.08em; }

/* The manual: a parchment book with a search box and a table of contents. */
.modal.manual { position:fixed; z-index:30; }
.modal .card.manual-card { width:min(1120px, 96vw); height:min(90vh, 940px); text-align:left; padding:16px 20px 18px; gap:10px; }
.manual-head { display:flex; align-items:center; gap:12px; padding-bottom:8px; background: linear-gradient(90deg, var(--brass-lo), var(--brass) 30%, transparent) bottom / 100% 2px no-repeat; }
.manual-head h3 { margin:0; color:#5a3a0a; font-variant: small-caps; letter-spacing:.14em; font-size:26px; }
.manual-head input { flex:1; max-width:420px; font-size:14px; }
.manual-head .dim { color:var(--ink-dim); font-style: italic; }
.manual-head button { margin-left:auto; }
.manual-body { display:flex; gap:18px; flex:1; min-height:0; }
#man-toc { width:190px; flex:none; overflow:auto; display:flex; flex-direction:column; gap:2px; padding-right:8px; border-right:1px solid rgba(90,60,20,.45); }
#man-toc a { color:var(--ink); text-decoration:none; padding:5px 8px; border-radius:2px; font-variant: small-caps; letter-spacing:.06em; font-size:14px; }
#man-toc a:hover { background: rgba(120,80,30,.15); color:#5a3a0a; }
#man-content { flex:1; overflow:auto; padding-right:10px; }
.man-section { margin-bottom:22px; }
.man-section h3 { margin:0 0 2px; color:#5a3a0a; font-variant: small-caps; letter-spacing:.12em; font-size:22px; padding-bottom:4px;
  background: linear-gradient(90deg, var(--brass-lo), var(--brass) 40%, transparent) bottom / 100% 1px no-repeat; }
.man-lead { margin:4px 0 10px; color:var(--ink-dim); font-style: italic; }
.man-entries { display:flex; flex-direction:column; gap:10px; }
.man-entries.man-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:8px; }
.man-entry { border:1px solid rgba(90,60,20,.4); border-radius:3px; padding:8px 12px; background: rgba(255,245,220,.35); font-size:13px; line-height:1.5; }
.man-entry h4 { margin:0 0 4px; font-size:15px; font-variant: small-caps; letter-spacing:.06em; }
.man-entry p { margin:4px 0; } .man-entry ul { margin:4px 0; padding-left:20px; } .man-entry li { margin:2px 0; }
.man-entry table { border-collapse: collapse; margin:6px 0; font-size:12px; }
.man-entry th, .man-entry td { text-align:left; padding:3px 10px 3px 0; border-bottom:1px solid rgba(90,60,20,.25); vertical-align:top; }
.man-entry th { color:var(--ink-dim); font-weight:normal; font-variant: small-caps; letter-spacing:.06em; }
.man-stats { color:var(--ink-dim); font-size:12px; }
mark.man-hit { background: rgba(226,182,91,.6); color:inherit; padding:0 1px; border-radius:2px; box-shadow: 0 0 0 1px rgba(160,112,42,.35); }