/* ==========================================================================
   Eric Fox — Club Penguin-style room
   All art is original CSS / inline SVG. Layout is percent-based so the room
   reflows to any viewport; see the `hotspots` array in script.js.
   ========================================================================== */

:root {
  color-scheme: light;

  /* penguin (CP "Orange") */
  --pg-orange: #ff8a00;
  --pg-orange-dark: #e56f00;
  --pg-outline: #c25e00;
  --pg-belly: #fff6e9;
  --pg-beak: #ffc233;
  --pg-beak-dark: #e0a020;
  --pg-pupil: #1b1b1b;

  /* room */
  --cp-wall: #ffffff;
  --cp-floor: #f4f9fd;
  --cp-floor-deep: #e7f0f8;
  --cp-floor-edge: #d8e6f2;
  --cp-shadow: rgba(30, 60, 90, 0.2);
  --cp-target: #e8322d;

  /* window chrome */
  --cp-blue: #0068b8;
  --cp-blue-light: #2f8fe0;
  --cp-blue-hi: #63b3f0;
  --cp-blue-dark: #004f8e;
  --cp-panel: #ffffff;
  --cp-panel-edge: #cfe3f5;
  --cp-panel-tint: #e6f2fc;
  --cp-red: #e8322d;
  --cp-red-hi: #ff6b66;
  --cp-red-dark: #b01f1a;
  --cp-red-drop: #7e1511;
  --cp-ink: #12324d;
  --cp-ink-dim: #4a6a85;
  --cp-tag-ink: #1b1b1b;
  --cp-backdrop: rgba(0, 43, 82, 0.35);

  --cp-font: "Baloo 2", "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;

  /* sizing (script.js sets --penguin-w / --logo-size per room on the stage) */
  --logo-size: 72px;
  --penguin-w: 96px;
  --penguin-h: calc(var(--penguin-w) * 1.13); /* penguin3d.js overrides with the model height */
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--cp-wall);
  color: var(--cp-ink);
  font-family: var(--cp-font);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--cp-blue);
}

h1,
h2,
h3,
p {
  margin: 0;
}

.stage {
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* --------------------------------------------------------------------------
   HUD (top bar with the ERIC FOX wordmark)
   -------------------------------------------------------------------------- */
/* Same CP-style blue bar as the toolbar */
.hud {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--cp-blue-light), var(--cp-blue));
  border-bottom: 3px solid var(--cp-blue-hi);
  box-shadow: 0 6px 20px rgba(0, 40, 80, 0.18);
  position: relative;
  z-index: 60;
}

.logo-title {
  line-height: 0;
}

.logo-btn {
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}

.logo-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.logo {
  width: 150px;
  height: auto;
  transition: transform 160ms ease;
  filter: drop-shadow(0 3px 0 rgba(0, 30, 60, 0.35));
}

.logo-btn:hover .logo {
  transform: scale(1.03) rotate(-1deg);
}

