:root {
  --ink: #171717;
  --paper: #fbfaf5;
  --blue: #173bdd;
  --cream: #f0e8d7;
  font-family: "Avenir Next", "PingFang SC", "Noto Sans CJK SC", sans-serif;
  color: var(--ink);
  background: #111;
}

* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; }

#game { position: relative; background: var(--paper); }
#viewport { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
#viewport:active { cursor: grabbing; }
#world {
  position: absolute; left: 0; top: 0; width: 1774px; height: 887px;
  transform-origin: 0 0; will-change: transform; background: white;
}
#city { display: block; width: 1774px; height: 887px; object-fit: cover; pointer-events: none; }
#cats { position: absolute; inset: 0; }

.cat-target {
  position: absolute; width: 46px; height: 46px;
  padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%) rotate(var(--angle));
  cursor: pointer; z-index: 2; touch-action: none;
}
.cat-fill,
.cat-art {
  position: absolute; left: 50%; bottom: 50%; width: auto; height: var(--size); max-width: calc(var(--size) * 2.55);
  transform: translateX(-50%); object-fit: contain; pointer-events: none;
  transition: filter .18s ease, opacity .18s ease;
}
.cat-art { z-index: 2; opacity: .98; }
.cat-fill {
  z-index: 1; opacity: 0;
  filter: brightness(0) saturate(100%) invert(22%) sepia(97%) saturate(5072%) hue-rotate(231deg) brightness(80%) contrast(116%);
}
.cat-target.found .cat-fill {
  opacity: .94;
}
.cat-target.found .cat-art {
  filter: brightness(0) contrast(1.2);
  opacity: 1;
}
.soft-blue .cat-target.found .cat-fill { opacity: .7; }
.compact-targets .cat-fill,
.compact-targets .cat-art { scale: .84; transform-origin: 50% 100%; }
.cat-target.just-found { z-index: 12; }
.cat-target.hinted::after {
  content: ""; position: absolute; inset: -10px; border: 4px solid var(--blue); border-radius: 50%;
  animation: hint-ring .85s ease-out 3; pointer-events: none;
}
@keyframes hint-ring { from { scale: .35; opacity: 1; } to { scale: 1.6; opacity: 0; } }

.hud { position: absolute; z-index: 20; pointer-events: none; }
.hud button, .hud > * { pointer-events: auto; }
.top-hud { inset: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) auto max(14px, env(safe-area-inset-left)); display: flex; justify-content: space-between; align-items: flex-start; }
.bottom-hud { inset: auto max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); display: flex; justify-content: center; align-items: flex-end; }
.ink-button { border: 2px solid var(--ink); background: rgba(251,250,245,.94); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }
.ink-button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.icon-button { width: 45px; height: 45px; border-radius: 12px; padding: 9px; }
.icon-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mode-badge { min-width: 146px; padding: 7px 15px; border: 2px solid var(--ink); border-radius: 10px; background: rgba(251,250,245,.94); text-align: center; box-shadow: 3px 3px 0 var(--ink); }
.mode-badge span { display: block; font-size: 11px; letter-spacing: .14em; }
.mode-badge b { font-size: 18px; font-variant-numeric: tabular-nums; }

.zoom-controls { position: absolute; z-index: 20; right: max(16px, env(safe-area-inset-right)); top: 50%; display: grid; gap: 8px; transform: translateY(-50%); }
.zoom-controls button { width: 40px; height: 40px; border-radius: 50%; font-size: 23px; line-height: 1; }
.cat-counter { position: relative; min-width: 170px; padding: 9px 22px 7px; border: 3px solid var(--ink); border-radius: 15px; background: rgba(251,250,245,.96); text-align: center; box-shadow: 4px 4px 0 rgba(23,23,23,.9); }
.cat-counter .ear { position: absolute; width: 26px; height: 24px; top: -20px; background: var(--paper); border: 3px solid var(--ink); border-bottom: 0; }
.cat-counter .ear.left { left: 16px; transform: skew(-18deg); border-radius: 6px 16px 0 0; }
.cat-counter .ear.right { right: 16px; transform: skew(18deg); border-radius: 16px 6px 0 0; }
.cat-counter span { display: block; font: 900 26px/1 "Arial Rounded MT Bold", sans-serif; }
.cat-counter small { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .12em; }
.cat-counter.nearly-done { border-color: var(--blue); color: var(--blue); animation: counter-pulse 1.1s infinite alternate; }
@keyframes counter-pulse { to { transform: translateY(-4px); } }
.hint-button { position: absolute; right: 0; bottom: 0; min-width: 104px; height: 46px; border-radius: 23px; display: flex; gap: 7px; align-items: center; justify-content: center; font-size: 12px; }
.hint-button:disabled { opacity: .55; cursor: wait; }
.bulb { width: 25px; height: 25px; display: grid; place-items: center; border: 2px solid; border-radius: 50%; font-weight: 900; }

