/* B (owner 10-23 decision 9): the look of our game menus (pack/art/core.py RAMPS: sea-teal board, brass frames, cream paper,
   teal-black ink, Galmuri pixel letters), with the reading text and the tables in a plain sans (Wanted Sans) so they read easily. */
@font-face{font-family:Galmuri;src:url(fonts/galmuri.woff2) format("woff2");font-display:swap}
@font-face{font-family:Wanted;src:url(fonts/wanted.woff2) format("woff2");font-weight:400 900;font-display:swap}
:root{--ink:#0d181b;--board:#12272b;--board2:#1d3a40;--well:#284a51;--wellhi:#3a666e;--welllo:#12262a;
--brass:#c98d2e;--brasslo:#7a4d1c;--brasshi:#f0bf55;--gold:#ffe9a6;--paper:#f3e7ca;--paper2:#e8d8b0;--paperlo:#a8916a;--cream:#fff8e6;
--text:#2a2320;--steel:#c3d0d6;--amber:#ffc04d;--coral:#ea6f57;--pix:Galmuri,"Wanted","Malgun Gothic",sans-serif;--read:Wanted,"Malgun Gothic","Apple SD Gothic Neo",sans-serif}
*{box-sizing:border-box}
html{background:var(--board)}
body{margin:0;min-height:100vh;color:#e6eef0;font:16px/1.7 var(--read);word-break:keep-all;overflow-wrap:break-word;
background:var(--board) linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 4px}
a{color:var(--gold)}
b{font-weight:700}
header{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:6px 6px;align-items:center;padding:8px 16px 10px;background:var(--board2);
border-bottom:3px solid var(--brass);box-shadow:0 3px 0 var(--brasslo),0 6px 0 var(--ink)}
header .home{font:20px/1 var(--pix);color:var(--gold);text-decoration:none;margin-right:10px;text-shadow:2px 2px 0 var(--ink)}
nav{display:flex;flex-wrap:wrap;gap:5px}
nav a{font:12px/1 var(--pix);color:var(--steel);text-decoration:none;padding:6px 8px 5px;background:var(--well);border:2px solid var(--ink);
box-shadow:inset 0 2px 0 var(--wellhi),inset 0 -2px 0 var(--welllo)}
nav a:hover{color:var(--cream);border-color:var(--brasslo)}
nav a.on{color:var(--text);background:var(--paper);box-shadow:inset 0 2px 0 var(--cream),inset 0 -2px 0 var(--paperlo)}
main{max-width:1040px;margin:0 auto;padding:22px 16px 10px}
h1{font:30px/1.25 var(--pix);color:var(--gold);margin:10px 0 6px;text-shadow:3px 3px 0 var(--ink)}
h2{font:18px/1.3 var(--pix);color:var(--ink);margin:38px 0 12px;padding:8px 12px 7px;background:var(--brass);border:2px solid var(--ink);
box-shadow:inset 0 2px 0 var(--brasshi),inset 0 -3px 0 var(--brasslo),0 3px 0 var(--ink)}
h3{font:15px/1.3 var(--pix);color:var(--gold);margin:22px 0 8px}
p{margin:8px 0}.lead{color:var(--steel)}
small{font-size:13px;color:#6f5a3c}p small,li small,h3 small{color:var(--steel)}
.hero{margin:6px 0 10px;padding:20px 18px;background:var(--well);border:2px solid var(--ink);box-shadow:inset 0 3px 0 var(--wellhi),inset 0 -3px 0 var(--welllo),0 4px 0 var(--ink)}
.hero h1{margin-top:0;font-size:36px}.hero p{max-width:720px;margin:0}
/* tables: a cream sheet on the board, as in the menus' paper slots */
.tw{overflow-x:auto;margin:10px 0 18px;border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
table{border-collapse:collapse;width:100%;background:var(--paper);color:var(--text);font-size:15px}
th{font-weight:700;font-size:14px;color:var(--gold);background:var(--board2);text-align:left;padding:8px 10px;white-space:nowrap;border-bottom:2px solid var(--ink)}
td{padding:7px 10px;border-top:1px solid var(--paperlo);vertical-align:top}
tbody tr:nth-child(even) td{background:var(--paper2)}
td b{color:var(--ink)}
.tag{font:11px/1 var(--pix);color:var(--cream);background:var(--coral);border:1px solid var(--ink);padding:2px 4px;vertical-align:2px}
.find{width:100%;max-width:360px;margin:10px 0 2px;padding:9px 10px;font:15px var(--read);color:var(--text);background:var(--paper);border:2px solid var(--ink);
box-shadow:inset 0 2px 0 var(--paperlo);outline:none}.find:focus{border-color:var(--brass)}
/* numbered steps: brass number plates */
ol.steps,ol.first{list-style:none;counter-reset:n;padding:0;margin:10px 0}
ol.steps li,ol.first li{counter-increment:n;position:relative;padding:10px 12px 10px 52px;margin:0 0 6px;background:var(--well);border:2px solid var(--ink);
box-shadow:inset 0 2px 0 var(--wellhi),inset 0 -2px 0 var(--welllo)}
ol.steps li::before,ol.first li::before{content:counter(n);position:absolute;left:8px;top:9px;width:32px;height:28px;display:grid;place-items:center;
font:14px/1 var(--pix);color:var(--ink);background:var(--brass);border:2px solid var(--ink);box-shadow:inset 0 2px 0 var(--brasshi),inset 0 -2px 0 var(--brasslo)}
ol.first li b{color:var(--gold);margin-right:6px}
ul.plain{margin:8px 0;padding-left:20px}ul.plain li{margin:3px 0}ul.plain li b{color:var(--gold)}
/* keys: keycaps on two panels */
.keys{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.panel{padding:4px 14px 12px;background:var(--well);border:2px solid var(--ink);box-shadow:inset 0 2px 0 var(--wellhi),inset 0 -2px 0 var(--welllo)}
.panel ul{list-style:none;margin:0;padding:0}.panel li{display:flex;align-items:center;gap:12px;margin:7px 0}
kbd{display:inline-grid;place-items:center;min-width:34px;height:32px;padding:0 6px;font:15px/1 var(--pix);color:var(--ink);background:var(--paper);
border:2px solid var(--ink);box-shadow:inset 0 -4px 0 var(--paperlo),inset 0 2px 0 var(--cream)}
td kbd{height:26px;min-width:28px;font-size:13px}
/* cards and notes */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.card{display:block;padding:12px 14px;color:var(--steel);text-decoration:none;background:var(--well);border:2px solid var(--ink);
box-shadow:inset 0 2px 0 var(--wellhi),inset 0 -2px 0 var(--welllo),0 3px 0 var(--ink)}
.card b{display:block;font:15px/1.3 var(--pix);color:var(--gold);margin-bottom:4px}.card span{font-size:14px}
.card:hover{border-color:var(--brass)}
.tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin:10px 0}
.tip{padding:12px 14px;color:var(--text);background:var(--paper);border:2px solid var(--ink);box-shadow:inset 0 2px 0 var(--cream),inset 0 -3px 0 var(--paperlo)}
.tip b{font:14px/1.3 var(--pix);color:var(--brasslo)}.tip p{margin:6px 0 0;font-size:15px}
.say{padding:12px 16px;margin:10px 0;color:var(--text);background:var(--paper);border:2px solid var(--ink);border-left:8px solid var(--brass)}
.say p{margin:6px 0}
footer{max-width:1040px;margin:40px auto 0;padding:18px 16px 30px;color:var(--steel);font-size:14px;border-top:3px solid var(--brasslo)}
/* phones: every table row becomes a small card, a cell's column name in front of it (data-l), so nothing scrolls sideways */
@media (max-width:640px){
  body{font-size:15px}h1{font-size:24px}.hero h1{font-size:28px}h2{font-size:16px}
  header{position:static}nav a{font-size:11px;padding:5px 6px 4px}
  .keys{grid-template-columns:1fr}
  .tw{overflow:visible;border:0;box-shadow:none;background:none}
  table,tbody,tr,td{display:block;width:100%}thead{display:none}table{background:none}
  tr{margin:0 0 8px;background:var(--paper);border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink)}
  tbody tr:nth-child(even) td,td{background:none}
  td{position:relative;padding:5px 10px 5px calc(7.5em + 18px);border-top:1px solid var(--paperlo)}
  td:first-child{border-top:0;background:var(--paper2)}
  td::before{content:attr(data-l);position:absolute;left:10px;top:6px;width:7.5em;font-weight:700;font-size:13px;line-height:1.5;color:var(--brasslo)}
  td:empty{display:none}
}