.hint {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Room: a painted background (stage) the penguin walks around in
   -------------------------------------------------------------------------- */
.room {
  grid-row: 2; /* explicit rows: the header can be display:none on phones held sideways */
  position: relative;
  overflow: hidden;
  touch-action: none; /* a finger dragged over the room steers the penguin, never scrolls or zooms the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #1e9ad6;
}

/* Blurred copy of the room art behind the stage, filling any letterbox. */
.room-backdrop {
  position: absolute;
  inset: -24px;
  background: center / cover no-repeat;
  filter: blur(18px) saturate(1.1);
  opacity: 0.85;
  pointer-events: none;
}

.room-backdrop:not([style*="url"]) {
  display: none;
}

/* The room stage is the room image at native pixel size; script.js scales it
   to fit entirely inside the room (letterboxed) and centers it. */
.room-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* NPC penguins share the player's markup but never take clicks. */
.penguin.npc {
  cursor: default;
  pointer-events: none;
}

/* Portrait phones: prompt to turn the phone sideways (shown by a media query below). */
.rotate-hint {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 45;
  display: none;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(0, 43, 82, 0.6);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  animation: rotateBlink 1.8s ease-in-out infinite;
}

.rotate-hint svg {
  width: 34px;
  height: 34px;
  flex: none;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes rotateBlink {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Ambient loop (sea, palm trees): a muted video laid exactly over the art and masked to the
   pixels that move, so everything else stays the crisp WebP. script.js sets src/mask per room
   (nothing when the room has no loop, under reduced motion or Save-Data). */
.stage-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: none; /* the video is the art padded to an even height: show it 1:1 */
  object-position: 0 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 700ms ease;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.stage-anim.is-on {
  opacity: 1;
}

.stage-anim:not([src]) {
  display: none;
}

/* Cut-outs of painted things the penguin can walk behind (stacked by their z, see script.js). */
.overlay {
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none; /* clicks fall through to the hotzone beneath */
}

.overlay img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hover (mouse over its hotzone) and click effect for an overlay with `fx: "glow"` (script.js):
   warm light from inside the igloo doorway, flashing brighter when clicked. */
.overlay-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 58% 62% at 50% 74%, rgba(255, 226, 150, 1) 0%, rgba(255, 184, 76, 0.8) 38%, rgba(255, 150, 40, 0) 74%);
  mix-blend-mode: screen;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transition: opacity 260ms ease;
}

.overlay.is-hover .overlay-glow {
  opacity: 1;
  animation: overlayGlow 1.6s ease-in-out infinite;
}

.overlay.is-click .overlay-glow {
  opacity: 1;
  animation: overlayFlash 520ms ease-out 1;
}

@keyframes overlayGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes overlayFlash {
  0% { opacity: 1; filter: brightness(1.7); }
  100% { opacity: 1; filter: brightness(1); }
}

/* Invisible buttons over painted things you can walk to (sign, doors). */
.hotzone {
  position: absolute;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 24px;
  cursor: pointer;
  transition: background 120ms ease, box-shadow 120ms ease;
}

/* No hover highlight (the cursor is the affordance); keyboard focus still shows. */
.hotzone:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 2px;
}

/* "Back to the island" button, top-left of the room (rooms without a door) */
.room-back {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 16px 0 10px;
  border-radius: 999px;
  border: 2px solid var(--cp-blue-dark);
  background: linear-gradient(180deg, #3b9bea, var(--cp-blue));
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--cp-blue-dark);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.room-back[hidden] {
  display: none;
}

.room-back svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.room-back:hover {
  transform: translateY(-1px);
}

.room-back:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--cp-blue-dark);
}

.room-back:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 3px;
}

