:root{--felt:#1f7a3e;--rail:#111;--floor:#0a0a0a;--gold:#f5d06e;--chip:#d33;--panel:#151515;
  --teal:        #2F8F89;
  --teal-hover:  #3FA39D;
  --teal-active: #277D78;
  --teal-border: #1C615D;
  --teal-ring:   #9FE2DC;
  --explainer-bg: rgba(255,255,255,.92);
  --explainer-stroke: rgba(0,0,0,.18);
  --panel-nudge-x: -20px;
  /* 21.44% is the 15% shrink of your original 16.4% layout */
  --table-inset: 21.44%;
  --rail-thick: 17px;  /* 0.85 × 20px */
}
  html,body{height:100%;margin:0;background:var(--floor);color:#eee;font:14px/1.3 system-ui,Segoe UI,Roboto,Arial}
  #wrap{display:grid;grid-template-rows:auto 1fr auto;min-height:100%}
  header,footer{padding:6px 10px;background:#0f0f0f;border-bottom:1px solid #222}
  header{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
  header .title{font-weight:700;letter-spacing:.4px}
  header .level{padding:.25rem .5rem;border:1px solid #333;border-radius:999px;background:#0d0d0d}
  header .clock{font-variant-numeric:tabular-nums}
  #hud{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  #hud .pill{padding:.3rem .6rem;border:1px solid #333;border-radius:10px;background:#101010}
  #table{display:block;width:100%;height:calc(100vh - 170px);background:#2a2a2a;}
  /* soft rail */
  #tableWrap{position:relative;}
  #cheatBtn{position:absolute; left:12px; bottom:12px; z-index:4; background:#202020; border:1px solid #444; color:#eee; padding:.4rem .7rem; border-radius:8px; font-size:12px; opacity:.9}
  #cheatBtn.active{background:#345e22; border-color:#4a8a2e;}
    /* "Show my best hand" peek button (hold-to-peek) */
    #bestHandBtn{
    position:absolute;
    left:12px;
    bottom:48px;        /* sits just above the cheat button */
    z-index:4;

    background:#202020;
    border:1px solid #444;
    border-radius:8px;
    padding:.35rem .55rem;
    font-size:12px;
    color:#eee;
    user-select:none;
    opacity:.9;
    cursor:pointer;
    }

    #bestHandBtn.active{
    /* optional pressed look while held */
    background:#345e22;
    border-color:#4a8a2e;
    }
  #delayBtn{
  position:absolute; left:12px; bottom:120px; z-index:4;  /* sits above the checkbox */
  background:#202020; border:1px solid #444; border-radius:8px;
  padding:.35rem .55rem; font-size:12px; color:#eee; user-select:none;
  }
  #delayBtn:hover{ filter:brightness(1.05); }
  #delayBtn:active{ transform:translateY(1px); }
  /* Skip Intro – match explainer bubble look */
  #tutSkipIntroBtn, #skipIntroBtn{
  position:absolute;
  right:12px;           /* park it top-right of the table area */
  top:12px;
  z-index:5;

  background:var(--explainer-bg); /* same tone as explainer canvas */
  color:#000;                      /* black text */
  font-weight:700;                 /* bold */
  border:1px solid var(--explainer-stroke);
  border-radius:10px;
  padding:.45rem .75rem;
  line-height:1;
  cursor:pointer;

  /* mimic the explainer’s “floating card” feel */
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  }

  /* subtle affordances */
  #skipIntroBtn:hover{ filter:brightness(0.98); }
  #skipIntroBtn:active{ transform:translateY(1px); }
  #skipIntroBtn:focus-visible{
  outline:2px solid var(--teal-ring);
  outline-offset:2px;
  }
  /* Skip-to-next-hand button (same look as Skip Intro) */
