/* Shared visual states and a compact, game-first composition. */
.cafe-icon{width:24px;height:24px;display:inline-block;vertical-align:middle;flex-shrink:0}.brand-mark:before,.brand-mark:after{display:none}.brand-mark{color:#a95138}.brand-mark .cafe-icon{width:28px;height:28px}
.intro{margin-bottom:20px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.intro>.eyebrow,.intro>p{display:none}.intro-cat{margin:0!important}.intro-cat .cat-portrait{width:48px;height:46px}.intro h1{font-size:30px;letter-spacing:-1px;margin:0;flex:1 1 300px;text-align:left}.intro>button{margin:0;padding:12px 16px}.more-modes{flex-basis:100%;text-align:center}.more-modes summary{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:1px solid #c9b59b;border-radius:12px;cursor:pointer;font-size:13px;background:#fffdf6}.more-mode-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.more-mode-buttons>button{margin:0;padding:10px 14px;font-size:12px}.cafe-story{margin-top:22px}.reward-reveal{margin:0 0 18px;padding:0;max-width:none}.reward-notice{border:1px solid #d6b579;border-radius:14px;background:#fff5df;padding:0 14px}.reward-notice>summary{min-height:48px;padding:12px 0;font-size:14px;cursor:pointer}.reward-notice .postcard-reward{margin:0 0 14px;border:0;padding:8px;background:transparent}.reward-notice .reward-cards figure{flex-basis:180px}
.play-area:has(.win:not([hidden]))>.board,.play-area:has(.win:not([hidden]))>#message{display:none}.play-area:has(.win:not([hidden])){padding:20px;min-height:0}.win{position:relative;inset:auto;padding:20px 12px;background:#fff8ec;backdrop-filter:none;gap:8px}.win #pour-share{width:100%;max-width:620px}.win .result-share{margin-top:12px;max-width:none}.win h2{margin:4px 0}.win p{margin:4px 0}.win .primary{margin:8px 0}.result-share label{flex-wrap:wrap;justify-content:center}.result-share select{max-width:100%}.result-share-text{box-sizing:border-box}.result-share-buttons{min-width:0}.win .result-share{overflow-wrap:anywhere}
.daily-choices button,#daily-book,#daily-finish{min-height:44px;padding:12px 16px;border:1px solid #baa38c;border-radius:12px;background:#fffdf6;font:inherit;color:#493e34}.daily-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.daily-choices button{font-size:13px}.daily-choices button.completed{background:#e6ecd9;border-color:#52664b;color:#354b30}.primary:disabled{background:#e5dfd4;color:#716356;border:1px solid #cbbfac;box-shadow:none;opacity:1;cursor:default}.postcard.locked{opacity:1;color:#594b42;background:#f3eee4}.postcard.locked>span{color:#87735c;opacity:.65}.postcard small{color:#655342}
.catnap-card .catnap-tile{min-height:64px}.catnap-name{display:none}.catnap-tile .cat-portrait{width:42px;height:40px}.catnap-symbol{font-size:15px}.catnap-selection{min-height:28px;font-size:13px;text-align:center;color:#493e34;margin:8px 0}.catnap-board-wrap{overflow-x:auto}.catnap-board{min-width:calc(var(--nap-cols)*44px + (var(--nap-cols) - 1)*4px);gap:4px}.catnap-board-wrap:focus-visible{outline:3px solid #52664b;outline-offset:3px}.catnap-corner>.cafe-icon{margin:auto;width:32px;height:32px}.catwords-heading h2 .cafe-icon{width:24px;height:24px}
.guided-chapter button{display:flex;flex-direction:column;gap:4px;align-items:flex-start}.guided-chapter button small{font-size:11px;color:#655342}.help-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}.help-steps>div{padding:12px;border:1px solid #d5c5ad;border-radius:12px;text-align:center;font-size:13px}.help-steps .cafe-icon{display:block;margin:0 auto 8px}.help-topic{padding:12px 0;border-top:1px solid #d5c5ad}.help-topic summary{min-height:36px;cursor:pointer;font-size:14px;font-weight:600}.secondary-modes{margin-top:12px}.secondary-modes summary{min-height:36px;font-size:13px;cursor:pointer}.more-modes summary:focus-visible,.reward-notice summary:focus-visible,.help-topic summary:focus-visible{outline:3px solid #52664b;outline-offset:3px}
@media(max-width:700px){header{padding:14px 18px}main{padding-top:6px}.intro{gap:8px}.intro h1{font-size:25px;flex:1 1 220px}.intro-cat .cat-portrait{width:36px;height:36px}.intro>button{flex:1 1 28%;font-size:12px;padding:10px 7px;min-height:48px}.more-modes{margin-top:0}.more-modes summary{padding:7px 14px;font-size:12px;min-height:40px}.catnap-card .catnap-tile{min-height:60px}.catnap-tile .cat-portrait{width:36px;height:34px}.catnap-symbol{font-size:14px}.catnap-header,.catwords-heading{gap:10px}.daily-choices{grid-template-columns:1fr}.daily-choices button{text-align:left}.play-area:has(.win:not([hidden])){padding:12px}.win{padding:12px 4px}.help-steps{grid-template-columns:1fr}.result-share{padding:14px}.result-share label{flex-basis:100%}}

.catnap-board-wrap{padding:36px 14px}.catnap-board-wrap svg.catnap-path{max-width:none}.secondary-modes{flex-basis:100%}.cafe-keepsakes .cafe-icon{width:16px;height:16px}

@media(max-width:700px){.cafe-orders{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:14px 16px}.cat-order{flex:0 0 235px;min-width:235px;scroll-snap-align:start}.cat-order .cat-portrait{width:44px;height:44px}.order-name{font-size:13px}.order-request{font-size:11px}.cat-order.next{background:#fff3df}}
body:not(.title-open) .title-screen{display:none}body.title-open main>:not(.title-screen){display:none!important}.brand-mark{transform:none}.brand-mark img{display:block}.brand-dot{display:none}
.intro.title-screen{display:flex;flex-direction:column;gap:12px;margin:16px auto 40px;max-width:680px;text-align:center}.title-screen .title-logo{width:120px;height:120px}.intro.title-screen h1{flex:none;text-align:center;font-size:52px;margin:0;letter-spacing:-2px}.intro.title-screen>p{display:block;margin:0;color:#655342;line-height:1.6;font-size:13px}.title-screen .title-tagline{font-size:18px}.title-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin:12px 0}.title-choices>button{margin:0;padding:16px;min-height:90px;border-radius:18px;font-size:17px;text-align:left;display:flex;flex-direction:column;gap:8px}.title-choices small{font-size:12px;line-height:1.5;font-weight:400}.title-screen .more-modes{flex-basis:auto;width:100%}.title-choices .cafe-entry{background:#52664b;border-color:#52664b;color:#fffdf6}.title-choices .cafe-entry:hover{background:#40563a}
@media(max-width:700px){.intro.title-screen{margin-top:12px;gap:9px}.title-screen .title-logo{width:88px;height:88px}.intro.title-screen h1{font-size:40px}.title-choices{gap:9px}.title-choices>button{font-size:15px;padding:13px;min-height:98px}.title-choices small{font-size:12px}.title-screen .title-tagline{font-size:15px}}
.intro.title-screen>p{max-width:100%;width:100%}
/* Fit wide arcade frames without changing the phone layout. */
@media(min-width:701px) and (max-height:760px){
header{padding:10px 24px}.brand{font-size:20px}.brand-mark svg{width:30px;height:30px}.quiet-label{display:none}main{padding:8px 20px 0;max-width:1000px}
.intro.title-screen{display:grid;grid-template-columns:230px minmax(0,1fr);gap:10px 28px;max-width:900px;margin:10px auto 14px;align-items:center}.title-screen .title-logo{grid-column:1;grid-row:1;width:90px;height:90px;justify-self:center}.intro.title-screen h1{grid-column:1;grid-row:2;font-size:38px}.title-screen .title-tagline{grid-column:1;grid-row:3;font-size:15px}.title-screen>p:not(.title-tagline){grid-column:1;grid-row:4;font-size:12px}.title-choices{grid-column:2;grid-row:1 / span 4;margin:0;gap:10px}.title-choices>button{min-height:88px;font-size:15px;padding:14px}.title-screen .more-modes{grid-column:1 / -1;grid-row:5}.title-screen .more-modes summary{min-height:36px;padding:6px 14px}body.title-open footer{padding:10px 24px;margin-top:12px}
.game-top{padding:12px 20px;gap:24px}.puzzle-meta{padding:10px 20px 0}.rule-note{padding:0 20px;margin-top:6px;font-size:11px;line-height:1.5}.cafe-orders{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:10px 0 0;padding:0 16px 6px}.cat-order{flex:1 0 200px;min-width:200px;padding:8px;grid-template-columns:38px minmax(0,1fr);gap:8px}.cat-order.waiting{padding:7px}.cat-order .cat-portrait{width:38px;height:38px}.order-name{font-size:12px}.order-request{font-size:11px}.recipe-stack{width:30px;margin:3px 0}.recipe-layer{height:13px;font-size:10px}.recipe-direction,.recipe-caption{font-size:9px}.play-area{padding:22px 18px 10px;min-height:0}.board{gap:28px;min-height:0}#message{margin:12px 0 0}.game-bottom{padding:12px 20px;gap:30px}.recipe-tools{padding:8px 16px}.session-tools{margin-top:8px}.under-card,.how-row,.cafe-story{display:none}dialog{max-height:calc(100vh - 24px);padding:24px;overflow:auto}.win{padding:8px}.play-area:has(.win:not([hidden])){padding:12px}
}
@media(min-width:701px) and (max-height:760px){header{padding:6px 24px}.game-top{padding:8px 20px}.cafe-orders{margin-top:6px}.cat-order{padding:6px;min-height:56px}.cat-order.waiting{padding:5px}.cat-order .cat-portrait{width:30px;height:30px}.order-request{margin-top:2px}.play-area{padding:12px 18px 6px}.tube:not(.recipe-glass){height:145px}.tube:not(.recipe-glass) .layer{height:30px}.tube-number{margin-top:6px}.serve-drink{min-height:32px;padding:6px 10px;margin-top:4px;font-size:11px}.game-bottom{padding:6px 20px}.cat-order .order-label{margin:0}.session-tools{font-size:10px}}
@media(min-width:701px) and (max-height:760px){.game-top{padding:4px 20px}.tube:not(.recipe-glass){height:135px}.tube:not(.recipe-glass) .layer{height:28px}.order-status{margin-top:0}.order-request{line-height:1.3}.order-name{margin-bottom:0}.cafe-orders{padding-bottom:4px}}
@media(min-width:701px) and (max-height:760px){.cat-order.next{padding:5px}.order-request:has(.recipe-stack){display:flex;align-items:center;gap:8px}.recipe-stack{margin:0}.recipe-tools p{font-size:11px;line-height:1.4}.recipe-tools:has(#paw-tool[hidden]):has(#spoon-tool[hidden]){display:none}}

/* Completion uses the frame height, including large desktop frames. */
@media(min-width:701px){
body:has(#win:not([hidden])) header{padding:6px 24px}
body:has(#win:not([hidden])) main{padding-top:4px}
body:has(#win:not([hidden])) .reward-reveal{margin-bottom:6px}
body:has(#win:not([hidden])) .reward-notice>summary{min-height:36px;padding:6px 0}
.game-card:has(#win:not([hidden])) .game-top{padding:6px 20px}
.game-card:has(#win:not([hidden])) .puzzle-meta{padding:6px 20px 0}
.game-card:has(#win:not([hidden])) .rule-note,.game-card:has(#win:not([hidden])) .cafe-orders,.game-card:has(#win:not([hidden])) .game-bottom,.game-card:has(#win:not([hidden])) .recipe-tools{display:none}
.play-area:has(.win:not([hidden])){padding:8px}
.win{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;justify-items:center;padding:8px}
.win[hidden]{display:none}.win-spark{display:none}.win h2,.win #win-copy,.win #pour-share{grid-column:1 / -1}
.win h2{font-size:28px;margin:0}.win #win-copy{font-size:12px;margin:0}
.win .primary,.win #daily-finish{min-height:44px;padding:10px 16px;margin:4px 0}
.win .primary:has(+ #daily-finish[hidden]){grid-column:1 / -1}
.win .result-share{margin:4px 0 0;padding:10px}.win .result-share h3{font-size:18px;margin:0}
.win .result-share p{margin:3px 0;font-size:11px}.win .result-share-feedback{min-height:16px}
body:has(#win:not([hidden])) .session-tools,body:has(#win:not([hidden])) .under-card,body:has(#win:not([hidden])) .how-row,body:has(#win:not([hidden])) .cafe-story,body:has(#win:not([hidden])) footer{display:none}
}

@media(min-width:701px) and (max-height:460px){body:has(#win:not([hidden])) .reward-reveal{display:none}.win h2{font-size:24px}.win .result-share>p:not(.result-share-feedback){display:none}.win .result-share h3{display:none}.win .result-share{padding:6px}.win{gap:3px;padding:4px}.game-card:has(#win:not([hidden])) .game-top{padding:3px 16px}.win .result-share-buttons{gap:4px}}