:root { --ink: #333431; --cream: #faf0dd; --sun: #e4cfa0; --orange: #ae6844; --blue: #77bedc; --red: #b64c3c; }
body { overflow: auto; background: radial-gradient(ellipse at 50% 40%, #c6bfb2, #a69e94); font-family: "Chalkboard SE", "Comic Sans MS", "Segoe Print", cursive, system-ui; }
.app { width: min(1200px, 100%); height: auto; min-height: 100svh; padding: 20px 28px; display: grid; grid-template-columns: 190px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 16px 24px; align-content: center; }
.hud { grid-column: 1 / -1; grid-template-columns: 200px minmax(120px, 1fr) 70px 64px; align-items: center; gap: 18px; }
.brand { font-size: 26px; font-weight: 900; letter-spacing: -1.2px; transform: rotate(-2deg); }
.brand span { display: block; font-size: 13px; font-weight: 500; letter-spacing: 0; margin-top: 4px; }
.language-select { margin-left:5px; padding:3px 5px; border:2px solid #4e4d45; border-radius:8px; background:#fff4df; color:#333431; font:700 11px system-ui; vertical-align:middle; cursor:pointer; transform:rotate(2deg); }
.language-select:focus-visible { outline:3px solid #77bedc; outline-offset:2px; }
.air-card, .time-card { border: 0; background: none; box-shadow: none; padding: 0; }
.air-card .eyebrow { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: .03em; }
.meter-row { gap: 14px; }
.meter { height: 34px; border: 3px solid var(--ink); padding: 4px; background: #f5ebda; box-shadow: inset 0 1px 5px #56443125, 0 2px 0 #ffffff60; }
.meter-fill { background: #71bade; border-radius: 16px 12px 14px 12px; }
.air-value { font-size: 25px; min-width: 61px; font-weight: 700; }
.time-card { min-width: 0; }
.time { margin-top: 5px; font-size: 27px; }
.time-card .eyebrow { font-size: 13px; }
.pause-button { background: var(--cream); border: 3px solid var(--ink); border-radius: 18px 21px 17px 15px; height: 57px; font-size: 29px; line-height: 1; cursor: pointer; position: relative; box-shadow: 1px 3px 0 #33343125; }
.pause-button span { position: absolute; left: 0; right: 0; bottom: -20px; font-size: 13px; }
.guide { display: flex; flex-direction: column; justify-content: center; gap: 18px; font-size: 15px; line-height: 1.4; padding-top: 16px; }
.objective { background: var(--cream); padding: 16px 13px; border: 2px solid #59574e; border-radius: 16px 22px 18px 14px; box-shadow: 2px 3px 0 #33343116; transform: rotate(-1deg); }
.objective strong { display: block; font-size: 23px; margin-bottom: 4px; }
.guide-note { padding: 0 10px; }
.guide-note b { float: left; margin-right: 9px; font-size: 27px; font-weight: 500; color: #736d60; }
.guide-note strong { display: block; font-size: 18px; margin-bottom: 3px; }
.level-label { font-size: 20px; color: #fff6e6; background: #827b70; align-self: start; border-radius: 10px 13px 8px 12px; padding: 5px 12px; margin: 4px 9px 24px; transform: rotate(-2deg); position: relative; }
.level-label span { position: absolute; top: 43px; left: 3px; width: 150px; font-size: 15px; color: #5c584f; }
.room-wrap { grid-column: 2; grid-row: 2; align-self: center; min-height: 0; width: 100%; }
.room { --room-art:url('assets/salotto.webp'); width: min(100%, calc(100svh - 200px)); height: auto; aspect-ratio: 1; min-height: 0; max-height: none; border: 0; border-radius: 3px; background: var(--room-art) center / 100% 100% no-repeat; overflow: hidden; box-shadow: 0 12px 24px #3d30262b; }
.brand small { display:inline-block; vertical-align:middle; font:600 13px system-ui; letter-spacing:0; padding:4px 6px; background:var(--cream); border-radius:8px; }
.level-intro { position:absolute; top:24%; left:10%; width:80%; z-index:15; background:#fff3dbea; border:2px solid #47483e; border-radius:18px; padding:15px; text-align:center; box-shadow:0 5px 15px #0003; }
.level-intro[hidden] { display:none; }
.level-intro strong { font-size:22px; }.level-intro p { margin:8px 0 12px; }.level-intro .primary { padding:10px 16px; font-size:17px; }
.rug, .furniture { display: none; }
.cat-wrap { width: 11%; min-width: 48px; max-width: 100px; }
.cat { display: block; position: relative; z-index: 1; filter: drop-shadow(2px 4px 2px #47332240); animation: none; }
.cat-wrap .alert { z-index: 2; }
.cat-wrap .alert { transform: translateX(-50%) scale(.8); color: #6b7759; font-size: 19px; }
.cat-wrap .alert[hidden] { display:none; }
.cat-wrap[data-mode="look"] .alert, .cat-wrap[data-mode="investigate"] .alert { color: #876326; background: #ffe5a5; transform: translateX(-50%) scale(1); }
.cat-wrap[data-mode="warn"] .cat { transform: scaleY(.83) scaleX(1.08); }
.cat-wrap.chasing .alert { color: #a83c2d; background: #ffdbba; }
.cat-wrap.charging .alert, .cat-wrap.turbo .alert { color: #6d3783; background: #f1d2ff; }
.cat-wrap.charging .cat { transform: scaleY(.76) scaleX(1.14); }
.speed-lines { display: none; position: absolute; inset: 0; transform: rotate(var(--cat-heading)); font: bold 28px/1 system-ui; color: #fff6db; text-shadow: 0 1px #a27d53; text-align: center; padding-top: 83%; }
.cat-wrap.turbo .speed-lines { display: block; }
.cat-wrap.in-box .cat { opacity: 1; transform: translateY(-24%) scale(.72); filter: none; }
.cat-wrap.in-box .alert { left: 0; }
.toy.occupied { z-index: 7; animation: none; }
.bird { position: absolute; top: 9%; width: 8%; min-width: 30px; transform: translateX(-50%); z-index: 9; pointer-events: none; }
.bird[hidden], .yarn-aim[hidden] { display:none; }
.bird svg { overflow:visible; stroke:#363b33; stroke-width:2; stroke-linejoin:round; }
.bird-wing { transform:rotate(var(--wing-angle,0deg)); transform-origin:44px 40px; }
.bird span { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:11px; padding:1px 5px; white-space:nowrap; background:#fff4db; border:1px solid #72664b; border-radius:8px; }
.yarn-aim { position:absolute; z-index:9; transform:translate(-50%,-50%); color:#934d36; font:32px system-ui; pointer-events:none; }
.yarn-aim span { position:absolute; top:100%; left:50%; transform:translateX(-50%); white-space:nowrap; font:12px system-ui; padding:3px 5px; background:#fff3d7; border-radius:5px; }
.hideout-foreground { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; background: var(--room-art) center / 100% 100% no-repeat; }
.room[data-hideout="island"] .hideout-foreground { display:block; clip-path:polygon(42.1% 35.5%,70.2% 35.5%,70.2% 49%,69.4% 55.4%,43% 55.4%,42.1% 49%); }
.room[data-hideout="cupboard"] .hideout-foreground { display:block; clip-path:polygon(73.5% 71%,93% 71%,93% 85.2%,74% 85.2%); }
.room[data-hideout="island"] .cat-wrap .alert,.room[data-hideout="cupboard"] .cat-wrap .alert { left:0; }
.room[data-hideout="sofa"] .hideout-foreground { display: block; clip-path: polygon(34% 53%, 34.5% 52%, 36% 51.8%, 37% 52.8%, 60% 52.8%, 60.5% 52%, 62% 51.8%, 63.4% 52.5%, 63.6% 62%, 62.5% 65.9%, 59% 65.9%, 58.5% 66.7%, 51% 66.7%, 50.8% 65.9%, 36% 65.9%, 34% 62.5%); }
.room[data-hideout="table"] .hideout-foreground { display: block; clip-path: ellipse(8.45% 9.05% at 83.2% 56.5%); }
.room[data-hideout] .status-bubble { z-index: 9; }
.room[data-hideout="sofa"] .cat-wrap .alert, .room[data-hideout="table"] .cat-wrap .alert { left: 0; }
.mood-card { position: absolute; top: 3%; left: 50%; transform: translateX(-50%); z-index: 8; padding: 5px 11px; border: 2px solid #66664f; border-radius: 12px; background: #fff4dfef; color: #536246; font-size: clamp(11px, 1.6vw, 16px); white-space: nowrap; pointer-events: none; }
.mood-card.urgent { color: #9c3025; border-color: #9c3025; background: #ffdec2; }
.toy.bored::before { content: attr(data-bored-label); position: absolute; z-index: 3; bottom: -13px; left: 50%; transform: translateX(-50%); background: #fff0cd; color: #8f3d2d; padding: 1px 5px; border: 1px solid #8f3d2d; border-radius: 7px; font-size: 11px; }
.cat-shadow { position: absolute; left: 29%; top: 53%; width: 42%; height: 17%; border-radius: 50%; background: #3c3023; opacity: var(--shadow-opacity, .22); transform: scale(var(--shadow-scale, 1)); filter: blur(2px); pointer-events: none; }
.alert { background: var(--cream); color: #c3503b; border-radius: 50% 50% 50% 10%; }
.toy { width: 8%; min-width: 42px; max-width: 72px; border: 0; background: transparent; box-shadow: none; filter: drop-shadow(0 4px 2px #42312244); }
.toy-icon { font-size: 0; width: 100%; height: 100%; background: url('assets/giochi.webp') 0 50% / 300% 100% no-repeat; }
#toyMouse .toy-icon { background-position-x: 50%; }
#toyBox .toy-icon { background-position-x: 100%; }
.toy::after { content: ''; position: absolute; inset: -3px; border: 2px dashed #fff9e6b0; border-radius: 50%; pointer-events: none; }
.toy.cooling::after { border-color: transparent; }
.toy.cooling { filter: grayscale(.55) drop-shadow(0 4px 2px #42312244); opacity: .7; }
.toy.active { background: none; filter: drop-shadow(0 0 5px #fff3c3); }
.toy.dragging { background: #fff9e62b; box-shadow: 0 10px 14px #3e302b30; }
.toy-cooldown { right: -4px; top: -4px; background: var(--cream); }
.window { top: 3%; left: 11%; width: 16%; height: 13.5%; right: auto; padding:0; border:3px solid #eee8d7; border-radius:1px; background:#efe8d8; box-shadow:0 0 0 1.5px #44483c,0 3px 0 2px #efe8d7; overflow:visible; perspective:350px; transform-style:preserve-3d; }
.window-right { left:73%; }
.room[data-level="1"] .window { height:11.5%; }
.room[data-level="2"] .window,.room[data-level="3"] .window,.room[data-level="4"] .window { height:12%; }
.window:active { transform: none; box-shadow: none; }
.window.open { background:#efe8d8; box-shadow:0 0 0 1.5px #44483c,0 3px 0 2px #efe8d7; }
.window-view { position:absolute; inset:0; overflow:hidden; background:radial-gradient(ellipse at 22% 21%,#fff9e5 0 9%,transparent 10%),radial-gradient(ellipse at 70% 95%,#688c55 0 41%,transparent 42%),radial-gradient(ellipse at 10% 110%,#98ae67 0 50%,transparent 51%),linear-gradient(#91cbe0 0%,#c4e9eb 70%,#9eae6d 71%); }
.room[data-level="1"] .window-view { background:radial-gradient(circle at 76% 24%,#ffe5a2 0 12%,transparent 13%),radial-gradient(ellipse at 10% 110%,#7f9e5e 0 54%,transparent 55%),linear-gradient(#9ed5dc 0%,#e7efcd 70%,#b2bc79 71%); }
.window-leaf { position:absolute; top:0; width:50%; height:100%; border:3px solid #f7f0dd; outline:1px solid #565b4d; background:linear-gradient(115deg,#c5e6eca6 0 28%,#fff9dfbb 29% 34%,#80b7d5c9 35% 70%,#d9f0eeaa 71%); box-shadow:inset 0 0 0 1px #687f83,2px 2px 3px #0003; backface-visibility:visible; }
.window-leaf::before { content:''; position:absolute; left:0; right:0; top:48%; height:3px; background:#f7f0dd; box-shadow:0 1px #5f6e64; }
.window-leaf::after { content:''; position:absolute; top:57%; width:3px; height:12%; border-radius:2px; background:#666151; }
.leaf-left { left:0; transform-origin:left center; transform:rotateY(calc(-1 * var(--leaf-angle,0deg))); }.leaf-left::after { right:3px; }
.leaf-right { right:0; transform-origin:right center; transform:rotateY(var(--leaf-angle,0deg)); }.leaf-right::after { left:3px; }
.window-label { position: absolute; top: 117%; left: 50%; transform: translateX(-50%); border: 1.5px solid #4d4c41; background: var(--cream); border-radius: 9px 7px 10px 8px; padding: 2px 10px; font-size: 14px; white-space: nowrap; box-shadow: 0 2px 0 #0002; }
.window.open .window-label { background: #bce6ef; }
.airflow-top { top: 17%; left: 13%; width: 13%; height: 22%; }
.airflow-right { top: 17%; left: 76%; right: auto; width: 12%; height: 22%; transform: none; }
.airflow i { border-radius: 70% 40%; width: 6px; height: 35px; background: #99e1ffb3; }
.status-bubble { bottom: 8%; font-weight: 500; border-width: 2px; border-radius: 12px 15px 11px 14px; font-size: 15px; box-shadow: 0 3px 0 #40382e26; pointer-events: none; }
.controls { grid-column: 2; justify-self: stretch; width: min(100%, calc(100svh - 200px)); align-items: center; margin-top: -4px; }
.tip-card { background: none; border: 0; box-shadow: none; min-height: 40px; font-size: 17px; font-weight: 600; padding: 0; }
.tip-card .sub { font-size: 13px; font-weight: 500; }
.restart { width: 47px; min-height: 43px; border-width: 2px; border-radius: 13px 10px 14px 11px; box-shadow: 0 2px 0 #33343130; }
.overlay { background: #4a443755; backdrop-filter: blur(2px); }
.panel { background: #fff4df; border: 3px solid #3c3c33; border-radius: 24px 32px 22px 29px; box-shadow: 3px 9px 0 #3a352440; }
.logo { text-transform: none; letter-spacing: -.055em; }
.primary { background: #71856a; text-transform: none; letter-spacing: 0; border-radius: 13px 17px 11px 15px; box-shadow: 0 4px 0 #333431; }
.mini-rule { background: #efe2c6; border-color: #655d4b; }
.paused .cat, .paused .alert, .paused .toy, .paused .airflow i { animation-play-state: paused; }

.primary:disabled { cursor: wait; opacity: .62; transform: none; box-shadow: 0 3px 0 #333431; }
.secondary { display:block; margin:12px auto 0; padding:8px 12px; border:0; background:transparent; color:#545247; text-decoration:underline; cursor:pointer; }
.secondary[hidden] { display:none; }
.save-note { margin:8px auto 12px !important; padding:7px 10px; border:1px solid #817866; border-radius:10px; background:#efe4cc; font-size:13px !important; }
.language-picker { display:flex; justify-content:center; align-items:center; gap:8px; margin:4px auto -4px; color:#5d594f; font:700 13px system-ui; }
.language-picker select { padding:5px 8px; border:2px solid #655d4b; border-radius:9px; background:#fffaf0; color:#333431; font:700 13px system-ui; }
.legal-links { margin:13px auto 0 !important; font-size:12px !important; }
.legal-links a { color:#5d6257; }
.result-stars { margin:-4px 0 8px; color:#d9932f; font-size:34px; letter-spacing:5px; text-shadow:0 2px #775728; }
.support-link { display:block; margin:14px auto 0; color:#5b4a35; font-weight:700; font-size:14px; }
.support-link[hidden], .result-stars[hidden] { display:none; }

/* Campaign objects are room-specific after the tutorial room. */
.room:not([data-level="0"]) .toy { width:7.3%; min-width:38px; max-width:62px; border:2px solid #4d4c41; background:#fff4dce8; box-shadow:0 4px 0 #4a40302d; filter:none; }
.room:not([data-level="0"]) .toy-icon { display:grid; place-items:center; width:100%; height:100%; background:none !important; font-size:clamp(23px,3.8vw,39px); }
.room:not([data-level="0"]) .toy.active { background:#fff0a9; }
.room:not([data-level="0"]) .toy::after { border-color:#765d3f88; }

.cat-name { position:absolute; z-index:3; left:50%; top:91%; translate:-50% 0; padding:1px 6px; border:1px solid #4b4c42; border-radius:8px; background:#fff3dcde; font:600 clamp(8px,1vw,11px)/1.35 system-ui; white-space:nowrap; opacity:.86; }
.companion.nerina .cat { filter:brightness(.43) saturate(.7) sepia(.25) hue-rotate(165deg) drop-shadow(2px 4px 2px #47332240); }
.companion.pippo .cat { filter:sepia(.82) saturate(.72) hue-rotate(338deg) brightness(.95) drop-shadow(2px 4px 2px #47332240); }
.companion { z-index:6; }

.air-hazard { position:absolute; z-index:10; width:13%; min-width:58px; aspect-ratio:1; translate:-50% -50%; border:2px solid #754437; border-radius:50% 46% 53% 45%; background:#fff0ddeb; box-shadow:0 5px 0 #56372e3d; cursor:pointer; animation:hazard-pulse .62s ease-in-out infinite alternate; }
.air-hazard[hidden] { display:none; }
.air-hazard.warning { background:#ffe3a8eb; }
.air-hazard.active { background:#ffd0c1f2; box-shadow:0 0 0 7px #d9684935,0 5px 0 #56372e3d; }
.air-hazard.resolving { pointer-events:none; animation:hazard-resolve .55s ease-in forwards; }
.hazard-icon { display:block; font-size:clamp(24px,4.2vw,42px); line-height:1; }
.hazard-action { position:absolute; left:50%; top:96%; translate:-50% 0; padding:2px 7px; border:1px solid #594c40; border-radius:8px; background:#fff6e7; font:700 clamp(8px,1.2vw,12px)/1.2 system-ui; white-space:nowrap; }
@keyframes hazard-pulse { to { transform:scale(1.08) rotate(3deg); } }
@keyframes hazard-resolve { to { opacity:0; transform:scale(.45) rotate(-8deg); } }
.soil-spill { display:none; }
.air-hazard[data-kind="soil"] { overflow:visible; border:0; background:transparent; box-shadow:none; animation:none; }
.air-hazard[data-kind="soil"].active { background:transparent; box-shadow:none; }
.air-hazard[data-kind="soil"] .hazard-icon { position:relative; z-index:2; font-size:clamp(34px,5.5vw,54px); transform-origin:55% 88%; transition:transform .34s ease,opacity .45s ease; filter:drop-shadow(0 4px 2px #3b2d2533); }
.air-hazard[data-kind="soil"].warning .hazard-icon { animation:plant-wobble .18s ease-in-out infinite alternate; }
.air-hazard[data-kind="soil"].active .hazard-icon { transform:translate(17%,18%) rotate(72deg); }
.air-hazard[data-kind="soil"] .soil-spill { display:block; position:absolute; z-index:1; left:42%; top:61%; width:73%; height:38%; border-radius:48% 54% 43% 58%; background:radial-gradient(ellipse at 30% 45%,#9a6b42 0 9%,transparent 10%),radial-gradient(ellipse at 70% 58%,#6f482e 0 8%,transparent 9%),#765036; opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(-7deg); transform-origin:center; transition:opacity .25s ease .12s,transform .32s ease .08s; box-shadow:0 3px 3px #35251b3d; }
.air-hazard[data-kind="soil"].active .soil-spill { opacity:.94; transform:translate(-50%,-50%) scale(1) rotate(-7deg); }
.air-hazard[data-kind="soil"].resolving { animation:none; }
.air-hazard[data-kind="soil"].resolving .hazard-icon { transform:translate(17%,18%) rotate(72deg) scale(.85); opacity:.45; }
.air-hazard[data-kind="soil"].resolving .soil-spill { opacity:0; transform:translate(-50%,-50%) scale(.08) rotate(-7deg); transition:opacity .5s ease,transform .5s ease; }
.air-hazard[data-kind="soil"] .hazard-action { z-index:3; top:103%; }
@keyframes plant-wobble { from { transform:rotate(-7deg); } to { transform:rotate(8deg); } }
.air-card.danger .meter { border-color:#9b4135; box-shadow:inset 0 1px 5px #7b2c2525,0 0 0 5px #c95a4330; }
.air-card.danger .meter-fill { background:linear-gradient(90deg,#cf7056,#d89a59); }
.room.hazard-active::after { content:''; position:absolute; z-index:2; inset:0; pointer-events:none; background:radial-gradient(circle at var(--hazard-x,50%) var(--hazard-y,50%),#8c6b5548 0 4%,transparent 26%); animation:haze 1.6s ease-in-out infinite alternate; }
@keyframes haze { to { opacity:.45; filter:blur(4px); } }

@media (max-width:760px) {
  .cat-name { display:none; }
  .air-hazard { min-width:48px; }
  .hazard-action { font-size:8px; }
}
@media (max-width: 760px) {
  .app { padding: max(12px, env(safe-area-inset-top)) 8px 16px; min-height: 100svh; grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; gap: 13px; align-content: start; }
  .hud { grid-template-columns: minmax(0, 1fr) 46px 44px; gap: 10px; padding: 0 8px; }
  .brand { grid-column: 1 / -1; text-align: center; font-size: 28px; }
  .brand span { display: none; }
  .air-card .eyebrow { font-size: 17px; text-align: left; }
  .air-value { font-size: 20px; min-width: 44px; }
  .meter-row { gap: 7px; }.meter { height: 27px; }
  .time { font-size: 22px; }.time-card .eyebrow { font-size: 12px; }
  .pause-button { height: 44px; font-size: 23px; }.pause-button span { font-size: 12px; bottom: -18px; }
  .guide { display: none; }
  .room-wrap { grid-column: 1; grid-row: 2; margin-top: 10px; }
  .room { width: 100%; }
  .controls { grid-column: 1; width: 100%; padding: 0 8px; }
  .tip-card { font-size: 16px; }.tip-card .sub { font-size: 12px; }
  .window { min-height: 38px; }.window-label { font-size: 12px; padding: 1px 6px; }
  .status-bubble { bottom: 6%; font-size: 13px; padding: 5px 9px; }
  .toy { min-width: 37px; }.alert { width: 25px; height: 25px; font-size: 17px; top: -12px; }
}
@media (min-width: 761px) and (max-height: 740px) { .app { min-height: 740px; }.room, .controls { width: min(100%, 570px); } }