#skipNextBtn, #restartTutAtLevel{
  position:absolute;
  z-index:4;
  background:var(--explainer-bg);
  color:#000;
  font-weight:700;
  border:1px solid var(--explainer-stroke);
  border-radius:10px;
  padding:.32rem .6rem;   /* smaller */
  font-size:12px;         /* smaller */
  line-height:1;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  cursor:pointer;
}
#skipNextBtn:hover, #restartTutAtLevel:hover{ filter:brightness(0.98); }
#skipNextBtn:active, #restartTutAtLevel:active{ transform:translateY(1px); }
#skipNextBtn:focus-visible, #restartTutAtLevel:focus-visible{ outline:2px solid var(--teal-ring); outline-offset:2px; }
/* Bot action speed button: sits above Blind Speed */
#botSpeedBtn{
  position:absolute;
  left:12px;
  bottom:192px;            /* 36px above the 156px Blind Speed button */
  z-index:4;
  background:#202020;
  border:1px solid #444;
  border-radius:8px;
  padding:.35rem .55rem;
  font-size:12px;
  color:#eee;
  user-select:none;
}
#botSpeedBtn:hover{ filter:brightness(1.05); }
#botSpeedBtn:active{ transform:translateY(1px); }

  /* Blind speed button: sits just above the Explainer toggle */
  #blindSpeedBtn{
  position:absolute;
  left:12px;
  bottom:156px;       /* above #explainerToggle (120px) and #delayBtn (84px) */
  z-index:4;
  background:#202020;
  border:1px solid #444;
  border-radius:8px;
  padding:.35rem .55rem;
  font-size:12px;
  color:#eee;
  user-select:none;
  }
  #blindSpeedBtn:hover{ filter:brightness(1.05); }
  #blindSpeedBtn:active{ transform:translateY(1px); }

  #explainerToggle{
  position:absolute; left:12px; bottom:84px; z-index:4; /* above delay + best-hand controls */
  background:#202020; border:1px solid #444; border-radius:8px;
  padding:.35rem .55rem; font-size:12px; color:#eee; user-select:none;
  }
  #explainerToggle input{ margin-right:.45rem; vertical-align:middle; }

  /* bottom-right yellow button */
  #handBtn{
    position:absolute; right:12px; bottom:12px; z-index:4;
    background:var(--gold); color:#111;
    border:1px solid #c9a850; border-radius:8px;
    padding:.45rem .75rem; font-weight:700; font-size:12px;
    box-shadow:0 2px 8px rgba(0,0,0,.35);
  }
  #handBtn:hover{ filter:brightness(1.05); }
  #handBtn:active{ transform:translateY(1px); }
/* Rail host stays above the felt, below the overlay */
#rail{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2; /* overlay is z:3, so this is fine */
}

/* The rail ring itself */
/* match JS geometry */
#rail::before{
  content:"";                   /* REQUIRED */
  position:absolute;            /* REQUIRED */

  /* inset ring size — uses your variables */
  top:    var(--table-inset);
  right:  var(--table-inset);
  bottom: var(--table-inset);
  left:   var(--table-inset);

  border-radius:999px;                   /* capsule ends */
  border: var(--rail-thick) solid var(--rail);

  /* same soft glow, scaled a touch */
  box-shadow:
    0 0 calc(var(--rail-thick) * 2.2) rgba(0,0,0,.70) inset,
    0 0 calc(var(--rail-thick) * 1.1) rgba(0,0,0,.60);

  transform: translateY(-2px);
}