/* Room-change fade (also covers the initial load) */
.room-fade {
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.room-fade.is-on {
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Room objects (project logos, resume, mailbox)
   -------------------------------------------------------------------------- */
/* Anchored at bottom-center; --x/--y are stage pixels set by script.js. */
.object {
  position: absolute;
  left: calc(var(--x) * 1px);
  top: calc(var(--y) * 1px);
  transform: translate(-50%, -100%);
}

.hotspot {
  position: relative;
  display: block;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 120ms ease;
}

.hotspot:hover,
.hotspot:focus-visible {
  transform: translateY(-3px);
}

.hotspot:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 4px;
  border-radius: 22px;
}

.object-art {
  display: block;
  position: relative;
}

.room-logo {
  width: var(--logo-size);
  height: var(--logo-size);
  border-radius: 18px;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(18, 50, 77, 0.1), 0 8px 18px rgba(18, 50, 77, 0.16);
  transition: box-shadow 120ms ease;
}

.room-logo--fallback {
  display: grid;
  place-items: center;
  background: var(--cp-panel-tint);
  color: var(--cp-blue);
  font-weight: 800;
  font-size: 22px;
}

.hotspot:hover .room-logo,
.hotspot:focus-visible .room-logo,
.hotspot.is-target .room-logo {
  box-shadow: 0 0 0 3px var(--cp-blue-light), 0 8px 18px rgba(18, 50, 77, 0.2);
}

.hotspot.is-target .room-logo {
  animation: targetPulse 900ms ease-in-out infinite alternate;
}

@keyframes targetPulse {
  from { box-shadow: 0 0 0 3px rgba(47, 143, 224, 0.55), 0 8px 18px rgba(18, 50, 77, 0.2); }
  to { box-shadow: 0 0 0 5px var(--cp-blue-light), 0 8px 18px rgba(18, 50, 77, 0.2); }
}

/* wall objects hang as framed pictures */
.object--wall .object-art {
  padding: 6px;
  background: #fff;
  border: 3px solid var(--cp-panel-edge);
  border-radius: 20px;
  box-shadow: 0 4px 0 #b9d2e8, 0 8px 18px rgba(18, 50, 77, 0.12);
}

.object--wall .pedestal {
  display: none;
}

/* floor objects sit on an ice puck */
.object--floor .room-logo {
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

.object--floor .pedestal {
  display: block;
  width: calc(var(--logo-size) + 12px);
  height: 18px;
  margin: -8px auto 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #e3eef7, #c9dcec);
  box-shadow: inset 0 2px 0 #fff, 0 3px 0 #b9d2e8;
}

.plaque {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: #fff;
  border: 2px solid var(--cp-blue);
  border-radius: 10px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.2;
  color: var(--cp-ink);
  box-shadow: 0 2px 0 var(--cp-blue);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Penguin. `.penguin` is a zero-size anchor at the feet; JS moves it with
   translate(). Facing flips the sprite only, so the name tag never mirrors.
   -------------------------------------------------------------------------- */
.penguin {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  will-change: transform;
  cursor: pointer;
}

/* Light grey disc under the penguin, like the original game. */
.penguin-shadow {
  position: absolute;
  left: calc(var(--penguin-w) * -0.46);
  top: calc(var(--penguin-w) * -0.17);
  width: calc(var(--penguin-w) * 0.92);
  height: calc(var(--penguin-w) * 0.34);
  border-radius: 50%;
  background: rgba(120, 132, 150, 0.35);
  transform: scale(var(--depth, 1));
  pointer-events: none;
}

.penguin-sprite {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--penguin-w);
  line-height: 0;
  transform: translateX(-50%) scale(var(--depth, 1));
  transform-origin: 50% 100%;
  transition: opacity 150ms ease;
}

/* The SVG penguin flips to face left; the 3D penguin turns instead. */
.penguin.faces-left:not(.is-3d) .penguin-sprite {
  transform: translateX(-50%) scaleX(-1) scale(var(--depth, 1));
}

/* The 3D canvas is larger than the penguin's box (room for raised flippers)
   and centered on it by penguin3d.js; the sprite box is the click target. */
.penguin-canvas {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  pointer-events: none;
}

/* The 3D penguin draws its own ground disc inside the canvas, placed by the
   camera exactly under the feet, and penguin3d.js shifts the canvas so the
   feet's contact point sits on the anchor. The CSS disc is for the SVG fallback. */
.penguin.is-3d .penguin-sprite {
  height: var(--penguin-h);
  bottom: 0;
}

.penguin.is-3d .penguin-shadow {
  display: none;
}

.penguin-snapshot {
  display: block;
  width: 100%;
  height: auto;
}

.penguin.is-teleporting .penguin-sprite {
  opacity: 0;
}

.penguin-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.penguin-svg .foot {
  fill: var(--pg-beak);
  stroke: var(--pg-beak-dark);
  stroke-width: 2;
}

.penguin-svg .body {
  fill: var(--pg-orange);
  stroke: var(--pg-outline);
  stroke-width: 3;
  stroke-linejoin: round;
}

.penguin-svg .belly {
  fill: var(--pg-belly);
}

.penguin-svg .flipper {
  fill: var(--pg-orange-dark);
  stroke: var(--pg-outline);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.penguin-svg .eye {
  fill: #fff;
  stroke: rgba(0, 0, 0, 0.18);
  stroke-width: 1.5;
}

.penguin-svg .pupil {
  fill: var(--pg-pupil);
}

.penguin-svg .glint {
  fill: #fff;
}

.penguin-svg .beak {
  fill: var(--pg-beak);
  stroke: var(--pg-beak-dark);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.penguin-svg .eye-group {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 4.2s steps(1) infinite;
}

.penguin.is-walking .penguin-body {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: waddle 440ms linear infinite;
}

.penguin.is-waving .flipper-r {
  transform-box: fill-box;
  transform-origin: 15% 10%;
  animation: wave 600ms ease-in-out 2;
}

.penguin.is-dancing .penguin-body {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: dance 460ms ease-in-out 5;
}

.penguin.is-dancing .flipper-l {
  transform-box: fill-box;
  transform-origin: 85% 10%;
  animation: flapL 460ms ease-in-out 5;
}

.penguin.is-dancing .flipper-r {
  transform-box: fill-box;
  transform-origin: 15% 10%;
  animation: flapR 460ms ease-in-out 5;
}

@keyframes dance {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes flapL {
  0%, 100% { transform: rotate(35deg); }
  50% { transform: rotate(80deg); }
}

@keyframes flapR {
  0%, 100% { transform: rotate(-35deg); }
  50% { transform: rotate(-80deg); }
}

@keyframes blink {
  0%, 96% { transform: scaleY(1); }
  97%, 99% { transform: scaleY(0.12); }
  100% { transform: scaleY(1); }
}

@keyframes waddle {
  0% { transform: rotate(-4deg) translateY(0); }
  25% { transform: rotate(0deg) translateY(-3px); }
  50% { transform: rotate(4deg) translateY(0); }
  75% { transform: rotate(0deg) translateY(-3px); }
  100% { transform: rotate(-4deg) translateY(0); }
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-75deg); }
}

.speech {
  position: absolute;
  left: 0;
  bottom: calc(var(--penguin-h) + 12px);
  transform: translateX(-50%);
  background: #fff;
  border: 2px solid var(--cp-tag-ink);
  border-radius: 12px;
  padding: 5px 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: var(--cp-tag-ink);
  white-space: nowrap;
  pointer-events: none;
}

.speech::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-right: 2px solid var(--cp-tag-ink);
  border-bottom: 2px solid var(--cp-tag-ink);
  transform: translateX(-50%) rotate(45deg);
}

.speech[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Toolbar (bottom bar)
   -------------------------------------------------------------------------- */
.toolbar {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 76px;
  padding: 0 16px;
  background: linear-gradient(180deg, var(--cp-blue-light), var(--cp-blue));
  border-top: 3px solid var(--cp-blue-hi);
  box-shadow: 0 -6px 20px rgba(0, 40, 80, 0.18);
}

.chat-pill {
  display: flex;
  align-items: center;
  width: 280px;
  height: 38px;
  padding: 0 14px;
  background: #fff;
  border: 2px solid var(--cp-blue-dark);
  border-radius: 999px;
  color: var(--cp-ink-dim);
  font-weight: 600;
  font-size: 13px;
}

.toolbar-buttons {
  display: flex;
  gap: 16px;
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}

.tool-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: #fff;
  border: 2.5px solid var(--cp-blue-dark);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--cp-blue-dark);
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.tool-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--cp-blue);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-btn:hover .tool-icon {
  transform: translateY(-2px);
}

.tool-btn:active .tool-icon {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cp-blue-dark);
}

