/* Datamac classics — a daylight lounge and a complementary night theme. */
:root{--table:#e4eee8;--table-ink:#254d45;--table-line:#bdcfc3;--board-edge:#b88a55;--board-cream:#f9edcf;--board-green:#316f59;--card-width:84px;--card-height:122px;--card-step:44px}
html[data-theme=shadow]{--table:#153d34;--table-ink:#e4f4e8;--table-line:#427363;--board-edge:#8c663f;--board-cream:#eadabb;--board-green:#295941}
.classics-entrances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:30px 0 46px}
.collection-door{display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:24px;box-shadow:0 8px 28px #365c7910;transition:transform .2s,box-shadow .2s}
.collection-door:hover{transform:translateY(-5px);box-shadow:0 16px 35px #315a7822}
.door-art{position:relative;width:100%;aspect-ratio:1.8;overflow:hidden;background:#f5eee2}
.door-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;transition:transform .35s}
.collection-door:hover img{transform:scale(1.035)}.door-art .door-art-dark{display:none}
html[data-theme=shadow] .door-art .door-art-light{display:none}html[data-theme=shadow] .door-art .door-art-dark{display:block}
.collection-door-content{padding:23px 25px 25px;flex:1;display:flex;flex-direction:column}
.collection-door small{color:#397a95;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800}
.collection-door h2{font-size:clamp(1.4rem,2.2vw,1.85rem);color:var(--text);margin:7px 0 9px;line-height:1.25}
.collection-door p{font-size:.92rem;line-height:1.7;color:var(--muted);margin:0 0 20px;flex:1}
.door-link{font-size:.9rem;font-weight:750;color:var(--accent);display:flex;align-items:center;gap:10px}
.collection-door:focus-visible,.classic-card:focus-within{outline:3px solid var(--accent);outline-offset:4px}
.classic-hero{background:radial-gradient(ellipse at 95% 20%,#d6eae3aa,transparent 55%),linear-gradient(120deg,#f7fbff,#e9f3ff);border-bottom:1px solid var(--line);padding:44px 0 36px;color:var(--text)}
.classic-hero .container{max-width:1180px}.classic-hero h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.035em;color:var(--text);margin:12px 0}
.classic-hero p{max-width:740px;font-size:1.04rem;line-height:1.8;color:var(--muted);margin:12px 0}
.classic-hero .eyebrow{color:#397a95;font-size:.7rem;letter-spacing:.17em}.classic-hero>a,.classic-hero .container>a{color:var(--accent)!important;font-size:.85rem;font-weight:650}
.classic-hero .container>span:last-child:not(.eyebrow){display:block;color:var(--muted);font-size:.85rem;margin-top:12px}
.classic-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.classic-tabs a{padding:10px 18px;border:1px solid var(--line);background:var(--surface);border-radius:30px;color:var(--muted);font-size:.9rem;font-weight:650}
.classic-tabs a[aria-current]{background:#e0eee8;color:#285742;border-color:#aecfbc}
html[data-theme=shadow] .classic-hero{background:radial-gradient(ellipse at 90% 10%,#184c4160,transparent 60%),#101c33}html[data-theme=shadow] .classic-tabs a[aria-current]{background:#254e42;color:#d7eddc;border-color:#42735e}html[data-theme=shadow] .collection-door small,html[data-theme=shadow] .classic-hero .eyebrow{color:#b8d8c6}
.classic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:36px 0}.classic-card{border:1px solid var(--line);background:var(--surface);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 17px #365c7907;transition:transform .2s,box-shadow .2s}.classic-card:hover{transform:translateY(-4px);box-shadow:0 12px 25px #365c7917}
.classic-card-art{height:176px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(130deg,#eaf0df,#f7eedf);font-size:3.8rem;color:#50735c;position:relative}.classic-card:nth-child(2n) .classic-card-art{background:linear-gradient(130deg,#e6edf5,#f4eee3)}
.classic-card-art svg{width:100%;height:100%}.classic-card-art .preview-cards{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding-top:8px}.preview-cards .playing-card{position:absolute;box-shadow:0 5px 12px #253f3f25;pointer-events:none;--card-width:69px;--card-height:101px}.preview-cards .playing-card:nth-child(1){transform:translateX(-45px) rotate(-18deg)}.preview-cards .playing-card:nth-child(2){transform:translateY(-8px) rotate(-2deg)}.preview-cards .playing-card:nth-child(3){transform:translateX(45px) rotate(15deg)}
html[data-theme=shadow] .classic-card-art{background:linear-gradient(130deg,#233f3b,#253043)}html[data-theme=shadow] .classic-card:nth-child(2n) .classic-card-art{background:linear-gradient(130deg,#24364c,#354335)}
.classic-card-body{padding:20px;display:flex;flex-direction:column;flex:1}.classic-card h2{font-size:1.22rem;margin:10px 0;color:var(--text)}.classic-card p{font-size:.9rem;line-height:1.7;margin-bottom:20px;color:var(--muted)}.classic-card .btn{margin-top:auto;align-self:flex-start}.classic-meta{font-size:.72rem;color:var(--muted)}
.classic-book{border:1px solid #cdb989;border-radius:20px;padding:28px;margin:22px 0 48px;background:linear-gradient(110deg,#e9d8a61c,transparent)}.classic-book h2{margin:10px 0}.classic-tag{display:inline-block;padding:5px 10px;border-radius:20px;background:#b9933f18;color:#94702e;font-size:.68rem;font-weight:750;letter-spacing:.1em}
.classic-play{max-width:1180px;margin:26px auto;padding:0 24px}.play-toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}.play-toolbar button,.play-toolbar select,.classic-play button.action{padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:.87rem;font-weight:650;cursor:pointer;box-shadow:0 2px 4px #00000006;min-height:44px}.play-toolbar button:hover,.classic-play button.action:hover{border-color:var(--accent);background:var(--surface2)}.play-toolbar>a{font-size:.86rem;color:var(--accent);margin-left:auto}.rules-note{font-size:.78rem;color:var(--muted)}
.classic-status{border:1px solid var(--line);border-left:4px solid #4d8c71;border-radius:12px;padding:14px 18px;background:var(--surface);margin:18px 0;min-height:54px;font-size:.92rem;font-weight:600;line-height:1.6}
.classic-arena{padding:26px;border-radius:23px;border:8px solid #d1b78b;background:radial-gradient(ellipse at 45% 25%,#ffffff44,transparent 70%),repeating-linear-gradient(27deg,#ffffff04 0 1px,transparent 1px 4px),var(--table);color:var(--table-ink);box-shadow:0 3px 0 #b6996e,0 14px 28px #31483516,inset 0 0 35px #234b3311;min-height:300px;overflow:hidden}
html[data-theme=shadow] .classic-arena{border-color:#725338;box-shadow:0 3px 0 #533c28,0 14px 28px #0003,inset 0 0 35px #0002}
.classic-arena h2,.classic-arena h3{color:var(--table-ink)}.classic-arena h3{font-size:.85rem;font-weight:750;margin:0 0 11px}.classic-arena h3 small{display:block;font-size:.69rem;opacity:.65;font-weight:500;margin-top:3px}.classic-arena p{font-size:.86rem;line-height:1.7}.classic-arena button{font:inherit;cursor:pointer;touch-action:manipulation}.classic-arena button:disabled{opacity:.45;cursor:default}.classic-arena button:focus-visible{outline:3px solid #0878ef;outline-offset:3px}.classic-arena .action{margin:4px}.score-strip{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 20px;padding:12px 16px;background:#ffffff50;border:1px solid #ffffff55;border-radius:12px;color:var(--table-ink);font-size:.85rem;font-weight:650}
html[data-theme=shadow] .score-strip{background:#ffffff09;border-color:#ffffff15}.classic-rules{margin:25px 0 45px;padding:24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:18px;line-height:1.85;font-size:.92rem}.classic-rules summary{cursor:pointer;font-size:1.03rem;font-weight:700}.classic-rules li{margin:10px 0}.classic-card .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* Full playing cards, with an exposed rank/suit strip large enough to tap. */
.hand{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 22px;align-items:flex-start}.playing-card{width:var(--card-width);height:var(--card-height);min-width:var(--card-width);flex-shrink:0;position:relative;display:inline-block;padding:0!important;border:1px solid #cfcfc6;border-radius:9px;background:linear-gradient(140deg,#fff,#fcfcf8);color:#203744;box-shadow:0 2px 3px #1b373820;user-select:none;-webkit-user-select:none;vertical-align:top;text-align:left;font-weight:700;overflow:hidden;isolation:isolate;transition:box-shadow .15s,border-color .15s}
.playing-card.red{color:#c3374a}.playing-card .card-corner{position:absolute;z-index:2;display:flex;gap:3px;align-items:center;line-height:1;pointer-events:none}.card-corner.top{left:7px;top:8px}.card-corner.bottom{right:7px;bottom:8px;transform:rotate(180deg)}.card-corner b{font:750 17px/1 Georgia,serif;letter-spacing:-.03em}.card-corner i{font:20px/1 Georgia,serif;font-style:normal}.card-face{position:absolute;inset:27px 16px;pointer-events:none}.card-pip{position:absolute;transform:translate(-50%,-50%);font:20px/1 Georgia,serif;font-style:normal}.face-frame{position:absolute;inset:0;border:1px solid currentColor;opacity:.9;display:flex;flex-direction:column;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,transparent,transparent 8px,#b99e5420 8px,#b99e5420 9px)}.face-frame b{font-size:37px;line-height:1;color:inherit}.face-frame small{font-size:16px;line-height:1.3}
.playing-card.back{border:4px solid #fff;background:repeating-linear-gradient(45deg,#2d6d92 0 2px,#236285 2px 7px);color:#eff6ed;display:inline-grid;place-items:center}.card-back-medallion{border:1px solid #e8d8a8;border-radius:50%;width:40px;height:48px;display:grid;place-items:center;font-family:Georgia,serif;font-size:25px;color:#e8d8a8;background:#245678}.playing-card.empty{box-shadow:inset 0 1px 5px #254f3610;border:2px dashed #779c8b70;background:#ffffff22;color:#537b6999;display:inline-grid;place-items:center}.slot-symbol{font:35px/1 Georgia,serif;pointer-events:none}.playing-card.selected{border:3px solid #0878ef;box-shadow:0 0 0 2px #b2defb,0 4px 12px #17629225;background:#fffef6}.selection-check{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#0878ef;color:white;display:grid;place-items:center;font:700 12px/1 system-ui;z-index:3;pointer-events:none}.playing-card.playable{border-color:#75a486;box-shadow:0 0 0 2px #c0dcc2,0 3px 8px #234a2c15}.playing-card.movable{cursor:grab}.playing-card.movable:active{cursor:grabbing}.playing-card:not(.back):not(.empty):hover{box-shadow:0 0 0 2px #81b7d9,0 3px 9px #264a4c20}.playing-card.drop-ready{border-color:#0878ef;background:#edf7ff;box-shadow:0 0 0 2px #0878ef4a}.playing-card.dragging{opacity:.35}.drag-over{outline:3px dashed #0878ef!important;outline-offset:4px}.playing-card *{pointer-events:none}
.card-zones{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:12px}.card-zones .hand{gap:8px;margin:0}.table-zone{padding:8px 0}.table-instructions{display:flex;gap:15px;flex-wrap:wrap;margin:8px 0 22px!important;font-size:.77rem!important;color:var(--table-ink);opacity:.85}.table-instructions span{padding:7px 12px;border:1px solid var(--table-line);border-radius:30px;background:#ffffff25}.selection-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:12px 14px;background:#eff8ff;border:1px solid #acd3ed;border-radius:12px;color:#195581;margin:10px 0 20px;font-size:.84rem}.selection-bar .action{padding:8px 12px;min-height:40px;font-size:.76rem}.tableau-scroll{overflow-x:auto;padding:4px 4px 20px;scrollbar-color:#81a995 transparent;scrollbar-width:thin}.card-columns{display:grid;grid-template-columns:repeat(var(--cols,8),minmax(68px,1fr));gap:14px;min-width:calc(var(--cols,8)*78px);align-items:start}.card-column{border:1px solid transparent;border-radius:12px;padding:5px 3px 8px;min-width:0}.card-column.target-column{border:1px dashed #438dc3;background:#e2f1fc5e}.column-header{width:100%;display:flex;align-items:center;justify-content:center;gap:5px;font-size:.64rem!important;line-height:1.3;padding:9px 0;min-height:36px;background:transparent;border:0;color:var(--table-ink);margin-bottom:6px;white-space:nowrap}.column-header>span{display:none}.target-column .column-header{color:#125e98;font-weight:750}.card-stack{position:relative;width:100%;max-width:var(--card-width);margin:auto}.stack-card{position:absolute;left:0;width:100%;height:var(--card-height)}.stack-card .playing-card{width:100%;min-width:0}.table-footnote{font-size:.72rem!important;margin:7px 0 0;opacity:.65}.run-markers{display:flex;gap:7px}.run-markers span{font:30px Georgia;color:#779c8b60}.run-markers .complete{color:#244f3d}
.pyramid-row{display:flex;justify-content:center;gap:9px;margin:7px 0}.pyramid-row .playing-card{--card-width:66px;--card-height:96px}.pyramid-row .card-pip{font-size:16px}.pyramid-row .card-corner b{font-size:14px}.pyramid-row .card-corner i{font-size:16px}.pyramid-row .card-corner.bottom{display:none}.pyramid-row .card-face{inset:25px 14px 14px}.pyramid-row .face-frame b{font-size:28px}
/* Traditional boards, bevelled counters and real dice. */
.square-grid{display:grid;width:min(100%,520px);aspect-ratio:1;margin:20px auto;gap:1px;border:14px solid #b58d5d;border-radius:10px;box-shadow:0 4px 0 #89643e,0 12px 24px #223f3020;overflow:hidden;background:#2d5d44}.square-grid button{border:0;background:#d9c99e;color:#183d3b;font-size:clamp(1rem,5vw,2.2rem);padding:0;min-width:0;display:grid;place-items:center;position:relative}.square-grid button.dark{background:radial-gradient(ellipse at 50% 20%,#428364,#2d664d)}.square-grid button.legal:after{content:'';width:23%;height:23%;border:2px solid #d8f3d5;border-radius:50%;opacity:.7}.square-grid button.legal:hover{background:#5a9773}.pip{border-radius:50%;display:inline-block;width:76%;height:76%;box-shadow:inset 0 0 0 2px #00000013,0 3px 0 #00000035,0 5px 8px #0004;vertical-align:middle}.pip.white{background:radial-gradient(circle at 35% 25%,#fff,#f0e5c6 75%,#c7b793);border:1px solid #e4d9b9}.pip.black{background:radial-gradient(circle at 35% 25%,#56615d,#1c2b23 68%,#101b15);border:1px solid #4c5a51}.square-grid button.selected{box-shadow:inset 0 0 0 3px #0878ef;background:#e7c67a}
.mill-board{position:relative;background:repeating-linear-gradient(4deg,#ffffff0a 0 1px,transparent 2px 8px),#dec398;border-color:#af8656;gap:0}.mill-board svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.mill-board line{stroke:#705b3e;stroke-width:.042}.mill-board button{background:transparent!important;border-radius:50%;width:80%;height:80%;margin:auto;z-index:1;box-shadow:none;font-size:1.3rem;color:#866d45}.mill-board button .pip{width:74%;height:74%}.mill-board button:has(.pip){font-size:0}.mill-board button.selected{outline:3px solid #0878ef}
.dice-display{display:flex;justify-content:center;align-items:center;gap:10px;margin:16px 0;color:var(--table-ink)}.dice{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;width:52px;height:52px;padding:9px;border:1px solid #d2c5a6;border-radius:10px;background:linear-gradient(130deg,#fffef4,#e9dcb8);box-shadow:0 3px 0 #bca87c,0 6px 12px #2e4d3320}.dice i{width:100%;height:100%;border-radius:50%;background:#334d42;box-shadow:inset 0 1px 1px #0005}.dice i.blank{background:transparent;box-shadow:none}
.domino-tile{width:68px;height:128px;background:linear-gradient(130deg,#fffef7,#e5dfcb);border:1px solid #c7bb99;border-radius:10px;box-shadow:0 4px 0 #b4a888,0 7px 10px #2c493521;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.domino-tile:after{content:'';position:absolute;left:10px;right:10px;top:50%;height:1px;background:#a99d7b}.domino-half{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;padding:10px;width:100%;height:50%}.domino-half i{width:100%;height:100%;background:#263a30;border-radius:50%;box-shadow:inset 0 1px 1px #0005}.domino-half i.blank{background:transparent;box-shadow:none}.domino-chain{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:24px;background:#ffffff20;min-height:140px;border:1px dashed var(--table-line);border-radius:14px;margin:16px 0 25px}.domino-chain .domino-tile{transform:rotate(90deg);margin:0 25px;width:54px;height:104px;flex-shrink:0}.domino-choice{display:flex;flex-direction:column;align-items:center;gap:8px}.domino-choice>div{display:flex;gap:2px}.domino-choice .action{padding:4px 9px;min-width:32px}.domino-choice.available .domino-tile{border-color:#2b8c69;box-shadow:0 4px 0 #7f986d,0 0 0 2px #9ec8aa}
.bg-board{padding:14px;background:repeating-linear-gradient(2deg,#ffffff05 0 2px,transparent 3px 7px),#bc935e;border:9px solid #8a6039;border-radius:12px;box-shadow:0 5px 0 #634323,0 12px 22px #28432c20;max-width:900px;margin:20px auto}.bg-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) 5% repeat(6,minmax(0,1fr));background:#e9d3aa}.bg-point{height:150px;position:relative;display:flex;align-items:center;flex-direction:column;padding:6px 2px;gap:1px;min-width:0}.bg-point:before{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 97%);background:#9c4c39}.bg-point:nth-child(2n):before{background:#346d5b}.bg-point.lower{flex-direction:column-reverse}.bg-point.lower:before{clip-path:polygon(50% 3%,100% 100%,0 100%)}.bg-point>small{position:absolute;bottom:-20px;color:#633f26;font-size:.62rem}.bg-point.lower>small{top:-20px;bottom:auto}.bg-row+.bg-row{margin-top:44px}.bg-point .pip{width:clamp(12px,3.8vw,37px);height:clamp(12px,3.8vw,37px);flex-shrink:0;position:relative;z-index:1}.bg-point .pip:nth-of-type(n+5){margin-top:-22px}.bg-bar{background:#8a6039;display:grid;place-items:center;color:#f3dfbd;position:relative;grid-column:7}.bg-count{position:absolute;z-index:2;top:65%;font-size:.7rem;font-weight:700;color:#fff;text-shadow:0 1px 3px #000;background:#0005;padding:1px 5px;border-radius:20px}.bg-point.can-move{box-shadow:inset 0 0 0 3px #76d7ac}.board-actions{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:16px 0}.board-caption{text-align:center;font-size:.76rem!important;opacity:.7}
.goose-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;max-width:820px;margin:20px auto;padding:14px;background:#c8ad7d;border:6px solid #a48250;border-radius:18px;box-shadow:0 5px 0 #896738}.goose-square{aspect-ratio:1;min-width:0;border-radius:8px;background:#fcf4df;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#6d644d;border:1px solid #bda981}.goose-square:nth-child(2n){background:#edf1dd}.goose-square.special{background:#f7df9f}.goose-square>small{position:absolute;left:6px;top:3px;font-size:.6rem;font-weight:750}.goose-icon{font-size:clamp(1rem,2.7vw,1.6rem);opacity:.85}.race-tokens{display:flex;gap:4px;position:absolute;bottom:5px;justify-content:center;width:100%}.race-token{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.65rem;font-weight:800;background:#fff9e8;border:2px solid #bda67a;box-shadow:0 2px 3px #0003;color:#5e4d31}.race-token.black{background:#294b41;border-color:#658476;color:#fff}
.ludo-board{position:relative;max-width:660px;margin:25px auto;aspect-ratio:1;background:#f2e9d8;border:10px solid #b99566;border-radius:18px;box-shadow:0 5px 0 #8e6a43;overflow:hidden}.ludo-track{position:absolute;inset:6%;display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(14,1fr);gap:2px}.ludo-square{border:1px solid #c8b898;background:#fff9e8;border-radius:4px;position:relative;display:grid;place-items:center;font-size:.48rem;color:#998971}.ludo-square.start{background:#b8d4c5}.ludo-square .race-tokens{inset:0;align-items:center;gap:0}.ludo-square .race-token{width:100%;height:100%;max-height:28px;max-width:28px;border-width:1px;font-size:.55rem}.ludo-square .race-token:nth-child(n+2){position:absolute;transform:translate(3px,3px)}.ludo-center{position:absolute;inset:21%;background:radial-gradient(ellipse at 45% 35%,#fffdf5,#e2d3b7);border:1px solid #c5b288;border-radius:25%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;color:#8e754c}.ludo-center>span{font-family:Georgia,serif;font-size:clamp(1.4rem,4vw,2.4rem)}.ludo-center p{margin:0;font-size:.72rem}.stable-pieces{display:flex;gap:8px}.stable-pieces .race-token{width:30px;height:30px}.horse-controls{display:grid;grid-template-columns:1fr 1fr;gap:16px}.horse-controls>div{padding:15px;border:1px solid var(--table-line);border-radius:14px;background:#ffffff20}.horse-controls .hand{margin:0;gap:5px}.horse-controls button.action{font-size:.75rem;padding:7px 10px}
@media(max-width:1000px){.classic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.classics-entrances{gap:16px}.collection-door-content{padding:20px}.card-columns{gap:10px}.card-zones{--card-width:72px;--card-height:106px}.classic-play{padding:0 18px}}
@media(max-width:620px){:root{--card-width:72px;--card-height:106px;--card-step:44px}.container{width:calc(100% - 32px)}.classics-entrances{grid-template-columns:1fr;gap:20px}.door-art{aspect-ratio:1.9}.collection-door-content{padding:22px}.classic-hero{padding:28px 0}.classic-hero h1{font-size:2rem}.classic-hero p{font-size:.94rem}.classic-hero .container>span:last-child:not(.eyebrow){font-size:.75rem}.classic-grid{gap:12px;margin:24px 0}.classic-card-body{padding:15px}.classic-card h2{font-size:1.08rem}.classic-card-art{height:140px}.classic-meta{font-size:.65rem}.classic-card p{font-size:.8rem}.classic-play{padding:0 10px;margin:18px auto}.classic-arena{padding:14px 10px;border-width:5px;border-radius:17px}.classic-status{font-size:.82rem;padding:12px}.classic-rules{padding:20px;font-size:.84rem}.play-toolbar button{font-size:.75rem;padding:8px 12px}.play-toolbar>a{font-size:.75rem;margin-left:0}.table-zone{width:100%}.card-zones{gap:4px}.card-zones .hand{justify-content:flex-start;gap:8px}.card-zones .playing-card{--card-width:62px;--card-height:89px}.card-zones .card-face{inset:25px 14px}.card-zones .card-corner b{font-size:15px}.card-zones .card-corner i{font-size:17px}.selection-bar{font-size:.76rem;padding:10px}.selection-bar .action{font-size:.7rem}.table-instructions{gap:6px;font-size:.68rem!important}.table-instructions span{padding:6px 9px}.card-columns{gap:8px;grid-template-columns:repeat(var(--cols,8),72px);min-width:calc(var(--cols,8)*80px)}.classic-arena .hand:not(.card-zones .hand){gap:7px}.pyramid-row{gap:3px;margin:4px 0}.pyramid-row .playing-card{--card-width:39px;--card-height:61px;border-radius:5px}.pyramid-row .card-corner.top{left:3px;top:4px;gap:1px}.pyramid-row .card-corner b{font-size:11px}.pyramid-row .card-corner i{font-size:12px}.pyramid-row .card-face{inset:20px 7px 8px}.pyramid-row .card-pip{font-size:10px}.pyramid-row .face-frame b{font-size:18px}.pyramid-row .face-frame small{font-size:11px}.square-grid{border-width:8px}.dice{width:45px;height:45px;padding:8px;gap:3px}.bg-board{padding:6px;border-width:5px}.bg-point{height:106px;padding:4px 1px}.bg-point .pip{width:clamp(12px,5vw,24px);height:clamp(12px,5vw,24px)}.bg-row+.bg-row{margin-top:35px}.bg-point .pip:nth-of-type(n+5){margin-top:-14px}.bg-count{font-size:.55rem}.goose-board{gap:3px;padding:6px;border-width:4px}.goose-square{border-radius:4px}.goose-square>small{left:3px;top:1px;font-size:.45rem}.goose-icon{font-size:.85rem}.race-token{width:16px;height:16px;font-size:.5rem;border-width:1px}.ludo-board{border-width:6px}.horse-controls{gap:7px}.horse-controls>div{padding:10px}.horse-controls button.action{font-size:.65rem}.stable-pieces{gap:4px}.stable-pieces .race-token{width:22px;height:22px}.ludo-center{gap:8px}.domino-tile{width:57px;height:110px}.domino-chain{gap:8px;padding:12px}.domino-chain .domino-tile{margin:0 20px;width:45px;height:86px}.domino-half{padding:8px;gap:3px}}
@media(prefers-reduced-motion:reduce){.collection-door,.door-art img,.classic-card,.playing-card{transition:none}}
.bg-point{border:0;background:transparent;color:inherit}.bg-point.selected{box-shadow:inset 0 0 0 3px #0878ef}.bg-bar{overflow:hidden}.bg-bar button.action{font-size:.5rem;padding:6px 1px;margin:3px 0;min-height:32px;max-width:100%;word-break:break-all}.bg-bar>div{position:relative;z-index:1}
.pyramid-hole{width:66px;min-width:66px;height:96px;display:block}.preview-cards .playing-card .card-corner b{font-size:14px}.preview-cards .playing-card .card-corner i{font-size:16px}.preview-cards .card-face{inset:26px 15px}.preview-cards .card-pip{font-size:17px}.preview-cards .face-frame b{font-size:28px}@media(max-width:620px){.pyramid-hole{width:39px;min-width:39px;height:61px}}
.bg-point{height:160px}.bg-point .pip{width:clamp(12px,3.2vw,28px);height:clamp(12px,3.2vw,28px)}.bg-point .pip:nth-of-type(n+5){margin-top:0}.bg-board .bg-point>small{pointer-events:none}@media(max-width:620px){.bg-point{height:130px}.bg-point .pip{width:clamp(12px,5vw,23px);height:clamp(12px,5vw,23px)}}
.bg-bar .bar-counter{padding:4px 0;border:0;background:transparent;display:flex;align-items:center;flex-direction:column;gap:3px;width:100%;color:#f8e8c9;min-height:34px}.bg-bar .bar-counter .pip{width:16px;height:16px;min-width:0}.bg-bar .bar-counter small{font-size:.6rem}
/* Panoramic title artwork: the quiet left side protects the reading area. */
.classic-hero{min-height:290px;background-color:#f3f8fb;background-image:linear-gradient(90deg,#f5faffed 0%,#f5faffc9 36%,#f5faff55 55%,#f5faff00 77%),url('/assets/images/classics/title-banner-v39.webp');background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;isolation:isolate}
.classic-hero .container{position:relative;width:min(1180px,calc(100% - 64px))}.classic-hero h1,.classic-hero p{max-width:62%}.classic-hero .classic-tabs{position:relative;max-width:65%}.classic-tabs a{background:color-mix(in srgb,var(--surface) 94%,transparent)}
html[data-theme=shadow] .classic-hero{background-color:#101c33;background-image:linear-gradient(90deg,#101c33fc 0%,#101c33f2 36%,#101c33b8 60%,#101c3360 100%),url('/assets/images/classics/title-banner-v39.webp');background-size:cover;background-position:center}
@media(max-width:800px){.classic-hero h1,.classic-hero p{max-width:76%}.classic-hero .classic-tabs{max-width:85%}.classic-hero{background-position:62% center}}
@media(max-width:620px){.classic-hero{min-height:290px;background-position:right center;background-image:linear-gradient(90deg,#f5fafff5 0%,#f5faffdf 47%,#f5faffa1 100%),url('/assets/images/classics/title-banner-v39.webp')}.classic-hero .container{width:calc(100% - 32px)}.classic-hero h1,.classic-hero p,.classic-hero .classic-tabs{max-width:100%}.classic-hero .classic-tabs{gap:7px}.classic-hero .classic-tabs a{padding:9px 13px;font-size:.79rem}html[data-theme=shadow] .classic-hero{background-position:right center;background-image:linear-gradient(90deg,#101c33f5 0%,#101c33e8 50%,#101c33b8 100%),url('/assets/images/classics/title-banner-v39.webp')}}
.classic-hero,html[data-theme=shadow] .classic-hero{background-size:100% 100%,auto 110%;background-position:center,right center}

/* Category banners: cover the entire viewport instead of sizing only to 110%
   of its height, which left a blank strip on wide screens. Preserve the
   original artwork and gradient, and retain its right-side focal point on phones. */
.classic-hero.classic-hero--collection,html[data-theme=shadow] .classic-hero.classic-hero--collection{background-size:100% 100%,cover;background-position:center,center}
@media(max-width:620px){.classic-hero.classic-hero--collection,html[data-theme=shadow] .classic-hero.classic-hero--collection{background-position:center,right center}}