#overlay{position:absolute;inset:0;pointer-events:none;z-index:3}

  /* controls */
  #controls
  {
    display:grid;
    grid-template-columns:1fr auto auto auto;
    gap:10px;
    padding:10px;
    /* NEW: keep badge from overlapping */
    position: relative;
    padding-left: 140px;  /* space for the “Your turn” capsule */
    background:#0d0d0d;
    border-top:1px solid #222;
    --ticker-left-gutter: 140px;
  }

  #controls .stack{
    align-self: start;  /* stick to the top of its grid cell */
  }  button{appearance:none;background:#1c1c1c;border:1px solid #333;color:#eee;padding:.6rem 1rem;border-radius:10px;cursor:pointer}
  button.primary{background:linear-gradient(#2a6,#174);border-color:#2a6}
  button.warn{background:#6a1a1a}
  button:disabled{opacity:.5;cursor:not-allowed}
  /* Default: make all action buttons monochrome (looks "idle") */
  body.not-hero-turn #controls button{
    background:#1c1c1c;
    border:1px solid #333;
    color:#eee;
  }

  /* Hero's turn: apply per-button colors */
  body.hero-turn #foldBtn  { background:#6a1a1a; border-color:#6a1a1a; color:#fff; }
  body.hero-turn #callBtn  { background:linear-gradient(#2a6,#174); border-color:#2a6; color:#fff; }
  body.hero-turn #raiseBtn { background:var(--gold); border-color:#c9a850; color:#111; }
  body.hero-turn #checkBtn { background:var(--teal);  border-color:var(--teal-border); color:#fff; }

  /* Optional hover/active niceties for colored buttons */
  body.hero-turn #checkBtn:hover { background:var(--teal-hover); }
  body.hero-turn #checkBtn:active{ background:var(--teal-active); transform:translateY(1px); }
  body.hero-turn #raiseBtn:hover  { filter:brightness(1.05); }
  body.hero-turn #raiseBtn:active { transform:translateY(1px); }
  input[type=range]{width:100%}
  input[type=number]{width:110px;background:#111;border:1px solid #333;color:#eee;border-radius:8px;padding:.4rem}
  .hint{opacity:.8}
  .note{font-size:12px;opacity:.8}

  /* Centered mini-panel for hero's best hand */
  #controls{ 
      position:relative; 
      align-items: start;  /* stop stretching; align each grid item to the top */
  } /* keep your existing grid; just make it a positioning context */

  /* Bet/Raise shortcut buttons */
  #betShortcuts{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:6px;
    margin-top:6px;
  }

  #betShortcuts button{
    padding:.35rem .3rem;
    font-size:12px;
    border-radius:8px;
    background:#1c1c1c;
    border:1px solid #333;
    color:#eee;
    cursor:pointer;
  }
  body.hero-turn #betShortcuts button:hover { filter:brightness(1.08); }
  body.not-hero-turn #betShortcuts button   { opacity:.75; }

  /* keep the column tidy */
  #betCol .betLabelRow { gap:8px; }
  #betCol .betInputRow { display:flex; align-items:end; gap:8px; }
  #betCol .betSliderRow { margin-top:6px; }
  #betShortcuts { margin-top:8px; }

  /* the range should naturally flex to width */
  #betCol input[type="range"] { width:100%; }

  /* keep the action button groups aligned to the input row */
  #actionsMain, #actionsAlt { align-self: start; }


  #bestHandPanel{
    position:absolute; left:50%; top:6px; transform:translateX(-50%);
    background:#0d0d0d; border:1px solid #555; border-radius:10px;
    padding:6px 10px; pointer-events:none;  /* never block clicks on controls */
    display:none; /* toggled via JS */
  }
  #bestHandPanel .bh-title{
    font-size:12px; font-weight:600; opacity:.9; margin-bottom:4px; text-align:center;
  }
  #bestHandCanvas{ display:block; }

  /* Poker calcs panel — same placement/size “frame” as best-hand panel */
  #calcsPanel{
    position:absolute; left:50%; top:6px; 
    transform: translateX(calc(-50% + var(--panel-nudge-x)));
    background:#0d0d0d; border:1px solid #555; border-radius:10px;
    padding:6px 10px; pointer-events:none; display:none; overflow:hidden;
  }

  /* Poker Calcs toggle — same look/placement as best-hand toggle */
  #calcsToggle{
    position:absolute; left:12px; bottom:48px; z-index:4;  /* same spot as best-hand */
    background:#202020; border:1px solid #444; border-radius:8px;
    padding:.35rem .55rem; font-size:12px; color:#eee; user-select:none;
    display:none; /* JS will flip this on for Intermediate/Advanced */
  }
  #calcsToggle input{ margin-right:.45rem; vertical-align:middle; }

  #calcsPanel .bh-title{  /* reuse the same title style */
    font-size:12px; font-weight:600; opacity:.9; margin-bottom:4px; text-align:center;
  }
  #calcsGrid{
    display:grid;
    grid-template-columns: auto 1fr auto 1fr; /* Left: k v | Right: k v */
    column-gap:14px;
    row-gap:4px;
    font-size:12px;
    align-items:center;
  }
  #calcsGrid .k{ opacity:.8; }      /* key */
  #calcsGrid .v{ font-weight:700; } /* value */

  #turnBadge{
  /* was: align-self:center; justify-self:start; position:relative; left:-25px; */
  position: absolute;
  left: 14px;
  top: 30%;
  transform: translateY(-50%);

  display:none;
  padding:.45rem 1rem;
  border:3px solid #555;
  border-radius:999px;
  background:#101010;
  color:var(--gold);
  font-weight:700;
  letter-spacing:.4px;
  font-size:.95rem;
  white-space: nowrap; /* prevents wrap in narrow widths */
  }
