@font-face {
  font-family: 'NickRocks';
  src: url('/fonts/NickRocks-Regular.ttf') format('truetype');
}

  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html { background: #888; }
  body { overflow-x: hidden; background: transparent; }

  #bg-canvas {
    position: fixed;
    top: calc(-1 * var(--safe-top)); left: 0;
    width: 100vw;
    height: calc(100vh + var(--safe-top) + var(--safe-bottom));
    z-index: 0;
  }

  #feed {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 0 80px;
    gap: 24px;
    position: relative;
    z-index: 1;
  }

  .cat-wrap {
    position: relative;
    width: min(480px, 90vw);
    cursor: pointer;
  }
  @media (max-width: 600px) { .cat-wrap { width: 50vw; } }
  @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { .cat-wrap { width: min(28vw, 40vh); } }
  .cat-wrap img { width: 100%; display: block; }

  #fx-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 9999;
    display: none;
  }

  #wow-canvas {
    position: fixed;
    top: calc(-1 * var(--safe-top)); left: 0;
    width: 100vw;
    height: calc(100vh + var(--safe-top) + var(--safe-bottom));
    z-index: 5;
    pointer-events: none;
    display: none;
  }

  /* ── WOW BUTTON ── */
  #wow-btn {
    position: fixed;
    top: 18px; right: 18px;
    z-index: 200;
    width: 180px; height: 180px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s;
    transform: rotate(-8deg);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45));
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  #wow-btn:hover, #wow-btn:active { transform: rotate(-8deg) scale(1.07); }
  #wow-btn.active svg .star-body { fill: #00aa44; }
  #wow-btn svg { width: 100%; height: 100%; display: block; }
  @media (max-width: 480px) {
    #wow-btn { width: 110px; height: 110px; top: 10px; right: 10px; }
  }

  /* ── WOW MENU ── */
  @keyframes wow-rainbow {
    from { filter: hue-rotate(0deg); }
    to   { filter: hue-rotate(360deg); }
  }
  #wow-menu {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.7s ease;
  }
  #wow-menu.rainbow-active {
    animation: wow-rainbow 7.2s linear infinite;
    will-change: filter;
  }
  #wow-menu-title {
    margin-bottom: 4px;
  }
  .wow-menu-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 0.12s, filter 0.12s;
    width: min(680px, 92vw);
    display: block;
    overflow: visible;
  }
  .wow-menu-btn:hover, .wow-menu-btn:active {
    transform: scale(1.05) rotate(-0.5deg);
    filter: brightness(1.25);
  }
  .wow-menu-btn svg { width: 100%; display: block; overflow: visible; }

  /* ── FISHING BAR (left edge) ── */
  #fish-wrap {
    position: fixed;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
    transition: transform 0.5s ease;
  }
  #fish-wrap.fish-hidden {
    transform: translateX(calc(-100% - 20px)) translateY(-50%);
  }
  #fish-label {
    font-family: monospace;
    font-size: 9px;
    color: #f55;
    letter-spacing: 1px;
    user-select: none;
  }
  /* Hide on narrow or short screens where it would interfere */
  @media (max-width: 600px), (max-height: 640px) {
    #fish-wrap { display: none; }
  }