.home-view { margin:32px auto; max-width:1100px; padding:24px 12px; }
.home-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }
.home-eyebrow { margin:0 0 12px; font-size:14px; letter-spacing:2px; color:var(--muted); }
.home-heading h1 { margin:0; font-size:clamp(26px,3vw,38px); color:var(--heading); font-weight:600; }
.home-preferences { padding:10px 0; background:none; border:0; border-bottom:1px solid var(--line); color:var(--muted); font-size:14px; min-height:44px; }
.home-preferences:hover { color:var(--heading); border-color:var(--accent); }
.variant-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.variant-card { display:flex; flex-direction:column; padding:0; min-width:0; border:2px solid var(--frame-light); color:var(--text); background:var(--panel); text-align:left; box-shadow:inset 0 0 0 2px var(--frame-dark),0 4px 0 #0005; overflow:hidden; transition:transform .16s,border-color .16s; }
.variant-card:hover:not(:disabled) { transform:translateY(-5px); border-color:var(--accent); }
.variant-card:focus-visible { outline:3px solid var(--focus); outline-offset:5px; }
.variant-card:disabled { cursor:wait; opacity:.7; }
.variant-art { height:205px; position:relative; display:grid; place-items:center; overflow:hidden; background:var(--felt-pattern),radial-gradient(ellipse at center,var(--felt-glow),transparent 80%),var(--felt-base); border-bottom:6px solid var(--frame); box-shadow:inset 0 0 0 7px var(--frame-dark),inset 0 0 0 9px var(--frame-light); }
.variant-art::after { content:''; position:absolute; inset:19px; border:1px solid var(--felt-line); pointer-events:none; }
.variant-bones { display:flex; gap:9px; transform:rotate(-8deg); z-index:1; }
.variant-bones .domino { width:48px; height:92px; }
.variant-bones .domino:nth-child(2) { transform:translateY(-12px); }
.art-all-fives .variant-bones { transform:rotate(8deg); }.art-block .variant-bones { transform:rotate(-3deg); gap:5px; }
.art-block .domino:nth-child(2) { transform:translateY(9px); }
.variant-art-mark { position:absolute; right:23px; top:23px; color:var(--felt-muted); font:600 21px var(--mono); opacity:.7; }
.art-all-fives .variant-art-mark { color:var(--gold); opacity:1; }
.variant-card-copy { display:flex; flex-direction:column; padding:23px; flex:1; }
.variant-tag { color:var(--muted); font-size:13px; margin-bottom:8px; }
.variant-card-copy>strong { color:var(--heading); font-size:26px; font-weight:600; }
.variant-description { font-size:15px; line-height:1.7; color:var(--muted); min-height:52px; margin-top:10px; }
.variant-card-start { display:flex; justify-content:space-between; color:var(--gold); border-top:1px solid var(--line-soft); margin-top:22px; padding-top:18px; font-size:16px; }
.resume-game { width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 22px; margin-bottom:24px; border:1px solid var(--line); background:var(--panel-raised); color:var(--heading); text-align:left; }
.resume-game>span:first-child { display:grid; gap:6px; }.resume-game strong { font-size:17px; }.resume-game small { font-size:14px; color:var(--muted); }.resume-game>span:last-child { color:var(--gold); white-space:nowrap; }
.resume-game:hover { border-color:var(--accent); }
.home-footer { display:flex; justify-content:space-between; align-items:center; margin-top:25px; color:var(--muted); font-size:14px; min-height:44px; }
.table-topline { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#fives-meter { color:var(--felt-text); font-size:14px; }#fives-meter strong { color:var(--gold); font:600 20px var(--mono); padding-left:5px; }
.hand-play-zone .board-ends { --dock-width:252px; width:min(var(--dock-width),calc(100% - 8px)); left:clamp(min(calc(var(--dock-width) / 2 + 4px),50%),var(--choice-x,50%),max(calc(100% - var(--dock-width) / 2 - 4px),50%)); grid-template-columns:repeat(var(--choice-count,2),minmax(0,1fr)); gap:6px; }
.hand-play-zone .board-ends[data-count='3'] { --dock-width:300px; --choice-count:3; }
.hand-play-zone .board-ends[data-count='4'] { --dock-width:356px; --choice-count:4; }
.hand-play-zone .end-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.end-button small { font:600 12px var(--mono); }.end-button:has(small) { padding-block:5px; }
body[data-variant='all-fives'] .felt { height:clamp(300px,calc(100vh - 500px),430px); min-height:300px; }
body[data-variant='all-fives'] .hand-play-zone .hand-tiles { padding-top:82px; }
body[data-variant='block'] .hand-area .hand-heading { grid-template-columns:minmax(0,1fr) auto; }
.variant-rule-tabs { display:flex; gap:6px; margin:0 0 20px; }
.variant-rule-tabs button { flex:1; min-height:42px; padding:8px; border:1px solid var(--line); background:var(--panel-deep); color:var(--muted); font-size:14px; }
.variant-rule-tabs button[aria-pressed='true'] { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.variant-rules { display:grid; gap:20px; margin:25px 0; }.variant-rules h3 { margin:0 0 7px; color:var(--heading); font-size:16px; }.variant-rules p { margin:0; color:var(--muted); font-size:15px; line-height:1.8; }
.fives-round-gains { display:flex; justify-content:space-around; padding:12px; border-bottom:1px solid var(--line); color:var(--gold); font-size:15px; }
@media(max-width:850px) {
  .home-view { margin:12px auto; padding:20px 8px; }.home-heading { align-items:flex-start; flex-direction:column; gap:12px; }.variant-grid { gap:14px; }.variant-art { height:160px; }.variant-card-copy { padding:16px; }.variant-card-copy>strong { font-size:22px; }.variant-description { font-size:14px; min-height:76px; }.variant-bones { gap:4px; transform:scale(.8) rotate(-8deg); }.art-all-fives .variant-bones { transform:scale(.8) rotate(8deg); }.art-block .variant-bones { transform:scale(.8) rotate(-3deg); }
}
@media(max-width:620px) {
  .home-heading { margin-bottom:20px; }.variant-grid { grid-template-columns:1fr; }.variant-card { display:grid; grid-template-columns:32% minmax(0,1fr); }.variant-art { height:100%; min-height:175px; border-bottom:0; border-right:4px solid var(--frame); }.variant-bones { transform:scale(.67) rotate(-12deg); gap:3px; }.art-all-fives .variant-bones { transform:scale(.67) rotate(8deg); }.art-block .variant-bones { transform:scale(.67) rotate(-3deg); }.variant-bones .domino:nth-child(3) { display:none; }.variant-art-mark { top:14px; right:12px; font-size:17px; }.variant-art::after { inset:12px; }.variant-card-copy { padding:16px 18px; }.variant-tag { margin-bottom:5px; }.variant-description { min-height:0; margin-top:6px; line-height:1.5; }.variant-card-start { margin-top:14px; padding-top:10px; font-size:14px; }.home-eyebrow { font-size:12px; }.home-footer { font-size:13px; }.resume-game { padding:16px; }
  body[data-variant='all-fives'] .felt { height:320px; min-height:320px; }.hand-play-zone .end-button { font-size:14px; padding-inline:4px; }
}
@media(prefers-reduced-motion:reduce) { .variant-card { transition:none; } }
.reduced-motion .variant-card { transition:none; }