/* Dominologist game look (2026-10-27): the table, the bones and the panels shared by the playable games built after Texas 42. */
:root{
  --bg:#120b06; --bg2:#1b110a;
  --wood-lo:#2c1a0c; --wood-hi:#6b4526;
  --felt:#1f6440; --felt-lo:#123c26; --felt-hi:#2f8a56;
  --bone:#f6edd8; --bone-lo:#e6d7b4; --bone-edge:#c9b78d; --pip:#140c05;
  --gold:#e8a13a; --gold2:#ffcf7a; --brass:#c9962f;
  --green:#7bd167; --red:#e0705a; --blue:#8fb8e8; --ink:#f4ead3; --muted:#c3b79c; --line:#3a2414;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:radial-gradient(140% 100% at 50% -10%, #2a1a0d 0%, var(--bg) 55%, #090603 100%);color:var(--ink);
  font-family:"Spline Sans","Segoe UI",system-ui,sans-serif;min-height:100dvh;-webkit-text-size-adjust:100%;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.wrap{max-width:1120px;margin:0 auto;padding:14px 16px 46px}
header.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Big Shoulders Display",sans-serif;font-weight:800;letter-spacing:.04em;text-transform:uppercase;font-size:20px;color:var(--ink);text-decoration:none}
.brand .g{color:var(--gold)}
.brand .tile{width:26px;height:38px;border-radius:5px;background:linear-gradient(160deg,#fff,#e6d7b4);position:relative;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px #b89c66,0 2px 4px rgba(0,0,0,.5)}
.brand .tile:before,.brand .tile:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2a1a0e,#0c0703);box-shadow:0 1px 0 rgba(255,255,255,.5)}
.brand .tile:before{top:8px}.brand .tile:after{bottom:8px}
.brand .tile i{position:absolute;left:12%;right:12%;top:50%;height:1px;background:rgba(90,60,25,.4);box-shadow:0 1px 0 rgba(255,255,255,.5)}
.topbtns{display:flex;gap:8px;flex-wrap:wrap}
.btn{cursor:pointer;border:1px solid var(--line);background:linear-gradient(180deg,#241608,#1a1007);color:var(--ink);
  font:600 13px/1 "Spline Sans",sans-serif;padding:10px 14px;border-radius:10px;letter-spacing:.02em;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;gap:7px;min-height:38px}
.btn:hover{border-color:var(--gold);color:var(--gold2)}
.btn:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2208;border-color:#a86f1e;font-weight:800}
.btn[disabled]{opacity:.45;cursor:default}
.icononly{padding:10px 12px}

.scorebar{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin:4px 0 14px}
.team{flex:1;min-width:150px;border-radius:14px;padding:12px 16px;position:relative;overflow:hidden;background:linear-gradient(180deg,#20130a,#160d07);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.team:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#b9a07a,#6b5236)}
.team.us:before{background:linear-gradient(180deg,#7bd167,#3f7a33)}
.team.them:before{background:linear-gradient(180deg,#e0705a,#8a3a2c)}
.team.c2:before{background:linear-gradient(180deg,#ffd37a,#b4842b)}
.team.c3:before{background:linear-gradient(180deg,#8fb8e8,#3f6aa0)}
.team h3{margin:0 0 3px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.team .marks{font-family:"Big Shoulders Display",sans-serif;font-size:40px;font-weight:800;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink)}
.team.us .marks{color:var(--green)}.team.them .marks{color:var(--red)}.team.c2 .marks{color:var(--gold2)}.team.c3 .marks{color:var(--blue)}
.team .sub{font-size:11px;color:var(--muted);margin-top:3px}
.team.active{border-color:var(--gold)}
.team.active h3:after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.chip{display:inline-block;font-size:11px;padding:3px 9px;border-radius:20px;background:#291809;border:1px solid #4a3016;color:var(--gold2);font-weight:600;letter-spacing:.02em}

.table{position:relative;border-radius:30px;padding:22px 20px;min-height:300px;
  background:radial-gradient(120% 85% at 50% 12%, var(--felt-hi) 0%, var(--felt) 42%, var(--felt-lo) 100%);
  border:16px solid #3a2414;
  box-shadow:inset 0 0 70px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,207,122,.16),inset 0 3px 0 rgba(255,255,255,.05),0 16px 44px rgba(0,0,0,.55)}
.felt-vignette{position:absolute;inset:0;border-radius:16px;pointer-events:none;box-shadow:inset 0 0 120px rgba(0,0,0,.4)}
.seat{position:relative;text-align:center}
.seat .who{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#eafff0;opacity:.85;text-shadow:0 1px 2px rgba(0,0,0,.6);margin-bottom:7px}
.seat.active .who{color:var(--gold2);opacity:1}
.seat.active .who:after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-left:7px;box-shadow:0 0 8px var(--green);vertical-align:middle}
.hidden-hand{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;min-height:34px}
.backbone{width:17px;height:31px;border-radius:5px;background:linear-gradient(160deg,#5a3a1e,#341f0f);border:1px solid #23150a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 3px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.4);position:relative}
.backbone:after{content:"";position:absolute;inset:3px;border-radius:3px;border:1px solid rgba(232,161,58,.18)}

.center{margin:12px 0 6px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.status{font-family:"Big Shoulders Display",sans-serif;font-size:19px;letter-spacing:.01em;color:#fff4dd;text-align:center;min-height:22px;font-weight:700;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.felt-note{font-size:12px;color:#dff5e6;opacity:.75;text-align:center;min-height:16px}

/* the line of play: a horizontal chain that scrolls when it grows; doubles stand crosswise */
.line{width:100%;overflow-x:auto;overflow-y:hidden;padding:14px 8px;scrollbar-width:thin;scrollbar-color:rgba(255,207,122,.35) transparent}
.line-inner{display:flex;align-items:center;justify-content:center;gap:3px;min-width:max-content;margin:0 auto;padding:0 10px}
.line .bone{--w:34px;flex:0 0 auto}
.line .bone.end{box-shadow:0 7px 12px rgba(0,0,0,.42),0 0 0 2px rgba(255,207,122,.75),inset 0 2px 0 rgba(255,255,255,.95)}
.line .bone.spin{box-shadow:0 7px 12px rgba(0,0,0,.42),0 0 0 2px rgba(143,184,232,.8),inset 0 2px 0 rgba(255,255,255,.95)}
.endtag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#dff5e6;opacity:.8;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.endtag b{color:var(--gold2)}

/* premium bones */
.bone{--w:56px;width:var(--w);height:calc(var(--w)*1.92);
  background:linear-gradient(158deg,#fbf4e2 0%,var(--bone) 46%,var(--bone-lo) 100%);
  border-radius:10px;border:1px solid var(--bone-edge);position:relative;overflow:hidden;flex:0 0 auto;
  box-shadow:0 7px 12px rgba(0,0,0,.42),0 2px 4px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.95),inset 0 -3px 5px rgba(150,115,60,.28),inset 2px 0 3px rgba(255,255,255,.4),inset -2px 0 4px rgba(150,115,60,.2);
  display:flex;flex-direction:column}
.bone.h{width:calc(var(--w)*1.92);height:var(--w);flex-direction:row}
.bone .half{flex:1;position:relative}
.bone .divider{position:absolute;z-index:2}
.bone:not(.h) .divider{left:11%;right:11%;top:50%;height:0;border-top:1px solid rgba(96,64,26,.4);filter:drop-shadow(0 1px 0 rgba(255,255,255,.65))}
.bone.h .divider{top:11%;bottom:11%;left:50%;width:0;border-left:1px solid rgba(96,64,26,.4);filter:drop-shadow(1px 0 0 rgba(255,255,255,.65))}
.bone .spinner{position:absolute;left:50%;top:50%;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;z-index:3;
  background:radial-gradient(circle at 35% 30%,#ffe9a8 0%,var(--brass) 55%,#6b4e08 100%);box-shadow:0 0 0 1px rgba(70,45,5,.35),inset 0 1px 1px rgba(255,255,255,.7),0 1px 1px rgba(0,0,0,.3)}
.pip{position:absolute;width:15%;aspect-ratio:1/1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 42% 34%,#3a2712 0%,#1a0f06 55%,#0c0703 100%);
  box-shadow:inset 0 1.5px 2px rgba(0,0,0,.85),inset 0 -1px 1px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.5)}
.bone.h .pip{width:auto;height:15%}
.bone.big .pip{width:13%}.bone.h.big .pip{width:auto;height:13%}

.hand{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:108px}
.hand-bone{cursor:default;transition:transform .13s ease, box-shadow .13s ease}
.hand-bone.playable{cursor:pointer}
.hand-bone.playable:hover{transform:translateY(-10px);box-shadow:0 14px 20px rgba(0,0,0,.5),0 0 0 2px var(--gold2),inset 0 2px 0 rgba(255,255,255,.95)}
.hand-bone.playable:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.hand-bone.unplayable{opacity:.4;filter:saturate(.6)}
.handrail{margin-top:16px;padding:16px 14px 12px;border-radius:18px;background:linear-gradient(180deg,#2c1b0d,#180f07);border:1px solid var(--line);
  box-shadow:inset 0 3px 12px rgba(0,0,0,.55),inset 0 0 0 2px rgba(255,207,122,.06),0 6px 18px rgba(0,0,0,.4)}
.mybones-label{text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:12px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center}
.mybones-label b{color:var(--gold2);font-weight:700}
.actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px;min-height:38px}

@keyframes dealIn{from{opacity:0;transform:translateY(16px) scale(.86) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes slapIn{0%{opacity:0;transform:translateY(-26px) scale(1.22) rotate(-5deg)}55%{opacity:1;transform:translateY(2px) scale(.97) rotate(1deg)}100%{transform:none}}
@keyframes scorePop{0%{transform:scale(1)}40%{transform:scale(1.25);color:var(--gold2)}100%{transform:scale(1)}}
.deal{animation:dealIn .34s cubic-bezier(.2,.7,.3,1) both}
.slap{animation:slapIn .3s cubic-bezier(.2,.8,.3,1.25) both}
.pop{animation:scorePop .5s ease 1}
@media (prefers-reduced-motion:reduce){.deal,.slap,.pop{animation:none!important}}

.overlay{position:fixed;inset:0;background:rgba(6,3,1,.8);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:60;animation:fade .18s ease both;overflow:auto}
@keyframes fade{from{opacity:0}to{opacity:1}}
.panel{background:linear-gradient(180deg,#231508,#160d07);border:1px solid #4a3016;border-radius:20px;max-width:560px;width:100%;padding:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px rgba(255,207,122,.08);margin:auto}
.panel h2{margin:0 0 8px;font-family:"Big Shoulders Display",sans-serif;font-size:30px;font-weight:800;letter-spacing:.01em;text-wrap:balance}
.panel h2 .g{color:var(--gold2)}
.panel p{color:var(--muted);font-size:14px;margin:0 0 14px;line-height:1.55;max-width:62ch}
.panel p b{color:#ecdcb8}
.opts{display:flex;flex-wrap:wrap;gap:9px}
.opt{cursor:pointer;border:1px solid #4a3016;background:linear-gradient(180deg,#2a1809,#20130a);color:var(--ink);border-radius:11px;padding:12px 15px;font:700 15px/1 "Spline Sans",sans-serif;min-width:58px;text-align:center;transition:.12s;font-variant-numeric:tabular-nums;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.opt:hover{border-color:var(--gold);color:var(--gold2);transform:translateY(-1px)}
.opt:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.opt.big{font-size:16px;padding:14px 20px}
.opt.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#3a2208;border-color:#a86f1e;font-weight:800}
.opt.sel{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 0 1px var(--gold) inset}
.foot{text-align:center;margin-top:20px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.foot .g{color:var(--gold)}
.foot a{color:var(--gold2);text-decoration:none}

@media(max-width:600px){
  .bone{--w:44px}.line .bone{--w:28px}
  .team .marks{font-size:30px}.brand{font-size:16px}
  .wrap{padding:10px 10px 32px}.table{padding:14px 10px;border-width:12px}
  .status{font-size:16px}
}