:root{
    --paper:#F6EFDF; --paper-2:#FBF6EA; --paper-3:#EAE0C8;
    --blue:#2E4A7A; --red:#A63A32; --red-dk:#7C2B25;
    --gold:#C9A23F; --green:#5E7C4A;
    --ink:#3D3320; --ink-2:#4A4232; --ink-3:#6B5E48; --ink-4:#8A7B5C; --ink-5:#A99A78;
    --rule:#D8CBAC;
    --display:'Alfa Slab One', Georgia, serif;
    --text:'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --safe-bot:env(safe-area-inset-bottom);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;min-height:100%;}
  body{font-family:var(--text);background:var(--paper-3);color:var(--ink-2);
    touch-action:manipulation;-webkit-font-smoothing:antialiased;}
  #app{max-width:390px;margin:0 auto;min-height:100vh;background:var(--paper);
    display:flex;flex-direction:column;box-shadow:0 0 40px rgba(61,51,32,.2);}
  a{color:var(--blue);} a:hover{color:var(--red);}

  /* ---- Desktop: fill the window ----
     The paper field and the bunting/header/footer chrome go edge-to-edge, so the
     whole window is the poster. Interior content is centered and scaled up; the
     interactive board keeps a game-width cap so tiles stay square rather than
     stretching into slivers across a wide monitor. */
  @media (min-width:760px){
    body{background:var(--paper);}
    #app{max-width:none;width:100%;box-shadow:none;}
    /* Content sits in a comfortable centered column — buttons, board and pills
       all share one width so nothing looks stretched. The paper field and the
       bunting/header/footer chrome still span the whole window. */
    #app>*{width:100%;max-width:560px;margin-left:auto;margin-right:auto;}
    #app>div:first-child,#app>.pgfoot{max-width:none;}
    .hdr,.pgfoot .bunting,.pgfoot .links,.pgfoot .copy{max-width:1200px;margin-left:auto;margin-right:auto;}
    /* text-heavy pages get a touch more room to read (beats #app>* on specificity) */
    #app>.prose{max-width:640px;}
    /* scale everything up a notch for desktop viewing distance */
    .hero{font-size:44px;}
    .masthead{padding:36px 24px 8px;}
    .tagline{font-size:15px;}
    .kicker{font-size:12px;}
    .cell{height:66px;font-size:18px;}
    .cells.labels>div{font-size:12px;}
    .cellEmpty{height:66px;}
    .gName{font-size:16px;}
    .guessRow{padding:12px 14px;}
    .searchInput{font-size:18px;padding:16px;}
    .btn{font-size:16px;padding:16px;}
    .opt{font-size:16px;padding:16px;}
    .prompt{font-size:22px;}
    .pill b{font-size:28px;}
    .prose{font-size:15px;}
    .mode-btn>div{font-size:15px;}
    .nrow{font-size:15px;padding:9px 12px;}
  }
  /* Wide desktop: just a larger masthead; the content column stays put */
  @media (min-width:1100px){
    .hero{font-size:52px;}
  }

  /* Chrome */
  .bunting{height:8px;flex:none;
    background:repeating-linear-gradient(90deg,var(--red) 0 24px,var(--paper) 24px 48px,var(--blue) 48px 72px,var(--paper) 72px 96px);}
  .bunting.sm{height:6px;margin-bottom:14px;
    background:repeating-linear-gradient(90deg,var(--red) 0 18px,var(--paper) 18px 36px,var(--blue) 36px 54px,var(--paper) 54px 72px);}
  .hdr{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:3px double var(--blue);position:relative;}
  .wordmark{font-family:var(--display);font-size:19px;color:var(--blue);letter-spacing:.01em;font-weight:400;}
  .tabs{display:flex;gap:2px;margin-left:auto;align-items:center;}
  .tab{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ink-3);padding:6px 8px;
    background:none;border:none;cursor:pointer;font-family:var(--text);text-decoration:none;}
  .tab.active{color:var(--red);font-weight:900;border-bottom:2px solid var(--red);}
  .burger{width:34px;height:34px;display:grid;place-items:center;background:none;border:none;cursor:pointer;padding:0;}
  .menu{position:absolute;top:calc(100% + 8px);right:12px;background:var(--paper-2);border:2px solid var(--blue);
    box-shadow:4px 4px 0 rgba(46,74,122,.25);padding:4px;display:flex;flex-direction:column;min-width:150px;z-index:30;}
  .menu button,.menu a{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--blue);padding:12px;min-height:44px;
    border:none;background:none;text-align:left;border-bottom:1px dashed var(--rule);cursor:pointer;
    font-family:var(--text);text-decoration:none;display:block;}
  .menu button:last-child,.menu a:last-child{border-bottom:none;}

  /* Masthead */
  .masthead{text-align:center;padding:22px 20px 4px;}
  .kicker{font-size:10.5px;font-weight:900;letter-spacing:.22em;color:var(--red);}
  .hero{font-family:var(--display);font-size:26px;color:var(--blue);margin-top:6px;line-height:1.15;font-weight:400;}
  .tagline{font-size:13px;font-weight:600;color:var(--ink-3);margin-top:6px;}
  h1{font-family:var(--display);font-size:26px;color:var(--blue);margin:.15em 0;font-weight:400;line-height:1.2;}
  h2{font-family:var(--display);font-size:20px;color:var(--blue);margin:.15em 0 .3em;font-weight:400;}
  .muted{color:var(--ink-3);font-size:13px;line-height:1.6;}
  .center{text-align:center;} .hide{display:none!important;}
  .sect{padding:16px;}
  .stripe{border-top:3px double var(--blue);margin:16px 0;}
  .grid{display:grid;gap:10px;}
  .prose{font-size:13px;color:var(--ink-2);line-height:1.7;}
  .prose p{margin:0 0 12px;}
  .prose h2{font-family:var(--display);font-size:15px;color:var(--blue);font-weight:400;
    margin:20px 0 8px;padding-top:12px;border-top:1px dashed var(--rule);}
  .prose a{color:var(--blue);font-weight:600;}
  .prose a:hover{color:var(--red);}

  /* Board */
  .board{padding:16px 16px 8px;display:flex;flex-direction:column;gap:6px;}
  .cells{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;}
  .cells.labels>div{font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--ink-4);text-align:center;}
  .cell{height:44px;display:grid;place-items:center;font-weight:900;font-size:12px;line-height:1.1;
    background:var(--paper-3);color:var(--ink-4);animation:flip .35s ease both;text-align:center;padding:2px;}
  .cell.g{background:var(--green);color:var(--paper);}
  .cell.y{background:var(--gold);color:var(--ink);}
  .cell.n{background:var(--paper-3);color:var(--ink-4);}
  .cellEmpty{height:44px;border:1.5px dashed var(--rule);}
  @keyframes flip{from{transform:rotateX(-90deg);opacity:0}to{transform:rotateX(0);opacity:1}}
  .guessRow{border:2px solid var(--blue);background:var(--paper-2);padding:8px;box-shadow:3px 3px 0 rgba(46,74,122,.15);}
  .gName{display:flex;align-items:center;gap:8px;margin-bottom:7px;font-size:13px;font-weight:900;
    color:var(--ink);letter-spacing:.03em;text-transform:uppercase;}
  .gName .num{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-4);text-transform:none;}

  /* Portraits — square, letterpress framed */
  .avatar{flex:none;border:1.5px solid var(--blue);background-color:var(--paper-3);
    background-size:cover;background-position:center top;display:grid;place-items:center;
    color:var(--blue);font-family:var(--display);overflow:hidden;}
  .avatar span{font-size:11px;font-weight:400;}
  .avatar.big{width:150px;height:150px;margin:8px auto;border:2px solid var(--blue);}
  .avatar.big span{font-size:44px;}

  /* Input */
  .searchWrap{position:relative;padding:8px 16px 4px;}
  .searchInput{width:100%;padding:14px 12px;border:2px solid var(--blue);background:var(--paper-2);
    color:var(--ink);font-size:16px;font-weight:700;font-family:var(--text);outline:none;}
  .searchInput::placeholder{color:var(--ink-5);}
  .searchInput:focus{border-color:var(--red);}
  .sugg{position:absolute;left:16px;right:16px;top:calc(100% - 4px);background:var(--paper-2);
    border:2px solid var(--blue);box-shadow:4px 4px 0 rgba(46,74,122,.25);max-height:250px;overflow:auto;z-index:25;}
  .sugg button{width:100%;text-align:left;background:none;border:none;border-bottom:1px dashed var(--rule);
    color:var(--ink);padding:10px 12px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:9px;
    font-family:var(--text);min-height:44px;cursor:pointer;}
  .sugg button:last-child{border-bottom:none;}

  /* Buttons */
  .btn{width:100%;background:var(--red);color:var(--paper);border:2px solid var(--red-dk);padding:14px;
    text-align:center;font-weight:900;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
    box-shadow:3px 3px 0 rgba(61,51,32,.3);cursor:pointer;font-family:var(--text);min-height:48px;}
  .btn:active{transform:translate(2px,2px);box-shadow:none;}
  .btn.secondary{background:transparent;border:2px solid var(--blue);color:var(--blue);box-shadow:none;}
  .btn:disabled{opacity:.45;}

  /* Stat pills */
  .row{display:flex;gap:8px;padding:16px 16px 4px;}
  .pill{flex:1;border:2px solid var(--rule);background:var(--paper-2);padding:11px 8px;text-align:center;}
  .pill b{display:block;font-family:var(--display);font-size:20px;color:var(--blue);font-weight:400;}
  .pill span{display:block;font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--ink-4);margin-top:2px;}

  /* Quiz */
  .prompt{font-family:var(--display);font-size:18px;color:var(--blue);margin:4px 0 6px;line-height:1.3;font-weight:400;}
  .subprompt{font-size:9.5px;font-weight:900;letter-spacing:.18em;color:var(--red);text-transform:uppercase;margin-bottom:12px;}
  .opts{display:grid;gap:8px;}
  .opt{width:100%;text-align:left;background:var(--paper-2);border:2px solid var(--blue);color:var(--ink);
    padding:13px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--text);min-height:48px;
    box-shadow:2px 2px 0 rgba(46,74,122,.12);}
  .opt:active{transform:translate(2px,2px);box-shadow:none;}
  .opt.correct{background:var(--green);color:var(--paper);border-color:#47603a;}
  .opt.wrong{background:var(--red);color:var(--paper);border-color:var(--red-dk);}
  .opt.dim{opacity:.4;}
  .card{border:2px solid var(--blue);background:var(--paper-2);padding:14px;margin:16px;
    box-shadow:3px 3px 0 rgba(46,74,122,.15);}
  .fact{border:2px solid var(--rule);background:var(--paper-2);padding:11px;font-size:12.5px;color:var(--ink-2);
    line-height:1.55;margin-top:10px;}
  .fact b{color:var(--ink);font-weight:900;}
  .result-big{font-family:var(--display);font-size:44px;color:var(--blue);text-align:center;font-weight:400;}
  .progress{display:flex;gap:5px;margin:0 0 12px;}
  .progress .dot{flex:1;height:5px;background:var(--rule);}
  .progress .dot.on{background:var(--red);}
  .progress .dot.done{background:var(--green);}

  /* How to play */
  .howto{margin:16px 16px 0;border-top:3px double var(--blue);padding-top:14px;}
  .howto .h{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red);text-align:center;}
  .howto p{font-size:13px;color:var(--ink-2);line-height:1.6;margin:8px 0 0;text-align:center;}
  .chip{font-weight:900;padding:1px 5px;}
  .chip.g{background:var(--green);color:var(--paper);}
  .chip.y{background:var(--gold);color:var(--ink);}

  /* Distribution (stats) */
  .dist{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:11px;font-weight:900;color:var(--ink-4);}
  .dist .bar{height:20px;background:var(--blue);color:var(--paper);display:grid;place-items:center;
    font-size:10px;font-weight:900;min-width:22px;padding:0 5px;}
  .dist .bar.hi{background:var(--red);}

  .toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-bot));transform:translateX(-50%);
    background:var(--blue);color:var(--paper);border:2px solid var(--ink);padding:10px 16px;
    font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;z-index:50;opacity:0;
    transition:opacity .25s;box-shadow:3px 3px 0 rgba(61,51,32,.3);}
  .toast.show{opacity:1;}
  a.link{color:var(--blue);text-decoration:none;font-weight:900;}
  .wlink{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ink-4);}
  .wmore{display:inline-block;margin-top:6px;color:var(--blue);text-decoration:none;font-weight:900;
    font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;}
  .wmore:hover{color:var(--red);}
  a.avlink{display:inline-flex;text-decoration:none;flex:none;}
  .foot{padding:12px 16px 0;text-align:center;color:var(--ink-4);font-size:9.5px;font-weight:900;
    letter-spacing:.12em;text-transform:uppercase;}

  /* Mode buttons (pub quiz) */
  .mode-btn{width:100%;text-align:left;border:2px solid var(--blue);background:var(--paper-2);padding:13px;
    display:flex;align-items:center;gap:11px;cursor:pointer;box-shadow:3px 3px 0 rgba(46,74,122,.15);font-family:var(--text);}
  .mode-btn:active{transform:translate(2px,2px);box-shadow:none;}
  .mode-btn>div{font-size:13px;font-weight:900;color:var(--ink);letter-spacing:.05em;text-transform:uppercase;}
  .mode-btn small{display:block;font-weight:600;color:var(--ink-3);font-size:11.5px;margin-top:3px;
    text-transform:none;letter-spacing:0;}
  .mode-ico{width:34px;height:34px;border:1.5px solid var(--blue);background:var(--paper-3);
    display:grid;place-items:center;font-size:16px;flex:none;}
  .mode-daily{border-left:6px solid var(--red);}
  .mode-quiz{border-left:6px solid var(--blue);}

  /* Sort list (pub quiz) */
  .sortlist{list-style:none;padding:0;margin:12px 0;position:relative;}
  .sortItem{background:var(--paper-2);border:2px solid var(--blue);padding:10px;margin:6px 0;
    display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--ink);
    touch-action:none;user-select:none;box-shadow:2px 2px 0 rgba(46,74,122,.12);}
  .sortItem .rank{width:26px;height:26px;background:var(--blue);color:var(--paper);
    display:grid;place-items:center;font-size:12px;font-weight:900;flex:none;}
  .sortItem .grip{margin-left:auto;color:var(--ink-4);font-size:16px;letter-spacing:-2px;}
  .sortItem.dragging{box-shadow:4px 4px 0 rgba(46,74,122,.3);z-index:5;}
  .sortItem.correct{border-color:var(--green);background:#e9eede;}
  .sortItem.wrong{border-color:var(--red);background:#f2e2df;}
  .sortItem .yr{color:var(--ink-4);font-weight:900;font-size:12px;}
  .seg{display:flex;border:2px solid var(--blue);margin:10px 0;}
  .seg button{flex:1;background:none;border:none;color:var(--ink-3);padding:10px;font-weight:900;font-size:12px;}
  .seg button.active{background:var(--red);color:var(--paper);}

  /* Quiz setup */
  .setup-h{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red);text-align:center;margin-bottom:8px;}
  .seg4 button{font-size:10px;letter-spacing:.04em;padding:10px 2px;}
  .mode-btn.picked{box-shadow:3px 3px 0 rgba(166,58,50,.3);}
  .cats{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
  .cat{border:2px solid var(--rule);background:var(--paper-2);color:var(--ink-4);
    font-family:var(--text);font-size:10px;font-weight:900;letter-spacing:.08em;
    padding:11px 4px;cursor:pointer;min-height:44px;}
  .cat.on{border-color:var(--blue);background:var(--blue);color:var(--paper);}

  /* Name Them All list */
  .nrow{display:flex;align-items:center;gap:9px;padding:7px 9px;margin-bottom:4px;
    border:1.5px solid var(--rule);background:var(--paper-2);font-size:13px;}
  .nrow.ok{border-color:var(--green);}
  .nrow.bad{border-color:var(--red);}
  .nrow.done{border-color:var(--rule);}
  .nrow .nnum{font-family:var(--display);font-size:12px;color:var(--blue);min-width:22px;text-align:right;}
  .nrow .nname{font-weight:700;color:var(--ink);}
  .nrow .ntick{margin-left:auto;font-weight:900;color:var(--ink-4);}
  .nrow.ok .ntick{color:var(--green);}
  .nrow.bad .ntick{color:var(--red);}
  .nrow .nsaid{margin-left:auto;font-size:11px;color:var(--ink-4);font-style:italic;}

  /* Cross-sell block at end screens */
  .crosssell{margin-top:18px;padding-top:14px;border-top:3px double var(--blue);text-align:center;}
  .crosssell .h{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--red);}
  .crosssell p{font-size:13px;color:var(--ink-2);line-height:1.55;margin:8px 0 0;}

  /* Presidents reference */
  .pimg{display:block;margin:0 auto 12px;border:2px solid var(--blue);width:150px;height:150px;object-fit:cover;object-position:center top;}
  .pfacts{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .pf{border:1.5px solid var(--rule);background:var(--paper-2);padding:8px 10px;}
  .pf-k{display:block;font-size:9px;font-weight:900;letter-spacing:.1em;color:var(--ink-4);text-transform:uppercase;}
  .pf-v{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-top:2px;}
  .pnav{display:flex;justify-content:space-between;gap:10px;margin-top:16px;font-size:12px;font-weight:900;letter-spacing:.03em;}
  .pnav-a{color:var(--blue);text-decoration:none;}
  .pnav-a:hover{color:var(--red);}
  .plist{display:flex;flex-direction:column;gap:5px;}
  .prow{display:flex;align-items:center;gap:11px;border:1.5px solid var(--rule);background:var(--paper-2);
    padding:7px 10px;text-decoration:none;}
  .prow:hover{border-color:var(--blue);}
  .prow img{border:1.5px solid var(--blue);object-fit:cover;object-position:center top;flex:none;}
  .prow-n{font-family:var(--display);font-size:14px;color:var(--blue);min-width:26px;text-align:right;}
  .prow-name{font-weight:700;color:var(--ink);font-size:14px;}
  .prow-yrs{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-4);}

  /* Page footer */
  .pgfoot{margin-top:auto;padding:22px 16px calc(18px + var(--safe-bot));text-align:center;}
  .pgfoot .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
  .pgfoot .links button,.pgfoot .links a{background:none;border:none;color:var(--ink-4);font-family:var(--text);
    font-size:10.5px;font-weight:700;letter-spacing:.1em;cursor:pointer;padding:4px;text-decoration:none;}
  .pgfoot .links button:hover,.pgfoot .links a:hover{color:var(--red);}
  .pgfoot .copy{font-size:10px;color:var(--ink-5);margin-top:8px;letter-spacing:.06em;}