/* MiniSchack – lekfullt tema runt ett klassiskt bräde */

/* Typsnittet Nunito ligger med i appen (fonts/), så texten ser likadan ut på iPhone och
   Android och fungerar offline. Licens: SIL Open Font License, se fonts/OFL.txt. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
}

:root {
  --bg: #fff6df;
  --bg-dot: #ffe9b0;
  --ink: #3b2a1a;
  --ink-soft: #7a6450;
  --card: #ffffff;
  --shadow: 0 6px 0 rgba(59, 42, 26, 0.15);

  --yellow: #ffd34d;
  --blue: #4fa8ff;
  --coral: #ff7a6b;
  --green: #4cc38a;
  --purple: #a77bf3;

  /* Brädet: klassiska träfärger */
  --sq-light: #f0d9b5;
  --sq-dark: #b58863;
  --hint: rgba(46, 160, 67, 0.55);
  --last-move: rgba(255, 211, 77, 0.55);
  --check: rgba(255, 60, 60, 0.7);

  --radius: 22px;
  --font: 'Nunito', ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 2px, transparent 2px);
  background-size: 26px 26px;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

#app {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100dvh;   /* hela skärmhöjden, så brädet kan centreras */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  max-width: 900px;
  margin: 0 auto;
}

.screen { display: flex; flex-direction: column; gap: 18px; flex: 1; }
.screen[hidden] { display: none; }

h1, h2 { margin: 0; line-height: 1.15; }
h1 { font-size: clamp(28px, 6vw, 44px); }
h2 { font-size: clamp(22px, 4.5vw, 32px); }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}
.center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* ---------- Knappar ---------- */
.btn {
  font: inherit;
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 22px;
  cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.08s, box-shadow 0.08s;
  background: var(--blue);
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18); }
.btn-blue { background: var(--blue); }
.btn-coral { background: var(--coral); }
.btn-green { background: var(--green); }
.btn-purple { background: var(--purple); }
.btn-yellow { background: var(--yellow); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }

.btn-big {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; min-height: 130px; font-size: clamp(20px, 4vw, 26px);
}
.btn-icon { font-size: 48px; line-height: 1; }

.btn-round {
  width: 56px; height: 56px; padding: 0; flex: none;
  border-radius: 50%; font-size: 26px;
  background: #fff; color: var(--ink);
}

/* ---------- Namnskärm ---------- */
.mascot { font-size: 96px; line-height: 1; }
#name-form { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 360px; }
.big-input {
  font: inherit; font-size: 26px; font-weight: 700; text-align: center;
  padding: 14px; border-radius: var(--radius);
  border: 4px solid var(--yellow); outline: none; color: var(--ink);
  -webkit-user-select: text; user-select: text;
}
.big-input:focus { border-color: var(--blue); }