#toast { position: absolute; z-index: 50; left: 50%; top: 18%; transform: translate(-50%,-10px); padding: 9px 18px; border: 2px solid var(--ink); border-radius: 99px; background: var(--ink); color: white; opacity: 0; transition: .22s; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%,0); }
#orientationTip { display: none; }

.paper-dialog { width: min(520px, calc(100vw - 30px)); max-height: calc(100dvh - 28px); padding: 28px 34px; border: 3px solid var(--ink); border-radius: 20px; background: var(--paper); box-shadow: 9px 9px 0 rgba(0,0,0,.8); text-align: center; overflow: auto; }
.paper-dialog::backdrop { background: rgba(18,18,18,.72); backdrop-filter: blur(2px); }
.paper-dialog h1, .paper-dialog h2 { margin: 4px 0 10px; font-family: "Arial Rounded MT Bold", "PingFang SC", sans-serif; }
.paper-dialog p { line-height: 1.65; }
.title-sketch { font: 900 62px/.9 "Arial Rounded MT Bold", sans-serif; letter-spacing: .04em; color: transparent; -webkit-text-stroke: 2px var(--ink); transform: rotate(-2deg); }
.eyebrow { margin: 12px 0 0!important; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.mode-card { padding: 14px 10px; border: 2px solid var(--ink); border-radius: 12px; background: white; cursor: pointer; }
.mode-card b, .mode-card span { display: block; }
.mode-card span { margin-top: 4px; font-size: 11px; color: #666; }
.mode-card.selected { color: white; background: var(--blue); box-shadow: 3px 3px 0 var(--ink); }
.mode-card.selected span { color: white; }
.primary-button, .danger-button { width: 100%; padding: 12px 18px; border: 2px solid var(--ink); border-radius: 11px; background: var(--blue); color: white; font-weight: 800; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; }
.text-button { margin-top: 14px; border: 0; background: none; text-decoration: underline; cursor: pointer; }
.legal { display: block; margin-top: 18px; color: #777; font-size: 9px; }
.dialog-close { position: absolute; right: 14px; top: 10px; border: 0; background: none; font-size: 29px; cursor: pointer; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 14px 0; border-bottom: 1px dashed #aaa; text-align: left; }
.switch-row b, .switch-row small { display: block; }
.switch-row small { color: #666; }
.switch-row input { width: 22px; height: 22px; accent-color: var(--blue); }
.danger-button { margin-top: 22px; background: #fff; color: #a51f1f; }
.win-dialog .confetti { color: var(--blue); font-size: 38px; }
.win-dialog strong { display: block; margin: 18px 0; font-size: 26px; }

.easter-egg { position: absolute; z-index: 3; width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer; }
.easter-egg.bell { left: 25%; top: 83%; }
.easter-egg.window { left: 77%; top: 27%; }
.easter-egg.lamp { left: 55%; top: 71%; }

@media (orientation: portrait) and (max-width: 760px) {
  #orientationTip { display: block; position: absolute; z-index: 70; left: 50%; bottom: 82px; transform: translateX(-50%); padding: 8px 13px; border-radius: 20px; background: rgba(23,23,23,.84); color: white; font-size: 11px; white-space: nowrap; animation: fade-tip 5s forwards; pointer-events: none; }
  @keyframes fade-tip { 70% { opacity: 1; } 100% { opacity: 0; } }
}
@media (max-height: 520px) {
  .paper-dialog { padding: 18px 28px; }
  .title-sketch { font-size: 42px; }
  .paper-dialog p { margin: 6px 0; font-size: 12px; }
  .mode-grid { margin: 10px 0; }
  .legal { display: none; }
}
@media (max-width: 600px) {
  .mode-badge { min-width: 110px; padding: 5px 10px; }
  .hint-button { min-width: 50px; width: 50px; }
  .hint-button #hintText { display: none; }
  .zoom-controls { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}