#turnBadge.on{display:inline-flex}
/* Replace the previous #returnMainBtn styles */

/* Bottom-of-controls scrolling ticker (overlay, no layout impact) */
#ticker{
  position:absolute;
  left: 12px;           /* JS will finalize exact left & width */
  bottom: 6px;          /* sits on the bottom row, level with bet shortcuts */
  height: 18px;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none; /* never steals clicks from controls */
  z-index: 1;           /* under floating panels but above background */
}

#ticker .track{
  display: inline-block;
  will-change: transform;
  /* NEW: start off-screen even before animation kicks in */
  transform: translateX(100%);
  /* NEW: respect the 'from' keyframe before start, and keep the end if needed */
  /* animation-fill-mode: both; */
  animation: tickerScroll 252s -118s linear infinite;
  opacity: .9;
}

@keyframes tickerScroll{
  from{ transform: translateX(100%); }
  to  { transform: translateX(calc(-100% - var(--ticker-left-gutter))); }
}

/* ==== Ticker controls (float above ticker, left side) ==== */
#tickerControls{
  position:absolute;
  left:8px;
  bottom:8px;
  display:flex;
  align-items:center;
  gap:8px;
  z-index:3;                /* above the ticker */
  pointer-events:auto;      /* clickable even if ticker ignores clicks */
}

/* small, subtle button */
#tickerRestartBtn{
  width:30px; height:30px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; line-height:1;
  background:rgba(0, 0, 0, 55);
  color:#eee;
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  cursor:pointer;
}
#tickerRestartBtn:hover{ filter:brightness(1.08); }
#tickerRestartBtn:active{ transform:translateY(1px); }

/* compact on/off checkbox */
#tickerOnLbl{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 6px;
  background:rgba(0, 0, 0, 55);
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  color:#eee; font-size:12px; user-select:none;
}
#tickerOnLbl input{ transform:scale(0.95); }

/* When off: pause and quietly hide the scroller text (keeps height so buttons stay put) */
#ticker.off .track{ 
  animation-play-state: paused;
  opacity:0;
}

/* Hide the old static footer note (we’ll reuse its text) */
footer .note{ display:none; }

#returnMainBtn{
  margin-left:auto;
  display:inline-flex; align-items:center;
  background:var(--teal);
  color:#fff;
  border:1px solid var(--teal-border);
  border-radius:8px;
  padding:.45rem .75rem;
  font-weight:700; font-size:12px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  white-space:nowrap;
}
#returnMainBtn:hover{ background:var(--teal-hover); }
#returnMainBtn:active{ background:var(--teal-active); transform:translateY(1px); }
#returnMainBtn:focus-visible{ outline:2px solid var(--teal-ring); outline-offset:2px; }

/* Invisible button chrome; only the canvas is visible */
#miniTableBtn{
  position:absolute;
  background:transparent !important;
  border:none !important;
  padding:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  z-index:4;
  cursor:pointer;
}

#miniTableBtn:focus-visible{
  outline:2px solid var(--teal-ring);
  outline-offset:2px;
  border-radius:8px;
}

#miniTableCanvas{ display:block; width:70px; height:40px; }

/* Circular hero-turn timer */
#turnTimer{
  position:absolute;
  top:6px;

  /* Stick to a fixed spot left of the controls’ centerline */
  left: clamp(
    8px,
    calc(50% - 220px + var(--panel-nudge-x)),
    calc(100% - 160px)
  );

  /* (rest of your timer visuals here) */
}

