:root{
      --bg1:#f5efff;
      --bg2:#fff4dc;
      --card:#ffffff;
      --text:#24324a;
      --muted:#667085;
      --primary:#9c4dcc;
      --primary-dark:#7830ad;
      --primary-soft:#f5eaff;
      --success:#159957;
      --danger:#d64545;
      --star:#f5b800;
      --border:#e8dff0;
    }

    *{box-sizing:border-box}

    body{
      margin:0;
      min-height:100vh;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      color:var(--text);
      background:linear-gradient(135deg,var(--bg1),var(--bg2));
      display:flex;
      justify-content:center;
      align-items:center;
      padding:24px;
    }

    .app{
      width:min(840px,100%);
      background:var(--card);
      border-radius:24px;
      box-shadow:0 18px 50px rgba(31,55,95,.14);
      padding:28px;
    }

    .brand-logo{
      display:block;
      width:min(100%,480px);
      height:auto;
      margin:0 auto 10px;
      transition:width .3s ease;
    }

    .app.game-active .brand-logo{
      width:min(100%,260px);
    }

    .brand-tagline{
      margin:8px auto 22px;
      color:var(--primary-dark);
      background:linear-gradient(90deg,var(--primary-dark),#176fc1);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      font-size:17px;
      font-weight:850;
      line-height:1.4;
      text-align:center;
      filter:drop-shadow(0 1px 1px rgba(43,68,135,.12));
    }

    .app.game-active .brand-tagline{display:none}

    .panel{
      border:1px solid var(--border);
      border-radius:18px;
      padding:20px;
      background:#fbfdff;
    }

    .section-title{
      text-align:center;
      font-size:18px;
      font-weight:850;
      margin:0 0 12px;
    }

    .mode-carousel{
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      align-items:center;
      gap:10px;
      margin-bottom:24px;
    }

    .mode-grid{
      display:flex;
      gap:14px;
      overflow-x:auto;
      scroll-snap-type:x mandatory;
      scroll-behavior:smooth;
      scrollbar-width:none;
      touch-action:pan-x;
      padding:5px 4px 10px;
      margin:0;
    }

    .mode-grid::-webkit-scrollbar{display:none}

    .carousel-arrow{
      width:44px;
      height:44px;
      flex:0 0 44px;
      display:grid;
      place-items:center;
      padding:0;
      border:2px solid var(--border);
      border-radius:50%;
      background:white;
      color:var(--primary);
      font-weight:900;
      box-shadow:0 5px 14px rgba(61,40,85,.09);
    }

    .carousel-arrow span{
      display:block;
      font-size:27px;
      line-height:1;
      transform:translateY(-1px);
    }

    .carousel-arrow:hover:not(:disabled){
      border-color:var(--primary);
      background:var(--primary-soft);
      transform:translateY(-1px);
    }

    .carousel-arrow:disabled{
      opacity:.3;
      cursor:default;
    }

    .mode-btn{
      flex:0 0 190px;
      min-height:138px;
      border:2px solid var(--border);
      background:white;
      color:var(--text);
      border-radius:18px;
      padding:14px 12px 12px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:8px;
      scroll-snap-align:start;
      position:relative;
      overflow:hidden;
    }

    .mode-btn:hover{
      border-color:#d7b8ea;
      background:#fcf8ff;
    }

    .mode-btn.active{
      border-color:var(--primary);
      background:var(--primary-soft);
      box-shadow:0 0 0 3px rgba(156,77,204,.12);
    }

    .mode-btn[data-status="soon"]{
      background:linear-gradient(160deg,#fff 0%,#f8fbff 100%);
    }

    .mode-btn[data-status="soon"].active{
      background:var(--primary-soft);
    }

    .mode-symbol{
      font-size:38px;
      line-height:1;
      font-weight:900;
      color:var(--primary);
    }

    .mode-label{
      font-weight:850;
      font-size:16px;
      text-align:center;
    }

    .mode-badge{
      display:inline-flex;
      align-items:center;
      min-height:22px;
      padding:3px 8px;
      border-radius:999px;
      background:#edf7ff;
      color:#2673a8;
      font-size:11px;
      font-weight:850;
    }

    .mode-btn[data-status="ready"] .mode-badge{
      background:#eaf8ef;
      color:#267746;
    }

    .mode-config[hidden],
    .coming-soon[hidden]{display:none}

    .coming-soon{
      display:grid;
      grid-template-columns:auto 1fr auto;
      align-items:center;
      gap:16px;
      min-height:118px;
      padding:18px 20px;
      border:2px dashed #ccb5de;
      border-radius:18px;
      background:linear-gradient(135deg,#fff8e8,#f7f0ff);
    }

    .coming-symbol{
      display:grid;
      place-items:center;
      width:62px;
      height:62px;
      border-radius:18px;
      background:white;
      color:var(--primary);
      font-size:32px;
      font-weight:900;
      box-shadow:0 5px 16px rgba(61,40,85,.1);
    }

    .coming-copy strong{
      display:block;
      margin-bottom:4px;
      font-size:20px;
    }

    .coming-copy p{
      margin:0;
      color:var(--muted);
      line-height:1.45;
    }

    .coming-label{
      padding:8px 12px;
      border-radius:999px;
      background:white;
      color:var(--primary);
      font-size:12px;
      font-weight:900;
      white-space:nowrap;
    }

    .range-grid,
    .table-grid{
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:10px;
      margin-bottom:20px;
    }

    .table-grid{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
    }

    #timesTableRangeOptions{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
    }

    #timesTableRangeOptions[hidden]{display:none}

    .range-grid{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
    }

    .range-btn,
    .table-btn,
    .times-range-btn,
    .division-btn{
      flex:0 0 112px;
    }

    .range-grid[hidden],
    .table-grid[hidden]{display:none}

    .range-btn,
    .table-btn,
    .times-range-btn,
    .division-btn{
      border:2px solid var(--border);
      background:white;
      color:var(--text);
      border-radius:12px;
      padding:12px 8px;
      font-weight:850;
    }

    .range-btn:hover,
    .table-btn:hover,
    .times-range-btn:hover,
    .division-btn:hover{
      border-color:#d7b8ea;
      background:#fcf8ff;
    }

    .range-btn.active,
    .table-btn.active,
    .times-range-btn.active,
    .division-btn.active{
      color:white;
      border-color:var(--primary);
      background:var(--primary);
      box-shadow:0 0 0 3px rgba(156,77,204,.12);
    }

    .start-row{
      display:flex;
      justify-content:center;
      margin-top:28px;
    }

    input,button{
      font:inherit;
    }

    input{
      width:100%;
      border:2px solid var(--border);
      border-radius:12px;
      padding:13px 14px;
      background:white;
      outline:none;
    }

    input:focus{
      border-color:var(--primary);
      box-shadow:0 0 0 3px rgba(156,77,204,.14);
    }

    /* Ukrycie strzałek w polu liczbowym */
    input[type="number"]{
      -moz-appearance:textfield;
      appearance:textfield;
    }

    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button{
      -webkit-appearance:none;
      margin:0;
    }

    button{
      border:none;
      border-radius:12px;
      padding:13px 18px;
      font-weight:800;
      cursor:pointer;
      transition:.15s ease;
    }

    button:hover{transform:translateY(-1px)}
    button:active{transform:translateY(0)}

    .primary{
      color:white;
      background:linear-gradient(135deg,var(--primary),#c653c7);
      box-shadow:0 6px 14px rgba(156,77,204,.24);
    }

    .primary:hover{
      background:linear-gradient(135deg,var(--primary-dark),#a83eae);
      box-shadow:0 8px 18px rgba(120,48,173,.28);
    }

    .secondary{
      color:var(--text);
      background:var(--primary-soft);
    }

    #startBtn{
      min-width:360px;
      font-size:18px;
      padding:18px 36px;
    }

    .game{
      display:none;
    }

    .game-header{
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
      margin-bottom:26px;
    }

    .menu-btn{
      justify-self:start;
      padding:9px 13px;
      color:var(--primary-dark);
      background:var(--primary-soft);
      border:2px solid #dfc8ed;
    }

    .menu-btn:hover{
      background:#ead8f5;
      border-color:#cda5e3;
    }

    .game-info{
      text-align:center;
      color:var(--muted);
      font-weight:800;
      font-size:18px;
      margin:0;
    }

    .topbar{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:16px;
    }

    .stars{
      display:flex;
      gap:7px;
      font-size:35px;
      letter-spacing:1px;
    }

    .star{
      color:#d9dee8;
      opacity:.45;
      transition:.25s ease;
    }

    .star.earned{
      color:var(--star);
      opacity:1;
      transform:scale(1.08);
      text-shadow:0 2px 5px rgba(245,184,0,.28);
    }

    .counter{
      font-weight:800;
      color:var(--muted);
    }

    .progress-wrap{
      height:12px;
      background:#efe4f5;
      border-radius:999px;
      position:relative;
      margin-bottom:24px;
    }

    .progress{
      width:0%;
      height:100%;
      background:linear-gradient(90deg,#8f45c5,#df5bc8);
      transition:width .25s ease;
      border-radius:inherit;
    }

    .progress-marker{
      position:absolute;
      z-index:2;
      top:50%;
      left:0;
      width:60px;
      height:41px;
      object-fit:contain;
      transform:translateY(-50%);
      transition:left .25s ease;
      pointer-events:none;
    }

    .task{
      text-align:center;
      font-size:clamp(44px,10vw,76px);
      font-weight:900;
      margin:10px 0 22px;
      letter-spacing:1px;
    }

    .answer-row{
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      max-width:440px;
      margin:0 auto;
    }

    #answer{
      text-align:center;
      font-size:30px;
      font-weight:800;
    }

    #answer::placeholder{
      font-size:22px;
      font-weight:650;
    }

    #checkBtn{
      padding-left:22px;
      padding-right:22px;
      font-size:17px;
    }

    .feedback-icon-wrap{
      height:76px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top:20px;
    }

    .feedback-icon{
      width:72px;
      height:72px;
      object-fit:contain;
      display:none;
    }

    .feedback-icon.visible{
      display:block;
    }

    .feedback{
      min-height:34px;
      margin:2px 0 0;
      text-align:center;
      font-size:20px;
      font-weight:800;
    }

    .feedback.good{color:var(--success)}
    .feedback.bad{color:var(--danger)}

    .round-info{
      text-align:center;
      margin-top:10px;
      color:var(--muted);
      font-weight:700;
    }

    .finish{
      display:none;
      text-align:center;
      padding:28px 20px;
      border-radius:18px;
      background:#fff9de;
      border:1px solid #f3df7d;
    }

    .trophy{
      width:min(100%,250px);
      height:auto;
      display:block;
      margin:0 auto 12px;
      filter:drop-shadow(0 6px 10px rgba(212,159,0,.22));
    }

    .trophy[src^="data:"]{
      display:none;
    }

    .finish .big{
      font-size:64px;
      margin-bottom:8px;
      color:var(--star);
      text-shadow:0 3px 8px rgba(245,184,0,.25);
    }

    .finish h2{
      font-size:32px;
      margin:0 0 8px;
    }

    .finish p{
      color:var(--muted);
      margin:0 0 20px;
      font-size:18px;
    }

    .support-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      max-width:100%;
      margin:0 auto 20px;
      padding:11px 18px;
      border:2px solid #f0bd18;
      border-radius:999px;
      background:#fffdf2;
      color:#704700;
      font-size:16px;
      font-weight:850;
      line-height:1.25;
      text-decoration:none;
      box-shadow:0 4px 12px rgba(212,159,0,.14);
      transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
    }

    .support-link:hover{
      background:#fff5c9;
      transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(212,159,0,.2);
    }

    .support-link:focus-visible{
      outline:3px solid rgba(51,142,218,.35);
      outline-offset:3px;
    }

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

    .site-footer{
      margin-top:22px;
      padding:18px 10px 2px;
      border-top:1px solid var(--border);
      color:var(--muted);
      text-align:center;
      font-size:14px;
      line-height:1.6;
    }

    .footer-brand{
      margin:0 0 6px;
      font-weight:750;
    }

    .footer-nav{
      display:flex;
      justify-content:center;
      align-items:center;
      flex-wrap:wrap;
      gap:4px 9px;
    }

    .footer-nav a{
      color:var(--primary-dark);
      font-weight:750;
      text-decoration:none;
    }

    .footer-nav a:hover{text-decoration:underline}

    .footer-nav a:focus-visible{
      outline:3px solid rgba(51,142,218,.3);
      outline-offset:3px;
      border-radius:4px;
    }

    .footer-separator{color:#a99bb5}

    @media (max-width:650px){
      .app{padding:18px}
      .mode-carousel{
        grid-template-columns:minmax(0,1fr);
        margin-left:-4px;
        margin-right:-4px;
      }
      .carousel-arrow{display:none}
      .mode-grid{
        gap:11px;
        padding-left:4px;
        padding-right:24px;
      }
      .mode-btn{
        flex:0 0 158px;
        min-height:132px;
        padding:13px 10px 11px;
      }
      .mode-symbol{
        width:auto;
        text-align:center;
      }
      .mode-label{font-size:15px}
      .coming-soon{
        grid-template-columns:auto 1fr;
        padding:16px;
      }
      .coming-symbol{
        width:52px;
        height:52px;
        font-size:28px;
      }
      .coming-label{
        grid-column:1 / -1;
        justify-self:start;
      }
      .range-grid,
      .table-grid{
        grid-template-columns:repeat(3,1fr);
      }
      .table-grid{display:grid}
      .range-btn{
        flex:0 0 calc((100% - 20px) / 3);
        min-width:0;
      }
      .table-btn,
      .times-range-btn,
      .division-btn{min-width:0}
      .answer-row{grid-template-columns:1fr}
      .primary,.secondary{width:100%}
      #startBtn{
        width:min(100%,280px);
        min-width:0;
        padding:15px 22px;
      }
      .topbar{justify-content:center}
      .counter{width:100%;text-align:center}
      .finish .big{font-size:clamp(32px,12vw,48px)}
      .finish-actions{display:grid}
    }
  

