:root { --paper: #fffbf2; --ink: #161514; --red: #e03131; --blue: #1971c2; --grey: #6f695e; --rule: #e2daca; --wash: #f3ebda; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 Inter, system-ui, sans-serif; }
header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 24px 10px; }
h1 { margin: 0; font: 800 34px/1 'Inter Tight', sans-serif; letter-spacing: -0.03em; }
h1 em { font: italic 500 22px 'Inter Tight', sans-serif; color: var(--grey); letter-spacing: -0.01em; margin-left: 6px; }
nav { display: flex; gap: 6px; }
button { font: 500 14px Inter, sans-serif; color: var(--ink); background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
button.on { background: var(--ink); color: var(--paper); }
button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.view { display: none; padding: 0 24px 24px; }
.view.on { display: block; }
#piece, .board { width: 100%; height: calc(100vh - 140px); min-height: 380px; display: block; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 1.5px var(--rule); }
.under { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; }
.hand { font: 600 22px Caveat, cursive; color: var(--grey); }
.board { position: relative; touch-action: none; overflow: hidden; }
.board canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 10px; }
.sw { display: inline-flex; gap: 6px; margin: 0 8px; }
.sw i { width: 26px; height: 26px; border-radius: 50%; display: inline-block; cursor: pointer; box-shadow: 0 0 0 1.5px var(--rule); }
.sw i.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
#clear { margin-left: auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
figure { margin: 0; background: var(--paper); border-radius: 14px; box-shadow: 0 0 0 1.5px var(--rule); overflow: hidden; }
figure canvas { width: 100%; aspect-ratio: 4 / 3; display: block; }
figcaption { padding: 6px 12px 10px; font-size: 13px; color: var(--grey); }
figcaption code { color: var(--ink); font: 500 13px ui-monospace, Menlo, monospace; }
.under.top { padding: 0 0 12px; gap: 12px; }
.series { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px 14px; }
.series figure { cursor: zoom-in; box-shadow: none; background: none; border-radius: 0; overflow: visible; }
.series canvas { width: 100%; aspect-ratio: 10 / 13; display: block; background: var(--wash); box-shadow: 0 1px 2px rgba(40, 30, 20, 0.15), 0 6px 18px -8px rgba(40, 30, 20, 0.3); }
.series figcaption { padding: 6px 2px 0; font-size: 12px; line-height: 1.35; }
.series figcaption b { color: var(--ink); font-weight: 500; }
dialog#big { border: 0; padding: 0; background: var(--paper); max-width: 96vw; max-height: 96vh; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
dialog#big::backdrop { background: rgba(30, 26, 22, 0.7); }
dialog#big canvas { display: block; height: min(84vh, 125vw); aspect-ratio: 10 / 13; }
dialog#big .traits { margin: 0; padding: 8px 14px; font-size: 13px; color: var(--grey); max-width: calc(min(84vh, 125vw) * 10 / 13); }
dialog#big .close { position: absolute; top: 10px; right: 10px; background: var(--paper); }
@media (max-width: 600px) { header, .view { padding-left: 12px; padding-right: 12px; } h1 em { display: block; margin: 4px 0 0; } }
.picks { display: flex; gap: 6px; flex: none; }