.tool-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.tool-label {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* --------------------------------------------------------------------------
   CP-style window (one native <dialog>)
   -------------------------------------------------------------------------- */
.win {
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  width: min(560px, calc(100% - 32px));
  max-height: min(80dvh, 680px);
  color: var(--cp-ink);
}

.win[open] {
  display: flex;
}

.win::backdrop {
  background: var(--cp-backdrop);
}

.win[data-kind="resume"] {
  width: min(680px, calc(100% - 32px));
}

.win[data-kind="player"] {
  width: min(760px, calc(100% - 32px));
  max-height: min(92dvh, 760px);
}

.win[data-kind="found"] {
  width: min(400px, calc(100% - 32px));
}

.win-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  background: var(--cp-blue);
  border: 3px solid var(--cp-blue-dark);
  border-radius: 24px;
  padding: 8px;
  box-shadow: inset 0 3px 0 var(--cp-blue-hi), inset 0 -3px 0 var(--cp-blue-dark), 0 20px 50px rgba(0, 40, 80, 0.3);
}

.win[open] .win-frame {
  animation: winPop 180ms cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes winPop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.win-bar {
  flex: none;
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 2px 44px 6px;
}

.win-title {
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

.win-close {
  position: absolute;
  top: -12px;
  right: -12px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid #fff;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, var(--cp-red-hi), var(--cp-red) 60%, var(--cp-red-dark));
  box-shadow: 0 3px 0 var(--cp-red-drop), 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.win-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-linecap: round;
}

.win-close:hover {
  transform: scale(1.08);
}

.win-close:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--cp-red-drop);
}

.win-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

.win-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--cp-panel);
  border: 2px solid var(--cp-panel-edge);
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: inset 0 2px 6px rgba(0, 40, 80, 0.08);
  font-size: 15px;
  line-height: 1.5;
}

.win-body:focus {
  outline: none;
}

.win-body:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: -3px;
}

/* window typography and parts */
.cp-h {
  margin: 16px 0 6px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cp-blue);
}

.cp-h:first-child {
  margin-top: 0;
}

.cp-list li {
  position: relative;
  padding-left: 18px;
  margin: 4px 0;
}

.cp-list li::before {
  content: "◆";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cp-blue-light);
  font-size: 10px;
}

