/* Parchment and ink, the same materials the game itself is drawn on and the same ones the waiting
     panel uses inside it. The page was a dark hall with gold lettering; it is now a written page,
     which is what a game about kingdoms, contracts and map-making should look like.

     Deliberately one visual world rather than two: no dark variant. A parchment that flips to black
     at the operating system's whim is not a material, it is a theme switch. */
  :root{
    --bg:#efe4c6; --bg2:#e8dab8; --panel:#ead9b1; --panel2:#e2cfa2;
    --ink:#2c1d0c; --muted:#6a563a; --faint:#8b7551;
    --gold:#8a6420; --gold2:#7a5210; --line:rgba(74,52,25,.28);
    --wood:#4a3419; --wood-dark:#2b1d0f;
    --red:#8c2f22; --green:#46662f;
    --maxw:1080px; --maxw-text:760px;
    color-scheme:light;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; color:var(--ink);
    background:
      radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%),
      repeating-linear-gradient(94deg, rgba(120,92,48,.035) 0 2px, rgba(120,92,48,0) 2px 7px),
      var(--bg);
    font-family:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  a{color:var(--gold2); text-decoration:none}
  a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
  h1,h2,h3{font-weight:700; line-height:1.15; margin:0}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
  .eyebrow{
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    text-transform:uppercase; letter-spacing:.28em; font-size:.72rem;
    color:var(--gold); margin:0 0 14px;
  }

  /* ---- top bar ---- */
  header.nav{
    position:sticky; top:0; z-index:50;
    background:rgba(239,228,198,.9); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--wood);
    box-shadow:0 1px 0 rgba(255,255,255,.5);
  }
  .nav .wrap{display:flex; align-items:center; gap:20px; height:60px}
  .brand{font-weight:700; letter-spacing:.04em; color:var(--ink); font-size:1.05rem}
  .brand b{color:var(--gold)}
  .nav nav{margin-left:auto; display:flex; gap:22px; font-size:.92rem}
  .nav nav a{color:var(--muted)}
  .nav nav a:hover{color:var(--gold2)}
  /* The online route is the one thing people cannot guess is here, so it reads as a button. */
  .nav nav a.pill{
    color:var(--gold2); border:1px solid var(--line); border-radius:999px;
    padding:5px 14px; line-height:1;
  }
  .nav nav a.pill:hover{border-color:var(--gold); color:var(--ink)}
  .nav nav a.here{color:var(--ink)}

  /* Below 780px the row does not fit, so it folds into a disclosure. <details> rather than a
     script: the menu is the only interactive thing on most of these pages, and it should not
     depend on JavaScript having loaded. The fold used to sit at 680px; the bar now carries all
     three ways to play plus two reading links, which needs the extra 100px. */
  .navmenu{margin-left:auto; position:relative}
  .navmenu > summary{
    list-style:none; cursor:pointer; color:var(--gold2); font-size:.92rem;
    border:1px solid var(--line); border-radius:6px; padding:6px 12px;
  }
  .navmenu > summary::-webkit-details-marker{display:none}
  .navmenu[open] > summary{border-color:var(--gold)}
  .navmenu nav{
    position:absolute; right:0; top:calc(100% + 10px); z-index:60;
    display:flex; flex-direction:column; gap:0; min-width:210px;
    background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px;
  }
  .navmenu nav a{padding:9px 12px; border-radius:5px}
  .navmenu nav a:hover{background:var(--panel2)}
  .navmenu nav a.pill{border:0; padding:9px 12px; border-radius:5px}
  @media(min-width:781px){ .navmenu{display:none} }
  @media(max-width:780px){ .nav > .wrap > nav{display:none} }
  @media(max-width:900px){ .nav .wrap{gap:14px} .nav nav{gap:16px; font-size:.88rem} }

  /* ---- hero ---- */
  .hero{
    position:relative; overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(239,228,198,.86) 0%, rgba(239,228,198,.94) 55%, var(--bg) 100%),
      linear-gradient(0deg, rgba(176,140,74,.5), rgba(176,140,74,.5)),
      url(/assets/hero.jpeg) center 30% / cover no-repeat;
    background-blend-mode: normal, color, normal;
  }
  .hero .wrap{padding:96px 22px 88px}
  .hero h1{font-size:clamp(2.4rem,6vw,4rem); color:var(--ink); text-shadow:0 1px 0 rgba(255,255,255,.5)}
  .hero h1 span{color:var(--gold2)}
  .hero p.lead{
    max-width:600px; margin:20px 0 0; font-size:1.18rem; color:var(--ink);
  }
  .cta{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
  .btn{
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 24px; border-radius:6px; font-weight:700; font-size:1rem;
    border:1px solid transparent; cursor:pointer; font-family:inherit;
  }
  .btn.primary{background:linear-gradient(180deg,var(--wood),var(--wood-dark)); color:#f0e2bd; border-color:var(--wood-dark); box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
  .btn.primary:hover{filter:brightness(1.12); color:#fff2d4}
  .btn.ghost{background:rgba(255,252,240,.6); border-color:var(--wood); color:var(--ink)}
  .btn.ghost:hover{border-color:var(--wood-dark); background:rgba(255,252,240,.9); color:var(--ink)}
  .hero .note{margin-top:16px; font-size:.82rem; color:var(--muted)}

  /* ---- sections ---- */
  section{padding:82px 0; border-bottom:1px solid var(--line)}
  section h2{font-size:clamp(1.7rem,3.6vw,2.4rem); color:var(--ink)}
  section .intro{color:var(--muted); max-width:640px; margin:14px 0 0; font-size:1.08rem}

  /* ---- feature grid ---- */
  .grid{display:grid; gap:20px; margin-top:44px}
  .cols-2{grid-template-columns:repeat(2,1fr)}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:820px){ .cols-2,.cols-3{grid-template-columns:1fr} }
  .card{
    background:linear-gradient(180deg,rgba(255,252,240,.75),var(--panel));
    border:1px solid var(--line); border-radius:4px; padding:26px;
    box-shadow:0 1px 2px rgba(74,52,25,.12);
    transition:border-color .15s, transform .15s, box-shadow .15s;
  }
  .card:hover{border-color:var(--wood); transform:translateY(-2px); box-shadow:0 6px 16px rgba(74,52,25,.18)}
  .card.accent{border-color:var(--gold)}
  .card .ic{font-size:1.6rem; line-height:1; margin-bottom:14px}
  .card h3{font-size:1.22rem; color:var(--ink); margin-bottom:8px}
  .card p{margin:0; color:var(--muted); font-size:.98rem}
  .card ul{margin:12px 0 0; padding-left:18px; color:var(--muted); font-size:.94rem}
  .card ul li{margin:4px 0}

  /* ---- factions ---- */
  .factions{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
  @media(max-width:820px){ .factions{grid-template-columns:1fr 1fr} }
  @media(max-width:520px){ .factions{grid-template-columns:1fr} }
  .fac{
    background:var(--panel); border:1px solid var(--line); border-radius:9px;
    padding:20px; position:relative;
  }
  .fac .tag{font-family:ui-monospace,monospace; font-size:.68rem; letter-spacing:.15em;
    text-transform:uppercase; color:var(--faint)}
  .fac h3{font-size:1.12rem; color:var(--ink); margin:6px 0 4px}
  .fac .sub{color:var(--gold); font-style:italic; font-size:.92rem}
  .fac p{margin:10px 0 0; color:var(--muted); font-size:.9rem}
  .fac .army{margin-top:12px; font-size:.8rem; color:var(--faint); border-top:1px solid var(--line); padding-top:10px}

  /* ---- screenshots ---- */
  figure.shot{margin:0; border:1px solid var(--wood); border-radius:4px; overflow:hidden; background:var(--wood-dark); box-shadow:0 2px 10px rgba(74,52,25,.2)}
  figure.shot img{display:block; width:100%; height:auto}
  figure.shot figcaption{
    padding:12px 16px; background:var(--panel); color:var(--muted); font-size:.9rem;
    border-top:1px solid var(--wood);
  }
  figure.shot figcaption b{color:var(--ink)}
  .shot-wide{margin-top:44px; max-width:820px}
  .shot-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; align-items:start}
  @media(max-width:820px){ .shot-row{grid-template-columns:1fr} }
  /* ---- the introduction video: a picture until it is pressed, then the YouTube player in its place ---- */
  #video figure.shot{margin-top:28px}
  .video-box{position:relative; display:block; aspect-ratio:16/9; background:var(--wood-dark)}
  .video-box img, .video-box iframe{display:block; position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:cover}
  .video-box .play{
    position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px; border-radius:50%;
    background:rgba(43,29,15,.82); border:2px solid #f0e2bd; box-shadow:0 2px 14px rgba(0,0,0,.45);
    transition:transform .15s, background .15s;
  }
  .video-box .play::after{
    content:""; position:absolute; left:33px; top:24px;
    border-style:solid; border-width:18px 0 18px 28px; border-color:transparent transparent transparent #f0e2bd;
  }
  .video-box:hover .play, .video-box:focus-visible .play{transform:scale(1.08); background:rgba(122,82,16,.92)}
  .feature-shot{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin-top:44px}
  @media(max-width:820px){ .feature-shot{grid-template-columns:1fr} }
  .feature-shot h3{color:var(--gold2); font-size:1.3rem; margin-bottom:10px}
  .feature-shot p{color:var(--muted); margin:0 0 10px}

  /* ---- numbered steps ---- */
  .steps{counter-reset:s; list-style:none; padding:0; margin:26px 0 0}
  .steps li{position:relative; padding:0 0 20px 46px; color:var(--muted)}
  .steps li::before{
    counter-increment:s; content:counter(s);
    position:absolute; left:0; top:-2px; width:30px; height:30px; border-radius:50%;
    display:grid; place-items:center; font-weight:700;
    background:var(--wood); border:1px solid var(--wood-dark); color:#f0e2bd; font-size:.9rem;
  }
  .steps li b{color:var(--ink)}

  /* ---- download ---- */
  .dl{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px}
  @media(max-width:820px){ .dl{grid-template-columns:1fr} }
  .dl a{
    display:block; background:var(--panel); border:1px solid var(--line);
    border-radius:10px; padding:24px; color:var(--ink); transition:border-color .15s,transform .15s;
  }
  .dl a:hover{border-color:var(--gold); transform:translateY(-2px); color:var(--ink)}
  .dl .os{font-size:1.15rem; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:10px}
  .dl .meta{color:var(--muted); font-size:.88rem; margin-top:8px}
  .dl .pending{display:inline-block; margin-top:12px; font-family:ui-monospace,monospace;
    font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
    border:1px solid var(--line); border-radius:20px; padding:3px 12px}

  .callout{
    margin-top:40px; background:var(--panel2); border:1px solid var(--line);
    border-left:3px solid var(--gold); border-radius:8px; padding:20px 24px;
    color:var(--muted); font-size:.95rem;
  }
  .callout b{color:var(--ink)}
  .callout p{margin:10px 0 0}
  .callout ol{margin:12px 0 0; padding-left:20px}
  .callout ol li{margin:6px 0}
  .callout kbd{
    font-family:ui-monospace,monospace; font-size:.82rem; color:var(--ink);
    background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:1px 6px;
  }

  /* collapsible "why the warning" / checksums */
  details.more{
    margin-top:18px; background:var(--panel2); border:1px solid var(--line);
    border-radius:8px; padding:0 20px;
  }
  details.more > summary{
    cursor:pointer; list-style:none; padding:14px 0; color:var(--gold);
    font-size:.92rem; font-weight:700;
  }
  details.more > summary::-webkit-details-marker{display:none}
  details.more > summary::before{content:"▸ "; color:var(--gold)}
  details.more[open] > summary::before{content:"▾ "}
  details.more > :not(summary):last-child{padding-bottom:18px}
  .sums{margin:0; font-size:.82rem; color:var(--muted)}
  .sums dt{font-family:ui-monospace,monospace; color:var(--ink); margin-top:12px}
  .sums dt:first-child{margin-top:0}
  .sums dd{
    margin:4px 0 0; font-family:ui-monospace,monospace; font-size:.74rem;
    color:var(--faint); word-break:break-all;
  }

  /* ---- footer ---- */
  footer{padding:56px 0 70px; color:var(--faint); font-size:.86rem}
  footer .wrap{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between}
  footer a{color:var(--gold)}
  footer h4{color:var(--ink); font-size:.95rem; margin:0 0 10px}
  .disclaimer{margin-top:34px; max-width:640px; line-height:1.7}

    .wip-badge {
      display: inline-block;
      vertical-align: middle;
      margin-left: 10px;
      padding: 3px 10px;
      border-radius: 999px;
      background: #7a3d12;
      color: #ffe6c4;
      font-size: 0.5em;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    /* The badge sits beside the h1, not inside it, so search engines don't read it as part of the title. */
    .titlerow{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px}
    .titlerow .wip-badge{margin-left:0; font-size:clamp(.95rem,2.1vw,1.35rem)}

    .wip-note {
      margin: 14px 0 0;
      padding: 12px 16px;
      border-left: 3px solid #7a3d12;
      background: rgba(122, 61, 18, 0.12);
      border-radius: 4px;
      font-size: 0.95rem;
      line-height: 1.6;
    }

  /* ======== added for the multi-page layout ======== */

  /* ---- the three doors: host, join, solo ----
     The whole card is the link, so there is no button to miss and no dead area inside a card that
     is obviously clickable. Equal weight by default -- these are three ways in, not one route with
     two afterthoughts -- with hosting wearing gold because it is the one that starts a game. */
  .doors{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:42px}
  @media(max-width:860px){ .doors{grid-template-columns:1fr} }
  .door{
    display:flex; flex-direction:column; color:var(--ink);
    background:linear-gradient(180deg,rgba(255,252,240,.8),var(--panel));
    border:1px solid var(--line); border-radius:10px; padding:26px 24px 22px;
    box-shadow:0 1px 2px rgba(74,52,25,.12);
    transition:border-color .15s, transform .15s, box-shadow .15s;
  }
  .door:hover{
    text-decoration:none; color:var(--ink); border-color:var(--wood);
    transform:translateY(-2px); box-shadow:0 6px 16px rgba(74,52,25,.18);
  }
  .door.lead{border-color:var(--gold)}
  .door .ic{font-size:1.7rem; line-height:1; margin-bottom:14px}
  .door h3{font-size:1.28rem; color:var(--ink); margin:0 0 9px}
  .door p{margin:0; color:var(--muted); font-size:.97rem}
  /* margin-top:auto rather than flex:1 on the description above: it is the row of links at the
     bottom that has to line up across the three cards, whatever length the copy runs to. */
  .door .need{
    margin:18px 0 0; margin-top:auto; padding-top:13px; border-top:1px solid var(--line);
    font-size:.84rem; color:var(--faint); line-height:1.5;
  }
  .door .go{margin:14px 0 0; font-weight:700; color:var(--gold2); font-size:.97rem}
  .door:hover .go{color:var(--ink)}

  /* ---- route cards: the three ways to play ---- */
  .routes{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:52px}
  @media(max-width:900px){ .routes{grid-template-columns:1fr} }
  .route{
    display:flex; flex-direction:column;
    background:linear-gradient(180deg,rgba(255,252,240,.75),var(--panel));
    border:1px solid var(--line); border-radius:12px; overflow:hidden;
    transition:border-color .15s, transform .15s;
  }
  .route:hover{border-color:var(--wood); transform:translateY(-2px); box-shadow:0 6px 16px rgba(74,52,25,.18)}
  /* The online route is the one most people do not know exists, so it is the one wearing gold. */
  .route.accent{border-color:var(--gold)}
  .route .shotwrap{
    display:block; aspect-ratio:16/10; background:var(--wood-dark); border-bottom:1px solid var(--wood);
    overflow:hidden;
  }
  .route .shotwrap img{display:block; width:100%; height:100%; object-fit:cover}
  .route .body{padding:26px 26px 28px; display:flex; flex-direction:column; flex:1}
  .route h3{font-size:1.35rem; color:var(--ink); margin:2px 0 10px}
  .route p{margin:0; color:var(--muted); font-size:1rem}
  .route .route-actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px}
  .route .route-actions .btn{padding:11px 20px; font-size:.95rem}
  .route .route-links{margin-top:14px; font-size:.9rem; color:var(--faint)}
  .route .route-links a{color:var(--gold)}
  /* The honest caveat. Pinned to the bottom so the cards line up however long the copy runs. */
  .route .route-meta{
    margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line);
    font-size:.85rem; color:var(--faint); line-height:1.55;
  }
  .route.wide{grid-column:1 / -1; background:var(--panel2)}
  .route.wide .body{flex-direction:row; gap:34px; align-items:center; padding:26px}
  .route.wide .body > div:first-child{flex:1}
  @media(max-width:720px){ .route.wide .body{flex-direction:column; align-items:flex-start} }

  /* ---- subpage header ---- */
  .pagehead{
    position:relative; border-bottom:1px solid var(--line);
    background:
      linear-gradient(180deg, rgba(239,228,198,.9) 0%, rgba(239,228,198,.96) 60%, var(--bg) 100%),
      linear-gradient(0deg, rgba(176,140,74,.5), rgba(176,140,74,.5)),
      url(/assets/hero.jpeg) center 28% / cover no-repeat;
    background-blend-mode: normal, color, normal;
  }
  .pagehead .wrap{padding:46px 22px 44px}
  .pagehead .crumbs{font-size:.85rem; color:var(--faint); margin:0 0 18px}
  .pagehead .crumbs a{color:var(--muted)}
  .pagehead h1{font-size:clamp(1.9rem,4.2vw,2.7rem); color:var(--ink)}
  .pagehead .lead{max-width:var(--maxw-text); margin:16px 0 0; color:var(--ink); font-size:1.1rem}

  /* ---- requirements strip ---- */
  .reqs{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:44px}
  @media(max-width:820px){ .reqs{grid-template-columns:1fr; gap:22px} }
  .reqs h3{
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    text-transform:uppercase; letter-spacing:.2em; font-size:.7rem;
    color:var(--gold); margin:0 0 10px; font-weight:400;
  }
  .reqs p{margin:0; color:var(--muted); font-size:.96rem}

  /* ---- sticky call to action, mobile only ---- */
  .stickycta{display:none}
  @media(max-width:680px){
    .stickycta{
      display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:70;
      padding:10px 14px calc(10px + env(safe-area-inset-bottom));
      background:rgba(239,228,198,.95); border-top:1px solid var(--wood); backdrop-filter:blur(8px);
    }
    /* Three buttons, so they are sized for the narrowest phone rather than for the label. */
    .stickycta .btn{flex:1; justify-content:center; padding:12px 6px; font-size:.86rem; white-space:nowrap}
    body{padding-bottom:74px}
  }

  /* ---- prose-width pages ---- */
  .narrow{max-width:var(--maxw-text)}
  section .intro.narrow{max-width:var(--maxw-text)}

  /* ---- footer columns ---- */
  .footer-cols{display:flex; flex-wrap:wrap; gap:34px; justify-content:space-between}
  .footer-cols p{margin:0 0 5px}

  /* ---- the map shelf ----
     A gallery rather than a list, because the picture is the argument: a map somebody drew is worth
     looking at, and a mapmaker deciding whether to send theirs is really deciding whether it would
     look good here. The cards are built from /game-data/scenarios.json, the same file the game reads,
     so a map is published once and appears in both places. */
  .mapshelf{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
  @media(max-width:900px){ .mapshelf{grid-template-columns:1fr 1fr} }
  @media(max-width:620px){ .mapshelf{grid-template-columns:1fr} }
  .mapcard{
    display:flex; flex-direction:column;
    background:linear-gradient(180deg,rgba(255,252,240,.75),var(--panel));
    border:1px solid var(--line); border-radius:12px; overflow:hidden;
    transition:border-color .15s, transform .15s, box-shadow .15s;
  }
  .mapcard:hover{border-color:var(--wood); transform:translateY(-2px); box-shadow:0 6px 16px rgba(74,52,25,.18)}
  .mapcard .thumb{
    display:block; aspect-ratio:1/1; background:var(--wood-dark);
    border-bottom:1px solid var(--wood); overflow:hidden;
  }
  /* The thumbnails are one pixel per map tile scaled up, so smoothing them would turn a legible
     coastline into a smear. Pixelated is the honest rendering of what the engine drew. */
  .mapcard .thumb img{display:block; width:100%; height:100%; object-fit:cover; image-rendering:pixelated}
  /* Every format is drawn now, so this is the fallback rather than the rule: a map published before
     its picture was made, or one whose render failed. Graph paper rather than a broken frame - a
     surveyor's grid with the map's size on it, which still says "this is a map". */
  /* Flex rather than grid: three children in a grid become three implicit rows that share the
     height out between them, which strings the label down the whole tile instead of stacking it. */
  .mapcard .thumb.empty{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:16px;
    box-shadow:inset 0 0 60px rgba(74,52,25,.14);
    background:
      repeating-linear-gradient(0deg, rgba(74,52,25,.13) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(90deg, rgba(74,52,25,.13) 0 1px, transparent 1px 12px),
      repeating-linear-gradient(0deg, rgba(74,52,25,.16) 0 1px, transparent 1px 60px),
      repeating-linear-gradient(90deg, rgba(74,52,25,.16) 0 1px, transparent 1px 60px),
      linear-gradient(160deg, var(--panel), var(--panel2));
  }
  .mapcard .thumb.empty .glyph{font-size:3.4rem; line-height:1; opacity:.42}
  .mapcard .thumb.empty .size{
    margin-top:14px; font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    font-size:.86rem; letter-spacing:.18em; color:var(--muted);
  }
  .mapcard .thumb.empty .hint{
    margin-top:6px; font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  }
  .mapcard .body{padding:22px 22px 24px; display:flex; flex-direction:column; flex:1}
  .mapcard h3{font-size:1.2rem; color:var(--ink); margin:0}
  .mapcard .by{margin:5px 0 0; color:var(--gold); font-style:italic; font-size:.92rem}
  .mapcard .chips{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0}
  .mapcard .chips span{
    font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
    font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);
    border:1px solid var(--line); border-radius:20px; padding:3px 10px;
  }
  /* Playable by two people is the fact a mapmaker most wants to see on their own card, so it is the
     one chip that is allowed to shout. */
  .mapcard .chips span.on{color:var(--gold2); border-color:var(--gold)}
  .mapcard .blurb{margin:14px 0 0; color:var(--muted); font-size:.95rem}
  /* margin-top:auto so the action row lines up across cards whatever length the blurb runs to. */
  .mapcard .acts{
    margin-top:auto; padding-top:18px; display:flex; gap:16px; flex-wrap:wrap;
    font-weight:700; font-size:.94rem;
  }
  .mapcard .lic{
    margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line);
    font-size:.78rem; color:var(--faint); line-height:1.5;
  }
  /* Shown while the list is being fetched, and left in place if it cannot be. Never an empty page. */
  .shelf-note{margin-top:44px; color:var(--muted); font-size:.96rem}

  /* A single wide picture with its own caption, used on the landing page to show what a card on the
     shelf actually looks like. Narrower than .shot-wide: a square image at full width would push the
     rest of the section off the screen. */
  .mapstrip{max-width:360px; margin:0 auto}
  .mapstrip img{display:block; width:100%; height:auto; image-rendering:pixelated}

  /* The battle-AI cards on the landing page: the game's own AI portrait stands in for an emoji icon. */
  .ai-ic{display:block; width:56px; height:56px; border-radius:50%; border:2px solid var(--wood); margin-bottom:14px; image-rendering:pixelated}
  .ai-new{display:inline-block; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#fff8e6; background:var(--red); padding:4px 7px 3px; border-radius:3px; vertical-align:.25em; margin-left:4px}