/* ---------- Meny ---------- */
.menu-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* Logotypen: mörk text, röda i-prickar och en schackrutig linje under */
.logo {
  position: relative; color: var(--ink); font-weight: 900; white-space: nowrap;
  font-size: clamp(30px, 8.5vw, 44px); padding-bottom: 0.3em;
}
.logo-i { position: relative; display: inline-block; }
.logo-i::before {
  content: ''; position: absolute; left: 50%; top: 0.08em; width: 0.22em; height: 0.22em; translate: -50% 0;
  background: var(--coral); border-radius: 50%; box-shadow: 0 0 0 0.08em var(--bg);
}
.logo::after {
  content: ''; position: absolute; left: 0.05em; right: 0.05em; bottom: 0; height: 0.24em; border-radius: 0.08em;
  background: repeating-linear-gradient(90deg, #b58863 0 0.33em, #f0d9b5 0.33em 0.66em);
  border: 2px solid var(--ink);
}
.profile-chip {
  font: inherit; font-weight: 800; font-size: 20px; color: var(--ink);
  background: #fff; border: 0; border-radius: 999px; padding: 10px 18px;
  box-shadow: var(--shadow); cursor: pointer;
}
.menu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

.trophy { display: flex; align-items: center; gap: 16px; }
.trophy-cup { font-size: 64px; line-height: 1; }
.trophy-text { font-size: 22px; font-weight: 800; }
.trophy-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.badge {
  display: flex; flex-direction: column; align-items: center;
  background: #fff3cf; border-radius: 14px; padding: 6px 4px; min-width: 44px;
}
/* Djurmärket: djuret i en rund bricka i nivåns färg */
.badge-animal {
  width: 38px; height: 38px; border-radius: 50%; background: var(--lvl);
  border: 2.5px solid #4a3424; display: flex; align-items: center; justify-content: center;
}
.badge-animal .icon { width: 82%; height: 82%; }
.badge-count { font-size: 15px; font-weight: 800; min-height: 18px; }
.badge.locked { background: #f1ece4; }
.badge.locked .badge-animal { filter: grayscale(1); opacity: 0.3; }
.badge.new { animation: hop 0.6s ease-out 3; background: #ffe07a; }
.trophy-cup.cheer { animation: hop 0.6s ease-out 3; }
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-14px) scale(1.15) rotate(-6deg); }
}
.level-wins {
  position: absolute; top: 10px; right: 12px; font-size: 16px;
  background: rgba(255, 255, 255, 0.9); color: var(--ink); border-radius: 999px; padding: 2px 10px;
}
.level-grid .btn-big { position: relative; }

/* ---------- Toppfält ---------- */
.top-bar { display: flex; align-items: center; gap: 14px; }

/* ---------- Nivåer ---------- */
.level-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.level-grid .btn-big small { font-size: 16px; font-weight: 700; opacity: 0.9; }

/* ---------- Spel ---------- */
.turn-banner {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: clamp(20px, 4.5vw, 28px); font-weight: 800;
  padding: 6px 16px; border-radius: 999px; background: #fff; box-shadow: var(--shadow);
  height: 64px; line-height: 1.1; text-align: center;   /* fast höjd: brädet flyttar sig aldrig */
}
.board-wrap { display: flex; justify-content: center; }
/* Brädet står i mitten av utrymmet under banderollen */
#screen-game .board-wrap, #learn-content .board-wrap { flex: 1; align-items: center; }
.board-holder { position: relative; }
.board {
  --size: min(calc(100vw - 32px), calc(100vh - 140px), 760px);
  width: var(--size); height: var(--size);
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 10px solid #7b5234; border-radius: 12px; box-shadow: var(--shadow);
  overflow: hidden;
  touch-action: none;   /* dra pjäser utan att sidan scrollar eller zoomar */
}

