:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#ddd;background:#1d1d1d;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer}#app{position:relative;width:100%;height:100dvh;min-height:390px;overflow:hidden;background:#1e1e1e;display:flex;flex-direction:column}header{height:116px;position:relative;flex:none;display:flex;align-items:flex-start;justify-content:space-between;padding:52px 3% 0;z-index:5}.heading{position:absolute;left:50%;top:46px;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:3px;white-space:nowrap}.heading span{color:#9c9c9c;font-size:20px;font-weight:600}.heading strong{font-size:25px}.home,.menu{border:0;background:#1d2722;color:#319960;border-radius:12px;height:48px}.home{padding:0 24px;font-size:24px}.menu{font-size:15px;letter-spacing:-4px;padding:0 22px;min-width:145px}.menu span{letter-spacing:0;font-size:22px;margin-left:25px}main{flex:1;min-height:0;display:flex;align-items:center}.viewport{width:100%;height:310px;position:relative;overflow:hidden;touch-action:pan-x}.track{height:100%;position:relative;min-width:100%;user-select:none;--card-w:clamp(115px,21vw,217px);--card-h:calc(var(--card-w) * 1.25);--step:calc(var(--card-w) * .86)}.stack{position:absolute;top:50%;width:var(--card-w);height:var(--card-h);transform:translateY(-50%);padding:0;border:0;background:transparent;text-align:left;transition:left .2s ease}.layer,.face,.back{position:absolute;inset:0;border-radius:clamp(15px,2vw,25px)}.layer{background:#222;border:2px solid #3c3c3c}.face{background:#222;border:2px solid #3e3e3e;display:flex;align-items:center;justify-content:center}.face .rank{font-size:calc(var(--card-w)*.45);font-weight:700;line-height:1}.face .suit{position:absolute;font-size:calc(var(--card-w)*.27);font-weight:700;line-height:1}.suit.tl{top:9%;left:9%}.suit.br{bottom:9%;right:9%;transform:rotate(180deg)}.red{color:#ff414c}.black{color:#e2e2e2}.stack.selected .face{box-shadow:inset 0 0 0 2px rgba(63,171,105,.9)}.stack:focus-visible,.draw:focus-visible{outline:3px solid #33aa65;outline-offset:3px}.draw{position:absolute;top:50%;transform:translateY(-50%);width:var(--card-w);height:var(--card-h);border:0;background:none;padding:0}.back,.back-layer{position:absolute;inset:0;background:#319960;border-radius:clamp(15px,2vw,25px);border:2px solid #72c18c}.back-layer{transform:translate(9px,12px);background:#287e4c}.back-layer.second{transform:translate(15px,19px);background:#20673e}.back{display:flex;align-items:center;justify-content:center;color:white;font-size:calc(var(--card-w)*.48);font-weight:600}.draw:disabled{opacity:.35;cursor:default}footer{height:95px;flex:none;display:flex;justify-content:space-between;align-items:flex-end;padding:0 3% 25px;gap:15px}.rules{display:flex;flex-wrap:wrap;gap:9px}.rule{background:#253129;color:#ddd;border:3px solid #288d54;border-radius:19px;padding:10px 13px;font-size:21px;font-weight:650;white-space:nowrap}.rule.known{background:#23543a}.remaining{font-size:49px;font-weight:700;line-height:1.05}.menu-wrap{position:relative}.options{position:absolute;right:0;top:57px;width:210px;border:1px solid #454545;border-radius:12px;background:#292929;padding:9px;box-shadow:0 8px 30px #0008;display:grid;gap:2px}.options button,.options label{color:#ddd;background:transparent;border:0;padding:11px;text-align:left;border-radius:6px;font-size:15px}.options button:hover{background:#3a3a3a}.options label{cursor:pointer}.hidden{display:none!important}.toast{position:absolute;bottom:105px;left:50%;transform:translateX(-50%);max-width:90%;padding:9px 16px;border-radius:12px;background:#303c34;color:#eee;font-size:14px;opacity:0;pointer-events:none;transition:opacity .15s;z-index:7}.toast.show{opacity:1}.overlay{position:absolute;inset:0;background:#0009;z-index:20;display:grid;place-items:center;padding:18px}.dialog{width:min(440px,100%);background:#292929;border:1px solid #454545;border-radius:18px;padding:24px;line-height:1.5}.dialog h2{margin:0 0 10px}.dialog p{white-space:pre-line}.dialog button{background:#2c9656;color:white;border:0;padding:12px 19px;border-radius:9px;margin:7px 8px 0 0}.dialog button.secondary{background:#444}@media(max-width:650px){header{height:100px;padding-top:34px}.heading{top:34px}.heading span{font-size:15px}.heading strong{font-size:19px}.home,.menu{height:40px;font-size:18px;padding:0 13px}.menu{min-width:82px;font-size:11px}.menu span{margin-left:10px;font-size:16px}.viewport{height:250px}.track{--card-w:clamp(112px,27vw,170px)}footer{height:92px;padding-bottom:19px}.rule{font-size:13px;border-width:2px;border-radius:11px;padding:9px 6px}.rules{gap:4px}.remaining{font-size:35px}}@media(max-height:530px){header{height:70px;padding-top:16px}.heading{top:15px}footer{height:62px;padding-bottom:9px}.viewport{height:215px}.track{--card-w:clamp(98px,17vw,165px)}.rule{padding:5px 8px;font-size:14px}.remaining{font-size:32px}}

