/* THE FELT - 02-table.css
   the poker table, action bar, coach, report card
   Part of a multi-file build; load order is fixed in The_Felt.html. */
/* ============================================================
   THE POKER TABLE (shared by Test Table + Play Along)
   ============================================================ */
.table-stage{position:relative;padding:66px 84px 80px;margin:0 auto;max-width:920px;}
@media(max-width:860px){.table-stage{padding:58px 46px 70px;}}

.ptable{position:relative;width:100%;aspect-ratio:2.05/1;}
/* The rail is padded stock, not a grey ring. Three things make it read that
   way: a vertical gradient through --rail-1/-3/-2 so the top catches the
   room light, a faint brushing so the material has a grain, and two inset
   shadows - a bright hairline on the top inner edge, a heavy dark one along
   the bottom - which is the whole of "bevelled". The outer drop shadow is
   what lifts the table off the page. */
.ptable .rail{
  position:absolute;inset:0;border-radius:999px;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.016) 0 1px,rgba(0,0,0,.02) 1px 3px),
    linear-gradient(178deg,var(--rail-1) 0%,var(--rail-3) 24%,var(--rail-2) 66%,#2B313B 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.10),
    inset 0 0 0 1px rgba(0,0,0,.45),
    inset 0 -4px 12px rgba(0,0,0,.75),
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 4px 12px rgba(0,0,0,.45),
    0 28px 64px -20px rgba(0,0,0,.85);
}
/* the curved highlight along the top arc of the ring. A straight gradient
   cannot follow an ellipse, so this is a wide radial sitting above centre. */
.ptable .rail::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 62% at 50% -8%,rgba(255,255,255,.15) 0%,rgba(255,255,255,0) 62%);
}
/* THE FELT. Deep teal-charcoal - the colour a modern stream table is, not
   card-room green. Four layers, top to bottom: a wide specular sheen across
   the upper third (this is what stops a big dark ellipse reading as a flat
   shape), a vignette that takes the rim almost to black so the rail has
   something to sit against, and the key light itself, an off-centre radial
   at 50% 32% running --felt-1 -> --felt-2 -> --felt-3 -> --felt-edge. */
.ptable .felt{
  position:absolute;inset:4.6% 2.6%;border-radius:999px;
  background:
    radial-gradient(56% 40% at 50% 22%,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 72%),
    radial-gradient(76% 106% at 50% 42%,rgba(0,0,0,0) 50%,rgba(0,0,0,.40) 86%,rgba(0,0,0,.62) 100%),
    radial-gradient(78% 112% at 50% 32%,var(--felt-1) 0%,var(--felt-2) 46%,var(--felt-3) 78%,var(--felt-edge) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    inset 0 6px 30px rgba(0,0,0,.6),
    inset 0 0 64px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(0,0,0,.55);
}
/* the weave. Same tiled feTurbulence the page background uses - no network
   request, and it is most of what keeps a large dark gradient from banding
   on a laptop panel. Blended over, so it lightens the lit centre and barely
   touches the dark rim, which is how cloth actually behaves. */
.ptable .felt::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:.075;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23w)'/%3E%3C/svg%3E");
}
/* Printed on the cloth, not drawn over it: the ring is barely lighter than
   the felt and carries a soft dark bloom on the inside, so it sinks into the
   weave instead of floating as a border. */
