/* =====================================================================
   Balatro X TicTacToe

   One screen, no page scroll during play. The layout has three shapes,
   chosen by the viewport rather than by device name:

   1. Stacked (default; phones and iPads held upright)
      ledger on top as a compact grid, Joker rack, then the board, which
      takes whatever height is left, then your pieces.
   2. Sidebar (landscape at 760px and wider; iPad landscape, laptops)
      ledger as a column on the left, rack and board on the right.
   3. Short landscape (phones on their side, height under 540px)
      sidebar layout, but the board and your pieces sit side by side.

   The board is sized with container query units: its box is the largest
   square that fits the space it was given, at any aspect ratio.
   ===================================================================== */
:root{
  color-scheme: dark;
  --felt:#0d2724; --panel:#141d1c; --panel-2:#1d2a29; --panel-3:#263837; --line:#3a5651;
  --ink:#f5efe0; --ink-dim:#a3b5ad; --ink-mute:#71867f;
  --chips:#2f8ff0; --mult:#f0463a; --mult-dk:#a82820; --gold:#f6b92c; --gold-dk:#b07d0e;
  --o:#ff7b3a; --good:#45c67b;
  --card:#f7f2e7; --card-edge:#d7cdb8;
  --common:#2f6f9f; --uncommon:#3a9a5f; --rare:#b4423d; --tool:#7a4bb3; --chalk:#2b8f9a; --voucher:#a8742a;
  --f-ui:'Rubik', 'Trebuchet MS', system-ui, -apple-system, sans-serif;
  --f-num:'Lilita One', 'Rubik', 'Arial Black', sans-serif;
  --f-pixel:'Silkscreen', 'Courier New', monospace;
  --jw:clamp(46px, 6vw, 78px);      /* Joker card width */
  --pw:clamp(50px, 6.2vw, 74px);    /* piece size in your hand */
  --gap:10px;
  --r:10px;
  --safe-l:max(12px, env(safe-area-inset-left, 0px));
  --safe-r:max(12px, env(safe-area-inset-right, 0px));
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%}
body{
  background:var(--felt); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.3;
  height:100vh; height:100dvh; overflow:hidden;
  display:grid; grid-template-rows:auto minmax(0,1fr);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
b{font-weight:600}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;image-rendering:pixelated;pointer-events:none}

/* ---------- site bar ---------- */
.bar{
  display:flex;align-items:center;gap:10px;
  padding:calc(6px + env(safe-area-inset-top, 0px)) var(--safe-r) 6px var(--safe-l);
  background:rgba(8,20,19,.72);border-bottom:1px solid rgba(255,255,255,.07);
  font-size:14px;color:var(--ink-dim);white-space:nowrap;min-width:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.bar a{color:var(--ink);text-decoration:none;font-weight:500}
.bar a:hover{color:var(--gold)}
.bar .crumb{overflow:hidden;text-overflow:ellipsis;min-width:0}
.bar .bar-lang{margin-left:auto;color:var(--ink-dim);font-size:13px}

/* ---------- app grid: stacked by default ---------- */
#app{
  display:grid; gap:var(--gap); min-height:0;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr);
  padding:var(--gap) var(--safe-r) calc(var(--gap) + env(safe-area-inset-bottom, 0px)) var(--safe-l);
  max-width:1320px; width:100%; margin:0 auto;
}
#main{display:contents}
#stage{min-height:0;min-width:0;display:flex;flex-direction:column}