/* ---------- Popup ---------- */
.overlay {
  position: fixed; inset: 0; background: rgba(59, 42, 26, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10;
}
.overlay[hidden] { display: none; }
.popup { max-width: 520px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 420px) {
  .btn-big { min-height: 110px; }
  .trophy { gap: 10px; padding: 16px; }
  .trophy-cup { font-size: 48px; }
  .trophy-text { font-size: 20px; }
  .btn-icon { font-size: 40px; }
}

/* ---------- Rutor och pjäser ---------- */
.sq {
  position: relative; border: 0; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
}
.sq.light { background: var(--sq-light); }
.sq.dark { background: var(--sq-dark); }
.sq.last::before, .sq.selected::before, .sq.in-check::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.sq.last::before { background: var(--last-move); }
.sq.selected::before { background: rgba(79, 168, 255, 0.55); }
.sq.in-check::before { background: radial-gradient(circle, var(--check) 20%, transparent 75%); }

/* Giltiga drag: grön prick på tom ruta, grön ring runt pjäs som kan tas */
.sq.hint::after, .sq.hint-capture::after {
  content: ''; position: absolute; pointer-events: none; border-radius: 50%;
}
.sq.hint::after { width: 34%; height: 34%; background: var(--hint); }
.sq.hint-capture::after { inset: 4%; border: 6px solid var(--hint); }

.piece { width: 88%; height: 88%; position: relative; z-index: 1; pointer-events: none; }
.piece.pop { animation: pop 0.25s ease-out; }
@keyframes pop { 0% { transform: scale(0.7); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }

.piece.nope { animation: nope 0.3s; }
.sq.nope-flash { animation: nope-flash 0.35s ease-out; }
@keyframes nope-flash {
  0% { box-shadow: inset 0 0 0 100vmax rgba(255, 90, 90, 0.35); }
  100% { box-shadow: inset 0 0 0 100vmax rgba(255, 90, 90, 0); }
}
@keyframes nope {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------- Vems tur ---------- */
.turn-banner { transition: background 0.25s, color 0.25s; }
.turn-banner.turn-white { background: #fff; color: var(--ink); }
.turn-banner.turn-black { background: #3d3a7a; color: #fff; }
.banner-icon { width: 44px; height: 44px; flex: none; }
.banner-icon .piece { width: 100%; height: 100%; }
.check-tag {
  background: var(--coral); color: #fff; border-radius: 999px; padding: 2px 12px;
  margin-left: 6px; animation: pulse 0.8s ease-in-out infinite alternate;
}
.turn-banner.thinking .banner-icon { animation: think 0.8s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.08); } }
@keyframes think { to { transform: rotate(-12deg) translateY(-3px); } }

/* ---------- Popup-innehåll ---------- */
.popup-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.popup-emoji { font-size: 64px; line-height: 1; }
.popup-sub { margin: 0; font-size: 20px; color: var(--ink-soft); font-weight: 700; }
.popup-piece { width: 110px; height: 110px; margin: 0 auto; }
.popup-piece .piece { width: 100%; height: 100%; }
.promo-btn { width: 100px; height: 100px; padding: 6px; }
.promo-btn .piece { width: 100%; height: 100%; }

/* ---------- Inställningar ---------- */
.settings-list { display: flex; flex-direction: column; gap: 16px; }
.setting {
  display: flex; align-items: center; gap: 16px; width: 100%;
  font: inherit; color: var(--ink); text-align: left; border: 0; cursor: pointer;
}
.setting-icon { font-size: 40px; line-height: 1; flex: none; }
.setting-text { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.setting-text strong { font-size: 22px; }
.setting-text small { font-size: 16px; color: var(--ink-soft); font-weight: 600; }

.switch {
  flex: none; width: 72px; height: 42px; border-radius: 999px; background: #d9cfc2;
  position: relative; transition: background 0.2s;
}
.switch span {
  position: absolute; top: 4px; left: 4px; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.2s;
}
.switch.on { background: var(--green); }
.switch.on span { transform: translateX(30px); }

.style-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.style-choice {
  font: inherit; font-size: 20px; font-weight: 800; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px; border-radius: var(--radius); cursor: pointer; min-width: 0;
  background: var(--sq-light); border: 5px solid transparent;
}
.style-choice.chosen { border-color: var(--green); background: #e6f7ee; }
.style-pieces { display: flex; }
.style-pieces .piece { width: min(64px, 14vw); height: min(64px, 14vw); }
.about { text-align: center; color: var(--ink-soft); font-weight: 700; margin: 8px 0 0; }

/* ---------- Lär dig pjäserna ---------- */
.learn-picker { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.learn-intro { margin: 0; font-size: 24px; font-weight: 800; text-align: center; }
.learn-progress {
  align-self: center; margin: -6px 0 0; padding: 6px 16px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow); font-size: 17px; font-weight: 800; color: var(--ink-soft);
}
/* Mobil: två stora kort per rad. Bredare skärm (iPad): tre per rad. */
.learn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 600px) { .learn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.learn-choice {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 8px 16px; font-size: clamp(18px, 4.6vw, 24px);
}
.learn-piece { width: min(30vw, 140px); aspect-ratio: 1; }
@media (min-width: 600px) { .learn-piece { width: min(20vw, 150px); } }
.learn-piece .piece { width: 100%; height: 100%; }
/* Bocken sitter som ett märke på kortets hörn, så den aldrig täcker pjäsen */
.learned-check {
  position: absolute; top: -8px; right: -8px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--green); color: #fff; font-size: 18px; border: 3px solid #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: flex; align-items: center; justify-content: center;
}
.learn-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.learn-tip-piece { width: 56px; height: 56px; flex: none; }
.learn-tip-piece .piece { width: 100%; height: 100%; }
.learn-tip { margin: 0; font-size: clamp(18px, 3.8vw, 22px); font-weight: 700; }
.learn-stars { display: flex; justify-content: center; gap: 8px; font-size: 36px; }
.learn-stars span { filter: grayscale(1); opacity: 0.25; transition: all 0.3s; }
.learn-stars span.got { filter: none; opacity: 1; animation: hop 0.5s ease-out; }
.learn-board { --size: min(calc(100vw - 32px), calc(100vh - 300px), 700px); }
.star-mark {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--size) / 8 * 0.6); z-index: 2; pointer-events: none;
  animation: twinkle 1s ease-in-out infinite alternate;
}
@keyframes twinkle { from { transform: scale(0.85) rotate(-8deg); } to { transform: scale(1.05) rotate(8deg); } }

/* Pjäsen som följer fingret när man drar */
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none;
  filter: drop-shadow(0 8px 8px rgba(0, 0, 0, 0.3));
}
.drag-ghost .piece { width: 100%; height: 100%; }

/* Pjäsen som glider till sin nya ruta (datorns drag m.m.) */
.slide-ghost {
  position: fixed; z-index: 15; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.3));
}