.ptable .betline{
  position:absolute;inset:15% 12%;border-radius:999px;
  border:1.5px solid rgba(214,236,230,.055);pointer-events:none;
  box-shadow:inset 0 0 26px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.022);
}
.ptable .feltmark{
  position:absolute;left:50%;top:26%;transform:translateX(-50%);
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.42em;
  /* tinted toward the felt rather than pure white, and cut in with a dark
     shadow underneath so it reads as stencilled cloth */
  color:rgba(198,224,218,.105);text-shadow:0 1px 0 rgba(0,0,0,.45);
  text-transform:uppercase;pointer-events:none;white-space:nowrap;
}
.ptable .board{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:7px;align-items:center;z-index:3;
}
.ptable .board .pcard,.ptable .board .bslot{animation:cardin .28s ease both;}
/* already on the table last redraw: no second fly-in (see renderTable) */
.ptable .betspot.nofx,.ptable .seat .holecards.nofx .pcard,.ptable .board .pcard.nofx,.ptable .board .bslot.nofx{animation:none;}
@keyframes cardin{from{opacity:0;transform:translateY(-9px) scale(.92);}to{opacity:1;transform:none;}}
.bslot{width:46px;height:64px;border-radius:6px;border:1.5px dashed rgba(214,236,230,.14);flex:none;
  /* an empty slot is a hole in the cloth, so it gets a recess rather than a
     lighter fill */
  background:rgba(0,0,0,.16);box-shadow:inset 0 2px 8px rgba(0,0,0,.3);}
.bslot.click{cursor:pointer;} .bslot.click:hover{border-color:var(--accent-hi);}
/* the pot is money, so the number is gold and the plate it sits on is a dark
   lozenge pressed into the felt */
.ptable .potline{
  position:absolute;left:50%;top:69%;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:12px;font-weight:600;color:var(--gold-hi);
  background:linear-gradient(180deg,rgba(4,10,12,.55),rgba(4,10,12,.72));
  border:1px solid rgba(232,180,76,.22);border-radius:99px;padding:4px 13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 10px -4px rgba(0,0,0,.8);
  white-space:nowrap;
}
/* the POT label is 10px, so it needs the full 4.5:1. At .5 alpha over the
   near-black lozenge it landed at 4.0:1 - dimmer than the white it replaced. */
.ptable .potline .k{color:rgba(246,211,145,.66);font-size:10px;letter-spacing:.14em;margin-right:6px;}
.ptable .tmsg{
  position:absolute;left:50%;top:33.5%;transform:translateX(-50%);z-index:3;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(226,240,236,.72);white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

/* seat pods */
.seat{position:absolute;transform:translate(-50%,-50%);z-index:5;width:118px;transition:opacity .2s;}
.seat .holecards{display:flex;gap:3px;justify-content:center;margin-bottom:-7px;position:relative;z-index:1;min-height:47px;}
.seat .holecards .pcard{animation:cardin .25s ease both;}
/* your own two cards are the ones you have to read every hand, so they get a
   size of their own and sit higher above the pod than everyone else's */
.seat.hero .holecards{gap:5px;min-height:68px;margin-bottom:-5px;}
.seat.hero .holecards .pcard{width:49px;height:68px;padding:4px 6px;border-radius:6px;
  box-shadow:0 3px 9px rgba(0,0,0,.55);}
.seat.hero .holecards .pcard .r{font-size:22px;}
.seat.hero .holecards .pcard .s{font-size:17px;}
/* The pod is a two-ROW flex box, not a one-row one.
   It used to be a single row, and the HUD line was appended to it as a third
   flex item. Because that line is nowrap it could not shrink, so it took the
   width it wanted and squeezed the name-and-stack column to zero: the pod
   showed a stat line for a player whose name and chip count had been crushed
   out of existence, and in the tournament - where chip counts are five
   digits - it happened on every seat. Wrapping, plus a full-width basis on
   the HUD line, puts the stats underneath where they belong. */
/* A pod is a chip of material sitting on the cloth, so it is lit like every
   other raised surface in the app: gradient, top hairline, real shadow. It
   keeps a little alpha because a fully opaque box on the felt looks pasted
   on rather than resting there. */
.seat .pod{
  position:relative;z-index:2;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(33,38,48,.95) 0%,rgba(14,17,22,.96) 100%);
  border:1px solid var(--border2);border-radius:11px;
  padding:6px 9px;
  box-shadow:var(--hair),0 1px 2px rgba(0,0,0,.5),0 10px 22px -10px rgba(0,0,0,.85);
  transition:border-color .15s,box-shadow .2s;
}
.seat .avatar{
  width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:13px;color:var(--text2);
  background:linear-gradient(150deg,var(--surface4),var(--surface2));border:1px solid var(--border2);
  box-shadow:var(--hair),inset 0 -3px 6px rgba(0,0,0,.35);
}
/* you are the only indigo thing on the table - a fill, so it takes white ink */
.seat.hero .avatar{color:var(--accent-ink);background:var(--g-accent);border-color:var(--accent-lo);
  box-shadow:var(--hair-strong),0 2px 10px -3px var(--accent-glow);}