/* ---------- ledger ---------- */
#side{
  display:grid; gap:6px; min-width:0;
  grid-template-columns:repeat(4,minmax(0,1fr));
  background:color-mix(in srgb, var(--panel) 92%, transparent);
  border:2px solid var(--line); border-radius:14px; padding:8px;
  box-shadow:0 6px 0 rgba(0,0,0,.35);
}
.blindTag{order:1} .roundScore{order:2} .moneyBox{order:3} .calc{order:4} .stat.games{order:5} .stat.disc{order:5} .stat.ante,.stat.rnd{order:6} .sideBtns{order:7}
.blindTag{grid-column:span 2;background:var(--bc,var(--panel-3));border-radius:var(--r);padding:6px 8px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);min-width:0}
.blindTag .bname{font-family:var(--f-num);font-size:15px;letter-spacing:.03em;text-shadow:0 2px 0 rgba(0,0,0,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blindTag .bdesc{display:none;font-size:13px;opacity:.92;margin-top:2px;line-height:1.25}
.btarget{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:4px;background:rgba(0,0,0,.28);border-radius:8px;padding:3px 6px}
.btarget span{font-size:12px;color:var(--ink-dim)}
.btarget > span:first-child{display:none}
.btarget b{font-family:var(--f-num);font-weight:400;font-size:18px;color:var(--mult);font-variant-numeric:tabular-nums}
.btarget b.plain{color:var(--ink);font-size:14px}
.btarget .rew{color:var(--gold);font-size:12px;font-weight:700}
.roundScore{grid-column:span 1;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;background:var(--panel-2);border-radius:var(--r);padding:4px 8px;min-width:0}
.roundScore span{font-size:11px;color:var(--ink-dim);white-space:nowrap}
.roundScore b{font-family:var(--f-num);font-weight:400;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.calc{grid-column:1 / -1;background:var(--panel-2);border-radius:var(--r);padding:5px 6px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:8px;align-items:center}
.hname{font-family:var(--f-num);font-size:14px;letter-spacing:.03em;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hname small{color:var(--ink-dim);font-family:var(--f-ui);font-size:11px}
.cm{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:5px}
.chipsBox,.multBox{font-family:var(--f-num);border-radius:8px;padding:2px 7px;font-size:20px;font-variant-numeric:tabular-nums;box-shadow:inset 0 -4px 0 rgba(0,0,0,.25);transition:transform .08s;overflow:hidden;white-space:nowrap;text-overflow:clip}
.chipsBox{background:var(--chips);text-align:right}
.multBox{background:var(--mult);text-align:left}
.cm .x{font-family:var(--f-num);color:var(--mult);font-size:18px}
.bump{transform:scale(1.12)}
.stat{background:var(--panel-2);border-radius:var(--r);padding:3px 4px;text-align:center;min-width:0}
.stat span{display:block;font-size:11px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b{font-family:var(--f-num);font-weight:400;font-size:18px;font-variant-numeric:tabular-nums}
.stat small{font-size:12px;color:var(--ink-dim)}
.stat.games b{color:var(--chips)} .stat.disc b{color:var(--mult)}
.moneyBox{grid-column:span 1;background:var(--panel-2);border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-family:var(--f-num);font-size:24px;color:var(--gold);text-shadow:0 2px 0 var(--gold-dk)}
#side .stat.ante,#side .stat.rnd{display:none} /* ante and round: shown in the roomier layouts */
.sideBtns{grid-column:span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.sideBtns .opt{display:none}
.sideBtns .btn{font-size:12px;padding:6px 2px}

/* ---------- buttons ---------- */
.btn{background:var(--panel-3);border-radius:8px;padding:9px 12px;font-size:14px;font-weight:600;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .06s, filter .1s;min-height:36px}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.red{background:var(--mult)} .btn.gold{background:var(--gold);color:#2a1d00} .btn.green{background:var(--good);color:#06240f}
.btn.big{font-family:var(--f-num);font-weight:400;font-size:18px;letter-spacing:.02em;padding:11px 18px;min-height:44px}
.btn.small{padding:3px 9px;font-size:13px;min-height:28px;vertical-align:middle;margin-left:6px}
@media (hover:hover){ .btn:not(:disabled):hover{filter:brightness(1.15)} }

/* ---------- rack ---------- */
#rack{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gap);min-width:0}
.tray{background:rgba(0,0,0,.28);border:2px dashed rgba(255,255,255,.08);border-radius:12px;padding:6px 8px;display:flex;flex-direction:column;gap:4px;min-width:0}
.tray .lbl{font-size:11px;color:var(--ink-dim);display:flex;justify-content:space-between;gap:8px}
.tray .empty{font-size:12px;color:var(--ink-mute);line-height:1.3;white-space:normal;padding:2px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tray.items{min-width:calc(var(--jw) * 2 + 26px)}
.slots{display:flex;gap:9px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:9px 8px 10px;margin:-7px -6px -4px;min-height:calc(var(--jw) * 1.25 + 19px)}
.slots::-webkit-scrollbar{display:none}
.joker,.cons{width:var(--jw);aspect-ratio:5/6.4;border-radius:8px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;
  box-shadow:var(--sx,0px) var(--sy,4px) 0 rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.12);padding:3px;text-align:center;overflow:hidden}
.joker{background:linear-gradient(160deg, color-mix(in srgb, var(--jc) 78%, #fff 22%), var(--jc) 55%, color-mix(in srgb, var(--jc) 70%, #000 30%))}
.cons{background:var(--cc)}
.joker .gl,.cons .gl{font-family:var(--f-num);font-size:calc(var(--jw) * .4);line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.gl.sm{font-size:calc(var(--jw) * .28) !important}
.joker .nm,.cons .nm{font-size:calc(var(--jw) * .13);line-height:1.05;margin-top:3px;font-weight:600;max-width:100%;overflow:hidden}
.joker .val{position:absolute;bottom:2px;left:0;right:0;font-family:var(--f-num);font-size:11px;color:var(--gold)}
/* Trigger feedback uses the individual scale/rotate properties so it
   stacks with the 3D tilt that cardfx.js drives through transform. */
.jig{animation:jig .32s cubic-bezier(.3,1.5,.5,1)}
@keyframes jig{0%,100%{scale:1}35%{scale:1.16}70%{scale:1.05}}

/* ---------- play area ---------- */
.playArea{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.boardArea{flex:1;min-height:0;width:100%;container-type:size;display:flex;align-items:center;justify-content:center}
.boardWrap{
  position:relative;aspect-ratio:1;padding:clamp(5px,1.4cqmin,10px);
  width:min(80vw, 46vh); width:min(100cqw, 100cqh, 640px);
  background:rgba(0,0,0,.25);border-radius:16px;border:2px solid rgba(255,255,255,.07);
}
.board{display:grid;width:100%;height:100%;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:repeat(var(--n),minmax(0,1fr));container-type:inline-size}
.cell{padding:clamp(2px, 1.2cqw, 6px);position:relative;min-width:0;min-height:0;display:block}
.slot{width:100%;height:100%;border-radius:clamp(6px,2.2cqw,10px);background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;position:relative;transition:background .12s,border-color .12s}
.slot.up{background:rgba(246,185,44,.06)}
.armed .cell.empty .slot{border-color:rgba(246,185,44,.45)}
@media (hover:hover){ .armed .cell.empty:hover .slot{background:rgba(246,185,44,.2);border-color:var(--gold)} }
.armed .cell.empty:active .slot{background:rgba(246,185,44,.28)}
.erasing .cell.o .slot,.tiling .cell .slot{border-color:var(--gold);animation:pulse .8s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 4px rgba(246,185,44,.35)}}
.oMark{width:64%;height:64%;border-radius:50%;border:calc(10cqw / var(--n)) solid var(--o);box-shadow:0 4px 0 #8a3510, inset 0 3px 0 rgba(0,0,0,.25)}
.stone{width:100%;height:100%;border-radius:8px;background:repeating-linear-gradient(45deg,#4f5957 0 8px,#5d6866 8px 16px);box-shadow:inset 0 -5px 0 rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;font-family:var(--f-pixel);font-size:calc(11cqw / var(--n));color:#c9d0cd}
.popIn{animation:popIn .25s cubic-bezier(.3,1.6,.6,1)}
@keyframes popIn{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes bannerIn{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.tiles{position:absolute;left:3px;top:3px;display:flex;gap:2px;z-index:2;pointer-events:none;flex-wrap:wrap;max-width:calc(100% - 6px)}
.tb{font-family:var(--f-num);font-size:11px;line-height:1;padding:2px 3px;border-radius:4px;color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.4)}
.tb.big{font-size:17px;padding:4px 7px}
.tb.hot{background:var(--mult)} .tb.rich{background:var(--chips)} .tb.gild{background:var(--gold);color:#2a1d00} .tb.echo{background:#1f8f8a}
.tb.star{background:linear-gradient(135deg,#ff5a3c,#f6b92c);color:#2a1100} .tb.safe{background:#3c8a5e} .tb.trap{background:#8a2e4a}
.cell.scoring .piece{box-shadow:0 0 0 4px var(--gold),0 6px 0 rgba(0,0,0,.3);transform:translateY(-3px) scale(1.05)}
.cell.held .piece{box-shadow:0 0 0 3px #9fb2bb,0 4px 0 rgba(0,0,0,.3)}
#strikes{position:absolute;inset:clamp(5px,1.4cqmin,10px);width:auto;height:auto;pointer-events:none}
#strikes line{stroke:var(--gold);stroke-width:.08;stroke-linecap:round;opacity:.8}
/* Centred with inset+margin rather than a translate, so the pop-in scale
   animation (which owns transform) can't knock it off centre. */
.banner{position:absolute;inset:0;margin:auto;width:max-content;height:max-content;transform-origin:50% 50%;background:var(--panel);border:3px solid var(--gold);border-radius:12px;padding:10px 16px;font-family:var(--f-num);font-size:clamp(16px,4cqw,22px);letter-spacing:.03em;white-space:nowrap;box-shadow:0 8px 0 rgba(0,0,0,.4);z-index:5;animation:bannerIn .28s cubic-bezier(.2,1.4,.4,1) both;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.banner.bad{border-color:var(--mult);color:#ffd9d4}

/* X pieces: the cell's own width drives their size (container units on .board) */
.piece{width:100%;height:100%;border-radius:clamp(6px,2.2cqw,10px);background:var(--pbg,var(--card));position:relative;box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 0 0 2px var(--card-edge);transition:transform .12s, box-shadow .12s;display:flex;align-items:center;justify-content:center;overflow:hidden}
.piece .xg{font-family:var(--f-pixel);font-weight:700;color:var(--pc);font-size:calc(var(--psz) * .62);line-height:1;transform:translateY(-4%);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.piece .pl{position:absolute;left:0;right:0;bottom:0;font-size:calc(var(--psz) * .12);font-weight:700;color:#fff;background:var(--pc);padding:1px 0;text-align:center;letter-spacing:.03em;white-space:nowrap;overflow:hidden}
.board .piece{--psz:calc(100cqw / var(--n))}
.piece.t-gold{--pbg:linear-gradient(135deg,#fff3c4,#f6d26b 45%,#fff0b8 60%,#e9b93b)}
.piece.t-glass{--pbg:linear-gradient(135deg,rgba(225,242,255,.9),rgba(255,255,255,.55) 45%,rgba(190,225,250,.85))}
.piece.t-steel{--pbg:linear-gradient(135deg,#dfe5e8,#aab5ba 50%,#e8edef)}
.piece.t-bomb{--pbg:#2c2a28} .piece.t-ghost{--pbg:linear-gradient(#efe6fb,#d9c8f2)} .piece.t-lucky{--pbg:linear-gradient(#f7f2e7,#d6f2dc)}
.piece.t-red{--pbg:linear-gradient(#f7f2e7,#fbd9d5)} .piece.t-blue{--pbg:linear-gradient(#f7f2e7,#d7e8fb)} .piece.t-twin{--pbg:linear-gradient(#f7f2e7,#cdeeea)}
.piece.t-sprout{--pbg:linear-gradient(#f7f2e7,#d3efc7)} .piece.t-cursed{--pbg:linear-gradient(#3b1d4a,#1f1030)} .piece.t-cursed .pl{background:#a45cd1}
.piece.t-turncoat{--pbg:linear-gradient(#f7f2e7,#f3d2c2)} .piece.t-hunter{--pbg:linear-gradient(#f7f2e7,#e6d6b5)}
.piece.t-cursed .xg{text-shadow:0 0 calc(var(--psz) * .14) #c07bff}
.piece.t-twin .xg{text-shadow:calc(var(--psz) * .06) calc(var(--psz) * .05) 0 rgba(31,143,138,.45)}
.piece.shattered{opacity:.4;filter:grayscale(1)}

.hint{min-height:18px;font-size:14px;color:var(--ink-dim);text-align:center;max-width:560px;line-height:1.3;padding:0 4px}
.hint b{color:var(--gold)}
.hint.must{display:block !important;color:var(--ink)}
.handMeta{display:flex;justify-content:space-between;gap:10px;width:100%;max-width:560px;font-size:12px;color:var(--ink-dim)}
.handRow{display:flex;align-items:flex-end;justify-content:center;gap:12px;flex-wrap:wrap;width:100%}
#hand{display:flex;justify-content:center;gap:8px;padding-top:12px}
.hp{width:var(--pw);height:var(--pw);--psz:var(--pw);flex:0 0 auto;border-radius:9px;position:relative}
.hp .piece{transition:transform .12s}
/* The hand fans along a shallow arc, like cards held in a hand: each card tips away from the middle and the
   outer ones sit a little lower. --fan is -1, 0, 1... from the centre (set per card in ui.js). The chosen
   card straightens and lifts, with its shadow dropping away to sell the height. */
.hp{rotate:calc(var(--fan,0) * 5deg);translate:0 calc(var(--fan,0) * var(--fan,0) * 2.5px);
  transition:rotate .25s cubic-bezier(.34,1.56,.64,1), translate .25s cubic-bezier(.34,1.56,.64,1)}
.hp.sel{rotate:0deg;translate:0 -14px}
.hp.sel .piece{box-shadow:0 0 0 3px var(--gold),0 12px 0 rgba(0,0,0,.3)}
/* Dealing: cards sweep in from the bottom right (where the bag is), tipped and small, and settle with a little overshoot, one after another. */
.deal{animation:deal .5s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--k,0) * 70ms)}
@keyframes deal{from{translate:140px 110px;rotate:38deg;scale:.55;opacity:0}}

/* ---------- popups ---------- */
.pop{position:fixed;z-index:50;pointer-events:none;font-family:var(--f-num);font-size:19px;letter-spacing:.02em;padding:2px 8px;border-radius:6px;transform:translate(-50%,-50%);animation:floatUp .8s ease-out forwards;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.35)}
.pop.chips{background:var(--chips)} .pop.mult{background:var(--mult)} .pop.xmult{background:var(--mult-dk);border:2px solid var(--mult)} .pop.money{background:var(--gold);color:#2a1d00} .pop.dim{background:#555} .pop.info{background:var(--panel-3)}
/* The label slams in bigger than it ends up, tipped by its own random angle, then settles and drifts away. */
@keyframes floatUp{
  0%{transform:translate(-50%,-30%) scale(.5);rotate:0deg;opacity:0}
  16%{transform:translate(-50%,-70%) scale(1.4);rotate:var(--rot,0deg);opacity:1}
  34%{transform:translate(-50%,-78%) scale(1.08);rotate:calc(var(--rot,0deg) * -.4)}
  100%{transform:translate(-50%,-170%) scale(1);rotate:0deg;opacity:0}
}
/* Screen shake. --sk is a unitless amount set from JS (2 for a nudge, 11 for the full thing),
   so the same keyframes do both. Each swing is smaller than the last and the rotation is
   a fraction of a degree, which is what makes it read as an impact instead of a wobble. */
.shake{animation:shake .38s cubic-bezier(.2,.7,.3,1)}
@keyframes shake{
  0%  {transform:translate(calc(var(--sk,3)*.9px),  calc(var(--sk,3)*-.6px))  rotate(calc(var(--sk,3)*.10deg))}
  20% {transform:translate(calc(var(--sk,3)*-.8px), calc(var(--sk,3)*.5px))   rotate(calc(var(--sk,3)*-.09deg))}
  40% {transform:translate(calc(var(--sk,3)*.55px), calc(var(--sk,3)*.4px))   rotate(calc(var(--sk,3)*.05deg))}
  60% {transform:translate(calc(var(--sk,3)*-.35px),calc(var(--sk,3)*-.25px))}
  80% {transform:translate(calc(var(--sk,3)*.15px), calc(var(--sk,3)*.1px))}
  100%{transform:translate(0,0) rotate(0)}
}

/* ---------- CRT ----------
   Scanlines and a vignette over the whole viewport. It is a plain overlay, so it cannot bend
   the picture the way a real CRT shader does; it only dims it. pointer-events:none keeps every
   click going through to the game. The flicker is opacity only, which the browser runs on the
   GPU, and it stops entirely for anyone who asked for reduced motion. */
html.crt body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:
    radial-gradient(ellipse 125% 125% at 50% 50%, transparent 55%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.2) 0 1px, transparent 1px 3px);
  animation:crtFlicker 7s linear infinite;
}
@keyframes crtFlicker{0%,46%,50%,100%{opacity:1}47%{opacity:.9}48%{opacity:1}49%{opacity:.94}}
@media (prefers-reduced-motion: reduce){
  html.crt body::after{animation:none}
  .shake{animation:none}
}
#toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);background:var(--panel);border:2px solid var(--line);padding:8px 14px;border-radius:10px;font-size:15px;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 32px);text-align:center}
#toast.on{opacity:1}

#insp{position:fixed;z-index:40;width:min(290px, calc(100vw - 24px));background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 10px 0 rgba(0,0,0,.4)}
#insp h4{margin:0;font-family:var(--f-num);font-weight:400;font-size:18px;letter-spacing:.02em}
#insp .tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:5px;margin-top:4px;background:var(--tc,var(--panel-3))}
#insp p{margin:8px 0 10px;font-size:15px;line-height:1.35}
#insp p.why{font-size:13px;color:var(--ink-dim);margin-top:-4px}
#insp .row{display:flex;gap:8px;flex-wrap:wrap}
em{font-style:normal;color:var(--mult);font-weight:700}
i{font-style:normal;color:var(--chips);font-weight:700}
u{text-decoration:none;color:var(--gold);font-weight:700}
.gold{color:var(--gold)} .c{color:var(--chips)} .m{color:var(--mult)} .dim{color:var(--ink-dim);text-align:right} .nowrap{white-space:nowrap}

/* ---------- shop and blind select ---------- */
.scrollPane{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;justify-content:center;align-items:flex-start;padding-bottom:6px}
.panelBox{background:color-mix(in srgb, var(--panel) 94%, transparent);border:2px solid var(--line);border-radius:14px;padding:14px;width:100%;max-width:900px;box-shadow:0 8px 0 rgba(0,0,0,.35)}
.panelBox h2{margin:0 0 10px;font-family:var(--f-num);font-weight:400;font-size:26px;letter-spacing:.03em}
.blinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.bcard{background:var(--panel-2);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;border:2px solid transparent;min-width:0}
.bcard.cur{border-color:var(--gold)}
.bcard.done{opacity:.5}
.bchip{width:52px;height:52px;border-radius:50%;background:var(--bc);margin:0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--f-num);font-size:14px;box-shadow:inset 0 -5px 0 rgba(0,0,0,.3),0 0 0 4px rgba(255,255,255,.1)}
.bcard h3{margin:0;text-align:center;font-family:var(--f-num);font-weight:400;font-size:19px;letter-spacing:.02em}
.bcard .t{text-align:center;font-size:13px;color:var(--ink-dim)}
.bcard .t b{display:block;font-family:var(--f-num);font-weight:400;font-size:24px;color:var(--mult);font-variant-numeric:tabular-nums}
.bcard .eff{font-size:13px;text-align:center;color:#ffd7c9;min-height:34px;line-height:1.3}
.bcard .btn{width:100%}
.shopGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
/* Cards are buttons: the whole card is the target, and tapping it opens a menu of what you can do. */
.sitem{background:var(--panel-2);border:2px solid transparent;color:inherit;font:inherit;cursor:pointer;width:100%;border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0;transition:transform .12s, border-color .12s}
.sitem:disabled{cursor:default}
@media (hover:hover){ .sitem:not(:disabled):hover{border-color:var(--gold);transform:translateY(-3px)} }
.sitem:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.sitem.armed{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 0 0 3px rgba(246,185,44,.35)}
.sitem.sold{opacity:.35}
.sitem .nm2{font-family:var(--f-num);font-size:17px;letter-spacing:.02em}
.sitem .kind{font-size:11px;color:var(--ink-mute)}
.sitem .ds{font-size:13px;color:var(--ink-dim);line-height:1.3;flex:1}
.sitem .btn{width:100%}
.hpv{display:block;position:relative;border-radius:9px;width:var(--jw);height:var(--jw);--psz:var(--jw)}
.price{font-family:var(--f-num);color:var(--gold);font-size:20px}
/* The shop is three labelled shelves: two cards, the ante's voucher, two packs. The panel is a
   container so the shelves stack when the PANEL is narrow, whatever the window width is. */
.panelBox{container-type:inline-size}
.shopCats{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,2fr);gap:12px;align-items:start}
.shopCat{--cat:var(--gold);background:rgba(0,0,0,.16);border:2px solid var(--line);border-top:4px solid var(--cat);border-radius:12px;padding:10px;min-width:0}
.shopCat.cards{--cat:var(--chips)} .shopCat.voucher{--cat:var(--voucher)} .shopCat.packs{--cat:var(--gold)}
.shopCat h3{margin:0;font-family:var(--f-num);font-weight:400;font-size:19px;letter-spacing:.03em;color:var(--cat)}
.shopCat .catHint{margin:2px 0 10px;font-size:12px;line-height:1.35;color:var(--ink-dim);min-height:2.7em}
.shopCat .shopGrid{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
@container (max-width: 640px){
  .shopCats{grid-template-columns:minmax(0,1fr)}
  .shopCat .catHint{min-height:0}
}
/* A pack's cards flip up one after another the first time its scene is drawn, and the cash-out sheet
   totals up line by line. (Both are marked in ui.js so a redraw does not replay them.) */
.sitem.reveal{animation:flipIn .62s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i,0) * 140ms)}
@keyframes flipIn{
  from{transform:perspective(700px) rotateY(95deg) translateY(36px) scale(.8);opacity:0}
  62%{transform:perspective(700px) rotateY(-12deg) translateY(-6px) scale(1.04);opacity:1}
}
.rowsList .rr.tally{animation:rowIn .4s cubic-bezier(.2,.9,.3,1.3) both;animation-delay:calc(var(--i,0) * 170ms + 250ms)}
@keyframes rowIn{from{opacity:0;translate:-26px 0;scale:.96}}

/* ---------- an opened pack ---------- */
.packScene .shopGrid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.packSub{margin:-4px 0 12px;color:var(--ink-dim)}
.packHint{margin:12px 0 0;padding:8px 12px;border-radius:10px;background:rgba(246,185,44,.14);border:1px solid var(--gold);font-size:14px;text-align:center}
.packTargets{margin-top:14px}
.tgtRow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tgt{background:var(--panel-2);border:2px solid transparent;border-radius:10px;padding:8px 8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;color:inherit;font:inherit;cursor:pointer;transition:transform .12s, border-color .12s}
.tgt .tn{font-size:11px;color:var(--ink-mute)}
.tgt:disabled{opacity:.55;cursor:default}
@media (hover:hover){ .tgt:not(:disabled):hover{border-color:var(--gold);transform:translateY(-3px)} }
.tgt:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.shopBar.packBar{justify-content:center}
.shopBar{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;justify-content:space-between;align-items:center}
.shopBar .row{display:flex;gap:10px;flex-wrap:wrap}
.tilePick{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px;background:var(--panel-2);border-radius:12px;padding:12px}
.boardWrap.small{width:min(280px, 70vw)}

/* ---------- overlays ---------- */
#overlay{position:fixed;inset:0;z-index:30;background:rgba(5,14,13,.74);display:flex;align-items:center;justify-content:center;overflow-y:auto;
  padding:max(16px, env(safe-area-inset-top, 0px)) var(--safe-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--safe-l)}
.modal{background:var(--panel);border:3px solid var(--line);border-radius:16px;padding:18px;width:100%;max-width:580px;box-shadow:0 12px 0 rgba(0,0,0,.45);animation:popIn .25s;max-height:100%;overflow:auto;margin:auto}
.modal.wide{max-width:640px}
.modal h2{margin:0 0 10px;font-family:var(--f-num);font-weight:400;font-size:28px;letter-spacing:.02em;text-wrap:balance}
.modal h2.bad{color:var(--mult)} .modal h2.good{color:var(--gold)}
.modal p{line-height:1.45;color:var(--ink-dim);margin:6px 0}
.modal p b{color:var(--ink)}
.rowsList{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.rr{display:flex;justify-content:space-between;gap:10px;background:var(--panel-2);border-radius:8px;padding:8px 10px}
.rr b{font-family:var(--f-num);font-weight:400;color:var(--gold)}
.rr b.plain{font-family:var(--f-ui);font-weight:500;color:var(--ink);text-align:right}
.btnRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
table.lv{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:15px}
table.lv td,table.lv th{padding:6px;text-align:left;border-bottom:1px solid var(--panel-3)}
table.lv th{font-weight:500;color:var(--ink-dim);font-size:13px}
.tblWrap{overflow-x:auto}
.title{font-family:var(--f-pixel);font-weight:700;font-size:clamp(28px, 7.5vw, 56px);line-height:1.05;text-align:center;margin:4px 0 6px;letter-spacing:.02em}
.title span{display:inline-block;animation:bob 2.4s ease-in-out infinite}
.title span:nth-child(2){animation-delay:.2s;color:var(--mult)}
.title span:nth-child(3){animation-delay:.4s}
@keyframes bob{50%{transform:translateY(-6px) rotate(-2deg)}}
.subtitle{text-align:center;color:var(--ink-dim);margin:0 0 12px}
.howto{display:grid;gap:8px;margin:12px 0;font-size:15px;line-height:1.4}
.howto div{background:var(--panel-2);border-radius:8px;padding:9px 11px}
.howto b{color:var(--gold)}
.bagGrid{display:flex;flex-wrap:wrap;gap:8px}
.bagGrid .hpv{width:48px;height:48px;--psz:48px}

/* =====================================================================
   Layout 1, refinements for small phones held upright
   ===================================================================== */
@media (max-width: 380px){
  :root{--gap:7px}
  .blinds{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 640px){
  :root{--jw:42px}
  .tray .lbl{font-size:10px}
  .blinds{grid-template-columns:minmax(0,1fr)}
  .bcard{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"chip name" "chip t" "eff eff" "b b";column-gap:12px;row-gap:6px}
  .bcard .bchip{grid-area:chip;margin:0}
  .bcard h3{grid-area:name;text-align:left;align-self:end}
  .bcard .t{grid-area:t;text-align:left}
  .bcard .t b{display:inline;margin:0 6px}
  .bcard .eff{grid-area:eff;text-align:left;min-height:0}
  .bcard .btn{grid-column:1 / -1}
  .shopGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .panelBox{padding:10px}
}
@media (max-height: 700px) and (orientation: portrait){
  .hint{display:none}
}
/* iPad and other tall portrait screens: room for a fuller ledger */
@media (min-width: 640px) and (orientation: portrait){
  #side{grid-template-columns:repeat(8,minmax(0,1fr));padding:10px;gap:8px}
  .blindTag{grid-column:span 3} .roundScore{grid-column:span 2} .moneyBox{grid-column:span 1;font-size:26px}
  .calc{grid-column:span 2;display:block}
  .calc .hname{text-align:center;margin-bottom:4px}
  #side .stat.ante,#side .stat.rnd{display:block}
  .sideBtns{grid-column:span 4;grid-template-columns:repeat(4,minmax(0,1fr))}
  .sideBtns .opt{display:block}
  .roundScore b{font-size:26px}
  .btarget > span:first-child{display:inline}
  .blindTag .bname{font-size:17px}
  :root{--jw:clamp(56px, 8vw, 78px);--pw:clamp(60px, 8.5vw, 80px)}
  .hint{font-size:15px}
}

/* =====================================================================
   Layout 2, sidebar: landscape and wide enough
   ===================================================================== */
@media (orientation: landscape) and (min-width: 760px){
  #app{grid-template-columns:clamp(210px, 21vw, 280px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:16px}
  #side{grid-row:1 / 3;grid-column:1;align-self:start;max-height:100%;overflow-y:auto;scrollbar-width:none;
    display:flex;flex-direction:column;gap:9px;padding:12px}
  #side::-webkit-scrollbar{display:none}
  #rack{grid-column:2;grid-row:1}
  #stage{grid-column:2;grid-row:2}
  .blindTag{padding:10px 12px}
  .blindTag .bname{font-size:20px}
  .blindTag .bdesc{display:block}
  .btarget{margin-top:8px;padding:6px 8px}
  .btarget > span:first-child{display:inline}
  .btarget b{font-size:24px}
  .roundScore{flex-direction:row;justify-content:space-between;align-items:center;padding:8px 10px}
  .roundScore span{font-size:13px}
  .roundScore b{font-size:28px}
  .calc{display:block;padding:8px}
  .hname{text-align:center;font-size:16px;min-height:20px}
  .cm{margin-top:6px}
  .chipsBox,.multBox{font-size:26px;padding:5px 8px}
  #side .stat,#side .stat.ante,#side .stat.rnd{display:block}
  #side .stat b{font-size:24px}
  #side .stat span{font-size:12px}
  .moneyBox{font-size:32px;padding:4px}
  .sideBtns{grid-template-columns:1fr 1fr;gap:6px}
  .sideBtns .btn{font-size:13px;padding:8px 6px}
  /* pair the four stats into two rows */
  #side{display:grid;grid-template-columns:1fr 1fr;align-content:start}
  #side > *{order:0}
  .sideBtns .opt{display:block}
  .blindTag,.roundScore,.calc,.moneyBox,.sideBtns{grid-column:1 / -1}
  .hint{font-size:15px}
  :root{--jw:clamp(56px, 6vw, 80px);--pw:clamp(56px, 6vw, 76px)}
}

/* =====================================================================
   Layout 3, short landscape: phones on their side
   ===================================================================== */
@media (orientation: landscape) and (max-height: 540px){
  :root{--gap:7px;--jw:clamp(38px, 5vw, 50px);--pw:clamp(42px, 9vh, 54px)}
  .bar{padding-top:calc(3px + env(safe-area-inset-top, 0px));padding-bottom:3px;font-size:13px}
  #app{grid-template-columns:clamp(170px, 24vw, 230px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:10px}
  #side{grid-row:1 / 3;align-self:stretch;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;align-content:start;gap:5px;padding:7px}
  #rack{grid-column:2;grid-row:1}
  #stage{grid-column:2;grid-row:2}
  .blindTag,.roundScore,.calc,.moneyBox,.sideBtns{grid-column:1 / -1}
  .blindTag .bdesc{display:none}
  .blindTag .bname{font-size:14px}
  .btarget b{font-size:17px}
  .roundScore{flex-direction:row;justify-content:space-between;align-items:center}
  .roundScore b{font-size:20px}
  .calc{display:block;padding:5px}
  .hname{text-align:center;font-size:13px}
  .chipsBox,.multBox{font-size:18px;padding:2px 6px}
  #side .stat,#side .stat.ante,#side .stat.rnd{display:block}
  .stat b{font-size:16px}
  .moneyBox{font-size:20px}
  .sideBtns{grid-template-columns:1fr 1fr}
  #side > *{order:0}
  .sideBtns .opt{display:block}
  .sideBtns .btn{font-size:11px;padding:4px;min-height:28px}
  .tray{padding:4px 6px}
  .tray .lbl{display:none}
  .tray .empty{font-size:12px}
  .slots{min-height:calc(var(--jw) * 1.28 + 4px);padding-bottom:2px}
  .joker .nm,.cons .nm{display:none}
  .playArea{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
  .boardArea{grid-row:1 / 3;height:100%}
  .hint,.handMeta{display:none}
  .handRow{grid-column:2;grid-row:1 / 3;flex-direction:column;align-items:center;justify-content:center;width:auto}
  #hand{flex-direction:column;padding-top:0;padding-left:12px}
  .hp{rotate:0deg;translate:0 0}   /* the hand is a column here, so no fan */
  .hp.sel{translate:-8px 0}
  .btn.big{font-size:16px;padding:8px 14px;min-height:38px}
  .panelBox h2{font-size:20px}
  .shopGrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* =====================================================================
   Card feel (driven by js/cardfx.js)

   --rx/--ry   current tilt in degrees (idle sway + lean toward pointer)
   --gx/--gy   where the light hits, sliding opposite the lean
   --sheen     0..1 position the edition patterns slide along
   --sx/--sy   shadow offset that moves with the tilt
   ===================================================================== */
[data-tilt]{
  transform:perspective(440px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:scale .2s cubic-bezier(.34,1.56,.64,1), translate .2s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
[data-tilt].is-hover{scale:1.09;translate:0 -3px;z-index:3}
.hp[data-tilt].is-hover{scale:1.08}
.hp.sel[data-tilt].is-hover{translate:0 -18px}
/* glare spot plus a soft diagonal band, both following the light */
[data-tilt]::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle at var(--gx,50%) var(--gy,35%), rgba(255,255,255,.42), rgba(255,255,255,.1) 32%, rgba(255,255,255,0) 58%),
    linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 58%);
  background-size:100% 100%, 260% 260%;
  background-position:0 0, calc(var(--sheen,.5) * 100%) 50%;
  mix-blend-mode:soft-light;
}
.punch{animation:punch .38s cubic-bezier(.3,1.4,.5,1)}
@keyframes punch{0%,100%{rotate:0deg}22%{rotate:-6deg}48%{rotate:4deg}74%{rotate:-1.5deg}}

/* Pieces on the board stay still but keep a printed gloss. */
.board .piece::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg, rgba(255,255,255,.35), rgba(255,255,255,0) 42%);mix-blend-mode:soft-light}

/* ---------- editions ---------- */
.ed-foil::before,.ed-holo::before,.ed-poly::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background-size:300% 300%;background-position:calc(var(--sheen,.5) * 100%) calc(100% - var(--sheen,.5) * 100%);
}
/* Foil: cold silver-blue bands that sweep as the card turns. */
.ed-foil{filter:saturate(.75) brightness(1.06)}
.ed-foil::before{
  background-image:repeating-linear-gradient(118deg,
    rgba(150,200,255,0) 0%, rgba(170,215,255,.75) 6%, rgba(255,255,255,.9) 8%, rgba(120,170,255,.5) 11%, rgba(150,200,255,0) 17%);
  mix-blend-mode:color-dodge;opacity:.6;
}
/* Holographic: a rainbow sheet with a fine printed grain. */
.ed-holo::before{
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, rgba(255,255,255,0) 1px 3px),
    repeating-linear-gradient(125deg, #ff5f8a 0%, #ffc95c 9%, #8dff8a 18%, #5ce8ff 27%, #7d7bff 36%, #f067ff 45%, #ff5f8a 54%);
  background-size:100% 100%, 300% 300%;
  mix-blend-mode:overlay;opacity:.8;
}
.ed-holo{filter:saturate(1.3) contrast(1.05)}
/* Polychrome: the whole card shifts hue as it tilts. */
.ed-poly{filter:hue-rotate(calc(var(--sheen,.5) * 300deg)) saturate(1.5) brightness(1.05)}
.ed-poly::before{
  background-image:repeating-linear-gradient(135deg, rgba(255,80,160,.55) 0%, rgba(255,220,80,.55) 12%, rgba(80,255,200,.55) 24%, rgba(90,140,255,.55) 36%, rgba(255,80,160,.55) 48%);
  mix-blend-mode:overlay;opacity:.7;
}
.edline{display:block;margin-top:5px;font-weight:700}
.edline.ed-foil{color:#9fd0ff;filter:none} .edline.ed-holo{color:#ff9bd2} .edline.ed-poly{filter:none;background:linear-gradient(90deg,#ff6fae,#ffd36b,#6dffc8,#7da2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.edline::before{display:none}
.ed-tag{background:linear-gradient(90deg,#5aa0e8,#b06ae8) !important}
.ed-tag::before{display:none}
@media (prefers-reduced-motion: reduce){ [data-tilt]{transform:none} }

/* ---------- Ollie, the tutorial ----------
   A small round character in a corner, with a speech bubble. He never blocks play: the bubble is
   click-through (only his face and "Skip tips" take clicks), coach.js parks him in the emptiest
   corner, and the thing he is talking about gets a soft outline. */
.titleOllie{display:flex;align-items:center;gap:12px;margin:14px 0;text-align:left}
.titleOllie .tOllie{flex:none;width:54px;height:54px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.4))}
.titleOllie .tOllie svg{display:block;width:100%;height:100%}
.titleOllie p{margin:0;font-size:15px;line-height:1.45;color:var(--ink-dim)}

#coach{position:fixed;z-index:55;display:flex;align-items:flex-end;gap:10px;pointer-events:none;max-width:calc(100vw - 24px)}
#coach[hidden]{display:none}
#coach[data-corner="bl"]{left:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
#coach[data-corner="br"]{right:12px;bottom:calc(12px + env(safe-area-inset-bottom, 0px));flex-direction:row-reverse}
#coach[data-corner="tl"]{left:12px;top:62px;align-items:flex-start}
#coach[data-corner="tr"]{right:12px;top:62px;flex-direction:row-reverse;align-items:flex-start}
#coach .cAvatar{pointer-events:auto;flex:none;width:58px;height:58px;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.4));animation:ollieBob 3.2s ease-in-out infinite, ollieIn .35s cubic-bezier(.2,1.2,.3,1)}
#coach .cAvatar svg{display:block;width:100%;height:100%}
#coach .cAvatar:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:50%}
#coach .cBubble{position:relative;width:min(300px, calc(100vw - 110px));padding:8px 12px 6px;background:var(--panel);
  border:2px solid var(--o);border-radius:14px;box-shadow:0 6px 0 rgba(0,0,0,.4);animation:ollieIn .3s ease-out}
/* the little tail, pointing at Ollie */
#coach .cBubble::before{content:'';position:absolute;bottom:14px;width:10px;height:10px;background:var(--panel);transform:rotate(45deg)}
#coach[data-corner="bl"] .cBubble::before,#coach[data-corner="tl"] .cBubble::before{left:-7px;border-left:2px solid var(--o);border-bottom:2px solid var(--o)}
#coach[data-corner="br"] .cBubble::before,#coach[data-corner="tr"] .cBubble::before{right:-7px;border-right:2px solid var(--o);border-top:2px solid var(--o)}
#coach .cWho{font-family:var(--f-num);font-weight:400;font-size:13px;letter-spacing:.04em;color:var(--o)}
#coach .cText{margin:2px 0 0;font-size:14px;line-height:1.4}
#coach .cText b{color:var(--gold);font-weight:600}
#coach .cFoot{margin-top:2px;text-align:right;line-height:1}
#coach .cSkip{pointer-events:auto;padding:3px 2px;border:0;background:none;font:inherit;font-size:11.5px;color:var(--ink-dim);text-decoration:underline;cursor:pointer}
#coach .cSkip:hover{color:var(--ink)}
@keyframes ollieBob{50%{transform:translateY(-3px)}}
@keyframes ollieIn{from{opacity:0;scale:.7}}
.coach-hl{outline:2px solid var(--o);outline-offset:3px;border-radius:12px;animation:coachPulse 2.2s ease-in-out infinite}
@keyframes coachPulse{50%{outline-color:rgba(255,123,58,.35);outline-offset:6px}}
/* On a phone there is no empty corner, so he gets smaller: a narrower bubble, smaller type. */
@media (max-width: 480px){
  #coach{gap:7px}
  #coach .cAvatar{width:44px;height:44px}
  #coach .cBubble{width:min(236px, calc(100vw - 82px));padding:6px 10px 4px}
  #coach .cWho{font-size:12px}
  #coach .cText{font-size:12.5px;line-height:1.35}
  #coach .cSkip{font-size:11px}
}
@media (prefers-reduced-motion: reduce){ #coach .cAvatar,#coach .cBubble{animation:none} .coach-hl{animation:none} }

/* ---------- hover tooltip ---------- */
#tip{position:fixed;z-index:45;pointer-events:none;width:max-content;max-width:min(260px, calc(100vw - 20px));
  background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:8px 10px;box-shadow:0 8px 0 rgba(0,0,0,.4);
  font-size:14px;line-height:1.35;animation:tipIn .14s ease-out}
#tip b{display:block;font-family:var(--f-num);font-weight:400;font-size:16px;letter-spacing:.02em;margin-bottom:3px}
#tip span{display:block}
@keyframes tipIn{from{opacity:0;translate:0 4px}}

/* ---------- instruction bar floating over the board ---------- */
.modeBar{position:absolute;left:50%;top:8px;translate:-50% 0;z-index:6;width:max-content;max-width:92%;
  background:var(--panel);border:2px solid var(--gold);border-radius:10px;padding:6px 10px;font-size:14px;box-shadow:0 6px 0 rgba(0,0,0,.4)}
.modeBar b{color:var(--gold)}

/* ---------- booster packs ---------- */
.packArt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:calc(var(--jw) * 1.15);aspect-ratio:5/6.4;border-radius:10px;overflow:hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, rgba(255,255,255,0) 6px 12px),
    linear-gradient(160deg, color-mix(in srgb, var(--pk) 70%, #fff 30%), var(--pk) 55%, color-mix(in srgb, var(--pk) 65%, #000 35%));
  box-shadow:var(--sx,0px) var(--sy,4px) 0 rgba(0,0,0,.4), inset 0 0 0 3px rgba(255,255,255,.18)}
.packArt::before{content:'';position:absolute;left:0;right:0;top:0;height:14%;background:repeating-linear-gradient(90deg, rgba(0,0,0,.25) 0 4px, rgba(0,0,0,0) 4px 8px)}
.packArt .gl{font-family:var(--f-num);font-size:calc(var(--jw) * .45);line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.packArt .pkName{font-size:calc(var(--jw) * .12);font-weight:700;text-transform:uppercase;letter-spacing:.06em;text-align:center;padding:0 4px}
.packModal{max-width:760px}
.packModal .shopGrid{margin-top:10px}
.panelBox h3.sub{margin:16px 0 8px;font-family:var(--f-num);font-weight:400;font-size:19px;letter-spacing:.02em;color:var(--ink-dim)}

/* =====================================================================
   FINISH
   Heavier, more saturated and more physical: chunky outlines with a hard
   shadow underneath, glossy cards, a vivid painted backdrop that changes
   colour with the blind. Every rule here only restyles; nothing moves a
   control or changes what it does.
   ===================================================================== */
:root{
  --panel:#1d2c31; --panel-2:#2c3f46; --panel-3:#3f5861; --line:#86a0a8; --edge:#081012;
  --card-edge:#cbbf9f;
}
body{background:#0a2420}
.bar{background:rgba(6,16,18,.8)}
#side,.tray,.boardWrap,.shopCat,.bcard{
  border-width:3px;
  box-shadow:0 0 0 2px var(--edge), 0 7px 0 2px var(--edge), inset 0 3px 0 rgba(255,255,255,.1);
}
#side{background:linear-gradient(180deg,#24373d,#1b2a2f);border-color:var(--line)}
.tray{background:rgba(5,13,15,.62);border:3px solid rgba(255,255,255,.16);box-shadow:0 0 0 2px var(--edge), inset 0 5px 14px rgba(0,0,0,.45)}
.boardWrap{background:radial-gradient(circle at 50% 40%,rgba(18,40,44,.62),rgba(6,16,18,.78));border-color:var(--line)}
.slot{background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.14);box-shadow:inset 0 5px 0 rgba(0,0,0,.38), inset 0 -2px 0 rgba(255,255,255,.05)}
.stat,.roundScore,.calc,.moneyBox{box-shadow:inset 0 3px 0 rgba(0,0,0,.28), 0 2px 0 rgba(255,255,255,.07)}
.blindTag{box-shadow:inset 0 -5px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.22), 0 0 0 2px var(--edge)}
.blindTag .bname{text-shadow:0 3px 0 rgba(0,0,0,.45)}
.chipsBox,.multBox{text-shadow:0 2px 0 rgba(0,0,0,.35);box-shadow:inset 0 -5px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.28), 0 0 0 2px var(--edge)}
.moneyBox{text-shadow:0 3px 0 var(--gold-dk), 0 0 18px rgba(246,185,44,.35)}

.btn{box-shadow:0 5px 0 rgba(0,0,0,.5), 0 0 0 2px var(--edge), inset 0 3px 0 rgba(255,255,255,.22);border-radius:10px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.5), 0 0 0 2px var(--edge), inset 0 2px 0 rgba(255,255,255,.18)}
.btn.gold{background:linear-gradient(#ffd25a,#f6b92c)} .btn.red{background:linear-gradient(#ff6a5c,#e0392e)}
.btn.big{text-shadow:0 2px 0 rgba(0,0,0,.25)}

/* cards: a lighter face, a thicker edge, a glossy corner and a heavier drop shadow */
.piece{box-shadow:0 6px 0 rgba(0,0,0,.42), 0 0 0 2px var(--edge), inset 0 0 0 3px var(--card-edge)}
.piece::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(125deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 30%,rgba(255,255,255,0) 46%)}
.hp{filter:drop-shadow(0 8px 0 rgba(0,0,0,.28))}
.joker,.cons{box-shadow:var(--sx,0px) var(--sy,5px) 0 rgba(0,0,0,.5), 0 0 0 2px var(--edge), inset 0 0 0 3px rgba(255,255,255,.22), inset 0 -6px 0 rgba(0,0,0,.14)}
.joker .gl,.cons .gl{text-shadow:0 4px 0 rgba(0,0,0,.38), 0 0 14px rgba(255,255,255,.25)}

/* blind and shop cards */
.bcard{background:linear-gradient(180deg,var(--panel-3),var(--panel-2));border-color:rgba(255,255,255,.18)}
.bcard.cur{border-color:var(--gold);box-shadow:0 0 0 2px var(--edge), 0 7px 0 2px var(--edge), 0 0 26px rgba(246,185,44,.35), inset 0 3px 0 rgba(255,255,255,.14)}
.bchip{box-shadow:inset 0 -6px 0 rgba(0,0,0,.32), inset 0 3px 0 rgba(255,255,255,.35), 0 0 0 4px var(--edge), 0 0 0 7px rgba(255,255,255,.14)}
.sitem{background:linear-gradient(180deg,var(--panel-3),var(--panel-2));border:3px solid rgba(255,255,255,.14);box-shadow:0 0 0 2px var(--edge), 0 6px 0 2px var(--edge), inset 0 3px 0 rgba(255,255,255,.12)}
.sitem .price{text-shadow:0 2px 0 rgba(0,0,0,.4)}

.tb{box-shadow:0 2px 0 rgba(0,0,0,.5), 0 0 0 1.5px var(--edge)}
.banner{background:linear-gradient(#26373d,#1a272b);box-shadow:0 0 0 3px var(--edge), 0 10px 0 3px var(--edge), 0 0 40px rgba(246,185,44,.25)}

/* motion: screens arrive with a bounce, blind cards rise one after another, the live blind's coin bobs */
@keyframes phaseIn{from{translate:0 34px;scale:.965;opacity:0}60%{opacity:1}}
@keyframes cardRise{from{translate:0 46px;scale:.9;opacity:0}}
@keyframes coinBob{50%{translate:0 -6px;rotate:-4deg}}
@media (prefers-reduced-motion:no-preference){
  .phaseIn{animation:phaseIn .55s cubic-bezier(.2,1.35,.4,1) both}
  .entering .blinds .bcard{animation:cardRise .6s cubic-bezier(.2,1.4,.4,1) both}
  .entering .blinds .bcard:nth-child(2){animation-delay:.1s} .entering .blinds .bcard:nth-child(3){animation-delay:.2s}
  .bcard.cur .bchip{animation:coinBob 1.8s ease-in-out infinite}
  .entering .shopCat .sitem:not(.reveal){animation:cardRise .5s cubic-bezier(.2,1.4,.4,1) both}
  .entering .shopGrid .sitem:nth-child(2){animation-delay:.07s} .entering .shopGrid .sitem:nth-child(3){animation-delay:.14s}
}

/* counters that run hot: the bigger the number, the more it glows and shakes */
@keyframes fireJitter{0%,100%{translate:0 0}25%{translate:-1px 1px}50%{translate:1px -1px}75%{translate:1px 1px}}
.chipsBox[data-tier="1"]{box-shadow:inset 0 -5px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 2px var(--edge), 0 0 14px rgba(90,168,255,.55)}
.multBox[data-tier="1"]{box-shadow:inset 0 -5px 0 rgba(0,0,0,.28), inset 0 3px 0 rgba(255,255,255,.3), 0 0 0 2px var(--edge), 0 0 14px rgba(255,106,74,.6)}
.chipsBox[data-tier="2"]{background:linear-gradient(#5aa8ff,#2f8ff0);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25), 0 0 0 2px var(--edge), 0 0 22px rgba(120,190,255,.9)}
.multBox[data-tier="2"]{background:linear-gradient(#ff8a5c,#f0463a);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25), 0 0 0 2px var(--edge), 0 0 22px rgba(255,130,80,.95)}
.chipsBox[data-tier="3"],.multBox[data-tier="3"]{box-shadow:inset 0 -5px 0 rgba(0,0,0,.2), 0 0 0 2px #fff3c4, 0 0 30px rgba(255,208,90,1), 0 0 60px rgba(255,140,60,.7)}
.multBox[data-tier="3"]{background:linear-gradient(#ffb04a,#f0463a)}
@media (prefers-reduced-motion:no-preference){
  .chipsBox[data-tier="2"],.multBox[data-tier="2"]{animation:fireJitter .22s steps(2) infinite}
  .chipsBox[data-tier="3"],.multBox[data-tier="3"]{animation:fireJitter .12s steps(2) infinite}
}

/* small fixes from the playtest list */
#insp{z-index:58}                                   /* a card's menu sits above Ollie's bubble */
.packBar{position:sticky;bottom:0;padding:8px 0 2px;background:linear-gradient(transparent,var(--panel) 40%);z-index:4}   /* Skip stays reachable on a short phone */
.modal .btnRow{justify-content:center}
.piece.t-mirror{--pbg:linear-gradient(135deg,#fbeaf3,#e6b5cf 50%,#fbeaf3)}

/* a faint X shows where the selected piece would go */
@media (hover:hover){
  .armed .cell.empty:hover .slot::after{content:'X';font-family:var(--f-pixel);font-weight:700;color:var(--selpc);opacity:.38;font-size:calc(100cqw / var(--n) * .5);line-height:1}
}
/* shop cards idle on the shelf */
@keyframes shelfBob{50%{translate:0 -4px}}
@media (prefers-reduced-motion:no-preference){
  .shopGrid .sitem:not(.sold) > :first-child{animation:shelfBob 3.2s ease-in-out infinite}
  .shopGrid .sitem:nth-child(2) > :first-child{animation-delay:-1.1s} .shopGrid .sitem:nth-child(3) > :first-child{animation-delay:-2.1s}
}

/* ---- popups: bigger, outlined, easier to read in the middle of a chain ---- */
.pop{font-size:27px;padding:3px 13px;border-radius:9px;box-shadow:0 4px 0 rgba(0,0,0,.45), 0 0 0 3px var(--edge);text-shadow:0 2px 0 rgba(0,0,0,.35)}
.pop.xmult{font-size:34px;padding:4px 16px;background:linear-gradient(#ff7a4a,#d3312a);border:0;box-shadow:0 5px 0 rgba(0,0,0,.5), 0 0 0 3px #fff3c4, 0 0 24px rgba(255,150,70,.9)}
.pop.chips{background:linear-gradient(#5aa8ff,#2f8ff0)} .pop.mult{background:linear-gradient(#ff7c6e,#e0392e)} .pop.money{background:linear-gradient(#ffd96a,#f6b92c)}

/* ---- title screen: a splash, not a dialog ---- */
#overlay:has(.splash){background:radial-gradient(ellipse at 50% 40%, rgba(10,40,36,.93), rgba(2,8,8,.97));overflow:hidden}
.modal.splash{background:transparent;border:0;box-shadow:none;max-width:720px;text-align:center;position:relative;z-index:1;overflow:visible}
.splash .title{font-size:clamp(34px,8.5vw,76px);margin:0 0 10px;-webkit-text-stroke:4px var(--edge);paint-order:stroke fill;text-shadow:0 7px 0 var(--edge), 0 0 40px rgba(246,185,44,.28)}
.splash .title span{color:#fff7e0;display:inline-block}
.splash .title span.x{color:#ff5a3c}
.splash .subtitle{font-size:18px;color:#e7efe9;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.splash .btnRow{justify-content:center;margin-top:22px}
.splash .btn.big{font-size:24px;padding:14px 34px;min-height:56px}
.splash .titleOllie,.splash .howto{background:rgba(6,16,18,.6);border:3px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 14px;text-align:left}
.floaters{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.flo{position:absolute;bottom:-12vh;width:var(--s);height:var(--s);display:flex;align-items:center;justify-content:center;opacity:.9}
.flo.x{background:linear-gradient(135deg,#fffaf0,#e7dcc2);border-radius:20%;color:#1c2427;font-family:var(--f-pixel);font-weight:700;font-size:calc(var(--s) * .62);box-shadow:0 5px 0 rgba(0,0,0,.4), 0 0 0 2px var(--edge)}
.flo.o{border:calc(var(--s) * .2) solid var(--o);border-radius:50%;box-shadow:0 4px 0 #8a3510}
@keyframes drift{from{translate:0 0;rotate:var(--r)}to{translate:0 -125vh;rotate:calc(var(--r) * -2)}}
@media (prefers-reduced-motion:no-preference){ .flo{animation:drift var(--d) linear var(--dl) infinite} }
@media (prefers-reduced-motion:reduce){ .flo{bottom:auto;top:calc(var(--s) * 2)} }

/* ---- blind cards: the colour of the blind runs through the whole card ---- */
.bcard{background:linear-gradient(180deg,color-mix(in srgb,var(--bc,#3f5861) 46%,var(--panel-3)),var(--panel-2) 62%)}
.bchip{width:64px;height:64px;font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.bcard h3{text-shadow:0 3px 0 rgba(0,0,0,.4)}
.bcard.cur{translate:0 -6px;scale:1.02}
.bcard:not(.cur):not(.done){filter:saturate(.8) brightness(.92)}
.bcard.done .bchip::after{content:'\2713';position:absolute;font-size:34px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.bcard.done .bchip{position:relative;filter:brightness(.7)}

/* ---- packs: tall cards, a little fan, a lift on hover ---- */
.packScene{--jw:clamp(92px,9.5vw,128px)}
.packScene .shopGrid{gap:18px;padding:14px 4px 6px}
.packScene .sitem{padding:18px 12px 14px;background:radial-gradient(ellipse at 50% 20%,color-mix(in srgb,var(--panel-3) 70%,#fff 8%),var(--panel-2))}
.packScene .sitem .joker,.packScene .sitem .cons,.packScene .sitem .hpv{--jw:clamp(92px,9.5vw,128px);width:var(--jw)}
.packScene .sitem .hpv{height:var(--jw);--psz:var(--jw)}
.packScene .sitem .nm2{font-size:20px}
.packScene .sitem .ds{font-size:14px}
@media (hover:hover){ .packScene .sitem:not(:disabled):hover{translate:0 -10px;rotate:0deg} }
@media (min-width:700px){ .packScene .shopGrid .sitem:nth-child(odd):not(:hover){rotate:-1.2deg} .packScene .shopGrid .sitem:nth-child(even):not(:hover){rotate:1.2deg} }

/* squares worth a glance */
@keyframes dangerPulse{50%{box-shadow:inset 0 5px 0 rgba(0,0,0,.38), 0 0 0 3px rgba(255,90,74,.7), 0 0 18px rgba(255,90,74,.75)}}
.cell.danger .slot{border:3px solid #ff5a4a;background:rgba(255,90,74,.3);box-shadow:inset 0 5px 0 rgba(0,0,0,.25), 0 0 14px rgba(255,90,74,.6)}
.cell.chance .slot{border:3px solid rgba(246,185,44,.9);background:rgba(246,185,44,.17)}
@media (prefers-reduced-motion:no-preference){ .cell.danger .slot{animation:dangerPulse 1.1s ease-in-out infinite} }
/* a hand of real cards: a little bigger on roomy screens */
:root{--pw:clamp(54px,7.2vw,92px)}
@media (max-height:700px){ :root{--pw:clamp(50px,6.2vw,74px)} }

/* run summary */
.modal.summary{max-width:600px}
.miniJokers{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0 4px}
.joker.mini{--jw:46px;width:46px;cursor:default}
.joker.mini .gl{font-size:20px}
.newBest{display:inline-block;background:linear-gradient(#ffd96a,#f6b92c);color:#2a1d00;font-family:var(--f-num);font-size:15px;padding:3px 12px;border-radius:8px;margin:0 0 6px;box-shadow:0 3px 0 rgba(0,0,0,.4),0 0 0 2px var(--edge);rotate:-2deg}
@media (prefers-reduced-motion:no-preference){ .newBest{animation:coinBob 1.6s ease-in-out infinite} }

/* buttons lean into the pointer; a flash of colour for the big moments */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .btn{transition:transform .06s, filter .1s, scale .12s cubic-bezier(.3,1.6,.5,1)}
  .btn:not(:disabled):hover{scale:1.05}
  .btn:not(:disabled):active{scale:.97}
}
.flash{position:fixed;inset:0;z-index:47;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,var(--fc,#fff) 0%,transparent 70%);opacity:0}

/* Negative: the card turns to a photographic negative, with a pale glow */
.joker.ed-negative{filter:invert(.92) hue-rotate(180deg) contrast(1.1);box-shadow:var(--sx,0px) var(--sy,5px) 0 rgba(0,0,0,.5), 0 0 0 2px #fff, 0 0 18px rgba(255,255,255,.7)}
.edline.ed-negative{color:#ffffff;text-shadow:0 0 8px rgba(255,255,255,.8);filter:none}
.ed-tag.ed-negative{background:linear-gradient(90deg,#222,#666) !important;color:#fff}

/* starting sets */
.deckGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:14px 0 4px}
.deckCard{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 10px;border-radius:12px;color:inherit;font:inherit;cursor:pointer;
  background:linear-gradient(180deg,var(--panel-3),var(--panel-2));border:3px solid rgba(255,255,255,.14);box-shadow:0 0 0 2px var(--edge), 0 5px 0 2px var(--edge), inset 0 3px 0 rgba(255,255,255,.12);transition:translate .12s,border-color .12s}
.deckCard:not(:disabled):hover,.deckCard:not(:disabled):focus-visible{border-color:var(--gold);translate:0 -4px}
.deckCard.locked{opacity:.5;cursor:default}
.dGl{width:46px;height:46px;border-radius:10px;background:linear-gradient(#fffaf0,#e7dcc2);color:#1c2427;font-family:var(--f-pixel);font-weight:700;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 rgba(0,0,0,.4),0 0 0 2px var(--edge)}
.deckCard.locked .dGl{background:var(--panel);color:var(--ink-mute)}
.dNm{font-family:var(--f-num);font-size:19px;letter-spacing:.02em}
.dDs{font-size:13px;color:var(--ink-dim);line-height:1.3}

/* Joker faces: a halo behind the symbol, a woven pattern and an inner frame, so they read as cards */
.joker{background:
  radial-gradient(circle at 50% 40%, rgba(255,255,255,.34), transparent 55%),
  repeating-linear-gradient(135deg, rgba(255,255,255,.09) 0 5px, transparent 5px 10px),
  linear-gradient(160deg, color-mix(in srgb, var(--jc) 78%, #fff 22%), var(--jc) 55%, color-mix(in srgb, var(--jc) 70%, #000 30%));
  outline:2px solid rgba(255,255,255,.26);outline-offset:-7px}
.joker.mini{outline-offset:-4px}
.joker .nm{background:rgba(0,0,0,.28);border-radius:4px;padding:1px 4px;width:calc(100% - 6px)}

.anteBanner{position:fixed;left:0;right:0;top:34%;z-index:46;pointer-events:none;display:flex;align-items:baseline;justify-content:center;gap:14px;
  font-family:var(--f-num);color:#fff7e0;-webkit-text-stroke:4px var(--edge);paint-order:stroke fill;text-shadow:0 8px 0 var(--edge), 0 0 40px rgba(255,210,90,.6)}
.anteBanner .aSmall{font-size:clamp(20px,4vw,38px);letter-spacing:.12em;text-transform:uppercase}
.anteBanner .aNum{font-size:clamp(70px,16vw,160px);line-height:.9;color:#ffd25a}