/* v2: rule popovers and motion */
.menu{letter-spacing:0;display:flex;gap:12px;align-items:center;justify-content:center}.menu .menu-dots{width:34px;height:34px;border-radius:50%;background:#319960;color:#18231c;display:grid;place-items:center;font-size:22px;letter-spacing:0;line-height:1}.menu span{margin:0}
.stack{transition:left .34s cubic-bezier(.2,.8,.2,1),filter .22s,transform .25s cubic-bezier(.2,.8,.2,1);will-change:left,transform}.stack.selected{transform:translateY(calc(-50% - 8px))}.stack.entering{animation:card-deal .42s cubic-bezier(.15,.9,.3,1) both}.draw.draw-press .back{animation:draw-press .22s ease-out}.stack.moving .face{filter:brightness(1.13)}
@keyframes card-deal{from{opacity:.4;transform:translate(75px,-50%) scale(.88)}to{opacity:1;transform:translate(0,-50%) scale(1)}}@keyframes draw-press{50%{transform:translateY(6px) scale(.98)}}
.rule-shade{position:absolute;inset:0;background:rgba(0,0,0,.48);z-index:8;animation:shade-in .2s ease-out}.rule-popover{position:absolute;z-index:12;width:min(430px,calc(100% - 24px));max-height:min(610px,calc(100dvh - 24px));overflow:auto;background:#292929;border:1px solid #484848;border-radius:15px;padding:20px 22px;box-shadow:0 16px 48px #0009;color:#e6e6e6;animation:popover-in .22s cubic-bezier(.2,.8,.2,1)}.rule-popover:after{content:'';position:absolute;bottom:-8px;left:var(--arrow-left,35px);width:14px;height:14px;background:#292929;border-right:1px solid #484848;border-bottom:1px solid #484848;transform:rotate(45deg)}.rule-popover.above:after{bottom:-8px}.rule-popover.below:after{top:-8px;bottom:auto;transform:rotate(225deg)}.rule-popover .discovered-heading{color:#369b60;font-size:19px;font-weight:700;margin-bottom:13px}.rule-popover .rule-description{font-size:18px;font-weight:650;line-height:1.35;margin:16px 0 7px}.rule-popover .rule-demo{height:180px;border-radius:15px;background:#363636;display:flex;align-items:center;justify-content:center;gap:12px;overflow:hidden;position:relative}.demo-card{width:54px;height:76px;flex:none;border:2px solid #319960;background:#fff;color:#319960;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 3px #0002;position:relative;z-index:1}.demo-card span:first-child{font-size:19px}.demo-card span:last-child{font-size:22px}.demo-card.demo-source{z-index:3;animation:demo-move 2.25s ease-in-out infinite}.rule-demo.skip .demo-source{--travel:-198px}.rule-demo.adjacent .demo-source{--travel:-66px}@keyframes demo-move{0%,15%{transform:translate(0,0)}48%,75%{transform:translate(var(--travel),-12px)}93%,100%{transform:translate(0,0)}}.demo-block{font-size:40px;color:#fa4a4a;animation:blocked-pulse 2.25s ease-in-out infinite}@keyframes blocked-pulse{0%,100%{transform:scale(.8);opacity:.6}45%,75%{transform:scale(1.13);opacity:1}}.rule-popover .continue{display:block;margin:18px 0 0 auto;border:0;border-radius:9px;padding:10px 19px;font-weight:650;color:white;background:#308c55}.rule-popover .close-rule{position:absolute;top:9px;right:10px;border:0;background:transparent;color:#bbb;font-size:22px;padding:4px 10px}.rule.active{position:relative;z-index:11;border-color:#65c789}.rule.known{transition:background .35s,border-color .35s}.rule-popover .demo-note{font-size:12px;color:#aaa;margin:8px 0 0}@keyframes shade-in{from{opacity:0}to{opacity:1}}@keyframes popover-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:590px){.rule-popover .rule-demo{height:120px}.rule-popover{padding:13px 16px}.demo-card{transform:scale(.8)}}@media(prefers-reduced-motion:reduce){.stack,.rule,.rule-shade,.rule-popover{transition:none!important;animation:none!important}.demo-source,.demo-block{animation:none!important}}

/* v3: rule contents size the popover; dialogs remain above the board. */
#app{isolation:isolate}
.menu{min-width:90px;padding-inline:16px}
.menu .menu-dots{margin:0}
.rule-popover{height:auto;max-height:none;overflow:visible;box-sizing:border-box}
.overlay{position:fixed;inset:0;z-index:1000;isolation:isolate}
.dialog{position:relative;z-index:1;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.options{z-index:30}
/* On short windows the dialog can use page scrolling instead of clipping. */
@media(max-height:480px){.rule-popover{max-height:calc(100dvh - 20px);overflow-y:auto;overscroll-behavior:contain}.overlay{overflow-y:auto;place-items:safe center}}

/* v4: full-height carousel. Only the horizontal edges clip the board. */
main{position:static;min-height:0;pointer-events:none}
.viewport{position:absolute;inset:0;width:100%;height:100%!important;overflow:hidden;pointer-events:none;z-index:1}
.track{height:100%;pointer-events:none}
.stack,.draw{pointer-events:auto}
header,footer{position:relative;z-index:5;pointer-events:none}
header button,header .menu-wrap,footer button{pointer-events:auto}
/* Allow selected stacks and raised pile layers to extend vertically without a shallow clip. */
.stack.selected{transform:translateY(calc(-50% - 12px))}
/* Rule card dismisses from outside; no close icon in the anchored popover. */
.rule-popover .close-rule{display:none}
/* Draw flip: start as the blue back, then turn over into the matching face. */
.stack.entering{animation:deal-arrive .42s cubic-bezier(.2,.8,.2,1) both;transform-style:preserve-3d;perspective:900px}
.stack.entering .face{animation:face-reveal .36s ease-in-out both;backface-visibility:hidden}
.deal-flip-back{position:absolute;inset:0;border-radius:clamp(15px,2vw,25px);background:#319960;border:2px solid #72c18c;display:flex;align-items:center;justify-content:center;color:white;font-size:calc(var(--card-w)*.48);font-weight:600;backface-visibility:hidden;animation:back-hide .36s ease-in-out both;pointer-events:none}
@keyframes deal-arrive{0%{opacity:.85;translate:65px 0;scale:.96}45%{opacity:1;translate:0 0;scale:1}100%{opacity:1;translate:0 0;scale:1}}
@keyframes face-reveal{0%,45%{transform:rotateY(-90deg)}100%{transform:rotateY(0deg)}}
@keyframes back-hide{0%,38%{transform:rotateY(0deg);opacity:1}55%,100%{transform:rotateY(90deg);opacity:0}}
.flight-card{box-shadow:0 8px 20px rgba(0,0,0,.12)}
@media(prefers-reduced-motion:reduce){.stack.entering,.stack.entering .face,.deal-flip-back{animation:none!important}.deal-flip-back{display:none}}

/* v5: deck separation and in-flight card animations. */
.stack-animation-flyer,.stack-animation-target{transition:none!important}
.draw-flight{position:fixed;z-index:95;pointer-events:none;perspective:1000px}
.draw-flight-inner{position:absolute;inset:0;transform-style:preserve-3d}
.draw-flight-back,.draw-flight-face{position:absolute;inset:0;border-radius:clamp(15px,2vw,25px);backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.draw-flight-back{background:#319960;border:2px solid #72c18c;color:#fff;font-size:calc(var(--card-w)*.48);font-weight:600}
.draw-flight-face{background:#222;border:2px solid #3e3e3e;transform:rotateY(180deg)}
.draw-flight-face .rank{font-size:calc(var(--card-w)*.45);font-weight:700}
.draw-flight-face .suit{position:absolute;font-size:calc(var(--card-w)*.27);font-weight:700}
.draw-flight-face .suit.tl{top:9%;left:9%}.draw-flight-face .suit.br{bottom:9%;right:9%;transform:rotate(180deg)}

/* Empty carousel surface must receive pointer events for deselection. */
.viewport{pointer-events:auto}

/* v6: full-size stack flight and pixel-matched flipped card face. */
.stack-animation-flyer{transition:none!important;transform-origin:top left;}
.stack-animation-flyer .face,.stack-animation-flyer .layer{transition:none!important;animation:none!important;}
.draw-flight-face.face{transform:rotateY(180deg);backface-visibility:hidden;}
/* Hide the landing stack without altering its dimensions or its neighbors. */

/* v7: radius-accurate selection, uninterrupted jump-and-join stacking. */
.track{--card-radius:clamp(15px,2vw,25px)}
.stack.selected{transform:translateY(calc(-50% - var(--card-radius)))}
.stack-animation-target,.stack-animation-flyer{pointer-events:none!important;will-change:transform;z-index:96!important}
/* The merged stack needs to render above neighboring piles on descent. */
.stack.stack-landing{z-index:80!important}

/* v7.2: flying clones animate independently of the selected stack style. */
.stack-animation-flyer,.stack-animation-target{transform:none;transition:none!important;}

/* v7.3: source stack must pass visibly in front of the jumping destination. */
.stack-animation-target{z-index:96!important}
.stack-animation-flyer{z-index:97!important}

/* Version 8 — the landing page is independent of Classic's existing layout. */
.website-home{position:fixed;inset:0;background:#1e1e1e;color:#eee;z-index:150;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.website-home.hidden{display:none!important}
.site-fixed-header{position:fixed;left:0;right:0;top:0;z-index:160;display:flex;align-items:center;justify-content:space-between;padding:calc(20px + env(safe-area-inset-top,0px)) max(24px,4vw) 12px;pointer-events:none}
.site-wordmark{font-weight:700;font-size:clamp(23px,2.2vw,31px);line-height:48px;letter-spacing:-.04em}
.site-menu-wrap{position:relative;pointer-events:auto}.site-menu{width:76px;height:48px;border:0;border-radius:12px;background:#1d2722;color:#319960;display:grid;place-items:center}.site-menu-dots{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#319960;color:#17271b;letter-spacing:0;font-size:22px;font-weight:700}
.site-options{position:absolute;right:0;top:56px;min-width:200px;border:1px solid #454545;border-radius:12px;background:#292929;padding:8px;display:flex;flex-direction:column;box-shadow:0 10px 28px #0009}
.site-options a,.site-options button{background:none;border:0;color:#eee;text-align:left;text-decoration:none;padding:12px;border-radius:7px;font-size:15px}.site-options a:hover,.site-options button:hover{background:#414141}
.home-scroll{height:100%;overflow:auto;overscroll-behavior-y:contain;display:flex;flex-direction:column;align-items:stretch;padding-top:calc(105px + env(safe-area-inset-top,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.home-content{flex:1;display:flex;flex-direction:column;align-items:center;width:100%;gap:clamp(22px,4vh,42px);padding:8px 20px 30px}.home-brand{display:flex;flex-direction:column;align-items:center;gap:12px}.brand-icon{height:clamp(96px,14vh,152px);width:clamp(96px,14vh,152px);border-radius:24%;object-fit:cover;box-shadow:0 10px 35px #0005}
.store-slot{min-height:53px;display:flex;justify-content:center;align-items:center}.store-link img{display:block;height:53px;width:auto}.store-unavailable{color:#888;border:1px solid #494949;border-radius:8px;padding:10px 14px;font-size:13px}
.home-picker{width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,38px)}.home-arrow{font-size:36px;color:#555;background:none;border:0;width:36px}.home-arrow:disabled{opacity:.27;cursor:default}
.classic-tile{width:clamp(215px,27vw,280px);height:clamp(290px,37vw,365px);background:#222;border:2.5px solid #528e6b;border-radius:20px;box-shadow:0 10px 28px #0007;color:#eee;position:relative;display:grid;place-items:center;transition:transform .2s ease,box-shadow .2s ease}.classic-tile:hover{transform:translateY(-4px);box-shadow:0 15px 32px #000a}.classic-tile:focus-visible{outline:3px solid #319960;outline-offset:5px}.tile-corner{position:absolute;left:14px;top:13px;color:#f2f2f2;font-size:20px;font-weight:700;text-align:left;line-height:1;display:flex;flex-direction:column;gap:1px}.tile-corner span{font-size:18px}.tile-corner-bottom{left:auto;top:auto;right:14px;bottom:13px;transform:rotate(180deg)}.tile-inner{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.tile-inner h1{font-size:clamp(24px,3vw,29px);margin:0}.tile-preview{height:155px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#ddd}.tile-preview span:first-child,.tile-preview span:last-child{font-size:25px}.tile-preview span:nth-child(2){font-size:70px;line-height:1;font-weight:700}.tile-status{font-size:12px;font-weight:600;color:#7ac393;letter-spacing:.14em}
.home-mode{display:flex;align-items:center;justify-content:center;gap:15px;background:#2a2a2a;border:1px solid #444;border-radius:50px;padding:10px 20px}.mode-option{color:#ddd;background:transparent;border:0;font-weight:650;font-size:17px}.mode-option:disabled{color:#777;cursor:default}.mode-track{width:54px;height:30px;border-radius:20px;background:#365b43;padding:4px;display:flex;align-items:center}.mode-thumb{background:#eee;width:22px;height:22px;border-radius:50%;box-shadow:0 1px 3px #0006}
.home-legal{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;padding:20px 16px 24px}.home-legal a{font-size:13px;color:#bdbdbd;text-decoration:underline;text-underline-offset:3px}
#app.game-hidden{display:none!important}
@media(max-width:550px){.site-fixed-header{padding-left:17px;padding-right:17px}.site-wordmark{font-size:23px}.home-scroll{padding-top:calc(96px + env(safe-area-inset-top,0px))}.home-content{gap:22px}.classic-tile{width:min(63vw,240px);height:min(84vw,320px)}.tile-preview{height:100px}.tile-preview span:nth-child(2){font-size:54px}.brand-icon{width:105px;height:105px}.home-mode{margin-top:0}.home-legal{padding-bottom:22px}}
@media(prefers-reduced-motion:reduce){.classic-tile{transition:none}}

/* Version 8.1 — SwiftUI RuleSummary & integrated mode selector */
.classic-tile .tile-inner{gap:0;height:100%;justify-content:center;padding:9% 6%;}
.classic-tile .tile-inner h1{font-size:clamp(22px,2.8vw,28px);margin:0 0 9px;}
.tile-rule-summary{height:52%;width:100%;display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:stretch;text-align:left;color:#aeb0b4;font-size:clamp(10px,1.2vw,13px);line-height:1.38;font-weight:400;}
.tile-rule-row{display:flex;align-items:baseline;gap:4px;min-height:2.6em;}
.tile-rule-number{flex:0 0 auto;}
.tile-rule-text{flex:1;}
.tile-rule-text.redacted{color:transparent;position:relative;user-select:none;-webkit-user-select:none;}
.tile-rule-text.redacted::after{content:'';position:absolute;inset:0.21em 0 0.3em 0;max-height:1.1em;background:repeating-linear-gradient(90deg,#91949a 0 27%,transparent 27% 30%,#91949a 30% 54%,transparent 54% 57%,#91949a 57% 85%,transparent 85%);border-radius:3px;opacity:.55;}
.home-mode{padding:4px;gap:2px;min-width:220px;display:grid;grid-template-columns:1fr 1fr;background:#292b2b;border:1px solid #4b4d4d;}
.home-mode .mode-option{font-size:16px;padding:10px 21px;border-radius:999px;min-width:100px;}
.home-mode .mode-option.active{background:#315940;color:#f4f8f4;box-shadow:0 1px 6px #0005,inset 0 0 0 1px #447c5a;}
.home-mode .mode-option:disabled{color:#8a8e8a;}
@media(max-width:550px){.tile-rule-summary{font-size:clamp(9px,2.7vw,11px);gap:3px}.tile-rule-row{min-height:2.45em}.classic-tile .tile-inner h1{font-size:22px}.home-mode .mode-option{padding:9px 16px;}}

/* Version 8.2: undiscovered rule redactions sized to each word's character count. */
.tile-rule-text.redacted{display:flex;align-items:center;flex-wrap:wrap;column-gap:.32em;row-gap:.25em;min-height:1.38em;}
.tile-rule-text.redacted::after{display:none;content:none;}
.redaction-word{display:inline-block;flex:0 0 auto;height:.78em;border-radius:2px;background:#a3a5aa;opacity:.58;}

/* Version 8.3: round, three-dot-only menu buttons on home and game. */
.site-menu, #app .menu {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  line-height: 1;
}
.site-menu-dots, #app .menu .menu-dots {
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  background: #319960;
  color: #17271b;
  display: grid;
  place-items: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}
.site-menu:focus-visible, #app .menu:focus-visible {
  outline: 2px solid #a1dbb3;
  outline-offset: 3px;
}
.site-options, #app .menu-wrap .options { top: 44px; }

/* Version 8.4: shared menu and Settings sheet */
.site-menu-dots,.menu .menu-dots{display:flex!important;align-items:center!important;justify-content:center!important;line-height:0!important;padding-bottom:2px!important}
.site-options,.options{min-width:175px;width:auto;z-index:210}
.site-options button,.options button{cursor:pointer}
.game-nav-actions{display:flex;align-items:center;gap:8px;pointer-events:auto;z-index:6}
.game-nav-actions .home{padding:0 12px;font-size:clamp(13px,1.5vw,19px)}
.game-nav-actions button[hidden]{display:none!important}
.game-nav-actions button:disabled{opacity:.3;cursor:default}
.settings-layer{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.58);display:grid;place-items:center;padding:16px;color:#eee}
.settings-sheet{width:min(660px,100%);max-height:min(90dvh,830px);display:flex;flex-direction:column;overflow:hidden;background:#252525;border:1px solid #525252;border-radius:20px;box-shadow:0 20px 80px #000b}
.settings-header{flex:none;display:flex;align-items:center;justify-content:space-between;padding:19px 24px;border-bottom:1px solid #454545}
.settings-header h2{margin:0;font-size:23px}.settings-header button{background:#356e4d;border:0;color:#fff;border-radius:9px;padding:9px 15px}
.settings-scroll{overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:16px}
.settings-group{border:1px solid #454545;border-radius:15px;padding:16px 18px;background:#2b2b2b}
.settings-group h3{font-size:18px;margin:0 0 13px;font-weight:700}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid #414141;min-height:49px}
.settings-row label{line-height:1.4;cursor:pointer}.settings-row select{color:#eee;background:#393939;border:1px solid #555;border-radius:8px;padding:8px 10px;font:inherit}
.settings-row input[type=checkbox]{width:23px;height:23px;accent-color:#319960;flex:none;cursor:pointer}
.settings-row input:disabled{cursor:not-allowed}.settings-hint{font-size:13px;line-height:1.5;color:#aaa;margin:0 0 13px}
.settings-action{width:100%;display:block;border:0;border-top:1px solid #414141;text-align:left;padding:13px 0;background:none;color:#eee;font:inherit}
.settings-action:hover{color:#58c787}
.settings-confirm-backdrop{position:absolute;inset:0;background:#000a;display:grid;place-items:center;padding:20px;z-index:1}.settings-confirm{width:min(440px,100%);background:#292929;border:1px solid #555;border-radius:17px;padding:22px;box-shadow:0 20px 60px #000b}.settings-confirm h3{margin:0;font-size:22px}.settings-confirm p{white-space:pre-line;line-height:1.5}.settings-confirm-actions{display:flex;justify-content:flex-end;gap:12px}.settings-confirm-actions button{border:0;border-radius:9px;padding:11px 16px;background:#319960;color:white}.settings-confirm-actions .secondary{background:#494949}button:focus-visible,.settings-action:focus-visible,.settings-row select:focus-visible{outline:2px solid #52c78b;outline-offset:2px}
/* Alternate club/diamond palette, matching two black suits / two red suits when off */
.alternate-suits .face:has(.suit.tl){color:inherit}
.alternate-suits .stack:has([data-suit="clubs"]) .face{color:#58b5ff}
.alternate-suits .stack:has([data-suit="diamonds"]) .face{color:#eabf55}
/* Track position changes only the card row's center, never the full-height clipping window. */
@media(orientation:portrait){:root[data-board-position="top"] .stack,:root[data-board-position="top"] .draw{top:37%}:root[data-board-position="bottom"] .stack,:root[data-board-position="bottom"] .draw{top:63%}}
@media(orientation:landscape){:root:not(.large-landscape-cards) .track{--card-w:clamp(98px,17vw,165px)}}
@media(max-width:600px){.settings-layer{padding:0}.settings-sheet{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0}.settings-scroll{padding:14px}.game-nav-actions{gap:3px}.game-nav-actions .home{padding:0 7px;font-size:13px}}

.alternate-suits .face[data-suit="clubs"]{color:#58b5ff}.alternate-suits .face[data-suit="diamonds"]{color:#eabf55}

/* Version 8.5: native-width Menu buttons, without circular dots. */
.site-menu,#app .menu{height:44px!important;width:auto!important;min-width:92px!important;padding:0 17px!important;border-radius:12px!important;border:0!important;background:#1d2722!important;color:#319960!important;display:flex!important;justify-content:center!important;align-items:center!important;font-size:19px!important;letter-spacing:0!important;font-weight:600!important}
.site-options,#app .menu-wrap .options{top:52px}
/* Position the entire card track in the remaining play area; allow high stacks. */
:root[data-board-position="top"] #app .stack,:root[data-board-position="top"] #app .draw{top:32%}
:root[data-board-position="middle"] #app .stack,:root[data-board-position="middle"] #app .draw{top:50%}
:root[data-board-position="bottom"] #app .stack,:root[data-board-position="bottom"] #app .draw{top:68%}
/* The renderer owns card width, including the four-stack-plus-deck large-card constraint. */
#app .track{--card-h:calc(var(--card-w)*1.25);--step:calc(var(--card-w)*.86)}
/* Alternate suits follow Swift's clovers=green, sapphires=blue. */
.alternate-suits .face[data-suit="clubs"] .suit,.alternate-suits .face[data-suit="clubs"] .rank{color:#38995c}
.alternate-suits .face[data-suit="diamonds"] .suit,.alternate-suits .face[data-suit="diamonds"] .rank{color:#348ccc}
/* Native light palette: Apple system background, cardBackground 0.95, forest green 0.07/0.32/0.18. */
:root[data-appearance="light"]{color-scheme:light;color:#222;background:#f2f2f2}
:root[data-appearance="light"] #app,:root[data-appearance="light"] .website-home{background:#f2f2f2;color:#222}
:root[data-appearance="light"] .site-wordmark,:root[data-appearance="light"] .heading strong{color:#202020}
:root[data-appearance="light"] .heading span{color:#606060}
:root[data-appearance="light"] .face,:root[data-appearance="light"] .layer{background:#f2f2f2;border-color:#d1d1d1}
:root[data-appearance="light"] .face .black{color:#292929}
:root[data-appearance="light"] .face.black{color:#292929}
:root[data-appearance="light"] .rule{color:#24402c;background:#e3eee6;border-color:#12522e}
:root[data-appearance="light"] .rule.known{background:#bfd6c7}
:root[data-appearance="light"] .remaining{color:#333}
:root[data-appearance="light"] .site-menu,:root[data-appearance="light"] #app .menu,:root[data-appearance="light"] .home{background:#dce7de!important;color:#12522e!important}
:root[data-appearance="light"] .settings-sheet,:root[data-appearance="light"] .settings-group,:root[data-appearance="light"] .options,:root[data-appearance="light"] .site-options,:root[data-appearance="light"] .rule-popover,:root[data-appearance="light"] .dialog{background:#f4f4f4;color:#252525;border-color:#d0d0d0}
:root[data-appearance="light"] .settings-layer{color:#252525}
:root[data-appearance="light"] .settings-hint{color:#5b5b5b}
:root[data-appearance="light"] .settings-row,:root[data-appearance="light"] .settings-action{border-color:#dadada;color:#252525}
:root[data-appearance="light"] .settings-row select{background:#fff;color:#252525;border-color:#ccc}
:root[data-appearance="light"] .settings-confirm{background:#fff;color:#222}
:root[data-appearance="light"] .site-options button,:root[data-appearance="light"] .options button{color:#252525}
:root[data-appearance="light"] .classic-tile{background:#f2f2f2;color:#222}
:root[data-appearance="light"] .rule-popover .rule-description{color:#252525}
:root[data-appearance="light"] .rule-popover:after{background:#f4f4f4}

/* Version 8.6 — scrollable full-height carousel with a subtle themed thumb. */
#app .viewport{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#39865a transparent;}
#app .viewport::-webkit-scrollbar{height:9px;}
#app .viewport::-webkit-scrollbar-track{background:transparent;}
#app .viewport::-webkit-scrollbar-thumb{border:2px solid transparent;background-clip:padding-box;background-color:#39865a;border-radius:999px;}
#app .viewport::-webkit-scrollbar-thumb:hover{background-color:#4aac74;}
:root[data-appearance="light"] #app .viewport{scrollbar-color:#649a78 transparent;}
:root[data-appearance="light"] #app .viewport::-webkit-scrollbar-thumb{background-color:#649a78;}
/* Suit palette: hearts stay red; spades are light grey on dark and charcoal on light. */
:root[data-appearance="dark"] .face.red,:root[data-appearance="light"] .face.red{color:#ff414c;}
:root[data-appearance="dark"] .face.black{color:#e2e2e2;}
:root[data-appearance="light"] .face.black{color:#292929;}
:root.alternate-suits .face[data-suit="clubs"],:root.alternate-suits .face[data-suit="clubs"] .rank,:root.alternate-suits .face[data-suit="clubs"] .suit{color:#38995c;}
:root.alternate-suits .face[data-suit="diamonds"],:root.alternate-suits .face[data-suit="diamonds"] .rank,:root.alternate-suits .face[data-suit="diamonds"] .suit{color:#348ccc;}
:root.alternate-suits .face[data-suit="hearts"],:root.alternate-suits .face[data-suit="hearts"] .rank,:root.alternate-suits .face[data-suit="hearts"] .suit{color:#ff414c;}
:root[data-appearance="light"].alternate-suits .face[data-suit="spades"],:root[data-appearance="light"].alternate-suits .face[data-suit="spades"] .rank,:root[data-appearance="light"].alternate-suits .face[data-suit="spades"] .suit{color:#292929;}
:root[data-appearance="dark"].alternate-suits .face[data-suit="spades"],:root[data-appearance="dark"].alternate-suits .face[data-suit="spades"] .rank,:root[data-appearance="dark"].alternate-suits .face[data-suit="spades"] .suit{color:#e2e2e2;}

/* v8.7: consistent Taciturn-green scrollbar inside Settings. */
.settings-scroll{
 scrollbar-width:thin;
 scrollbar-color:#39865a transparent;
}
.settings-scroll::-webkit-scrollbar{width:9px}
.settings-scroll::-webkit-scrollbar-track{background:transparent}
.settings-scroll::-webkit-scrollbar-thumb{
 border:2px solid transparent;
 background-clip:padding-box;
 background-color:#39865a;
 border-radius:999px;
}
.settings-scroll::-webkit-scrollbar-thumb:hover{background-color:#4aac74}
:root[data-appearance="light"] .settings-scroll{scrollbar-color:#649a78 transparent}
:root[data-appearance="light"] .settings-scroll::-webkit-scrollbar-thumb{background-color:#649a78}

/* v8.10: suppress the native scrollbar arrow buttons where supported.
   Scroll thumbs, trackpad/wheel and touch interactions remain unchanged. */
#app .viewport::-webkit-scrollbar-button,
.settings-scroll::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}


/* v8.11: unified Taciturn scrollbar styling anywhere scrollbars can appear. */
:root{
  --tc-scrollbar-dark:#39865a;
  --tc-scrollbar-dark-hover:#4aac74;
  --tc-scrollbar-light:#649a78;
  --tc-scrollbar-light-hover:#7aae8c;
}
.home-scroll,.settings-scroll,#app .viewport,.rule-popover,.legal-page{
  scrollbar-width:thin;
  scrollbar-color:var(--tc-scrollbar-dark) transparent;
}
:root[data-appearance="light"] .home-scroll,
:root[data-appearance="light"] .settings-scroll,
:root[data-appearance="light"] #app .viewport,
:root[data-appearance="light"] .rule-popover,
:root[data-appearance="light"] .legal-page{
  scrollbar-color:var(--tc-scrollbar-light) transparent;
}
.home-scroll::-webkit-scrollbar,
.settings-scroll::-webkit-scrollbar,
#app .viewport::-webkit-scrollbar,
.rule-popover::-webkit-scrollbar,
.legal-page::-webkit-scrollbar{
  width:9px;
  height:9px;
}
.home-scroll::-webkit-scrollbar-track,
.settings-scroll::-webkit-scrollbar-track,
#app .viewport::-webkit-scrollbar-track,
.rule-popover::-webkit-scrollbar-track,
.legal-page::-webkit-scrollbar-track{
  background:transparent;
}
.home-scroll::-webkit-scrollbar-thumb,
.settings-scroll::-webkit-scrollbar-thumb,
#app .viewport::-webkit-scrollbar-thumb,
.rule-popover::-webkit-scrollbar-thumb,
.legal-page::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  background-clip:padding-box;
  background-color:var(--tc-scrollbar-dark);
  border-radius:999px;
}
.home-scroll::-webkit-scrollbar-thumb:hover,
.settings-scroll::-webkit-scrollbar-thumb:hover,
#app .viewport::-webkit-scrollbar-thumb:hover,
.rule-popover::-webkit-scrollbar-thumb:hover,
.legal-page::-webkit-scrollbar-thumb:hover{
  background-color:var(--tc-scrollbar-dark-hover);
}
:root[data-appearance="light"] .home-scroll::-webkit-scrollbar-thumb,
:root[data-appearance="light"] .settings-scroll::-webkit-scrollbar-thumb,
:root[data-appearance="light"] #app .viewport::-webkit-scrollbar-thumb,
:root[data-appearance="light"] .rule-popover::-webkit-scrollbar-thumb,
:root[data-appearance="light"] .legal-page::-webkit-scrollbar-thumb{
  background-color:var(--tc-scrollbar-light);
}
:root[data-appearance="light"] .home-scroll::-webkit-scrollbar-thumb:hover,
:root[data-appearance="light"] .settings-scroll::-webkit-scrollbar-thumb:hover,
:root[data-appearance="light"] #app .viewport::-webkit-scrollbar-thumb:hover,
:root[data-appearance="light"] .rule-popover::-webkit-scrollbar-thumb:hover,
:root[data-appearance="light"] .legal-page::-webkit-scrollbar-thumb:hover{
  background-color:var(--tc-scrollbar-light-hover);
}
.home-scroll::-webkit-scrollbar-button,
.settings-scroll::-webkit-scrollbar-button,
#app .viewport::-webkit-scrollbar-button,
.rule-popover::-webkit-scrollbar-button,
.legal-page::-webkit-scrollbar-button{
  display:none;
  width:0;
  height:0;
}


/* v8.13: light appearance refinement following Taciturn iOS screenshot.
   Dark theme styles and all gameplay geometry/animations are intentionally unchanged. */
/* Apple uses its native San Francisco face; non-Apple browsers use their
   system UI font (Segoe UI/Roboto) for negligible transfer and licensing overhead. */
:root {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,"Noto Sans",Arial,sans-serif;}
.website-home {font-family:inherit;}
:root[data-appearance="light"]{
  --light-page:#fcfcfd;
  --light-card:#f6f6f7;
  --light-panel:#ffffff;
  --light-ink:#191b1b;
  --light-muted:#85878c;
  --light-edge:#e5e6e8;
  --light-green:#145b38;
  background:var(--light-page);
  color:var(--light-ink);
}
:root[data-appearance="light"] #app,
:root[data-appearance="light"] .website-home {background:var(--light-page);color:var(--light-ink);}
:root[data-appearance="light"] .site-wordmark,
:root[data-appearance="light"] .heading strong {color:var(--light-ink);}
:root[data-appearance="light"] .heading span {color:var(--light-muted);}
:root[data-appearance="light"] .face,
:root[data-appearance="light"] .layer {background:var(--light-card);border-color:#d9dadd;}
:root[data-appearance="light"] .face.black,
:root[data-appearance="light"] .face .black {color:#303238;}
:root[data-appearance="light"] .rule {background:#f9faf9;color:var(--light-green);border-color:#2a7850;}
:root[data-appearance="light"] .rule.known {background:#e9f3ec;}
:root[data-appearance="light"] .site-menu,
:root[data-appearance="light"] #app .menu,
:root[data-appearance="light"] .home {background:#f2f5f2!important;color:var(--light-green)!important;}
:root[data-appearance="light"] .site-options,
:root[data-appearance="light"] .options,
:root[data-appearance="light"] .settings-sheet,
:root[data-appearance="light"] .settings-group,
:root[data-appearance="light"] .rule-popover,
:root[data-appearance="light"] .dialog {background:var(--light-panel);color:var(--light-ink);border-color:#dedfe1;box-shadow:0 15px 40px #202a3120;}
:root[data-appearance="light"] .settings-group {background:#fafafa;box-shadow:none;}
:root[data-appearance="light"] .settings-header {border-bottom-color:var(--light-edge);}
:root[data-appearance="light"] .settings-hint {color:#74777c;}
:root[data-appearance="light"] .settings-row,
:root[data-appearance="light"] .settings-action {border-color:var(--light-edge);color:var(--light-ink);}
:root[data-appearance="light"] .settings-row select {background:#fff;color:#242628;border-color:#d8dadd;}
:root[data-appearance="light"] .settings-confirm {background:#fff;color:var(--light-ink);}
:root[data-appearance="light"] .rule-popover:after {background:#fff;border-color:#dedfe1;}
:root[data-appearance="light"] .rule-popover .discovered-heading {color:var(--light-green);}
:root[data-appearance="light"] .rule-popover .rule-description {color:var(--light-ink);}
:root[data-appearance="light"] .classic-tile {background:#f7f7f8;color:var(--light-ink);border-color:#9ea2a4;box-shadow:0 9px 27px #18203212;}
:root[data-appearance="light"] .classic-tile:hover {box-shadow:0 14px 29px #18203220;}
:root[data-appearance="light"] .tile-corner {color:#383d40;}
:root[data-appearance="light"] .tile-rule-summary {color:#87898e;}
:root[data-appearance="light"] .tile-rule-text.redacted .redaction-word {background:#adb0b4;opacity:.53;}
:root[data-appearance="light"] .home-mode {background:#eeeff1;border-color:#e5e6e9;}
:root[data-appearance="light"] .home-mode .mode-option {color:#64686b;}
:root[data-appearance="light"] .home-mode .mode-option.active {background:#fff;color:#202222;box-shadow:0 1px 4px #0000000b;}
:root[data-appearance="light"] .home-mode .mode-option:disabled {color:#898d91;}
:root[data-appearance="light"] .home-legal a {color:#64696d;}
:root[data-appearance="light"] .home-arrow {color:#70747a;}
:root[data-appearance="light"] .remaining {color:#33373a;}
:root[data-appearance="light"] .toast {background:#eff4ef;color:#265037;}
:root[data-appearance="light"] .store-unavailable {color:#696d71;border-color:#d7dadd;}
:root[data-appearance="light"] .settings-header button,
:root[data-appearance="light"] .settings-confirm-actions button:not(.secondary) {background:#1b6742;color:#fff;}
/* Typography hierarchy only; do not change layout dimensions or card typography. */
.tile-inner h1,.settings-header h2 {font-weight:700;letter-spacing:-.025em;}
.tile-rule-summary {font-weight:400;line-height:1.47;}
.settings-group h3 {font-weight:650;letter-spacing:-.015em;}
.site-wordmark {letter-spacing:-.035em;}


/* v8.14 — semantic light/dark polish. Gameplay and card geometry unchanged.
   Taciturn green replaces the former blue draw pile; suit palettes and the
   approved light/dark icon SVG artwork remain untouched. */
:root{
  --tc-accent:#319960;
  --tc-accent-strong:#4ab678;
  --tc-accent-muted:#528e6b;
  --tc-surface:#292929;
  --tc-ink:#ededed;
  --tc-edge:#454545;
  --tc-demo-surface:#363636;
  --tc-back:#319960;
  --tc-back-edge:#72c18c;
}
:root[data-appearance="light"]{
  --tc-accent:#145b38;
  --tc-accent-strong:#237749;
  --tc-accent-muted:#438b60;
  --tc-surface:#ffffff;
  --tc-ink:#202624;
  --tc-edge:#d6dcd8;
  --tc-demo-surface:#edf3ef;
  --tc-back:#277c4c;
  --tc-back-edge:#63b184;
}
/* One visual vocabulary for both actual deck and animated deck backs. */
.back,.back-layer,.deal-flip-back,.draw-flight-back{background:var(--tc-back);border-color:var(--tc-back-edge);}
.back-layer{background:#287e4c;border-color:#59a779;}
.back-layer.second{background:#20673e;border-color:#438e62;}
:root[data-appearance="light"] .back-layer{background:#216940;border-color:#4d9e6d;}
:root[data-appearance="light"] .back-layer.second{background:#1a5735;border-color:#39885a;}
/* The animated face must be identical in tone to the final static card face. */
:root[data-appearance="light"] .draw-flight-face,
:root[data-appearance="light"] .draw-flight-face.face{
 background:var(--light-card);border-color:#d9dadd;
}
/* Restore the green identity to the home page. */
:root[data-appearance="light"] .classic-tile{
 background:#f7f9f7;color:var(--light-ink);
 border-color:var(--tc-accent-muted);
 box-shadow:0 9px 27px rgba(19,48,31,.12);
}
:root[data-appearance="light"] .classic-tile:hover{
 box-shadow:0 14px 29px rgba(19,48,31,.20);
}
:root[data-appearance="light"] .home-mode{
 background:#e9efeb;border-color:#b8cfc0;
}
:root[data-appearance="light"] .home-mode .mode-option.active{
 background:#d2e6d8;color:#145b38;
 box-shadow:inset 0 0 0 1px #438b60,0 1px 4px rgba(22,67,41,.13);
}
:root[data-appearance="light"] .home-mode .mode-option:not(.active){color:#65726a;}
/* Rule demo: light surfaces should never contain an isolated charcoal inset. */
.rule-popover .rule-demo{background:var(--tc-demo-surface);}
:root[data-appearance="light"] .demo-card{
 background:#fff;color:#145b38;border-color:#438b60;
 box-shadow:0 2px 5px rgba(15,53,30,.13);
}
:root[data-appearance="light"] .rule-popover .demo-note{color:#66766b;}
:root[data-appearance="light"] .rule-popover .continue{
 background:var(--tc-accent);color:white;
}
:root[data-appearance="light"] .rule-shade{background:rgba(24,39,30,.35);}
/* Preserve green information hierarchy across selection, controls and overlays. */
:root[data-appearance="light"] .stack.selected .face{
 box-shadow:inset 0 0 0 2px rgba(20,91,56,.88);
}
:root[data-appearance="light"] .settings-row input[type=checkbox]{accent-color:var(--tc-accent);}
:root[data-appearance="light"] .settings-action:hover,
:root[data-appearance="light"] .site-options button:hover,
:root[data-appearance="light"] .options button:hover{
 color:#145b38;background:#e7f1ea;
}
:root[data-appearance="light"] .dialog button:not(.secondary),
:root[data-appearance="light"] .settings-confirm-actions button:not(.secondary){
 background:#145b38;color:white;
}
:root[data-appearance="light"] .dialog button.secondary,
:root[data-appearance="light"] .settings-confirm-actions button.secondary{
 background:#e7eae7;color:#303a33;
}
:root[data-appearance="light"] .rule.known{background:#cfe5d5;border-color:#1d7546;}
:root[data-appearance="light"] .site-menu,
:root[data-appearance="light"] #app .menu,
:root[data-appearance="light"] .home{
 background:#dcece1!important;color:#145b38!important;
}
/* A neutral light text hierarchy, with green reserved for affordances. */
:root[data-appearance="light"] .toast{background:#dcece1;color:#194d31;}
:root[data-appearance="light"] .settings-sheet,
:root[data-appearance="light"] .rule-popover,
:root[data-appearance="light"] .dialog{
 box-shadow:0 15px 40px rgba(19,44,28,.16);
}

/* v9.3 — Swift-inspired results and local Classic statistics. */
.result-layer{position:fixed;inset:0;z-index:1400;background:rgba(0,0,0,.62);display:flex;align-items:flex-end;justify-content:center;padding:18px 16px 12px;color:#ededed}
.result-panel{width:min(620px,100%);max-height:min(90dvh,760px);overflow:auto;overscroll-behavior:contain;background:#292929;border:1px solid #494949;border-radius:30px;padding:24px 27px;box-shadow:0 16px 55px #0009;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif}
.result-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.result-top h2{margin:0}.result-top button,.result-actions button{border:1px solid #596059;border-radius:12px;padding:10px 17px;background:#343b35;color:inherit}.result-top button:last-child{min-width:44px;min-height:44px}
.result-emblem{text-align:center;font-size:64px;line-height:1.1}.result-panel>h2{text-align:center;font-size:clamp(24px,5vw,34px);margin:10px 0 3px}.result-subtitle{text-align:center;color:#a8aaa8;font-weight:600;font-size:20px;margin-bottom:22px}.result-panel h3{font-size:16px;margin:18px 0 9px}.result-board{display:flex;overflow-x:auto;gap:8px;padding:5px 2px 10px}.result-stack{height:52px;width:39px;min-width:39px;border:1px solid #aab0ad;border-radius:6px;background:#f8faf8;color:#202820;position:relative;display:grid;place-items:center;box-shadow:0 3px 0 #b0b9b3}.result-stack strong{font-size:18px}.result-position{position:absolute;left:4px;top:2px;font-size:9px;font-weight:700;opacity:.7}.stat-bars{display:grid;gap:9px}.stat-bar-row{display:grid;grid-template-columns:28px 1fr 32px;gap:10px;align-items:center;font-variant-numeric:tabular-nums}.stat-bar-track{height:12px;background:#4a514c;border-radius:50px;overflow:hidden}.stat-bar-track span{display:block;height:100%;background:#8f9c93;border-radius:50px}.stat-bar-row.highlighted .stat-bar-track span{background:#319960}.result-actions{display:grid;gap:10px;margin-top:23px}.result-actions button{min-height:44px}.result-actions .result-primary{background:#258d52;color:white;border-color:#258d52;font-weight:700}.result-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px}.statistics-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.statistics-metrics>div{border-radius:13px;background:#383e39;padding:15px;display:flex;flex-direction:column;gap:4px}.statistics-metrics strong{font-size:26px;font-variant-numeric:tabular-nums}.statistics-metrics span,.result-footnote{font-size:12px;color:#b4bab5}.result-footnote{line-height:1.5}
:root[data-appearance="light"] .result-layer{color:#191b1b;background:#1015116b}:root[data-appearance="light"] .result-panel{background:white;border-color:#d9dfdb;box-shadow:0 18px 50px #1119}:root[data-appearance="light"] .result-subtitle{color:#6a706b}:root[data-appearance="light"] .result-top button,:root[data-appearance="light"] .result-actions button{background:#e9f3ec;color:#145b38;border-color:#c8d9ce}:root[data-appearance="light"] .result-actions .result-primary{background:#258d52;border-color:#258d52;color:#fff}:root[data-appearance="light"] .stat-bar-track{background:#e4e8e5}:root[data-appearance="light"] .stat-bar-track span{background:#8d9d91}:root[data-appearance="light"] .statistics-metrics>div{background:#f2f5f2}:root[data-appearance="light"] .statistics-metrics span,:root[data-appearance="light"] .result-footnote{color:#586359}
@media(max-height:520px){.result-layer{align-items:center}.result-panel{max-height:94dvh;padding:13px 18px}.result-emblem{font-size:42px}.result-panel h3{margin:10px 0 7px}}
@media(max-width:450px){.result-panel{padding:18px}.result-layer{padding:8px}.result-emblem{font-size:52px}}

/* v9.3.2: compact three-column Classic statistics (two columns on very narrow screens). */
.statistics-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.statistics-metrics>div{min-width:0;padding:13px 11px}
.statistics-metrics small{color:#b4bab5;font-size:12px}
:root[data-appearance="light"] .statistics-metrics small{color:#586359}
@media(max-width:370px){.statistics-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v9.3.3: two-column overview with only Games Ended and Games Won. */
.statistics-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}

/* v9.4: Results and Statistics are centred in the available viewport.
   Short screens allow scrolling rather than clipping the sheet. */
.result-layer{align-items:center;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px}
.result-panel{max-height:calc(100dvh - 24px)}
@media(max-width:450px){.result-layer{padding:8px}.result-panel{max-height:calc(100dvh - 16px)}}

/* v9.5 Phase 4: preserve layout on browsers lacking dynamic viewport units. */
#app{height:100vh;height:100dvh}
.result-panel{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
@media(max-width:450px){.result-panel{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}}
/* Users requesting reduced motion should not see decorative shifts or transitions. */
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .stack,.toast{transition:none!important}
 .stack,.stack *, .draw, .draw *{animation-duration:0.01ms!important;animation-iteration-count:1!important}
}

/* v9.6 — Phase 4: mobile safe-area and cross-browser ergonomics.
   Only narrow/touch-oriented viewports are changed; desktop styling stays intact. */
@media (max-width:650px){
  #app header{padding-top:calc(34px + env(safe-area-inset-top,0px));height:calc(100px + env(safe-area-inset-top,0px))}
  #app .heading{top:calc(34px + env(safe-area-inset-top,0px))}
  #app footer{height:calc(92px + env(safe-area-inset-bottom,0px));padding-bottom:calc(19px + env(safe-area-inset-bottom,0px))}
  #app .viewport{-webkit-overflow-scrolling:touch}
  .home-scroll{-webkit-overflow-scrolling:touch}
  .settings-scroll,.result-panel{-webkit-overflow-scrolling:touch}
}
@media (max-width:650px) and (max-height:530px){
  #app header{height:calc(70px + env(safe-area-inset-top,0px));padding-top:calc(16px + env(safe-area-inset-top,0px))}
  #app .heading{top:calc(15px + env(safe-area-inset-top,0px))}
  #app footer{height:calc(62px + env(safe-area-inset-bottom,0px));padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:600px){
  .settings-sheet{height:100vh;height:100dvh;max-height:100vh;max-height:100dvh}
  .settings-scroll{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
@media (hover:none){
  .classic-tile:hover{transform:none}
}

/* v9.9.1: unobtrusive build label, outside normal game layout flow. */
#app .game-version{position:absolute;bottom:max(2px,env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);font-size:10px;line-height:1;color:#8d938f;pointer-events:none;z-index:1;font-variant-numeric:tabular-nums;}
.website-home .site-version{font-size:11px;color:#959b97;white-space:nowrap;align-self:center;}
:root[data-appearance="light"] #app .game-version,:root[data-appearance="light"] .website-home .site-version{color:#777f79;}

/* 0.9.9.11 — mobile sizing; game.js is the source of truth for rendered card width. */
.website-home .site-version{font-size:13px;font-weight:400;line-height:inherit;color:#bdbdbd;}
:root[data-appearance="light"] .website-home .site-version{color:#64696d;}
@media (max-width:650px){
  /* Rendered card width is set by game.js; this is the pre-render fallback. */
  #app .track{--card-w:clamp(67.2px,16.2vw,102px);}
  #app .viewport{height:185px;}
  #app .game-nav-actions{gap:4px;}
  #app .game-nav-actions .home,#app .menu{
    box-sizing:border-box;width:66px!important;min-width:66px!important;height:38px!important;
    padding:0 4px!important;border-radius:10px!important;
    font:600 13px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;text-align:center;
  }
  #app .menu{gap:4px!important;}
  #app .menu .menu-dots{width:17px;height:17px;font-size:13px;flex:none;}
  #app .heading span{font-size:13px;}
  #app .heading strong{font-size:16px;}
  #app .rule{font-size:18px;padding:7px 8px;line-height:1.15;}
  #app .rules{gap:5px;}
  #app .remaining{font-size:29px;}
}
@media (max-width:650px) and (orientation:landscape){
  #app .track{--card-w:clamp(58.8px,10.2vw,99px);}
  #app .viewport{height:170px;}
}
@media (max-width:360px){
  #app .game-nav-actions .home,#app .menu{width:58px!important;min-width:58px!important;font-size:13px!important;}
}