/*@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Unbounded:wght@300;700;900&display=swap');*/

      :root {
          --bg: #ffffff;
          --surface: #13131a;
          --border: #2a2a3a;
          --accent: #e8ff47;
          --accent2: #ff4778;
          --text: #e8e8f0;
          --text-dim: #6a6a8a;
          --correct: #47ffaa;
          --tile-border: #2a2a3a;
          --tile-correct: #47ffaa44;
          --radius: 4px;
          --gap: 0px;
          --greenborder: #2d5227;
      }

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

      .header-title {
          font-size: 2.2rem;
          color: rgb(18, 55, 21);
          text-align: center;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          font-family: 'Unbounded', sans-serif;
          font-weight: 900;
          /*font-size: clamp(1rem, 2.7rem, 1.4rem);*/
          letter-spacing: 0.08em;
      }

      /* === HEADER === */
      header {
          width: 100%;
          padding: 8px 2px 14px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          /*border-bottom: 1px solid var(--border);*/
          position: sticky;
          top: 0;
          background: var(--bg);
          z-index: 100;
      }

      .logo {
          font-family: 'Unbounded', sans-serif;
          font-weight: 900;
          font-size: clamp(1rem, 3vw, 1.4rem);
          letter-spacing: -0.03em;
      }

      .logo span,
      .header-title span {
          color: #ad2de0
              /*var(--text-dim);*/
      }

      .hud {
          display: flex;
          gap: 20px;
          align-items: center;
          font-size: 0.72rem;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          color: var(--text-dim);
      }

      .hud-val {
          color: var(--text);
          font-weight: 700;
          font-size: 0.9rem;
          margin-left: 5px;
      }

      .hud-item {
          display: flex;
          align-items: center;
      }

      /*
      .btn {
          background: none;
          border: 1px solid var(--border);
          color: var(--text-dim);
          font-family: 'Space Mono', monospace;
          font-size: 0.7rem;
          letter-spacing: 0.1em;
          text-transform: uppercase;
          padding: 7px 14px;
          cursor: pointer;
          border-radius: var(--radius);
          transition: all 0.15s;
      }

      .btn:hover {
          border-color: var(--accent);
          color: var(--accent);
      }

      .btn.accent {
          background: var(--accent);
          color: #000;
          border-color: var(--accent);
          font-weight: 700;
      }
      */
      .btn.accent:hover {
          background: #fff;
          border-color: #fff;
      }

      /* === MAIN AREA === */
      main {
          flex: 1;
          width: 100%;
          padding: 0px 20px 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 20px;
      }

      /* === CONTROLS BAR === */
      .controls {
          width: 70%;
          padding: 12px 16px;
          background: var(--bg);
          border: 2px solid var(--greenborder);
          border-radius: var(--radius);
      }

      .controls label {
          font-size: 0.8rem;
          text-transform: uppercase;
          letter-spacing: 0.1em;
          color: black;
          display: block;
          align-items: left;
          gap: 8px;
          font-weight: 500;
      }

      /*
      .controls select,
      .controls input[type=range],
      .controls input[type=number] {
          background: var(--bg);
          border: 1px solid var(--border);
          color: var(--text);
          font-family: 'Space Mono', monospace;
          font-size: 0.72rem;
          padding: 5px 8px;
          border-radius: var(--radius);
          outline: none;
      }
*/

      .controls select:focus,
      .controls input:focus {
          border-color: var(--accent);
      }

      .controls input[type=range] {
          padding: 0;
          width: 90%;
          accent-color: var(--accent);
      }

      .butonyDolne input[type=file] {
          display: none;
      }

      /* === AXIS TOGGLES === */
      button svg {
          pointer-events: none;
      }

      .axis-group {
          display: flex;
          gap: 6px;
          align-items: center;
      }

      .axis-toggle {
          width: 34px;
          height: 24px;
          border: 1px solid var(--border);
          border-radius: var(--radius);
          background: none;
          color: var(--text-dim);
          font-family: 'Space Mono', monospace;
          font-size: 0.65rem;
          font-weight: 700;
          cursor: pointer;
          transition: all 0.15s;
          letter-spacing: 0.05em;
      }

      .axis-toggle.active,
      .axisBtntToggle.active {
          background: var(--greenborder);
          color: #ffffff;
          font-weight: 800;
      }

      .axis-toggle:not(.active):hover {
          border-color: var(--text-dim);
          color: var(--text);
      }

      /* === COUNTDOWN OVERLAY === */
      #countdown-overlay {
          position: absolute;
          inset: 0;
          /*background: rgba(10, 10, 15, 0.22);*/
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          z-index: 10;
          border-radius: var(--radius);
          pointer-events: none;
          opacity: 0;
          transition: opacity 0.4s;
      }

      #countdown-overlay.visible {
          opacity: 1;
          pointer-events: all;
      }

      .countdown-num {
          font-family: 'Unbounded', sans-serif;
          font-size: clamp(3rem, 12vw, 7rem);
          font-weight: 900;
          color: var(--accent);
          line-height: 1;
          animation: pulse-num 1s ease-out;
      }

      .countdown-label {
          font-size: 0.75rem;
          letter-spacing: 0.2em;
          text-transform: uppercase;
          color: var(--text-dim);
          margin-top: 12px;
      }

      @keyframes pulse-num {
          0% {
              transform: scale(1.5);
              opacity: 0;
          }

          40% {
              opacity: 1;
          }

          100% {
              transform: scale(1);
              opacity: 1;
          }
      }

      /*****  SHOW PREWIES ************/
      .previewPic {
          position: absolute;
          width: 100%;
          height: 100%;
          pointer-events: none;
          transition: opacity 0.5s;
          opacity: 0;
          display: flex;
          justify-content: center;
          /* Centrowanie w poziomie */
          align-items: center;
          /* Centrowanie w pionie */
      }

      .previewPic img {
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
          border: 3px solid rgba(255, 255, 255, 0.82);
          border-radius: 16px;
          -webkit-box-shadow: 0px 0px 19px 7px rgba(54, 93, 53, 0.47);
          box-shadow: 0px 0px 19px 7px rgba(54, 93, 53, 0.47);
      }

      /* Nowy styl dla licznika */
      .preview-timer {
          position: absolute;
          /*top: 10px;
          right: 10px;*/
          top: 50%; left: 50%; transform: translate(-50%, -50%);
          /* w prawym górnym rogu */
          background: rgba(0, 0, 0, 0.3);
          /* Półprzezroczyste tło */
          color: rgb(237, 224, 104);
          padding: 5px 10px;
          border-radius: 5px;
          font-family: sans-serif;
          font-weight: bold;
          font-size: 2.5rem;
          pointer-events: none;
          /* Żeby nie blokował kliknięć (choć tu i tak pointer-events: none jest na rodzicu) */
          opacity: 0;
          /* Domyślnie ukryty */
          transition: opacity 0.3s;
      }

      .preview-timer.visible {
          opacity: 1;
      }




      /* === PUZZLE WRAPPER === */
      #puzzle-wrap {
          position: relative;
          width: 100%;
          max-width: 800px;
          display: flex;
          justify-content: center;
      }

      /* === GRID === */
      #puzzle-grid {
          display: grid;
          gap: var(--gap);
          position: relative;
      }

      /* === TILE === */
      .tile {
          position: relative;
          cursor: pointer;
          border-radius: var(--radius);
          overflow: visible;
      }

      .tile-inner {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
          transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
          border-radius: var(--radius);
          border: 1.5px solid var(--tile-border);
      }

      .tile.solved .tile-inner {
          border-color: var(--correct);
          box-shadow: 0 0 0 1px var(--correct), 0 0 12px var(--tile-correct);
          transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s, box-shadow 0.3s;
      }

      .tile canvas {
          display: block;
          width: 100%;
          height: 100%;
          border-radius: calc(var(--radius) - 1px);
      }

      .tile-strzalki {
          inset: 0;
          opacity: 0;
          transition: opacity 0.2s;
          position: absolute;
          left: 50%;
          top: 50%;
          width: 100%;
          height: 100%;
          transform: translate(-50%, -50%);
      }

      #svg1,
      .tile-strzalki svg,
      .strzalkiKolor {
          fill: white;
          color: white;
      }

      .tile:hover::after,
      .tile-strzalki:hover {
          opacity: 0.8;
          filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.6));
      }

      /* ** START OVERLAY ** */
      #start-overlay {
          position: fixed;
          inset: 0;
          background: rgba(10, 10, 15, 0.9);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          z-index: 200;
          opacity: 0;
          pointer-events: none;
          transition: opacity 0.5s;
          /*backdrop-filter: blur(6px);*/
      }

      #start-overlay.show {
          opacity: 1;
          pointer-events: all;
      }


      /* === WIN OVERLAY === */
      #win-overlay {
          position: fixed;
          inset: 0;
          background: rgba(11, 8, 12, 0.88);
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          z-index: 200;
          opacity: 0;
          pointer-events: none;
          transition: opacity 1.3s;
          /*backdrop-filter: blur(2px);*/
      }

      #win-overlay.show {
          opacity: 1;
          pointer-events: all;
      }

      .win-title {
          font-family: 'Unbounded', sans-serif;
          font-size: clamp(1.5rem, 5vw, 3rem);
          font-weight: 900;
          color: var(--accent);
          letter-spacing: -0.04em;
          text-align: center;
          animation: win-in 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }

      #win-overlay .smile {
          font-size: 6em
      }

      .win-sub {
          color: var(--text);
          font-size: 0.85rem;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          margin-top: 8px;
          animation: win-in 0.9s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }

      .win-stats {
          display: flex;
          gap: 22px;
          margin-top: 22px;
          animation: win-in 0.9s 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }

      .win-stat {
          text-align: center;
      }

      .win-stat-val {
          font-family: 'Unbounded', sans-serif;
          font-size: 1.8rem;
          font-weight: 700;
          color: var(--accent);
          display: block;
      }

      .win-stat-label {
          font-size: 0.65rem;
          letter-spacing: 0.15em;
          text-transform: uppercase;
          color: var(--text);
      }

      .win-actions {
          display: flex;
          gap: 12px;
          margin-top: 32px;
          animation: win-in 0.6s 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }

      @keyframes win-in {
          from {
              opacity: 0;
              transform: translateY(30px);
          }

          to {
              opacity: 1;
              transform: translateY(0);
          }
      }

      /* === PROGRESS BAR === */
      .progress-bar-wrap {
          width: 100%;
          height: 4px;
          background: var(--greenborder);
          border-radius: 2px;
          overflow: hidden;
      }

      .progress-bar {
          height: 100%;
          background: linear-gradient(90deg, var(--accent), var(--accent2));
          border-radius: 2px;
          transition: width 0.4s ease;
          width: 0%;
      }

      /* === HINT LABELS === */
      .hint-label {
          font-size: 0.6rem;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          color: var(--text-dim);
          text-align: center;
          margin-top: -4px;
      }

      /* === LOADING === */
      #loading {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 16px;
          padding: 60px 20px;
      }

      .spinner {
          width: 40px;
          height: 40px;
          border: 2px solid var(--border);
          border-top-color: var(--accent);
          border-radius: 50%;
          animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
          to {
              transform: rotate(360deg);
          }
      }

      /* === RESPONSIVE === */
      @media (max-width: 768px) {
          .header-title {
              font-size: 1rem;
              margin-bottom: 0.5rem !important;
          }
      }

      @media (max-width: 600px) {
          .hud .hud-item:nth-child(3) {
              display: none;
          }

          .controls {
              gap: 8px;
          }
      }