@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root{font-family:Inter,Arial,sans-serif;font-synthesis:none;color:#071d16;background:white;--ink:#071d16;--mint:#d6f5eb;--green:#27a57b;--dark:#1d7c5c;--bright:#30cf9a;--top-space:env(safe-area-inset-top,0px);--keyboard-height:min(60.6965vw,244px)}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.45}:focus,:focus-visible{outline:none}[hidden]{display:none!important}img{display:block}.app{width:100%;max-width:402px;margin:0 auto;background:white}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.hero{height:700px;border-bottom:1px solid #0a291f;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 24px 60px;gap:32px;position:relative;isolation:isolate;overflow:hidden}.hero-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.hero-art img{position:absolute;width:163.41%;height:107.12%;object-fit:contain;left:-30.8%;top:-52%;transform:rotate(-45deg)}.identity{display:flex;align-items:center;flex-direction:column;gap:16px}.logo-grid{display:grid;grid-template-columns:repeat(2,31.5px);width:63px;height:63px;box-shadow:0 3px var(--ink);border-radius:5px;overflow:hidden}.logo-grid span{border:.65px solid var(--ink)}.logo-grid span:first-child{background:var(--dark);color:white;font-size:13px;font-weight:600;padding:2px 4px}.logo-grid span:last-child{background:var(--mint)}h1{margin:0}.tagline{font-size:18px;line-height:1.4;font-weight:300;margin:0;text-align:center;white-space:nowrap}.tile-button{border:1px solid var(--ink);background:white;border-radius:4px;box-shadow:0 4px var(--ink);min-height:48px;padding:10px 16px;font-size:18px;font-weight:300}.play{color:var(--bright);font-size:24px;font-weight:700}.tile-button:active{transform:translateY(2px);box-shadow:0 2px var(--ink)}.byline{font-size:12px;text-align:center;width:100%}.byline p{margin:0;display:flex;justify-content:center;align-items:center;gap:8px}.byline p+p{margin-top:16px}.byline strong{font-weight:600}.divider{transform:rotate(90deg);flex:none}.calendar{background:#eafaf5;padding:48px 24px;min-height:510px}.month-controls{display:flex;align-items:center;gap:8px;margin:4px -8px 32px}.arrow-button{flex:none;width:40px;height:40px;border:0;background:var(--green);border-radius:12px;display:grid;place-items:center;padding:8px}.previous img{transform:rotate(180deg)}.month-label{display:flex;align-items:center;justify-content:space-between;flex:1;min-width:0;font-size:18px}.calendar-week,#calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;text-align:center}.calendar-week{font-size:12px;font-weight:500;margin-bottom:8px}#calendar-days{row-gap:12px}.date-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px}.day-button{height:40px;width:38px;background:transparent;border:0;padding:0;position:relative;display:grid;place-items:center;border-radius:4px}.day-button:disabled{opacity:1}.day-button:not(:disabled){border:1px solid var(--ink);box-shadow:0 2px var(--ink);background:linear-gradient(90deg,transparent 49%,var(--ink) 49%,var(--ink) 51%,transparent 51%),linear-gradient(transparent 49%,var(--ink) 49%,var(--ink) 51%,transparent 51%)}.day-button.started{background-color:var(--mint)}.day-button.complete{background:var(--dark)}.calendar-note{font-size:11px;line-height:1.6;text-align:center;color:#53695f;margin:28px 0 0}.game-screen{height:100svh;min-height:620px;display:flex;flex-direction:column;padding-top:var(--top-space);overflow:hidden}.game-header{height:53px;flex:none;border-bottom:1px solid #0a291f;padding:16px;display:flex;justify-content:space-between;font-size:14px;font-weight:500}.header-left,.header-right{display:flex;align-items:center;gap:16px;height:20px}.back-button{display:flex;align-items:center;gap:8px;background:none;border:0;padding:0 8px 0 0;position:relative}.back-button:after,.icon-button:after{content:'';position:absolute;inset:-12px -5px}.icon-button{background:none;border:0;padding:0;position:relative}.board{width:min(336px,calc(100% - 66px),calc(100svh - var(--top-space) - 53px - var(--keyboard-height) - 136px));margin:16px auto 0;flex:none;aspect-ratio:1}#grid{display:grid;width:100%;height:100%;grid-template-columns:repeat(var(--size),1fr);grid-template-rows:repeat(var(--size),1fr)}.cell{border:1px solid var(--ink);box-shadow:0 4px var(--ink);background:white;font-size:clamp(17px,6vw,24px);font-weight:700;color:var(--bright);padding:0;position:relative;min-width:0;min-height:0;display:grid;place-items:center}.cell.active{background:var(--mint);border-color:#13533e}.cell.selected,.cell.solved{background:var(--dark);color:white}.cell-marker{position:absolute;top:2px;left:3px;font-size:8px;font-weight:600;color:var(--ink)}.cell.selected .cell-marker,.cell.solved .cell-marker{color:white}.grid-gap{background:url('/assets/empty.svg') center/100% 100% no-repeat;pointer-events:none}.hint-mark{position:absolute;right:4.5px;top:4.5px}.game-input{margin-top:auto;width:100%;flex:none}.clue-carousel{display:flex;gap:8px;align-items:center;padding:0 16px;margin-bottom:16px}.clue-card{flex:1;min-width:0;min-height:88px;background:#f5f5f5;border-radius:12px;display:flex;flex-direction:column;justify-content:center;padding:16px;gap:16px}.clue-meta{display:flex;justify-content:space-between;color:var(--green);font-size:12px;font-weight:600;gap:4px;align-items:center}.clue-meta>span:first-child{display:flex;align-items:center;gap:6px}.clue-card p{font-size:16px;font-weight:400;line-height:1.2;margin:0;overflow-wrap:anywhere}#keyboard{height:var(--keyboard-height);background:#dadada url('/assets/keyboard.png') center bottom/100% auto no-repeat;position:relative}.key-row{display:flex;position:absolute;gap:1.5%;height:21.5%;left:.5%;right:.5%}.key-row.row-0{top:.7%}.key-row.row-1{top:24%;left:5.5%;right:5.5%;gap:1.7%}.key-row.row-2{top:47.2%;left:1.5%;right:1.5%}.key{background:transparent;border:0;border-radius:5px;flex:1;min-width:0;color:transparent;padding:0;user-select:none}.key.wide{flex:1.3}.key:active{background:#27a57b33}.game-screen.is-solved #timer{color:var(--green)}.toast{position:fixed;z-index:5;left:50%;transform:translateX(-50%);bottom:calc(var(--keyboard-height) + 118px);background:var(--ink);color:white;padding:10px 16px;border-radius:8px;font-size:13px;line-height:1.4;max-width:354px;width:max-content;max-width:min(354px,calc(100vw - 32px));margin:0;box-shadow:0 4px 18px #071d1620;pointer-events:none}.toast:empty{display:none}body:has(#game[hidden]) .toast{bottom:24px}dialog{border:0;border-radius:20px 20px 0 0;padding:24px;max-width:402px;width:100%;max-height:85svh;margin:auto auto 0;color:var(--ink);box-shadow:0 -4px 40px #071d1620}dialog::backdrop{background:#071d1655}.sheet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.sheet-header h2{font-size:21px;font-weight:500;margin:0}.close-button{background:#eafaf5;border:0;border-radius:50%;width:36px;height:36px;font-size:26px}.sheet-row{display:block;text-align:left;width:100%;padding:15px 16px;border:1px solid #c4e5da;border-radius:8px;background:white;font-size:15px;margin:10px 0}.sheet-row small{display:block;font-size:12px;color:#58746a;margin-top:6px;line-height:1.5}.sheet-row.selected{background:#eafaf5}.sheet-copy{font-size:14px;line-height:1.6}.sheet-copy p{margin:12px 0}.sheet-copy strong{font-weight:600}.setting-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:14px 0}.sheet-actions{display:flex;gap:12px;margin-top:16px}.sheet-actions>*{flex:1}.danger{color:#9d3434}.sheet-select{width:100%;padding:14px;background:white;border:1px solid var(--ink);border-radius:4px;font:inherit}.sheet-footer{font-size:11px;color:#61766d;margin-top:20px;line-height:1.6}@media(max-height:740px){.clue-card{gap:10px}}@media(max-width:360px){.tagline{font-size:16px}.hero{padding-left:16px;padding-right:16px}.clue-carousel{padding:0 10px;gap:6px}.clue-card{padding:12px}.clue-card p{font-size:14px}.arrow-button{width:36px;height:36px;padding:6px}.calendar{padding-left:18px;padding-right:18px}.month-label{font-size:16px}}
/* Preserve the mobile canvas width when the menu scrolls. */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}.hero-art img{left:-5.8%}.tagline{line-height:18px}.byline{line-height:10px}
.hero{gap:30px}.hero-art img{width:125%;height:auto;left:6%;top:-28%}.byline{line-height:9px}.month-controls{margin:4px 16px 32px}.calendar-week,#calendar-days{max-width:328px;margin-left:auto;margin-right:auto}@media(max-width:360px){.month-controls{margin-left:4px;margin-right:4px}}
/* Let the grid yield space when a longer clue wraps on a small phone. */
.game-screen .board{flex:1;min-height:0;aspect-ratio:auto;width:100%;margin:16px 0;display:flex;align-items:center;justify-content:center;container-type:size}.game-screen #grid{width:min(336px,calc(100% - 66px),100cqh);height:auto;aspect-ratio:1;margin:0 auto}
/* Figma overlay components: 46:1746, 46:1789, 46:1811. */
dialog.design-overlay{width:calc(100% - 32px);max-width:340px;max-height:calc(100svh - 48px);margin:auto;padding:0;border-radius:12px;box-shadow:0 12px 60px #071d1626;overflow:auto;scrollbar-width:none}.design-overlay::backdrop{background:#071d1655}.design-overlay .sheet-header{height:69px;padding:24px;position:sticky;top:0;background:white;z-index:1;border-bottom:1px solid #0a291f;margin:0;flex:none}.design-overlay .sheet-header h2{font-size:18px;font-weight:300;line-height:1.4}.design-overlay .close-button{width:20px;height:20px;border:0;border-radius:0;background:none;padding:0;position:relative;display:grid;place-items:center}.design-overlay .close-button:after{content:'';position:absolute;inset:-12px}.close-button img{flex:none}.design-overlay #sheet-content{display:flex;flex-direction:column;gap:32px;padding:24px}.overlay-section{display:flex;flex-direction:column;gap:16px}.overlay-section h3{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;line-height:9px;color:var(--green)}.overlay-section p{margin:0;font-size:18px;font-weight:300;line-height:1.4;text-box-trim:trim-both;text-box-edge:cap alphabetic}.overlay-setting{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;font-size:18px;font-weight:300;line-height:1.4}.overlay-setting>span{text-box-trim:trim-both;text-box-edge:cap alphabetic}.figma-toggle{width:40px;height:22px;flex:none;display:grid;place-items:center;background:none;border:0;padding:0;position:relative}.figma-toggle:after{content:'';position:absolute;inset:-10px 0}.design-overlay.hints-overlay .sheet-header{height:60px;border:0;padding:24px 24px 16px}.design-overlay.hints-overlay #sheet-content{padding:0 24px 24px;gap:16px}.hint-action{width:100%;height:48px;flex:none;text-align:left;font-size:18px;font-weight:300;margin:0;white-space:nowrap}.color-blind{--green:#2368a2;--dark:#17416c;--bright:#2368a2;--mint:#e3edf9}.color-blind .cell.active{background:#e3edf9;border-color:#17416c}.color-blind .cell.selected,.color-blind .cell.solved{background:#17416c;color:white}.color-blind .cell.selected{outline:3px double #d07620;outline-offset:-4px}.color-blind .logo-grid span:first-child,.color-blind .day-button.complete{background:#17416c}.color-blind .calendar,.color-blind .sheet-row.selected{background:#eef4fb}.color-blind .figma-toggle[aria-checked=true]{outline:2px solid #17416c;outline-offset:2px;border-radius:15px}@media(max-width:360px){.design-overlay #sheet-content{padding-left:20px;padding-right:20px}.design-overlay .sheet-header{padding-left:20px;padding-right:20px}.overlay-setting{font-size:16px}.design-overlay.hints-overlay #sheet-content{padding-left:20px;padding-right:20px}.hint-action{font-size:16px}}
.close-button{display:grid;place-items:center}
/* Match Figma's pinned menu panel, with the calendar scrolling over it. */
#home{position:relative;isolation:isolate}
#home .hero{position:sticky;top:0;z-index:0;background:#fff;height:min(700px,100svh);border-bottom:0}
#home .calendar{position:relative;z-index:1;border-top:1px solid #0a291f}
/* Reserve the same two-line clue space in every Figma carousel variant. */
.clue-card{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:9px minmax(0,1fr);justify-content:stretch;justify-items:stretch;height:88px;min-height:88px;max-height:88px;gap:16px}
.clue-meta{height:9px;line-height:9px}
.clue-copy{min-height:0;display:flex;align-items:center}
.clue-copy p{width:100%;flex:none;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.clue-meta,.clue-copy{min-width:0;width:100%}

/* Center every stroke on the grid boundary so crossing edges cannot step sideways.
   Adjacent tiles paint the same 1px stroke at the exact same coordinates. */
#grid .cell{border:0}
#grid .cell::after{content:'';position:absolute;inset:-.5px;border:1px solid var(--ink);border-radius:inherit;pointer-events:none;z-index:1}

/* Figma calendar 38:3729 and day states 30:7106. */
.calendar .month-controls{margin:0 16px 32px;align-items:center}
.calendar-week,#calendar-days{gap:8px}
.calendar-week{line-height:9px;margin-bottom:8px}
.date-item{gap:8px;line-height:9px;font-weight:500}
.calendar .day-button{width:min(38px,100%);height:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);border:0;box-shadow:none;background:none;padding:0;isolation:isolate}
.calendar-tile{border:1px solid var(--ink);background:#fff;min-width:0;min-height:0}
.calendar-tile:first-child{border-radius:4px 0 0 0}
.calendar-tile:nth-child(2){border-radius:0 4px 0 0;border-left:0}
.calendar-tile:nth-child(3){border-radius:0 0 0 4px;border-top:0}
.calendar-tile:nth-child(4){border-radius:0 0 4px 0;border-top:0;border-left:0}
.empty .calendar-tile{border-color:#5ad8ae;background:transparent}
.some .calendar-tile:first-child,.most .calendar-tile:not(:nth-child(4)){background:var(--dark)}
.calendar .day-button.complete{background:var(--dark);border-radius:4px;display:block}
.calendar-star{position:absolute;left:25%;top:25%}
.calendar-hint{position:absolute;right:4px;top:4px;z-index:1}
.calendar .day-button>img:not(.calendar-star):not(.calendar-hint){position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
@media(max-width:360px){.calendar .month-controls{margin-left:4px;margin-right:4px}}
.calendar-week,#calendar-days{max-width:314px}
.calendar .day-button{align-items:stretch;justify-items:stretch}

#clue-text.alternative-clue{color:var(--green)}
.clue-meta>span:first-child{gap:8px}

.hold-instructions{font-size:12px;line-height:1.4;color:#53695f;margin:0}
.hint-action{position:relative;isolation:isolate;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;--hold-progress:0}
.hint-action::before{content:'';position:absolute;inset:0;background:var(--dark);transform:scaleX(var(--hold-progress));transform-origin:left;z-index:-1}
.hint-label-filled{position:absolute;inset:0;display:flex;align-items:center;padding:10px 16px;color:white;clip-path:inset(0 calc((1 - var(--hold-progress))*100%) 0 0);pointer-events:none}
.hint-action:active{transform:none;box-shadow:0 4px var(--ink)}
.hint-action:disabled{opacity:1;background:#f0f0f0;border-color:#dbdbdb;color:#979797;box-shadow:none}
.hint-action:disabled::before,.hint-action:disabled .hint-label-filled{display:none}

/* Completion keeps the keyboard's footprint, preserving board/carousel geometry. */
.completed-footer{height:var(--keyboard-height);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:16px 24px}
.completed-byline{display:flex;flex-direction:column;gap:16px;width:100%;font-size:12px;line-height:9px;text-align:center}
.completed-byline p{margin:0;display:flex;gap:8px;justify-content:center;align-items:center}
.completed-byline strong{font-weight:600}
.completed-footer .tile-button{flex:none}
.design-overlay.results-overlay .sheet-header{background:var(--dark);color:#fff}
.design-overlay.results-overlay #sheet-content{align-items:center;gap:32px;padding:48px 24px}
.results-badge{flex:none}
.results-summary{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;text-align:center}
.results-summary h3{font-size:24px;font-weight:500;line-height:1.4;margin:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.results-summary p{font-size:18px;font-weight:300;line-height:1.4;margin:0;width:100%;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.results-summary strong{font-weight:600}
.results-overlay #share{flex:none}