@import url("../shared/solo.css");

:root {
  --bg: #f1d9ad;
  --panel: #fff8e8;
  --panel-2: #47231d;
  --text: #39231d;
  --muted: #785b4c;
  --accent: #e5b841;
  --accent-2: #ba3f2f;
  --danger: #c9372d;
  --shadow: 5px 5px 0 rgba(61, 30, 23, .18);
}

body {
  background:
    radial-gradient(circle at 50% -15%, rgba(255,255,255,.85), transparent 43%),
    repeating-linear-gradient(90deg, rgba(104,57,37,.035) 0 1px, transparent 1px 34px),
    #f1d9ad;
}

.game-shell { width: min(100%, 52rem); }
.game-header { border-color: rgba(88,49,37,.3); }
.game-header h1, .metric-value { color: #48241d; }
.scorebar { border-color: rgba(88,49,37,.34); }
.lives { color: #b8392e; letter-spacing: .12em; }
.dock-stage { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: .35rem; place-items: center; }
.instruction, .announcer { margin: 0; color: #65483d; font-size: clamp(.75rem, 2.4vw, .92rem); font-weight: 750; text-align: center; }
.announcer { min-height: 1.25em; color: #a0362d; }

.room-scene {
  position: relative;
  width: min(100%, 42rem);
  height: 100%;
  min-height: 15rem;
  overflow: hidden;
  border: .2rem solid #4a281f;
  border-radius: 1rem;
  background:
    linear-gradient(to bottom, transparent 0 66%, rgba(83,43,29,.13) 66% 67%, transparent 67%),
    repeating-linear-gradient(100deg, #b77843 0 2.5rem, #a9673b 2.5rem 2.65rem, #c1834d 2.65rem 5.2rem);
  box-shadow: inset 0 0 2rem rgba(65,31,21,.16), var(--shadow);
  touch-action: none;
  outline: none;
  isolation: isolate;
}
.room-scene:focus-visible { outline: .25rem solid #ba3f2f; outline-offset: .15rem; }
.wallpaper { position: absolute; z-index: -3; inset: 0 0 33%; background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.55), transparent 35%), repeating-linear-gradient(90deg, transparent 0 3.5rem, rgba(125,74,43,.07) 3.5rem 3.65rem), #ecd2a4; }
.wallpaper::after { content: ""; position: absolute; inset: 0; opacity: .22; background: radial-gradient(ellipse at 50% 100%, transparent 0 60%, rgba(124,72,38,.22) 61% 62%, transparent 63%); background-size: 6rem 4rem; }
.baseboard { position: absolute; z-index: -2; left: 0; right: 0; top: 62%; height: 6%; border-block: .18rem solid #633725; background: linear-gradient(#fff1cf, #c78e58); box-shadow: 0 .25rem .45rem rgba(63,31,20,.22); }

.clock-case { position: absolute; z-index: 1; top: 1.5%; left: 50%; width: min(38%, 14rem); height: 86%; filter: drop-shadow(.4rem .55rem .35rem rgba(54,27,20,.25)); transform: translateX(-50%); pointer-events: none; }
.clock-crown { position: absolute; z-index: 1; inset: 0 4% auto; height: 13%; border: clamp(.18rem, .7cqw, .32rem) solid #321914; border-bottom: 0; border-radius: 52% 52% 8% 8% / 75% 75% 10% 10%; background: linear-gradient(115deg, #8e4a2d, #4e251d 58%, #733923); }
.clock-crown::before, .clock-crown::after { content: ""; position: absolute; bottom: -7%; width: 15%; height: 33%; border: .16rem solid #321914; border-radius: 50%; background: #a75a32; }
.clock-crown::before { left: -5%; transform: rotate(-22deg); }.clock-crown::after { right: -5%; transform: rotate(22deg); }
.clock-crown span { position: absolute; inset: 22% 38%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f9d66c, #a76821 66%, #634014 68%); box-shadow: inset 0 0 0 .12rem #4d2c16; }
.clock-neck { position: absolute; z-index: 2; top: 7%; left: 11%; width: 78%; height: 12%; border: clamp(.18rem, .7cqw, .32rem) solid #321914; border-radius: 1rem 1rem .4rem .4rem; background: linear-gradient(90deg, #713722, #a55d34 42%, #713722); }
.clock-body { position: absolute; inset: 10% 14% 4%; border: clamp(.2rem, .75cqw, .34rem) solid #321914; border-radius: 18% 18% 8% 8% / 11% 11% 5% 5%; background: linear-gradient(90deg, #54291e, #9c5430 18%, #6e351f 50%, #a05a34 82%, #51261c); box-shadow: inset 0 0 0 .25rem rgba(231,161,79,.2); }
.clock-body::before, .clock-body::after { content: ""; position: absolute; top: 41%; bottom: 4%; width: 8%; border-radius: 99px; background: linear-gradient(90deg, #321712, #8d4829 60%, #3b1a14); }
.clock-body::before { left: 6%; }.clock-body::after { right: 6%; transform: scaleX(-1); }
.clock-face { position: absolute; z-index: 3; top: 4%; left: 50%; width: 91%; aspect-ratio: 1; overflow: hidden; border: clamp(.22rem, 1cqw, .5rem) solid #d2a346; border-radius: 50%; background: radial-gradient(circle at 42% 32%, #fffdf0, #ecd9af 72%, #d4b576); box-shadow: 0 0 0 .18rem #3b1f18, inset 0 0 1rem rgba(77,42,26,.27); transform: translateX(-50%); }
.clock-face::before { content: ""; position: absolute; inset: 6%; border: 1px solid rgba(84,47,31,.25); border-radius: 50%; }
.minute-markers { position: absolute; inset: 4%; border-radius: 50%; background: repeating-conic-gradient(from -1deg, #5c3728 0 1.6deg, transparent 1.6deg 30deg); opacity: .8; mask: radial-gradient(circle, transparent 0 91%, #000 91%); }
.tick { position: absolute; z-index: 1; color: #4c2c22; font: 900 clamp(.48rem, 2.8cqw, .92rem)/1 Georgia, serif; }
.tick-12 { top: 7%; left: 50%; transform: translateX(-50%); }.tick-3 { top: 50%; right: 8%; transform: translateY(-50%); }
.tick-6 { bottom: 7%; left: 50%; transform: translateX(-50%); }.tick-9 { top: 50%; left: 8%; transform: translateY(-50%); }
.hand { --hand-angle: 0deg; position: absolute; z-index: 6; left: 50%; top: 50%; width: clamp(.1rem, .55cqw, .25rem); height: 28%; border-radius: 999px; background: #4f2b20; transform: translate(-50%, -100%) rotate(var(--hand-angle)); transform-origin: 50% 100%; }
.hand-minute { height: 36%; width: clamp(.08rem, .42cqw, .19rem); }.hand-second { z-index: 7; height: 41%; width: clamp(.06rem, .3cqw, .13rem); background: #bd382e; }
.clock-pin { position: absolute; z-index: 8; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; border: .1rem solid #412016; border-radius: 50%; background: #d09a3e; transform: translate(-50%, -50%); }
.clock-window { position: absolute; left: 21%; right: 21%; top: 48%; bottom: 6%; overflow: hidden; border: clamp(.16rem, .6cqw, .25rem) solid #3b1c15; border-radius: 42% 42% 13% 13% / 18% 18% 8% 8%; background: linear-gradient(115deg, rgba(187,218,214,.52), rgba(34,27,23,.5) 46%, rgba(224,187,108,.2)); }
.pendulum-rod { position: absolute; top: -4%; left: 50%; width: 4%; height: 72%; border-radius: 99px; background: linear-gradient(90deg, #7a4d17, #e0b84c, #6a4214); transform-origin: 50% 0; animation: pendulum-swing 1.5s ease-in-out infinite alternate; }
.pendulum { position: absolute; top: 54%; left: 50%; width: 36%; aspect-ratio: 1; border: .12rem solid #704719; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe78f, #bc7924 63%, #6f4314); transform-origin: 50% -100%; animation: pendulum-bob 1.5s ease-in-out infinite alternate; }
.clock-feet { position: absolute; inset: auto 10% 0; height: 8%; display: flex; justify-content: space-between; }.clock-feet span { width: 27%; border: .18rem solid #321914; border-radius: 10% 10% 50% 50%; background: #713823; }

.wild-pendulum { --pendulum-angle: 0deg; position: absolute; z-index: 6; top: 41%; left: 50%; width: clamp(.18rem, .65cqw, .32rem); height: 43%; border-radius: 999px; background: linear-gradient(90deg, #714917, #f0c85a, #694215); box-shadow: 0 .2rem .3rem rgba(43,21,14,.28); transform: translateX(-50%) rotate(var(--pendulum-angle)); transform-origin: 50% 0; pointer-events: none; }
.wild-pendulum::before { content: ""; position: absolute; top: -2%; left: 50%; width: .8rem; aspect-ratio: 1; border-radius: 50%; background: #d8a43d; transform: translateX(-50%); }
.wild-pendulum span { position: absolute; left: 50%; bottom: -6%; width: clamp(2rem, 8cqw, 3.2rem); aspect-ratio: 1; border: .18rem solid #6b4317; border-radius: 50%; background: radial-gradient(circle at 33% 28%, #ffe890, #c48426 62%, #754817); box-shadow: 0 .35rem .5rem rgba(43,21,14,.35); transform: translateX(-50%); }

.mouse-hole { position: absolute; z-index: 8; left: 2%; bottom: 3%; width: clamp(3.2rem, 13%, 5rem); aspect-ratio: 1.18; pointer-events: none; }
.hole-dark { position: absolute; inset: 5% 8% 0; border-radius: 52% 52% 12% 12% / 70% 70% 12% 12%; background: radial-gradient(ellipse at 48% 65%, #080606 0 43%, #24100d 68%, #5c2c20 70%); box-shadow: inset 0 .35rem .4rem #170b09, 0 .2rem .25rem rgba(52,25,17,.3); }
.hole-rim { position: absolute; inset: 0; border: .22rem solid #70452f; border-bottom: .38rem solid #4f3023; border-radius: 52% 52% 12% 12% / 70% 70% 12% 12%; box-shadow: inset .2rem .08rem #c49061, -.18rem 0 #a16c46; }

.prize-spot { position: absolute; z-index: 7; right: 3%; bottom: 7%; min-width: clamp(3.4rem, 14%, 5.4rem); display: grid; place-items: center; gap: .08rem; padding: .25rem; border: .12rem dashed rgba(91,51,32,.38); border-radius: 50%; background: radial-gradient(circle, rgba(255,244,184,.85), rgba(255,224,94,.22) 58%, transparent 70%); filter: drop-shadow(0 .25rem .2rem rgba(73,38,25,.22)); animation: prize-glow 1.2s ease-in-out infinite alternate; }
.prize-spot span { font-size: clamp(1.7rem, 7cqw, 3rem); line-height: 1; }.prize-spot small { color: #68402e; font-size: clamp(.46rem, 1.8cqw, .7rem); font-weight: 950; text-transform: uppercase; }
.prize-spot.collected { opacity: 0; transform: scale(.3); transition: opacity .2s ease, transform .2s ease; }
.prize-spot[data-kind="button"] span { width: clamp(1.55rem, 6cqw, 2.6rem); aspect-ratio: 1; display: grid; place-items: center; border: .18rem solid #734917; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe697, #c88a2f 62%, #75501f); color: #6a4316; font-size: 0; }
.prize-spot[data-kind="button"] span::after { content: "••"; font-size: clamp(.65rem, 2cqw, .9rem); letter-spacing: .12em; }

.mouse { position: absolute; z-index: 10; left: 4%; top: 84%; width: clamp(3rem, 12%, 5.2rem); aspect-ratio: 1; border: 0; border-radius: 48%; object-fit: cover; filter: drop-shadow(0 .2rem .14rem rgba(48,23,17,.25)); transform: translate(-50%, -50%); cursor: grab; user-select: none; -webkit-user-drag: none; transition: filter .14s ease; }
.mouse:active, .room-scene.dragging .mouse { cursor: grabbing; filter: drop-shadow(0 .25rem .17rem rgba(48,23,17,.3)) saturate(1.12); }
.mouse.sniffing { animation: mouse-sniff .42s ease-in-out infinite alternate; }.mouse.hit { animation: mouse-hit .5s ease; }
.mouse.going-home { transition: left .75s ease-in, top .75s ease-in, transform .75s ease-in; }
.carried-prize { position: absolute; z-index: 11; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; font-size: clamp(1rem, 3.5cqw, 1.55rem); filter: drop-shadow(0 .1rem .1rem rgba(0,0,0,.25)); transform: translate(-50%, -50%); pointer-events: none; }
.carried-prize[hidden] { display: none; }
.sniff-puffs { position: absolute; z-index: 12; width: 3rem; height: 2rem; pointer-events: none; transform: translate(-10%, -50%); }
.sniff-puffs[hidden] { display: none; }.sniff-puffs i { position: absolute; left: 0; top: 50%; width: .35rem; aspect-ratio: 1; border: 2px solid rgba(105,77,62,.55); border-radius: 50%; animation: sniff-puff .9s ease-out infinite; }.sniff-puffs i:nth-child(2) { animation-delay: .22s; }.sniff-puffs i:nth-child(3) { animation-delay: .44s; }

.rolling-gear { position: absolute; z-index: 9; width: clamp(1.6rem, 5.5cqw, 2.6rem); aspect-ratio: 1; display: grid; place-items: center; border: .28rem dashed #66431e; border-radius: 50%; background: radial-gradient(circle, #593617 0 18%, #d49a37 20% 52%, #765022 54%); box-shadow: 0 .25rem .25rem rgba(54,29,18,.3); transform: translate(-50%, -50%) rotate(var(--gear-turn)); }
.gear-layer { position: absolute; inset: 0; pointer-events: none; }
.level-banner { position: absolute; z-index: 20; top: 8%; left: 50%; min-width: 12rem; padding: .55rem .9rem; border: .15rem solid #583025; border-radius: 999px; background: rgba(255,248,232,.94); color: #563027; box-shadow: .25rem .3rem 0 rgba(64,31,22,.17); font-family: Georgia, serif; font-size: clamp(.8rem, 3cqw, 1.15rem); font-weight: 900; text-align: center; transform: translateX(-50%); }
.level-banner[hidden] { display: none; }

.instruction-message { z-index: 40; }.instruction-message .message-card { border-color: #653326; background: #fff6df; }.instruction-message .eyebrow { margin: 0 0 .25rem; color: #a43c30; font-size: .68rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }.instruction-message .action-button { min-width: 7rem; }

@keyframes pendulum-swing { from { transform: translateX(-50%) rotate(-12deg); } to { transform: translateX(-50%) rotate(12deg); } }
@keyframes pendulum-bob { from { transform: translateX(-50%) rotate(-12deg) translateX(-12%); } to { transform: translateX(-50%) rotate(12deg) translateX(12%); } }
@keyframes mouse-sniff { from { transform: translate(-50%, -50%) rotate(-3deg) translateY(0); } to { transform: translate(-50%, -50%) rotate(4deg) translateY(-4%); } }
@keyframes mouse-hit { 20%, 60% { transform: translate(-50%, -50%) rotate(-12deg) scale(.88); } 40%, 80% { transform: translate(-50%, -50%) rotate(12deg) scale(.88); } }
@keyframes sniff-puff { from { opacity: .8; transform: translate(0,0) scale(.45); } to { opacity: 0; transform: translate(2.2rem,-.65rem) scale(1.4); } }
@keyframes prize-glow { to { filter: drop-shadow(0 0 .65rem rgba(242,188,45,.72)); transform: translateY(-.15rem); } }

.gameplay-paused .hand, .gameplay-paused .pendulum, .gameplay-paused .pendulum-rod, .gameplay-paused .prize-spot, .gameplay-paused .sniff-puffs i { animation-play-state: paused; }

@media (max-height: 650px) and (orientation: landscape) {
  .dock-stage { grid-template-rows: 1fr auto; }
  .instruction { display: none; }
  .room-scene { min-height: 0; }
  .clock-case { width: min(29%, 11rem); height: 96%; top: 0; }
  .wild-pendulum { top: 38%; height: 52%; }
}

@media (max-height: 690px) and (orientation: portrait) {
  .instruction, .announcer { font-size: .68rem; }
  .clock-case { width: min(40%, 12rem); }
}

@media (max-width: 390px) {
  .prize-spot small { display: none; }
  .mouse-hole { width: 16%; }
  .mouse { width: 14%; }
}

@media (prefers-reduced-motion: reduce) {
  .pendulum, .pendulum-rod { animation-duration: 3s !important; }
  .mouse.sniffing { animation-duration: .8s !important; }
}