@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@font-face { font-family: OpenChessFont; src: url('/static/fonts/OpenChessFont.ttf') format('truetype'); }
:root { --paper:#f7f1e3; --panel:#eadfc9; --ink:#28251f; --note-ink:#5f574a; --muted:#837967; --line:rgba(117,103,83,.22); --red:#a85248; --blue:#426b73; --light:#f0dfb9; --dark:#75533b; }
* { box-sizing:border-box; }
html { overflow-y:scroll; scrollbar-gutter:stable; }
html.puzzle-document { overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Georgia,'Times New Roman',serif; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:28px 28px; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background:rgba(255,250,239,.64); }
.shell { position:relative; min-height:calc(100vh + 180px); max-width:880px; margin:0 auto; padding:58px 28px 220px; }
.masthead { max-width:620px; margin:0 auto 36px; text-align:center; }
.puzzle-lookup { position:absolute; z-index:50; top:10px; right:28px; }
.lookup-toggle { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.lookup-toggle svg { width:19px; height:19px; }.lookup-toggle:hover,.lookup-toggle[aria-expanded="true"] { color:var(--ink); }
.lookup-toggle:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.lookup-panel { position:absolute; top:42px; right:0; width:min(320px,calc(100vw - 30px)); padding:18px; background:var(--paper); box-shadow:4px 5px 0 rgba(86,69,45,.1); }
.lookup-panel[hidden] { display:none; }.lookup-panel label { display:block; margin-bottom:10px; font:600 1.5rem/1 Caveat,cursive; }
.lookup-fields { display:flex; gap:8px; align-items:stretch; }.lookup-fields input { min-width:0; width:100%; padding:9px 10px; border:0; border-bottom:2px solid var(--muted); border-radius:0; background:rgba(255,252,243,.78); color:var(--ink); font:16px Georgia,serif; }
.lookup-fields input:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }.lookup-fields input[aria-invalid="true"] { border-bottom-color:var(--red); }
.lookup-fields .action { flex-shrink:0; padding:9px 14px; }.lookup-fields .action:disabled { opacity:.6; cursor:wait; }
.lookup-message { margin:10px 0 0; color:var(--red); font:13px/1.4 Arial,sans-serif; }.lookup-message:empty { display:none; }
.eyebrow { margin:0 0 12px; color:var(--red); font:700 11px/1.2 Arial,sans-serif; letter-spacing:.17em; }
h1 { margin:0; font-family:Caveat,cursive; font-size:clamp(3.8rem,9vw,6.3rem); font-weight:600; letter-spacing:-.04em; line-height:.8; }
h1 span { color:var(--red); font-style:italic; }
.ink-reveal { display:inline-block; max-width:100%; animation:ink-write var(--ink-duration,700ms) cubic-bezier(.2,.5,.4,1) both; }
h1 > .ink-reveal { color:inherit; font-style:inherit; }
.ink-puzzle-title { --ink-duration:380ms; }.ink-note { --ink-duration:380ms; animation-delay:260ms; }
@keyframes ink-write { from { clip-path:inset(-.3em 100% -.3em -.12em); } to { clip-path:inset(-.3em -.12em -.3em -.12em); } }
@media (prefers-reduced-motion:reduce) { .ink-reveal { animation:none; clip-path:none; } }
.lede { margin:22px auto 12px; font-size:1.2rem; color:#5f574a; }
.help-link,.back-link { border:0; border-bottom:1px solid var(--red); padding:3px 0; color:var(--red); background:transparent; font:inherit; cursor:pointer; text-decoration:none; }
.help-panel { margin:20px auto 0; max-width:570px; padding:16px 20px; background:rgba(255,252,243,.72); text-align:left; font-size:.98rem; line-height:1.55; box-shadow:3px 4px 0 rgba(86,69,45,.06); }
.help-panel p { margin:0 0 8px; }.help-panel p:last-child { margin:0; }.small-note { color:var(--muted); font-size:.85rem; }
.notebook { display:grid; gap:14px; }
.initial-loading { min-height:150px; display:flex; align-items:center; justify-content:center; gap:8px; color:var(--muted); background:rgba(255,252,243,.76); font-family:Caveat,cursive; font-size:1.5rem; box-shadow:4px 5px 0 rgba(86,69,45,.07); }
.loading-mark { color:var(--red); font-size:1.8rem; transform:rotate(-12deg); }.loading-dots { animation: loading-dots 1.1s steps(3,end) infinite; letter-spacing:2px; }
@keyframes loading-dots { 0% { opacity:.2; } 45% { opacity:1; } 100% { opacity:.2; } }
.category { background:var(--paper); box-shadow:4px 5px 0 rgba(86,69,45,.07); overflow:hidden; }
.category.open { background:var(--panel); }
.rough-container { position:relative; }
.rough-border { position:absolute; inset:0; z-index:3; width:100%; height:100%; pointer-events:none; }
.category-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border:0; color:var(--ink); background:transparent; cursor:pointer; text-align:left; font-family:Caveat,cursive; font-size:2rem; }.category-chevron { width:24px; height:24px; color:var(--ink); transition:transform .38s cubic-bezier(.2,.75,.25,1); }.category.open .category-chevron { transform:rotate(180deg); }
.category-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.2,.75,.25,1); }.category.open .category-body { grid-template-rows:1fr; }.category-body-inner { min-height:0; overflow:hidden; }
.category-name { display:flex; gap:15px; align-items:center; }.category-number { position:relative; z-index:1; display:grid; place-items:center; width:46px; height:46px; color:var(--ink); font:600 1.35rem/1 Caveat,cursive; letter-spacing:0; }
.bands { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:40px 14px; padding:34px 18px 20px; }
.band { position:relative; display:flex; align-items:flex-end; justify-content:center; min-height:126px; border:0; padding:88px 12px 12px; color:var(--ink); background:rgba(244,235,213,.65); text-align:center; cursor:pointer; font:inherit; transition:transform .16s ease,background .16s ease; }
.band-badge { position:absolute; z-index:21; top:-28px; left:50%; transform:translateX(-50%); width:calc(100% - 40px); max-width:120px; height:116px; object-fit:contain; pointer-events:none; }
.band:hover { transform:translateY(-1px); background:#fff9eb; }.band:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.band:disabled { opacity:.6; cursor:wait; }.heart { position:absolute; z-index:22; top:10px; right:10px; display:grid; place-items:center; width:22px; height:22px; color:#9d9381; line-height:1; }.heart svg { width:20px; height:20px; }.band.liked .heart { color:var(--red); }.band.liked .heart svg { fill:currentColor; }.band-meta { color:var(--ink); font:600 1.5rem/1.1 Caveat,cursive; }
.status { min-height:1.5em; margin:22px 0; color:var(--muted); text-align:center; font:13px Arial,sans-serif; }
.status:not(:empty)::after { content:' ·'; animation: searching 1s steps(3,end) infinite; }
@keyframes searching { 0% { opacity:.15; } 50% { opacity:1; } 100% { opacity:.15; } }
.puzzle-shell { max-width:820px; min-height:100vh; min-height:100dvh; padding-top:20px; padding-bottom:20px; }.puzzle-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; }.puzzle-header .eyebrow { margin:0; font-size:10px; }
.position-card { --board-size:min(54vh,500px,calc(100vw - 144px),max(280px,calc(100dvh - 420px))); width:calc(var(--board-size) + 64px); max-width:100%; margin:0 auto; text-align:center; }.loading { color:var(--muted); }
.puzzle-band { position:relative; z-index:21; display:flex; align-items:center; justify-content:center; width:148px; height:96px; margin:0 auto -24px; }.puzzle-band[hidden] { display:none; }
.puzzle-badge { width:96px; height:96px; object-fit:contain; }
.puzzle-like { position:absolute; z-index:21; top:8px; right:8px; display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; background:transparent; color:#9d9381; cursor:pointer; }
.puzzle-like svg { width:24px; height:24px; }.puzzle-like.liked { color:var(--red); }.puzzle-like.liked svg { fill:currentColor; }
.puzzle-like:hover { color:var(--red); }.puzzle-like:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.puzzle-panel { position:relative; padding:32px 32px 14px; background:var(--panel); }
.side-to-move { margin:0 0 8px; font-family:Caveat,cursive; font-size:2rem; line-height:1; }.board-wrap { position:relative; width:var(--board-size); margin:0 auto; }.board-frame { position:relative; padding:7px; }.board { display:grid; grid-template-columns:repeat(8,1fr); width:100%; aspect-ratio:1; gap:0; background:var(--paper); }
.square { display:grid; place-items:center; min-width:0; min-height:0; overflow:hidden; color:#28251f; background:var(--paper); font:normal calc((var(--board-size) - 14px) / 8)/1 OpenChessFont; }.square.empty { font-size:calc((var(--board-size) - 14px) / 8); }
.coords { display:grid; grid-template-columns:repeat(8,1fr); width:calc(100% - 14px); margin:0 auto; padding:0; color:#28251f; font:600 clamp(22px,3.6vh,32px)/1 Caveat,cursive; }.coords span { text-align:center; }.ranks { position:absolute; left:-18px; top:7px; height:calc(100% - 14px); display:grid; grid-template-rows:repeat(8,1fr); color:#28251f; font:600 clamp(22px,3.6vh,32px)/1 Caveat,cursive; }.ranks span { display:grid; place-items:center; }
.last-move { margin:8px 0 0; color:var(--note-ink); font-family:Caveat,cursive; font-size:1.65rem; line-height:1.15; }.actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; }.action { position:relative; padding:11px 16px; border:0; color:var(--ink); background:rgba(255,252,243,.78); font:inherit; text-decoration:none; cursor:pointer; }.action.primary { color:var(--red); }
.position-card .actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }.position-card .action { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:11px 10px; transition:background .16s ease; }.position-card .action > svg { flex-shrink:0; width:17px; height:17px; }.position-card .action:hover { background:#fff9eb; }.position-card .action:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.not-found { color:var(--red); font-size:1.2rem; }
.position-card .puzzle-randomize { grid-column:1 / -1; }
.position-card .action[aria-disabled="true"],.position-card .action:disabled { opacity:.45; cursor:wait; }
@media (max-width:560px) { .shell { padding:38px 15px 60px; }.puzzle-shell { padding-top:16px; padding-bottom:16px; }.category-toggle { padding:16px; font-size:1.4rem; }.bands { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 10px; padding:32px 10px 16px; }.band-badge { width:calc(100% - 30px); }.heart { top:8px; right:7px; }.puzzle-header { gap:8px; }.ranks { left:-22px; } }
@media (max-width:560px) { .puzzle-header .back-link { font-size:.9rem; }.position-card { --board-size:min(48vh,500px,calc(100vw - 112px),max(240px,calc(100dvh - 390px))); }.puzzle-band { height:84px; margin-bottom:-22px; }.puzzle-badge { width:84px; height:84px; }.puzzle-panel { padding-top:28px; }.position-card .action { font-size:.95rem; } }
@media (max-width:560px) { .puzzle-lookup { top:0; right:15px; } }