*{box-sizing:border-box} :root{font-family:Arial,Helvetica,sans-serif;color:#25221e;background:#f7f1df;--ink:#d46c22} body{margin:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #7856a3;outline-offset:3px}#app{max-width:540px;margin:auto;padding: max(12px,env(safe-area-inset-top)) 14px max(12px,env(safe-area-inset-bottom));height:100svh;height:100dvh;display:flex;flex-direction:column;gap:12px}.brand{font-family:Georgia,serif;font-style:italic;font-weight:bold;font-size:30px;letter-spacing:-2px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2px;font-weight:700}.top{display:flex;align-items:center;justify-content:space-between;gap:12px}.edition{border:1px solid #bcae91;padding:7px;font-size:9px;letter-spacing:1px}h1{font-family:Georgia,serif;font-weight:400;font-size:36px;letter-spacing:-1.3px;margin:0}p{margin:0;font-size:13px;line-height:1.45}.muted{color:#655d50}.intro{display:flex;flex-direction:column;gap:5px}.colors{border:0;padding:0;margin:0}.colors legend{font-size:11px;margin-bottom:8px}.swatches{display:flex;gap:12px}.swatch{border:2px solid transparent;outline-offset:3px;background:transparent;border-radius:50%;height:40px;width:40px;padding:4px}.swatch span{background:var(--swatch);height:100%;width:100%;display:grid;place-items:center;border-radius:48% 53% 45% 50%;color:white;font-weight:bold}.swatch[aria-checked=true]{border-color:#25221e}.playlist-grid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:8px}.playlist{background:#fffaf0;border:1px solid #cfc4ad;padding:10px 12px;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:4px;position:relative}.playlist:hover{background:#efe1bb}.playlist .number{font-size:10px;color:#88724f;letter-spacing:1px}.playlist strong{font-family:Georgia,serif;font-size:19px;font-weight:400;line-height:1.05}.playlist .resume{font-size:10px;color:#665636}.foot{font-size:10px;text-align:center;color:#6d6252}.game-header{display:flex;align-items:center;justify-content:space-between;gap:8px}.game-header h1{font-size:27px;line-height:1.05}.close{width:44px;height:44px;flex-shrink:0;background:transparent;border:1px solid #bcae91;font-size:28px}.letters{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;font-size:17px;letter-spacing:3px;font-weight:bold}.board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:4px;flex:1;min-height:0;max-height:none}.cell{position:relative;isolation:isolate;background:#fffcf5;border:1px solid #c6b99f;border-radius:0;padding:3px;overflow:hidden;display:grid;place-items:center;min-width:0;min-height:0}.cell .label{z-index:2;font-size:clamp(11px,3.1vw,16px);line-height:1.12;font-weight:700;overflow-wrap:normal;word-break:normal;max-width:100%;text-align:center}.cell.free .label{font-family:Georgia,serif;font-style:italic;font-size:18px;font-weight:400}.cell.marked:before,.cell.free:before{content:'';position:absolute;width:83%;height:78%;max-height:86px;background:var(--ink);opacity:.43;border-radius:43% 51% 44% 49%;transform:rotate(-12deg);z-index:1;box-shadow:2px -1px 0 1px color-mix(in srgb,var(--ink) 55%,transparent),-2px 2px 0 0 color-mix(in srgb,var(--ink) 75%,transparent)}.cell.stamp:before{animation:stamp .32s cubic-bezier(.2,.8,.25,1)}@keyframes stamp{0%{transform:scale(1.7) rotate(15deg);opacity:0}45%{transform:scale(.88) rotate(-15deg);opacity:.65}75%{transform:scale(1.07) rotate(-10deg)}100%{transform:scale(1) rotate(-12deg);opacity:.43}}.status{min-height:22px;text-align:center;font-size:12px;font-weight:bold}.game-note{font-size:11px;text-align:center}.saved-warning{font-size:11px;color:#8e361f}dialog{border:1px solid #baaa8b;background:#fffaf0;color:#25221e;padding:26px;max-width:calc(100vw - 32px);width:360px}dialog::backdrop{background:#211c16a8;backdrop-filter:blur(3px)}dialog h2{font:26px Georgia,serif;margin:0 0 12px}.dialog-actions{display:grid;gap:10px;margin-top:24px}.dialog-actions button{min-height:44px;border:1px solid #a79676;background:transparent}.dialog-actions .primary{background:#29251e;color:#fffaf0}@media(max-height:600px){#app{gap:7px;padding-top:8px;padding-bottom:8px}.brand{font-size:25px}h1{font-size:29px}.intro{gap:2px}.intro p{font-size:11px}.swatch{width:34px;height:34px}.colors legend{margin-bottom:4px}.playlist{padding:7px 9px;gap:2px}.playlist strong{font-size:17px}.game-header h1{font-size:23px}.foot{font-size:9px}.game-note{font-size:10px}.letters{font-size:14px}}@media(orientation:landscape) and (max-height:500px){#app.game{max-width:900px;display:grid;grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto}.game .top,.game .game-header,.game .game-note,.game .status{grid-column:1}.game .letters{display:none}.game .board{grid-column:2;grid-row:1/5;height:100%;max-height:none}.game .foot{display:none}}@media(prefers-reduced-motion:reduce){.cell.stamp:before{animation:none}}

.cell .label{overflow-wrap:anywhere;font-size:clamp(10px,2.9vw,15px)}

@font-face{font-family:Oldport;src:url('./fonts/oldport-script.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}.brand{font-family:Oldport,cursive;font-style:normal;font-weight:400;font-size:25px;letter-spacing:0;line-height:1.1}@media(max-height:600px){.brand{font-size:22px}}
:root{--page:#f8eddb;--surface:#fff7e9;--text:#302039;--muted:#705a70;--line:#c8ac95;--accent:#9b3f12;--hover:#f6dfbf;color:var(--text);background:var(--page);color-scheme:light}
:root[data-theme=dark]{--page:#18131f;--surface:#282032;--text:#fff2dd;--muted:#cebad3;--line:#65506e;--accent:#ffb16e;--hover:#392a43;color-scheme:dark}
.muted,.foot,.playlist .resume{color:var(--muted)}.playlist,.cell,dialog{background:var(--surface);color:var(--text);border-color:var(--line)}.playlist:hover{background:var(--hover)}.playlist .number,.eyebrow,.letters{color:var(--accent)}.edition,.close,.dialog-actions button{border-color:var(--line)}.edition{color:var(--accent)}.swatch[aria-checked=true]{border-color:var(--text)}.dialog-actions .primary{background:var(--text);color:var(--page)}.menu-options{display:flex;align-items:center;justify-content:space-between;gap:8px}.menu-options .swatches{gap:5px}.theme-toggle{flex-shrink:0;min-height:44px;padding:6px 8px;border:1px solid var(--line);background:var(--surface);font-size:11px;display:flex;flex-direction:column;align-items:center;gap:5px}.theme-toggle:after{content:'';width:28px;height:15px;border-radius:12px;background:var(--line);box-shadow:inset 0 0 0 1px var(--line);background-image:radial-gradient(circle at 7px 7.5px,var(--surface) 5px,transparent 5.5px)}.theme-toggle[aria-checked=true]:after{background-color:#b478d2;background-image:radial-gradient(circle at 21px 7.5px,#fff2dd 5px,transparent 5.5px)}:root[data-theme=dark] .cell .label{text-shadow:0 1px 2px #18131f}:root[data-theme=dark] .cell:disabled{color:var(--text)}
.menu .intro{position:relative;padding-right:78px;min-height:44px}.menu .intro .theme-toggle{position:absolute;right:0;top:0}.menu-options{display:block}.colors{display:flex;align-items:center;justify-content:space-between;gap:6px}.color-label{font-size:11px;white-space:nowrap}.menu-options .swatches{gap:2px}.menu-options .swatch{width:32px;height:36px;padding:3px;flex-shrink:0}@media(max-width:350px){.color-label{font-size:10px}.menu-options .swatch{width:30px;height:34px}.menu .intro p{max-width:190px}}
.menu .intro{padding-right:0;min-height:0}.menu .intro p{max-width:none}.header-actions{display:flex;align-items:center;gap:5px;flex-shrink:0}.header-actions .edition,.header-actions .theme-toggle{height:28px;min-height:28px;box-sizing:border-box}.header-actions .edition{display:flex;align-items:center;padding:0 6px;letter-spacing:.7px;font-size:8px;white-space:nowrap}.header-actions .theme-toggle{position:static;display:flex;flex-direction:row;gap:5px;padding:0 6px;font-size:9px;line-height:1}.header-actions .theme-toggle:after{width:24px;height:14px;background-image:radial-gradient(circle at 7px 7px,var(--surface) 5px,transparent 5.5px)}.header-actions .theme-toggle[aria-checked=true]:after{background-image:radial-gradient(circle at 17px 7px,#fff2dd 5px,transparent 5.5px)}.menu-options .swatch{width:32px;height:32px;aspect-ratio:1;flex:0 0 32px}.swatch span{border-radius:50%;aspect-ratio:1}.swatch{border-radius:50%}@media(max-width:350px){.menu-options .swatch{width:30px;height:30px;flex-basis:30px}.top{gap:6px}.header-actions{gap:4px}}
.card-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.clear-card{height:44px;padding:0 8px;font-size:11px;background:var(--surface);border:1px solid var(--line)}.game-header>div:first-child{min-width:0}.game-header h1{overflow-wrap:anywhere}
