:root{--paper:#f7f2e8;--ink:#303f35;--green:#365e46;--purple:#70567e;--coral:#c4755f;--line:#d9d0bf}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans Hebrew",sans-serif;font-size:18px;line-height:1.6}
a{color:inherit}
button,input,select{font:inherit}
button,.button,summary,input,select{min-height:46px}
button,.button{cursor:pointer}
button:disabled{cursor:default;opacity:.48}
:focus-visible{outline:3px solid #b25c40;outline-offset:4px}
.skip{position:absolute;top:-100px}
.skip:focus{top:8px;z-index:10;background:white;padding:12px}
header,main,footer{max-width:1080px;margin:auto;padding-inline:36px}
header{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;padding-block:24px;border-bottom:1px solid var(--line)}
.brand{text-decoration:none;font-weight:bold;font-size:23px}
.brand{gap:9px}
.brand img{width:36px;height:36px;object-fit:contain;flex:none}
.dedication,.eyebrow,.tag,.footnote{font-size:15px}
.dedication{color:#6b6c60}
.intro{position:relative;padding:56px 0 42px}
.eyebrow{color:var(--green);font-weight:bold}
h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,5vw,65px);line-height:1.13;font-weight:normal;margin:18px 0 24px;letter-spacing:-1.5px}
.intro>p:not(.eyebrow){color:#646b5e}
.doodle{position:absolute;left:70px;top:70px;font-size:160px;color:#bc7963;transform:rotate(-14deg)}
.games{width:100%;border-collapse:collapse;table-layout:fixed}
.games caption{text-align:right;font-size:16px;padding-bottom:12px}
.games th{text-align:right;font-size:14px;padding:12px 24px;border-block:1px solid var(--line);color:#6b6c60;font-weight:normal}
.games td{padding:30px 24px;border-bottom:1px solid var(--line);vertical-align:middle}
.games td:first-child{position:relative;padding-inline-start:130px}
.games img{width:110px;height:130px;position:absolute;right:8px;top:24px;object-fit:contain}
.games h2{font-size:27px;font-weight:normal;margin:0 0 8px;font-family:Georgia,"Times New Roman",serif}
.games p{font-size:17px;margin:0 0 20px}
.tag{color:#6b6c60}
.button,button{border:1px solid var(--line);background:#fffaf0;border-radius:9px;padding:10px 18px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:16px}
.green{background:var(--green);color:#fff;border-color:var(--green)}
.purple{background:var(--purple);color:#fff;border-color:var(--purple)}
.footnote{color:#77796b;margin:28px 0 50px}
footer{padding-block:24px;border-top:1px solid var(--line);color:#77796b;font-size:14px}
footer span{color:var(--coral)}
.back{font-size:15px;text-decoration:none}
.game-heading{padding:32px 0 12px}
.game-heading h1{font-size:46px;margin:8px 0}
.game-heading p{margin:10px 0;color:#646b5e}
details{border-block:1px solid var(--line);padding:6px 0;margin:20px 0}
summary{cursor:pointer;padding:8px;font-weight:bold}
details p,details ul{font-size:16px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
.toolbar input,.toolbar select{max-width:100%;border:1px solid var(--line);border-radius:8px;background:#fffaf0;padding:6px 10px}
.play-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;padding:16px 0 50px}
.game-panel{min-width:0}
.flower-stage{height:290px;position:relative;display:flex;justify-content:center;align-items:center}
.flower-stage img{height:285px;width:285px;filter:saturate(.08);transition:filter 1s}
.flower-stage.bloom-1 img{filter:saturate(.35)}
.flower-stage.bloom-2 img{filter:saturate(.7)}
.flower-stage.bloom-3 img{filter:saturate(1.15)}
.petals{position:absolute;width:285px;height:285px;left:50%;top:50%;transform:translate(-50%,-50%)}
.petals button{position:absolute;left:50%;top:45%;width:46px;height:46px;min-height:46px;background:transparent;border:0;padding:0;font-size:25px;border-radius:0;box-shadow:none;transform:translate(-50%,-50%);color:#29382e;font-weight:bold}
.petals button:first-child{left:50%;top:45%}
.petals button:nth-child(2){left:50%;top:27.3333%}
.petals button:nth-child(3){left:65.3%;top:36.1667%}
.petals button:nth-child(4){left:65.3%;top:53.8333%}
.petals button:nth-child(5){left:50%;top:62.6667%}
.petals button:nth-child(6){left:34.7%;top:53.8333%}
.petals button:nth-child(7){left:34.7%;top:36.1667%}
.bloom-message{color:var(--green);font-weight:bold;border-inline-start:3px solid var(--green);padding-inline-start:12px}
.word-form{display:flex;gap:8px}
.word-form input{width:100%;min-width:0;border:1px solid var(--line);background:#fffaf0;border-radius:9px;padding:10px;text-align:center;font-size:23px}
.controls{display:flex;gap:8px;justify-content:center;margin:12px 0}
.status{min-height:54px;font-size:17px;margin:10px 0;color:var(--green)}
.scoreline{display:flex;justify-content:space-between;gap:10px;font-size:16px}
.scoreline strong{font-size:28px}
progress{width:100%;height:10px;accent-color:var(--green)}
.notebook{border:1px solid var(--line);background:#fbf8f0;border-radius:10px;padding:22px;min-height:280px}
.notebook h2{font-size:22px;font-weight:normal;margin:0 0 16px}
.words{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.words li{background:#e3e9d8;border-radius:20px;padding:3px 13px;font-size:16px}
.empty{font-size:16px;color:#76796c}
.reveal{margin-top:22px;font-size:15px}
.answers{white-space:pre-wrap;font-size:16px}
.cat-stage{height:225px;position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.cat-stage img{height:225px;max-width:100%;display:block;margin:auto;transition:transform .7s}
.cat-stage.wake-1 img{transform:translateY(-2px)}
.cat-stage.wake-2 img{transform:translateY(-5px) rotate(-2deg)}
.cat-stage.wake-3 img{transform:translateY(-9px) rotate(2deg)}
.cat-stage.wake-4 img{transform:translateY(-14px) scale(1.03)}
.cat-stage.wake-5 img{transform:translateY(-18px) rotate(-3deg)}
.cat-stage.wake-6 img{transform:translateY(-23px) scale(1.06)}
.cat-stage.lost{overflow:visible}
.cat-stage.lost img{position:relative;z-index:1;animation:cat-walk 5s ease-in-out forwards}
.cat-stage.asleep{overflow:visible}
.cat-stage.asleep img{position:relative;z-index:1;pointer-events:none;transform:translateY(105px);animation:breathing 4s ease-in-out infinite}
.cat-stage.won img{transform:translateY(-8px)}
.wake-label,.attempts-label{position:absolute;top:10px;font-size:14px;color:var(--purple)}
.wake-label{right:8px}
.attempts-label{left:8px}
.phrase{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:28px 0;min-height:80px}
.phrase-word{display:flex;gap:4px}
.letter{display:inline-flex;min-width:25px;height:42px;justify-content:center;align-items:center;border-bottom:2px solid #ae9e8c;font-size:24px}
.keyboard{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.keyboard button{width:47px;font-size:21px;padding:5px}
.keyboard button.used{background:#e7dfd1}
.sound{font-size:15px}
.terminal{padding:14px;border:1px solid var(--line);background:#e8e3ee;border-radius:9px}
.hidden{display:none}
@keyframes cat-walk{0%{transform:translateX(-30%) translateY(-10px)}
25%{transform:translateX(25%) translateY(-15px) rotate(-4deg)}
50%{transform:translateX(-8%) translateY(-6px) rotate(3deg)}
70%{transform:translateX(0) translateY(90px)}
100%{transform:translateY(105px)}
}
@keyframes breathing{50%{transform:translateY(103px) scale(1.015)}
}
@media(max-width:650px){header,main,footer{padding-inline:20px}
header{padding-block:18px}
.brand{font-size:19px}
.dedication{font-size:12px}
.intro{padding:35px 0 28px}
.intro h1{font-size:43px}
.intro>p:not(.eyebrow){font-size:16px}
.doodle{font-size:70px;left:10px;top:28px}
.games th{padding:10px 5px}
.games td{padding:24px 5px}
.games td:first-child{padding-inline-start:5px;width:45%}
.games img{position:static;display:block;width:110px;height:110px;margin:0 auto 6px}
.games h2{font-size:23px}
.games .tag{font-size:12px}
.games p{font-size:15px}
.games .button{font-size:14px;padding:10px;gap:4px;width:100%}
.games .button span{display:none}
.play-layout{grid-template-columns:1fr;gap:22px}
.game-heading h1{font-size:37px}
.toolbar{gap:7px}
.toolbar button{padding:8px 10px;font-size:15px}
.notebook{min-height:160px}
.phrase-word{gap:3px}
.letter{min-width:22px}
.keyboard{gap:6px}
.keyboard button{width:45px}
.footnote{font-size:13px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.cat-stage.lost img{transform:translateY(8px)}
}

header a { display:inline-flex; align-items:center; min-height:44px; }
.cat-stage.asleep + .scoreline, .cat-stage.lost + .scoreline { position:relative; top:-160px; }

/* Phone play area: keep the phrase and full-size keys above secondary controls. */
@media(max-width:650px){
.cat-game header{padding-block:4px;gap:0 8px}
.cat-game header .brand{font-size:17px}
.cat-game header .brand img{width:28px;height:28px}
.cat-game header .back{font-size:13px}
.cat-game main{display:flex;flex-direction:column;padding-inline:12px}
.cat-game .game-heading{padding:4px 0}
.cat-game .game-heading h1{font-size:28px;margin:4px 0}
.cat-game .game-heading p{display:none}
.cat-game details{margin:4px 0;padding:0}
.cat-game .toolbar{order:1;margin:12px 0}
.cat-game .play-layout{padding:4px 0 0;gap:6px}
.cat-game .cat-stage,.cat-game .cat-stage img{height:var(--cat-height,108px)}
.cat-game .cat-stage img{width:auto;object-fit:contain}
.cat-game .wake-label,.cat-game .attempts-label{top:2px}
.cat-game .phrase{margin:8px 0;min-height:42px;gap:8px 12px}
.cat-game .status{min-height:28px;margin:4px 0;font-size:16px}
.cat-game .notebook{padding:8px;min-height:0}
.cat-game .notebook h2{font-size:18px;margin:0 0 6px}
.cat-game .notebook .empty{display:none}
.cat-game .keyboard button{width:45px;min-height:46px;font-size:21px}
.cat-game .cat-stage.asleep + .scoreline,.cat-game .cat-stage.lost + .scoreline{top:0}
}
@media(max-width:350px){
.cat-game main{padding-inline:8px}
.cat-game .notebook{padding:4px}
.cat-game .keyboard{gap:3px}
}