/* ════ THEMES ════════════════════════════════════════════ */
  :root,
  [data-theme="sunny"] {
      --bg: #FFE500;
      --bg-dot: rgba(0, 0, 0, .1);
      --surface: #ffffff;
      --field: #FFFEF0;
      --text: #003A8C;
      --muted: #555;
      --brd: #1a1a1a;
      --sh: 4px 4px 0 #1a1a1a;
      --shl: 6px 6px 0 #1a1a1a;
      --r: 10px;
      --c1: #E53935;
      --c2: #0097A7;
      --c3: #388E3C;
      --lc0: #FFE500;
      --lt0: #1a1a1a;
      --lc1: #E53935;
      --lt1: #fff;
      --lc2: #0097A7;
      --lt2: #fff;
      --bl1: #388E3C;
      --bl2: #0097A7;
      --bl3: #F57C00;
      --bl4: #E53935;
      --bs1: #B2EBF2;
      --bs2: #0097A7;
      --bs3: #FF8A65;
      --bstart: #388E3C;
      --bstop: #E53935;
      --tip: #FFFDE7;
  }

  [data-theme="ocean"] {
      --bg: #C5E8F8;
      --bg-dot: rgba(0, 30, 60, .08);
      --surface: #fff;
      --field: #EBF5FC;
      --text: #0D2233;
      --muted: #3A607A;
      --brd: #0D2233;
      --sh: 4px 4px 0 #0D2233;
      --shl: 6px 6px 0 #0D2233;
      --c1: #0277BD;
      --c2: #FF7043;
      --c3: #00897B;
      --lc0: #01579B;
      --lt0: #fff;
      --lc1: #0277BD;
      --lt1: #fff;
      --lc2: #FF7043;
      --lt2: #fff;
      --bl1: #00897B;
      --bl2: #0277BD;
      --bl3: #FF7043;
      --bl4: #E53935;
      --bs1: #B2EBF2;
      --bs2: #0277BD;
      --bs3: #FF7043;
      --bstart: #00897B;
      --bstop: #E53935;
      --tip: #E8F5E9;
  }

  [data-theme="night"] {
      --bg: #14141F;
      --bg-dot: rgba(255, 255, 255, .04);
      --surface: #1E1E2E;
      --field: #12121C;
      --text: #F0F0F0;
      --muted: #AAA;
      --brd: #F0F0F0;
      --sh: 4px 4px 0 #ffffff;
      --shl: 6px 6px 0 #ffffff;
      --c1: #FF4D6A;
      --c2: #0057B7;
      --c3: #FFD700;
      --lc0: #ffffff;
      --lt0: #14141F;
      --lc1: #FF4D6A;
      --lt1: #fff;
      --lc2: #0057B7;
      --lt2: #14141F;
      --bl1: #1B5E20;
      --bl2: #006064;
      --bl3: #BF360C;
      --bl4: #7B0000;
      --bs1: #1A237E;
      --bs2: #006064;
      --bs3: #880E4F;
      --bstart: #1B5E20;
      --bstop: #7B0000;
      --tip: #1E1E2E;
  }

  [data-theme="berry"] {
      --bg: #FFDDE8;
      --bg-dot: rgba(100, 0, 50, .06);
      --surface: #fff;
      --field: #FFF5F8;
      --text: #1a1a1a;
      --muted: #665;
      --brd: #1a1a1a;
      --sh: 4px 4px 0 #1a1a1a;
      --shl: 6px 6px 0 #1a1a1a;
      --c1: #C62A47;
      --c2: #6A1B9A;
      --c3: #00897B;
      --lc0: #FFDDE8;
      --lt0: #1a1a1a;
      --lc1: #C62A47;
      --lt1: #fff;
      --lc2: #00695C;
      --lt2: #fff;
      --bl1: #00897B;
      --bl2: #6A1B9A;
      --bl3: #E64A19;
      --bl4: #C62A47;
      --bs1: #F3E5F5;
      --bs2: #6A1B9A;
      --bs3: #C62A47;
      --bstart: #00897B;
      --bstop: #C62A47;
      --tip: #F3E5F5;
  }

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

  body {
      font-family: 'Nunito', 'Segoe UI', Arial, sans-serif;
      background: var(--bg);
      background-image: radial-gradient(circle, var(--bg-dot) 1.5px, transparent 1.5px);
      background-size: 26px 26px;
      min-height: 100vh;
      padding: 18px 14px 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--text);
      transition: background-color .35s, color .35s;
  }

  /* HEADER */
  .hdr {
      width: 100%;
      max-width: 920px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      gap: 10px;
  }

  h1 {
      font-size: clamp(1.5em, 3.8vw, 2.2em);
      font-weight: 900;
      color: var(--text);
      /*text-shadow: 2px 2px 0 var(--surface);*/
      line-height: 1.15;
  }

  h1 i {
      margin-right: 6px;
  }

  .hdr-ctrl {
      display: flex;
      gap: 8px;
      flex-shrink: 0;
  }

  .ibtn {
      min-width: 52px;
      height: 52px;
      padding: 0 12px;
      border: 2px solid var(--brd);
      box-shadow: var(--sh);
      border-radius: var(--r);
      background: var(--surface);
      color: var(--text);
      font-family: inherit;
      font-size: .9em;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      transition: transform .1s, box-shadow .1s;
  }

  .ibtn i {
      font-size: 1.1em;
  }

  .ibtn:hover {
      transform: translate(-2px, -2px);
      box-shadow: var(--shl);
  }

  .ibtn:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--brd);
  }

  .ibtn:focus-visible {
      outline: 3px solid var(--c2);
      outline-offset: 3px;
  }

  .ibtn.ua {
      background: #0057B7;
      color: #FFD700;
      border-color: #003A8C;
  }

  .ibtn.en {
      background: #B22234;
      color: #fff;
      border-color: #7A0019;
  }

  /* CONTAINER */
  #gc {
      width: 100%;
      max-width: 920px;
      background: var(--surface);
      border: 2px solid var(--brd);
      box-shadow: var(--shl);
      border-radius: 16px;
      padding: 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      transition: background-color .35s;
  }

  /* INFO PANEL */
  #ip {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      width: 100%;
  }

  .ic {
      border: 2px solid var(--brd);
      box-shadow: var(--sh);
      border-radius: var(--r);
      padding: 11px 8px;
      text-align: center;
      font-size: clamp(1em, 2.4vw, 1.2em);
      font-weight: 900;
      color: #fff;
      transition: transform .15s, box-shadow .15s;
  }

  .ic i {
      margin-right: 5px;
  }

  #score {
      background: var(--c1);
  }

  #timer {
      background: var(--c2);
  }

  #streak {
      background: var(--c3);
  }

  .ic.pop {
      transform: scale(1.07);
      box-shadow: var(--shl);
  }

  #timer.low {
      background: #FF2222 !important;
      animation: tpulse .55s infinite alternate;
  }

  @keyframes tpulse {
      from {
          transform: scale(1)
      }

      to {
          transform: scale(1.06)
      }
  }

  /* ADAPTIVE BAR */
  #abar {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .85em;
      font-weight: 700;
      color: var(--muted);
      opacity: 0;
      transition: opacity .4s;
  }

  #abar.vis {
      opacity: 1;
  }

  #abar i {
      color: var(--c2);
  }

  #atrack {
      flex: 1;
      height: 11px;
      border: 2px solid var(--brd);
      border-radius: 8px;
      background: var(--field);
      overflow: hidden;
  }

  #afill {
      height: 100%;
      width: 50%;
      background: var(--c3);
      border-radius: 6px;
      transition: width .7s, background .7s;
  }

  #apct {
      min-width: 32px;
      text-align: right;
  }

  /* GAME FIELD */
  #gf {
      width: 100%;
      height: 260px;
      border: 2px solid var(--brd);
      box-shadow: var(--sh);
      border-radius: var(--r);
      background: var(--field);
      position: relative;
      overflow: hidden;
      transition: background-color .35s;
  }

  /* BUTTONS */
  .brow {
      display: flex;
      gap: 9px;
      width: 100%;
  }

  .btn {
      flex: 1;
      min-width: 0;
      border: 2px solid var(--brd);
      box-shadow: var(--sh);
      border-radius: var(--r);
      padding: 11px 7px;
      font-family: inherit;
      font-size: clamp(.78em, 1.7vw, .97em);
      font-weight: 800;
      cursor: pointer;
      color: var(--text);
      background: var(--surface);
      position: relative;
      white-space: nowrap;
      transition: transform .1s, box-shadow .1s, filter .1s;
  }

  .btn i {
      margin-right: 4px;
  }

  .btn:hover {
      transform: translate(-2px, -2px);
      box-shadow: var(--shl);
  }

  .btn:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--brd);
  }

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

  .btn.sel::after {
      content: '\f00c';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      top: 4px;
      right: 7px;
      font-size: .65em;
      opacity: .65;
  }

  .btn.sel {
      filter: brightness(.86);
      box-shadow: var(--shl);
  }

  #beginner {
      background: var(--bl1);
      color: #fff;
  }

  #easy {
      background: var(--bl2);
      color: #fff;
  }

  #medium {
      background: var(--bl3);
      color: #fff;
  }

  #hard {
      background: var(--bl4);
      color: #fff;
  }

  #slow {
      background: var(--bs1);
  }

  #medium-speed {
      background: var(--bs2);
      color: #fff;
  }

  #fast {
      background: var(--bs3);
      color: #fff;
  }

  .arow {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
  }

  #sbtn,
  #rbtn {
      flex: unset;
      min-width: 168px;
      font-size: clamp(.95em, 2.2vw, 1.1em);
      padding: 13px 22px;
  }

  #sbtn {
      background: var(--bstart);
      color: #fff;
  }

  #rbtn {
      background: var(--bstop);
      color: #fff;
      display: none;
  }

  /* LETTERS — critical: no "transition:all" to prevent teleport bug */
  .lt {
      position: absolute;
      left: -70px;
      font-size: 2em;
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 60px;
      border-radius: 12px;
      border: 3px solid var(--brd);
      box-shadow: 3px 3px 0 var(--brd);
      transition: scale .22s, opacity .22s, background-color .18s, border-color .18s;
      will-change: left;
      animation: mvr var(--ldur, 6000ms) linear forwards, uglow .42s ease infinite alternate;
      animation-play-state: running, paused;
  }

  .lt.c0 {
      background: var(--lc0);
      color: var(--lt0);
  }

  .lt.c1 {
      background: var(--lc1);
      color: var(--lt1);
  }

  .lt.c2 {
      background: var(--lc2);
      color: var(--lt2);
  }

  .lt.ok {
      scale: 1.3;
      opacity: 0;
      background-color: var(--c3) !important;
      border-color: var(--c3) !important;
  }

  .lt.urgent {
      /* Only enable the warning glow — do NOT override the movement animation (prevents restart) */
      animation-play-state: running, running;
  }

  @keyframes mvr {
      from {
          left: -70px;
      }

      to {
          left: calc(100% + 10px);
      }
  }

  @keyframes uglow {
      from {
          box-shadow: 3px 3px 0 var(--brd);
          border-color: #FF4757;
      }

      to {
          box-shadow: 3px 3px 0 var(--brd), 0 0 18px rgba(255, 0, 0, .9);
          border-color: #FF0000;
      }
  }

  /* FEEDBACK */
  #fb {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--c3);
      color: #fff;
      border: 2px solid var(--brd);
      box-shadow: 3px 3px 0 var(--brd);
      padding: 7px 18px;
      border-radius: 30px;
      font-size: clamp(.82em, 2.2vw, 1.05em);
      font-weight: 800;
      opacity: 0;
      pointer-events: none;
      transition: opacity .2s;
      z-index: 15;
      white-space: nowrap;
  }

  #fb.vis {
      opacity: 1;
  }

  #fb.neg {
      background: var(--c1);
  }

  #fb.neu {
      background: var(--c2);
  }

  /* MODAL — confirm stop */
  .moverlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .52);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3000;
      backdrop-filter: blur(5px);
  }

  .mbox {
      background: var(--surface);
      border: 2px solid var(--brd);
      box-shadow: var(--shl);
      border-radius: 18px;
      padding: 30px 32px;
      max-width: 380px;
      width: 90%;
      text-align: center;
      animation: popin .2s ease-out;
  }

  .mbox h3 {
      font-size: 1.4em;
      font-weight: 900;
      margin-bottom: 10px;
  }

  .mbox p {
      color: var(--muted);
      font-size: .95em;
      font-weight: 600;
      margin-bottom: 22px;
      line-height: 1.5;
  }

  .mactions {
      display: flex;
      gap: 10px;
      justify-content: center;
  }

  .mactions .btn {
      flex: 1;
  }

  #mresume {
      background: var(--bstart);
      color: #fff;
  }

  #mstop {
      background: var(--bstop);
      color: #fff;
  }

  /* GAME-OVER OVERLAY */
  #go {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, .62);
      display: flex;
      align-items: flex-start;
      justify-content: center;
      z-index: 2000;
      backdrop-filter: blur(7px);
      padding: 20px 14px 40px;
      overflow-y: auto;
  }

  .gopanel {
      background: var(--surface);
      border: 2px solid var(--brd);
      box-shadow: var(--shl);
      border-radius: 20px;
      padding: 26px 24px;
      max-width: 580px;
      width: 100%;
      margin: auto;
      animation: popin .3s ease-out;
  }

  @keyframes popin {
      from {
          transform: scale(.82);
          opacity: 0
      }

      to {
          transform: scale(1);
          opacity: 1
      }
  }

  .gohdr {
      text-align: center;
      margin-bottom: 18px;
  }

  .gohdr .goico {
      font-size: 2.4em;
      color: var(--c1);
      display: block;
      margin-bottom: 6px;
  }

  .gohdr h2 {
      font-size: clamp(1.4em, 4vw, 2em);
      font-weight: 900;
  }

  .sgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 14px;
  }

  @media(min-width:460px) {
      .sgrid {
          grid-template-columns: repeat(4, 1fr);
      }
  }

  .scard {
      background: var(--field);
      border: 2px solid var(--brd);
      border-radius: 12px;
      padding: 13px 8px;
      text-align: center;
  }

  .scard i {
      font-size: 1.3em;
      display: block;
      margin-bottom: 4px;
  }

  .sval {
      font-size: 1.7em;
      font-weight: 900;
      line-height: 1;
  }

  .slbl {
      font-size: .72em;
      font-weight: 700;
      color: var(--muted);
      margin-top: 3px;
  }

  .scard:nth-child(1) i {
      color: var(--c1);
  }

  .scard:nth-child(2) i {
      color: var(--c2);
  }

  .scard:nth-child(3) i {
      color: var(--c2);
  }

  .scard:nth-child(4) i {
      color: var(--c3);
  }

  .gtags {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-bottom: 12px;
  }

  .gtag {
      background: var(--bg);
      border: 2px solid var(--brd);
      border-radius: 8px;
      padding: 4px 11px;
      font-size: .87em;
      font-weight: 800;
  }

  .gsec {
      margin-bottom: 12px;
  }

  .gsec h4 {
      font-size: .95em;
      font-weight: 800;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      gap: 6px;
  }

  .mrow {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
  }

  .mchip {
      background: var(--c1);
      color: #fff;
      border: 2px solid var(--brd);
      border-radius: 9px;
      padding: 5px 13px;
      font-size: 1.15em;
      font-weight: 900;
  }

  .mchip sub {
      font-size: .55em;
      font-weight: 700;
      opacity: .85;
  }

  #goach {
      background: var(--c2);
      color: #fff;
      border: 2px solid var(--brd);
      box-shadow: var(--sh);
      border-radius: 10px;
      padding: 10px 14px;
      font-size: 1.05em;
      font-weight: 900;
      text-align: center;
      margin-bottom: 12px;
  }

  #gobest {
      text-align: center;
      font-size: 1em;
      font-weight: 900;
      color: var(--c3);
      margin-bottom: 12px;
      padding: 9px;
      border: 2px dashed var(--c3);
      border-radius: 9px;
  }

  .tip {
      background: var(--tip);
      border: 2px solid var(--brd);
      border-radius: 9px;
      padding: 9px 12px;
      font-size: .88em;
      font-weight: 700;
      margin-bottom: 7px;
      display: flex;
      align-items: flex-start;
      gap: 8px;
  }

  .tip i {
      color: #FF9800;
      margin-top: 2px;
      flex-shrink: 0;
  }

  .garow {
      display: flex;
      gap: 10px;
      justify-content: center;
      flex-wrap: wrap;
  }

  .garow .btn {
      flex: unset;
      min-width: 155px;
      font-size: 1.05em;
      padding: 13px 20px;
  }

  .gbplay {
      background: var(--bstart) !important;
      color: #fff !important;
  }

  .gbclose {
      background: var(--surface) !important;
  }

  /* INSTRUCTIONS */
  #ins {
      width: 100%;
      max-width: 920px;
      background: var(--surface);
      border: 2px solid var(--brd);
      box-shadow: var(--sh);
      border-radius: 16px;
      padding: 20px 22px;
      margin-top: 14px;
      color: var(--text);
      transition: background-color .35s;
  }

  #ins h3 {
      font-size: 1.1em;
      font-weight: 900;
      margin-bottom: 10px;
  }

  #ins p {
      font-size: .92em;
      font-weight: 600;
      line-height: 1.6;
      margin-bottom: 5px;
  }

  .iblock {
      border-radius: 9px;
      padding: 11px 13px;
      margin: 8px 0;
      border: 2px solid var(--brd);
      font-size: .89em;
      font-weight: 600;
      line-height: 1.65;
  }

  .ibl {
      background: #E3F2FD;
  }

  .ibp {
      background: #EDE7F6;
  }

  .iby {
      background: #FFFDE7;
  }

  [data-theme="night"] .iblock {
      background: #1E1E2E;
  }

  kbd {
      background: var(--surface);
      border: 2px solid var(--brd);
      border-radius: 5px;
      padding: 2px 6px;
      font-family: inherit;
      font-size: .85em;
      font-weight: 800;
  }

  /* STREAK BURST */
  #sburst-overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
      z-index: 9999;
      opacity: 0;
      transition: opacity .15s;
  }

  #sburst-overlay.vis {
      opacity: 1;
  }

  #sburst {
      font-size: clamp(2em, 7vw, 3.8em);
      font-weight: 900;
      color: var(--text);
      text-shadow: 3px 3px 0 var(--surface), 6px 6px 0 var(--text);
      animation: burstA 1.05s ease-out forwards;
  }

  @keyframes burstA {
      0% {
          transform: scale(.3);
          opacity: 1
      }

      40% {
          transform: scale(1.15);
          opacity: 1
      }

      100% {
          transform: scale(1.5);
          opacity: 0
      }
  }

  /* EXTRA LINKS */
  #ext {
      width: 100%;
      max-width: 920px;
      background: var(--surface);
      border: 2px solid var(--brd);
      box-shadow: var(--sh);
      border-radius: 16px;
      padding: 20px 22px;
      margin-top: 22px;
      color: var(--text);
      transition: background-color .35s;
  }

  #ext h3 {
      font-size: 1.1em;
      font-weight: 900;
      margin-bottom: 16px;
      color: var(--text);
  }

  .ext-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 16px;
  }

  .ext-card {
      display: flex;
      flex-direction: column;
      background: var(--field);
      border: 2px solid var(--brd);
      border-radius: 12px;
      padding: 16px;
      text-decoration: none;
      color: var(--text);
      transition: transform .15s, box-shadow .15s, background-color .15s;
  }

  .ext-card-hdr {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 8px;
  }

  .ext-card-hdr i {
      font-size: 1.3em;
      color: var(--c2);
      transition: transform .3s;
  }

  .ext-card h4 {
      font-size: 1.05em;
      font-weight: 800;
  }

  .ext-card p {
      font-size: 0.88em;
      font-weight: 600;
      line-height: 1.5;
      margin-bottom: 12px;
      flex-grow: 1;
      opacity: 0.9;
  }

  .ext-badge {
      align-self: flex-start;
      background: var(--surface);
      border: 1.5px solid var(--brd);
      border-radius: 6px;
      padding: 3px 8px;
      font-size: 0.78em;
      font-weight: 800;
      display: flex;
      align-items: center;
      gap: 5px;
  }

  .ext-card:hover {
      transform: translate(-3px, -3px);
      box-shadow: var(--sh);
      background: var(--surface);
  }

  .ext-card:hover .ext-card-hdr i {
      transform: scale(1.15) rotate(5deg);
      color: var(--c1);
  }

  .ext-card:active {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--brd);
  }

  footer {
      text-align: center;
      margin-top: 22px;
      color: var(--text);
      font-weight: 700;
      font-size: .82em;
      opacity: .55;
  }

  @media(max-width:540px) {
      .brow {
          flex-wrap: wrap;
      }

      .btn {
          min-width: 46%;
      }

      #gf {
          height: 210px;
      }

      .lt {
          width: 50px;
          height: 50px;
          font-size: 1.7em;
      }
  }