:root { --bg:#ffffff; --surface:#f7f8fa; --border:#e5e7eb; --text:#1f2328; --muted:#57606a; --accent:#3b82d4; --error:#b42318; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.6 -apple-system,"Segoe UI",system-ui,sans-serif; color:var(--text); background:var(--bg); }
.top { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1rem; background:var(--surface); border-bottom:1px solid var(--border); }
.top nav { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; }
.brand { font-weight:700; color:var(--text); text-decoration:none; }
.who { color:var(--muted); }
main { max-width:760px; margin:0 auto; padding:1rem; }
a { color:var(--accent); }
h1 { font-size:1.5rem; } h2 { font-size:1.15rem; margin-top:2rem; }
.stack { display:flex; flex-direction:column; gap:.9rem; max-width:24rem; }
label { display:flex; flex-direction:column; gap:.25rem; font-weight:600; }
input { font:inherit; padding:.5rem; border:1px solid var(--border); border-radius:4px; }
button, .button { font:inherit; padding:.5rem 1rem; border:1px solid var(--accent); background:var(--accent); color:#fff; border-radius:4px; cursor:pointer; text-decoration:none; display:inline-block; }
button.link { background:none; border:0; color:var(--accent); padding:0; text-decoration:underline; }
form.inline { display:inline; margin:0; }
.error { color:var(--error); font-weight:600; }
table { width:100%; border-collapse:collapse; margin-top:.75rem; }
th, td { text-align:left; padding:.4rem .5rem; border-bottom:1px solid var(--border); }
code { font-family:ui-monospace,Menlo,monospace; }
.muted { color:var(--muted); }
.code { font-family:ui-monospace,Menlo,monospace; letter-spacing:.15em; text-transform:uppercase; }
input.code { font-size:1.25rem; }
label.check { flex-direction:row; align-items:center; gap:.5rem; font-weight:400; }
.panel { border:1px solid var(--border); background:var(--surface); border-radius:6px; padding:.25rem 1rem 1rem; margin-top:1rem; }
.panel h2 { margin-top:.75rem; }
ul.plain { list-style:none; margin:0; padding:0; }
ul.plain li { display:flex; justify-content:space-between; align-items:center; padding:.3rem 0; border-bottom:1px solid var(--border); }
button.danger { background:var(--error); border-color:var(--error); }
.shown { font-size:1.25rem; font-weight:700; }
.actions { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.row { display:flex; gap:.5rem; align-items:center; margin-top:.5rem; }
.row input { width:10rem; }
h3 { font-size:1rem; margin-top:1rem; }
.dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.25rem; }
.dot.on { background:#1a7f37; }
.dot.off { background:#c9ced6; }
button:disabled { opacity:.6; cursor:wait; }

.card { --card-bg:#ddd; border:5px solid var(--card-bg); border-radius:20px; font-size:1.2rem; margin:1rem 0; background:#fff; overflow:hidden; }
.card.history { --card-bg:Peru; } .card.income { --card-bg:DeepSkyBlue; } .card.production { --card-bg:LightGray; }
.card.geography { --card-bg:LawnGreen; } .card.war { --card-bg:Tomato; }
.card-title { display:grid; grid-template-columns:2rem 1fr 3.5rem; align-items:center; background:var(--card-bg); min-height:46px; }
.card-title h3 { margin:0; font-size:1.2rem; text-align:center; text-transform:uppercase; }
.card-id { font-size:.8rem; text-align:right; padding-right:.6rem; align-self:start; }
.card p { padding:0 .75rem; }
.pre { white-space:pre-line; }
.shares { column-count:3; column-gap:.4rem; column-rule:1px solid lightblue; padding:0 .5rem; font-size:1rem; }
.shares table { margin:0; }
.shares td { border:0; padding:.1rem .2rem; }
.shares td.pct { text-align:right; padding-left:.9rem; }
.card-foot { font-size:1rem; }
.video { position:relative; padding-top:56.25%; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.video a { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.video-toggle { text-align:right; margin:.25rem 0; }
#cardbox .card { cursor:pointer; }
/* Deck screen with a video, as the "Deck" tab of the old deck: the next-card back, the
   buttons and the missions in one row on top, the video in the wide area below them. */
@media (min-width:900px) {
  main:has(#cardbox .video) { max-width:none; display:grid; grid-template-columns:minmax(0,1fr); align-items:start; }
  main:has(#cardbox .video) #live { grid-row:1; }
  main:has(#cardbox .video) #cardbox { grid-row:2; }
  main:has(#cardbox .video) #offline { grid-row:3; }
  main:has(#cardbox .video) .video { padding-top:0; aspect-ratio:16 / 9; max-height:calc(100vh - 10rem); width:100%; background:#000; }
  main:has(#cardbox .video) .row input { width:6rem; }
  main:has(#cardbox .video):not(.setup) #game { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem 1.5rem; }
  main:has(#cardbox .video):not(.setup) #game .nextform { width:15rem; margin:0; }
  main:has(#cardbox .video):not(.setup) #game .actions { margin:0; }
  main:has(#cardbox .video):not(.setup) #game .row { margin:0; }
  main:has(#cardbox .video):not(.setup) #game h3 { margin:0; }
}
/* While a video plays, only what the old deck showed next to its video stays visible. */
.setup-toggle { display:none; }
/* No top bar on the video screen; the gear button brings it back. */
body:has(#cardbox .video):not(:has(main.setup)) .top { display:none; }
main:has(#cardbox .video) .setup-toggle { display:inline-block; }
main:has(#cardbox .video):not(.setup) .extra { display:none; }
main:has(#cardbox .video):not(.setup) #game { border:0; background:none; padding:0; margin:0; }
main:has(#cardbox .video):not(.setup) h3 { margin-top:.5rem; }
.nextform { margin:.75rem 0; }
button.nextcard { --card-bg:#ddd; display:grid; grid-template-columns:3rem 1fr 3rem; align-items:center; width:100%; min-height:5rem; padding:.5rem; border:5px solid var(--card-bg); border-radius:20px; background:var(--card-bg); color:var(--text); font:italic bold 1.3rem Georgia,serif; }
button.nextcard span { font:.85rem system-ui,sans-serif; }
button.nextcard span:last-child { text-align:right; }
button.nextcard.history { --card-bg:Peru; } button.nextcard.income { --card-bg:DeepSkyBlue; } button.nextcard.production { --card-bg:LightGray; }
button.nextcard.geography { --card-bg:LawnGreen; } button.nextcard.war { --card-bg:Tomato; }
@media (max-width:560px) { .shares { column-count:2; } .card { font-size:1.05rem; } }