/* Optional: nudge for smaller widths */
@media (max-width: 900px){
  #turnTimer{ left: clamp(8px, calc(50% - 180px), calc(100% - 140px)); }
}
@media (max-width: 700px){
  #turnTimer{ left: clamp(8px, calc(50% - 150px), calc(100% - 120px)); 
  width:56px;
  height:56px;
  display:none;          /* shown only on hero turn at lvl 2–4 */
  z-index:4;
  pointer-events:none;   /* never block clicks on controls */}
}

#turnTimerCanvas{ width:56px; height:56px; display:block; }
#turnTimer .label{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12px; font-variant-numeric:tabular-nums;
  color:#eee; text-shadow:0 1px 0 #000;
}

/* Difficulty control — transparent look, fixed top-left */
#diffControl{
  position:absolute;
  left:12px; top:12px; z-index:4;
  width:fit-content;
  background:transparent;
  border:0;
  box-shadow:none;
  padding:6px 8px;
}

#diffControl .diff-title{
  font-weight:600; font-size:12px; letter-spacing:.3px; margin-bottom:6px;
  color:#f5d06e; text-shadow:0 1px 0 rgba(0,0,0,.35);
}

#diffControl .diff-rail{
  display:flex; flex-direction:column; gap:8px; position:relative; padding-left:8px;
}
/* Difficulty rail connector — centered, thicker, shorter */

#diffControl .diff-rail::before{
  content:"";
  position:absolute;

  /* Center on the dot:
     8px (rail padding-left) + (14px dot + 2px*2 border)/2 = 17px */
  left:17px;
  transform:none;

  /* Shorter & thicker line */
  top:10px;
  bottom:10px;
  width:3px;

  border-radius:2px;
  background:linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.08));
}

/* Grey side rails — BEHIND dots */
#diffControl .diff-rail::before{
  content:"";
  position:absolute;
  left: calc(8px + 18px / 2 - 5px); /* keep your alignment */
  top: 10px; bottom: 10px;
  width: 10px;
  background: linear-gradient(
    90deg,
    #666 0 2px,
    transparent 2px calc(100% - 2px),
    #666 calc(100% - 2px) 100%
  );
  border-radius: 2px;
  z-index: -1;                /* behind the dots */
  pointer-events: none;
}

/* === White center rail (in front of the dots) === */
#diffControl .diff-rail::after{
  content:"";
  position:absolute;
  left: calc(8px + 18px / 2 - 3px);  /* 6px-wide line → 3px half-width */
  top: 10px;
  bottom: 10px;
  width: 6px;

  background: #fff;        /* same white as your dot fill */
  border-radius: 3px;
  z-index: 2;              /* above the dots */
  pointer-events: none;
}

#diffControl .diff-item{
  display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; position:relative;
}
#diffControl .diff-item input{ display:none; }

#diffControl .dot{
  width:14px; height:14px; border:2px solid #999; border-radius:999px; background:rgba(255,255,255,.95);
  position: relative;            /* <— anchor the pseudo-element */
}

#diffControl .diff-item input:checked + .dot{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,208,110,.22);
}
#diffControl .diff-item input:checked + .dot::after{
  content:"";
  position:absolute;
  inset:3px;                     /* stays inside the 14px circle */
  background:var(--gold);
  border-radius:50%;
}
#diffControl .diff-item input:disabled + .dot{ opacity:.5; }

#diffControl .lbl{
  font-size:12px; color:#eee; text-shadow:0 2px 0 rgba(0,0,0,.35);
  transition: font-size 120ms ease, font-weight 120ms ease;
}
#diffControl .diff-item input:disabled ~ .lbl{ opacity:.55; }

/* Selected difficulty label: bold and +2px */
#diffControl .diff-item input:checked ~ .lbl{
  font-weight: 700;
  font-size: 14px; /* was 12px */
}

/* Yellow inner fill — only when checked, ABOVE white rail */
#diffControl .diff-item input:checked + .dot::after{
  content:"";
  position:absolute;
  inset: 3px;                 /* same you had before */
  border-radius: 999px;
  background: var(--gold);
  z-index: 3;                 /* above the white rail */
  pointer-events: none;
}