.cp-chip {
  display: inline-block;
  background: var(--cp-panel-tint);
  color: var(--cp-blue);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
}

.win-tags,
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  border: 2px solid var(--cp-blue-dark);
  background: linear-gradient(180deg, #3b9bea, var(--cp-blue));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 3px 0 var(--cp-blue-dark);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease, filter 100ms ease;
}

.cp-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.cp-btn:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 1px 0 var(--cp-blue-dark);
}

.cp-btn:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 3px;
}

.win-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* project window */
.win-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.win-logo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(18, 50, 77, 0.1);
  flex: none;
}

.win-category {
  font-weight: 700;
  font-size: 16px;
}

.win-status {
  color: var(--cp-ink-dim);
  font-size: 13px;
  font-weight: 600;
}

.win-desc {
  margin-top: 12px;
  font-size: 16px;
}

/* resume (player card) */
.player-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 20px;
  align-items: start;
}

.player-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
}

.player-penguin {
  position: relative;
  width: 150px;
}

.player-penguin .penguin-svg {
  width: 100%;
}

.player-badge {
  position: absolute;
  right: -8px;
  bottom: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--cp-blue);
  object-fit: cover;
}

.player-role {
  font-weight: 800;
  font-size: 17px;
  color: var(--cp-blue);
}

.resume-summary {
  margin-top: 6px;
}

.resume-role {
  margin: 12px 0 2px;
  line-height: 1.3;
}

.resume-role strong {
  display: block;
  font-weight: 800;
}

.resume-meta {
  display: block;
  color: var(--cp-ink-dim);
  font-size: 13px;
  font-weight: 600;
}

.resume-skills {
  margin: 6px 0;
  font-size: 14px;
}

.resume-skills strong {
  color: var(--cp-blue);
}

/* contact */
.win-contact {
  text-align: center;
}

.contact-avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--cp-blue), 0 8px 18px rgba(18, 50, 77, 0.16);
  object-fit: cover;
}

.contact-title {
  font-weight: 800;
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.win-contact .win-actions {
  justify-content: center;
}

.contact-email {
  margin-top: 14px;
  font-weight: 700;
}

.credit {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 2px solid var(--cp-panel-edge);
  color: var(--cp-ink-dim);
  font-size: 12px;
  font-weight: 600;
}

/* about (player card) */
.about-head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-avatar {
  width: 88px;
  height: 88px;
  flex: none;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 0 0 3px var(--cp-blue), 0 8px 18px rgba(18, 50, 77, 0.16);
  object-fit: cover;
}

.about-lede {
  margin-top: 4px;
  font-size: 16px;
}

.about-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 18px;
  margin-top: 6px;
}

.about-cols .cp-list li {
  font-size: 14px;
}

/* map */
.map-intro {
  color: var(--cp-ink-dim);
  font-weight: 600;
  margin-bottom: 12px;
}

.map-list {
  display: grid;
  gap: 8px;
}

.map-room {
  margin: 10px 0 2px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cp-blue);
}

.map-room:first-child {
  margin-top: 0;
}

.map-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  background: #fff;
  border: 2px solid var(--cp-panel-edge);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}

.map-item:hover,
.map-item:focus-visible {
  background: var(--cp-panel-tint);
  border-color: var(--cp-blue-light);
}

.map-item:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 2px;
}

.map-item img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex: none;
  box-shadow: 0 0 0 2px rgba(18, 50, 77, 0.1);
}

.map-text strong {
  display: block;
  font-weight: 800;
  line-height: 1.2;
}

.map-text span {
  color: var(--cp-ink-dim);
  font-size: 13px;
  font-weight: 600;
}

/* no-JS fallback */
.noscript {
  position: fixed;
  inset: auto 16px 16px;
  z-index: 300;
  padding: 14px 16px;
  background: #fff;
  border: 3px solid var(--cp-blue);
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  :root {
    --logo-size: 72px;
  }

  .logo {
    width: 150px;
  }

  .chat-pill {
    display: none;
  }
}

