#page-game{--game-green:#102820;--game-green-deep:#0b201a;--game-linen:#f3eddf;--game-ink:#16352d;--game-brass:#b8975d;background:var(--game-linen);color:var(--game-ink)}
#page-game main{overflow:hidden}
#page-game .game-eyebrow{margin:0 0 1rem;color:var(--game-brass);font:500 var(--type-eyebrow)/1.4 var(--font-sans);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
#page-game :is(.game-hero,.game-glance,.game-learn,.game-score){color:var(--game-linen)}
#page-game :is(.game-hero,.game-glance,.game-score) .game-eyebrow{color:var(--colour-brass-light)}
#page-game h1,#page-game h2,#page-game h3{font-family:var(--font-serif);font-weight:400}
#page-game .game-hero{position:relative;min-height:clamp(680px,86vh,900px);padding:clamp(9rem,14vw,13rem) max(6vw,calc((100vw - 1280px)/2)) 6rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);align-items:center;gap:clamp(3rem,8vw,9rem);background:radial-gradient(circle at 76% 38%,rgba(184,151,93,.18),transparent 28%),linear-gradient(140deg,#17382e 0%,#0c231c 68%,#081914 100%)}
#page-game .game-hero::after{content:'♣';position:absolute;left:46%;bottom:-.25em;color:rgba(201,169,105,.045);font:400 clamp(20rem,40vw,44rem)/1 var(--font-serif);transform:rotate(-12deg);pointer-events:none}
#page-game .game-hero__copy{position:relative;z-index:2;max-width:48rem}
#page-game .game-hero h1{margin:0 0 1.5rem;max-width:10ch;color:var(--game-linen);font-size:clamp(4rem,7.5vw,7.6rem);line-height:.94;letter-spacing:-.035em}
#page-game .game-hero__lead{max-width:37rem;color:rgba(243,237,223,.78);font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.75}
#page-game .game-jump,#page-game .game-close__links a{position:relative;display:inline-flex;align-items:center;min-height:44px;margin-top:2rem;color:var(--colour-brass-light);font:500 var(--type-action)/1.4 var(--font-sans);letter-spacing:var(--tracking-action);text-transform:uppercase;text-decoration:none}
#page-game .game-jump::after,#page-game .game-close__links a::after{content:'→';margin-left:.65rem;transition:transform .18s ease}
#page-game .game-jump::before,#page-game .game-close__links a::before{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(.28);transform-origin:left;transition:transform .18s ease}
#page-game .game-jump:hover::before,#page-game .game-close__links a:hover::before{transform:scaleX(1)}
#page-game .game-jump:hover::after,#page-game .game-close__links a:hover::after{transform:translateX(4px)}
#page-game .game-hero__cards{position:relative;z-index:1;min-height:36rem;display:grid;place-items:center}
#page-game .game-hero__cards img{width:min(78%,390px);height:auto;transform:rotate(6deg);filter:drop-shadow(0 2.5rem 3rem rgba(0,0,0,.45))}
#page-game .game-hero__cards::before{content:none;position:absolute;width:min(78%,390px);aspect-ratio:63/89;border-radius:7.46%/5.28%;border:1px solid rgba(201,169,105,.36);transform:translate(-2.3rem,1rem) rotate(-5deg)}
#page-game .game-hero__suit{position:absolute;right:0;bottom:2rem;color:rgba(201,169,105,.24);font:400 9rem/1 var(--font-serif)}
#page-game .game-origin{padding:clamp(6rem,10vw,10rem) max(6vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:clamp(3rem,9vw,10rem)}
#page-game .game-origin h2,#page-game .game-section-head h2{margin:0;color:var(--game-ink);font-size:clamp(3rem,5.4vw,5.5rem);line-height:1.02;letter-spacing:-.025em}
#page-game .game-origin__story{max-width:45rem;padding-top:2.6rem;border-top:1px solid rgba(22,53,45,.24)}
#page-game .game-origin__story p{margin:0 0 1.4rem;font-size:clamp(1rem,1.3vw,1.14rem);line-height:1.85}
#page-game .game-origin__story .game-origin__note{margin-top:2.5rem;color:#7f5d28;font:400 italic clamp(1.35rem,2.1vw,2rem)/1.45 var(--font-serif)}
#page-game .game-glance{padding:clamp(6rem,9vw,9rem) max(6vw,calc((100vw - 1240px)/2));background:linear-gradient(145deg,#14352b,#0b211a)}
#page-game .game-section-head{max-width:60rem;margin-bottom:clamp(3.5rem,6vw,6rem)}
#page-game .game-section-head h2{color:var(--game-linen)}
#page-game .game-section-head--light h2{color:var(--game-ink)}
#page-game .game-section-head>p:last-child{max-width:46rem;margin-top:1.5rem;font-size:1.08rem;line-height:1.75}
#page-game .game-glance__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(201,169,105,.38);border-bottom:1px solid rgba(201,169,105,.38)}
#page-game .game-glance__grid article{min-height:20rem;padding:2.6rem 2rem;border-right:1px solid rgba(201,169,105,.26)}
#page-game .game-glance__grid article:last-child{border-right:0}
#page-game .game-glance__grid strong{display:block;margin-bottom:2.5rem;color:var(--colour-brass-light);font:300 clamp(4rem,6vw,6.5rem)/1 var(--font-serif)}
#page-game .game-glance__grid h3{margin:0 0 .8rem;font-size:1.45rem}
#page-game .game-glance__grid p{color:rgba(243,237,223,.7);line-height:1.7}
#page-game .game-ranks{padding:clamp(6rem,10vw,10rem) max(5vw,calc((100vw - 1280px)/2))}
#page-game .rank-board{border:1px solid rgba(184,151,93,.45);background:#f8f3e8;box-shadow:0 2rem 5rem rgba(29,48,39,.08)}
#page-game .rank-row{display:grid;grid-template-columns:13rem 1fr;align-items:stretch;border-bottom:1px solid rgba(22,53,45,.16)}
#page-game .rank-row:last-child{border-bottom:0}
#page-game .rank-row__label{padding:2rem;display:flex;flex-direction:column;justify-content:center;border-right:1px solid rgba(22,53,45,.16)}
#page-game .rank-row__label span{margin-bottom:.45rem;color:#84632d;font:500 .68rem/1.4 var(--font-sans);letter-spacing:.18em;text-transform:uppercase}
#page-game .rank-row__label strong{font:400 1.45rem/1.2 var(--font-serif)}
#page-game .rank-row ol{margin:0;padding:1.3rem;display:grid;grid-template-columns:repeat(8,1fr);gap:.7rem;list-style:none}
#page-game .rank-row li{min-width:0;aspect-ratio:3/4;padding:.8rem .45rem;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(22,53,45,.18);background:var(--game-linen)}
#page-game .rank-row--trump li:first-child,#page-game .rank-row--trump li:nth-child(2){color:var(--game-linen);border-color:var(--game-brass);background:var(--game-green)}
#page-game .rank-row b{font:400 clamp(1.3rem,2vw,2rem)/1 var(--font-serif)}
#page-game .rank-row small{margin-top:.55rem;color:#92713a;font:.62rem/1 var(--font-sans)}
#page-game .rank-row--trump li:is(:first-child,:nth-child(2)) small{color:var(--colour-brass-light)}
#page-game .rank-row li img[hidden]{display:none}
#page-game .rank-row li img{flex:1 1 0;min-height:0;width:100%;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
#page-game .rank-row li:has(img:not([hidden])){aspect-ratio:68/115;padding:.35rem .3rem .5rem;border-color:transparent;background:transparent}
#page-game .rank-row--trump li:is(:first-child,:nth-child(2)):has(img:not([hidden])) small{padding:.28rem .6rem;border-radius:999px;background:var(--game-green);color:var(--colour-brass-light)}
#page-game .rank-row li:has(img:not([hidden])) small{margin-top:.4rem;padding:.28rem 0;line-height:1}   /* same height as the Boer/Manel pills, so both rows' cards match */
#page-game .rank-row li img:not([hidden])+b{display:none}
#page-game .rank-board__key{margin-top:1rem;color:rgba(22,53,45,.68);font-size:.82rem}
#page-game .game-learn{padding:clamp(6rem,10vw,10rem) max(6vw,calc((100vw - 1180px)/2));background:#18392f}
#page-game .game-steps{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 5rem;list-style:none;border-top:1px solid rgba(201,169,105,.32)}
#page-game .game-steps li{min-height:14rem;padding:2.3rem 0;display:grid;grid-template-columns:3rem 1fr;gap:1.4rem;border-bottom:1px solid rgba(201,169,105,.24)}
#page-game .game-steps span{color:var(--colour-brass-light);font:.7rem/1.5 var(--font-sans);letter-spacing:.16em}
#page-game .game-steps h3{margin:0 0 .8rem;font-size:clamp(1.5rem,2.2vw,2.1rem)}
#page-game .game-steps p{margin:0;color:rgba(243,237,223,.74);line-height:1.75}
#page-game .game-variant{margin:5rem 0 0 auto;max-width:47rem;padding:3rem;border:1px solid rgba(201,169,105,.46);background:rgba(8,28,22,.38)}
#page-game .game-variant h3{margin:0 0 1rem;font-size:2rem}
#page-game .game-variant p:last-child{color:rgba(243,237,223,.76);line-height:1.8}
#page-game .game-score{padding:clamp(6rem,10vw,10rem) max(6vw,calc((100vw - 1180px)/2));display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(4rem,9vw,9rem);background:#0d261f}
#page-game .game-score h2{max-width:9ch;margin:0 0 1.5rem;font-size:clamp(3.4rem,6vw,6.3rem);line-height:.98}
#page-game .game-score__main>p:not(.game-eyebrow){max-width:40rem;color:rgba(243,237,223,.76);line-height:1.8}
#page-game .score-equation{margin-top:3.5rem;display:flex;align-items:baseline;gap:clamp(.75rem,2vw,1.8rem);color:var(--colour-brass-light);font:300 clamp(2.8rem,5vw,5rem)/1 var(--font-serif)}
#page-game .score-equation i{font-size:.55em;font-style:normal;opacity:.5}
#page-game .score-equation strong{color:var(--game-linen);font-weight:400}
#page-game .game-roem{padding-left:clamp(2rem,5vw,5rem);border-left:1px solid rgba(201,169,105,.38)}
#page-game .game-roem dl{margin:0}
#page-game .game-roem dl div{padding:1.3rem 0;display:grid;grid-template-columns:4.4rem 1fr;align-items:baseline;border-top:1px solid rgba(201,169,105,.24)}
#page-game .game-roem dt{color:var(--colour-brass-light);font:400 2rem/1 var(--font-serif)}
#page-game .game-roem dd{margin:0;color:rgba(243,237,223,.78);line-height:1.6}
#page-game .game-roem__note{margin-top:1.5rem;color:rgba(243,237,223,.58);font-size:.82rem;line-height:1.7}
#page-game .game-words{padding:clamp(6rem,10vw,10rem) max(6vw,calc((100vw - 1180px)/2))}
#page-game .game-words__grid{margin:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(22,53,45,.2);border-left:1px solid rgba(22,53,45,.2)}
#page-game .game-words__grid div{min-height:13rem;padding:2rem;border-right:1px solid rgba(22,53,45,.2);border-bottom:1px solid rgba(22,53,45,.2)}
#page-game .game-words dt{margin-bottom:1.1rem;color:#8b672f;font:400 1.8rem/1 var(--font-serif)}
#page-game .game-words dd{margin:0;line-height:1.7}
#page-game .game-close{padding:clamp(6rem,9vw,9rem) max(7vw,calc((100vw - 1080px)/2));display:grid;grid-template-columns:minmax(240px,.62fr) minmax(0,1fr);align-items:center;gap:clamp(4rem,10vw,10rem);background:#765f31;color:var(--game-linen)}
#page-game .game-close img{width:min(100%,350px);height:auto;filter:drop-shadow(0 1.6rem 2rem rgba(30,19,3,.3));transform:rotate(-3deg)}
#page-game .game-close h2{max-width:12ch;margin:0 0 1.5rem;font-size:clamp(3rem,5.5vw,5.7rem);line-height:1}
#page-game .game-close p:not(.game-eyebrow){max-width:39rem;color:rgba(243,237,223,.82);font-size:1.08rem;line-height:1.8}
#page-game .game-close__links{display:flex;flex-wrap:wrap;gap:1rem 2rem}
#page-game .game-close__links a{color:var(--game-linen)}
#page-game .game-sources{padding:3rem max(6vw,calc((100vw - 1180px)/2)) 4rem;background:#e9dfcd}
#page-game .game-sources h2{margin:0 0 .6rem;font-size:1.4rem}
#page-game .game-sources p{margin:0 0 1rem;color:rgba(22,53,45,.72);font-size:.86rem}
#page-game .game-sources ul{margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;list-style:none}
#page-game .game-sources a{color:#62491f;font-size:.78rem;text-decoration:underline;text-underline-offset:.25em}
#page-game :is(.game-jump,.game-close__links a,.game-sources a):focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(max-width:1024px){
  #page-game .game-hero{grid-template-columns:minmax(0,1.05fr) minmax(260px,.6fr);gap:2rem}
  #page-game .game-glance__grid{grid-template-columns:1fr 1fr}
  #page-game .game-glance__grid article:nth-child(2){border-right:0}
  #page-game .game-glance__grid article:nth-child(-n+2){border-bottom:1px solid rgba(201,169,105,.26)}
  #page-game .game-words__grid{grid-template-columns:repeat(3,1fr)}
  #page-game .game-words__grid div{padding:1.5rem}
}
@media(max-width:767px){
  #page-game .game-hero{min-height:0;padding:8rem var(--gutter-mobile) 5rem;grid-template-columns:1fr;gap:2rem}
  #page-game .game-hero h1{font-size:clamp(3.5rem,16vw,5.2rem)}
  #page-game .game-hero__cards{min-height:28rem}
  #page-game .game-hero__cards img,#page-game .game-hero__cards::before{width:min(70vw,310px)}
  #page-game .game-origin,#page-game .game-score,#page-game .game-close{grid-template-columns:1fr}
  #page-game .game-origin,#page-game :is(.game-glance,.game-ranks,.game-learn,.game-score,.game-words,.game-close){padding:5rem var(--gutter-mobile)}
  #page-game .game-origin__story{padding-top:2rem}
  #page-game .game-section-head{margin-bottom:3.5rem}
  #page-game .game-origin h2,#page-game .game-section-head h2{font-size:clamp(2.7rem,12vw,4rem)}
  #page-game .game-glance__grid{grid-template-columns:1fr}
  #page-game .game-glance__grid article{min-height:0;border-right:0;border-bottom:1px solid rgba(201,169,105,.26)}
  #page-game .game-glance__grid article:last-child{border-bottom:0}
  #page-game .game-glance__grid strong{margin-bottom:1.3rem}
  #page-game .game-steps{grid-template-columns:1fr}
  #page-game .game-steps li{min-height:0}
  #page-game .game-variant{margin-top:3.5rem;padding:2rem}
  #page-game .game-score h2{font-size:clamp(3.2rem,14vw,4.7rem)}
  #page-game .game-roem{padding:3rem 0 0;border-top:1px solid rgba(201,169,105,.38);border-left:0}
  #page-game .game-words__grid{grid-template-columns:1fr}
  #page-game .game-words__grid div{min-height:0}
  #page-game .game-close{gap:3.5rem}
  #page-game .game-close img{width:min(78vw,320px);justify-self:center}
  #page-game .game-close h2{font-size:clamp(3rem,13vw,4.5rem)}
  #page-game .game-sources{padding:3rem var(--gutter-mobile)}
  #page-game .game-sources ul{display:grid}
}
/* Card ranks: label above the cards below 1100px so the cards keep a readable size; 4 per line on narrow phones */
@media(max-width:1100px){
  #page-game .rank-row{grid-template-columns:1fr}
  #page-game .rank-row__label{padding:1.2rem 1.5rem;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:1rem;border-right:0;border-bottom:1px solid rgba(22,53,45,.16)}
  #page-game .rank-row__label span{margin-bottom:0}
  #page-game .rank-row ol{padding:1rem;gap:.55rem}
}
@media(max-width:860px){
  #page-game .rank-row ol{grid-template-columns:repeat(4,1fr);gap:.6rem .5rem;padding:.9rem .7rem}
  #page-game .rank-row small{font-size:.7rem}
  #page-game .rank-row li:has(img:not([hidden])){aspect-ratio:auto;padding:0}
  #page-game .rank-row li img{flex:none;height:auto}
}
@media(min-width:681px) and (max-width:860px){
  #page-game .rank-row ol{max-width:620px;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){#page-game .game-jump::after,#page-game .game-jump::before,#page-game .game-close__links a::after,#page-game .game-close__links a::before{transition:none}}