/* Główny układ strony: nagłówek, stałe menu po lewej i obszar gry po prawej. */
html { scroll-behavior: smooth; }

body {
  display: block;
  min-width: 320px;
  padding: 16px;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
}

.app {
  width: min(1440px, 100%);
  min-height: calc(100vh - 32px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 223, 240, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 18px 50px rgba(31, 55, 95, .14);
}

.site-header {
  min-height: 126px;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--border);
  border-radius: 14px 14px 0 0;
  background: rgba(255, 255, 255, .92);
}

.brand-link {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 18px 20px;
  border-right: 1px solid var(--border);
}

.brand-logo,
.app.game-active .brand-logo {
  width: 225px;
  max-width: 100%;
  margin: 0;
}

.header-copy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 22px clamp(24px, 4vw, 58px);
}
.graffiti-lockup {
  position: relative;
  min-width: 430px;
  padding: 14px 14px 0 4px;
}

.graffiti-no-ads {
  position: absolute;
  top: -2px;
  left: 8px;
  display: inline-block;
  padding: 4px 12px 5px;
  color: white;
  background: #159957;
  clip-path: polygon(3% 12%, 97% 0, 100% 82%, 5% 100%);
  font-family: "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  transform: rotate(-5deg);
  box-shadow: 3px 4px 0 rgba(21, 153, 87, .15);
}

