/* Solitaire Run: a two-colour risograph on cream paper. Mustard and oxblood inks, a dark ink for lines and words,
   no gradients, no shadows, no felt. The panel is a left column on a desktop and a strip on a phone held upright. */
:root{ --paper:#f3ecd9; --ink:#2b2320; --red:#7a1f1f; --gold:#d9a21b; --on:#2b2320; --rule:#d9a21b; --dim:rgba(43,35,32,.62);
  --font:"Fira Sans Extra Condensed","Arial Narrow",sans-serif; color-scheme:light; }
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{ background:var(--paper) url(art/paper-cream.webp); background-size:256px; color:var(--on); font:500 17px/1.3 var(--font);
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
body[data-paper=dusk]{ --paper:#c7ced8; background:#c7ced8 url(art/paper-dusk.webp); background-size:256px; }
body[data-paper=ledger]{ --paper:#d6dcc4; background:#d6dcc4 url(art/paper-ledger.webp); background-size:256px; }
body[data-paper=night]{ --paper:#3a2f2b; --on:#f3ecd9; --dim:rgba(243,236,217,.7); background:#3a2f2b url(art/paper-night.webp); background-size:256px; }
#app{ position:fixed; inset:0; background:inherit; background-size:256px; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.screen{ position:absolute; inset:0; display:none; }
.screen.on{ display:flex; }
h2{ margin:0 0 6px; font:800 clamp(24px,4.4vh,34px)/1.05 var(--font); text-transform:uppercase; letter-spacing:.04em; color:var(--ink); }
h3{ margin:14px 0 6px; font:700 15px/1.2 var(--font); text-transform:uppercase; letter-spacing:.08em; color:var(--red); }
.note{ color:var(--dim); margin:4px 0; font-size:16px; }
.row{ display:flex; gap:8px; flex-wrap:wrap; }
.row.center{ justify-content:center; }
.col{ display:flex; flex-direction:column; gap:8px; align-items:stretch; margin-top:10px; }

/* buttons: the preview's plates, a dark ink outline, words in capitals */
button{ font:700 18px/1.1 var(--font); text-transform:uppercase; letter-spacing:.05em; color:var(--ink); cursor:pointer;
  border:3px solid var(--ink); border-radius:12px; padding:9px 16px; min-height:40px; background:var(--paper); }
button:disabled{ opacity:.45; cursor:default; }
.btn{ background:var(--gold); }
.btn2{ background:#f3ecd9; }
.btn.big{ font-size:22px; padding:12px 26px; }
.small{ font-size:16px; padding:6px 12px; }
.btn2.on{ background:var(--ink); color:#f3ecd9; }
.icon{ padding:6px 10px; display:inline-flex; align-items:center; justify-content:center; }
button:active:not(:disabled){ transform:translateY(1px); }
@media (pointer:coarse){ button{ min-height:44px; } .small{ min-height:44px; } }
.rewardTag{ display:inline-block; margin-left:6px; padding:2px 7px; border-radius:6px; background:var(--red); color:#f3ecd9; font-size:.8em; letter-spacing:.06em; }
.btn.reward.wait{ opacity:.6; }

/* the title */
#title{ flex-direction:column; align-items:center; justify-content:flex-start; gap:10px; padding:2vh 16px; overflow-y:auto; }
#titleBox{ margin-top:auto; width:min(94vw, calc((100vh - 340px) * 1.5), 780px); }   /* sized from the frame: the doors and the daily note must fit under it at 360×500 */
#titleImg{ width:100%; display:block; mix-blend-mode:multiply; }
body[data-paper=night] #titleImg{ mix-blend-mode:normal; border-radius:14px; }
#doors{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:auto; width:min(94vw,420px); }
#doors > .btn, #doors > .btn2{ width:100%; }
#dailyNote{ font-size:14px; margin:0; text-align:center; }
#corner{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:4px; }
/* a short frame on its side (800×450, 640×360, a phone held sideways): the picture and the doors side by side */
@media (min-aspect-ratio: 1/1) and (max-height: 620px){
  #title{ flex-direction:row; align-items:center; justify-content:center; gap:3vw; padding:10px 16px; }
  #titleBox{ margin:0; width:min(54vw, calc((100vh - 24px) * 1.5)); }
  #doors{ margin:0; width:min(40vw,380px); gap:6px; }
  #doors .btn.big{ font-size:19px; padding:9px 16px; }
}

/* the table: the panel and the board */
#table.on{ display:grid; }
#table{ grid-template-columns:clamp(132px,15vw,190px) 1fr; }
#panel{ position:relative; display:flex; flex-direction:column; align-items:stretch; gap:4px; padding:10px 12px; border-right:3px solid var(--rule); overflow:hidden; }
#sun{ width:min(100%,120px); height:auto; align-self:center; }
#stageName{ font:800 20px/1 var(--font); text-transform:uppercase; letter-spacing:.06em; text-align:center; color:var(--red); }
#anteLine{ font:700 18px/1.1 var(--font); text-transform:uppercase; letter-spacing:.06em; text-align:center; padding-bottom:6px; border-bottom:2px solid var(--rule); }
.pair{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.pair b{ font:800 26px/1 var(--font); color:var(--on); letter-spacing:.02em; }
.pair.small b{ font-size:19px; }
#bar{ position:relative; height:16px; border:3px solid var(--ink); border-radius:9px; background:#f3ecd9; overflow:hidden; margin:4px 0 6px; }
#barFill{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--gold); transition:width .3s ease-out; }
#bar.met #barFill{ background:var(--red); }
#barMark{ position:absolute; top:-2px; bottom:-2px; width:3px; margin-left:-1px; background:var(--ink); }
#pauseBtn{ margin-top:auto; align-self:flex-end; }
#board{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; padding:8px 10px 8px; }
#cvBox{ position:relative; flex:1; min-height:0; }
#cv{ position:absolute; inset:0; touch-action:none; display:block; }
#tip{ position:absolute; left:50%; top:42%; transform:translateX(-50%); max-width:min(92%,420px); padding:8px 14px; background:#f3ecd9; border:3px solid var(--ink); border-radius:12px;
  font:700 18px/1.2 var(--font); text-align:center; color:var(--ink); pointer-events:none; }
#dock{ display:flex; align-items:center; gap:10px; padding-top:6px; }
#tiles{ display:flex; gap:6px; flex:1; min-width:0; overflow-x:auto; padding:2px; scrollbar-width:none; }
#tiles::-webkit-scrollbar{ display:none; }
.tile{ flex:0 0 auto; width:54px; height:54px; padding:3px; border-radius:10px; background:#f3ecd9; border:3px solid var(--ink); min-height:0; }
.tile .ico{ width:100%; height:100%; display:block; }
.tile.slip{ background:var(--gold); }
.tile.twist{ border-color:var(--red); background:#f3ecd9; }
.tile.empty{ border:2px dashed var(--dim); background:transparent; }
#hands{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
#bank.glow{ background:var(--red); color:#f3ecd9; }

/* the sheets over the table */
.screen.over{ background:rgba(43,35,32,.5); align-items:center; justify-content:center; padding:12px; z-index:5; }
.sheet{ background:#f3ecd9; color:var(--ink); border:3px solid var(--ink); border-radius:18px; padding:16px 18px; width:min(94vw,520px);
  max-height:calc(100% - 8px); overflow-y:auto; text-align:center; -webkit-overflow-scrolling:touch; }
.sheet.wide{ width:min(96vw,780px); }
.sheet .note{ color:rgba(43,35,32,.7); }
.sheet .btn2{ background:#f3ecd9; }
.sheet .btn2.on{ background:var(--ink); color:#f3ecd9; }
.lines{ list-style:none; padding:0; margin:8px 0; text-align:left; }
.lines li{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed rgba(43,35,32,.3); font-size:18px; }
.lines li b{ font-weight:800; }
#how .lines li{ display:list-item; list-style:none; font-size:17px; }

/* offers: an icon, a name, one line, a price */
.offers{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.offer{ display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:8px; text-align:left; text-transform:none; letter-spacing:0; padding:6px 8px; background:#fbf6e8; }
.offer .ico{ width:52px; height:52px; }
.otext{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.otext b{ font:800 18px/1.05 var(--font); text-transform:uppercase; letter-spacing:.04em; }
.otext small{ font:500 15px/1.15 var(--font); color:rgba(43,35,32,.8); }
.price{ font:800 17px/1 var(--font); padding:4px 7px; border-radius:7px; background:var(--gold); white-space:nowrap; }
.offer.rar-u{ border-color:var(--red); }
.offer.rar-r{ border-color:var(--red); background:#f6e4c4; }
.offer.sell .price{ background:#f3ecd9; border:2px solid var(--ink); }
.slips .offer{ background:#f6e4b0; }
.own{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
#chooser{ margin:8px 0; padding:8px; border:2px dashed var(--red); border-radius:12px; }
#shop .row.center{ margin-top:12px; }

/* the stamp on a deal's end: a rubber stamp in one ink, tilted */
.stamp{ display:inline-block; margin:2px auto 8px; padding:6px 18px; border:5px double; border-radius:10px; font:800 34px/1 var(--font); letter-spacing:.12em; text-transform:uppercase; transform:rotate(-5deg); }
.stamp.gold{ color:var(--gold); border-color:var(--gold); }
.stamp.red{ color:var(--red); border-color:var(--red); }
#result .sheet .stamp{ animation:stampIn .2s ease-out; }
@keyframes stampIn{ from{ transform:rotate(-5deg) scale(1.3); opacity:.3; } to{ transform:rotate(-5deg) scale(1); opacity:1; } }
#endSun{ width:110px; height:110px; }

/* the tip badge: the jar on the left, a × to hide it (Settings brings it back) */
.badgeSlot[hidden]{ display:none; }
.tipBadge{ position:relative; display:inline-flex; }
.tbBuy{ display:flex; align-items:center; gap:6px; padding:4px 12px 4px 4px; background:#f3ecd9; text-transform:none; letter-spacing:0; font:700 15px/1.1 var(--font); }
.tbBuy canvas{ width:44px; height:44px; }
.tbHide{ position:absolute; top:-12px; right:-12px; width:28px; height:28px; min-height:0; padding:0; border-radius:50%; border-width:2.5px; font:800 16px/1 var(--font); background:#f3ecd9; }
@media (pointer:coarse){ .tbHide{ width:40px; height:40px; min-height:40px; top:-18px; right:-20px; border:0; background:transparent; font-size:0; }
  .tbHide::after{ content:"\00d7"; position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border:2.5px solid var(--ink); border-radius:50%; background:#f3ecd9; box-sizing:border-box; font:800 15px/19px var(--font); text-align:center; color:var(--ink); } }
#badgeTitle{ position:absolute; left:14px; bottom:14px; }
#badgePanel{ position:absolute; left:10px; bottom:62px; right:10px; }
#badgePanel .tbBuy{ font-size:13px; padding-right:8px; }
#badgePanel .tbBuy canvas{ width:36px; height:36px; }
@media (max-aspect-ratio: 1/1){ #badgePanel{ display:none; } #badgeTitle{ position:static; } #badgeTitle .tbBuy span{ display:none; } #badgeTitle .tbBuy{ padding:0 4px; } #badgeTitle .tbBuy canvas{ width:36px; height:36px; } }

/* the little table that plays itself (tutorial, rule previews) */
.demo{ display:block; width:100%; max-width:520px; height:auto; aspect-ratio:520/300; margin:6px auto; border:2px dashed rgba(43,35,32,.25); border-radius:12px; background:#f3ecd9 url(art/paper-cream.webp); background-size:256px; }
.caption{ font:600 19px/1.3 var(--font); color:var(--ink); min-height:2.6em; margin:6px 0; }
.dots{ color:var(--red); letter-spacing:.2em; margin:2px 0 8px; }
.kind{ margin:0; font:700 14px/1 var(--font); text-transform:uppercase; letter-spacing:.12em; color:var(--red); }
.link{ border-color:transparent; background:transparent; margin-top:6px; }
#pvCount{ min-width:60px; display:inline-block; text-align:center; align-self:center; }
.offer{ position:relative; }
.why{ position:absolute; top:-10px; right:-10px; width:30px; height:30px; border-radius:50%; background:#f3ecd9; border:2.5px solid var(--ink); display:flex; align-items:center; justify-content:center; font:800 17px/1 var(--font); cursor:pointer; }
@media (pointer:coarse){ .why{ width:36px; height:36px; top:-12px; right:-12px; } }
.glist li{ cursor:pointer; }
#helpBtn{ position:absolute; left:10px; bottom:10px; min-width:44px; }
#pauseBtn{ min-width:44px; }

/* rules list, decks and papers, leaderboard */
.glist{ list-style:none; padding:0; margin:8px 0; text-align:left; }
.glist li{ display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed rgba(43,35,32,.3); }
.glist .ico{ width:48px; height:48px; flex:0 0 auto; }
.glist span{ display:flex; flex-direction:column; }
.glist b{ font:800 18px/1.1 var(--font); text-transform:uppercase; }
.glist small{ font-size:16px; }
.looks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.look{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px; border:3px solid var(--ink); border-radius:12px; background:#fbf6e8; }
.look.on{ border-color:var(--red); }
.look b{ font:800 17px/1 var(--font); text-transform:uppercase; }
.look small{ font-size:14px; color:rgba(43,35,32,.75); }
.look canvas{ width:120px; height:90px; }
.swatch{ width:120px; height:60px; border:2px solid var(--ink); border-radius:8px; background:#f3ecd9 url(art/paper-cream.webp); }
.swatch[data-paper=dusk]{ background:#c7ced8 url(art/paper-dusk.webp); }
.swatch[data-paper=ledger]{ background:#d6dcc4 url(art/paper-ledger.webp); }
.swatch[data-paper=night]{ background:#3a2f2b url(art/paper-night.webp); }
#collectorRow, #tipRow{ margin-top:10px; }
#patron{ display:flex; align-items:center; gap:6px; font:700 15px/1.1 var(--font); color:var(--red); text-transform:uppercase; letter-spacing:.06em; }
#patron[hidden]{ display:none; }
#patronSeal{ width:30px; height:30px; }
#rows{ text-align:left; padding-left:0; list-style:none; }
#rows li{ display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed rgba(43,35,32,.3); font-size:18px; }
#rows li.me{ color:var(--red); font-weight:800; }
#langs .btn2{ text-transform:none; }

#veil{ position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; background:rgba(43,35,32,.45); }
#veil[hidden]{ display:none; }
#toast{ position:fixed; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:30; max-width:min(92vw,560px);
  padding:9px 16px; border:3px solid var(--ink); border-radius:12px; background:#f3ecd9; color:var(--ink); font:600 17px/1.25 var(--font); text-align:center; pointer-events:none; }

/* a phone held upright (and any tall frame): the panel becomes a strip across the top */
@media (max-aspect-ratio: 1/1){
  #table{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
  #panel{ flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 8px; padding:6px 10px; border-right:0; border-bottom:3px solid var(--rule); }
  #sun{ width:44px; height:44px; align-self:center; }
  #stageName{ font-size:16px; text-align:left; }
  #anteLine{ font-size:15px; border:0; padding:0; text-align:left; }
  .pair{ gap:3px; font-size:12px; letter-spacing:.02em; }
  .pair b{ font-size:21px; }
  .pair.small b{ font-size:16px; }
  #bar{ order:9; flex:1 0 100%; height:12px; margin:2px 0; }
  #panel{ padding-right:58px; }
  #pauseBtn{ position:absolute; right:8px; top:6px; margin:0; padding:4px 10px; min-height:40px; }
  #helpBtn{ left:auto; bottom:auto; right:58px; top:6px; padding:4px 12px; min-height:40px; }
  #panel{ padding-right:108px; }
  #panel .pair.run{ display:none; }
  #board{ padding:6px 6px 6px; }
  #dock{ flex-direction:column; align-items:stretch; gap:6px; }
  #hands{ justify-content:center; }
  .tile{ width:44px; height:44px; }
}
@media (max-height:520px) and (min-aspect-ratio: 1/1){
  #sun{ width:64px; }
  #panel{ gap:2px; padding:6px 10px; }
  .pair b{ font-size:21px; }
  .tile{ width:44px; height:44px; }
}

/* store art (&art): the table alone, full-bleed */
body.art #panel, body.art #dock, body.art #tip, body.art #toast{ display:none !important; }
body.art #table.on{ grid-template-columns:1fr; grid-template-rows:1fr; }
body.art #board{ padding:14px; }

/* a short frame held upright (a 360×500 mobile frame, a small phone): one dock row, a tighter strip, so the table keeps
   its height and the cards their size */
@media (max-aspect-ratio: 1/1) and (max-height: 700px){
  #dock{ flex-direction:row; align-items:center; gap:6px; }
  #tiles{ flex:1 1 auto; }
  #hands{ flex:0 0 auto; flex-wrap:nowrap; }
  .tile{ width:40px; height:40px; }
  #sun{ width:34px; height:34px; }
  #stageName{ font-size:14px; } #anteLine{ font-size:13px; }
  .pair b{ font-size:18px; } .pair.small b{ font-size:15px; }
  #panel{ padding-top:4px; padding-bottom:4px; }
  #hands .btn, #hands .btn2{ padding:6px 10px; font-size:15px; }
}

/* a short frame on its side (a phone held sideways, 667×375): the panel has no room for the tip badge or the run line;
   the title keeps the badge. And on any short frame the hint and the toast are smaller, so they hide fewer cards */
@media (max-height: 520px) and (min-aspect-ratio: 1/1){ #badgePanel{ display:none !important; } #panel .pair.run{ display:none; } }
@media (max-height: 700px){
  #tip{ font-size:15px; padding:6px 10px; top:auto; bottom:6px; max-width:min(86%,340px); }
  #toast{ font-size:14px; padding:6px 12px; max-width:min(88vw,420px); }
}

/* the tray's Your rules: the Sell price under the words, never over them (the review, 2026-10-16: «Продать +1» covered
   «Червы приносят вдвое» in Russian at 500 px) */
.offer.sell{ grid-template-columns:52px 1fr; grid-template-rows:auto auto; }
.offer.sell .ico{ grid-row:1 / span 2; }
.offer.sell .price{ grid-column:2; justify-self:start; }
/* a number the panel does not have yet (before the first deal) leaves no empty label */
.pair:has(b:empty){ display:none; }

/* the dock on a short upright frame wraps rather than push Bank or the advert's word off the edge (audit, 2026-10-16: a stuck
   board at 360×500 cut "Reshuffle · Ad" and Bank off the right) */
@media (max-aspect-ratio: 1/1) and (max-height: 700px){
  #dock{ flex-wrap:wrap; }
  #tiles{ flex:1 1 140px; min-width:120px; }
  #hands{ flex:1 1 auto; flex-wrap:wrap; justify-content:flex-end; gap:4px; }
  #hands .btn, #hands .btn2{ padding:5px 8px; font-size:14px; }
}
@media (pointer:coarse){ .why{ width:44px; height:44px; top:-14px; right:-14px; } }

/* the run's first pick, in the dock under a dealt table (never over the cards): a label and three rule tiles with their ? */
.pickLab{ flex:0 0 auto; align-self:center; font:800 15px/1.1 var(--font); text-transform:uppercase; letter-spacing:.06em; color:var(--red); max-width:110px; }
.pickTile{ position:relative; flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:4px 26px 4px 4px; background:#f3ecd9; border-color:var(--red);
  text-transform:none; letter-spacing:0; font:700 15px/1.05 var(--font); text-align:left; max-width:170px; animation:pickUp .35s ease-out both; }
.pickTile:nth-child(3){ animation-delay:.07s; } .pickTile:nth-child(4){ animation-delay:.14s; }
.pickTile .ico{ width:40px; height:40px; flex:0 0 auto; }
.pickTile .why{ top:-10px; right:-8px; }
#dock.picking #tiles{ padding-top:12px; overflow-y:visible; }
@keyframes pickUp{ from{ transform:translateY(24px); opacity:0; } to{ transform:none; opacity:1; } }
@media (max-aspect-ratio: 1/1){ .pickLab{ display:none; } .pickTile{ font-size:13px; max-width:132px; padding-right:22px; } .pickTile .ico{ width:34px; height:34px; } }
@media (max-aspect-ratio: 1/1){
  #dock.picking #hands{ display:none; }
  #dock.picking #tiles{ flex:1 1 100%; gap:6px; overflow-x:visible; }
  #dock.picking .pickTile{ flex:1 1 0; min-width:0; max-width:none; font-size:12px; padding:4px 6px; gap:4px; flex-direction:column; text-align:center; }
  #dock.picking .pickTile .ico{ width:32px; height:32px; }
}
/* every ? keeps a thumb's 44 px but draws a small circle, so it never hides the tile it explains */
@media (pointer:coarse){
  .why{ background:transparent; border:0; font-size:0; }
  .why::after{ content:"?"; position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px; border:2.5px solid var(--ink); border-radius:50%;
    background:#f3ecd9; box-sizing:border-box; font:800 15px/19px var(--font); text-align:center; color:var(--ink); }
}

/* the tutorial and preview pictures give way on a short frame, so Back, Next and Skip stay inside 800×450 (a store review) */
@media (max-height: 620px){ .demo{ width:auto; max-width:100%; height:min(300px, 40vh); } .caption{ min-height:0; font-size:17px; } .sheet h2{ font-size:24px; } }

/* Classic: the deals, numbered, each with its stars */
#lvCont{ width:100%; margin:6px 0; }
#clDiffs{ display:flex; flex-direction:column; gap:8px; margin:10px 0; }
.diff{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; padding:10px 14px; text-align:left; text-transform:none; border-radius:10px; }
.diff b{ font:800 20px/1.1 var(--font); text-transform:uppercase; letter-spacing:.04em; }
.diff span{ font-size:15px; line-height:1.25; }
.diff i{ font-style:normal; font-size:13px; line-height:1.2; color:var(--red); }
.diff.last{ outline:3px solid var(--gold); outline-offset:1px; }
#doors .duo{ display:flex; gap:8px; width:100%; }
#doors .duo button{ flex:1 1 0; min-width:0; white-space:normal; }