/* Solitér: tři dětské hry s kartami pod záložkami. Stejný svět jako rozcestník (obloha, Nunito),
   karty leží na barevné podložce, pod ní balíček, odhazovací hromádka a bublina s tím, co se stalo. */
:root {
  --sky-0: #BFE3FF; --sky-1: #E6F4FF; --ink: #1F2A4D; --soft: #50607F;
  --gold: #FFC93C; --gold-deep: #D18E00; --cosmos: #1B1F4D; --cosmos-2: #2A3580;
  --paper: #FFFFFF; --edge: #D3DDEB; --edge-deep: #A9B8CF;
  --shade: rgba(31, 42, 77, .18); --shadow: rgba(31, 42, 77, .22); --veil: rgba(27, 31, 77, .55);
  --hi: rgba(255, 255, 255, .55); --lo: rgba(0, 0, 0, .08);
  /* čtyři znaky: tvar i barva, ať se dají rozlišit i bez barev */
  --heart: #E5484D; --star: #F2A20C; --ball: #2F6FDB; --tri: #2E9D57;
  /* podložka, každá hra má svou */
  --mat-0: #A6DCA4; --mat-1: #5DAF68; --mat-ink: #1D4F27;
  --font: "Nunito", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  color-scheme: light;
}
[data-game="desitka"] { --mat-0: #FBE6A6; --mat-1: #E5B547; --mat-ink: #6B4A00; }
[data-game="domecky"] { --mat-0: #DDD0F7; --mat-1: #A387DE; --mat-ink: #3E2A73; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, var(--sky-1), var(--sky-0)) fixed; background-color: var(--sky-0);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(14px, env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-bottom, 0px));
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible, .home:focus-visible { outline: 4px solid var(--gold); outline-offset: 3px; }
svg { display: block; }

/* hlavička: název a tři hry */
.top, main { max-width: 1040px; margin: 0 auto; }
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.home {
  display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%;
  background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); font-size: 24px; line-height: 1; text-decoration: none;
}
h1 { margin: 0; font-size: clamp(26px, 4vw, 38px); font-weight: 700; text-wrap: balance; }
.tabs { display: flex; gap: 8px; flex: 1; justify-content: flex-end; min-width: 0; }
.tab {
  position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; text-align: left;
  border: 0; border-radius: 18px; background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); cursor: pointer;
}
.tab svg { width: 30px; height: 30px; flex: none; fill: currentColor; }
.tab b { display: block; font-size: 18px; font-weight: 600; }
.tab small { display: block; font-size: 13px; color: var(--soft); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 3px 0 var(--cosmos); }
.tab[aria-selected="true"] small { color: var(--sky-0); }
.tab .wins { position: absolute; top: -8px; right: -6px; background: var(--gold); color: var(--ink); border-radius: 999px; padding: 1px 8px; font-size: 13px; font-weight: 600; }
.tab .wins:empty { display: none; }
.round {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--gold); color: var(--ink); box-shadow: 0 3px 0 var(--gold-deep); cursor: pointer;
}
.round svg { width: 26px; height: 26px; }
.round[aria-pressed="false"] { background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); color: var(--soft); }
.round[aria-pressed="false"] .waves { display: none; }

.rule { display: flex; align-items: center; gap: 12px; margin: 16px 0 12px; }
.rule p { margin: 0; max-width: 62ch; font-size: clamp(16px, 2.2vw, 20px); font-weight: 500; text-wrap: pretty; }

/* podložka s kartami */
.mat {
  border-radius: 28px; padding: clamp(10px, 2.4vw, 26px);
  background: radial-gradient(120% 100% at 50% 0%, var(--mat-0), var(--mat-1));
  box-shadow: inset 0 2px 0 var(--hi), inset 0 -6px 0 var(--lo), 0 10px 30px var(--shadow);
}
.board { position: relative; margin: 0 auto; }
.slot {
  position: absolute; width: var(--cw); height: var(--ch); display: grid; place-items: center;
  border: 3px dashed var(--hi); border-radius: calc(var(--cw) * .16); color: var(--mat-ink);
}
.slot svg { width: 46%; height: 46%; fill: currentColor; opacity: .28; }

