:root{
  /* Exact Sixes palette (from src/app.jsx S object) */
  --cream:#FAF7EF;   /* panel / light text on dark */
  --card:#FAF7EF;    /* cream panels */
  --ink:#22201B;     /* text + primary button fill */
  --gold:#C9A24B;    /* selected choice */
  --brass:#C9A24B;
  --felt:#143B22;
  --ghost-bd:#C9C3B2;/* unselected border */
  --input-bd:#D8D2C2;/* input border */
  --muted:#6E6A5E;   /* helper text */
  --red:#A8322C;     /* card red suits */
  --suit-red:#B3222D;
}
*{box-sizing:border-box}
body{
  margin:0;
  /* Exact Sixes page gradient */
  background:linear-gradient(#1F5732,#143B22 55%,#081D10);
  background-attachment:fixed;
  color:var(--ink);
  font-family:Georgia,"Times New Roman",Times,serif;
  padding:max(10px,env(safe-area-inset-top)) 12px calc(24px + env(safe-area-inset-bottom));
}
.wrap{max-width:560px;margin:0 auto}
@media(min-width:680px){ .wrap{max-width:660px} }

.masthead{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0 10px;color:var(--cream)}
.masthead h1{margin:0;font-size:2rem}
.masthead .sub{font-family:ui-monospace,Menlo,monospace;font-size:.62rem;letter-spacing:.18em;color:var(--gold)}
.mast-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* Panel = Sixes S.panel exactly */
.panel{background:var(--cream);color:var(--ink);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 10px 24px rgba(0,0,0,0.4)}
.panel h2{margin:.2rem 0 .5rem;font-size:1.15rem}
.panel.center{text-align:center}

/* Section labels = Sixes inline label */
label{display:block;font-size:14px;font-weight:700;margin:14px 0 6px}

/* Input = Sixes S.input */
input,textarea{width:100%;padding:10px 12px;border:1.5px solid var(--input-bd);border-radius:9px;font:inherit;font-size:15px;background:#fff}
input.code{width:6.5rem;text-transform:uppercase;letter-spacing:.2em;text-align:center}
.joinrow{display:flex;gap:8px;align-items:center}
.joinrow textarea{flex:1;resize:none}

/* Segmented choices = Sixes S.ghost + S.opt(on) */
.segrow{display:flex;gap:8px;margin:6px 0}
.seg{flex:1;padding:8px 14px;border-radius:9px;border:1.5px solid var(--ghost-bd);background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.seg.on{background:var(--gold);border-color:var(--gold);font-weight:700;color:var(--ink)}

/* Primary = Sixes S.btn, full width */
.primary{display:block;width:100%;padding:10px 16px;margin:14px 0 2px;border:none;border-radius:10px;background:var(--ink);color:var(--cream);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.primary:disabled{opacity:.4}

/* Ghost buttons = Sixes S.ghost; masthead variants are cream-on-felt (readable) */
.ghost{padding:8px 14px;border-radius:9px;border:1.5px solid var(--ghost-bd);background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.masthead .ghost{border-color:rgba(250,247,239,.5);color:var(--cream)}
.masthead .ghost.coach-toggle.on{border-color:var(--gold);color:var(--gold)}
.panel .ghost{margin-top:8px}

.check{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;margin:14px 0;font-size:14px;line-height:1.5}
.check input{width:auto;margin-top:.25rem}
.hint,.rules p,p.hint{color:var(--muted);font-size:12px;line-height:1.5}
.rules{margin-top:0;font-size:14px;line-height:1.5;color:var(--ink)}
.err{color:var(--red);font-weight:600;font-size:14px}
.tag{display:inline-block;background:#E7DFC9;color:#6b5f3c;font-family:ui-monospace,Menlo,monospace;font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;padding:.2rem .5rem;border-radius:4px}
.plist{margin:.3rem 0;padding-left:1.2rem}

.board{margin:6px 0}
.board-peg-wait{
  outline:2px solid rgba(232,197,107,.85); outline-offset:3px; border-radius:16px;
}
.board-peg-wait svg{touch-action:manipulation}
.statusline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;margin:2px 2px 8px;color:var(--cream)}
.score-basics{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;padding:6px 10px;border-radius:9px;
  background:rgba(250,247,239,.1);border:1px solid rgba(250,247,239,.2);
  color:rgba(250,247,239,.85);font-size:11px;line-height:1.45;
}
.score-basics-text{flex:1;min-width:12rem}
.score-sheet-btn{flex:none;padding:4px 10px;font-size:12px;border-color:rgba(250,247,239,.45);color:var(--cream)}
.score-sheet-link{border-color:rgba(250,247,239,.45)!important;color:var(--cream)!important;padding:4px 10px;font-size:12px;margin:0}
.score-sheet-backdrop{
  position:fixed;inset:0;z-index:40;background:rgba(8,29,16,.55);
  display:flex;align-items:flex-end;justify-content:center;padding:12px;
}
.score-sheet{width:100%;max-width:560px;max-height:min(78vh,560px);overflow-y:auto;margin:0}
.score-sheet-list{margin:.4rem 0 0;padding-left:1.1rem;font-size:14px;line-height:1.55}
.score-sheet-list li{margin:.35rem 0}
.peg-leapfrog-note{border-top:1px solid #E4DECE;padding-top:10px}
.peg-board-note{font-size:12px;line-height:1.45;color:rgba(250,247,239,.78);margin:0 2px 8px}
.peg-move-tip{
  background:rgba(201,162,75,.2);border:1px solid rgba(201,162,75,.55);color:var(--cream);
  border-radius:9px;padding:8px 12px;margin:0 0 8px;font-size:13px;line-height:1.4;
}

.hand{display:flex;flex-wrap:wrap;gap:6px;margin:.5rem 0;align-items:center}
.card{width:52px;min-width:52px;height:72px;border-radius:8px;border:1.5px solid #D8D2C2;background:#fff;font:inherit;font-size:1.05rem;font-weight:700;cursor:pointer;line-height:1.1;box-shadow:0 2px 5px rgba(0,0,0,.18);display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:0;color:var(--ink)}
.card.small{width:2.2rem;min-width:2.2rem;height:3.15rem;font-size:.85rem}
.card.sel{outline:3px solid var(--gold);outline-offset:1px;transform:translateY(-6px) rotate(var(--fan-rot,0deg))}
.card.dis{opacity:.5;cursor:default}
.card:disabled{opacity:1;cursor:default}
.card.dis:disabled{opacity:.5}
.card.back{background:repeating-linear-gradient(45deg,#1F5732,#1F5732 4px,#17492A 4px,#17492A 8px);border-color:rgba(250,247,239,.4);box-shadow:0 2px 5px rgba(0,0,0,.25)}
.card.slot{background:rgba(255,255,255,.15);border:1.5px dashed rgba(250,247,239,.45);box-shadow:none}
.card .red, .pcard-rank.red, .pcard-suit.red{color:var(--suit-red)}
.card .blk, .pcard-rank.blk, .pcard-suit.blk{color:#20242c}
.pcard-rank{font-weight:700;font-size:1.05rem;line-height:1}
.pcard-suit{font-size:1rem;line-height:1.2}
.card.small .pcard-rank{font-size:.85rem}
.card.small .pcard-suit{font-size:.8rem}

.countrow{display:flex;gap:10px;align-items:flex-start}
.count{background:var(--ink);color:var(--cream);border-radius:10px;padding:.4rem .7rem;text-align:center;font-size:.75rem}
.count b{font-size:1.3rem}
.stack{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:56px}
.peglog{font-size:12px;color:var(--muted);margin:.4rem 0;max-height:5.5em;overflow:hidden}
.coach{background:#EEF3FF;border-left:3px solid #4A6FA5;color:#2C3E57;padding:.5rem .7rem;border-radius:6px;font-size:14px;line-height:1.45}
.breakdown{margin:.4rem 0;padding-left:1.2rem;font-size:14px}
.breakdown .cards{color:#8a8470;font-size:.85rem}
.plus{font-size:1.2rem;margin:0 2px;color:#8a8470}
.chatbox .chatlog{max-height:8em;overflow-y:auto;font-size:.88rem;margin-bottom:.4rem}

/* Felt table — same language as Spot */
.panel.table-panel{box-shadow:none;border:1px solid rgba(250,247,239,.2);background:rgba(250,247,239,.07);color:var(--cream);padding:12px}
.panel.table-panel.my-turn{border:2px solid var(--brass);box-shadow:0 0 0 2px rgba(201,162,75,.35),0 0 16px 3px rgba(201,162,75,.3)}
.opp-seats{display:flex;flex-wrap:wrap;justify-content:space-around;gap:.55rem;margin-bottom:.7rem}
.seat-block{display:flex;flex-direction:column;align-items:center;flex:1;min-width:7rem}
.seat{font-size:.72rem;color:rgba(250,247,239,.8);font-weight:500;padding:.15rem .45rem;border-radius:6px;text-align:center}
.seat.turn, .seat-block.turn .seat{background:rgba(201,162,75,.3);color:var(--cream)}
.piles{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-start}
.pile{display:flex;flex-direction:column;align-items:center;gap:.25rem}
.pile-label{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(250,247,239,.7);font-weight:600}
.turn-note{color:rgba(250,247,239,.9);font-size:.85rem;line-height:1.4;padding-top:.55rem}
.turn-note strong{color:var(--brass)}
.pile-empty{color:rgba(250,247,239,.55);font-size:.78rem}
.starter-pile{perspective:240px}
.peg-pile{flex:1 1 100%}
.peg-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;width:100%}
.table-count{flex:none;border:1px solid var(--brass)}
.table-stack{display:flex;flex-wrap:wrap;gap:4px;align-items:center;min-height:3.15rem}
.feed{margin-top:.55rem;border-top:1px dashed rgba(250,247,239,.25);padding-top:.4rem}
.feed-line{margin:.12rem 0;font-size:.74rem;color:rgba(250,247,239,.62);line-height:1.45}
.feed-line.latest{color:rgba(250,247,239,.95);font-size:.8rem}

.fan{display:flex;justify-content:center;align-items:flex-end;min-height:3.15rem}
.fan-empty{color:rgba(250,247,239,.4);font-size:.85rem;padding:.4rem 0}
.fan .fan-card{
  --fan-rot:calc((var(--i) - (var(--n) - 1) / 2) * 5deg);
  margin-left:-14px;
  transform:rotate(var(--fan-rot));
  z-index:calc(var(--i) + 1);
}
.fan .fan-card:first-child{margin-left:0}
.stack-backs{position:relative;width:calc(2.2rem + 9px);height:calc(3.15rem + 6px)}
.stack-card{position:absolute;pointer-events:none}

.turn-banner{
  text-align:center;margin:0 0 .4rem;font-weight:700;font-size:1.05rem;color:var(--brass);letter-spacing:.04em;
}
.hand-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.hand-head h2{margin:0}
.hand-panel{position:sticky;bottom:.4rem;z-index:4}
.hand-panel.hand-pulse{animation:handPulse 1.6s ease-in-out infinite}
@keyframes handPulse{
  0%,100%{box-shadow:0 10px 24px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 0 2px var(--brass),0 0 18px 4px rgba(201,162,75,.45),0 10px 24px rgba(0,0,0,.4)}
}
.my-fan{display:flex;flex-wrap:wrap;justify-content:center;gap:0;padding-top:.45rem}
.my-fan .card.fan-card{
  --fan-rot:calc((var(--i) - (var(--n) - 1) / 2) * 3deg);
  margin-left:-6px;
  transform:rotate(var(--fan-rot));
  z-index:calc(var(--i) + 1);
}
.my-fan .card.fan-card:first-child{margin-left:0}
.my-fan .card.sel{transform:translateY(-6px) rotate(var(--fan-rot,0deg))}

/* === FLY-CARDS EXPERIMENT (disable: FLY_CARDS=false in src/cribbage/app.jsx) === */
@keyframes fly-deal{
  from{opacity:0;transform:translateY(-40px) scale(.82) rotate(var(--fan-rot,0deg))}
  to{opacity:1;transform:rotate(var(--fan-rot,0deg))}
}
@keyframes fly-crib{
  from{opacity:0;transform:translateY(28px) scale(.85)}
  to{opacity:1;transform:none}
}
@keyframes fly-peg{
  from{opacity:0;transform:translateY(30px) scale(.85)}
  to{opacity:1;transform:none}
}
@keyframes fly-starter{
  from{transform:rotateY(90deg);opacity:.25}
  to{transform:rotateY(0);opacity:1}
}
.fly-deal{animation:fly-deal .32s ease backwards;animation-delay:calc(var(--i,0) * 40ms)}
.fly-crib{animation:fly-crib .28s ease backwards}
.score-cell.fly-peg{animation:fly-peg .28s ease backwards}
.score-cell.fly-starter{animation:fly-starter .3s ease backwards}

.board svg circle{transition:cx .28s ease, cy .28s ease}

.score-cell{position:relative;display:inline-flex}
.score-stage{position:relative}

@keyframes sx-pop {
  0%,100% { transform: scale(1); }
  40% { transform: scale(1.18); box-shadow: 0 0 0 3px #E8C56B, 0 0 14px 4px rgba(232,197,107,0.8); }
}
.sx-pop { animation: sx-pop 0.4s ease-in-out both; }
@keyframes sx-popgold {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); box-shadow: 0 0 0 4px #FFD75E, 0 0 22px 9px rgba(255,215,94,0.95); }
  60% { transform: scale(1.1); box-shadow: 0 0 0 3px #FFD75E, 0 0 16px 6px rgba(255,215,94,0.7); }
  100% { transform: scale(1); }
}
.sx-popgold { animation: sx-popgold 1.1s ease-in-out both; }
@keyframes sx-float {
  0% { opacity: 0; transform: translate(-50%, 4px); }
  10% { opacity: 1; }
  75% { opacity: 1; transform: translate(-50%, -26px); }
  100% { opacity: 0; transform: translate(-50%, -34px); }
}
.sx-float {
  position: absolute; pointer-events: none; z-index: 5;
  font-weight: 900; font-family: inherit; text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  animation: sx-float 2.4s ease-out both;
}
@keyframes sx-star {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot)); }
}
.sx-star {
  position: absolute; pointer-events: none; z-index: 6; color: #FFD75E;
  text-shadow: 0 0 6px rgba(255,215,94,0.9);
  animation: sx-star 1.3s ease-out both;
}

@media (prefers-reduced-motion: reduce){
  .anim-deal,.anim-crib,.anim-peg,.anim-flip,.hand-panel.hand-pulse{animation:none !important}
  .fly-deal,.fly-crib,.score-cell.fly-peg,.score-cell.fly-starter{animation:none !important}
  .sx-pop,.sx-popgold,.sx-float,.sx-star{animation:none !important}
  .board svg circle{transition:none}
}

/* Cut for deal */
.cut-results{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0;justify-content:center}
.cut-seat{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:5.5rem;padding:8px;border-radius:10px;background:#F3EEE0}
.cut-seat.waiting{outline:2px solid var(--gold)}
.cut-seat.winner{outline:2px solid var(--gold);background:#E8D9A8}
.cut-name{font-size:13px;font-weight:700;text-align:center}
.cut-stock{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  max-height:14rem;overflow-y:auto;padding:8px 2px;margin-top:6px;
  -webkit-overflow-scrolling:touch;
}
.cut-card{
  width:48px;min-width:48px;height:66px;border-radius:8px;padding:0;cursor:pointer;
  border:1.5px solid rgba(250,247,239,.4);
  background:repeating-linear-gradient(45deg,#1F5732,#1F5732 4px,#17492A 4px,#17492A 8px);
  box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.cut-card:disabled{opacity:.45;cursor:default}
.cut-card:not(:disabled):active{transform:translateY(1px)}