*{box-sizing:border-box}body{margin:0;color:#f6ecd5;background:#bacaab;font-family:Georgia,'Times New Roman',serif;min-height:100vh}body:before{content:'';position:fixed;inset:0;background:linear-gradient(100deg,#102d29ed,#142b279c);z-index:-1}main{max-width:1320px;margin:auto;padding:25px 32px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.eyebrow{font:12px Arial,sans-serif;letter-spacing:3px;color:#e9ce94}h1{font-weight:400;font-size:clamp(25px,3vw,42px);margin:8px 0}h2{font-size:30px;font-weight:400;margin:0 0 10px}p{line-height:1.6}button{font:16px Georgia,serif;cursor:pointer;border:1px solid #dec99565;border-radius:9px;background:#27463dd9;color:#fff1d3;padding:11px 17px;transition:background .2s,transform .2s}button:hover{background:#476348}button:focus-visible,input:focus-visible{outline:3px solid #f8d785;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}.sound{display:flex;align-items:center;gap:10px}.sound input{width:85px;accent-color:#e9ce94}.panel{background:#f6efdfeF;color:#334737;padding:25px 30px;border-radius:18px;box-shadow:0 20px 70px #00181066}.intro{text-align:center}.intro p{margin:0 0 19px}.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.cat{background:#e4dcc755;border:1px solid #85977c40;color:#364b39;padding:6px;border-radius:12px;min-width:0}.cat:hover{background:#d9dfc9}.cat[aria-pressed=true]{background:#e7d8ab;border:2px solid #8b6e38;box-shadow:0 4px 14px #71542a22}.cat canvas{width:100%;height:120px;object-fit:contain;display:block}.cat span{display:block;font-size:14px;padding:6px 0}.start-row{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:18px}.start-row p{font-size:15px;margin:0}.primary{background:#e6bf72;color:#2b3a2c;border:1px solid #b5914c;font-size:19px;padding:14px 28px;box-shadow:0 4px 12px #172a1920}.primary:hover{background:#f4d494}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.board{position:relative;background:#e6dcc1;border:7px solid #c7b486;border-radius:15px;overflow:hidden;box-shadow:0 20px 60px #001b1680}#game{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;outline:none}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding-top:15px;font-size:15px}footer b{letter-spacing:3px}small{display:block;font-size:14px;opacity:.8;margin-top:7px}.arrows{display:grid;grid-template-columns:repeat(3,40px);gap:4px}.arrows button{padding:6px}.arrows button:first-child{grid-column:2}.arrows button:nth-child(2){grid-column:1}.result{position:absolute;inset:0;display:grid;place-items:center;background:#173b326e;backdrop-filter:blur(4px);text-align:center}.result[hidden],[hidden]{display:none!important}.result>div{background:#f9efda;color:#344b3b;padding:35px;border-radius:20px;max-width:90%;box-shadow:0 12px 50px #122b3250}.result button{margin:7px}#result-icon{font-size:45px;color:#b39344}#loading:empty{display:none}@media(max-width:850px){main{padding:16px}.cats{grid-template-columns:repeat(4,1fr)}.cat canvas{height:100px}.panel{padding:20px}.sound{flex-direction:column}header{gap:10px}footer{flex-wrap:wrap}#hint{display:none}}@media(max-width:480px){.cats{grid-template-columns:repeat(3,1fr);gap:7px}.cat canvas{height:80px}.cat span{font-size:12px}.start-row{align-items:stretch;flex-direction:column}h2{font-size:24px}.toolbar button{font-size:14px;padding:9px}.panel{padding:16px}.eyebrow{font-size:10px}h1{font-size:26px}.sound button{font-size:14px;padding:8px}}
/* The clearing uses soft meadow colours and a low-angle diorama. */
body{color:#354d40;background:radial-gradient(ellipse at 20% 0%,#f3edca 0,transparent 55%),linear-gradient(140deg,#d7e4cb,#aabfa5);background-attachment:fixed}body:before{background:linear-gradient(180deg,#ffffff08,#526c5920)}main{max-width:1400px;padding:20px 32px}header{margin-bottom:18px}.eyebrow{color:#647d63;letter-spacing:2.5px}h1{font-size:clamp(25px,3vw,37px);color:#344d3c}button{background:#edf1ddcc;color:#354f3b;border:1px solid #7b937250;box-shadow:0 3px 10px #41543b09}button:hover{background:#fff7df;transform:translateY(-1px)}.sound input{accent-color:#778f66}.panel{max-width:1050px;margin:30px auto;background:#f3f1e4bd;border:1px solid #ffffff90;box-shadow:0 16px 60px #4d634422;backdrop-filter:blur(12px);padding:30px 38px;border-radius:24px}.intro p{color:#63745b}.cats{grid-template-columns:repeat(6,1fr);gap:14px;margin-top:26px}.cat{position:relative;background:radial-gradient(ellipse at 50% 75%,#c5d4af5c,transparent 70%);border:1px solid #79966d26;box-shadow:none;padding:10px 4px;border-radius:18px}.cat canvas{height:145px}.cat[aria-pressed=true]{background:radial-gradient(ellipse at 50% 75%,#e2d596b0,#f7edc64d);border:2px solid #a48b4e;box-shadow:0 6px 18px #7f814b24}.cat:hover{background-color:#ffffff44}.start-row{padding-top:10px}.start-row p{color:#64755e}.primary{color:#344937;background:#e5d297;border-color:#bba664;box-shadow:0 5px 15px #657a4630}.primary:hover{background:#f5e3ae}.board{background:#bacaab;border:1px solid #eff4df;border-radius:24px;box-shadow:0 18px 55px #3b583629}#game{max-height:75vh}.toolbar{color:#4e674c;margin-bottom:12px}.toolbar button{background:#edf1dda6}.toolbar #turn{font-variant-numeric:tabular-nums}footer{color:#4a6248}.result{background:#354e3b40}.result>div{background:#f6f3e5f5;box-shadow:0 20px 50px #254e3533}footer small{font-size:13px;letter-spacing:0;line-height:1.5}.arrows button{min-height:35px}button:focus-visible,input:focus-visible{outline-color:#8b7232}
@media(max-width:850px){main{padding:16px}.cats{grid-template-columns:repeat(4,1fr)}.cat canvas{height:120px}.panel{padding:24px;margin:15px auto}.board{border-radius:16px}header{margin-bottom:14px}}@media(max-width:480px){.cats{grid-template-columns:repeat(3,1fr);gap:9px}.cat canvas{height:100px}.panel{padding:20px 15px}.cat{padding:8px 3px}header .eyebrow{font-size:10px}h1{font-size:25px}footer small{max-width:235px}.toolbar button{padding:9px;font-size:14px}}
/* The painted curtain halves are animated independently over the game. */
.theatre-pending main{visibility:hidden}.intro-active{overflow:hidden}.theatre{position:fixed;inset:0;z-index:1000;overflow:hidden;perspective:1100px;isolation:isolate}.theatre-lens{position:absolute;inset:0;transform:scale(1);transform-origin:50% 48%;transition:transform 2.2s cubic-bezier(.2,.55,.3,1);will-change:transform}.approaching .theatre-lens{transform:scale(1.14)}.curtain{position:absolute;top:0;bottom:0;width:calc(50% + 1px);background-color:#501923;background-image:url('assets/curtain.png');background-repeat:no-repeat;background-size:200% 100%;box-shadow:0 0 40px #18070a99;will-change:transform;transition:transform 2.5s cubic-bezier(.65,0,.2,1)}.curtain-left{left:0;background-position:left center;transform-origin:left center}.curtain-right{right:0;background-position:right center;transform-origin:right center}.opening .curtain-left{transform:translateX(-106%) scaleX(.86) rotateY(8deg)}.opening .curtain-right{transform:translateX(106%) scaleX(.86) rotateY(-8deg)}.skip-intro{position:absolute;right:max(24px,env(safe-area-inset-right));bottom:max(25px,env(safe-area-inset-bottom));color:#f5e5c2;background:#25101375;border:1px solid #e9c98d70;border-radius:24px;padding:11px 22px;font-size:16px;box-shadow:0 2px 15px #170b0c44;backdrop-filter:blur(5px)}.skip-intro:hover{background:#432026d9}.skip-intro:focus-visible{outline:2px solid #f8e5ae;outline-offset:4px}.intro-active main{transform:scale(.96);filter:blur(3px);opacity:.7}.intro-active.intro-reveal main{transform:scale(1);filter:blur(0);opacity:1;transition:transform 2.6s ease-out,filter 2s ease-out,opacity 2s ease-out}@media(prefers-reduced-motion:reduce){.theatre .theatre-lens{transform:none!important}.theatre .curtain{transition:transform 2.5s cubic-bezier(.65,0,.2,1)!important;opacity:1}.theatre.opening .curtain-left{transform:translateX(-106%)}.theatre.opening .curtain-right{transform:translateX(106%)}.theatre-pending main{visibility:visible}.intro-active main{transform:none;filter:none;opacity:1;transition:none}.theatre-lens,.curtain{transition:none}}
@font-face{font-family:'Balsamiq Sans';src:url('assets/fonts/BalsamiqSans-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Balsamiq Sans';src:url('assets/fonts/BalsamiqSans-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
body,button,input,.eyebrow{font-family:'Balsamiq Sans',Arial,sans-serif}h1,h2,button{font-family:'Balsamiq Sans',Arial,sans-serif;font-weight:700}h1{letter-spacing:.01em;line-height:1.2}h2{line-height:1.25}.eyebrow{font-size:14px;letter-spacing:1.5px}button{border-radius:16px;min-height:44px}.primary{font-size:21px;border-radius:20px}.skip-intro{font-family:'Balsamiq Sans',Arial,sans-serif}footer small{font-size:14px;line-height:1.5}

.open-curtain{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);font-family:'Balsamiq Sans',Arial,sans-serif;font-size:clamp(22px,4vw,34px);font-weight:700;padding:18px 32px;border:1px solid #f5dfad;background:#efdab0;color:#542431;border-radius:28px;box-shadow:0 8px 35px #18070960;max-width:85vw;white-space:nowrap}.open-curtain:hover{background:#fff0cf;transform:translate(-50%,-50%)}.gentle .theatre-lens{transform:none!important}.gentle .curtain{opacity:1}.gentle.opening .curtain-left{transform:translateX(-106%)}.gentle.opening .curtain-right{transform:translateX(106%)}