/* ---------- Resultat under brädet ---------- */
.turn-banner.turn-over { background: var(--yellow); color: var(--ink); font-size: clamp(17px, 4.4vw, 28px); }
.result-bar {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center;
  padding: 12px 14px;
}
.result-bar[hidden] { display: none; }
/* Resultatet läggs i tomrummet runt brädet, så brädet står kvar på samma ställe när
   partiet tar slut: under brädet på upprätt skärm, bredvid brädet på liggande iPad
   (där fyller brädet hela höjden). */
@media (orientation: portrait) {
  .board-holder .result-bar { position: absolute; left: 0; right: 0; top: calc(100% + 12px); }
}
@media (orientation: landscape) {
  .board-holder .result-bar {
    position: absolute; top: 50%; left: calc(100% + 16px); transform: translateY(-50%);
    width: min(240px, calc(50vw - 50% - 32px));
  }
  .board-holder .result-buttons { flex-direction: column; }
}
#screen-learn #learn-content { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.result-sub { margin: 0; font-size: clamp(15px, 4vw, 19px); font-weight: 700; color: var(--ink-soft); line-height: 1.25; }
.result-buttons { display: flex; gap: 10px; }
.result-buttons .btn { flex: 1; padding: 12px 8px; font-size: clamp(17px, 4.6vw, 20px); white-space: nowrap; }
.move-tag {
  background: var(--purple); color: #fff; border-radius: 999px; padding: 2px 12px;
  margin-left: 6px; font-size: 0.8em;
}

/* ---------- Mobil som ligger ner: be om att vända den ---------- */
.rotate-hint {
  display: none; position: fixed; inset: 0; z-index: 50;
  background: var(--bg); color: var(--ink);
  flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-size: 26px; font-weight: 800;
}
.rotate-hint p { margin: 0; }
.rotate-phone { font-size: 90px; animation: turn-upright 1.6s ease-in-out infinite; }
@keyframes turn-upright {
  0%, 20% { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}
/* Låg och bred skärm = telefon på tvären (en iPad är alltid högre än 500 px) */
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-hint { display: flex; }
  /* Gör appen osynlig och fäst den mot skärmen under tiden. Då kan sidan inte scrolla
     iväg, och eftersom appen inte tas bort startar inga animationer om när man vänder
     tillbaka (display: none hade gjort det – det såg ut som att allt hoppade). */
  #app { position: fixed; inset: 0; overflow: hidden; visibility: hidden; }
  .overlay { visibility: hidden; }
  html, body { overflow: hidden; }
}