@media (max-width: 560px) {
  .hud {
    padding: 8px 12px 2px;
  }

  .logo {
    width: 120px;
  }

  .hint {
    font-size: 12px;
  }

  .speech {
    font-size: 12px;
  }

  .toolbar {
    height: 60px;
    gap: 14px;
  }

  .toolbar-buttons {
    gap: 22px;
  }

  .tool-icon {
    width: 44px;
    height: 44px;
  }

  .tool-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .win {
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: 0;
  }

  .win[data-kind="resume"],
  .win[data-kind="about"] {
    width: 100%;
  }

  .win-frame {
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .win-close {
    top: -14px;
    right: 10px;
  }

  .win-body {
    padding: 14px;
  }

  .win-title {
    font-size: 20px;
  }

  .player-card {
    grid-template-columns: 1fr;
  }

  .player-figure {
    position: static;
  }

  .about-cols {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .hint {
    display: none;
  }
}

/* Portrait phones: the whole room fits the width, so suggest turning sideways. */
@media (orientation: portrait) and (max-width: 900px) {
  .rotate-hint {
    display: inline-flex;
  }
}

/* Phones on their side: the room takes the whole screen. The header goes away
   (the penguin itself opens the Player Card), the toolbar becomes a slim strip,
   and a Full screen button appears where the browser supports it. */
.tool-btn--fullscreen {
  display: none;
}

@media (orientation: landscape) and (max-height: 500px) {
  .hud {
    display: none;
  }

  .speech {
    display: none;
  }

  .toolbar {
    height: 46px;
    gap: 10px;
    padding: 0 max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  }

  .toolbar-buttons {
    gap: 18px;
  }

  .tool-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .tool-icon svg {
    width: 21px;
    height: 21px;
  }

  .tool-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tool-btn--fullscreen:not([hidden]) {
    display: flex;
  }

  .room-back {
    top: 8px;
    left: max(8px, env(safe-area-inset-left));
    min-height: 34px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Classic player card (CP Legacy frame + paper-doll layers, with permission).
   The card is authored in its native 312×451 px and scaled as one unit by
   --card-scale (set by script.js to fit its column).
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.win[data-kind="player"] .win-body {
  background: var(--cp-panel-tint);
  padding: 16px;
}

.pc {
  display: grid;
  grid-template-columns: 312px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.pc-card-col {
  min-width: 0;
}

.pc-card-box {
  --card-scale: 1;
  position: relative;
  width: calc(312px * var(--card-scale));
  height: calc(451px * var(--card-scale));
  margin: 0 auto;
}

.pc-card {
  position: absolute;
  inset: 0 auto auto 0;
  width: 312px;
  height: 451px;
  transform: scale(var(--card-scale));
  transform-origin: 0 0;
  user-select: none;
  filter: drop-shadow(0 10px 18px rgba(0, 40, 80, 0.25));
}

.pc-hole {
  position: absolute;
  left: 9px;
  top: 79px;
  width: 292px;
  height: 291px;
  border-radius: 10px;
  background: var(--cp-blue); /* the card's default backdrop (a background item covers it) */
}

/* CP's paper canvas is 600×600; at 0.48 it fills the frame's 288×288 cut-out at (11, 81). */
.pc-layers {
  position: absolute;
  left: 11px;
  top: 81px;
  width: 288px;
  height: 288px;
  overflow: hidden;
}

.pc-layers.has-items {
  cursor: pointer; /* click a worn item on the penguin to take it off */
}

.pc-layer {
  pointer-events: none; /* the click lands on .pc-layers and is hit-tested against the layers' pixels */
}

.pc-layer {
  position: absolute;
  inset: 0;
  width: 288px;
  height: 288px;
  display: block;
}

.pc-frame {
  position: absolute;
  inset: 0;
  width: 312px;
  height: 451px;
  display: block;
  pointer-events: none;
}

/* Invisible real buttons over the painted controls */
.pc-hot {
  position: absolute;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.pc-hot--close {
  left: 257px;
  top: 42px;
}

.pc-hot--items {
  left: 57px;
  top: 389px;
}

.pc-hot--mail {
  left: 141px;
  top: 389px;
}

.pc-hot:hover {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.pc-hot:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 1px;
}

/* right panel: Items / About */
.pc-panel {
  min-width: 0;
}

.pc-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: -2px;
}

.pc-tab {
  padding: 8px 18px 10px;
  border: 2px solid var(--cp-blue-dark);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(180deg, var(--cp-blue-light), var(--cp-blue));
  color: #fff;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.pc-tab[aria-selected="true"] {
  background: var(--cp-panel);
  color: var(--cp-blue);
  border-color: var(--cp-panel-edge);
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.pc-tab:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 2px;
}

.pc-pane {
  background: var(--cp-panel);
  border: 2px solid var(--cp-panel-edge);
  border-radius: 0 16px 16px 16px;
  padding: 14px 16px 16px;
}

.pc-count {
  color: var(--cp-ink-dim);
  font-size: 13px;
  font-weight: 600;
}

.pc-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
}

.pc-group {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--cp-panel-edge);
  color: var(--cp-blue);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pc-item {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  padding: 4px;
  border: 3px solid var(--cp-panel-edge);
  border-radius: 14px;
  background: var(--cp-panel-tint);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease, border-color 100ms ease;
}

.pc-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pc-item:hover {
  transform: translateY(-2px);
  border-color: var(--cp-blue-light);
}

.pc-item:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 2px;
}

.pc-item.is-worn {
  border-color: var(--cp-blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--cp-blue-hi);
}

.pc-item.is-locked {
  cursor: help;
  background: #eef2f6;
  border-style: dashed;
}

.pc-question {
  font-weight: 800;
  font-size: 30px;
  color: #b7c4d1;
}

.pc-status {
  min-height: 1.4em;
  margin-top: 10px;
  color: var(--cp-blue);
  font-size: 14px;
  font-weight: 700;
}

.pc-actions {
  margin-top: 8px;
}

/* The About pane is a narrow column: stack Built / Operated / Automated. */
.pc-pane .about-cols {
  grid-template-columns: 1fr;
}

.pc-pane .about-cols .cp-list li {
  font-size: 13.5px;
}

.pc-pane .about-head {
  gap: 12px;
}

.pc-pane .about-avatar {
  width: 72px;
  height: 72px;
}

/* paint cans window */
.paint-intro {
  color: var(--cp-ink-dim);
  font-weight: 600;
  font-size: 14px;
}

.paint-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
}

.paint-swatch {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  padding: 10px 6px 8px;
  border: 3px solid var(--cp-panel-edge);
  border-radius: 14px;
  background: var(--cp-panel-tint);
  color: var(--cp-ink);
  font: inherit;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: transform 100ms ease, border-color 100ms ease;
}

.paint-swatch::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: 0 0 0 2px #fff;
}

.paint-swatch:hover {
  transform: translateY(-2px);
  border-color: var(--cp-blue-light);
}

.paint-swatch:focus-visible {
  outline: 3px solid var(--cp-blue-light);
  outline-offset: 2px;
}

.paint-swatch.is-found {
  border-color: var(--cp-blue);
  background: #fff;
}

.paint-tag {
  position: absolute;
  right: 6px;
  top: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--cp-blue);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

/* "You found …" window */
.win-found {
  text-align: center;
}

.found-icon {
  display: block;
  width: 150px;
  height: 150px;
  margin: 0 auto;
  animation: foundPop 400ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes foundPop {
  from { transform: scale(0.4) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

.found-name {
  margin-top: 8px;
  font-weight: 800;
  font-size: 22px;
  color: var(--cp-blue);
}

.found-sub {
  margin-top: 4px;
  color: var(--cp-ink-dim);
  font-size: 14px;
}

.win-found .win-actions {
  justify-content: center;
}

@media (max-width: 700px) {
  .pc {
    grid-template-columns: 1fr;
  }

  .pc-pane .about-cols {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: the penguin teleports (script.js) — kill the rest here.
   The 150ms opacity crossfade on the sprite is kept on purpose.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .penguin-svg .eye-group,
  .penguin.is-walking .penguin-body,
  .penguin.is-waving .flipper-r,
  .penguin.is-dancing .penguin-body,
  .penguin.is-dancing .flipper-l,
  .penguin.is-dancing .flipper-r,
  .hotspot.is-target .room-logo,
  .rotate-hint,
  .found-icon,
  .overlay-glow,
  .win[open] .win-frame {
    animation: none !important;
  }

  .stage-anim {
    display: none; /* script.js never loads the loop either */
  }

  .pc-item,
  .pc-item:hover,
  .paint-swatch,
  .paint-swatch:hover {
    transition: none !important;
    transform: none;
  }

  .hotspot,
  .room-logo,
  .logo,
  .tool-icon,
  .cp-btn,
  .win-close,
  .map-item,
  .hotzone,
  .room-fade {
    transition: none !important;
  }

  .hotspot:hover,
  .hotspot:focus-visible,
  .logo-btn:hover .logo,
  .cp-btn:hover,
  .tool-btn:hover .tool-icon {
    transform: none;
  }

}