/* Support Counter styles */
  :root {
    --bg: #1a1033;
    --panel: #261a47;
    --panel-2: #33245c;
    --line: #46357a;
    --accent: #ff7ac6;
    --accent-hover: #ff96d3;
    --accent-soft: rgba(255, 122, 198, 0.35);
    --accent-faint: rgba(255, 122, 198, 0.1);
    --violet: #a77bff;
    --gold: #ffd76a;
    --sky: #8fd3ff;
    --text: #fdf6ff;
    --muted: #b3a6d6;
    --good: #6ff2c1;
    --ink: #2a1b4a;
    --hud: "Fredoka", "Nunito", "Trebuchet MS", system-ui, sans-serif;
    --r: 22px;
    --soft: #d9cdf5;
    --accent-rgb: 255, 122, 198; --violet-rgb: 167, 123, 255; --panel-rgb: 38, 26, 71; --ink-rgb: 42, 27, 74; --shade-rgb: 10, 6, 24;
    --gold-rgb: 255, 215, 106; --good-rgb: 111, 242, 193; --sky-rgb: 143, 211, 255; --deep-rgb: 52, 26, 104; --deep2-rgb: 76, 46, 136; --glow-rgb: 255, 225, 150;
    --mid: #ffb36b; --title-grad: linear-gradient(90deg, #ff7ac6, #ffb36b 55%, #ffd76a);
    --body-bg: radial-gradient(ellipse at 50% -10%, rgba(167, 123, 255, 0.35), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(255, 122, 198, 0.16), transparent 55%), linear-gradient(180deg, #1d1140 0%, #170d31 55%, #120a26 100%);
  }

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

  html { background: var(--bg); }

  body {
    background:
      radial-gradient(ellipse at 50% -10%, rgba(var(--violet-rgb), 0.35), transparent 60%),
      radial-gradient(ellipse at 100% 100%, rgba(var(--accent-rgb), 0.16), transparent 55%),
      linear-gradient(180deg, #1d1140 0%, #170d31 55%, #120a26 100%);
    color: var(--text);
    font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
    padding: 32px 16px 96px;
    overflow-x: hidden;
  }

  [hidden] { display: none !important; }

  .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;
  }
  .defs { position: absolute; width: 0; height: 0; overflow: hidden; }

  /* ---------- background ---------- */

  .bg-magic {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .aurora { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55; }
  .aurora.a1 {
    width: 60vmax; height: 34vmax; left: -18vmax; top: -12vmax;
    background: radial-gradient(closest-side, rgba(var(--violet-rgb), 0.75), transparent);
    animation: drift1 26s ease-in-out infinite alternate;
  }
  .aurora.a2 {
    width: 52vmax; height: 30vmax; right: -16vmax; top: 18vh;
    background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.5), transparent);
    animation: drift2 32s ease-in-out infinite alternate;
  }
  .aurora.a3 {
    width: 56vmax; height: 26vmax; left: 10vw; bottom: -16vmax;
    background: radial-gradient(closest-side, rgba(var(--good-rgb), 0.32), transparent);
    animation: drift3 38s ease-in-out infinite alternate;
  }
  @keyframes drift1 { to { transform: translate(8vmax, 5vmax) scale(1.1); } }
  @keyframes drift2 { to { transform: translate(-7vmax, -4vmax) scale(0.92); } }
  @keyframes drift3 { to { transform: translate(-6vmax, -3vmax) scale(1.12); } }

  .moon {
    position: absolute;
    right: max(4vw, 18px);
    top: 70px;
    width: 92px;
    height: 92px;
    filter: drop-shadow(0 0 22px rgba(var(--glow-rgb), 0.45));
    animation: moonFloat 7s ease-in-out infinite alternate;
  }
  .moon svg { width: 100%; height: 100%; display: block; }
  @keyframes moonFloat { to { transform: translateY(-10px) rotate(-4deg); } }

  .cloud { position: absolute; opacity: 0.16; }
  .cloud svg { display: block; width: 100%; height: 100%; }
  .cloud.c1 { width: 260px; height: 90px; bottom: 7vh; left: -280px; animation: cloud 95s linear infinite; }
  .cloud.c2 { width: 180px; height: 62px; bottom: 22vh; left: -200px; animation: cloud 120s linear -50s infinite; opacity: 0.1; }
  .cloud.c3 { width: 320px; height: 110px; bottom: -2vh; left: -340px; animation: cloud 140s linear -90s infinite; opacity: 0.12; }
  @keyframes cloud { to { transform: translateX(calc(100vw + 380px)); } }

  .wisp { position: absolute; left: 0; top: 0; width: 30px; height: 30px; opacity: 0; }
  .wisp svg { width: 100%; height: 100%; display: block; overflow: visible; }

  #bg-fx, #fx { position: fixed; inset: 0; pointer-events: none; }
  #bg-fx { z-index: 0; }
  #fx { z-index: 60; }

  .wrap { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }

  .corner { display: none; }

  /* ---------- header and tabs ---------- */

  header {
    position: relative;
    margin-bottom: 22px;
    padding: 4px 120px 4px 0;
  }
  .sound-btn {
    position: absolute;
    right: 0;
    top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px 7px 10px;
    border-radius: 999px;
    background: rgba(var(--panel-rgb), 0.85);
    color: var(--text);
    font-family: var(--hud);
    font-weight: 600;
    font-size: 15px;
    z-index: 2;
  }
  .sound-btn svg { width: 22px; height: 22px; }
  .sound-btn .mute { display: none; }
  .sound-btn.off { color: var(--muted); }
  .sound-btn.off .mute { display: inline; }
  .sound-btn.off .wave { display: none; }
  .sound-btn:not(.off) .wave { animation: soundWave 0.9s ease-in-out infinite alternate; transform-origin: 30% 50%; }
  @keyframes soundWave { to { opacity: 0.4; transform: scale(0.85); } }
  .sound-btn:hover { border-color: var(--accent); }
  .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hud);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.08em;
    color: var(--good);
    margin-bottom: 4px;
  }
  .tag .twinkle { display: inline-block; color: var(--gold); animation: twinkle 1.8s ease-in-out infinite; }
  .tag .twinkle.b { animation-delay: -0.9s; }
  @keyframes twinkle { 50% { transform: scale(0.6) rotate(45deg); opacity: 0.5; } }
  h1 {
    font-family: var(--hud);
    font-size: 56px;
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1;
    text-shadow: 0 4px 0 rgba(var(--shade-rgb), 0.45);
  }
  h1 span {
    background: linear-gradient(90deg, var(--accent), #ffb36b 55%, var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 4px 0 rgba(var(--shade-rgb), 0.45));
  }
  .since { color: var(--muted); font-size: 13.5px; margin-top: 10px; }

  .tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 24px;
    padding: 6px;
    background: rgba(var(--panel-rgb), 0.75);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 0 auto;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: var(--muted);
    font-family: var(--hud);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    padding: 9px 16px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  }
  .tab svg { width: 18px; height: 18px; flex: none; }
  .tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
  .tab[aria-selected="true"] {
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--violet));
    box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .tab:active { transform: scale(0.97); }

  .tab-count {
    min-width: 20px;
    padding: 0 6px;
    font-family: "Nunito", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
  }
  .tab-count:empty { display: none; }

  .live-dot {
    display: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 10px var(--gold);
    animation: blink 1.4s ease-in-out infinite;
  }
  .live-dot.on { display: inline-block; }
  @keyframes blink { 50% { opacity: 0.35; transform: scale(0.8); } }

  /* ---------- counter cards ---------- */

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
  }
  .grid, .grid button {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M10 10 L25 25' stroke='%232a1b4a' stroke-width='6' stroke-linecap='round'/%3E%3Cpath d='M10 10 L25 25' stroke='%23b69cff' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M8 0.8 Q8.6 7.4 15.2 8 Q8.6 8.6 8 15.2 Q7.4 8.6 0.8 8 Q7.4 7.4 8 0.8 Z' fill='%23ffd76a' stroke='%232a1b4a' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 8, pointer;
  }

  .card {
    --m: var(--accent);
    --m-rgb: 255, 122, 198;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 238px;
    padding: 20px 20px 20px;
    background:
      radial-gradient(circle at 88% 30%, rgba(var(--m-rgb), 0.24), transparent 55%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 45%),
      var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(var(--shade-rgb), 0.35);
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
  }
  .card:hover {
    border-color: rgba(var(--m-rgb), 0.7);
    box-shadow: 0 14px 34px rgba(var(--shade-rgb), 0.45), 0 0 26px rgba(var(--m-rgb), 0.28);
    transform: translateY(-3px);
  }
  .card.rare {
    border-color: rgba(var(--gold-rgb), 0.55);
    box-shadow: 0 10px 28px rgba(var(--shade-rgb), 0.35), 0 0 22px rgba(var(--gold-rgb), 0.18);
  }

  .scan {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.13) 50%, transparent 65%);
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
  }
  .card:hover .scan { opacity: 1; animation: shimmer 2.4s ease-in-out infinite; }
  @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

  .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .label-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .label {
    font-family: var(--hud);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
  }
  .monster-name {
    font-family: var(--hud);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--m);
    opacity: 0.9;
  }
  .rare-badge {
    flex: none;
    font-family: var(--hud);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 2px 9px;
    border-radius: 999px;
    color: var(--ink);
    background: linear-gradient(90deg, #fff1a8, var(--gold));
    box-shadow: 0 0 14px rgba(var(--gold-rgb), 0.45);
  }

  .count-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; min-height: 96px; }
  .count {
    flex: none;
    font-family: var(--hud);
    font-size: 76px;
    font-weight: 600;
    line-height: 0.9;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 4px 0 rgba(var(--shade-rgb), 0.4);
  }
  .monster { position: relative; flex: 0 1 118px; min-width: 84px; height: 98px; margin-right: -6px; }
  .monster svg { display: block; width: 100%; height: 100%; overflow: visible; }

  /* Standby dance: every pup has its own routine and moves around its spot */
  .monster, .g-mon, .game-card-mon { transform-origin: 50% 55%; animation: danceA 7s ease-in-out infinite; animation-delay: var(--d, 0s); }
  .monster { cursor: pointer; outline: none; }
  .monster:focus-visible svg { filter: drop-shadow(0 0 6px var(--gold)); }
  .dance-b { animation-name: danceB; animation-duration: 6.2s; }
  .dance-c { animation-name: danceC; animation-duration: 5.4s; }
  .dance-d { animation-name: danceD; animation-duration: 8s; }
  .dance-e { animation-name: danceE; animation-duration: 6.6s; }
  .game-card + .game-card .game-card-mon { animation-name: danceE; animation-duration: 6.6s; }
  @keyframes danceA {
    0%, 100% { transform: none; }
    8% { transform: translate(-6px, -14px) rotate(-10deg); }
    16% { transform: translate(-12px, 0) rotate(6deg); }
    24% { transform: translate(-18px, -14px) rotate(-8deg); }
    32% { transform: translate(-22px, 0); }
    40% { transform: translate(-22px, -6px) scaleX(-1) rotate(8deg); }
    48% { transform: translate(-15px, -16px) scaleX(-1) rotate(-6deg); }
    56% { transform: translate(-8px, 0) scaleX(-1); }
    64% { transform: translate(-2px, -14px) scaleX(-1) rotate(8deg); }
    72% { transform: translate(6px, 0); }
    80% { transform: translate(0, -12px) rotate(-14deg); }
    88% { transform: rotate(14deg); }
  }
  @keyframes danceB {
    0%, 100% { transform: none; }
    12% { transform: translateY(-18px) rotate(-15deg) scale(1.05); }
    22% { transform: scale(1.14, 0.86); }
    34% { transform: translate(-10px, -28px) rotate(-180deg); }
    46% { transform: translate(-20px, 0) rotate(-360deg) scale(1.12, 0.88); }
    58% { transform: translate(-20px, -12px) rotate(-360deg); }
    70% { transform: translate(-10px, 0) rotate(-360deg) scale(1.12, 0.88); }
    82% { transform: translate(0, -16px) rotate(-345deg); }
    92% { transform: rotate(-360deg); }
  }
  @keyframes danceC {
    0%, 100% { transform: none; }
    10% { transform: translateX(-5px) rotate(-17deg); }
    20% { transform: translateX(5px) rotate(17deg); }
    30% { transform: translate(-8px, -10px) rotate(-17deg); }
    40% { transform: translate(-13px, 0) rotate(17deg); }
    50% { transform: translate(-18px, -16px) rotate(-12deg) scale(1.1); }
    60% { transform: translate(-18px, 0) rotate(12deg) scale(1.1, 0.9); }
    70% { transform: translate(-10px, -8px) rotate(-17deg); }
    80% { transform: translate(-3px, 0) rotate(17deg); }
    90% { transform: translateY(-6px) rotate(-8deg); }
  }
  @keyframes danceD {
    0%, 100% { transform: none; }
    20% { transform: translateX(-22px) rotate(-4deg); }
    25% { transform: translate(-22px, -14px) rotate(8deg); }
    30% { transform: translateX(-22px) scaleX(-1); }
    48% { transform: translateX(4px) scaleX(-1) rotate(4deg); }
    54% { transform: translate(4px, -16px) scaleX(-1); }
    60% { transform: translateX(4px); }
    70% { transform: translate(-10px, -24px) rotate(180deg); }
    80% { transform: translateX(-10px) rotate(360deg) scale(1.15, 0.85); }
    90% { transform: translateY(-8px) rotate(360deg); }
  }
  @keyframes danceE {
    0%, 100% { transform: none; }
    10% { transform: scale(1.18, 0.8); }
    18% { transform: translateY(-26px) scale(0.9, 1.12); }
    26% { transform: scale(1.18, 0.8); }
    34% { transform: translate(-11px, -20px) rotate(-14deg); }
    42% { transform: translateX(-21px) scale(1.15, 0.85); }
    50% { transform: translate(-21px, -26px) rotate(14deg); }
    58% { transform: translateX(-21px) scale(1.15, 0.85); }
    70% { transform: translate(-10px, -18px) rotate(-10deg); }
    80% { transform: scale(1.15, 0.85); }
    90% { transform: translateY(-10px); }
  }

  /* Puppy parts (classes live inside each puppy's SVG) */
  .m-fig { transform-box: fill-box; transform-origin: 50% 100%; animation: mBob 1.3s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes mBob { 50% { transform: translateY(-7px) scale(1.05, 0.95); } }
  .m-head { transform-box: fill-box; transform-origin: 50% 88%; animation: mTilt 4.2s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * 3); }
  @keyframes mTilt { 0%, 55%, 100% { transform: none; } 65% { transform: rotate(-11deg); } 75% { transform: rotate(9deg); } 85% { transform: rotate(-4deg); } }
  .casting .m-head { animation: mShake 0.22s ease-in-out 4; }
  @keyframes mShake { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
  .card:hover .m-fig { animation: mWiggle 0.42s ease-in-out infinite; }
  @keyframes mWiggle { 25% { transform: translateY(-6px) rotate(-7deg) scale(1.04); } 75% { transform: translateY(-6px) rotate(7deg) scale(1.04); } }
  .m-shadow { transform-box: fill-box; transform-origin: center; animation: mShadow 1.3s ease-in-out infinite; animation-delay: var(--d, 0s); }
  @keyframes mShadow { 50% { transform: scaleX(0.82); opacity: 0.25; } }
  .m-eyes { transform-box: fill-box; transform-origin: center; animation: mBlink 3.6s infinite; animation-delay: calc(var(--d, 0s) * 2.3); }
  @keyframes mBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.12); } }
  .m-happy { opacity: 0; }
  .casting .m-eyes { opacity: 0; }
  .casting .m-happy { opacity: 1; }
  .m-tail { transform-box: fill-box; transform-origin: 10% 95%; animation: mWag 0.3s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
  @keyframes mWag { from { transform: rotate(-18deg); } to { transform: rotate(28deg); } }
  .casting .m-tail { animation: mWagFast 0.07s linear infinite alternate; }
  @keyframes mWagFast { from { transform: rotate(-30deg); } to { transform: rotate(40deg); } }
  .m-ear { transform-box: fill-box; animation: mEarL 3.6s ease-in-out infinite; animation-delay: calc(var(--d, 0s) * 1.7); }
  .m-ear.el { transform-origin: 85% 10%; }
  .m-ear.er { transform-origin: 15% 10%; animation-name: mEarR; }
  @keyframes mEarL { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(-22deg); } 84% { transform: rotate(10deg); } 92% { transform: rotate(-5deg); } }
  @keyframes mEarR { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(22deg); } 84% { transform: rotate(-10deg); } 92% { transform: rotate(5deg); } }
  .casting .m-ear.el { animation: mFlopL 0.18s ease-in-out infinite alternate; }
  .casting .m-ear.er { animation: mFlopR 0.18s ease-in-out infinite alternate; }
  @keyframes mFlopL { from { transform: rotate(8deg); } to { transform: rotate(-30deg); } }
  @keyframes mFlopR { from { transform: rotate(-8deg); } to { transform: rotate(30deg); } }
  .sad .m-ear.el { transform: rotate(24deg); animation: none; }
  .sad .m-ear.er { transform: rotate(-24deg); animation: none; }
  .m-tongue { transform-box: fill-box; transform-origin: 50% 0; animation: mPant 0.34s ease-in-out infinite alternate; }
  @keyframes mPant { to { transform: scaleY(1.22); } }
  .casting .m-tongue { animation: mLick 0.14s ease-in-out infinite alternate; }
  @keyframes mLick { from { transform: scale(1.1, 1.2); } to { transform: scale(1.3, 1.6) rotate(6deg); } }
  .sad .m-tongue { animation: none; transform: scaleY(0.5); }
  .m-scarf { transform-box: fill-box; transform-origin: 50% 0; }
  .casting .m-scarf { animation: mFlutter 0.16s ease-in-out infinite alternate; }
  @keyframes mFlutter { from { transform: rotate(-6deg); } to { transform: rotate(6deg) scaleY(1.06); } }
  .m-bubble { transform-box: fill-box; transform-origin: 20% 100%; animation: mBubble 3.2s ease-in-out infinite; }
  @keyframes mBubble { 50% { transform: translateY(-2px) rotate(-4deg); } }
  .casting .m-bubble { animation: mBubblePop 0.6s ease-out; }
  @keyframes mBubblePop { 30% { transform: scale(1.35); } 60% { transform: scale(0.85); } }
  .m-ticket { transform-box: fill-box; transform-origin: center; }
  .casting .m-ticket { animation: mGulp 0.6s ease-in-out; }
  @keyframes mGulp { 40% { transform: translateY(5px) scale(0.6); opacity: 0.3; } }
  .m-env { transform-box: fill-box; transform-origin: 50% 0; }
  .casting .m-env { animation: mWave 0.6s ease-in-out; }
  @keyframes mWave { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
  .m-spark { transform-box: fill-box; transform-origin: center; animation: twinkle 1.6s ease-in-out infinite; }
  .m-spark.s2 { animation-delay: -0.5s; }
  .m-spark.s3 { animation-delay: -1.1s; }
  .m-smoke { transform-box: fill-box; transform-origin: center; animation: mSmoke 2.6s ease-out infinite; }
  @keyframes mSmoke { from { transform: translateY(6px) scale(0.4); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-12px) scale(1.15); opacity: 0; } }
  .casting .m-smoke { animation-duration: 0.7s; }
  .sad .m-eyes { transform: scaleY(0.45); animation: none; }

  .actions { display: flex; gap: 8px; margin-top: auto; position: relative; z-index: 1; }

  button {
    font: inherit;
    cursor: pointer;
    border-radius: 14px;
    border: 1px solid var(--line);
    transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.12s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.15s;
  }
  button:active { transform: scale(0.95); }
  button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

  .minus {
    width: 52px;
    background: var(--panel-2);
    color: var(--text);
    font-size: 22px;
    font-weight: 700;
    padding: 8px 0;
  }
  .minus:hover { border-color: var(--muted); }

  .plus {
    flex: 1;
    background: linear-gradient(135deg, var(--accent), var(--violet));
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-family: var(--hud);
    font-weight: 600;
    font-size: 24px;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-shadow: 0 2px 0 rgba(var(--ink-rgb), 0.35);
  }
  .plus:hover { filter: brightness(1.1) saturate(1.1); box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
  .card.rare .plus { background: linear-gradient(135deg, var(--gold), var(--accent)); }

  .float {
    position: absolute;
    font-family: var(--hud);
    font-weight: 700;
    font-size: 40px;
    color: var(--m);
    -webkit-text-stroke: 1.5px rgba(var(--ink-rgb), 0.7);
    text-shadow: 0 0 14px rgba(var(--m-rgb), 0.9);
    pointer-events: none;
    z-index: 3;
  }
  .float.down { color: var(--muted); text-shadow: none; }

  /* Reset box */
  .reset {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.16), transparent 65%), rgba(var(--panel-rgb), 0.6);
    border: 2px dashed rgba(var(--accent-rgb), 0.55);
    color: var(--accent);
    box-shadow: none;
  }
  .reset:hover {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--violet-rgb), 0.9));
    border-color: transparent;
    color: #fff;
  }
  .reset svg { width: 46px; height: 46px; transition: transform 0.7s cubic-bezier(0.3, 1.4, 0.5, 1); }
  .reset:hover svg { transform: rotate(-25deg) scale(1.12); }
  .reset .big { font-family: var(--hud); font-size: 30px; font-weight: 600; }
  .reset .sub { font-size: 13px; opacity: 0.9; max-width: 200px; }

  .hint { color: var(--muted); font-size: 12.5px; margin-top: 22px; text-align: center; line-height: 1.6; }

  /* ---------- magic effects ---------- */

  .orb {
    position: fixed;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    z-index: 59;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0 22%, var(--oc, var(--accent)) 45%, rgba(255, 255, 255, 0) 70%);
    box-shadow: 0 0 16px 4px var(--oc, var(--accent));
  }
  .orb::after {
    content: "";
    position: absolute;
    inset: -7px;
    background: #fff;
    clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
    opacity: 0.85;
    animation: spin 0.6s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .heart {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 59;
    pointer-events: none;
    font-size: 18px;
    line-height: 1;
    color: var(--hc, var(--accent));
    text-shadow: 0 0 10px currentColor;
  }

  /* +1 feed in the top corner */
  .feed {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 65;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
  }
  .feed-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px 4px 6px;
    background: rgba(var(--panel-rgb), 0.94);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(var(--shade-rgb), 0.4);
    font-family: var(--hud);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
  }
  .feed-item svg { width: 36px; height: 30px; overflow: visible; }
  .feed-item b { color: var(--accent); font-weight: 700; }
  .feed-item.neg { opacity: 0.85; }
  .feed-item.neg b { color: var(--muted); }
  .feed-item.hot {
    background: linear-gradient(90deg, var(--gold), var(--accent));
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--ink);
    box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.55);
  }
  .feed-item.hot b { color: var(--ink); }

  /* Big celebration (Survey +1, game level ups and new best scores) */
  .hype { position: fixed; inset: 0; z-index: 57; pointer-events: none; overflow: hidden; display: none; }
  .hype.on { display: block; }
  .hype-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 42%, rgba(var(--deep-rgb), 0.72) 15%, rgba(var(--shade-rgb), 0.93) 100%);
    opacity: 0;
  }
  .hype-white { position: absolute; inset: 0; background: radial-gradient(circle, #fff, #ffd9f0 60%, #e4d6ff); opacity: 0; }
  .hype-circle {
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(520px, 92vmin);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    opacity: 0;
  }
  .hype-circle svg { width: 100%; height: 100%; display: block; overflow: visible; animation: spin 18s linear infinite; }
  .hype-circle .ring2 { transform-origin: 200px 200px; animation: spin 9s linear infinite reverse; }
  .hype-hero {
    position: absolute;
    left: 50%;
    top: 40%;
    width: min(280px, 60vw);
    aspect-ratio: 120 / 100;
    transform: translate(-50%, -50%);
  }
  .hype-hero > div { width: 100%; height: 100%; }
  .hype-hero::before {
    content: "";
    position: absolute;
    inset: -45%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 236, 170, 0.55), rgba(var(--accent-rgb), 0.22) 55%, transparent);
  }
  .hype-hero svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 14px 22px rgba(var(--shade-rgb), 0.55)); }
  .hype-banner { position: absolute; left: 0; right: 0; top: 66%; text-align: center; padding: 0 16px; }
  .hype-title {
    display: inline-block;
    background-size: 240% 100% !important;
    animation: titleShine 1.4s linear infinite;
    font-family: var(--hud);
    font-weight: 700;
    font-size: clamp(46px, 9vw, 116px);
    line-height: 1;
    letter-spacing: 0.01em;
    background: linear-gradient(90deg, var(--gold), #ff9fd4 35%, var(--accent) 55%, var(--violet) 80%, var(--sky));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 5px 0 rgba(var(--ink-rgb), 0.85)) drop-shadow(0 0 24px rgba(var(--accent-rgb), 0.45));
    opacity: 0;
  }
  @keyframes titleShine { to { background-position: -240% 0; } }
  .hype-sub {
    margin-top: 8px;
    font-family: var(--hud);
    font-weight: 600;
    font-size: clamp(15px, 2.4vw, 24px);
    letter-spacing: 0.04em;
    color: #fff;
    text-shadow: 0 2px 0 rgba(var(--ink-rgb), 0.7);
    opacity: 0;
  }
  .ring.loose { position: fixed; z-index: 59; pointer-events: none; }
  .bark {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 61;
    pointer-events: none;
    padding: 4px 12px 5px;
    border-radius: 999px;
    background: #fff;
    border: 3px solid var(--m, var(--accent));
    color: var(--ink);
    font-family: var(--hud);
    font-weight: 700;
    font-size: 17px;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(var(--shade-rgb), 0.4), 0 0 18px var(--m, var(--accent));
  }
  .bark::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #fff;
    border-right: 3px solid var(--m, var(--accent));
    border-bottom: 3px solid var(--m, var(--accent));
    transform: rotate(45deg);
  }
  .parade { position: absolute; left: 0; top: 0; }
  .parade svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 6px 10px rgba(var(--shade-rgb), 0.5)); }
  .ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 3px solid var(--rc, var(--accent));
    box-shadow: 0 0 24px var(--rc, var(--accent)), inset 0 0 14px var(--rc, var(--accent));
  }
  .puff {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #f3e8ff 60%, rgba(243, 232, 255, 0.6));
  }

  /* Reset wave + glow */
  .beam {
    position: fixed;
    top: 0; bottom: 0;
    left: -220px;
    width: 180px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), rgba(var(--gold-rgb), 0.45), rgba(var(--good-rgb), 0.4), rgba(var(--sky-rgb), 0.4), transparent);
    filter: blur(8px);
    pointer-events: none;
    z-index: 55;
    opacity: 0;
  }
  .flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 56;
    background: radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), 0.3), rgba(var(--violet-rgb), 0.12) 40%, transparent 65%);
    opacity: 0;
  }

  /* ---------- shared bits ---------- */

  .stat-label {
    display: block;
    font-family: var(--hud);
    font-weight: 600;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 0.02em;
  }
  .bar { height: 4px; background: var(--panel-2); overflow: hidden; }
  .bar-fill {
    height: 100%;
    width: 0;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .small-note {
    font-family: var(--hud);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.05em;
  }
  h2 {
    font-family: var(--hud);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .ghost {
    background: var(--panel-2);
    color: var(--text);
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
  }
  .ghost:hover:not(:disabled) { border-color: var(--accent); color: #fff; }

  /* ---------- history ---------- */

  .history-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .badge {
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 0 9px;
    font-variant-numeric: tabular-nums;
  }
  .history-actions { display: flex; gap: 8px; }
  .table-wrap {
    position: relative;
    background: var(--panel);
    border: 1px solid var(--line);
    overflow-x: auto;
  }
  table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
  th {
    text-align: right;
    padding: 12px 14px;
    color: var(--muted);
    font-family: var(--hud);
    font-size: 14px;
    letter-spacing: 0.02em;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  td {
    padding: 14px;
    text-align: right;
    border-bottom: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  th:first-child, td:first-child { text-align: left; }
  tbody tr { transition: background 0.15s; }
  tbody tr:hover { background: var(--panel-2); }
  td.period strong { display: block; font-weight: 700; }
  td.period span { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; }
  td.row-total { color: var(--accent); font-weight: 800; }
  td.del-cell { width: 1%; text-align: center; padding: 6px 10px; }
  tfoot td { background: rgba(0, 0, 0, 0.3); font-weight: 800; border-bottom: none; }
  td.empty { text-align: center; color: var(--muted); padding: 32px 16px; white-space: normal; }
  .del {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
    width: 32px;
    height: 32px;
    font-size: 18px;
    line-height: 1;
  }
  .del:hover { color: var(--accent); border-color: var(--line); }

  /* ---------- schedule ---------- */

  .sched-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .status {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    align-items: end;
    padding: 22px 22px 20px;
    margin-bottom: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), transparent 60%), var(--panel);
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .status.on { border-color: var(--accent); box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.18); }
  .status-label {
    font-family: var(--hud);
    font-size: 50px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    margin-top: 6px;
    color: var(--text);
  }
  .status.on .status-label { color: var(--accent); }
  .status-detail { color: var(--text); font-size: 14px; margin-top: 8px; }
  .status-side { text-align: right; }
  .status-count { font-family: var(--hud); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .status-bar { grid-column: 1 / -1; margin-top: 10px; }

  .days { display: flex; flex-direction: column; gap: 10px; }
  .day-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px 14px 23px;
    background: var(--panel);
    border: 1px solid var(--line);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .day-row::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
  }
  .day-row .corner { opacity: 0; transition: opacity 0.2s; }
  .day-row:hover { border-color: rgba(var(--accent-rgb), 0.5); }
  .day-row:hover .corner, .day-row.today .corner { opacity: 1; }
  .day-main { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; min-width: 0; }
  .day-name {
    width: 150px;
    font-family: var(--hud);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .shift-time {
    font-family: var(--hud);
    font-size: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .next-day {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    border: 1px solid var(--accent-soft);
    padding: 0 5px;
    margin-left: 6px;
    vertical-align: 4px;
  }
  .day-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .pills { display: flex; gap: 6px; }
  .shift-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hud);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
  }
  .shift-tag svg { width: 16px; height: 16px; color: var(--accent); }
  .pill {
    display: none;
    font-family: var(--hud);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0 8px;
    white-space: nowrap;
  }
  .today .today-pill { display: inline-block; border: 1px solid var(--accent); color: var(--accent); }
  .live .live-pill { display: inline-block; background: var(--accent); color: #fff; animation: blink 1.4s ease-in-out infinite; }
  .day-row.today { border-color: rgba(var(--accent-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), transparent 60%), var(--panel); }
  .day-row.live { border-color: var(--accent); box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.22); }
  .day-row.off { background: transparent; border-style: dashed; }
  .day-row.off.today { background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 60%); }
  .day-row.off::before { background: var(--line); }
  .day-row.off .day-name { color: var(--muted); }
  .day-row.off .shift-time { color: var(--accent); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }

  /* ---------- mini games ---------- */

  .q-next {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-family: var(--hud);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 8px 22px;
  }
  .q-next:hover { background: var(--accent-hover); }

  .game-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .game-stage { scroll-margin-top: 12px; }
  .game-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px 20px 16px;
    border-radius: 24px;
    border: 1px solid var(--line);
    background: radial-gradient(circle at 14% 40%, rgba(var(--m-rgb), 0.26), transparent 55%), var(--panel);
    box-shadow: 0 10px 28px rgba(var(--shade-rgb), 0.35);
    transition: transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1), border-color 0.25s, box-shadow 0.25s;
  }
  .game-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--m-rgb), 0.7);
    box-shadow: 0 14px 34px rgba(var(--shade-rgb), 0.45), 0 0 26px rgba(var(--m-rgb), 0.25);
  }
  .game-card-mon { flex: none; width: 128px; height: 106px; }
  .game-card-mon svg { width: 100%; height: 100%; display: block; overflow: visible; }
  .game-card-body { min-width: 0; flex: 1; }
  .game-card h3 { font-family: var(--hud); font-weight: 600; font-size: 28px; line-height: 1.1; }
  .game-card p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 6px 0 14px; }
  .game-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .game-keys {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    color: var(--muted);
    font-size: 13px;
  }
  .game-keys b { color: var(--gold); margin-right: 3px; }

  .game-hud { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
  .hud-item { min-width: 82px; padding: 6px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
  .hud-item b { display: block; font-family: var(--hud); font-weight: 600; font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
  .hud-item span { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .hud-mode { font-family: var(--hud); font-weight: 600; font-size: 18px; color: var(--sky); padding: 0 6px; }
  .hud-lives { display: flex; gap: 3px; margin-left: auto; font-size: 24px; line-height: 1; }
  .hud-lives i { display: inline-block; font-style: normal; color: var(--accent); text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7); }
  .hud-lives i.gone { color: var(--line); text-shadow: none; }

  .game-field {
    position: relative;
    height: clamp(320px, calc(100vh - 215px), 520px);
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid var(--line);
    background:
      radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 34% 42%, #ffd9f0, transparent),
      radial-gradient(2px 2px at 58% 12%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 76% 36%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 90% 14%, var(--gold), transparent),
      radial-gradient(1.5px 1.5px at 22% 64%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 66% 58%, var(--violet), transparent),
      radial-gradient(ellipse at 50% 0%, rgba(var(--violet-rgb), 0.28), transparent 60%),
      linear-gradient(180deg, #1c1140, #2a1a55 70%, #33205f);
    box-shadow: inset 0 0 40px rgba(var(--shade-rgb), 0.5);
    transition: box-shadow 0.4s, border-color 0.4s;
  }
  .game-field.chill { border-color: var(--sky); box-shadow: inset 0 0 70px rgba(var(--sky-rgb), 0.45); }
  .game-progress { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: rgba(255, 255, 255, 0.06); z-index: 3; }
  .game-progress div { height: 100%; width: 0; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, var(--accent), var(--gold)); transition: width 0.3s; }

  .fall { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; }
  .fall-in {
    font-family: var(--hud);
    font-weight: 500;
    font-size: 19px;
    white-space: nowrap;
    padding: 5px 14px 6px;
    border-radius: 999px;
    color: #fff;
    background: rgba(var(--panel-rgb), 0.94);
    border: 2px solid rgba(var(--m-rgb), 0.85);
    box-shadow: 0 0 14px rgba(var(--m-rgb), 0.35), 0 4px 0 rgba(var(--shade-rgb), 0.35);
  }
  .fall.gap .fall-in {
    width: max-content;
    max-width: min(300px, 74vw);
    white-space: normal;
    padding: 10px 14px;
    border-radius: 16px;
    font-family: "Nunito", system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
  }
  .fall .hit { color: var(--gold); text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.8); }
  .fall.lock .fall-in { border-color: var(--gold); box-shadow: 0 0 22px rgba(var(--gold-rgb), 0.55), 0 4px 0 rgba(var(--shade-rgb), 0.35); }
  .fall .blank {
    display: inline-block;
    margin: 0 2px;
    padding: 0 5px;
    border-radius: 6px;
    background: rgba(var(--m-rgb), 0.22);
    color: var(--m);
    letter-spacing: 0.15em;
  }
  .fall .pw { font-style: normal; margin-right: 6px; color: var(--gold); text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.9); }
  .fall.power .fall-in {
    background: linear-gradient(135deg, rgba(var(--m-rgb), 0.5), rgba(var(--panel-rgb), 0.94) 70%);
    animation: powerGlow 0.8s ease-in-out infinite alternate;
  }
  @keyframes powerGlow { to { box-shadow: 0 0 28px rgba(var(--m-rgb), 0.85), 0 4px 0 rgba(var(--shade-rgb), 0.35); } }
  .fall.spawn .fall-in { animation: fallIn 0.32s ease-out; }
  .fall.power.spawn .fall-in { animation: fallIn 0.32s ease-out, powerGlow 0.8s ease-in-out 0.32s infinite alternate; }
  @keyframes fallIn { from { transform: scale(0.4); opacity: 0; } }
  .fall.zapping .fall-in { border-color: #fff; box-shadow: 0 0 28px rgba(var(--m-rgb), 0.95); }
  .fall.zapped .fall-in { animation: zapPop 0.36s ease-out forwards; }
  @keyframes zapPop { 35% { transform: scale(1.7) rotate(-8deg); opacity: 1; } to { transform: scale(0.1) rotate(25deg); opacity: 0; } }
  .fall.landed .fall-in { animation: splat 0.6s ease-out forwards; border-color: #ff8a9a; color: #ffc2cb; }
  @keyframes splat { 20% { transform: scale(1.5, 0.5) rotate(-6deg); } 45% { transform: scale(0.9, 1.2) rotate(4deg); } to { transform: scale(1.8, 0.2) translateY(30px); opacity: 0; } }

  .float-score.big { font-size: 34px; color: #fff; text-shadow: 0 3px 0 rgba(var(--ink-rgb), 0.8), 0 0 18px rgba(var(--accent-rgb), 0.9); }
  .combo-shout {
    position: absolute;
    left: 50%;
    top: 42%;
    z-index: 4;
    pointer-events: none;
    font-family: var(--hud);
    font-weight: 700;
    font-size: clamp(40px, 8vw, 76px);
    white-space: nowrap;
    color: var(--m);
    -webkit-text-stroke: 2px #fff;
    text-shadow: 0 6px 0 rgba(var(--ink-rgb), 0.8), 0 0 30px var(--m);
  }
  .float-score {
    position: absolute;
    z-index: 4;
    font-family: var(--hud);
    font-weight: 700;
    font-size: 26px;
    color: var(--gold);
    pointer-events: none;
    text-shadow: 0 2px 0 rgba(var(--ink-rgb), 0.8), 0 0 12px rgba(var(--gold-rgb), 0.7);
  }

  .game-ground {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 96px;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 3% 6px;
    background:
      radial-gradient(ellipse 34% 60% at 18% 104%, rgb(var(--deep2-rgb)), transparent 72%),
      radial-gradient(ellipse 40% 64% at 62% 106%, #4c2e88, transparent 72%),
      radial-gradient(ellipse 30% 56% at 92% 104%, rgb(var(--deep2-rgb)), transparent 72%),
      linear-gradient(180deg, transparent 30%, rgba(var(--deep2-rgb), 0.85));
  }
  .g-mon { width: 84px; height: 70px; }
  .g-mon svg { width: 100%; height: 100%; display: block; overflow: visible; }

  .game-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 16px;
    overflow: auto;
    background: rgba(var(--shade-rgb), 0.74);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .go-box { width: 100%; max-width: 580px; text-align: center; }
  .go-count, .go-title {
    font-family: var(--hud);
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(90deg, var(--gold), var(--accent) 50%, var(--violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 0 rgba(var(--ink-rgb), 0.85));
  }
  .go-count { font-size: 130px; }
  .go-title { font-size: 48px; }
  .go-sub { margin-top: 6px; color: var(--muted); font-size: 14px; }
  .go-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 12px; }
  .go-stats div { padding: 8px 6px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
  .go-stats b { display: block; font-family: var(--hud); font-size: 24px; font-weight: 600; }
  .go-stats span { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .go-head { margin: 4px 0 6px; text-align: left; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .go-missed { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; text-align: left; }
  .go-missed li { padding: 8px 12px; border-radius: 12px; background: var(--panel-2); font-size: 13px; line-height: 1.45; }
  .go-missed b { color: var(--gold); }
  .go-missed a, .game-fact a { color: var(--accent); white-space: nowrap; }
  .go-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

  .game-input-row { display: flex; gap: 10px; margin-top: 12px; }
  .game-input-row input {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    border-radius: 16px;
    border: 2px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font-family: var(--hud);
    font-size: 21px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
  }
  .game-input-row input::placeholder { color: var(--muted); font-size: 17px; }
  .game-input-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16); }
  .game-input-row input.bad { border-color: #ff8a9a; box-shadow: 0 0 0 4px rgba(255, 138, 154, 0.2); }
  .game-input-row .q-next { padding: 8px 24px; }
  .game-fact { min-height: 42px; margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(var(--panel-rgb), 0.7); border: 1px solid var(--line); color: var(--text); font-size: 13.5px; line-height: 1.5; }
  .game-fact b { color: var(--gold); font-weight: 800; }

  /* ---------- data (notes) ---------- */

  .notes-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
  .note-search {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    background: var(--panel);
    border: 1px solid var(--line);
  }
  .note-search:focus-within { border-color: var(--accent); }
  .note-search svg { flex: none; width: 16px; height: 16px; color: var(--muted); }
  .note-search input {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    background: transparent;
    border: 0;
    outline: none;
    color: var(--text);
    font: inherit;
    font-size: 15px;
  }
  .notes-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .sync-btn { display: inline-flex; align-items: center; gap: 8px; }
  .sync-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
  .sync-dot.ok { background: var(--good); box-shadow: 0 0 8px rgba(var(--good-rgb), 0.6); }
  .sync-dot.busy { background: var(--gold); animation: syncPulse 0.8s ease-in-out infinite alternate; }
  .sync-dot.err { background: var(--accent); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.7); }
  @keyframes syncPulse { to { opacity: 0.3; } }

  .composer, .note-dialog { position: relative; background: var(--panel); border: 1px solid var(--line); }
  .composer {
    max-width: 640px;
    margin: 0 auto 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .composer.open { border-color: rgba(var(--accent-rgb), 0.6); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 14px 34px rgba(0, 0, 0, 0.45); }
  :where(.composer, .note-dialog) :where(input, textarea) {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    resize: none;
    color: var(--text);
    font: inherit;
  }
  .composer ::placeholder, .note-dialog ::placeholder { color: var(--muted); }
  .c-title, .e-title { padding: 14px 16px 4px; font-size: 17px; font-weight: 700; }
  .c-body { padding: 14px 16px; font-size: 15px; line-height: 1.5; min-height: 50px; }
  .composer.open .c-body { padding-top: 6px; min-height: 96px; }
  .c-foot, .e-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px 12px 16px; }
  .c-foot .small-note { margin-left: auto; }
  .c-foot .q-next, .e-foot .q-next { font-size: 16px; padding: 6px 18px; }

  .swatches { display: flex; gap: 6px; }
  .swatch { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 2px solid var(--line); }
  .swatch.on { border-color: var(--text); box-shadow: 0 0 0 2px rgba(253, 246, 255, 0.25); }
  .s-none { background: var(--panel-2); }
  .s-red { background: #c43a48; }
  .s-green { background: #1f8a64; }
  .s-amber { background: #b9862a; }
  .s-blue { background: #2f6fbd; }
  .s-violet { background: #7650c4; }
  .c-red { background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.17), rgba(var(--accent-rgb), 0.07)), var(--panel); }
  .c-green { background: linear-gradient(180deg, rgba(var(--good-rgb), 0.15), rgba(var(--good-rgb), 0.05)), var(--panel); }
  .c-amber { background: linear-gradient(180deg, rgba(240, 180, 60, 0.16), rgba(240, 180, 60, 0.05)), var(--panel); }
  .c-blue { background: linear-gradient(180deg, rgba(80, 150, 255, 0.16), rgba(80, 150, 255, 0.05)), var(--panel); }
  .c-violet { background: linear-gradient(180deg, rgba(160, 110, 255, 0.17), rgba(160, 110, 255, 0.05)), var(--panel); }

  .notes-label {
    margin: 4px 0 10px;
    font-family: var(--hud);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
  }
  #notes-pinned-wrap { margin-bottom: 18px; }
  .notes-grid { display: flex; align-items: flex-start; gap: 12px; }
  .notes-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
  .note {
    position: relative;
    display: block;
    padding: 14px 14px 8px 17px;
    background: var(--panel);
    border: 1px solid var(--line);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  }
  .note::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--line);
  }
  .note.c-red::before { background: var(--accent); }
  .note.c-green::before { background: var(--good); }
  .note.c-amber::before { background: var(--gold); }
  .note.c-blue::before { background: #5096ff; }
  .note.c-violet::before { background: #a06eff; }
  .note:hover, .note:focus-visible {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transform: translateY(-1px);
  }
  .note h3 { margin: 0 26px 6px 0; font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
  .note-body {
    max-height: 300px;
    overflow: hidden;
    color: #ece3fb;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .note.long .note-body {
    -webkit-mask-image: linear-gradient(#000 72%, transparent);
    mask-image: linear-gradient(#000 72%, transparent);
  }
  .note-body a { color: var(--accent); }
  .note-pin {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 0;
    color: var(--muted);
    opacity: 0;
  }
  .note-pin.on { color: var(--accent); opacity: 1; }
  .note-foot { display: flex; align-items: center; justify-content: space-between; min-height: 30px; margin-top: 8px; }
  .note-date { font-size: 12px; color: var(--muted); }
  .note-tools { display: flex; gap: 2px; opacity: 0; transition: opacity 0.15s; }
  .note:hover .note-pin, .note:focus-within .note-pin, .note:hover .note-tools, .note:focus-within .note-tools { opacity: 1; }
  .note-pin svg, .note-tools svg, .icon-btn svg { width: 16px; height: 16px; }
  .note-tools button, .icon-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid transparent;
    color: var(--muted);
  }
  .note-tools button:hover, .icon-btn:hover, .note-pin:hover { color: var(--text); border-color: var(--line); }
  .note-tools button[data-act="delete"]:hover, #e-delete:hover { color: var(--accent); }
  .icon-btn.on { color: var(--accent); }
  .notes-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 14px; border: 1px dashed var(--line); }
  @media (hover: none) {
    .note-pin, .note-tools { opacity: 1; }
  }

  .note-modal {
    position: fixed;
    inset: 0;
    z-index: 62;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(var(--shade-rgb), 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
  }
  .note-dialog {
    width: min(660px, 100%);
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    border-color: var(--accent);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--accent-rgb), 0.15);
  }
  .e-body { flex: 1; min-height: 180px; padding: 6px 16px 14px; overflow: auto; font-size: 15px; line-height: 1.55; }
  .e-foot { border-top: 1px solid var(--line); padding-top: 10px; }
  .e-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
  .e-meta { width: 100%; order: 3; }

  .sheet-dialog { width: min(640px, 100%); gap: 14px; padding: 20px 22px 22px; overflow: auto; }
  .sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sheet-top h3 { font-family: var(--hud); font-size: 26px; font-weight: 700; letter-spacing: 0.04em; }
  #sheet-setup > * + *, #sheet-status > * + * { margin-top: 14px; }
  #sheet-setup > .sheet-fine + .sheet-fine { margin-top: 8px; }
  .sheet-intro { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
  .sheet-fine { color: var(--muted); font-size: 13px; line-height: 1.5; }
  .sheet-steps { padding-left: 22px; display: flex; flex-direction: column; gap: 16px; font-size: 14.5px; line-height: 1.55; }
  .sheet-steps li::marker { color: var(--accent); font-family: var(--hud); font-weight: 700; }
  .sheet-steps strong, .sheet-intro strong { color: #fff; }
  .sheet-dialog a { color: var(--accent); }
  .gs-view {
    max-height: 150px;
    margin-top: 8px;
    padding: 10px 12px;
    overflow: auto;
    background: #150d2c;
    border: 1px solid var(--line);
    color: #e3d9fb;
    font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    white-space: pre;
  }
  .sheet-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
  .sheet-row input {
    flex: 1;
    min-width: 200px;
    padding: 9px 12px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    outline: none;
    color: var(--text);
    font: inherit;
    font-size: 14px;
  }
  .sheet-row input:focus { border-color: var(--accent); }
  .sheet-row .q-next { font-size: 16px; padding: 7px 20px; }
  .sheet-row .q-next:disabled { opacity: 0.6; cursor: wait; }
  .sheet-msg { min-height: 20px; margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
  .sheet-msg.err { color: #ff7a85; }
  .sheet-msg.good { color: var(--good); }
  .sheet-conn { display: flex; align-items: center; gap: 10px; font-size: 15.5px; }
  .sheet-conn a { font-weight: 700; }

  /* ---------- toast ---------- */

  .toast.show { animation: toastBoing 0.55s ease-out; }
  @keyframes toastBoing { 0% { transform: translate(-50%, 180%) scale(0.6); } 55% { transform: translate(-50%, -14px) scale(1.08); } 80% { transform: translate(-50%, 4px) scale(0.98); } 100% { transform: translate(-50%, 0); } }
  .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 180%);
    background: #1d1238;
    border: 1px solid var(--accent);
    box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.25);
    color: var(--text);
    padding: 12px 12px 12px 18px;
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    visibility: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s 0.3s;
    max-width: calc(100% - 32px);
    z-index: 65;
  }
  .toast.show {
    transform: translate(-50%, 0);
    visibility: visible;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
  }
  .toast button {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
    padding: 8px 14px;
  }

  /* ---------- magical theme: rounded, soft panels everywhere ---------- */

  h2 { font-weight: 600; font-size: 32px; letter-spacing: 0.005em; }
  .badge { border-radius: 999px; padding: 0 10px; background: var(--gold); color: var(--ink); font-size: 14px; line-height: 24px; }
  .ghost { border-radius: 12px; font-weight: 700; }
  .ghost:hover:not(:disabled) { border-color: var(--accent); color: #fff; background: var(--panel-2); }
  .stat-label, .notes-label { text-transform: uppercase; letter-spacing: 0.12em; }
  .bar { height: 6px; border-radius: 999px; }
  .bar-fill { border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--gold)); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7); }

  .table-wrap { border-radius: 20px; }
  tfoot td { background: rgba(var(--shade-rgb), 0.35); }
  td.row-total { color: var(--gold); }
  .del { border-radius: 10px; }

  .status { border-radius: 22px; background: radial-gradient(circle at 90% 10%, rgba(var(--gold-rgb), 0.16), transparent 50%), var(--panel); }
  .status.on { border-color: var(--good); box-shadow: 0 0 30px rgba(var(--good-rgb), 0.2); }
  .status.on .status-label { color: var(--good); }
  .status-label { font-weight: 600; color: var(--text); }
  .day-row { border-radius: 18px; padding-left: 20px; }
  .day-row::before { display: none; }
  .day-name { font-weight: 600; font-size: 23px; }
  .shift-time { font-weight: 500; }
  .shift-tag svg { color: var(--gold); }
  .next-day, .pill { border-radius: 999px; }
  .today .today-pill { border-color: var(--gold); color: var(--gold); }
  .live .live-pill { background: var(--good); color: var(--ink); }
  .day-row.today { border-color: rgba(var(--gold-rgb), 0.55); background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.1), transparent 60%), var(--panel); }
  .day-row.live { border-color: var(--good); box-shadow: 0 0 24px rgba(var(--good-rgb), 0.22); }
  .day-row.off .shift-time { color: var(--accent); font-weight: 600; }

  .q-next {
    border-radius: 14px;
    background: linear-gradient(135deg, var(--accent), var(--violet));
    border-color: rgba(255, 255, 255, 0.25);
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }
  .q-next:hover { background: linear-gradient(135deg, var(--accent), var(--violet)); filter: brightness(1.1); }

  .note-search { border-radius: 14px; }
  .composer, .note-dialog { border-radius: 20px; }
  .composer.open { border-color: rgba(var(--accent-rgb), 0.6); }
  .note { border-radius: 18px; overflow: hidden; }
  .note:hover, .note:focus-visible { transform: translateY(-2px); }
  .note-tools button, .icon-btn, .note-pin { border-radius: 10px; }
  .notes-empty { border-radius: 18px; border-width: 2px; }
  .note-modal { background: rgba(var(--shade-rgb), 0.72); }
  .note-dialog { box-shadow: 0 20px 60px rgba(var(--shade-rgb), 0.6), 0 0 34px rgba(var(--accent-rgb), 0.2); }
  .sheet-top h3 { font-weight: 600; letter-spacing: 0.01em; }
  .gs-view { border-radius: 12px; }
  .sheet-row input { border-radius: 12px; }
  .sync-dot.busy { background: var(--gold); }

  .toast { border-radius: 18px; background: var(--panel); box-shadow: 0 10px 30px rgba(var(--shade-rgb), 0.5), 0 0 24px rgba(var(--accent-rgb), 0.25); }
  .toast button { border-radius: 12px; background: linear-gradient(135deg, var(--accent), var(--violet)); border-color: transparent; }

  /* ---------- small screens ---------- */

  @media (max-width: 560px) {
    h1 { font-size: 40px; }
    .count { font-size: 68px; }
    .tabs { gap: 0; }
    .tab-long { display: none; }
    .status { grid-template-columns: 1fr; }
    .status-side { text-align: left; }
    .status-label { font-size: 40px; }
    .day-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 2px 8px;
      padding: 12px 16px 12px 20px;
    }
    .day-main, .day-side { display: contents; }
    .day-name { width: auto; grid-column: 1; grid-row: 1; }
    .pills { grid-column: 2; grid-row: 1; }
    .shift-time { grid-column: 1 / -1; grid-row: 2; font-size: 24px; }
    .shift-tag { grid-column: 1 / -1; grid-row: 3; font-size: 13px; }
    .feed { top: 10px; right: 10px; }
    .tabs { display: grid; grid-template-columns: repeat(6, 1fr); }
    .tab { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 1px 10px; font-size: 10.5px; letter-spacing: 0; }
    .notes-grid, .notes-col { gap: 8px; }
    .game-picker { grid-template-columns: 1fr; }
    .game-card { flex-direction: column; text-align: center; padding: 18px 16px; }
    .game-card-foot { justify-content: center; }
    .game-field { height: min(400px, 58vh); }
    .game-ground { height: 72px; }
    .g-mon { width: 58px; height: 50px; }
    .hud-item { min-width: 0; padding: 4px 10px; }
    .hud-item b { font-size: 19px; }
    .hud-mode { display: none; }
    .hud-lives { font-size: 19px; }
    .fall-in { font-size: 16px; padding: 4px 11px 5px; }
    .fall.gap .fall-in { font-size: 13px; padding: 8px 11px; }
    .go-title { font-size: 38px; }
    .go-count { font-size: 100px; }
    .game-input-row input { font-size: 18px; padding: 10px 12px; }
    .game-input-row .q-next { padding: 8px 14px; }
    .note { padding: 12px 10px 6px 14px; }
    .note-body { max-height: 220px; font-size: 13.5px; }
    .notes-bar .note-search { min-width: 100%; }
    .notes-actions { width: 100%; }
    .notes-actions .ghost { flex: 1; }
    .notes-actions .sync-btn { flex-basis: 100%; justify-content: center; }
    .tab svg { display: block; }
    .tab .tab-count, .tab .live-dot { position: absolute; top: 5px; right: 12%; }
    .feed-item { font-size: 14px; padding: 4px 10px 4px 8px; }
    .feed-item svg { width: 30px; height: 25px; }
    .sound-btn { padding: 8px; top: 0; }
    .sound-btn span { display: none; }
    .moon { width: 58px; height: 58px; top: 10px; right: 8px; }
    .tabs { border-radius: 22px; padding: 5px; gap: 2px; }
    .tab { border-radius: 16px; }
    .count { font-size: 68px; }
    .monster { flex-basis: 108px; height: 90px; }
  }

  /* ---------- available support ---------- */

  .tab-count.duty { background: var(--good); color: var(--ink); }
  .tab-count.duty.zero { background: #ff5c7a; color: #fff; animation: dutyZero 0.9s ease-in-out infinite; }
  @keyframes dutyZero { 50% { transform: scale(1.25); box-shadow: 0 0 12px #ff5c7a; } }
  .tab-short { display: none; }

  /* On duty: big and bouncing on a soft glow, no box */
  .sup-on {
    position: relative;
    padding: 26px 0 18px;
    background: radial-gradient(ellipse 50% 32% at 50% 92%, rgba(var(--good-rgb), 0.22), transparent 75%);
  }
  .desk-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 14px 30px; min-height: 190px; }
  .desk-empty {
    display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    text-align: center; font-family: var(--hud); font-size: 24px; font-weight: 600; color: #ff8fa6;
  }
  .sup-on.empty { background: radial-gradient(ellipse 50% 32% at 50% 92%, rgba(255, 92, 122, 0.18), transparent 75%); }
  .sup-on.empty .desk-empty { display: block; }

  /* Off duty: small and snoozing underneath */
  .sup-off { margin-top: 18px; text-align: center; }
  .sup-off-title {
    font-family: var(--hud); font-weight: 600; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
  }
  .lounge-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; min-height: 96px; }

  /* A teammate: avatar and name */
  .mate { position: relative; display: flex; flex-direction: column; align-items: center; width: 140px; text-align: center; cursor: pointer; }
  .mate.flying { z-index: 5; }
  .lounge-row .mate { width: 86px; }
  .mate-fig { position: relative; width: 128px; height: 128px; }
  .lounge-row .mate-fig { width: 66px; height: 66px; }
  .mate-body { position: absolute; inset: 0; }
  .mate-body svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .mate-name { margin-top: 4px; font-family: var(--hud); font-weight: 600; font-size: 19px; }
  .lounge-row .mate-name { font-size: 14px; color: var(--soft); }

  .mate .a-shut, .mate .a-o, .mate .a-cap { display: none; }
  .mate:not(.on) .a-open, .mate:not(.on) .a-smile, .mate:not(.on) .a-headset, .mate:not(.on) .a-laptop, .mate:not(.on) .a-top { display: none; }
  .mate:not(.on) .a-shut, .mate:not(.on) .a-o, .mate:not(.on) .a-cap { display: inline; }
  .mate:not(.on) .mate-body svg { filter: saturate(0.6) brightness(0.85); }
  .mate.soon .mate-body svg { filter: none; }

  /* On duty: bounce, type, blink the mic */
  .mate.on .mate-body { transform-origin: 50% 92%; animation: mateBop 0.95s ease-in-out infinite; animation-delay: var(--d); }
  @keyframes mateBop {
    0%, 100% { transform: translateY(0) scale(1.05, 0.95); }
    50% { transform: translateY(-16px) scale(0.96, 1.05) rotate(var(--tilt)); }
  }
  .mate .hl, .mate .hr, .mate .a-mic, .mate .a-screen { transform-box: fill-box; transform-origin: center; }
  .mate.on .hl { animation: typeKey 0.22s ease-in-out infinite alternate; }
  .mate.on .hr { animation: typeKey 0.22s ease-in-out 0.11s infinite alternate; }
  @keyframes typeKey { to { transform: translateY(-5px); } }
  .mate.on .a-mic { animation: micBlink 0.8s steps(2) infinite; }
  @keyframes micBlink { 50% { fill: #fff; } }
  .mate.on .a-screen { animation: screenGlow 1.3s ease-in-out infinite; }
  @keyframes screenGlow { 50% { opacity: 0.6; transform: scale(1.15); } }

  /* Off duty: snoozing with Zzz */
  .mate:not(.on) .mate-body { transform-origin: 50% 100%; animation: mateSnore 3.2s ease-in-out infinite; animation-delay: var(--d); }
  @keyframes mateSnore { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.07, 1.03) rotate(4deg); } }
  .zzz { position: absolute; right: 2px; top: -2px; font-family: var(--hud); font-weight: 700; color: #cbbcff; pointer-events: none; }
  .mate.on .zzz, .mate.soon .zzz { display: none; }
  .zzz i { position: absolute; font-style: normal; opacity: 0; animation: zzz 2.8s ease-in infinite; }
  .zzz i:nth-child(1) { font-size: 12px; }
  .zzz i:nth-child(2) { font-size: 15px; animation-delay: 0.93s; }
  .zzz i:nth-child(3) { font-size: 20px; animation-delay: 1.86s; }
  @keyframes zzz {
    0% { opacity: 0; transform: translate(0, 12px) scale(0.4); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(22px, -30px) scale(1.25) rotate(18deg); }
  }

  /* Starting within the hour: alarm clock ringing, wriggling awake */
  .alarm { display: none; position: absolute; right: -8px; top: -8px; width: 28px; height: 28px; }
  .alarm svg { width: 100%; height: 100%; }
  .mate.soon .alarm { display: block; animation: alarmRing 0.32s ease-in-out infinite; }
  @keyframes alarmRing { 0%, 100% { transform: rotate(-22deg) scale(1.05); } 50% { transform: rotate(22deg) scale(0.95); } }
  .mate.soon .mate-body { animation: mateWake 1.5s ease-in-out infinite; animation-delay: var(--d); }
  @keyframes mateWake {
    0%, 55%, 100% { transform: none; }
    65% { transform: translateY(-9px) rotate(-10deg); }
    75% { transform: rotate(10deg); }
    85% { transform: translateY(-4px) rotate(-5deg); }
  }

  @media (max-width: 900px) {
    .tab-long { display: none; }
    .tab-short { display: inline; }
  }
  @media (max-width: 560px) {
    .desk-row { gap: 10px 8px; min-height: 150px; }
    .mate { width: 104px; }
    .mate-fig { width: 96px; height: 96px; }
    .mate-name { font-size: 16px; }
    .lounge-row { gap: 6px 4px; }
    .lounge-row .mate { width: 74px; }
    .lounge-row .mate-fig { width: 54px; height: 54px; }
    .lounge-row .mate-name { font-size: 12.5px; }
    .desk-empty { font-size: 19px; }
  }

  /* ---------- themes ---------- */

  html[data-theme="halloween"] {
    --soft: #e6d3e6;
    --bg: #150a1c; --panel: #22132b; --panel-2: #2f1a3b; --line: #4b2a57;
    --accent: #ff8a1f; --accent-hover: #ffa24d; --accent-soft: rgba(255, 138, 31, 0.35); --accent-faint: rgba(255, 138, 31, 0.1);
    --violet: #9b5cff; --gold: #ffcf4a; --sky: #9fe7ff; --text: #fff3e6; --muted: #c4a9c8; --good: #a6ff5c; --ink: #1d0f22;
    --accent-rgb: 255, 138, 31; --violet-rgb: 155, 92, 255; --panel-rgb: 34, 19, 43; --ink-rgb: 29, 15, 34; --shade-rgb: 8, 3, 12;
    --gold-rgb: 255, 207, 74; --good-rgb: 166, 255, 92; --sky-rgb: 159, 231, 255; --deep-rgb: 60, 20, 70; --deep2-rgb: 90, 40, 100; --glow-rgb: 255, 160, 70;
    --mid: #ffb347; --title-grad: linear-gradient(90deg, #ff8a1f, #ffcf4a 55%, #a6ff5c);
    --body-bg: radial-gradient(ellipse at 50% -10%, rgba(155, 92, 255, 0.32), transparent 60%), radial-gradient(ellipse at 50% 110%, rgba(255, 138, 31, 0.3), transparent 55%), linear-gradient(180deg, #1c0d26 0%, #140920 55%, #0b0512 100%);
    --cap: #3a2457; --cloud: #8a6aa8;
  }
  html[data-theme="christmas"] {
    --soft: #d3e5f2;
    --bg: #0a1a2b; --panel: #12283d; --panel-2: #1a3650; --line: #2b5373;
    --accent: #ff4d6d; --accent-hover: #ff7088; --accent-soft: rgba(255, 77, 109, 0.35); --accent-faint: rgba(255, 77, 109, 0.1);
    --violet: #2fbf71; --gold: #ffd36a; --sky: #bfe8ff; --text: #f5fbff; --muted: #a7c2d6; --good: #6ff2a6; --ink: #0c1a28;
    --accent-rgb: 255, 77, 109; --violet-rgb: 47, 191, 113; --panel-rgb: 18, 40, 61; --ink-rgb: 12, 26, 40; --shade-rgb: 3, 9, 16;
    --gold-rgb: 255, 211, 106; --good-rgb: 111, 242, 166; --sky-rgb: 191, 232, 255; --deep-rgb: 18, 52, 80; --deep2-rgb: 30, 74, 104; --glow-rgb: 210, 235, 255;
    --mid: #fff1f4; --title-grad: linear-gradient(90deg, #ff4d6d, #ffe9ef 50%, #57e08a);
    --body-bg: radial-gradient(ellipse at 50% -10%, rgba(47, 191, 113, 0.28), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(255, 77, 109, 0.2), transparent 55%), linear-gradient(180deg, #0f2338 0%, #0b1a2b 55%, #071220 100%);
    --cap: #e3324a; --cloud: #ffffff;
  }
  html[data-theme="summer"] {
    --soft: #d3ebf5;
    --bg: #0b2a45; --panel: #0f3550; --panel-2: #174766; --line: #2a6788;
    --accent: #ff7f50; --accent-hover: #ff9a73; --accent-soft: rgba(255, 127, 80, 0.35); --accent-faint: rgba(255, 127, 80, 0.1);
    --violet: #ff5fa2; --gold: #ffd166; --sky: #7fe7ff; --text: #fffaf0; --muted: #b5d5e6; --good: #3ff2c8; --ink: #0a2233;
    --accent-rgb: 255, 127, 80; --violet-rgb: 255, 95, 162; --panel-rgb: 15, 53, 80; --ink-rgb: 10, 34, 51; --shade-rgb: 3, 14, 26;
    --gold-rgb: 255, 209, 102; --good-rgb: 63, 242, 200; --sky-rgb: 127, 231, 255; --deep-rgb: 16, 70, 110; --deep2-rgb: 30, 100, 140; --glow-rgb: 255, 200, 110;
    --mid: #ffd166; --title-grad: linear-gradient(90deg, #ff7f50, #ffd166 50%, #3ff2c8);
    --body-bg: radial-gradient(ellipse at 85% -5%, rgba(255, 209, 102, 0.35), transparent 50%), radial-gradient(ellipse at 50% 108%, rgba(255, 127, 80, 0.38), transparent 55%), linear-gradient(180deg, #11527d 0%, #0d3a5e 50%, #0a2840 100%);
    --cap: #2ec4b6; --cloud: #ffffff;
  }
  html[data-theme="school"] {
    --soft: #dde7dc;
    --bg: #1b3329; --panel: #234236; --panel-2: #2c5042; --line: #4a7562;
    --accent: #ff8c42; --accent-hover: #ffa366; --accent-soft: rgba(255, 140, 66, 0.35); --accent-faint: rgba(255, 140, 66, 0.1);
    --violet: #ef4f6a; --gold: #ffe066; --sky: #9fd8ff; --text: #f7f4e8; --muted: #b9cbbf; --good: #9ff0a8; --ink: #1a2a22;
    --accent-rgb: 255, 140, 66; --violet-rgb: 239, 79, 106; --panel-rgb: 35, 66, 54; --ink-rgb: 26, 42, 34; --shade-rgb: 6, 16, 11;
    --gold-rgb: 255, 224, 102; --good-rgb: 159, 240, 168; --sky-rgb: 159, 216, 255; --deep-rgb: 30, 70, 55; --deep2-rgb: 50, 95, 75; --glow-rgb: 255, 240, 200;
    --mid: #ffe066; --title-grad: linear-gradient(90deg, #fff7d6, #ffe066 50%, #ff8c42);
    --body-bg: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.05), transparent 50%), radial-gradient(ellipse at 70% 85%, rgba(255, 255, 255, 0.04), transparent 50%), linear-gradient(180deg, #24443a 0%, #1d382f 55%, #162b24 100%);
    --cap: #3b5bdb; --cloud: #ffffff;
  }
  html[data-theme] body { transition: color 0.3s; }

  /* Header buttons: theme picker beside the sound button */
  .top-btns { position: absolute; right: 0; top: 6px; display: flex; align-items: center; gap: 8px; z-index: 6; }
  .top-btns .sound-btn { position: static; }
  .theme-pick { position: relative; }
  .theme-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 8px; border-radius: 999px;
    background: rgba(var(--panel-rgb), 0.85); color: var(--text);
    font-family: var(--hud); font-weight: 600; font-size: 15px; white-space: nowrap;
  }
  .theme-btn:hover, .theme-btn[aria-expanded="true"] { border-color: var(--accent); }
  .theme-ico { display: inline-flex; width: 24px; height: 24px; }
  .theme-ico svg { width: 100%; height: 100%; overflow: visible; }
  .theme-btn:hover .theme-ico svg { animation: icoWiggle 0.5s ease-in-out; }
  @keyframes icoWiggle { 30% { transform: rotate(-14deg) scale(1.15); } 70% { transform: rotate(10deg); } }
  .theme-caret { width: 12px; height: 12px; opacity: 0.7; transition: transform 0.2s; }
  .theme-btn[aria-expanded="true"] .theme-caret { transform: rotate(180deg); }
  .theme-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
    display: grid; gap: 3px; min-width: 268px; padding: 7px;
    border-radius: 18px; border: 1px solid var(--line);
    background: rgba(var(--panel-rgb), 0.98);
    box-shadow: 0 18px 44px rgba(var(--shade-rgb), 0.65), 0 0 24px rgba(var(--accent-rgb), 0.18);
    transform-origin: top right; animation: menuIn 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);
  }
  @keyframes menuIn { from { opacity: 0; transform: translateY(-8px) scale(0.9); } }
  .theme-opt {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: none; border-radius: 12px; background: transparent;
    color: var(--text); font-family: var(--hud); font-weight: 600; font-size: 16px; text-align: left;
  }
  .theme-opt:hover, .theme-opt:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
  .theme-opt[aria-checked="true"] { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.28), rgba(var(--violet-rgb), 0.2)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.5); }
  .theme-opt .ico { flex: none; width: 30px; height: 30px; }
  .theme-opt .ico svg { width: 100%; height: 100%; overflow: visible; }
  .theme-opt small { font-family: "Nunito", sans-serif; font-size: 11px; font-weight: 700; color: var(--muted); }
  .theme-opt .sw { display: flex; gap: 3px; margin-left: auto; }
  .theme-opt .sw i { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.25); }

  /* The switch: the new theme sweeps across the screen */
  .theme-wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  .wipe-ico { width: 150px; height: 150px; animation: wipeIco 1.1s cubic-bezier(0.2, 1.5, 0.4, 1) both; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.45)); }
  .wipe-ico svg { width: 100%; height: 100%; overflow: visible; }
  .wipe-name { font-family: var(--hud); font-weight: 700; font-size: 54px; color: #fff; text-shadow: 0 5px 0 rgba(0, 0, 0, 0.35), 0 0 30px rgba(255, 255, 255, 0.35); animation: wipeName 0.9s cubic-bezier(0.2, 1.6, 0.4, 1) 0.2s both; text-align: center; padding: 0 16px; }
  @keyframes wipeIco { from { transform: scale(0) rotate(-200deg); } 70% { transform: scale(1.15) rotate(12deg); } }
  @keyframes wipeName { from { opacity: 0; transform: translateY(40px) scale(0.6); } }

  /* Colours that used to be fixed now follow the theme */
  body { background: var(--body-bg); }
  h1 span { background: var(--title-grad); -webkit-background-clip: text; background-clip: text; }
  .cloud path { fill: var(--cloud, #fff); }
  html[data-theme="halloween"] .cloud { opacity: 0.32; }
  html[data-theme="christmas"] .cloud { opacity: 0.24; }
  html[data-theme="summer"] .cloud { opacity: 0.55; }
  html[data-theme="school"] .cloud { opacity: 0.28; }
  html[data-theme="school"] .cloud path { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 12 7; }
  html[data-theme="halloween"] .moon { width: 112px; height: 112px; }
  html[data-theme="summer"] .moon { width: 118px; height: 118px; top: 56px; filter: drop-shadow(0 0 30px rgba(255, 209, 102, 0.65)); }
  html[data-theme="school"] .moon { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); animation: none; }

  /* Sky art that moves */
  .moon-bat { animation: batBob 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .moon-bat.b2 { animation-duration: 1.1s; animation-delay: -0.4s; }
  @keyframes batBob { 50% { transform: translateY(-4px) scaleY(0.7); } }
  .sun-rays { transform-origin: 50px 50px; animation: spin 24s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .clock-h, .clock-m, .clock-s { transform-origin: 50px 50px; animation: spin linear infinite; }
  .clock-h { animation-duration: 43200s; }
  .clock-m { animation-duration: 3600s; }
  .clock-s { animation-duration: 60s; animation-timing-function: steps(60); }

  /* Ground scenery */
  #scenery { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; }
  #scenery .ground { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; }
  #scenery .prop { position: absolute; bottom: 4px; }
  #scenery .prop svg { display: block; width: 100%; height: auto; overflow: visible; }
  #scenery .pumpkin .glow { animation: flicker 1.6s ease-in-out infinite; }
  #scenery .pumpkin.b .glow { animation-delay: -0.6s; }
  #scenery .pumpkin.c .glow { animation-delay: -1.1s; }
  @keyframes flicker { 0%, 100% { opacity: 1; } 40% { opacity: 0.55; } 60% { opacity: 0.9; } 75% { opacity: 0.6; } }
  #scenery .ghost { bottom: 60px; animation: ghostFloat 4s ease-in-out infinite; opacity: 0.8; }
  @keyframes ghostFloat { 50% { transform: translate(30px, -26px) rotate(8deg); } }
  #scenery .blink circle, .cos .blink circle { animation: blink 1.2s steps(2) infinite; }
  #scenery .blink circle:nth-child(2n), .cos .blink circle:nth-child(2n) { animation-delay: -0.6s; }
  @keyframes blink { 50% { opacity: 0.25; } }
  #scenery .waves { animation: waves 9s linear infinite; }
  #scenery .waves.b { animation-duration: 6s; animation-direction: reverse; }
  @keyframes waves { to { transform: translateX(-300px); } }
  #scenery .palm svg { transform-origin: 47% 100%; animation: palmSway 5s ease-in-out infinite; }
  @keyframes palmSway { 50% { transform: rotate(3deg); } }
  #scenery .crab { animation: crabWalk 7s ease-in-out infinite; }
  @keyframes crabWalk { 50% { transform: translateX(90px); } }
  #scenery .snowman svg { transform-origin: 50% 100%; animation: palmSway 3s ease-in-out infinite; }
  #scenery .chalk { bottom: 22px; }
  #scenery .eraser { bottom: 20px; }
  #doodles { position: absolute; inset: 0; opacity: 0.1; }
  #doodles svg { width: 100%; height: 100%; }

  /* Costumes: every pup and teammate carries all outfits; only the current theme's shows */
  .cos { display: none; }
  html[data-theme="halloween"] .cos.t-halloween, html[data-theme="christmas"] .cos.t-christmas,
  html[data-theme="summer"] .cos.t-summer, html[data-theme="school"] .cos.t-school { display: inline; }
  .mate:not(.on) .a-cos { display: none; }
  html:not([data-theme="magic"]) .mate.on .a-top { display: none; }
  .a-cap > path:first-child { fill: var(--cap, #7a68e0); }
  html:not([data-theme="magic"]) .m-scarf > :not(path) { display: none; }
  html[data-theme="halloween"] .m-scarf > path:first-child { fill: url(#pat-hw); }
  html[data-theme="christmas"] .m-scarf > path:first-child { fill: url(#pat-xmas); }
  html[data-theme="summer"] .m-scarf > path:first-child { fill: url(#pat-summer); }
  html[data-theme="school"] .m-scarf > path:first-child { fill: url(#pat-school); }
  .cos .glow { animation: flicker 1.4s ease-in-out infinite; }
  .cos .nose { transform-box: fill-box; transform-origin: center; animation: nosePulse 1.1s ease-in-out infinite; }
  @keyframes nosePulse { 50% { transform: scale(1.25); filter: drop-shadow(0 0 4px #ff3b3b); } }
  .cos .bell { transform-box: fill-box; transform-origin: 50% 0; animation: bellSwing 1s ease-in-out infinite; }
  @keyframes bellSwing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
  .cos .prop { transform-box: fill-box; transform-origin: center; animation: propSpin 0.35s linear infinite; }
  @keyframes propSpin { 50% { transform: scaleX(-1); } }
  .cos .flap { transform-box: fill-box; transform-origin: 50% 70%; animation: batBob 0.5s ease-in-out infinite; }

  header { padding-right: 312px; }
  html:not([data-theme="magic"]) body { padding-bottom: 150px; }
  html:not([data-theme="magic"]) .hint { text-shadow: 0 1px 3px rgba(var(--shade-rgb), 0.95), 0 0 8px rgba(var(--shade-rgb), 0.8); }
  @media (max-width: 560px) {
    header { padding-right: 92px; }
    .top-btns { top: 0; gap: 6px; }
    .theme-btn { padding: 7px; }
    .theme-btn #theme-label, .theme-caret { display: none; }
    .theme-menu { min-width: 236px; }
    .theme-opt { font-size: 15px; padding: 7px 8px; }
    .wipe-ico { width: 110px; height: 110px; }
    .wipe-name { font-size: 38px; }
    #scenery { height: 84px; }
    html[data-theme] .moon { width: 58px; height: 58px; top: 10px; }
    #scenery .prop { transform: scale(0.62); transform-origin: 0 100%; }
  }

  /* ---------- app shell: phones, tablets, desktops and every browser ---------- */

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: dark; }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: max(32px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    -webkit-tap-highlight-color: transparent;
  }
  /* Fast taps: no double-tap zoom on buttons, no text selection when tapping quickly */
  button, [role="button"], .tab, .day-chip, .mate, .monster, .theme-opt, .hc, a { touch-action: manipulation; }
  button, .tab, .card, .mate, .monster, .reset, .tabs, header h1, .tag { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  img, svg { max-width: none; }
  .hint-touch { display: none; }
  @supports (height: 100dvh) {
    .game-field { height: clamp(300px, calc(100dvh - 215px), 520px); }
    .note-dialog { max-height: calc(100dvh - 32px); }
  }

  /* Touch screens: show touch hints, stop hover effects from sticking after a tap, and keep inputs at 16px so phones don't zoom */
  @media (hover: none), (pointer: coarse) {
    .hint-keys { display: none; }
    .hint-touch { display: inline; }
    .card:hover { transform: none; border-color: var(--line); box-shadow: 0 10px 28px rgba(var(--shade-rgb), 0.35); }
    .card.rare:hover { border-color: rgba(var(--gold-rgb), 0.55); }
    .card:hover .scan { animation: none; opacity: 0; }
    .reset:hover { background: radial-gradient(circle at 50% 40%, rgba(var(--accent-rgb), 0.16), transparent 65%), rgba(var(--panel-rgb), 0.6); border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent); }
    .reset:active { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--violet-rgb), 0.9)); color: #fff; }
    input:not([type="range"]):not([type="checkbox"]), textarea, select { font-size: 16px !important; }
  }

  /* Install button (only shows when the browser can install the app) */
  .install-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px 7px 10px; border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--violet)); border-color: transparent;
    color: #fff; font-family: var(--hud); font-weight: 600; font-size: 15px; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(var(--accent-rgb), 0.35);
  }
  .install-btn svg { width: 20px; height: 20px; }
  .install-btn:not([hidden]) { animation: installPulse 2.4s ease-in-out infinite; }
  @keyframes installPulse { 50% { box-shadow: 0 4px 22px rgba(var(--accent-rgb), 0.7); } }

  /* "Add to Home Screen" help for iPhone and iPad */
  .ios-sheet { position: fixed; inset: 0; z-index: 95; display: flex; align-items: flex-end; justify-content: center; background: rgba(var(--shade-rgb), 0.6); padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .ios-card {
    width: min(420px, 100%); padding: 20px 20px 16px; border-radius: 24px;
    background: var(--panel); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(var(--shade-rgb), 0.7);
    animation: sheetUp 0.35s cubic-bezier(0.2, 1.3, 0.4, 1);
  }
  @keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } }
  .ios-card h3 { font-family: var(--hud); font-size: 22px; font-weight: 600; margin-bottom: 10px; }
  .ios-card ol { padding-left: 22px; display: grid; gap: 8px; font-size: 15px; line-height: 1.45; }
  .ios-card ol svg { width: 18px; height: 18px; vertical-align: -3px; margin: 0 2px; }
  .ios-card button { margin-top: 16px; width: 100%; padding: 11px; border-radius: 14px; background: var(--panel-2); color: var(--text); font-family: var(--hud); font-weight: 600; font-size: 16px; }

  /* Tablets: six tabs share the row, icon above the label */
  @media (min-width: 701px) and (max-width: 960px) {
    .tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-radius: 24px; gap: 2px; }
    .tab { flex-direction: column; justify-content: center; gap: 4px; padding: 8px 2px 9px; font-size: 14px; border-radius: 18px; }
    .tab svg { width: 20px; height: 20px; }
    .tab .tab-count, .tab .live-dot { position: absolute; top: 5px; right: 18%; }
  }

  /* Phones (and short landscape screens): compact header, tab bar at the bottom like an app */
  @media (max-width: 700px), (max-height: 500px) and (max-width: 960px) {
    body { padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    html:not([data-theme="magic"]) body { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
    header { padding-right: 0; margin-bottom: 14px; }
    .tag { min-height: 40px; padding-right: 150px; margin-bottom: 0; font-size: 13px; }
    .top-btns { top: 1px; gap: 6px; }
    h1 { font-size: clamp(28px, 9.4vw, 44px); white-space: nowrap; }
    .since { margin-top: 6px; font-size: 12.5px; }
    .theme-btn { padding: 7px; }
    .theme-btn #theme-label, .theme-caret { display: none; }
    .sound-btn { padding: 8px; }
    .sound-btn span, .install-btn span { display: none; }
    .install-btn { padding: 8px; }
    .moon, html[data-theme] .moon { width: 46px; height: 46px; top: max(54px, calc(env(safe-area-inset-top) + 44px)); right: 10px; }

    .tabs {
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0;
      display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
      padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
      border-radius: 22px 22px 0 0; border-width: 1px 0 0;
      background: rgba(var(--panel-rgb), 0.9);
      -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
      box-shadow: 0 -8px 30px rgba(var(--shade-rgb), 0.5);
    }
    .tab { flex-direction: column; justify-content: center; gap: 3px; padding: 7px 0 6px; border-radius: 14px; font-size: 11px; letter-spacing: 0; }
    .tab svg { display: block; width: 22px; height: 22px; }
    .tab .tab-count, .tab .live-dot { position: absolute; top: 3px; right: 14%; }
    body.kb-open .tabs { display: none; }
    .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
    #scenery { bottom: calc(54px + env(safe-area-inset-bottom)); }
    .feed { top: max(10px, env(safe-area-inset-top)); }
  }

  /* Phones: all five counters fit on one screen, two to a row (three across in landscape) */
  @media (max-width: 560px), (max-height: 500px) and (max-width: 960px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .card { min-height: 0; padding: 12px 12px 12px 13px; gap: 6px; border-radius: 18px; }
    .label { font-size: 16.5px; }
    .monster-name { font-size: 10.5px; letter-spacing: 0.1em; }
    .rare-badge { position: absolute; top: 9px; right: 9px; font-size: 10px; padding: 1px 7px; }
    .count-row { min-height: 70px; }
    .count { font-size: 52px; }
    .monster { flex: 0 0 74px; min-width: 0; width: 74px; height: 64px; margin-right: -6px; }
    .actions { gap: 6px; }
    .minus { width: 40px; min-height: 44px; font-size: 22px; }
    .plus { min-height: 44px; font-size: 20px; padding: 6px; }
    .reset { grid-column: 1 / -1; flex-direction: row; gap: 12px; padding: 12px 16px; }
    .reset svg { width: 30px; height: 30px; }
    .reset .big { font-size: 22px; }
    .reset .sub { display: none; }
    .hint { margin-top: 14px; }
    .float { font-size: 32px; }
  }
  @media (max-width: 340px) {
    .card { padding: 10px 9px 10px 10px; }
    .label { font-size: 15px; }
    .count { font-size: 44px; }
    .monster { flex-basis: 62px; width: 62px; height: 56px; }
    .minus { width: 38px; }
    .tab { font-size: 10px; }
  }

  /* History: each saved entry becomes a card on narrow screens instead of a wide table */
  @media (max-width: 800px) {
    .table-wrap { overflow: visible; background: none; border: none; border-radius: 0; }
    table { min-width: 0; font-size: 15px; }
    thead { display: none; }
    tbody, tfoot { display: block; }
    tbody tr, tfoot tr {
      position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px;
      padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
    }
    tfoot tr { background: rgba(var(--shade-rgb), 0.35); }
    td, tfoot td { display: block; padding: 0; border: none; text-align: left; white-space: normal; background: none; }
    td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
    td.period, tfoot td:first-child { grid-column: 1 / -1; padding-right: 44px; }
    td.del-cell { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; }
    td.empty { grid-column: 1 / -1; text-align: center; padding: 24px 8px; }
    tbody tr:has(td.empty) { display: block; }
    tfoot td:last-child:empty { display: none; }
  }

  /* Short landscape phones: tighter header */
  @media (max-height: 500px) and (max-width: 960px) {
    .tag { display: none; }
    header { padding-right: 160px; }
    h1 { font-size: 30px; }
    .moon, html[data-theme] .moon { display: none; }
    .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .reset { grid-column: auto; }
  }

  @media (max-width: 1099px) {
    .install-btn { padding: 8px; }
    .install-btn span { display: none; }
  }
  @media (min-width: 701px) and (max-width: 1099px) {
    header { padding-right: 360px; }
  }

  /* Installed app window */
  @media (display-mode: standalone) {
    .install-btn { display: none !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    #bg-fx, #fx, .beam, .flash, #wisps { display: none; }
  }