/* ---------- Mot en kompis: spelarna sitter mitt emot varandra ---------- */
#friend-top { display: none; }
.friend-mode #friend-top { display: flex; align-items: center; gap: 14px; flex: none; rotate: 180deg; order: 1; }

/* Ångra-knappen: bara i kompisläget. Aktiv i 4 s efter ens drag – ringen krymper under tiden. */
.undo-btn { position: relative; font-size: 24px; }
#screen-game:not(.friend-mode) .undo-btn { display: none; }
.undo-btn:disabled { opacity: 0.3; box-shadow: none; transform: none; cursor: default; }
.undo-ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); rotate: -90deg; pointer-events: none; }
.undo-ring circle { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linecap: round;
  stroke-dasharray: 100.6; stroke-dashoffset: 100.6; }
.undo-btn.counting .undo-ring circle { animation: undo-count 4s linear forwards; }
@keyframes undo-count { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 100.6; } }
.friend-mode .board-wrap { order: 2; }
.friend-mode .top-bar { order: 3; }             /* 🏠 och vits banderoll längst ner */
.turn-banner.waiting { opacity: 0.45; }
.turn-banner.turn-lost { background: #fff; color: var(--ink-soft); }
/* Två banderoller tar mer plats – brädet krymper lite om skärmen är låg, så
   resultatrutan får plats mellan brädet och vits banderoll */
@media (orientation: portrait) {
  .friend-mode .board { --size: min(calc(100vw - 32px), calc(100vh - 390px), 760px); }
}
@media (orientation: landscape) {
  .friend-mode .board { --size: min(calc(100vw - 32px), calc(100vh - 230px), 760px); }
}
/* Svarts pjäser vända mot svart spelare. `rotate` (inte transform) så att pjäsernas
   hopp- och skakanimationer fortsätter fungera ovanpå vridningen. */
.flip-black .piece-b { rotate: 180deg; }
.popup.flipped { rotate: 180deg; }

/* ---------- Ikoner (egna SVG i stället för emojis) ---------- */
.icon { width: 1.2em; height: 1.2em; flex: none; display: inline-block; }
.icon-inline { vertical-align: -0.28em; }
.btn-icon { width: 64px; height: 64px; font-size: 0; }
.btn-icon .icon { width: 100%; height: 100%; }
@media (max-width: 420px) { .btn-icon { width: 54px; height: 54px; } }
/* Runda knappar: centrera ikonen exakt (annars placeras den som text, med plats för
   bokstävernas "svansar" under – då hamnar den några pixlar för högt) */
.btn-round { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.btn-round [data-icon] { display: flex; }
.btn-round .icon { width: 32px; height: 32px; display: block; }
.icon-slot { display: inline-flex; vertical-align: middle; }
.icon-slot .icon { width: 1.35em; height: 1.35em; }
.btn-with-icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.mascot { width: 120px; height: 120px; font-size: 0; }
.mascot .piece { width: 100%; height: 100%; }
.trophy-cup { font-size: 0; }
.trophy-cup .icon { width: 64px; height: 64px; }
@media (max-width: 420px) { .trophy-cup .icon { width: 52px; height: 52px; } }
.setting-icon { font-size: 0; }
.setting-icon .icon { width: 46px; height: 46px; }
.star-mark .icon { width: 72%; height: 72%; }
.learn-stars .icon { width: 36px; height: 36px; }
.learned-check .icon { width: 20px; height: 20px; }
.rotate-phone { font-size: 0; }
.rotate-phone .icon { width: 100px; height: 100px; }
.popup-icon .icon { width: 76px; height: 76px; }
.level-wins .icon { width: 1.1em; height: 1.1em; }

/* ---------- Lär dig spela: startsida och regler ---------- */
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.hub-card { min-height: 180px; }
.hub-progress { font-size: 16px; font-weight: 700; opacity: 0.95; display: flex; align-items: center; gap: 4px; }

.rule-list { display: flex; flex-direction: column; gap: 12px; }
.rule-card {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px;
  font: inherit; font-size: 20px; font-weight: 800; color: var(--ink); text-align: left;
  border: 0; cursor: pointer; position: relative;
}
.rule-card.hard { background: #f4efff; }
.rule-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--yellow);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.rule-icon { flex: none; width: 44px; height: 44px; font-size: 0; }
.rule-icon .icon { width: 100%; height: 100%; }
.rule-name { flex: 1; }
.rule-check {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 0;
}
.rule-check .icon { width: 20px; height: 20px; }
.rule-text .learn-tip { font-size: clamp(17px, 3.8vw, 21px); line-height: 1.3; }
.rule-buttons { display: flex; gap: 12px; }
.rule-buttons .btn { flex: 1; padding: 14px 8px; font-size: clamp(17px, 4.4vw, 20px); white-space: nowrap; }

.values-list { display: flex; flex-direction: column; gap: 10px; }
.value-row { display: flex; align-items: center; gap: 12px; }
.value-piece { width: 52px; height: 52px; flex: none; }
.value-piece .piece { width: 100%; height: 100%; }
.value-name { width: 118px; flex: none; font-size: 20px; font-weight: 800; }
/* Prickarna i rader om fem – som när man räknar på fingrarna (damen = 5 + 4) */
.value-dots { display: flex; flex-wrap: wrap; gap: 5px; width: calc(5 * 16px + 4 * 5px); }
.value-dots .dot { width: 16px; height: 16px; border-radius: 50%; background: #ffc933; border: 2.5px solid #4a3424; }
.value-king { font-size: 17px; font-weight: 700; color: var(--ink-soft); }
/* Regelbrädet: lite mindre på låga skärmar, så text + bräde + knappar alltid ryms */
.learn-board#rule-board { --size: min(calc(100vw - 32px), calc(100vh - 385px), 620px); }

/* ---------- Spara på hemskärmen (glider upp nerifrån) ---------- */
.install-backdrop {
  position: fixed; inset: 0; z-index: 30; background: rgba(59, 42, 26, 0);
  display: flex; align-items: flex-end; justify-content: center;
  transition: background 0.3s;
}
.install-backdrop.open { background: rgba(59, 42, 26, 0.35); }
.install-sheet {
  width: min(560px, 100%); margin: 0 12px max(12px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px;
  transform: translateY(110%); transition: transform 0.3s ease-out;
}
.install-backdrop.open .install-sheet { transform: none; }
.install-head { display: flex; align-items: center; gap: 14px; }
.install-app-icon { width: 64px; height: 64px; border-radius: 15px; flex: none; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); }
.install-head h2 { font-size: clamp(20px, 5vw, 24px); }
.install-sub { margin: 4px 0 0; font-size: 16px; color: var(--ink-soft); }
.install-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.install-steps li {
  display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.3;
  background: var(--bg); border-radius: 16px; padding: 10px 12px; counter-increment: step;
}
.install-steps li::before {
  content: counter(step); flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--yellow);
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.step-icon { flex: none; width: 34px; height: 34px; font-size: 0; }
.step-icon .icon { width: 100%; height: 100%; }
.install-buttons { display: flex; gap: 10px; }
.install-buttons .btn { flex: 1; }
.install-never {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--ink-soft); background: none; border: 0;
  text-decoration: underline; cursor: pointer; align-self: center; padding: 4px;
}