/* karta: číslo, znak a desítkový rámeček (2 × 5 políček), ať jde počítat */
.card {
  position: absolute; width: var(--cw); height: var(--ch); padding: calc(var(--cw) * .08);
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 2px; align-items: start;
  border: 2px solid var(--edge); border-radius: calc(var(--cw) * .16); background: var(--paper);
  color: var(--suit, var(--ink)); box-shadow: 0 2px 0 var(--edge-deep), 0 5px 12px var(--shadow); cursor: pointer;
  transition: transform .15s;
}
.card .num { justify-self: start; font-size: calc(var(--cw) * .38); font-weight: 700; line-height: .9; color: var(--ink); }
.card .mark { width: calc(var(--cw) * .26); height: calc(var(--cw) * .26); fill: currentColor; }
.card .frame {
  grid-column: 1 / -1; height: 100%; min-height: 0; padding: 2px 6%;
  display: grid; grid-template: repeat(5, 1fr) / repeat(2, 1fr); grid-auto-flow: column; place-items: center;
}
.card .pip { width: 100%; height: 100%; max-width: calc(var(--cw) * .2); fill: currentColor; }
.card .pip.off { opacity: .14; }
.card.heart { --suit: var(--heart); } .card.star { --suit: var(--star); }
.card.ball { --suit: var(--ball); } .card.tri { --suit: var(--tri); }
.card.back, .stock {
  background: radial-gradient(circle, var(--gold) 0 1.6px, transparent 2.2px) 0 0 / 11px 11px, linear-gradient(155deg, var(--cosmos-2), var(--cosmos));
  border: 3px solid var(--paper); box-shadow: 0 0 0 1px var(--edge-deep), 0 5px 12px var(--shadow);
}
.card.locked:not(.back)::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: var(--shade); }
.card.sel { transform: translateY(-12%); box-shadow: 0 0 0 4px var(--gold), 0 12px 20px var(--shadow); z-index: 50; }
.card.home { cursor: default; }

.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { translate: -7px 0; } 40%, 80% { translate: 7px 0; } }
.pop { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { scale: .6; opacity: .3; } }
.flip { animation: flip .4s ease-out; }
@keyframes flip { from { transform: rotateY(90deg); } }
.hint { animation: nudge 1.1s ease-in-out infinite; z-index: 40; }
@keyframes nudge { 50% { translate: 0 -8px; box-shadow: 0 0 0 5px var(--gold), 0 12px 20px var(--shadow); } }

/* lišta pod podložkou */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.pile { position: relative; flex: none; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .16); }
.stock { cursor: pointer; color: var(--paper); }
.stock .count { position: absolute; top: -10px; right: -10px; min-width: 30px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: var(--ink); font-size: 15px; font-weight: 600; }
.stock.empty { background: none; border: 3px dashed var(--edge-deep); box-shadow: none; color: var(--soft); display: grid; place-items: center; }
.stock.empty svg { width: 50%; height: 50%; }
.waste { border: 3px dashed var(--edge-deep); }
.waste .card { top: -3px; left: -3px; }
.waste.deep::before { content: ""; position: absolute; inset: -3px; translate: 5px 5px; border-radius: inherit; background: var(--paper); border: 2px solid var(--edge); }
.bubble { flex: 1 1 200px; min-width: 0; min-height: 1.3em; margin: 0; font-size: clamp(18px, 2.6vw, 24px); font-weight: 600; text-wrap: balance; }
.tools { display: flex; gap: 10px; margin-left: auto; }
.btn {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border: 0; border-radius: 16px;
  background: var(--paper); box-shadow: 0 3px 0 var(--edge-deep); font-size: 17px; font-weight: 600; cursor: pointer;
}
.btn svg { width: 22px; height: 22px; }

/* výhra */
.win { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; overflow: hidden; background: var(--veil); }
.win-card { position: relative; z-index: 1; max-width: 420px; padding: 28px 32px; border-radius: 28px; background: var(--paper); text-align: center; box-shadow: 0 20px 50px var(--shadow); animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
.win-card .big { margin: 0; font-size: 56px; font-weight: 700; }
.win-card p { margin: 6px 0 18px; font-size: 20px; }
.win-card .btn { margin: 0 auto; background: var(--gold); box-shadow: 0 3px 0 var(--gold-deep); }
.fall { position: absolute; top: -40px; width: 28px; height: 28px; fill: var(--c); animation: drop var(--d) linear var(--delay) infinite; }
@keyframes drop { to { translate: 0 110vh; rotate: 360deg; } }

@media (max-width: 600px) {
  .tabs { flex-basis: 100%; }
  .tab { flex: 1; flex-direction: column; gap: 2px; padding: 8px 4px; text-align: center; }
  .tab small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .fall { display: none; }
}