:root{
    --paper:#F2E8D2; --paper-deep:#E7D8AF; --paper-edge:#D8C48C;
    --wood:#C89858; --wood-line:#7A5630; --wood-deep:#43301C;
    --ink:#2A2118; --ink-soft:#5C5040;
    --piece-body:#F3E3B4; --piece-edge:#A97B3E;
    --seal:#A3382A; --seal-soft:#EAD2C4;
    --indigo:#2C4A63; --indigo-soft:#D9E1E8;
    --shadow: 0 10px 30px -12px rgba(43,30,15,0.35);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background: radial-gradient(ellipse at top left, rgba(255,255,255,0.35), transparent 60%), var(--paper);
    color:var(--ink); font-family:'Zen Old Mincho', 'Noto Serif JP', Georgia, serif; min-height:100vh;
  }
  a{color:var(--indigo); text-decoration:none;}
  a:hover{text-decoration:underline;}
  header.site{
    display:flex; align-items:center; justify-content:space-between; padding:18px 32px;
    border-bottom:3px solid var(--wood-deep); background:var(--paper-deep); flex-wrap:wrap; gap:12px;
  }
  main{max-width:1100px; margin:0 auto; padding:38px 24px 80px;}
  .page-head .eyebrow{font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--indigo);}
  h1{font-family:'Shippori Mincho', serif; font-size:2.1rem; margin:6px 0 6px;}
  .lede{color:var(--ink-soft); max-width:66ch; line-height:1.6;}
  .brand{display:flex; align-items:center; gap:10px;}
  .brand .mark{font-family:'Shippori Mincho', serif; font-weight:700; font-size:1.6rem; color:var(--seal); line-height:1;}
  .brand .title{font-family:'Shippori Mincho', serif; font-weight:700; font-size:1.15rem;}
  nav.site{display:flex; gap:22px; font-family:'Shippori Mincho', serif; font-size:0.95rem;}
  nav.site a{color:var(--ink); border-bottom:2px solid transparent; padding-bottom:2px;}
  nav.site a.current, nav.site a:hover{color:var(--seal); border-color:var(--seal); text-decoration:none;}

  main{max-width:1100px; margin:0 auto; padding:38px 24px 80px;}
  .page-head .eyebrow{font-family:'JetBrains Mono', monospace; font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--indigo);}
  h1{font-family:'Shippori Mincho', serif; font-size:2.1rem; margin:6px 0 6px;}
  .lede{color:var(--ink-soft); max-width:66ch; line-height:1.6;}

  h2.section-title{
    font-family:'Shippori Mincho', serif; font-size:1.5rem; margin:52px 0 6px;
    padding-bottom:8px; border-bottom:2px solid var(--wood-deep);
  }
  p.section-lede{color:var(--ink-soft); max-width:70ch; line-height:1.6; margin-top:0;}

  footer.site{text-align:center; padding:30px; color:var(--ink-soft); font-size:0.85rem;}
  /* Step 22 — the Premium badge (static/js/badges.js puts it after a name)
     and the nav link. Gold on ink reads on both the paper and the wood. */
  .premium-badge{
    display:inline-block; margin-left:4px; padding:0 5px; border-radius:999px;
    font:700 0.72em/1.5 system-ui, sans-serif; vertical-align:0.15em;
    color:#3B2A14; background:linear-gradient(180deg,#FFE08A,#E3B23C);
    box-shadow:0 0 0 1px rgba(122,86,48,.55);
  }
  .nav-premium{font-weight:700; color:var(--seal);}

  /* Step 22 — site footer (base.html). */
  .site-footer{margin-top:48px; padding:22px 16px 30px; border-top:1px solid var(--paper-edge); text-align:center; color:var(--ink-soft); font-size:.85rem;}
  .site-footer nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin-bottom:6px;}
  .site-footer a{color:var(--ink-soft);}
  .site-footer a:hover{color:var(--seal);}