.graffiti-main {
  margin: 10px 0 5px;
  color: var(--primary-dark);
  background: linear-gradient(90deg, #5f1d82 0%, #7830ad 52%, #9c4dcc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Marker Felt", "Chalkboard SE", "Comic Sans MS", cursive;
  font-size: 29px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: nowrap;
  text-shadow: 2px 2px 0 rgba(72, 28, 96, .13);
}

.header-note {
  margin: 9px 0 0 4px;
  color: var(--muted);
  font-size: 13px;
}

.graffiti-dot {
  position: absolute;
  border-radius: 50%;
  background: #c653c7;
  opacity: .27;
}

.graffiti-dot-one { width: 7px; height: 7px; top: 9px; right: 8px; }
.graffiti-dot-two { width: 4px; height: 4px; top: 25px; right: 0; }

.header-math-art {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.header-math-art span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid #eadcf4;
  border-radius: 13px;
  color: var(--primary-dark);
  background: linear-gradient(145deg, #fff, #f3e9fb);
  box-shadow: 0 7px 18px rgba(77, 48, 105, .09);
  font-size: 23px;
  font-weight: 900;
}

.header-math-art span:nth-child(1) { transform: rotate(-7deg); }
.header-math-art span:nth-child(2) { color: #176fc1; transform: translateY(5px) rotate(4deg); }
.header-math-art span:nth-child(3) { color: #c38800; transform: translateY(-4px) rotate(6deg); }
.header-math-art span:nth-child(4) { color: #159957; transform: rotate(-4deg); }

.workspace {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: calc(100vh - 112px);
}

.sidebar {
  padding: 28px 18px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, #fbf7ff, #fffaf0);
}

.sidebar-title {
  margin: 0 10px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mode-carousel { display: block; margin: 0; }
.carousel-arrow { display: none; }
.mode-grid {
  display: grid;
  gap: 9px;
  overflow: visible;
  padding: 0;
}

.mode-btn {
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  justify-items: start;
  padding: 9px 12px;
  border-width: 1px;
  border-radius: 14px;
  color: var(--text);
  text-decoration: none;
  scroll-snap-align: none;
}

.mode-symbol {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--primary-soft);
  font-size: 22px;
}

.mode-label { text-align: left; font-size: 14px; line-height: 1.25; }
.mode-badge { display: none; }
.mode-btn.active .mode-symbol { color: white; background: var(--primary); }
.mode-btn[data-status="soon"] { opacity: .72; }

.content-area {
  min-width: 0;
  padding: clamp(26px, 4vw, 58px);
}

.page-intro { max-width: 860px; margin: 0 auto 20px; }
.eyebrow {
  margin: 0 0 8px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-intro h1 {
  margin: 0 0 7px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
}
.app.game-active .page-intro { display: none; }
.page-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.home-overview {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(135deg, #fbf8ff, #fffaf0);
}

.home-overview h2 {
  margin: 0 0 16px;
  font-size: 20px;
}

.home-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.home-feature {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .86);
}

.home-feature-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 11px;
  color: white;
  background: linear-gradient(135deg, var(--primary), #c653c7);
  font-size: 18px;
  font-weight: 900;
}

.home-feature strong { display: block; margin-bottom: 5px; font-size: 15px; }
.home-feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }

.home-direction {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 13px 15px;
  border-radius: 13px;
  color: var(--primary-dark);
  background: var(--primary-soft);
  font-size: 14px;
  font-weight: 850;
}

.home-direction span { font-size: 22px; line-height: 1; }

.panel,
.finish { max-width: 860px; margin-left: auto; margin-right: auto; }

@media (min-width: 821px) {
  .finish {
    border-color: #ead7f5;
    background: linear-gradient(135deg, #fffdf4 0%, #f8efff 52%, #fff4dc 100%);
    box-shadow: 0 16px 38px rgba(80, 53, 112, .1);
  }

  .finish .big { font-size: 54px; }
}

#startPanel { display: block; }
.home-page #startPanel,
.home-page #gamePanel,
.home-page #finishPanel { display: none !important; }
.section-title { text-align: left; }
.range-grid { max-width: 660px; margin: 0 auto 20px; }
.range-grid, .table-grid { margin-top: 14px; }
.start-row { justify-content: center; }
#startBtn { min-width: 260px; }

.game-header { grid-template-columns: auto minmax(0, 1fr); }
.game-header > span { display: none; }
.game-info { text-align: right; }

.site-footer {
  grid-column: 1 / -1;
  margin: 0;
  padding: 24px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 14px 14px;
  background: #fff;
}

@media (max-width: 820px) {
  body { padding: 0; }
  .app {
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .site-header { min-height: auto; grid-template-columns: 1fr; }
  .site-header, .site-footer { border-radius: 0; }
  .brand-link { justify-content: center; padding: 14px 20px 8px; border-right: 0; }
  .brand-logo, .app.game-active .brand-logo { width: 170px; }
  .header-copy { padding: 8px 20px 18px; text-align: center; }
  .header-copy { justify-content: center; }
  .header-math-art { display: none; }
  .graffiti-lockup { min-width: 0; padding-top: 17px; transform: none; }
  .graffiti-no-ads { left: 50%; transform: translateX(-50%) rotate(-3deg); }
  .graffiti-main { font-size: 28px; white-space: normal; }
  .header-note { margin-left: 0; }
  .workspace { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  .sidebar {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 14px 14px 10px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-title { margin-left: 4px; }
  .mode-grid {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    overflow-x: auto;
    padding: 0 2px 8px;
    scrollbar-width: thin;
  }
  .mode-btn { flex: 0 0 150px; min-height: 54px; grid-template-columns: 36px minmax(0, 1fr); }
  .mode-symbol { width: 34px; height: 34px; font-size: 19px; }
  .content-area { width: 100%; max-width: 100%; padding: 26px 16px 34px; }
  .panel, .finish { width: 100%; max-width: 100%; }
  .page-intro h1 { font-size: 30px; }
  .page-intro p { font-size: 15px; }
  .home-feature-grid { grid-template-columns: 1fr; }
  .start-row { justify-content: center; }
  #startBtn { min-width: 0; }
}