/* Theme tokens — drive accents; gradients keep tuned rgba for visual synthesis */
    :root {
      color-scheme: dark;
      --accent: #00c8ff;
      --accent-bright: #00e5ff;
      --accent-mid: #00d4ff;
      --accent-dim: rgba(0, 200, 255, 0.22);
      --text: #e6e6e6;
      --text-strong: #e8eef4;
      --muted: #7a9bb0;
      --panel-edge: rgba(0, 200, 255, 0.14);
      --panel-bar: #00c8ff;
      --focus-ring: #00e5ff;
      --chip-done-bg: #00e5ff;
      --chip-done-fg: #04101c;
    }
    html[data-theme="light"] {
      color-scheme: light;
      --accent: #006a94;
      --accent-bright: #006a94;
      --accent-mid: #0094c8;
      --accent-dim: rgba(0, 90, 140, 0.22);
      --text: #1b2a38;
      --text-strong: #14212e;
      --muted: #5a7a8c;
      --panel-edge: rgba(0, 90, 140, 0.18);
      --panel-bar: #006a94;
      --focus-ring: #006a94;
      --chip-done-bg: #006a94;
      --chip-done-fg: #fff;
    }

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

    html {
      height: 100%;
      scroll-behavior: smooth;
    }

    body {
      min-height: 100%;
      background: #050810;
      background-image:
        radial-gradient(ellipse at 15% 18%, rgba(0, 47, 167, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(0, 200, 255, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 35%, rgba(0, 30, 80, 0.22) 0%, transparent 70%),
        linear-gradient(180deg, #050810 0%, #0a1220 50%, #060a14 100%);
      background-attachment: fixed;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      color: #e6e6e6;
      overflow-x: hidden;
      position: relative;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      box-shadow: inset 0 0 140px rgba(0, 10, 30, 0.7);
      pointer-events: none;
      z-index: 1;
    }


    /* Top-right music control — same design language as My Contacts */
    .music-ctrl {
      position: fixed;
      top: 24px;
      right: 24px;
      z-index: 40;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .music-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.55);
      border-radius: 6px;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      cursor: pointer;
      backdrop-filter: blur(6px);
      transition: border-color 0.3s ease, background 0.3s ease,
                  box-shadow 0.3s ease, color 0.3s ease;
      user-select: none;
    }
    .music-btn:hover {
      border-color: #00d4ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.08);
      box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
    }
    .music-btn .music-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.45;
      flex-shrink: 0;
    }
    .music-btn.playing .music-dot {
      opacity: 1;
      box-shadow: 0 0 8px #00e5ff;
      animation: autoPulse 1.2s ease-in-out infinite;
    }
    .music-btn.playing {
      border-color: rgba(0, 212, 255, 0.65);
      color: #00e5ff;
    }
    body.avatar-hover .music-ctrl {
      filter: blur(8px);
      opacity: 0.35;
    }
    /* Music panel (dropdown like contacts) */
    .music-wrap {
      position: relative;
      display: inline-block;
    }
    .music-btn .chev {
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
      opacity: 0.7;
      margin-left: 2px;
      transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .music-wrap.open .music-btn .chev,
    .music-wrap:focus-within .music-btn .chev {
      transform: rotate(180deg);
    }
    .music-wrap.open .music-btn,
    .music-wrap:focus-within .music-btn {
      border-color: #00d4ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.08);
      box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
    }
    .music-panel {
      position: absolute;
      top: 100%;
      right: 0;
      margin-top: 8px;
      width: 280px;
      padding: 16px 18px 14px;
      background: rgba(5, 12, 28, 0.94);
      border: 1px solid rgba(0, 200, 255, 0.22);
      border-radius: 10px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 180, 255, 0.12);
      backdrop-filter: blur(12px);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px) scale(0.96);
      transform-origin: top right;
      pointer-events: none;
      overflow: visible;
      transition:
        opacity 0.32s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.32s cubic-bezier(0.165, 0.84, 0.44, 1),
        visibility 0.32s;
      z-index: 50;
    }
    .music-wrap.open .music-panel,
    .music-wrap:focus-within .music-panel {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }
    .music-track {
      margin-bottom: 12px;
    }
    .music-title {
      display: block;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.4px;
      color: #e8eef4;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .music-sub {
      display: block;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.3px;
      color: rgba(180, 210, 230, 0.65);
      margin-top: 2px;
    }
    .music-progress {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }
    .music-time {
      font-size: 11px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: #7a9bb0;
      min-width: 32px;
    }
    .music-time:last-child { text-align: right; }
    .progress-bar {
      flex: 1;
      height: 6px;
      background: rgba(0, 180, 255, 0.12);
      border-radius: 3px;
      position: relative;
      cursor: pointer;
      overflow: visible;
    }
    .progress-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #00c8ff, #00e5ff);
      border-radius: 3px;
      box-shadow: 0 0 10px rgba(0, 212, 255, 0.45);
      transition: width 0.08s linear;
      pointer-events: none;
    }
    .progress-thumb {
      position: absolute;
      top: 50%;
      left: 0%;
      width: 12px;
      height: 12px;
      margin-left: -6px;
      margin-top: -6px;
      background: #00e5ff;
      border-radius: 50%;
      box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
      opacity: 0;
      transition: opacity 0.2s ease, left 0.08s linear;
      pointer-events: none;
    }
    .progress-bar:hover .progress-thumb,
    .progress-bar.dragging .progress-thumb {
      opacity: 1;
    }
    .music-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      position: relative;
    }
    /* Playlist expands under the control row (max 7 rows via .playlist-list) */
    .playlist-dropdown {
      margin-top: 12px;
      border-top: 1px solid rgba(0, 200, 255, 0.12);
      padding-top: 10px;
      display: flex;
      flex-direction: column;
      max-height: none;
      animation: playlistIn 0.28s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .playlist-dropdown[hidden] {
      display: none;
    }
    @keyframes playlistIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #playlistBtn[aria-expanded="true"] {
      border-color: #00e5ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.15);
      box-shadow: 0 0 14px rgba(0, 200, 255, 0.3);
    }
    .mode-icon {
      width: 16px;
      height: 16px;
    }
    .mctl .mode-icon {
      width: 16px;
      height: 16px;
    }

    .mctl {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(0, 200, 255, 0.28);
      background: transparent;
      color: #c8e6f5;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    }
    .mctl:hover {
      border-color: #00d4ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.1);
      box-shadow: 0 0 14px rgba(0, 200, 255, 0.25);
      transform: scale(1.08);
    }
    .mctl.play {
      width: 44px;
      height: 44px;
      border-color: rgba(0, 212, 255, 0.5);
      background: rgba(0, 180, 255, 0.12);
    }
    .mctl.play:hover {
      background: rgba(0, 180, 255, 0.22);
      box-shadow: 0 0 18px rgba(0, 212, 255, 0.4);
    }
    .mctl svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }
    .mctl.play svg { width: 18px; height: 18px; }
    .mctl:disabled {
      opacity: 0.35;
      pointer-events: none;
    }

    /* Light theme for music panel */
    html[data-theme="light"] .music-panel {
      background: rgba(255, 255, 255, 0.97);
      border-color: rgba(0, 90, 140, 0.25);
      box-shadow: 0 16px 40px rgba(20, 50, 90, 0.2);
    }
    html[data-theme="light"] .music-title { color: #14212e; }
    html[data-theme="light"] .music-sub { color: #5a7a8c; }
    html[data-theme="light"] .music-time { color: #5a7a8c; }
    html[data-theme="light"] .progress-bar { background: rgba(0, 120, 180, 0.12); }
    html[data-theme="light"] .progress-fill {
      background: linear-gradient(90deg, #0088c0, #00a8e0);
      box-shadow: 0 0 8px rgba(0, 148, 200, 0.35);
    }
    html[data-theme="light"] .progress-thumb { background: #0094c8; box-shadow: 0 0 8px rgba(0, 148, 200, 0.5); }
    html[data-theme="light"] .mctl {
      border-color: rgba(0, 90, 140, 0.28);
      color: #1b2a38;
    }
    html[data-theme="light"] .mctl:hover {
      border-color: #006a94;
      color: #006a94;
      background: rgba(0, 148, 200, 0.1);
      box-shadow: 0 0 12px rgba(0, 148, 200, 0.2);
    }
    html[data-theme="light"] .mctl.play {
      border-color: rgba(0, 120, 180, 0.45);
      background: rgba(0, 148, 200, 0.1);
    }
    html[data-theme="light"] .music-wrap.open .music-btn,
    html[data-theme="light"] .music-wrap:focus-within .music-btn {
      border-color: #0094c8;
      color: #006a94;
      background: rgba(0, 148, 200, 0.08);
    }

    /* Side icon buttons (playlist + mode) */
    .playlist-header {
      padding: 4px 18px 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      color: #00c8ff;
    }
    .playlist-list {
      list-style: none;
      margin: 0;
      padding: 0;
      overflow-y: auto;
      flex: 1 1 auto;
      max-height: calc(7 * 42px); /* enough for seven tracks, then scroll */
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 200, 255, 0.35) transparent;
    }
    .playlist-list button {
      min-height: 42px;
      box-sizing: border-box;
    }
    .playlist-list li {
      border-bottom: 1px solid rgba(0, 200, 255, 0.06);
    }
    .playlist-list li:last-child { border-bottom: none; }
    .playlist-list button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      text-align: left;
      padding: 10px 18px;
      background: transparent;
      border: none;
      color: #e8eef4;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: background 0.22s ease, color 0.22s ease, padding-left 0.25s ease;
    }
    .playlist-list .pl-name {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .playlist-list .pl-dur {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: #7a9bb0;
      letter-spacing: 0.2px;
    }
    .playlist-list button:hover {
      background: rgba(0, 180, 255, 0.12);
      color: #00e5ff;
      padding-left: 24px;
    }
    .playlist-list button.active {
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.1);
      text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
    }
    .playlist-empty {
      padding: 18px 18px 12px;
      font-size: 13px;
      color: #7a9bb0;
      line-height: 1.5;
      text-align: center;
    }
    .playlist-empty code {
      font-size: 11px;
      color: #00c8ff;
    }
    .playlist-empty[hidden],
    .playlist-list:empty + .playlist-empty { display: block; }
    .playlist-list:not(:empty) + .playlist-empty { display: none; }

    /* Marquee / rolling title when too long */
    .music-title-wrap {
      overflow: hidden;
      position: relative;
      max-width: 100%;
    }
    .music-title {
      display: inline-block;
      white-space: nowrap;
      will-change: transform;
    }
    .music-title-wrap.is-rolling .music-title {
      animation: titleRoll var(--roll-dur, 10s) linear infinite;
    }
    @keyframes titleRoll {
      0%, 12% { transform: translateX(0); }
      88%, 100% { transform: translateX(var(--roll-dist, -50%)); }
    }

    /* Mode button icons */
    #modeBtn .mode-icon { width: 18px; height: 18px; }

    /* Light theme extras */
    html[data-theme="light"] .playlist-header { color: #006a94; }
    html[data-theme="light"] .playlist-list button { color: #14212e; }
    html[data-theme="light"] .playlist-list button:hover {
      background: rgba(0, 148, 200, 0.1);
      color: #006a94;
    }
    html[data-theme="light"] .playlist-list button.active {
      color: #006a94;
      background: rgba(0, 148, 200, 0.12);
      text-shadow: none;
    }
    html[data-theme="light"] .playlist-empty { color: #5a7a8c; }
    html[data-theme="light"] .playlist-empty code { color: #006a94; }
    html[data-theme="light"] .playlist-list .pl-dur { color: #5a7a8c; }

    html[data-theme="light"] #playlistBtn[aria-expanded="true"] {
      border-color: #006a94;
      color: #006a94;
      background: rgba(0, 148, 200, 0.12);
      box-shadow: 0 0 12px rgba(0, 148, 200, 0.2);
    }
    html[data-theme="light"] .playlist-dropdown {
      border-top-color: rgba(0, 90, 140, 0.15);
    }


    @media (max-width: 720px) {
      .music-ctrl { top: 14px; right: 14px; }
      .music-btn { padding: 8px 14px; font-size: 12px; }
    }

    /* Top-left Contacts dropdown */
    .contacts {
      position: fixed;
      top: 24px;
      left: 24px;
      z-index: 40;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
    .contacts-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.55);
      border-radius: 6px;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      cursor: default;
      backdrop-filter: blur(6px);
      transition: border-color 0.3s ease, background 0.3s ease,
                  box-shadow 0.3s ease, color 0.3s ease;
      user-select: none;
    }
    .contacts-toggle .chev {
      display: inline-block;
      width: 0;
      height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
      opacity: 0.7;
      transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .contacts-menu {
      list-style: none;
      margin: 0;
      padding: 8px 0 0; /* invisible bridge so hover stays when moving to menu */
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 100%;
      width: max-content;
      background: transparent;
      border: none;
      box-shadow: none;
      overflow: visible;
      /* closed state */
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transform-origin: top center;
      pointer-events: none;
      transition:
        opacity 0.32s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.32s cubic-bezier(0.165, 0.84, 0.44, 1),
        visibility 0.32s;
    }
    /* inner panel for the visible card look */
    .contacts-menu::before {
      content: "";
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(5, 12, 28, 0.94);
      border: 1px solid rgba(0, 200, 255, 0.22);
      border-radius: 6px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 180, 255, 0.12);
      backdrop-filter: blur(12px);
      z-index: -1;
    }
    .contacts-menu li {
      position: relative;
      border-bottom: 1px solid rgba(0, 200, 255, 0.08);
    }
    .contacts-menu li:last-child {
      border-bottom: none;
    }
    .contacts-menu a {
      display: block;
      padding: 12px 22px;
      color: #e8eef4;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.4px;
      text-decoration: none;
      text-transform: none;
      white-space: nowrap;
      transition:
        background 0.22s ease,
        color 0.22s ease,
        text-shadow 0.22s ease,
        padding-left 0.25s ease,
        transform 0.22s ease;
    }
    .contacts-menu a:hover {
      background: rgba(0, 180, 255, 0.12);
      color: #00e5ff;
      padding-left: 28px;
      text-shadow:
        0 0 8px rgba(0, 229, 255, 0.9),
        0 0 18px rgba(0, 180, 255, 0.65),
        0 0 32px rgba(0, 140, 255, 0.4);
    }

    /* Avatar hover: blur everything EXCEPT the avatar itself */
    body.avatar-hover .text-block,
    body.avatar-hover .bio-section,
    body.avatar-hover .game-section,
    body.avatar-hover .contacts,
    body.avatar-hover .glow {
      filter: blur(8px);
      opacity: 0.35;
    }
    /* Avatar stays sharp — no filter on .avatar-wrap */
    body.avatar-hover .avatar-wrap,
    body.avatar-hover .avatar-wrap img {
      filter: none !important;
      opacity: 1 !important;
    }

    /* ========== Hero: first full viewport ========== */
    .hero {
      position: relative;
      z-index: 2;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem 1.5rem 3rem;
      background: transparent;
    }

    .avatar-wrap {
      position: relative;
      width: 210px;
      height: 210px;
      margin-bottom: 28px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.75),
        0 0 24px rgba(0, 180, 255, 0.22);
      transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1),
                  box-shadow 0.5s ease;
      will-change: transform;
      z-index: 5;
      border: 1px solid rgba(0, 200, 255, 0.25);
      cursor: pointer;
    }
    .avatar-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
      display: block;
      transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .avatar-wrap:hover {
      transform: scale(1.16);
      box-shadow:
        0 28px 60px rgba(0, 0, 0, 0.85),
        0 0 36px rgba(0, 200, 255, 0.4);
    }
    .avatar-wrap:hover img {
      transform: scale(1.06);
    }

    .text-block {
      position: relative;
      display: inline-block;
      max-width: 100%;
      text-align: left;
      background: transparent !important;
      box-shadow: none !important;
      filter: none; /* never paint a plate behind the text */
      transition: opacity 0.45s ease;
    }
    body.avatar-hover .text-block {
      filter: blur(8px);
      opacity: 0.35;
    }

    /* PROFILE: appear centered, then slide fluently to the left */
    .label {
      display: inline-block;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      letter-spacing: 5px;
      color: var(--accent);
      font-weight: 700;
      margin-bottom: 10px;
      text-transform: uppercase;
      background: transparent !important;
      opacity: 0;
      /* starts centred over the word (--label-shift is measured per style/font by script), then glides to the left edge */
      transform: translateX(var(--label-shift, 3.2ch));
      animation: profileSlide 0.70s cubic-bezier(0.165, 0.84, 0.44, 1) 0.05s forwards;
    }

    .title {
      font-size: 0;
      line-height: 1;
      text-align: left;
      position: relative;               /* the caret is positioned inside the word's box */
      width: max-content;               /* box == the word, whatever the font */
      max-width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      --caret: #00d4ff;
    }

    /* The title is a real text node: the script adds one character at a time.
       Keeping the font and spacing here lets every theme style the same element. */
    .title-text {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 900;
      /* --fit (set by script) shrinks the word only when a wide theme font would not fit the screen */
      font-size: calc(clamp(52px, 13vw, 96px) * var(--fit, 1));
      line-height: 1;
      color: #fff;
      letter-spacing: -1.5px;
      display: inline-block;
      text-shadow: 2px 4px 14px rgba(0, 0, 0, 0.85);
      white-space: nowrap;
      box-sizing: content-box;
      padding: 0 6px;
    }
    /* The caret is absent while the title is empty. It appears only after the first
       character has actually been typed, then follows the live text width. */
    .title::before {
      content: "";
      position: absolute;
      top: 0; bottom: 0;
      left: calc(100% - 3px);
      width: 3px;
      background: var(--caret);
      opacity: 0;
      animation: none;
    }
    .title.has-typed::before {
      opacity: 1;
      animation: blinkTitle 1.6s step-end infinite;
    }
    @keyframes blinkTitle {
      50% { opacity: 0; }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes profileSlide {
      0% {
        opacity: 0;
        transform: translateX(var(--label-shift, 3.2ch));
      }
      35% {
        opacity: 1;
        transform: translateX(var(--label-shift, 3.2ch));
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .glow {
      /* soft accent behind avatar only — does not form a plate under the title */
      position: absolute;
      left: 50%;
      top: 38%;
      transform: translate(-50%, -50%);
      width: 280px;
      height: 280px;
      background: radial-gradient(circle at center, rgba(0, 180, 255, 0.09) 0%, transparent 68%);
      filter: blur(40px);
      pointer-events: none;
      z-index: 0;
      opacity: 0;
    }

    /* ========== Bio: well below first view ========== */
    .bio-section {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      padding: 8vh 1.5rem 3rem;
      transition: filter 0.45s ease, opacity 0.45s ease;
    }


    .bio {
      width: 100%;
      max-width: 960px;
      text-align: left;
      padding: 48px 56px;
      box-sizing: border-box;
      background:
        linear-gradient(to right, rgba(5, 12, 28, 0.97), rgba(8, 18, 40, 0.94)),
        radial-gradient(circle at top right, rgba(0, 47, 167, 0.3), transparent 42%);
      border: 1px solid rgba(0, 200, 255, 0.14);
      border-left: 5px solid var(--panel-bar);
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.65),
        inset 0 0 50px rgba(0, 180, 255, 0.03);
      font-family: "Univers Condensed", "Univers", "Barlow Condensed", "Helvetica Neue Condensed", "Arial Narrow", sans-serif;
    }


    .bio-header {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 14px 28px;
      margin-bottom: 22px;
    }
    .bio-header .bio-title {
      color: var(--accent);
      font-weight: 800;
      font-size: 18px;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      margin: 0;
      font-family: inherit;
      line-height: 1.2;
    }
    h2.bio-title {
      /* semantic heading, same look as legacy span.bio-title */
    }
    .bio p {
      color: #e8eef4;
      font-size: 20px;
      line-height: 1.72;
      font-weight: 500;
      letter-spacing: 0.15px;
      margin: 0 0 1.2em;
    }
    .bio p:last-of-type { margin-bottom: 0; }

    .bio strong, .bio b {
      color: var(--accent-bright);
      font-weight: 700;
      text-shadow: 0 0 8px rgba(0, 200, 255, 0.4);
    }
    .bio em, .bio i {
      color: #b8d4e8;
      font-style: italic;
    }

    .bio h2 {
      color: #00d4ff;
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      margin: 1.7em 0 0.9em;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0, 200, 255, 0.22);
    }

    .bio ul { list-style: none; padding: 0; margin: 0 0 0.3em; }
    .bio li {
      position: relative;
      padding-left: 1.3em;
      margin-bottom: 1em;
      color: #e0e6ec;
      font-size: 19px;
      line-height: 1.65;
      font-weight: 500;
    }
    .bio li::before {
      content: "▸";
      position: absolute;
      left: 0;
      color: #00c8ff;
      font-weight: 700;
    }

    .auto-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.55);
      border-radius: 6px;
      color: #fff;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      cursor: pointer;
      backdrop-filter: blur(6px);
      transition: border-color 0.25s ease, background 0.25s ease,
                  box-shadow 0.25s ease, transform 0.25s ease, color 0.25s ease;
    }
    .auto-btn:hover {
      border-color: #00d4ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.08);
      box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
      transform: translateY(-2px);
    }
    .auto-btn.active {
      border-color: #00e5ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.15);
      box-shadow: 0 0 16px rgba(0, 200, 255, 0.3);
    }
    .auto-btn .auto-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.5;
    }
    .auto-btn.active .auto-dot {
      opacity: 1;
      box-shadow: 0 0 8px #00e5ff;
      animation: autoPulse 1.2s ease-in-out infinite;
    }
    @keyframes autoPulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.45; transform: scale(0.85); }
    }

    /* ========== Dino game section ========== */
    .game-section {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      padding: 0 1.5rem 2rem; /* same top gap as the other boxes; island sits below */
      transition: filter 0.45s ease, opacity 0.45s ease;
    }


    .game-panel {
      width: 100%;
      max-width: 960px;
      background:
        linear-gradient(to right, rgba(5, 12, 28, 0.97), rgba(8, 18, 40, 0.94)),
        radial-gradient(circle at top left, rgba(0, 47, 167, 0.22), transparent 45%);
      border: 1px solid var(--panel-edge);
      border-left: 5px solid var(--panel-bar);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
      padding: 48px 56px;
      font-family: "Univers Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
    }

    .game-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22px;
      flex-wrap: wrap;
      gap: 14px 28px;
    }
    .game-header h2 {
      color: var(--accent);
      font-weight: 800;
      font-size: 18px;
      letter-spacing: 2.2px;
      text-transform: uppercase;
      margin: 0;
    }
    .game-stats {
      display: flex;
      gap: 20px;
      font-size: 15px;
      color: #a8c4d8;
      letter-spacing: 1px;
    }
    .game-stats span strong {
      color: #00e5ff;
      font-weight: 700;
    }

    .game-canvas-wrap {
      position: relative;
      width: 100%;
      background: #070d18;
      border: 1px solid rgba(0, 200, 255, 0.18);
      border-radius: 4px;
      overflow: hidden;
      box-shadow: inset 0 0 40px rgba(0, 100, 180, 0.08);
    }

    #dinoCanvas {
      display: block;
      width: 100%;
      height: auto;
      cursor: pointer;
      touch-action: none;
    }

    .game-hint {
      margin-top: 12px;
      font-size: 14px;
      color: #7a9bb0;
      letter-spacing: 0.5px;
      text-align: center;
    }
    .game-hint kbd {
      display: inline-block;
      padding: 2px 8px;
      border: 1px solid rgba(0, 200, 255, 0.35);
      border-radius: 3px;
      color: #00d4ff;
      font-family: inherit;
      font-size: 12px;
      margin: 0 2px;
    }

    @media (max-width: 720px) {
      .contacts { top: 14px; left: 14px; }
      .contacts-toggle { padding: 8px 14px; font-size: 12px; }
      .avatar-wrap { width: 160px; height: 160px; margin-bottom: 22px; }
      .label { font-size: 12px; letter-spacing: 3px; }
      .title-text { letter-spacing: -1px; }
      .bio-section { padding: 6vh 1rem 2rem; }
      .bio { padding: 32px 22px; }
      .bio p { font-size: 17px; }
      .bio li { font-size: 16.5px; }
      .game-section { padding: 0 1rem 1.5rem; }
      .game-panel { padding: 32px 22px; }
      /* phone: title on its own line, score / best / auto play always on the line below (no more jumping) */
      .game-header { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
      .game-stats { flex-wrap: wrap; align-items: center; gap: 10px 20px; }
    }

    /* Footer credit — plain white text, no box */
    .site-footer {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 2.5rem 1rem 3rem;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.8px;
      color: rgba(255, 255, 255, 0.72);
      transition: filter 0.45s ease, opacity 0.45s ease;
    }
    body.avatar-hover .site-footer {
      filter: blur(8px);
      opacity: 0.35;
    }


    /* ===== Info island ===== */
    .island-section {
      position: relative; z-index: 2; display: flex; justify-content: center;
      padding: 0 1.5rem 1rem; transition: filter 0.45s ease, opacity 0.45s ease;
    }
    .island {
      display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 0;
      max-width: min(1400px, 100%); padding: 12px 14px; border-radius: 999px; background: #000;
      box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
      font-family: "Univers Condensed", "Barlow Condensed", "Helvetica Neue", "Arial Narrow", sans-serif;
      font-size: 17px; letter-spacing: 0.3px; color: rgba(255, 255, 255, 0.72);
    }
    .island-item { display: flex; gap: 7px; padding: 2px 14px; white-space: nowrap; }
    .island-item[hidden] { display: none; }
    .island-item + .island-item { border-left: 1px solid rgba(255, 255, 255, 0.14); }
    .island b { color: #00e5ff; font-weight: 700; }
    .island #isTime { font-variant-numeric: tabular-nums; display: inline-block; min-width: 24ch; }
    body.avatar-hover .island-section { filter: blur(8px); opacity: 0.35; }
    /* light theme: white island, same look as the boxes above */
    html[data-theme="light"] .island {
      background: #ffffff; color: #3d5668;
      box-shadow: 0 18px 46px rgba(20, 50, 90, 0.14), inset 0 0 0 1px rgba(0, 90, 140, 0.18);
    }
    html[data-theme="light"] .island b { color: #006a94; }
    html[data-theme="light"] .island-item + .island-item { border-left-color: rgba(0, 90, 140, 0.18); }
    @media (max-width: 720px) {
      html[data-theme="light"] .island-item:nth-child(even) { border-left-color: rgba(0, 90, 140, 0.18); }
      html[data-theme="light"] .island-item:last-child:nth-child(odd) { border-top-color: rgba(0, 90, 140, 0.18); }
    }
    @media (max-width: 720px) {
      .island-section { padding: 0 1rem 0.5rem; }
      .island { display: grid; grid-template-columns: 1fr 1fr; width: 100%; border-radius: 28px; padding: 14px 8px; gap: 10px 0; }
      .island-item { flex-direction: column; gap: 2px; padding: 0 14px; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
      .island-item + .island-item { border-left: none; }
      .island #isTime { min-width: 0; }
      .island-item:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.14); }
      .island-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 10px; }
    }

    /* ===== Additions ===== */
    .bio-section.flush-top { padding-top: 0; }
    /* Scroll-in sections: classes are added by script (and removed again after the fade), so nothing is hidden without JS */
    .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1), filter 0.45s ease; }
    .reveal.in-view { opacity: 1; transform: none; }

    /* Theme switch crossfade (browsers with the View Transitions API) */
    ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.3s; }

    /* Volume slider in the music panel */
    .music-volume { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
    .music-volume[hidden] { display: none; }
    .music-volume svg { width: 16px; height: 16px; flex-shrink: 0; fill: #7a9bb0; }
    .vol-slider {
      -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 6px; margin: 0;
      border-radius: 3px; outline: none; cursor: pointer;
      background: linear-gradient(90deg, #00c8ff, #00e5ff var(--v, 55%), rgba(0, 180, 255, 0.12) var(--v, 55%));
    }
    .vol-slider::-webkit-slider-runnable-track { height: 6px; background: transparent; border-radius: 3px; }
    .vol-slider::-moz-range-track { height: 6px; background: transparent; border-radius: 3px; }
    .vol-slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -3px;
      border: 0; border-radius: 50%; background: #00e5ff; box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    }
    .vol-slider::-moz-range-thumb {
      width: 12px; height: 12px; border: 0; border-radius: 50%;
      background: #00e5ff; box-shadow: 0 0 10px rgba(0, 229, 255, 0.7);
    }
    html[data-theme="light"] .music-volume svg { fill: #5a7a8c; }
    html[data-theme="light"] .vol-slider { background: linear-gradient(90deg, #0088c0, #00a8e0 var(--v, 55%), rgba(0, 120, 180, 0.12) var(--v, 55%)); }
    html[data-theme="light"] .vol-slider::-webkit-slider-thumb { background: #0094c8; box-shadow: 0 0 8px rgba(0, 148, 200, 0.5); }
    html[data-theme="light"] .vol-slider::-moz-range-thumb { background: #0094c8; box-shadow: 0 0 8px rgba(0, 148, 200, 0.5); }

    /* Info island tooltip (a pseudo-element, so the island's item counting/layout rules are untouched) */
    .island { position: relative; }
    .island:focus { outline: none; }
    .island::after {
      content: attr(data-tip);
      position: absolute; left: 50%; bottom: calc(100% + 10px);
      width: max-content; max-width: min(320px, 86vw);
      padding: 8px 14px; border-radius: 10px;
      background: rgba(5, 12, 28, 0.96); border: 1px solid rgba(0, 200, 255, 0.22);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
      color: #e8eef4; font-size: 14px; line-height: 1.4; letter-spacing: 0.2px; text-align: center; white-space: normal;
      opacity: 0; visibility: hidden; transform: translate(-50%, 6px); pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
      z-index: 5;
    }
    .island:hover::after, .island:focus::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    html[data-theme="light"] .island::after {
      background: #ffffff; color: #14212e; border-color: rgba(0, 90, 140, 0.25);
      box-shadow: 0 12px 30px rgba(20, 50, 90, 0.2);
    }
    /* Declare the page's real scheme so mobile browsers' "force dark / night mode" leaves the light theme alone */
    html[data-theme="light"] body { forced-color-adjust: none; }
    /* Some WebView-based browsers (e.g. Via) only skip auto-darkening when the page has a dark-scheme rule of its own */
    @media (prefers-color-scheme: dark) {
      :root { color-scheme: dark; }
      html[data-theme="light"] { color-scheme: light; }
    }
    /* glow: fade only (the old fadeIn overwrote its centering transform and pushed it off to the right) */
    @keyframes glowIn { from { opacity: 0; } to { opacity: 1; } }
    .glow { animation: glowIn 1.4s ease 0.9s forwards; }
    .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;
    }
    a:focus-visible, button:focus-visible, canvas:focus-visible, .contacts-toggle:focus-visible {
      outline: 2px solid #00e5ff; outline-offset: 3px;
    }

    /* top-right controls: theme + music */
    .music-ctrl { display: flex; gap: 10px; align-items: center; }
    .theme-btn { padding: 10px 14px; }
    .theme-btn svg { width: 16px; height: 16px; display: block; }
    /* icon shows the CURRENT theme: moon = dark, sun = light */
    
    
    
    @media (max-width: 720px) { .theme-btn { padding: 8px 11px; } }

    /* contacts: button toggle, opens on hover, focus or tap */
    .contacts-toggle { cursor: pointer; font-family: inherit; }
    .contacts.open .contacts-toggle,
    .contacts:focus-within .contacts-toggle {
      border-color: #00d4ff; color: #00e5ff; background: rgba(0, 180, 255, 0.08);
      box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
    }
    .contacts.open .contacts-toggle .chev,
    .contacts:focus-within .contacts-toggle .chev { transform: rotate(180deg); }
    .contacts.open .contacts-menu,
    .contacts:focus-within .contacts-menu {
      opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
    }
    .contacts-menu a { display: flex; align-items: center; gap: 10px; }
    .contacts-menu a svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; opacity: 0.85; }

    /* scroll cue */
    .scroll-cue {
      position: absolute; left: 0; right: 0; bottom: 26px; margin: 0 auto; width: max-content;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
      color: rgba(200, 225, 240, 0.7); text-decoration: none;
      font: 600 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
      letter-spacing: 3px; text-transform: uppercase;
      opacity: 0; animation: fadeIn 1s ease 2s forwards;
      transition: color 0.25s ease;
    }
    .scroll-cue:hover { color: #00e5ff; }
    .scroll-cue > span:first-child { padding-left: 3px; /* cancels trailing letter-spacing so the word is centered */ }
    .scroll-cue .arrow {
      width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
      transform: rotate(45deg); animation: cueBob 1.8s ease-in-out infinite;
    }
    @keyframes cueBob { 0%, 100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }
    body.scrolled .scroll-cue { opacity: 0 !important; pointer-events: none; transition: opacity 0.4s ease; }

    /* games grid */
    .games-grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px;
      margin: 0 0 1.4em;
    }
    .game-card {
      padding: 18px 20px; border: 1px solid rgba(0, 200, 255, 0.18); border-radius: 6px;
      background: rgba(0, 20, 50, 0.45);
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .game-card:hover { border-color: rgba(0, 229, 255, 0.55); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); }
    .game-card h3 { color: #00e5ff; font-size: 20px; font-weight: 800; letter-spacing: 0.8px; margin: 0 0 6px; }
    .bio .game-card p { font-size: 16.5px; line-height: 1.55; margin: 0 0 12px; }
    .id-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .id-chip {
      display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px;
      border: 1px solid rgba(0, 200, 255, 0.3); border-radius: 999px; background: rgba(0, 180, 255, 0.07);
      color: #e8eef4; font-size: 15px; font-weight: 600;
    }
    .id-chip small { color: #7fb0c8; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
    .copy-btn {
      font: 700 11px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.8px; text-transform: uppercase;
      padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(0, 229, 255, 0.5);
      background: transparent; color: #00e5ff; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
    }
    .copy-btn:hover { background: rgba(0, 229, 255, 0.15); }
    .copy-btn.done { background: var(--chip-done-bg); color: var(--chip-done-fg); }

    /* bots */
    .bots-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 1.6em; }
    .bot-card {
      display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 6px; text-decoration: none;
      border: 1px solid rgba(0, 200, 255, 0.18); background: rgba(0, 20, 50, 0.45); color: #e8eef4;
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    }
    .bot-card:hover { border-color: rgba(0, 229, 255, 0.6); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
    .bot-card h3 { color: #00e5ff; font-size: 20px; font-weight: 800; margin: 0; }
    .bot-card p { font-size: 16px; line-height: 1.5; margin: 0; color: #cfdbe6; }
    .bot-card .go { margin-top: auto; color: #00d4ff; font: 700 12px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.6px; text-transform: uppercase; }

    @media (max-width: 720px) {
      .games-grid { grid-template-columns: minmax(0, 1fr); }
      .id-chip { max-width: 100%; flex-wrap: wrap; row-gap: 4px; }
      .game-card h3 { font-size: 18px; }
    }

    /* ===== Light theme (toggle top-right) ===== */
    html[data-theme="light"] body {
      background-color: #e9f0f7;
      background-image:
        radial-gradient(ellipse at 15% 18%, rgba(0, 120, 255, 0.14) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, rgba(0, 200, 255, 0.12) 0%, transparent 50%),
        linear-gradient(180deg, #f2f6fb 0%, #e3edf7 50%, #eaf1f8 100%);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-attachment: fixed;
      color: #14212e;
    }
    html[data-theme="light"] body::after { box-shadow: none; }
    html[data-theme="light"] .label { color: #0079a8; }
    html[data-theme="light"] .title-text { color: #0b1a2e; text-shadow: 2px 4px 14px rgba(0, 40, 80, 0.18); }
    html[data-theme="light"] .title { --caret: #0079a8; }
    html[data-theme="light"] .bio,
    html[data-theme="light"] .game-panel {
      background: #ffffff; border-color: rgba(0, 90, 140, 0.18); border-left-color: #0094c8;
      box-shadow: 0 18px 46px rgba(20, 50, 90, 0.14);
    }
    html[data-theme="light"] .bio p, html[data-theme="light"] .bio li { color: #1b2a38; }
    html[data-theme="light"] .bio strong, html[data-theme="light"] .bio b { color: #006a94; text-shadow: none; }
    html[data-theme="light"] .bio em { color: #3d5668; }
    html[data-theme="light"] .bio h2, html[data-theme="light"] .bio-header .bio-title, html[data-theme="light"] .game-header h2 { color: #0079a8; border-bottom-color: rgba(0, 90, 140, 0.25); }
    html[data-theme="light"] .bio li::before { color: #0094c8; }
    html[data-theme="light"] .game-card, html[data-theme="light"] .bot-card { background: #f3f8fc; border-color: rgba(0, 90, 140, 0.2); color: #1b2a38; }
    html[data-theme="light"] .game-card h3, html[data-theme="light"] .bot-card h3 { color: #006a94; }
    html[data-theme="light"] .bot-card p { color: #3d5668; }
    html[data-theme="light"] .bot-card .go { color: #0079a8; }
    html[data-theme="light"] .id-chip { color: #14212e; background: rgba(0, 120, 180, 0.07); border-color: rgba(0, 90, 140, 0.3); }
    html[data-theme="light"] .id-chip small { color: #4d7a92; }
    html[data-theme="light"] .copy-btn { color: #006a94; border-color: rgba(0, 106, 148, 0.5); }
    html[data-theme="light"] .copy-btn.done { background: #006a94; color: #fff; }
    html[data-theme="light"] .music-btn, html[data-theme="light"] .contacts-toggle, html[data-theme="light"] .auto-btn {
      color: #14212e; border-color: rgba(20, 33, 46, 0.55); background: rgba(255, 255, 255, 0.6);
    }
    html[data-theme="light"] .music-btn:hover,
    html[data-theme="light"] .contacts.open .contacts-toggle, html[data-theme="light"] .auto-btn:hover,
    html[data-theme="light"] .music-btn.playing, html[data-theme="light"] .auto-btn.active { color: #006a94; border-color: #0094c8; }
    html[data-theme="light"] .contacts-menu::before { background: rgba(255, 255, 255, 0.97); border-color: rgba(0, 90, 140, 0.25); box-shadow: 0 16px 40px rgba(20, 50, 90, 0.2); }
    html[data-theme="light"] .contacts-menu a { color: #14212e; }
    html[data-theme="light"] .contacts-menu a:hover { color: #006a94; text-shadow: none; background: rgba(0, 148, 200, 0.1); }
    html[data-theme="light"] .game-stats { color: #3d5668; }
    html[data-theme="light"] .game-stats span strong { color: #006a94; }
    html[data-theme="light"] .game-hint { color: #4d6678; }
    html[data-theme="light"] .game-hint kbd { color: #006a94; border-color: rgba(0, 90, 140, 0.4); }
    html[data-theme="light"] .site-footer { color: rgba(20, 33, 46, 0.75); }
    html[data-theme="light"] .scroll-cue { color: rgba(20, 33, 46, 0.65); }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        animation-delay: 0s !important; transition-duration: 0.001ms !important;
      }
      .label, .glow, .scroll-cue { opacity: 1; }
      .scroll-cue { opacity: 0.8; }
    }

  

    /* Changelog entry (below hero, above bio — not in first viewport center) */
    .log-link-wrap {
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 28px;
      padding: 0.5rem 1.5rem 0.25rem;
    }
    .log-link-wrap .log-sep {
      width: 1px;
      height: 18px;
      background: rgba(0, 200, 255, 0.28);
      flex-shrink: 0;
    }
    html[data-theme="light"] .log-link-wrap .log-sep {
      background: rgba(0, 90, 140, 0.25);
    }
    @media (max-width: 520px) {
      .log-link-wrap .log-sep { display: none; }
      .log-link-wrap { gap: 12px; }
    }
    .log-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      background: transparent;
      border: 1.5px solid rgba(255, 255, 255, 0.4);
      border-radius: 6px;
      color: rgba(230, 240, 250, 0.85);
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      text-decoration: none;
      backdrop-filter: blur(6px);
      transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
    }
    .log-link:hover {
      border-color: #00d4ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.08);
      box-shadow: 0 0 18px rgba(0, 200, 255, 0.22);
    }
    .log-link .log-arrow {
      font-size: 14px;
      line-height: 1;
      transition: transform 0.25s ease;
    }
    .log-link:hover .log-arrow {
      transform: translateX(3px);
    }
    html[data-theme="light"] .log-link {
      border-color: rgba(0, 90, 140, 0.35);
      color: #1b2a38;
    }
    html[data-theme="light"] .log-link:hover {
      border-color: #0094c8;
      color: #006a94;
      background: rgba(0, 148, 200, 0.08);
    }

    /* Hide scroll cue when chrome is focused/open (keeps motion otherwise) */
    body.ui-focus .scroll-cue { opacity: 0 !important; pointer-events: none; transition: opacity 0.35s ease; }


    /* Music: empty playlist keeps the full player window; only the top button is dimmed */
    .music-wrap.is-empty .music-btn { opacity: 0.75; }

    /* Visually hidden live region for game status */
    .visually-hidden-live {
      position: absolute;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0);
      white-space: nowrap; border: 0;
    }


    body.avatar-hover .log-link-wrap {
      filter: blur(8px);
      opacity: 0.35;
    }
    @media (max-width: 720px) {
      .log-link { padding: 7px 14px; font-size: 11px; }
    }

    /* Hover opens the music panel and the contacts menu only on devices that really hover.
       On touch screens a tap leaves :hover stuck, so the second tap could not close them (tap = .open instead). */
    @media (hover: hover) {
      .music-wrap:hover .music-btn .chev { transform: rotate(180deg); }
      .music-wrap:hover .music-btn {
        border-color: #00d4ff; color: #00e5ff; background: rgba(0, 180, 255, 0.08); box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
      }
      html[data-theme="light"] .music-wrap:hover .music-btn { border-color: #0094c8; color: #006a94; background: rgba(0, 148, 200, 0.08); }
      .music-wrap:hover .music-panel, .music-panel:hover {
        opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto;
      }
      .contacts:hover .contacts-toggle {
        border-color: #00d4ff; color: #00e5ff; background: rgba(0, 180, 255, 0.08); box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
      }
      html[data-theme="light"] .contacts:hover .contacts-toggle { color: #006a94; border-color: #0094c8; }
      .contacts:hover .contacts-toggle .chev { transform: rotate(180deg); }
      .contacts:hover .contacts-menu, .contacts-menu:hover {
        opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
      }
    }

    /* Very small phones (320 px): keep game cards and the clock inside the screen */
    @media (max-width: 380px) {
      .island { padding: 14px 4px; }
      .island-item { padding: 0 10px; }
      .island #isTime { overflow-wrap: break-word; }
    }

  
    /* Theme dropdown — same design language as My Contacts */
    .theme-wrap {
      position: relative;
      display: inline-block;
    }
    .theme-btn .chev {
      display: inline-block;
      width: 0; height: 0;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
      opacity: 0.7;
      margin-left: 2px;
      transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .theme-wrap.open .theme-btn .chev,
    .theme-wrap:focus-within .theme-btn .chev {
      transform: rotate(180deg);
    }
    .theme-menu {
      list-style: none;
      margin: 0;
      padding: 8px 0 0;
      position: absolute;
      top: 100%;
      right: 0;
      min-width: 100%;
      width: max-content;
      background: transparent;
      border: none;
      box-shadow: none;
      overflow: visible;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transform-origin: top right;
      pointer-events: none;
      transition:
        opacity 0.32s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.32s cubic-bezier(0.165, 0.84, 0.44, 1),
        visibility 0.32s;
      z-index: 50;
    }
    .theme-menu::before {
      content: "";
      position: absolute;
      top: 8px; left: 0; right: 0; bottom: 0;
      background: rgba(5, 12, 28, 0.94);
      border: 1px solid rgba(0, 200, 255, 0.22);
      border-radius: 6px;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 180, 255, 0.12);
      backdrop-filter: blur(12px);
      z-index: -1;
    }
    .theme-menu li {
      position: relative;
      border-bottom: 1px solid rgba(0, 200, 255, 0.08);
    }
    .theme-menu li:last-child { border-bottom: none; }
    .theme-menu button {
      display: block;
      width: 100%;
      text-align: left;
      padding: 12px 22px;
      background: transparent;
      border: none;
      color: #e8eef4;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.4px;
      cursor: pointer;
      white-space: nowrap;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      transition:
        background 0.22s ease,
        color 0.22s ease,
        text-shadow 0.22s ease,
        padding-left 0.25s ease;
    }
    .theme-menu button:hover {
      background: rgba(0, 180, 255, 0.12);
      color: #00e5ff;
      padding-left: 28px;
      text-shadow:
        0 0 8px rgba(0, 229, 255, 0.9),
        0 0 18px rgba(0, 180, 255, 0.65),
        0 0 32px rgba(0, 140, 255, 0.4);
    }
    .theme-menu button.active {
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.1);
      text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
    }
    .theme-wrap.open .theme-btn,
    .theme-wrap:focus-within .theme-btn {
      border-color: #00d4ff;
      color: #00e5ff;
      background: rgba(0, 180, 255, 0.08);
      box-shadow: 0 0 18px rgba(0, 200, 255, 0.25);
    }
    .theme-wrap.open .theme-menu,
    .theme-wrap:focus-within .theme-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: auto;
    }
    @media (hover: hover) {
      .theme-wrap:hover .theme-menu,
      .theme-menu:hover {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
      }
    }
    /* theme icons: show current */
    
    
    
    
    
    
    
    .theme-btn svg { width: 16px; height: 16px; display: block; }

    /* Light theme menu skin */
    html[data-theme="light"] .theme-menu::before {
      background: rgba(255, 255, 255, 0.97);
      border-color: rgba(0, 90, 140, 0.25);
      box-shadow: 0 16px 40px rgba(20, 50, 90, 0.2);
    }
    html[data-theme="light"] .theme-menu button { color: #14212e; }
    html[data-theme="light"] .theme-menu button:hover {
      color: #006a94;
      background: rgba(0, 148, 200, 0.1);
      text-shadow: none;
    }
    html[data-theme="light"] .theme-menu button.active {
      color: #006a94;
      background: rgba(0, 148, 200, 0.12);
      text-shadow: none;
    }
    html[data-theme="light"] .theme-wrap.open .theme-btn,
    html[data-theme="light"] .theme-wrap:focus-within .theme-btn {
      color: #006a94;
      border-color: #0094c8;
      background: rgba(0, 148, 200, 0.08);
    }

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

  
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* ===== SAKURA — soft spring ===== */
    html[data-theme="sakura"] {
      color-scheme: light;
      --accent: #d46a8c;
      --accent-bright: #c4456e;
      --accent-mid: #e891ad;
      --accent-dim: rgba(212, 106, 140, 0.22);
      --text: #3d2a32;
      --text-strong: #2a1a22;
      --muted: #9a7a85;
      --panel-edge: rgba(212, 106, 140, 0.28);
      --panel-bar: #d46a8c;
      --focus-ring: #c4456e;
      --chip-done-bg: #d46a8c;
      --chip-done-fg: #fff;
    }
    html[data-theme="sakura"] body {
      background: #fdf6f8;
      background-image:
        radial-gradient(ellipse at 20% 15%, rgba(255, 200, 220, 0.55) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 80%, rgba(255, 230, 240, 0.5) 0%, transparent 50%),
        linear-gradient(180deg, #fff8fa 0%, #fdf2f5 50%, #faf0f3 100%);
      color: #3d2a32;
    }
    html[data-theme="sakura"] body::after {
      box-shadow: inset 0 0 100px rgba(255, 220, 230, 0.35);
    }
    html[data-theme="sakura"] .label,
    html[data-theme="sakura"] .bio-header .bio-title,
    html[data-theme="sakura"] h2.bio-title,
    html[data-theme="sakura"] .game-header h2,
    html[data-theme="sakura"] .bio h2 { color: #c4456e; }
    html[data-theme="sakura"] .title-text {
      color: #2a1a22;
      text-shadow: 0 2px 12px rgba(212, 106, 140, 0.15);
    }
    html[data-theme="sakura"] .title { --caret: #d46a8c; }
    html[data-theme="sakura"] .avatar-wrap {
      border-color: rgba(212, 106, 140, 0.4);
      box-shadow: 0 18px 40px rgba(180, 100, 130, 0.2), 0 0 24px rgba(255, 180, 200, 0.3);
    }
    html[data-theme="sakura"] .glow {
      background: radial-gradient(circle, rgba(255, 180, 200, 0.35) 0%, transparent 68%);
    }
    html[data-theme="sakura"] .bio,
    html[data-theme="sakura"] .game-panel {
      background: linear-gradient(145deg, rgba(255, 252, 253, 0.95), rgba(255, 245, 248, 0.92));
      border-color: rgba(212, 106, 140, 0.25);
      border-left-color: #d46a8c;
      box-shadow: 0 20px 50px rgba(180, 100, 130, 0.12);
      color: #3d2a32;
    }
    html[data-theme="sakura"] .bio p,
    html[data-theme="sakura"] .bio li { color: #3d2a32; }
    html[data-theme="sakura"] .bio strong, html[data-theme="sakura"] .bio b { color: #c4456e; text-shadow: none; }
    html[data-theme="sakura"] .bio li::before { color: #e891ad; }
    html[data-theme="sakura"] .contacts-toggle,
    html[data-theme="sakura"] .music-btn,
    html[data-theme="sakura"] .auto-btn {
      border-color: rgba(212, 106, 140, 0.45);
      color: #3d2a32;
      background: rgba(255, 255, 255, 0.75);
    }
    html[data-theme="sakura"] .contacts-toggle:hover,
    html[data-theme="sakura"] .music-btn:hover,
    html[data-theme="sakura"] .auto-btn:hover,
    html[data-theme="sakura"] .contacts.open .contacts-toggle,
    html[data-theme="sakura"] .music-wrap.open .music-btn,
    html[data-theme="sakura"] .theme-wrap.open .theme-btn,
    html[data-theme="sakura"] .music-btn.playing,
    html[data-theme="sakura"] .auto-btn.active {
      border-color: #d46a8c;
      color: #c4456e;
      background: rgba(255, 230, 240, 0.9);
      box-shadow: 0 0 18px rgba(212, 106, 140, 0.25);
    }
    html[data-theme="sakura"] .contacts-menu::before,
    html[data-theme="sakura"] .music-panel,
    html[data-theme="sakura"] .theme-menu::before {
      background: rgba(255, 252, 253, 0.97);
      border-color: rgba(212, 106, 140, 0.28);
      box-shadow: 0 16px 40px rgba(180, 100, 130, 0.15);
    }
    html[data-theme="sakura"] .contacts-menu a,
    html[data-theme="sakura"] .theme-menu button,
    html[data-theme="sakura"] .playlist-list button,
    html[data-theme="sakura"] .music-title { color: #2a1a22; }
    html[data-theme="sakura"] .contacts-menu a:hover,
    html[data-theme="sakura"] .theme-menu button:hover,
    html[data-theme="sakura"] .playlist-list button:hover {
      background: rgba(212, 106, 140, 0.1);
      color: #c4456e;
      text-shadow: none;
    }
    html[data-theme="sakura"] .theme-menu button.active { color: #c4456e; background: rgba(212, 106, 140, 0.12); text-shadow: none; }
    html[data-theme="sakura"] .progress-fill {
      background: linear-gradient(90deg, #e891ad, #d46a8c);
      box-shadow: 0 0 8px rgba(212, 106, 140, 0.35);
    }
    html[data-theme="sakura"] .progress-thumb { background: #d46a8c; }
    html[data-theme="sakura"] .mctl { border-color: rgba(212, 106, 140, 0.3); color: #3d2a32; }
    html[data-theme="sakura"] .mctl:hover { border-color: #d46a8c; color: #c4456e; background: rgba(212, 106, 140, 0.1); }
    html[data-theme="sakura"] .island {
      background: #fff;
      border: 1px solid rgba(212, 106, 140, 0.25);
      color: #6a4a55;
      box-shadow: 0 12px 30px rgba(180, 100, 130, 0.1);
    }
    html[data-theme="sakura"] .island b { color: #c4456e; }
    html[data-theme="sakura"] .island-item + .island-item { border-left-color: rgba(212, 106, 140, 0.2); }
    html[data-theme="sakura"] .site-footer { color: rgba(61, 42, 50, 0.55); }
    html[data-theme="sakura"] .game-card,
    html[data-theme="sakura"] .bot-card {
      background: rgba(255, 250, 252, 0.9);
      border-color: rgba(212, 106, 140, 0.22);
    }
    html[data-theme="sakura"] .game-card h3,
    html[data-theme="sakura"] .bot-card h3 { color: #c4456e; }
    html[data-theme="sakura"] .id-chip {
      background: rgba(212, 106, 140, 0.08);
      border-color: rgba(212, 106, 140, 0.22);
      color: #3d2a32;
    }
    html[data-theme="sakura"] .copy-btn { border-color: rgba(212, 106, 140, 0.4); color: #c4456e; }
    html[data-theme="sakura"] .copy-btn.done { background: #d46a8c; color: #fff; }
    html[data-theme="sakura"] .scroll-cue { color: #9a7a85; }
    html[data-theme="sakura"] .log-link { color: #9a7a85; }
    html[data-theme="sakura"] .log-link:hover { color: #c4456e; text-shadow: none; }
    html[data-theme="sakura"] .game-canvas-wrap { background: #2a1a22; border-color: rgba(212, 106, 140, 0.3); }
    html[data-theme="sakura"] .game-hint { color: #9a7a85; }
    html[data-theme="sakura"] .game-hint kbd { border-color: rgba(212, 106, 140, 0.4); color: #c4456e; }
    html[data-theme="sakura"] .game-stats { color: #9a7a85; }
    html[data-theme="sakura"] .game-stats span strong { color: #c4456e; }
    html[data-theme="sakura"] .vol-slider {
      background: linear-gradient(90deg, #e891ad, #d46a8c var(--v, 55%), rgba(212, 106, 140, 0.12) var(--v, 55%));
    }
    html[data-theme="sakura"] .music-sub,
    html[data-theme="sakura"] .playlist-header { color: #c4456e; }
    html[data-theme="sakura"] .music-time { color: #9a7a85; }

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

  
    /* ===== Theme-matched typefaces ===== */

    /* Dark — keep system / Helvetica + Barlow Condensed titles (default page fonts) */

    /* Light — same as dark */

    

    
    
    
    
    
    

    /* Sakura — Nunito + M PLUS Rounded (soft, round, cute) */
    html[data-theme="sakura"] body {
      font-family: "Nunito", "M PLUS Rounded 1c", "Helvetica Neue", sans-serif;
    }
    html[data-theme="sakura"] .label,
    html[data-theme="sakura"] .bio-header .bio-title,
    html[data-theme="sakura"] h2.bio-title,
    html[data-theme="sakura"] .game-header h2,
    html[data-theme="sakura"] .bio h2,
    html[data-theme="sakura"] .game-card h3,
    html[data-theme="sakura"] .bot-card h3,
    html[data-theme="sakura"] .contacts-toggle,
    html[data-theme="sakura"] .music-btn,
    html[data-theme="sakura"] .auto-btn,
    html[data-theme="sakura"] .playlist-header,
    html[data-theme="sakura"] .music-sub,
    html[data-theme="sakura"] .game-stats,
    html[data-theme="sakura"] .scroll-cue,
    html[data-theme="sakura"] .log-link,
    html[data-theme="sakura"] .site-footer,
    html[data-theme="sakura"] .island,
    html[data-theme="sakura"] .copy-btn,
    html[data-theme="sakura"] .id-chip small,
    html[data-theme="sakura"] .bot-card .go {
      font-family: "M PLUS Rounded 1c", "Nunito", sans-serif;
      letter-spacing: 0.08em;
      font-weight: 700;
    }
    html[data-theme="sakura"] .title-text {
      font-family: "M PLUS Rounded 1c", "Nunito", sans-serif;
      letter-spacing: 0.04em;
      font-weight: 700;
    }
    html[data-theme="sakura"] .bio,
    html[data-theme="sakura"] .game-panel,
    html[data-theme="sakura"] .bio p,
    html[data-theme="sakura"] .bio li,
    html[data-theme="sakura"] .contacts-menu a,
    html[data-theme="sakura"] .theme-menu button,
    html[data-theme="sakura"] .playlist-list button,
    html[data-theme="sakura"] .music-title {
      font-family: "Nunito", "M PLUS Rounded 1c", sans-serif;
      font-weight: 500;
    }
    html[data-theme="sakura"] .bio p { font-size: 18.5px; line-height: 1.8; }

    
    
    
    
    
    

    
    
    
    
    
    

    
    

    /* ===== Backgrounds: one continuous, fixed, full-screen gradient in EVERY theme =====
       Several themes set `background:` as a shorthand, which silently reset fixed/no-repeat and made the gradient
       repeat every screen height (visible seams while scrolling). These longhands are re-applied last for all themes. */
    html body, html[data-theme] body {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: 0 0;
      background-attachment: fixed;
    }
    /* Phones that ignore fixed backgrounds (iOS): keep the gradient pinned to the screen with a fixed layer instead */
    @supports (-webkit-touch-callout: none) {
      html { height: auto; min-height: 100%; }
      html body, html[data-theme] body { background-attachment: scroll; min-height: 100vh; }
    }


    /* ===== Blonic 46: cross-theme typography normalization =====
       Keep each theme's typeface and character, but normalize visual scale,
       reading rhythm, and control sizing so switching themes does not make
       the page feel like it has been zoomed in or out. */
    :root {
      --type-body: 16px;
      --type-copy: 18px;
      --type-list: 17px;
      --type-section: 18px;
      --type-card-title: 19px;
      --type-control: 13px;
      --type-meta: 13px;
      --type-line: 1.68;
    }

    html body,
    html[data-theme] body {
      font-size: var(--type-body);
    }

    /* Main content: same readable scale in all seven themes. */
    html .bio p,
    html[data-theme] .bio p {
      font-size: var(--type-copy);
      line-height: var(--type-line);
    }
    html .bio li,
    html[data-theme] .bio li {
      font-size: var(--type-list);
      line-height: 1.62;
    }
    html .bio-header .bio-title,
    html[data-theme] .bio-header .bio-title,
    html .bio h2,
    html[data-theme] .bio h2,
    html .game-header h2,
    html[data-theme] .game-header h2 {
      font-size: var(--type-section);
      line-height: 1.3;
    }
    html .game-card h3,
    html[data-theme] .game-card h3,
    html .bot-card h3,
    html[data-theme] .bot-card h3 {
      font-size: var(--type-card-title);
      line-height: 1.3;
    }
    html .bio .game-card p,
    html[data-theme] .bio .game-card p,
    html .bot-card p,
    html[data-theme] .bot-card p {
      font-size: 15.5px;
      line-height: 1.55;
    }

    /* The hero title remains intentionally prominent; only normalize its
       scale envelope. Theme-specific weight and letter shape are retained. */
    html .title-text,
    html[data-theme] .title-text {
      font-size: calc(clamp(52px, 12vw, 92px) * var(--fit, 1));
      line-height: 1;
    }
    html .label,
    html[data-theme] .label {
      font-size: 13px;
      line-height: 1.25;
    }

    /* Navigation, buttons, badges, metadata and utility labels. */
    html .contacts-toggle,
    html[data-theme] .contacts-toggle,
    html .music-btn,
    html[data-theme] .music-btn,
    html .auto-btn,
    html[data-theme] .auto-btn,
    html .theme-btn,
    html[data-theme] .theme-btn {
      font-size: var(--type-control);
    }
    html .contacts-menu a,
    html[data-theme] .contacts-menu a,
    html .theme-menu button,
    html[data-theme] .theme-menu button,
    html .playlist-list button,
    html[data-theme] .playlist-list button {
      font-size: 14px;
      line-height: 1.45;
    }
    html .music-title,
    html[data-theme] .music-title { font-size: 14px; }
    html .music-sub,
    html[data-theme] .music-sub { font-size: 11px; }
    html .game-stats,
    html[data-theme] .game-stats { font-size: 14px; }
    html .game-hint,
    html[data-theme] .game-hint { font-size: 13px; }
    html .island,
    html[data-theme] .island { font-size: 15px; line-height: 1.45; }
    html .id-chip,
    html[data-theme] .id-chip { font-size: 14px; }
    html .id-chip small,
    html[data-theme] .id-chip small { font-size: 11px; }
    html .copy-btn,
    html[data-theme] .copy-btn { font-size: 11px; }
    html .bot-card .go,
    html[data-theme] .bot-card .go { font-size: 11px; }
    html .scroll-cue,
    html[data-theme] .scroll-cue { font-size: 11px; }
    html .site-footer,
    html[data-theme] .site-footer { font-size: 13px; }

    /* Font personalities remain distinct, with tracking tuned to avoid
       oversized-looking text in wide-spaced display faces. */
    html[data-theme="dark"] .bio p,
    html:not([data-theme]) .bio p { letter-spacing: 0.15px; }
    html[data-theme="light"] .bio p { letter-spacing: 0.1px; }
    
    
    html[data-theme="sakura"] .bio p { letter-spacing: 0.005em; }
    
    

    @media (max-width: 720px) {
      html .title-text,
      html[data-theme] .title-text {
        font-size: calc(clamp(44px, 13vw, 68px) * var(--fit, 1));
      }
      html .label,
      html[data-theme] .label { font-size: 11px; }
      html .bio p,
      html[data-theme] .bio p { font-size: 16.5px; line-height: 1.68; }
      html .bio li,
      html[data-theme] .bio li { font-size: 15.5px; line-height: 1.6; }
      html .bio-header .bio-title,
      html[data-theme] .bio-header .bio-title,
      html .bio h2,
      html[data-theme] .bio h2,
      html .game-header h2,
      html[data-theme] .game-header h2 { font-size: 16px; }
      html .game-card h3,
      html[data-theme] .game-card h3,
      html .bot-card h3,
      html[data-theme] .bot-card h3 { font-size: 17px; }
      html .island,
      html[data-theme] .island { font-size: 13.5px; }
    }



    /* ===== Blonic 47: theme-native interaction language =====
       Every interactive state now draws from the active theme palette.
       The seven themes keep distinct motion and glow character without a
       shared cyan fallback leaking into unrelated controls. */
    :root {
      --hover-ink: #00e5ff;
      --hover-edge: rgba(0, 212, 255, .72);
      --hover-wash: rgba(0, 200, 255, .12);
      --hover-glow: 0 0 18px rgba(0, 200, 255, .24);
      --hover-glow-strong: 0 0 24px rgba(0, 200, 255, .34);
      --hover-shadow: 0 10px 28px rgba(0, 0, 0, .34);
      --hover-duration: 220ms;
    }
    html[data-theme="light"] {
      --hover-ink: #075d82;
      --hover-edge: rgba(30, 132, 174, .62);
      --hover-wash: rgba(40, 145, 185, .10);
      --hover-glow: 0 5px 18px rgba(30, 105, 145, .13);
      --hover-glow-strong: 0 8px 24px rgba(30, 105, 145, .19);
      --hover-shadow: 0 9px 24px rgba(35, 65, 90, .12);
    }
    
    
    html[data-theme="sakura"] {
      --hover-ink: #b83e68;
      --hover-edge: rgba(212, 106, 140, .72);
      --hover-wash: rgba(232, 145, 173, .16);
      --hover-glow: 0 5px 18px rgba(196, 69, 110, .16);
      --hover-glow-strong: 0 8px 24px rgba(196, 69, 110, .22);
      --hover-shadow: 0 10px 26px rgba(130, 65, 90, .12);
    }
    
    

    /* Smooth, consistent response while preserving each component's layout. */
    html :is(button, a, .game-card, .bot-card, .avatar-wrap, .log-link, .island,
      .copy-btn, .mctl, .music-btn, .auto-btn, .contacts-toggle, .theme-btn,
      .playlist-list button, .contacts-menu a, .theme-menu button) {
      transition-property: color, background-color, border-color, box-shadow, text-shadow, transform, filter, padding-left;
      transition-duration: var(--hover-duration);
      transition-timing-function: cubic-bezier(.2, .75, .25, 1);
    }

    /* Restore the original Contacts submenu's subtle rightward text slide. */
    html .contacts-menu a {
      padding-left: 22px;
    }
    html .contacts-menu a:hover,
    html .contacts-menu a:focus-visible {
      padding-left: 28px;
    }

    /* Main controls and navigation. */
    html :is(.music-btn, .mctl, .auto-btn, .contacts-toggle, .theme-btn, .copy-btn):is(:hover, :focus-visible),
    html :is(.music-wrap:hover .music-btn, .contacts:hover .contacts-toggle):not(:disabled) {
      color: var(--hover-ink);
      border-color: var(--hover-edge);
      background-color: var(--hover-wash);
      box-shadow: var(--hover-glow);
    }
    html :is(.contacts-menu a, .theme-menu button, .playlist-list button):is(:hover, :focus-visible) {
      color: var(--hover-ink);
      background-color: var(--hover-wash);
      text-shadow: 0 0 10px color-mix(in srgb, var(--hover-ink) 32%, transparent);
    }
    html :is(.music-btn, .auto-btn, .contacts-toggle, .theme-btn):is(:focus-visible, .active),
    html .music-btn.playing {
      border-color: var(--hover-edge);
      box-shadow: var(--hover-glow);
    }

    /* Theme selector trigger follows the same active-theme glow as other controls. */
    html .theme-btn {
      transition:
        color var(--hover-duration) cubic-bezier(.2, .75, .25, 1),
        background-color var(--hover-duration) cubic-bezier(.2, .75, .25, 1),
        border-color var(--hover-duration) cubic-bezier(.2, .75, .25, 1),
        box-shadow var(--hover-duration) cubic-bezier(.2, .75, .25, 1),
        transform var(--hover-duration) cubic-bezier(.2, .75, .25, 1);
    }
    html .theme-btn:hover,
    html .theme-wrap:hover .theme-btn,
    html .theme-wrap.open .theme-btn,
    html .theme-wrap:focus-within .theme-btn {
      color: var(--hover-ink);
      border-color: var(--hover-edge);
      background: var(--hover-wash);
      box-shadow: var(--hover-glow);
    }

    /* Clickable content cards: a restrained lift, themed edge and matching glow. */
    html :is(.game-card, .bot-card, .log-link, .island):is(:hover, :focus-visible) {
      border-color: var(--hover-edge);
      box-shadow: var(--hover-shadow), var(--hover-glow);
    }
    html :is(.game-card, .bot-card):is(:hover, :focus-visible) {
      transform: translateY(-3px);
    }
    html .avatar-wrap:hover {
      box-shadow: var(--hover-shadow), var(--hover-glow-strong);
    }
    html .scroll-cue:hover { color: var(--hover-ink); }
    html .log-link:hover { color: var(--hover-ink); }
    html .log-link:hover .log-arrow { transform: translateX(4px); }

    /* Replace remaining hard-coded cyan hover treatments in the music UI. */
    html .music-btn:hover,
    html .auto-btn:hover,
    html .mctl:hover,
    html .mctl.play:hover {
      color: var(--hover-ink);
      border-color: var(--hover-edge);
      background: var(--hover-wash);
      box-shadow: var(--hover-glow);
    }
    html .playlist-list button:hover { color: var(--hover-ink); background: var(--hover-wash); }
    html .contacts-menu a:hover,
    html .theme-menu button:hover {
      color: var(--hover-ink);
      background: var(--hover-wash);
      text-shadow: 0 0 10px color-mix(in srgb, var(--hover-ink) 35%, transparent);
    }

    /* Keep keyboard navigation as visible and theme-consistent as mouse hover. */
    html :is(button, a, [role="button"], .game-card, .bot-card):focus-visible {
      outline: 2px solid var(--focus-ring);
      outline-offset: 3px;
    }
    @media (prefers-reduced-motion: reduce) {
      html :is(button, a, .game-card, .bot-card, .avatar-wrap, .log-link, .island,
        .copy-btn, .mctl, .music-btn, .auto-btn, .contacts-toggle, .theme-btn,
        .playlist-list button, .contacts-menu a, .theme-menu button) {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
      }
    }



    

    /* Shared motion foundation for the five redesigned themes. */
    
    html[data-theme="sakura"] :is(button, input, textarea, select, a){
      transition-property: color, background-color, border-color, box-shadow, transform, filter, padding-left;
      transition-duration: 240ms;
      transition-timing-function: cubic-bezier(.2, .72, .25, 1);
    }

    
    
    
    
    

    
    
    
    
    

    /* Sakura — soft porcelain/paper surfaces, rounded controls and gentle rose feedback.
       Exclude menu / list / playlist items so dropdown entries stay flat (no pill rectangle). */
    html[data-theme="sakura"] :is(button, .copy-btn, .mctl, .contacts-toggle, .music-btn, .auto-btn, .theme-btn):not(.theme-menu button):not(.playlist-list button):not(.contacts-menu a) {
      color: #87445d;
      background: linear-gradient(180deg, rgba(255, 250, 252, .98), rgba(250, 229, 237, .96));
      border: 1px solid rgba(205, 126, 153, .42);
      border-radius: 999px;
      box-shadow: 0 3px 10px rgba(150, 74, 104, .09), inset 0 1px 0 rgba(255, 255, 255, .9);
    }
    html[data-theme="sakura"] :is(button, .copy-btn, .mctl, .contacts-toggle, .music-btn, .auto-btn, .theme-btn):not(.theme-menu button):not(.playlist-list button):not(.contacts-menu a):is(:hover, :focus-visible) {
      color: #a52f60;
      background: linear-gradient(180deg, #fffafd, #f8dce7);
      border-color: #d66f98;
      box-shadow: 0 6px 16px rgba(190, 91, 128, .17), 0 0 0 3px rgba(232, 145, 173, .12);
      transform: translateY(-1px);
    }
    /* Theme / playlist / contacts menu entries: flat, no border box */
    html[data-theme="sakura"] .theme-menu button,
    html[data-theme="sakura"] .playlist-list button,
    html[data-theme="sakura"] .contacts-menu a {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      transform: none !important;
      text-shadow: none !important;
      filter: none !important;
    }
    html[data-theme="sakura"] .theme-menu button:hover,
    html[data-theme="sakura"] .theme-menu button:focus-visible,
    html[data-theme="sakura"] .theme-menu button.active,
    html[data-theme="sakura"] .playlist-list button:hover,
    html[data-theme="sakura"] .playlist-list button:focus-visible,
    html[data-theme="sakura"] .playlist-list button.active,
    html[data-theme="sakura"] .contacts-menu a:hover,
    html[data-theme="sakura"] .contacts-menu a:focus-visible {
      background: rgba(212, 106, 140, 0.1) !important;
      color: #c4456e !important;
      border: none !important;
      box-shadow: none !important;
      text-shadow: none !important;
      filter: none !important;
      transform: none !important;
    }
    html[data-theme="sakura"] :is(input:not([type="range"]), textarea, select) {
      color: #633b4b;
      background: linear-gradient(180deg, #fffdfd, #fff5f8);
      border: 1px solid rgba(205, 126, 153, .48);
      border-radius: 13px;
      box-shadow: inset 0 2px 4px rgba(150, 74, 104, .055);
      accent-color: #d66f98;
    }
    html[data-theme="sakura"] :is(input, textarea, select):focus {
      outline: none;
      border-color: #d66f98;
      box-shadow: 0 0 0 3px rgba(214, 111, 152, .16), inset 0 2px 4px rgba(150, 74, 104, .04);
    }

    
    
    
    
    

    
    
    
    
    

    /* Keep native range controls in-family without changing their dimensions. */
    
    
    html[data-theme="sakura"] input[type="range"] { accent-color: #d66f98; }
    
    

    @media (prefers-reduced-motion: reduce) {
      
      html[data-theme="sakura"] :is(button, input, textarea, select, a){
        transition-duration: 0.01ms;
      }
    }

  

    /* Theme button icon: moon for Dark, sun for Light, sakura flower for Sakura. */
    
    
    
    
    


    /* Theme button icon: moon for Dark, sun for Light, flower for Sakura. */
    .theme-btn .icon-sun,
    .theme-btn .icon-sakura { display: none; }
    html[data-theme="light"] .theme-btn .icon-moon { display: none; }
    html[data-theme="light"] .theme-btn .icon-sun { display: block; }
    html[data-theme="sakura"] .theme-btn .icon-moon { display: none; }
    html[data-theme="sakura"] .theme-btn .icon-sakura { display: block; }

    /* Radiant text glow — Dark theme only.
       Light & Sakura: no text glow; soft box-shadow feedback only (matches overall style). */
    html:not([data-theme="light"]):not([data-theme="sakura"]) {
      --radiant-glow-core: color-mix(in srgb, var(--hover-ink) 90%, transparent);
      --radiant-glow-mid: color-mix(in srgb, var(--hover-ink) 65%, transparent);
      --radiant-glow-outer: color-mix(in srgb, var(--hover-ink) 40%, transparent);
    }

    html:not([data-theme="light"]):not([data-theme="sakura"]) :is(
      button,
      [role="button"],
      .contacts-menu a,
      .theme-menu a,
      .theme-menu button,
      .log-link
    ):is(:hover, :focus-visible) {
      text-shadow:
        0 0 8px var(--radiant-glow-core),
        0 0 18px var(--radiant-glow-mid),
        0 0 32px var(--radiant-glow-outer);
    }

    html:not([data-theme="light"]):not([data-theme="sakura"]) :is(
      button,
      [role="button"],
      .contacts-menu a,
      .theme-menu a,
      .theme-menu button,
      .log-link
    ):is(:hover, :focus-visible) svg {
      filter:
        drop-shadow(0 0 5px var(--radiant-glow-core))
        drop-shadow(0 0 12px var(--radiant-glow-mid));
    }

    /* Light & Sakura: strip text-glow / icon-glow; keep soft themed box-shadow */
    html[data-theme="light"] :is(
      button, [role="button"], .contacts-menu a, .theme-menu button, .theme-menu a, .log-link, .playlist-list button
    ):is(:hover, :focus-visible),
    html[data-theme="light"] :is(
      button, [role="button"], .contacts-menu a, .theme-menu button, .theme-menu a, .log-link, .playlist-list button
    ).active {
      text-shadow: none !important;
      filter: none !important;
    }
    html[data-theme="sakura"] :is(
      button, [role="button"], .contacts-menu a, .theme-menu button, .theme-menu a, .log-link, .playlist-list button
    ):is(:hover, :focus-visible),
    html[data-theme="sakura"] :is(
      button, [role="button"], .contacts-menu a, .theme-menu button, .theme-menu a, .log-link, .playlist-list button
    ).active {
      text-shadow: none !important;
      filter: none !important;
    }

    /* Soft button hover for Light (no cyan text glow) */
    html[data-theme="light"] :is(.music-btn, .theme-btn, .contacts-toggle, .auto-btn, .mctl, .copy-btn, .log-back, .log-link):is(:hover, :focus-visible) {
      color: #006a94;
      border-color: rgba(0, 106, 148, 0.55);
      background: rgba(0, 148, 200, 0.08);
      box-shadow: 0 4px 14px rgba(30, 105, 145, 0.12);
      text-shadow: none !important;
    }

    /* Soft button hover for Sakura (rose, no cyan) */
    html[data-theme="sakura"] :is(.music-btn, .theme-btn, .contacts-toggle, .auto-btn, .mctl, .copy-btn, .log-back, .log-link):is(:hover, :focus-visible) {
      color: #c4456e;
      border-color: #d46a8c;
      background: rgba(212, 106, 140, 0.1);
      box-shadow: 0 4px 14px rgba(196, 69, 110, 0.14);
      text-shadow: none !important;
    }

/* ---- Hover bridges: keep dropdowns open while pointer moves into them ---- */
.music-panel::before,
.theme-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
  background: transparent;
}
.music-wrap:hover .music-panel,
.music-panel:hover,
.music-wrap.open .music-panel,
.music-wrap:focus-within .music-panel {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}
.theme-wrap:hover .theme-menu,
.theme-menu:hover,
.theme-wrap.open .theme-menu,
.theme-wrap:focus-within .theme-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
@media (hover: hover) {
  .music-wrap:hover .music-btn .chev { transform: rotate(180deg); }
  .theme-wrap:hover .theme-btn .chev { transform: rotate(180deg); }
}