/* Step 26 — the site header, now a real <header> inside <body>. */
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #ccc; }
.site-header .container { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-brand { font: 700 1.25rem 'Shippori Mincho', Georgia, serif; color: var(--ink); text-decoration: none; }
.site-brand__mark { color: var(--seal); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.site-nav a { color: var(--ink); }
.site-nav a:hover { color: var(--seal); }
#user-panel { display: flex; align-items: center; gap: 8px; }
.user-panel__settings { margin: 0 6px; text-decoration: none; }

/* Kanji / English pieces (piece-set.js). Text that names pieces comes in both
   spellings; only the one for the player's set is shown. */
html[data-piece-set="simple"] .ps-kanji,
html:not([data-piece-set="simple"]) .ps-simple { display: none !important; }
.piece-set-toggle { font: 600 .85rem system-ui, sans-serif; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--wood-line); background: var(--piece-body); color: var(--ink); cursor: pointer; }
.piece-set-toggle:hover { border-color: var(--seal); color: var(--seal); }
.piece-set-toggle:focus-visible { outline: 2px solid var(--indigo); outline-offset: 2px; }

.settings { max-width: 640px; }
.settings .hint { color: var(--ink-soft); font-size: .9rem; }

/* The two-card piece-set picker (registration and /settings). */
.piece-picker { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.piece-picker legend { font-weight: 700; margin-bottom: 4px; padding: 0; }
.piece-picker__hint { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.45; }
.piece-picker__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.piece-option { position: relative; display: grid; gap: 6px; padding: 12px; border: 2px solid var(--paper-edge);
  border-radius: 10px; background: rgba(255, 255, 255, .45); cursor: pointer; }
.piece-option input { position: absolute; opacity: 0; pointer-events: none; }
.piece-option:has(input:checked) { border-color: var(--seal); background: #fff; }
.piece-option:has(input:focus-visible) { outline: 2px solid var(--indigo); outline-offset: 2px; }
.piece-option__name { font-weight: 700; }
.piece-option__note { font-size: .85rem; color: var(--ink-soft); line-height: 1.4; }
.piece-option__faces { display: flex; gap: 4px; flex-wrap: wrap; }
.piece-option__faces img { width: 40px; height: 40px; object-fit: contain; }
@media (max-width: 420px) {
  .piece-picker__options { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .site-nav { gap: 2px 10px; font-size: .92rem; }
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }

/* The logged-out front page (Step 26). */
.landing { max-width: 1100px; margin: 0 auto; padding: 28px 16px 60px; }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.landing-eyebrow { font: 600 .78rem system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo); margin: 0; }
.landing h1 { font-size: 2.1rem; line-height: 1.2; margin: 8px 0 12px; }
.landing-lede { color: var(--ink-soft); line-height: 1.6; max-width: 60ch; }
.landing-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-button { display: inline-block; padding: 10px 18px; border-radius: 8px; background: var(--seal); color: #fff; font-weight: 700; }
.cta-button.secondary { background: transparent; color: var(--seal); border: 2px solid var(--seal); }
.cta-button:hover { text-decoration: none; filter: brightness(1.05); }
.landing-daily { display: block; background: var(--paper-deep); border: 1px solid var(--paper-edge); border-radius: 12px; padding: 12px; color: var(--ink); }
.landing-daily:hover { text-decoration: none; border-color: var(--seal); }
.landing-daily .pos-svg { width: 100%; height: auto; display: block; margin: 8px 0; }
.landing-daily__head strong { color: var(--seal); margin-left: 6px; }
.landing-daily__foot { font-size: .9rem; color: var(--ink-soft); }
.landing-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin: 36px 0; }
.landing-features article { background: #fffaf0; border: 1px solid var(--paper-edge); border-radius: 10px; padding: 14px 16px; }
.landing-features h2 { font-size: 1.15rem; margin: 0 0 6px; }
.landing-features p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.landing-learn { background: var(--paper-deep); border-radius: 12px; padding: 16px 20px; }
@media (max-width: 820px) { .landing-hero { grid-template-columns: 1fr; } .landing h1 { font-size: 1.6rem; } }