#handRankingsPanel{
  position: absolute; /* or fixed */
  z-index: 1101;
}

/* Lesson indicator bar (inside #tableWrap, top-left) */
#lessonNav{
  position: absolute;
  top: 5px;
  left: 368px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--explainer-stroke);
  background: var(--explainer-bg);
  box-shadow: 0 4px 18px rgba(0,0,0,.15);
  font-size: 12px;
  line-height: 1;
}

#lessonNav .label{
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}

#lessonNav .lesson-pill{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--explainer-stroke);
  background: var(--explainer-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  user-select: none;
  pointer-events: auto;
  cursor: pointer;
}

#lessonNav .lesson-pill.active{
  outline: 2px solid var(--teal-ring);
  outline-offset: 1px;
}

/* Tutorial overlay layer lives above the table content without blocking the world */
#tutorialLayer {
  position: absolute;
  inset: 0;
  z-index: 5; /* above table UI like z=4 buttons */
  pointer-events: none; /* container ignores events ... */
}
#tutorialLayer * {
  pointer-events: auto;   /* ... but tutorial children can receive clicks */
}

/* Mode toggle hook if you want to hide game-only chrome in tutorial */
/* .mode-tutorial .game-only { display: none !important; }

/* =========================
   InfoMessage modal — explainer style
   ========================= */

#tableWrap { position: relative; }   /* ensure this exists */

/* Backdrop */
#tutInfoModal{
  position: absolute;   /* not fixed */
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.45);
  display: grid;
  place-items: center;            /* exact centering */
}

/* Light “explainer” card */
#tutInfoModal .tutinfo-card{
  position: static;               /* let the backdrop center it */
  background: var(--explainer-bg);                  /* same tone as explainer */
  color: #111;                                      /* dark text */
  border: 1px solid var(--explainer-stroke);
  border-radius: 16px;
  width: min(640px, calc(100% - 48px));
  overflow: auto;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);           /* same family as skip buttons */
  outline: none;
  display: flex;
  flex-direction: column;
  padding: 16px
}

/* Header/title — chunkier */
#tutInfoModal .tutinfo-hdr{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#tutInfoModal .tutinfo-title{
  font-weight: 800;                                 /* chunky */
  font-size: 18px;
  letter-spacing: .2px;
  color: #111;
}

/* Body copy — slightly larger & darker */
#tutInfoModal .tutinfo-body{
  font-size: 16px;
  font-weight: 600;                                 /* chunky */
  line-height: 1.5;
  color: #111;
  margin-bottom: 6px;
}
#tutInfoModal .tutinfo-body p{ margin: 0 0 10px 0; }
#tutInfoModal .tutinfo-list{
  margin: 6px 0 0 18px;
  padding: 0;
}
#tutInfoModal .tutinfo-list li{ margin: 4px 0; }

/* Actions row */
#tutInfoModal .tutinfo-actions{
  display: flex;
  justify-content: center;
  gap: 2px;
}

/* OK button — match your light “Skip” buttons */
#tutInfoModal .tutinfo-ok{
  background: var(--explainer-bg);
  color: #000;
  font-weight: 700;
  border: 1px solid var(--explainer-stroke);
  border-radius: 10px;
  padding: .4rem .7rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
#tutInfoModal .tutinfo-ok:hover{ filter: brightness(0.98); }
#tutInfoModal .tutinfo-ok:active{ transform: translateY(1px); }
#tutInfoModal .tutinfo-ok:focus-visible{
  outline: 2px solid var(--teal-ring);
  outline-offset: 2px;
}

/* Optional tiny “ℹ️” icon hidden by default (keeps layout clean) */
#tutInfoModal .tutinfo-icon{ display:none; }

/* Small-screen polish */
@media (max-width: 480px){
  #tutInfoModal .tutinfo-card{
    width: calc(100% - 32px);
    padding: 12px 14px 10px 14px;
  }
  #tutInfoModal .tutinfo-title{ font-size: 15px; }
  #tutInfoModal .tutinfo-body{ font-size: 14px; }
}