:root {
  color-scheme: light;
  --paper: #f4f0e8;
  --ink: #151b24;
  --muted: #656d70;
  --line: #dcd6c9;
  --gold: #e8cc71;
  --orange: #d76b4e;
  --white: #fffdf8;
  font-family: Arial, Helvetica, sans-serif;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
a { color: inherit; }
button { cursor: pointer; }
.wrap { width: min(1260px, calc(100% - 72px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 92px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; font-weight: 900; font-size: 22px; letter-spacing: -.065em; }
.brand-accent { color: var(--orange); }
.brand-mark { width: 32px; height: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; transform: rotate(-7deg); }
.brand-mark i { background: var(--ink); border-radius: 2px; }
.brand-mark i:nth-child(5) { background: var(--orange); }
.top-nav { display: flex; align-items: center; gap: 34px; font-size: 13px; font-weight: 700; }
.top-nav > a { text-decoration: none; transition: color .2s; }
.top-nav > a:hover { color: var(--orange); }
.language-switch { position: relative; border: 1px solid var(--line); border-radius: 50px; background: #eee9df; }
.language-switch summary { display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; list-style: none; white-space: nowrap; }
.language-switch summary::-webkit-details-marker { display: none; }
.language-options { position: absolute; right: 0; top: calc(100% + 8px); min-width: 164px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: 0 10px 28px rgba(21,27,36,.15); z-index: 10; }
.language-switch a { display: block; text-decoration: none; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.language-switch a:hover { background: #eee9df; }
.language-switch a[aria-current="page"] { background: var(--ink); color: white; }

.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 88px); padding-block: 54px 72px; align-items: center; }
.eyebrow { display: flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.hero h1 { font-size: clamp(56px, 6.8vw, 98px); line-height: .98; letter-spacing: -.075em; margin: 24px 0; font-weight: 900; }
h1 em, h2 em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.085em; }
.hero h1 em { color: var(--orange); }
html:is([lang="ja"], [lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) .hero h1 { font-size: clamp(44px, 5.3vw, 76px); line-height: 1.18; letter-spacing: -.025em; }
html[lang="ja"] .hero h1 { text-wrap: balance; }
html[lang="ja"] :is(.section-heading h2, .prompts-copy h2) { line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
html:is([lang="ja"], [lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) h1 em,
html:is([lang="ja"], [lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) h2 em { letter-spacing: -.025em; }
.hero-description { max-width: 475px; color: #4e5759; font-size: clamp(18px, 1.65vw, 22px); line-height: 1.55; margin: 0 0 31px; }
.hero-description strong { display: block; color: var(--ink); margin-bottom: 9px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid transparent; text-decoration: none; font-weight: 800; font-size: 14px; border-radius: 10px; padding: 17px 21px; min-height: 53px; transition: transform .18s, background .18s, box-shadow .18s; }
.button:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(21,27,36,.12); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button-primary { background: var(--ink); color: white; }
.button-primary:not(:disabled):hover { background: #293449; }
.button-outline { color: var(--ink); background: transparent; border-color: #c9c1b3; }
.hero-cta { min-width: 214px; }
.hero-note { color: #7d817e; font-size: 12px; margin-top: 17px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 20px 0 0; }
.hero-facts li { font-size: 11px; font-weight: 700; padding: 7px 10px; border: 1px solid var(--line); border-radius: 50px; }
.hero-example { width: min(100%, 495px); justify-self: end; margin: 0; }
.hero-art { display: block; width: 100%; border-radius: 13px; background: var(--ink); box-shadow: 14px 15px 0 #e2d9cb, 0 25px 65px rgba(25,29,35,.15); transform: rotate(2deg); transition: transform .18s; }
.hero-art:hover { transform: rotate(0); }
.hero-art img { display: block; width: 100%; height: auto; border-radius: inherit; }
.hero-example figcaption { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 30px 0 0; }
.hero-art-top, .hero-art-bottom, .poster-topline, .poster-bottomline { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.hero-art-top { margin-bottom: 17px; }
.hero-art-bottom { margin-top: 16px; color: var(--gold); }
.hero-art-bottom span:first-child { font-size: 23px; }

.workspace-section { background: #ebe5da; padding: 81px 0 110px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 36px; margin-bottom: 35px; }
.section-heading .eyebrow { color: var(--orange); margin: 0 0 14px; }
.section-heading h2 { margin: 0; font-size: clamp(36px, 4vw, 60px); line-height: 1.05; letter-spacing: -.075em; }
.section-heading > p { max-width: 320px; color: var(--muted); line-height: 1.5; font-size: 14px; margin: 0 0 5px; }
.workspace { display: grid; grid-template-columns: .94fr 1.06fr; gap: 21px; align-items: start; }
.editor-panel, .preview-panel { border: 1px solid #ddd6ca; background: var(--white); border-radius: 17px; box-shadow: 0 7px 23px rgba(51,46,38,.035); }
.editor-panel { padding: 26px; }
.preview-panel { padding: 26px; }
.panel-heading, .preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 22px; }
.panel-kicker { display: block; color: #a0684f; font-size: 10px; letter-spacing: .18em; font-weight: 900; margin-bottom: 7px; }
.panel-heading h3, .preview-heading h3 { margin: 0; font-size: 25px; letter-spacing: -.055em; }
.progress-pill { padding: 10px 14px; border: 1px solid var(--line); border-radius: 100px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.editor-actions { display: flex; gap: 8px; margin-bottom: 15px; }
.subtle-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; background: #f3efe7; color: #3c4142; border: 1px solid #e1d9cd; border-radius: 7px; font-size: 11px; font-weight: 800; transition: background .18s; }
.subtle-button:hover { background: #e9dfd0; }
.upload-all { cursor: pointer; }
.field-list { display: grid; gap: 8px; }
.game-field { display: flex; align-items: center; gap: 12px; border: 1px solid #e4ded4; border-radius: 9px; padding: 8px 8px 8px 14px; background: #fbfaf7; min-height: 54px; transition: border-color .18s, background .18s; }
.game-field:focus-within { border-color: #b98664; background: #fff; }
.game-field.has-game { border-color: #d3c6b0; }
.field-number { font-size: 10px; letter-spacing: .09em; color: #9a9b94; font-weight: 800; }
.game-field input[type="text"] { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-weight: 700; color: var(--ink); font-size: 14px; }
.game-field input::placeholder { color: #b3b3ab; font-weight: 500; }
.cover-upload { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; flex: 0 0 35px; border: 1px solid #e0d8ca; border-radius: 7px; color: #725b45; background: #f3efe8; font-size: 18px; cursor: pointer; }
.cover-upload:hover { background: #e9ddca; }
.editor-footnote { color: #888983; font-size: 11px; line-height: 1.5; margin: 17px 1px 0; }
.preview-badge { display: flex; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .12em; font-weight: 900; color: #54644e; background: #ebf2e8; border-radius: 50px; padding: 9px 11px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: #62a35b; box-shadow: 0 0 0 3px rgba(98,163,91,.15); }
.poster-shell { background: #e8e1d4; border-radius: 10px; padding: 13px; }
.poster-preview { background: var(--ink); color: #f7f3e8; padding: 18px; border-radius: 6px; }
.poster-topline { min-height: 19px; font-size: clamp(8px, .8vw, 10px); margin-bottom: 14px; }
.poster-topline span:last-child { color: var(--gold); }
.poster-bottomline { color: #c8bfad; font-size: clamp(6px, .64vw, 8px); margin-top: 14px; }
.poster-bottomline span:last-child { color: var(--gold); }
.grid-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; aspect-ratio: 1; }
.preview-tile { position: relative; min-width: 0; border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; align-items: start; justify-content: space-between; padding: clamp(10px, 1vw, 16px); background: linear-gradient(140deg, var(--tile-light), var(--tile-dark)); background-size: cover; background-position: center; color: white; }
.tile-numeral { opacity: .9; font-size: clamp(9px, .85vw, 12px); font-weight: 900; }
.tile-title { display: block; overflow-wrap: anywhere; font-size: clamp(10px, 1.1vw, 16px); font-weight: 900; line-height: 1.1; max-width: 100%; text-transform: uppercase; letter-spacing: -.025em; }
.preview-tile:not(.has-cover):before { content: ''; position: absolute; width: 90%; aspect-ratio: 1; left: 24%; top: -21%; border: 1px solid rgba(255,255,255,.21); border-radius: 50%; pointer-events: none; }
.preview-tile:not(.has-cover):after { content: ''; position: absolute; width: 45%; aspect-ratio: 1; left: -20%; bottom: 8%; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; pointer-events: none; }
.preview-actions { display: grid; grid-template-columns: 1.25fr .75fr; gap: 9px; margin-top: 18px; }
.preview-actions .button { width: 100%; font-size: 13px; padding-inline: 18px; }
.status-message { text-align: center; min-height: 17px; color: #7d807b; font-size: 11px; margin: 13px 0 0; }
.draft-status { color: #6e786a; text-align: center; font-size: 11px; line-height: 1.5; margin: 13px 0 0; }
.share-panel { border: 1px solid var(--line); border-radius: 10px; background: #f8f5ee; padding: 18px; margin-top: 16px; }
.share-panel[hidden], #system-share-button[hidden] { display: none; }
.share-panel h4 { margin: 0 0 10px; font-size: 16px; }
.share-panel p { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.share-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-block: 14px; }
.share-actions a { text-decoration: none; }
.share-platforms { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 12px; }
.share-platform { padding: 10px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--paper); font: inherit; font-size: 12px; cursor: pointer; }
.share-platform[aria-pressed="true"] { background: var(--ink); color: white; border-color: var(--ink); }
.share-caption-label { display: block; font-size: 11px; font-weight: 700; margin-bottom: 7px; }
.share-caption { display: block; width: 100%; resize: vertical; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); padding: 10px; font: inherit; font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
#system-share-button { background: var(--ink); color: white; }
#share-status:not(:empty) { margin-top: 10px; }
.share-panel .share-hint { font-size: 11px; }

.how-section { padding-block: 108px 116px; }
.how-section .section-heading { margin-bottom: 39px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps article { min-height: 235px; border: 1px solid var(--line); background: #f8f5ee; border-radius: 13px; padding: 27px; }
.steps article > span { display: inline-flex; width: 44px; height: 44px; justify-content: center; align-items: center; border-radius: 100px; background: #e7dece; color: #76533e; font-weight: 900; font-size: 12px; }
.steps h3 { margin: 31px 0 10px; font-size: 21px; letter-spacing: -.045em; }
.steps p { margin: 0; font-size: 13px; color: #69706c; line-height: 1.58; }
.features-section { padding-bottom: 82px; }
.tool-summary { max-width: 76ch; margin: 0 0 28px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.feature-grid article { padding: 24px; border-radius: 13px; background: var(--white); border: 1px solid var(--line); }
.feature-label { font-size: 10px; color: #a0684f; font-weight: 800; letter-spacing: .1em; }
.feature-grid h3 { font-size: 21px; line-height: 1.2; letter-spacing: -.035em; margin: 18px 0 12px; }
.feature-grid p, .prompts-section p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }
.prompts-section { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding-block: 64px 78px; border-top: 1px solid var(--line); }
.prompts-copy .eyebrow { color: var(--orange); font-size: 11px; margin-bottom: 18px; }
.prompts-copy h2 { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.08; letter-spacing: -.065em; margin: 0 0 22px; }
.prompts-copy > p + p { margin-top: 16px; }
.text-link { display: inline-block; color: #965239; font-size: 14px; font-weight: 800; text-underline-offset: 4px; margin-top: 23px; }
.prompt-card { background: #ebe5da; border: 1px solid var(--line); border-radius: 16px; padding: 28px; }
.prompt-card h3 { margin: 0 0 20px; font-size: 19px; letter-spacing: -.035em; }
.prompt-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; counter-reset: prompts; padding: 0; margin: 0 0 18px; }
.prompt-list li { counter-increment: prompts; background: var(--white); border: 1px solid #ded6ca; border-radius: 7px; padding: 12px; font-size: 12px; font-weight: 700; line-height: 1.4; }
.prompt-list li::before { content: counter(prompts, decimal-leading-zero); display: block; color: #a0684f; font-size: 10px; margin-bottom: 8px; }
.prompt-card > p { font-size: 12px; }
.grid-story { grid-column: 1 / -1; }
.grid-story h3 { font-size: 21px; letter-spacing: -.035em; margin: 0 0 10px; }
.pick-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 22px 0 0; }
.pick-examples > div { min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.pick-examples dt { font-size: 17px; font-weight: 800; line-height: 1.4; }
.pick-examples dt span { display: block; color: #965239; font-size: 12px; margin-bottom: 8px; }
.pick-examples dd { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 12px 0 0; }
.faq-section { border-top: 1px solid var(--line); padding-block: 72px 96px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 18px; font-weight: 700; line-height: 1.4; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; color: var(--orange); font-size: 25px; font-weight: 400; }
.faq-list details[open] summary::after { content: '−'; }
.faq-list p { max-width: 830px; color: var(--muted); font-size: 15px; line-height: 1.7; padding: 0 0 24px; margin: 0; }
.faq-list p a { text-underline-offset: 3px; }
.closing-section { background: #d97755; color: #fff7e9; }
.closing-inner { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-block: 59px 65px; }
.closing-inner .eyebrow { margin: 0 0 12px; }
.closing-inner h2 { font-size: clamp(34px, 4vw, 59px); line-height: 1.04; letter-spacing: -.07em; margin: 0; }
.button-light { background: #fff7e9; color: var(--ink); white-space: nowrap; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 88px; color: #7a7d77; font-size: 11px; }
.site-footer a { text-decoration: none; color: var(--ink); font-weight: 800; }
.not-found { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 30px; }
.not-found h1 { font-size: clamp(44px, 7vw, 80px); letter-spacing: -.08em; margin: 16px 0; }
.not-found p { margin-bottom: 30px; }
.consent-banner { position: fixed; z-index: 20; bottom: 18px; left: 18px; right: 18px; max-width: 710px; margin-inline: auto; background: #fffdf8; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.19); display: flex; align-items: center; gap: 16px; padding: 14px 16px; }
.consent-banner[hidden] { display: none; }
.consent-banner p { flex: 1; margin: 0; font-size: 12px; line-height: 1.45; color: #3f4848; }
.consent-link { color: var(--ink); background: none; border: none; text-decoration: underline; font-weight: 800; }
.consent-accept { border: none; background: var(--ink); color: white; padding: 11px 15px; border-radius: 8px; font-size: 12px; font-weight: 800; }
:focus-visible { outline: 3px solid #d97755; outline-offset: 3px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 35px; }
  .hero h1 { font-size: clamp(48px, 6.8vw, 72px); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prompts-section { gap: 30px; }
  .workspace { grid-template-columns: 1fr; }
  .editor-panel, .preview-panel { max-width: 700px; width: 100%; margin-inline: auto; }
  .preview-tile { padding: clamp(13px, 2vw, 20px); }
  .tile-title { font-size: clamp(14px, 2vw, 23px); }
}
@media (max-width: 700px) {
  .wrap { width: min(100% - 36px, 520px); }
  .site-header { min-height: 72px; }
  .brand { font-size: 18px; gap: 9px; }
  .brand-mark { width: 26px; height: 26px; }
  .top-nav { gap: 8px; }
  .top-nav > a { display: none; }
  .hero { grid-template-columns: 1fr; padding-block: 40px 55px; gap: 35px; }
  .hero h1 { font-size: clamp(48px, 13vw, 70px); margin: 23px 0; }
  .hero-description { font-size: 18px; }
  .hero-example { justify-self: center; max-width: 420px; padding-inline: 7px; }
  .hero-art { box-shadow: 8px 9px 0 #e2d9cb, 0 23px 48px rgba(25,29,35,.13); }
  .hero-example figcaption { margin-top: 22px; }
  .workspace-section { padding-block: 63px 77px; }
  .section-heading { display: block; margin-bottom: 26px; }
  .section-heading > p { margin-top: 16px; }
  .section-heading h2 { font-size: 42px; }
  .editor-panel, .preview-panel { padding: 17px; }
  .poster-shell { padding: 9px; }
  .poster-preview { padding: 12px; }
  .poster-topline { font-size: 7px; margin-bottom: 9px; }
  .poster-bottomline { margin-top: 9px; font-size: 6px; }
  .grid-preview { gap: 5px; }
  .preview-tile { padding: 9px; }
  .tile-title { font-size: clamp(9px, 3vw, 15px); }
  .tile-numeral { font-size: 9px; }
  .preview-actions { grid-template-columns: 1fr 1fr; }
  .preview-actions .button { min-height: 51px; gap: 8px; font-size: 11px; padding: 12px; }
  .how-section { padding-block: 73px 82px; }
  .steps { grid-template-columns: 1fr; gap: 10px; }
  .steps article { min-height: 0; padding: 22px; }
  .steps h3 { margin-top: 20px; }
  .features-section { padding-bottom: 50px; }
  .feature-grid { grid-template-columns: 1fr; gap: 10px; }
  .feature-grid article { padding: 22px; }
  .feature-grid h3 { margin-top: 12px; }
  .prompts-section { grid-template-columns: 1fr; gap: 28px; padding-block: 43px 50px; }
  .pick-examples { grid-template-columns: 1fr; gap: 12px; }
  .prompt-card { padding: 20px; }
  .prompt-list li { font-size: 11px; padding: 10px; }
  .faq-section { padding-block: 48px 60px; }
  .faq-list summary { font-size: 16px; padding-block: 20px; }
  .faq-list p { font-size: 14px; }
  .closing-inner { display: block; padding-block: 52px 58px; }
  .closing-inner .button { margin-top: 27px; }
  .site-footer { flex-wrap: wrap; justify-content: flex-start; padding-block: 20px; gap: 7px 18px; }
  .site-footer span:nth-child(2) { display: none; }
  .consent-banner { align-items: stretch; flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *:before, *:after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Direct grid editor */
.workspace-direct { grid-template-columns: minmax(0, 1.22fr) minmax(340px, .78fr); align-items: start; }
.grid-workspace { min-width: 0; }
.slot-editor { position: sticky; top: 20px; }
.slot-editor .panel-heading { align-items: start; }
.slot-editor .panel-heading .subtle-button { white-space: nowrap; }
.edit-label { display: block; font-size: 12px; font-weight: 900; letter-spacing: .04em; margin: 23px 0 9px; }
.edit-input { width: 100%; min-height: 49px; border: 1px solid #d8d0c3; border-radius: 9px; background: #fbfaf7; color: var(--ink); padding: 12px 14px; font-size: 16px; font-weight: 700; outline: none; }
.edit-input:focus { border-color: #b98664; box-shadow: 0 0 0 3px rgba(185,134,100,.15); background: #fff; }
.edit-input::placeholder { color: #aaa79e; font-weight: 400; }
.input-hint { min-height: 18px; color: #82847e; font-size: 11px; line-height: 1.5; margin: 8px 2px 0; }
.cover-section { margin-top: 28px; padding-top: 21px; border-top: 1px solid var(--line); }
.cover-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.cover-heading strong { font-size: 13px; }
.cover-heading span { color: #8b8e88; font-size: 10px; }
.cover-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; min-height: 105px; }
.cover-empty { grid-column: 1 / -1; min-height: 105px; display: grid; place-items: center; text-align: center; margin: 0; padding: 15px; border: 1px dashed #d7cfc2; border-radius: 8px; color: #989a93; font-size: 11px; line-height: 1.5; }
.cover-choice { min-width: 0; padding: 5px; border: 1px solid #ded6ca; background: #f8f6f1; color: var(--ink); border-radius: 8px; text-align: left; cursor: pointer; transition: border-color .16s, transform .16s; }
.cover-choice:hover, .cover-choice:focus-visible { border-color: #bf7c5b; transform: translateY(-2px); }
.cover-choice img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 4px; background: #d8d0c3; }
.cover-choice span { display: block; margin: 6px 1px 2px; font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-choice small { display: block; margin: 0 1px 4px; color: #858880; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-editor .editor-actions { flex-wrap: wrap; margin: 21px 0 0; }
.slot-editor .editor-actions .subtle-button { font-size: 11px; min-height: 38px; }
.subtle-button:disabled { opacity: .42; cursor: not-allowed; }
.slot-editor .editor-footnote { margin: 15px 0; }
.slot-editor .editor-footnote a { color: #76533e; }
.text-button { border: 0; background: none; color: #956c57; padding: 7px 0; font-size: 11px; font-weight: 800; text-decoration: underline; }
.grid-workspace .grid-preview { gap: 9px; }
.grid-workspace .preview-tile { appearance: none; border: 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; transition: transform .15s, box-shadow .15s; }
.grid-workspace .preview-tile:hover { transform: translateY(-2px); }
.grid-workspace .preview-tile.selected { box-shadow: inset 0 0 0 3px #f4d67b; }
.tile-top { position: relative; z-index: 1; display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 6px; }
.tile-category { max-width: 70%; text-align: right; color: #fff; font-size: clamp(7px, .72vw, 10px); line-height: 1.15; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; text-shadow: 0 1px 3px rgba(0,0,0,.3); }
.grid-workspace .tile-title { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,.32); }

@media (max-width: 980px) {
  .workspace-direct { grid-template-columns: 1fr; }
  .slot-editor { position: static; }
  .workspace-direct .preview-panel, .workspace-direct .editor-panel { max-width: 700px; }
  .tile-category { font-size: clamp(8px, 1.8vw, 12px); }
}
@media (max-width: 700px) {
  .workspace-direct .preview-panel, .workspace-direct .editor-panel { padding: 14px; }
  .grid-workspace .grid-preview { gap: 5px; }
  .grid-workspace .preview-tile { padding: 7px; }
  .tile-category { font-size: clamp(6px, 1.8vw, 9px); }
  .grid-workspace .tile-title { font-size: clamp(9px, 3vw, 15px); }
  .slot-editor .panel-heading { gap: 9px; }
  .slot-editor .panel-heading h3 { font-size: 23px; }
  .slot-editor .panel-heading .subtle-button { padding-inline: 9px; font-size: 10px; }
}

.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.footer-links .consent-link { font: inherit; padding: 0; cursor: pointer; }
.information-page { padding-block: 60px 72px; }
.information-page article { max-width: 760px; margin-inline: auto; }
.information-page h1 { font-size: clamp(30px, 5vw, 48px); line-height: 1.15; letter-spacing: -.025em; margin: 16px 0; }
.information-intro { font-size: 20px; line-height: 1.5; color: var(--muted); }
.information-date { font-size: 13px; color: #636961; margin-bottom: 36px; }
.information-page section { margin-block: 32px; }
.information-page h2 { font-size: 22px; line-height: 1.35; }
.information-page section p { font-size: 16px; line-height: 1.85; overflow-wrap: anywhere; }
.information-page a, .consent-banner a { color: var(--ink); text-underline-offset: 3px; }
.information-related { padding-top: 24px; border-top: 1px solid var(--line); line-height: 2; }
@media(max-width: 760px) { .information-page { padding-block: 36px; } .information-page .information-intro { font-size: 18px; } .information-page + .site-footer { flex-direction: column; align-items: flex-start; } .information-page .information-related { font-size: 14px; } }

/* A separate handle lets touch users scroll and still edit the main tile. */
.tile-cell { position: relative; min-width: 0; min-height: 0; }
.grid-workspace .tile-cell .preview-tile { height: 100%; padding-bottom: 32px; }
.tile-move { position: absolute; bottom: 5px; right: 5px; z-index: 2; width: 32px; height: 27px; border: 1px solid #ffffff80; border-radius: 5px; background: #151b24d9; color: white; font-size: 21px; line-height: 1; cursor: grab; touch-action: none; user-select: none; }
.tile-move:active { cursor: grabbing; }
.tile-move:disabled { opacity: .4; }
.tile-move:focus-visible { outline: 3px solid #f4d67b; outline-offset: 2px; }
.tile-cell.dragging { opacity: .55; }
.tile-cell.drop-target { outline: 3px solid #f4d67b; outline-offset: -3px; }
.reorder-hint { margin: 10px 0 0; }
.cover-retry { margin: 0 0 10px; }

/* Personal preference tiers and opt-in player picks. */
.feature-nav{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}.feature-nav a{padding:10px 16px;border:1px solid var(--line,#d8d0c4);border-radius:30px;text-decoration:none;color:inherit}.feature-nav a:hover{background:#eee6d8}.feature-page{padding-bottom:80px}.feature-page h1{font-size:clamp(30px,4vw,56px);line-height:1.1;max-width:950px}.feature-intro{max-width:900px;font-size:18px;line-height:1.7}.feature-page input:not([type=color]):not([type=file]),.feature-page select,.feature-page textarea{width:100%;padding:9px;border:1px solid #ccc4b8;border-radius:6px;background:#fff;color:#151b24;font:inherit}.feature-page label{display:block}.tier-toolbar{margin:24px 0}.tier-actions{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.feature-page button{border:1px solid #c8bfb0;border-radius:6px;padding:9px 13px;background:#fff;color:#151b24;cursor:pointer;font:inherit}.feature-page button:disabled{opacity:.45;cursor:default}.tier-row{display:flex;min-height:160px;background:#202935;border-bottom:1px solid #69717b}.tier-label{flex:0 0 135px;padding:10px;color:#151b24}.tier-label input:not([type=color]){font-weight:700;background:transparent;border-color:#0003}.tier-label input[type=color]{width:34px;height:28px;padding:0;border:0;margin-top:8px}.tier-row-actions{display:flex;gap:4px;margin-top:8px}.tier-row-actions button{padding:3px 8px;background:#ffffff90}.tier-row-games,.tier-pool{display:flex;gap:9px;flex-wrap:wrap;align-content:flex-start;padding:12px;min-height:130px;flex:1;min-width:0}.tier-pool{border:2px dashed #c7bbab;margin-bottom:22px}.tier-card{position:relative;flex:0 0 128px;width:128px;color:#151b24;background:#f4f0e8;border-radius:6px;padding:5px}.tier-card img,.tier-cover-placeholder{width:100%;height:142px;object-fit:contain;background:#151b24;border-radius:4px}.tier-cover-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;color:#f4f0e8;font-size:14px;padding:8px}.tier-card input:not([type=file]),.tier-card select{font-size:12px!important;padding:5px!important;margin:3px 0}.tier-handle{position:absolute;top:8px;right:8px;touch-action:none;cursor:grab!important;padding:3px 8px!important}.tier-card-actions{display:flex;flex-wrap:wrap;gap:3px;align-items:center}.tier-card-actions button{padding:3px 8px}.tier-upload{cursor:pointer;font-size:11px;border:1px solid #bfb6a6;padding:5px}.tier-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.tier-file:focus+*{outline:2px solid #bb6b35}.tier-card.dragging{opacity:.45}.tier-drop-target{outline:3px solid #e78745;outline-offset:-3px}.tier-add,.tier-export,.tier-help{margin:28px 0;padding:22px;background:#eee8dd;border-radius:14px}.tier-add>label{max-width:600px}.identity-panel{margin:12px 0}.identity-results{display:flex;flex-direction:column;gap:6px;margin:8px 0}.identity-choice{text-align:left;padding:10px;border:1px solid #d1c6b7;background:#fff;border-radius:6px;font:inherit;cursor:pointer}.identity-choice:hover{background:#eee6d8}.ranking-consent{margin:18px 0;padding:14px;border:1px solid #d4c9b9;border-radius:8px}.ranking-consent label{display:block;font-size:14px;line-height:1.6}.ranking-consent input{vertical-align:middle;width:18px;height:18px}.ranking-boards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:24px 0}.ranking-boards section{background:#eee8dd;padding:24px;border-radius:14px}.ranking-boards li{padding:10px 0;border-bottom:1px solid #d6cbba}.feature-page button:focus-visible,.identity-choice:focus-visible,.feature-page input:focus-visible,.feature-page select:focus-visible{outline:3px solid #a85928;outline-offset:3px}
@media(max-width:600px){.tier-label{flex-basis:94px;padding:6px}.tier-row-games{gap:6px;padding:7px}.tier-card{flex-basis:100px;width:100px}.tier-card img,.tier-cover-placeholder{height:112px}.tier-card-actions{flex-wrap:wrap}.ranking-boards{grid-template-columns:1fr}.tier-add,.tier-export,.tier-help{padding:16px}.tier-row-actions button{padding:3px 6px}.feature-nav a{padding:9px 12px}}

/* Tier editor: add games before ranking; keep the library beside the board. */
.tier-page .feature-nav{margin:14px 0}.tier-page .eyebrow{display:none}.tier-page h1{font-size:clamp(26px,3vw,38px);margin:16px 0 8px}.tier-page .feature-intro{font-size:15px;line-height:1.5;margin:0 0 16px;max-width:none}
.tier-toolbar{margin:0 0 12px;display:flex;flex-wrap:wrap;align-items:end;gap:8px 18px}.tier-title-field{flex:1 1 320px;font-size:13px}.tier-output{margin:0}.tier-output button:first-child{background:#151b24;color:#fff;border-color:#151b24}.tier-toolbar #tier-status{flex-basis:100%;margin:0;font-size:12px;min-height:18px}
.tier-instructions{font-size:14px;line-height:1.6;margin:10px 0 18px;color:#47515c}.tier-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}.tier-library{position:sticky;top:16px;background:#eee8dd;padding:16px;border:1px solid #d8cfc1;border-radius:12px}.tier-library h2,.tier-board-heading h2{font-size:18px;line-height:1.4;margin:0 0 12px;letter-spacing:0}.tier-library .tier-add{padding:0;margin:0;background:none;border-radius:0}.tier-search-label{font-size:0}.tier-search-label input{font-size:16px!important}.tier-library .input-hint{font-size:12px}.tier-library .identity-choice{font-size:13px;line-height:1.5}.tier-library .tier-add>button{width:100%;font-size:13px;margin-top:8px}.tier-library #tier-manual{background:transparent}.tier-pool-section{margin-top:18px}.tier-pool{min-height:76px;margin:0;padding:8px;gap:8px;max-height:45vh;overflow-y:auto;border-radius:8px}.tier-pool>p{margin:10px 0;font-size:13px}.tier-board-heading{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}.tier-board-heading h2{margin:0}.tier-board-heading .tier-actions{margin:0}.tier-board-heading button{font-size:12px;padding:6px 9px}
#tier-board{border-radius:8px;overflow:hidden;border:1px solid #69717b}.tier-row{min-height:108px}.tier-label{flex-basis:118px;padding:8px}.tier-label input:not([type=color]){padding:5px!important;font-size:15px}.tier-label input[type=color]{width:26px;height:22px;margin-top:5px}.tier-row-actions{margin-top:5px}.tier-row-actions button{padding:2px 7px;font-size:13px}.tier-row-games{min-height:108px;align-items:flex-start;padding:8px;gap:8px}.tier-drop-hint{margin:auto;color:#b7c0c9;font-size:13px;pointer-events:none}.tier-card{flex:0 0 104px;width:104px;padding:4px}.feature-page .tier-handle{position:relative;top:auto;right:auto;display:block;width:100%;padding:0!important;overflow:hidden;line-height:0;border:0;border-radius:4px;touch-action:none;user-select:none;cursor:grab!important}.tier-handle:active{cursor:grabbing!important}.tier-card img,.tier-cover-placeholder{height:108px}.tier-cover-placeholder{font-size:12px}.tier-drag-label{display:block;background:#34404c;color:#fff;font-size:10px;line-height:1.5;padding:3px 1px}.tier-game-name{font-size:11px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:5px 1px}.tier-card-options summary{font-size:11px;cursor:pointer;padding:3px 0}.tier-card-options[open] summary{margin-bottom:4px}.tier-card-options input,.tier-card-options select{max-width:100%}.tier-card-actions{gap:3px}.tier-export{margin:16px 0;padding:14px 18px;font-size:13px}.tier-export p{margin:0 0 8px}.tier-export summary{cursor:pointer}.tier-export label{margin-top:10px}.tier-help{font-size:14px}.tier-help h2{font-size:22px}.tier-help h3{font-size:17px}
@media(max-width:900px){.tier-workspace{grid-template-columns:250px minmax(0,1fr);gap:12px}.tier-library{padding:12px}.tier-label{flex-basis:100px}}
@media(max-width:650px){.tier-workspace{grid-template-columns:1fr}.tier-library{position:static}.tier-page .feature-nav a{padding:7px 10px;font-size:12px}.tier-page .feature-intro{font-size:14px}.tier-title-field{flex-basis:100%}.tier-output{width:100%;gap:6px}.tier-output button{padding:8px 10px;font-size:13px}.tier-instructions{font-size:13px}.tier-pool{max-height:260px}.tier-label{flex-basis:84px;padding:6px}.tier-row-games{padding:6px;gap:6px}.tier-label input:not([type=color]){font-size:13px}.tier-card{flex-basis:92px;width:92px}.tier-card img,.tier-cover-placeholder{height:96px}.tier-row-actions button{padding:3px 5px}.tier-board-heading{margin-top:6px}.tier-library .tier-add>button{width:auto;margin-right:6px}}

.tier-library #tier-search-results .input-hint:empty,.tier-library .identity-results:empty{display:none}.tier-library .identity-results{max-height:230px;overflow-y:auto}.tier-card img{display:block}
.tier-target-label{margin-top:10px;font-size:12px;font-weight:600}.tier-target-label select{margin-top:4px}
.tier-move-label{font-size:11px;line-height:1.4;margin:6px 0 4px}.tier-card .tier-move-label select{min-height:36px;margin-bottom:0}
.feature-page .tier-row-add{width:100%;min-height:36px;margin-top:8px;padding:5px 3px;background:#ffffffbd;font-size:11px;line-height:1.35;overflow-wrap:anywhere}

/* Tier lists use the same platform sharing workflow as the nine-game grid. */
#tier-system-share[hidden] { display: none; }
.tier-share-panel h2 { margin: 0 0 10px; font-size: 18px; }
.tier-share-panel .share-actions { align-items: center; }
.tier-share-panel .share-caption { margin-block: 7px 12px; }
.tier-share-panel .share-hint { margin-top: 12px; }
#tier-share-status:not(:empty) { margin-top: 10px; }

/* Prompt presets stay next to the editor; guidance is readable without JS. */
.template-picker { margin: 0 0 24px; padding: 22px; border: 1px solid #d8d0c2; border-radius: 18px; background: #fffdf8; }
.template-picker h3 { margin: 0 0 8px; font-size: 1.2rem; }
.template-picker p { margin: 0 0 14px; max-width: 78ch; line-height: 1.6; }
.template-picker #template-status:empty { display: none; }
.template-picker #template-status { margin: 12px 0 0; }
.template-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.template-actions button { min-height: 44px; }
.template-guide { padding-top: 64px; padding-bottom: 24px; }
.template-guide h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); margin: 0 0 24px; }
.template-guide h3 { font-size: 1.18rem; margin: 0 0 12px; }
.template-guide p, .template-guide li { line-height: 1.65; }
.template-guide-cards, .template-guide-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.template-guide-cards article { padding: 24px; border: 1px solid #d8d0c2; border-radius: 18px; background: #fffdf8; }
.template-guide-cards ol { padding-left: 22px; margin: 18px 0; }
.template-guide-notes { margin-top: 32px; }
@media (max-width: 760px) { .template-guide-cards, .template-guide-notes { grid-template-columns: 1fr; } .template-picker { padding: 18px; } }

/* Readable guidance follows the editor, without crowding the creation flow. */
.tier-guide { max-width: 80ch; margin: 42px auto; font-size: 16px; line-height: 1.75; }
.tier-guide h2 { font-size: clamp(24px, 3vw, 32px); line-height: 1.25; }
.tier-guide h3 { margin: 28px 0 10px; font-size: 20px; line-height: 1.4; }
.tier-guide-example { padding: 20px; background: #fffdf8; border: 1px solid #d8d0c2; border-radius: 14px; }
.tier-guide-example h3 { margin-top: 0; }
.tier-guide dl { margin: 18px 0 0; }
.tier-guide dl div { display: grid; grid-template-columns: minmax(54px, 90px) 1fr; gap: 16px; padding: 10px 0; border-top: 1px solid #e5ded2; }
.tier-guide dt { font-weight: 700; overflow-wrap: anywhere; }
.tier-guide dd { margin: 0; }
.tier-guide-links { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 24px; }
@media (max-width: 650px) { .tier-guide { font-size: 15px; } .tier-guide-example { padding: 16px; } }

/* Reusable starter templates and localized worked examples. */
.preset-entry { padding:12px 16px; border-left:3px solid var(--accent,#ef7653); background:#ede7db; border-radius:0 10px 10px 0; font-size:15px; }
.preset-entry a { font-weight:700; }
.preset-overview { margin:24px 0; max-width:900px; line-height:1.65; }
.preset-overview p { margin:10px 0; }
.tier-edition-meta { display:block; padding:0 5px 7px; color:#4b5563; font-size:10px; line-height:1.4; }
.tier-pool-filter { display:block; margin:0 0 10px; font-size:13px; }
.tier-pool-filter input { display:block; width:100%; margin-top:5px; padding:9px; border:1px solid #cec4b6; border-radius:8px; background:white; font:inherit; }
.preset-edition-list { columns:2; padding-left:24px; }
.preset-edition-list li { break-inside:avoid; padding:3px 0; }
.tier-worked-example { max-width:650px; margin:24px 0; }
.tier-example-board { padding:0; list-style:none; border:1px solid #c7bdae; border-radius:10px; overflow:hidden; }
.tier-example-board li { display:flex; align-items:stretch; min-height:64px; background:#202b38; color:#f4f0e8; }
.tier-example-board li+li { border-top:1px solid #56606c; }
.tier-example-board strong { display:grid; place-items:center; min-width:64px; color:#151b24; font-size:24px; }
.tier-example-board span { padding:10px 16px; }
.tier-example-board small { display:block; color:#d1d9e4; }
@media(max-width:650px) { .preset-edition-list { columns:1; } }

.tier-more-games { margin-top:16px; border-top:1px solid #cec4b6; padding-top:14px; }
.tier-more-games summary { cursor:pointer; font-weight:700; }
.tier-more-games .tier-add h2 { margin:14px 0; }
.tier-pool-section #tier-restore-preset { width:100%; margin-top:10px; font-size:12px; }

/* Template discovery: real starter covers, prompt previews and empty tier layout. */
.template-featured{padding-block:48px}.template-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:22px}.template-section-heading h2{margin:0}.template-library-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.template-card{border:1px solid #d6cec1;border-radius:18px;overflow:hidden;background:#fffcf6;display:flex;flex-direction:column;min-width:0}.template-preview{height:220px;background:#e8e1d4;overflow:hidden;padding:20px}.template-card-body{padding:24px;display:flex;flex-direction:column;flex:1}.template-card-body h3{font-size:24px;margin:8px 0 12px;line-height:1.2}.template-card-body p{font-size:15px;line-height:1.65;margin:0 0 22px}.template-card-body .template-kind{font-size:12px;letter-spacing:.05em;font-weight:700;color:#675a47;margin:0}.template-use{margin-top:auto;align-self:flex-start;font-weight:750;text-decoration:underline;text-underline-offset:4px}.template-grid-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.template-grid-preview span{display:grid;place-items:center;padding:6px;text-align:center;font-size:11px;font-weight:600;line-height:1.25;border-radius:5px;background:#516786;color:#fff;overflow-wrap:anywhere}.template-grid-preview span:nth-child(3n+2){background:#796541}.template-grid-preview span:nth-child(3n){background:#526b58}.template-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;gap:10px;background:#202b38}.template-covers img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px #0006)}.template-tier-preview{display:flex;flex-direction:column;gap:2px}.template-tier-preview>div{display:flex;min-height:0;flex:1;background:#202b38}.template-tier-preview b{width:62px;font-size:13px;display:grid;place-items:center;color:#17202a}.template-example{text-align:center;padding:10px}.template-example img{height:100%;width:auto;max-width:100%;object-fit:contain}.template-browse{margin:14px 0;font-weight:700}.template-draft-note{padding:24px;background:#ebe5d9;border-radius:14px;font-size:15px;line-height:1.7;margin-top:32px}.requested-template{border:2px solid #b6502e;background:#fff9eb;border-radius:12px;padding:20px;margin-bottom:24px}.requested-template[hidden]{display:none}.requested-template p:first-child{font-weight:800}.template-library h1{max-width:950px}.template-library .feature-intro{max-width:800px;margin-bottom:32px}
@media(max-width:1000px){.template-library-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.template-library-cards{grid-template-columns:1fr;gap:20px}.template-featured{padding-block:32px}.template-preview{height:200px}.template-card-body{padding:20px}.template-grid-preview span{font-size:12px}.template-library h1{font-size:36px}.template-draft-note{padding:18px}}

/* Illustrated instructions follow the editor so users can start immediately. */
.language-shortcut { font-size: 14px; line-height: 1.6; margin: 14px 0; }
.language-shortcut a { text-underline-offset: 3px; }
.editor-guide-steps { list-style: decimal; padding-left: 26px; }
.editor-guide-steps > li { padding-left: 6px; margin: 26px 0; }
.editor-guide-steps h3 { margin-top: 0; }
.editor-guide-figure { margin: 18px 0 28px; }
.editor-guide-figure img { display: block; width: 100%; height: auto; border: 1px solid #d8d0c2; border-radius: 10px; }
.editor-guide-figure figcaption { font-size: 14px; line-height: 1.6; color: #525b64; margin-top: 10px; }
.grid-walkthrough { list-style: decimal; padding-left: 26px; display: grid; gap: 32px; }
.grid-walkthrough > li { padding-left: 6px; min-width: 0; }
.grid-walkthrough h3 { font-size: 24px; margin: 0 0 14px; }
.grid-walkthrough p { line-height: 1.7; }
.grid-walkthrough .editor-guide-figure { margin-bottom: 0; }
@media (min-width: 1000px) { .grid-walkthrough { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; } }
.illustrated-guide details { border-top: 1px solid #d8d0c2; padding: 16px 0; }
.illustrated-guide summary { cursor: pointer; font-weight: 700; }
.illustrated-guide details p { margin-bottom: 0; }
/* Steam import stays beside the creation controls, with a bounded library. */
.steam-import{margin:18px 0 24px;border:1px solid #c8c0b1;border-radius:16px;background:#eee9de;color:#151b24;text-align:left}
.steam-import>summary{padding:17px 20px;font-weight:750;cursor:pointer;list-style-position:inside}
.steam-import>summary span{float:right;color:#78694d}
.steam-import[open]>summary{border-bottom:1px solid #d6cebf}
.steam-import-content{padding:18px 20px}
.steam-import-content>p:first-child{margin-top:0;font-weight:650}
.steam-import label{display:block;font-size:14px;font-weight:600}
.steam-import input[type=text],.steam-import input[type=search]{display:block;width:100%;min-width:0;margin:8px 0 12px;padding:11px 12px;border:1px solid #bfb6a6;border-radius:8px;background:#fff;color:#151b24;font:inherit}
.steam-import button{padding:10px 14px;border:1px solid #bfb6a6;border-radius:8px;background:#fff;color:#151b24;font:inherit;font-size:14px;cursor:pointer}
.steam-import button:disabled{opacity:.5;cursor:default}
.steam-profile-form{display:flex;flex-wrap:wrap;gap:10px;align-items:end}
.steam-profile-form>label{flex:1 1 250px}.steam-profile-form>button{margin-bottom:12px}
.steam-import .input-hint,.steam-import small{font-size:13px;line-height:1.6;color:#60584c}
.steam-privacy-help{margin:12px 0;font-size:13px}.steam-privacy-help>summary{cursor:pointer}.steam-privacy-help p{line-height:1.6}
.steam-results{border-top:1px solid #c8c0b1;margin-top:15px;padding-top:12px}
.steam-selection-actions{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 14px}
.steam-import .steam-replace{display:flex;gap:8px;align-items:center;font-size:14px;margin:10px 0}
.steam-import input[type=checkbox]{appearance:auto;width:18px;height:18px;flex:none;accent-color:#151b24;margin:0}
.steam-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;max-height:470px;overflow-y:auto;padding:4px 4px 12px;overscroll-behavior:contain}
.steam-import .steam-game{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0;background:white;border:2px solid transparent;border-radius:9px;padding:8px;cursor:pointer}
.steam-game:has(input:checked){border-color:#c85c39;background:#fff5eb}
.steam-game:has(input:disabled){opacity:.55}
.steam-game:focus-within{outline:2px solid #151b24;outline-offset:1px}
.steam-game>input{position:absolute;top:12px;left:12px;box-shadow:0 0 0 3px #fff}
.steam-game img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:4px;background:#202936}
.steam-game strong{font-size:13px;line-height:1.4;overflow-wrap:anywhere}.steam-game small{margin-top:auto}
.steam-no-cover{min-height:170px;padding-top:40px!important}
.steam-import-footer{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;padding-top:14px}
.steam-import .steam-apply{background:#151b24;color:#fff;border-color:#151b24}
.steam-count{font-size:14px;margin:5px 0;font-weight:700}
.steam-import [hidden]{display:none!important}
.tier-add .steam-import-content{padding:14px}.tier-add .steam-games{grid-template-columns:repeat(2,minmax(0,1fr));max-height:360px}.tier-add .steam-profile-form>label{flex-basis:100%}
@media(max-width:600px){.steam-import-content{padding:14px}.steam-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:52vh}.steam-import .steam-game{padding:6px}.steam-game strong{font-size:12px}.steam-profile-form>label{flex-basis:100%}.steam-import-footer{position:sticky;bottom:0;background:#eee9de;border-top:1px solid #d6cebf;padding-bottom:6px}.steam-import-footer>button{flex:1}.steam-import .steam-apply{white-space:normal}}

/* Series names and remake years must remain readable without opening a card. */
.series-tier .tier-game-name{white-space:normal;overflow-wrap:anywhere;line-height:1.35;min-height:3.9em}
.series-tier .tier-pool-filter select{margin-top:5px}
@media(max-width:650px){.series-tier .tier-pool{max-height:360px}}