.seat .meta{min-width:0;flex:1 1 auto;overflow:hidden;}
.seat .nm{font-size:11.5px;font-weight:600;color:var(--text);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* a five-digit tournament stack has to be allowed to shrink rather than
   spilling out over the avatar next to it */
.seat .stk{font-family:var(--mono);font-size:10.5px;color:var(--text2);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.seat.empty .pod,.seat.open .pod{opacity:.45;border-style:dashed;}
.seat .posb{
  position:absolute;top:-7px;right:-5px;font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.08em;
  background:var(--g-surface2);border:1px solid var(--border2);border-radius:99px;padding:1.5px 7px;color:var(--text2);
  box-shadow:var(--hair),0 1px 3px rgba(0,0,0,.6);
}
.seat.hero .posb{background:var(--g-accent);border-color:var(--accent-lo);color:var(--accent-ink);
  box-shadow:var(--hair-strong),0 2px 8px -3px var(--accent-glow);
  /* your own cards are big enough now that the badge would sit on the suit in
     the corner of the right-hand one, so it moves to the other side */
  right:auto;left:-4px;}
/* gold is money and gold is also "it is on you" - the one place the two
   meanings do not collide, because only one seat can be lit at a time */
.seat.toact .pod{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 0 20px -2px rgba(232,180,76,.3);}
/* the halo used to flash almost to full white once a second, which is a lot
   of movement to sit next to while you think. Slower, and it starts at half
   opacity. */
.seat.toact .pod::after{content:'';position:absolute;inset:-5px;border-radius:14px;border:1.5px solid rgba(232,180,76,.34);animation:pulse 1.9s var(--ease) infinite;}
@keyframes pulse{0%{opacity:.5;transform:scale(1);}70%{opacity:0;transform:scale(1.07);}100%{opacity:0;}}
.seat.folded{opacity:.32;}
/* winning is a positive outcome, so it is green - the CALL green, not the
   old accent, because the chrome is indigo now */
.seat.win .pod{border-color:var(--call);box-shadow:0 0 0 1.5px var(--call),0 0 26px -2px rgba(63,169,106,.45);}
.seat .statusb{
  position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);z-index:3;
  font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.1em;border-radius:99px;padding:1.5px 8px;white-space:nowrap;
}
.statusb.allin{background:linear-gradient(180deg,#AB3A41,var(--allin));color:#FFD9DB;
  box-shadow:var(--hair),0 2px 6px -2px rgba(0,0,0,.8);}
.statusb.act{background:linear-gradient(180deg,rgba(30,35,44,.94),rgba(8,10,14,.94));
  border:1px solid var(--border2);color:var(--text2);box-shadow:var(--hair),0 2px 6px -2px rgba(0,0,0,.8);}
.seat.pickable{cursor:pointer;}
.seat.pickable:hover .pod{border-color:var(--accent-line);}

/* bets + dealer button on felt */
.betspot{position:absolute;transform:translate(-50%,-50%);z-index:4;display:flex;align-items:center;gap:5px;animation:cardin .2s ease both;}
/* CHIPS, NOT A CHIP.
   A bet used to be one flat gold dot, which told you nothing until you read
   the label. It is now a stack whose height and denomination are derived
   from the bet in big blinds, so a limp and a shove look different across
   the table before you read either number.

   The wrapper keeps the old .disc class ON PURPOSE. .betspot is absolutely
   positioned on the felt and the amount label shares its flex row, so the
   stack has to occupy exactly the footprint the single disc did - 15px, and
   the 11px it shrinks to on a phone, which 99-responsive.css sets by that
   class name. Everything the old rule painted is switched off here and the
   discs inside are absolute, so a four-high stack costs the box nothing and
   the label never moves. */
.betspot .disc{width:15px;height:15px;flex:none;
  background:none;border-style:none;box-shadow:none;}
.betspot .chipstack{position:relative;}
/* A clay chip is three things: a coloured body, eight pale wedges cut into
   the rim, and a lighter top face inset from the edge. The conic gradient is
   the rim, the ::after is the face. Colours are chip material, and they stay
   in the money register - bone, gold, graphite, indigo - because blue, green
   and red are spoken for by the action code and cannot be spent here. */
.betspot .chipstack i{
  --clay:#C9CDD4; --clay-hi:#F4F6F9; --clay-lo:#767C86;
  /* a four-high stack overflows the wrapper's 15px box upward, so the discs
     must not take clicks that the felt underneath them would otherwise get */
  position:absolute;left:0;bottom:0;width:100%;height:100%;border-radius:50%;pointer-events:none;
  background:
    repeating-conic-gradient(from 10deg,rgba(255,255,255,.82) 0deg 15deg,rgba(255,255,255,0) 15deg 45deg),
    radial-gradient(circle at 34% 26%,var(--clay-hi) 0%,var(--clay) 56%,var(--clay-lo) 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.65);
}
.betspot .chipstack i::after{
  content:"";position:absolute;inset:19%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 26%,var(--clay-hi) 0%,var(--clay) 62%,var(--clay-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 2px rgba(0,0,0,.4),0 0 0 1px rgba(0,0,0,.28);
}
/* the stack itself - percentages so it still stacks correctly at the smaller
   phone size, and each disc covers two thirds of the one under it */
.betspot .chipstack i:nth-child(2){bottom:22%;}
.betspot .chipstack i:nth-child(3){bottom:44%;}
.betspot .chipstack i:nth-child(4){bottom:66%;}
.betspot .chipstack i.c1{--clay:var(--gold);--clay-hi:var(--gold-hi);--clay-lo:#8A6A24;}
.betspot .chipstack i.c2{--clay:#2E343F;--clay-hi:#5A6474;--clay-lo:#12161C;}
.betspot .chipstack i.c3{--clay:var(--accent);--clay-hi:var(--accent-hi);--clay-lo:#232C77;}
.betspot .amt{font-family:var(--mono);font-size:11px;font-weight:600;color:#F5EFDC;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;}
.dbtn{
  position:absolute;transform:translate(-50%,-50%);z-index:6;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FFFFFF,#D8DCE0 70%,#AAB2BA);color:#1A1E24;
  font-family:var(--disp);font-weight:700;font-size:11px;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.6),0 6px 14px -6px rgba(0,0,0,.9);
  transition:left .5s cubic-bezier(.5,0,.3,1),top .5s cubic-bezier(.5,0,.3,1);
}

/* ---------- action bar ---------- */
/* The -30px tuck used to be safe because the action bar came straight after
   the table stage. Once a coach line moved in between them, the flex gap
   (12px) plus this margin (-30px) put the bar's opaque top edge 18px ABOVE
   the bottom of the coach - and .coachline sets no position, so it could
   never win against a positioned sibling whatever the DOM order. That is
   the whole of "the coach is covered". The tuck now belongs to the console
   that wraps them both, in 04-sim.css. */
.actionbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  background:var(--g-surface);border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow);padding:12px 14px;position:relative;z-index:10;
}
.actionbar .who{width:100%;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--text3);text-transform:uppercase;margin-bottom:-2px;}
.actionbar .who b{color:var(--gold);}
/* The buttons are the app's colour code, so their hues are fixed: blue folds,
   green calls, red raises, deep red shoves, indigo confirms. What changes is
   the material. Each one now carries three shadows at once - a top hairline,
   a tight dark contact shadow that puts it ON the bar, and a wide glow in its
   OWN hue, which is what reads as expensive rather than flat. The glow colour
   travels in --glow so the recipe is written once. */
.bigbtn{
  --glow:rgba(0,0,0,.5);
  font-family:var(--disp);font-size:14px;font-weight:700;letter-spacing:.05em;color:#fff;
  border:0;border-radius:10px;padding:12px 22px;cursor:pointer;min-width:96px;
  text-shadow:0 1px 2px rgba(0,0,0,.38);
  transition:filter .12s,transform .05s,box-shadow var(--t);
  box-shadow:var(--hair-strong),0 1px 2px rgba(0,0,0,.55),0 6px 16px -8px rgba(0,0,0,.8),0 6px 20px -10px var(--glow);
}
.bigbtn:hover{filter:brightness(1.12) saturate(1.05);
  box-shadow:var(--hair-strong),0 1px 2px rgba(0,0,0,.55),0 8px 20px -8px rgba(0,0,0,.8),0 12px 30px -10px var(--glow);}
.bigbtn:active{transform:translateY(1px);box-shadow:var(--hair),0 1px 2px rgba(0,0,0,.6);}
.bigbtn:disabled{opacity:.35;pointer-events:none;}
.bigbtn .sub{display:block;font-family:var(--mono);font-size:9.5px;font-weight:500;opacity:.85;margin-top:1px;letter-spacing:.03em;}
/* Three stops, not two: a lit top corner, the semantic token near the top so
   the button still follows the palette, and a shaded bottom. The tint and the
   shade are material shades of the token and have no name of their own.
   The token deliberately sits high in the ramp rather than in the middle:
   these buttons carry white text at 14px, and the label sits over the lower,
   darker half. Putting --call at 50% would have left CHECK at about 2.9:1.

   CALL and BET/RAISE always render a .sub line underneath (the call amount,
   the raise-to amount), which pushes the 14px label into the UPPER third of
   the button, not the lower half - so the light end of the ramp has to be a
   thin specular edge, not a third of the height. The token now sits at 14%
   and the ramp is darker below it: white lands at about 5.3:1 on both
   instead of 3.4:1 (call) and 4.0:1 (raise). FOLD and ALL IN carry no sub
   and already cleared it, so their ramps are untouched. */
.bigbtn.fold{background:linear-gradient(160deg,var(--fold) 0%,#4A6A97 48%,#37527B 100%);--glow:rgba(91,125,177,.5);}
.bigbtn.check,.bigbtn.call{background:linear-gradient(160deg,#5FC98A 0%,var(--call) 14%,#256B41 52%,#17492C 100%);--glow:rgba(63,169,106,.5);}
.bigbtn.bet,.bigbtn.raise{background:linear-gradient(160deg,#F76B70 0%,var(--raise) 14%,#B8343A 52%,#8A2429 100%);--glow:rgba(229,72,77,.5);}
.bigbtn.allin{background:linear-gradient(160deg,#B24048 0%,var(--allin) 55%,#5C1A20 100%);--glow:rgba(142,44,51,.55);}
/* Blue means fold and red means bet. Anything that is not a poker action gets
   its own colour, so the code the action bar teaches never lies. */
.bigbtn.neutral{background:linear-gradient(160deg,#3F4855 0%,var(--surface4) 45%,#1C212A 100%);--glow:rgba(0,0,0,.45);}
/* confirm is not a poker action, it is the app agreeing with you, so it takes
   the chrome accent - which is indigo now, not the old emerald */
.bigbtn.confirm{background:var(--g-accent);color:var(--accent-ink);--glow:var(--accent-glow);}
.bigbtn.picked{outline:2px solid #fff;outline-offset:-2px;filter:brightness(1.15);}
/* the coach's pick, marked on the button you would press rather than only in
   a sentence above it - the shortest path from advice to action */
.bigbtn.rec{box-shadow:var(--hair-strong),0 0 0 2px var(--accent),0 1px 2px rgba(0,0,0,.55),0 10px 26px -10px var(--accent-glow);}
.bigbtn.rec:hover{box-shadow:var(--hair-strong),0 0 0 2px var(--accent-hi),0 1px 2px rgba(0,0,0,.55),0 12px 30px -10px var(--accent-glow);}
.bigbtn.rec::after{content:'BOOK';position:absolute;top:-8px;left:50%;
  transform:translateX(-50%);font-family:var(--mono);font-size:8px;font-weight:700;
  letter-spacing:.12em;background:var(--g-accent);color:var(--accent-ink);
  box-shadow:var(--hair-strong),0 2px 6px -2px var(--accent-glow);
  padding:1px 6px;border-radius:99px;pointer-events:none;}
.bigbtn{position:relative;}
.betsizer{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;}
.betsizer input[type=range]{width:150px;accent-color:var(--accent);}
/* the amount you type and the presets are inputs, so they are recessed wells,
   not raised surfaces - the same read as every other field in the app */
.betsizer .amtin{width:76px;background:var(--g-well);border:1px solid var(--border2);border-radius:var(--r-sm);color:var(--text);font-family:var(--mono);font-size:13px;font-weight:600;padding:8px;text-align:center;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45);}
.qchip{font-family:var(--mono);font-size:10px;border:1px solid var(--border2);border-radius:99px;color:var(--text2);padding:4px 9px;cursor:pointer;background:var(--g-well);transition:all .12s;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4);}
.qchip:hover{color:var(--accent-hi);border-color:var(--accent-line);}
.qchip.on{color:var(--accent-ink);background:var(--g-accent);border-color:var(--accent-lo);font-weight:600;
  box-shadow:var(--hair-strong),0 3px 12px -5px var(--accent-glow);}
/* max is a shove, and a shove is red */
.qchip.max{color:var(--raise-hi);border-color:rgba(229,72,77,.4);}
/* One focus ring for everything clickable. Three selectors had one before,
   which meant the picker and the action bar could not be tabbed at all. */
.bigbtn:focus-visible,.pk:focus-visible,.chip:focus-visible,.qchip:focus-visible,
.abtn:focus-visible,.mcell:focus-visible,.qq .opt:focus-visible,.crumbs .cr:focus-visible,
.slot:focus-visible,.seat.pickable:focus-visible,.seatedit .rd:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;}
.keyhint{width:100%;text-align:center;font-family:var(--mono);font-size:9.5px;color:var(--text3);letter-spacing:.06em;}
.keyhint b{color:var(--text2);border:1px solid var(--border2);border-radius:4px;padding:0 4px;font-weight:500;}

/* ---------- coach ---------- */
.coach-verdict{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;}
.coach-verdict .hand{font-family:var(--disp);font-size:22px;font-weight:700;}
/* the one line you actually read at the table */
/* Recessed rather than raised, so it sits IN the panel and the coloured left
   edge - which is still the action code - is the only bright thing on it. */
.callnow{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  background:var(--g-well);border:1px solid var(--border2);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:11px 13px;margin:0 0 11px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.callnow .act{font-family:var(--disp);font-size:19px;font-weight:700;color:var(--text);letter-spacing:.01em;}
.callnow .sz{font-family:var(--mono);font-size:13px;color:var(--accent-hi);font-weight:600;}
.callnow .freq{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--text3);white-space:nowrap;}
.callnow.fold{border-left-color:var(--fold);}
.callnow.raise{border-left-color:var(--raise);}
.callnow.call{border-left-color:var(--call);}
.coach p{margin:7px 0;font-size:13px;line-height:1.6;color:var(--text2);}
.coach p b{color:var(--text);}
.coach .note{font-size:11px;color:var(--text3);}
.logbox{max-height:300px;overflow-y:auto;font-size:12px;}
.logbox .kv .k{min-width:52px;}

/* ---------- report card (test mode) ---------- */
.report .rline{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--border);}
.report .rline:last-child{border-bottom:0;}
.report .rmeta{flex:1;min-width:0;}
.report .rtop{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;}
.report .rstreet{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--text3);text-transform:uppercase;}
.report .ract{font-size:12.5px;font-weight:600;color:var(--text);}
.report .rwhy{font-size:11.5px;color:var(--text2);line-height:1.5;margin-top:2px;}
.scorebig{display:flex;align-items:baseline;gap:10px;}
.scorebig .n{font-family:var(--disp);font-size:34px;font-weight:700;color:var(--accent-hi);}
.scorebig .d{font-size:11px;color:var(--text3);}