:root {
  --ink: rgba(0,0,0,.9);
  --felt-deep: #f3f3f1;
  --felt: #ffffff;
  --felt-light: #fafafa;
  --cream: #ffffff;
  --gold: #c5a35d;
  --red: #BF0010;
  --card-black: rgba(0,0,0,.9);
  --card-w: clamp(66px, 8.35vw, 118px);
  --card-h: calc(var(--card-w) * 1.42);
  --radius: calc(var(--card-w) * .105);
}
* { box-sizing: border-box; }
/* v1.1.5: no text selection anywhere on the game page (prevents the blue highlight when dragging cards) */
body.dichen-klondike-page, body.dichen-klondike-page * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
body.dichen-klondike-page { overflow:hidden; }
body.dichen-klondike-page input { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
@font-face { font-family:"Cormorant Garamond"; src:url('./fonts/CormorantGaramond-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"circular"; src:url('https://dichenchen.com/wp-content/themes/di-chen-chen/fonts/CircularStd-Book.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
html, body { margin: 0; min-height: 100%; }
body {
  color: var(--ink);
  background: white;
  font-family:"circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif;
  text-transform:capitalize;
  font-size:20px;
  overflow-x: hidden;
}
button { font: inherit; }
/* v1.4.18: top-left brand keeps the Garamond look and lowercase — excluded from the site-wide circular/capitalize switch */
.brand { text-transform:lowercase; }
.brand-new { font-family:"Garamond Premier Pro","Adobe Garamond Pro","Cormorant Garamond",Garamond,"EB Garamond","Songti TC","Songti SC","PMingLiU","Hiragino Mincho ProN","Noto Serif CJK TC","Times New Roman",serif; }
.topbar strong,.controls b,dialog strong { font-weight:400; }
button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.topbar {
  height: 76px; padding: 0 clamp(14px, 3vw, 42px); display: grid;
  grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  color: var(--ink); background: rgba(255,255,255,.98); border-bottom: 2px solid #000;
  position: relative; z-index: 50;
}
.brand { display:flex; align-items:baseline; color:var(--ink); padding:0; justify-self:center; transform:translateY(6px); }
.brand-new { border:0; background:transparent; padding:0; cursor:pointer; color:inherit; }
.brand-site { color:inherit; text-decoration:none; margin-left:.35em; font-family:"circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; }
.brand-site:hover strong, .brand-site:focus-visible strong { text-decoration:none; }
.site-back { position:fixed; z-index:90; right:clamp(12px,2vw,26px); bottom:20px; }
.site-back a { font-family:"circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; font-size:21px; color:var(--ink); text-decoration:none; }
.site-back a:hover, .site-back a:focus-visible { text-decoration:underline; }
.site-back .back-to { font-size:17px; }
/* v1.3.0: Spotify + report-bug monograms, bottom-left, mirroring site-back */
.side-links { position:fixed; z-index:90; left:clamp(12px,2vw,26px); bottom:20px; display:flex; gap:10px; }
.mono-button { position:relative; width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.96); color:var(--ink); display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 22px rgba(0,0,0,.08); text-decoration:none; transition:transform .15s ease; }
@media (hover:hover) { .mono-button:hover { transform:translateY(-2px); } }
.mono-button svg { width:22px; height:22px; display:block; }
.mono-button::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:0; white-space:nowrap; background:#102b29; color:#fff; font-size:15px; letter-spacing:-.01em; padding:7px 12px; border-radius:10px; opacity:0; transform:translateY(4px); transition:.18s ease; pointer-events:none; }
.mono-button:hover::after, .mono-button:focus-visible::after { opacity:1; transform:translateY(0); }
.spotify-panel { position:fixed; z-index:120; left:clamp(12px,2vw,26px); bottom:72px; width:300px; background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.2); overflow:hidden; }
.spotify-panel[hidden] { display:none; }
.spotify-head { display:flex; justify-content:space-between; align-items:center; padding:8px 8px 8px 16px; font-size:17px; color:#737373; }
.spotify-head button { border:0; background:transparent; font-size:24px; line-height:1; cursor:pointer; color:var(--ink); width:34px; height:34px; border-radius:10px; }
.spotify-head button:hover { background:#f0f0f0; }
.spotify-panel iframe { display:block; width:100%; height:352px; border:0; }
.spotify-open { display:block; text-align:center; padding:9px; font-size:16px; color:#737373; text-decoration:none; border-top:1px solid #f0f0f0; }
.spotify-open:hover { text-decoration:underline; }
.brand strong { font-size:30px; font-weight:400; letter-spacing:0; display:inline-block; line-height:1; transform:scaleY(1.1); transform-origin:center; }
.brand-at { font-style:italic; font-size:25px; letter-spacing:.015em; margin-left:-0.025em; }
.scoreboard { display: flex; gap: clamp(20px, 5vw, 78px); text-align: center; justify-self:start; }
.scoreboard div { min-width: 58px; }
.scoreboard span { display:block; color:#767676; font:400 21px/1.15 "circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; text-transform:capitalize; transform:none; }
.scoreboard strong { display:block; font:400 31px/1.15 "circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; font-variant-numeric:tabular-nums; }
.header-actions { justify-self: end; display: flex; gap: 9px; align-items: center; }
.player-control { height:42px; display:flex; align-items:center; gap:7px; padding:0 10px; border:1px solid #000; border-radius:0; background:white; color:#737373; font-size:18px; }
.player-control input { width:112px; min-width:0; border:0; border-bottom:1px solid rgba(0,0,0,.18); outline:0; padding:2px 1px; color:var(--ink); background:transparent; font:inherit; letter-spacing:0; }
/* v1.4.23: the player name itself is italic Garamond (the "player" label stays circular) */
.player-control input { font-family:"Garamond Premier Pro","Adobe Garamond Pro","Cormorant Garamond",Garamond,"EB Garamond","Songti TC","Songti SC","PMingLiU","Hiragino Mincho ProN","Noto Serif CJK TC","Times New Roman",serif; font-style:italic; }
.player-control input:focus { border-bottom-color:var(--gold); }
.icon-button, .record-button { border: 1px solid #000; background: white; color: var(--ink); cursor: pointer; }
.icon-button { width: 42px; height: 42px; border-radius: 0; font-size: 20px; }
.icon-button.muted { color: #a9a9a9; text-decoration: line-through; }
.record-button { height: 42px; padding: 0 14px; border-radius: 0; display: flex; gap: 9px; align-items: center; }
.record-button span { color:#737373; font-size:19px; display:inline-block; }
.record-button strong { color:#464646; display:inline-block; }
.game-shell { min-height: calc(100vh - 76px); background:#fff; padding: clamp(18px,3vw,38px) clamp(112px,10.5vw,156px) 72px clamp(12px,3vw,44px); position: relative; }
.game-shell::before { content:""; position:fixed; inset:76px 0 0; pointer-events:none; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.game-board { max-width: 1060px; min-height: 665px; margin: 0 auto; position: relative; isolation: isolate; touch-action:none; }
.board-glow { position: absolute; inset: 10% 15%; background: rgba(128,128,128,.1); filter: blur(80px); z-index: -1; }
.top-row, .tableau { display: grid; grid-template-columns: repeat(7, var(--card-w)); gap: clamp(8px, 2vw, 34px); justify-content: space-between; }
.top-row { align-items: start; }
.spacer { width: var(--card-w); }
.pile-slot { width: var(--card-w); height: var(--card-h); position: relative; border-radius: var(--radius); }
.stock-zone, .waste-zone, .foundation { border:2px solid rgba(0,0,0,.11); background:#fff; }
.stock-zone { cursor: pointer; }
.stock-zone:empty::before { content:"↻"; position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(24px,3vw,40px); color:rgba(0,0,0,.28); }
.foundation { display: grid; place-items: center; }
.slot-suit { font-size:clamp(27px,4vw,49px); line-height:1; opacity:.07; display:inline-grid; place-items:center; }
.slot-suit svg { width:1em; height:1em; display:block; overflow:visible; }
.slot-suit.red { color:var(--red); }.slot-suit.black { color:var(--card-black); }
.tableau { margin-top: clamp(18px, 3.2vw, 42px); align-items: start; }
.tableau-pile { width: var(--card-w); min-height: var(--card-h); position: relative; border-radius: var(--radius); border:0; background:transparent; transition:box-shadow .16s ease; }
.card-layer { position:absolute; inset:0; z-index:10; pointer-events:none; overflow:visible; }
.card-layer.no-motion .card, .card-layer.no-motion .card-inner { transition:none!important; }
.card { width: var(--card-w); height: var(--card-h); position:absolute; left:0; top:0; color:var(--card-black); opacity:.93; user-select:none; -webkit-user-select:none; cursor:pointer; pointer-events:auto; touch-action:none; transition:left .19s cubic-bezier(.22,1,.36,1), top .19s cubic-bezier(.22,1,.36,1); will-change:left,top; perspective:900px; }
.card.no-pointer { pointer-events:none; }
/* v1.3.6: illegal move feedback — the card shakes instead of a toast */
@keyframes dichen-card-shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-7px); } 40% { transform:translateX(6px); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } }
.card.shake { animation:dichen-card-shake .32s ease; }
.card-motion, .card-inner, .card-face { position:absolute; inset:0; border-radius:var(--radius); }
.card-motion { transition:transform .16s ease, filter .16s ease; transform-origin:50% 90%; }
.card-inner { transform-style:preserve-3d; transition:transform .2s cubic-bezier(.22,1,.36,1); background:#f7f7f7; border-radius:var(--radius); }
.card:not(.face-up) .card-inner { transform:rotateY(180deg); }
.card-face { overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; border:1px solid rgba(0,0,0,.1); box-shadow:0 2px 5px rgba(0,0,0,.06),0 8px 22px rgba(0,0,0,.15); }
.card[data-zone="stock"].no-pointer .card-face,
.card[data-zone="waste"].no-pointer .card-face,
.card[data-zone="foundation"].no-pointer .card-face { border-color:transparent; box-shadow:none; }
.card-front { background:#f7f7f7; }
.card-back { transform:rotateY(180deg); background:#f2f2f0; border:5px solid #8BD450; box-shadow:0 3px 7px rgba(0,0,0,.06),0 9px 22px rgba(0,0,0,.15); }
.card-back.has-photo { background:#8BD450; }
.card-back.has-photo::before { inset:0; border:2px solid #711F8C; border-radius:var(--radius); background-color:#8BD450; background-image:var(--back-photo); background-size:cover; background-position:center; }
.card-back::before { content:""; position:absolute; inset:4px; border-radius:calc(var(--radius) * .55); border:2px solid rgba(0,0,0,.72); background-color:#202020; background-image:radial-gradient(circle at 50% 50%,#d0b06d 0 11%,transparent 12%),linear-gradient(45deg,transparent 42%,rgba(255,255,255,.18) 43% 57%,transparent 58%),linear-gradient(-45deg,transparent 42%,rgba(197,163,93,.3) 43% 57%,transparent 58%); background-size:24px 24px; }
.card:hover .card-motion { transform:translateY(-3px); filter:drop-shadow(0 5px 4px rgba(0,28,24,.16)); }
.card.red { color: var(--red); }
.card-corner { position:absolute; top:7%; left:9%; font:500 clamp(15px,2vw,24px)/.85 "circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; display:flex; flex-direction:column; align-items:center; }
.card-corner.bottom { transform:rotate(180deg); left:auto; top:auto; right:9%; bottom:7%; }
.card-corner b { font-weight:500; }
.cc-suit { display:none; }
.card-center-mobile { display:none; }
.card-suit { font-family:"Apple Symbols","Segoe UI Symbol","Noto Sans Symbols 2",sans-serif; font-size:.72em; line-height:1; margin-top:2px; font-style:normal; }
.card-pips { position:absolute; inset:21% 10%; pointer-events:none; font-style:normal; overflow:visible; }
.pip { position:absolute; left:var(--pip-left); top:var(--pip-top); width:32%; height:15%; display:grid; place-items:center; transform:translate(-50%,-50%); font-size:clamp(15px,calc(var(--card-w) * .29),33px); line-height:1; }
.pip svg { width:.72em; height:.72em; display:block; overflow:visible; }
.card[data-rank="1"] .pip { width:70%; height:70%; font-size:clamp(28px,calc(var(--card-w) * .56),60px); }
.card[data-rank="6"] .pip,.card[data-rank="7"] .pip,.card[data-rank="8"] .pip { font-size:clamp(14px,calc(var(--card-w) * .26),30px); }
.card[data-rank="9"] .pip { font-size:clamp(13px,calc(var(--card-w) * .22),26px); }
.card[data-rank="10"] .pip { font-size:clamp(12px,calc(var(--card-w) * .21),25px); }
.court-rank { position:absolute; inset:0; display:grid; place-items:center; border:0; font:400 clamp(22px,3.6vw,44px)/1 "circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; transform:translateY(-22%); }
.court-suit { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(15px,2.6vw,30px); line-height:1; transform:translateY(27%); }
.court-suit svg { width:1em; height:1em; display:block; overflow:visible; }
.card.selected .card-motion { filter:drop-shadow(0 0 8px var(--gold)); transform:translateY(-8px); }
.card.hint .card-motion { animation:hint 1s ease-in-out 2; }
@keyframes hint { 50% { transform:translateY(-9px) rotate(-1.5deg); filter:drop-shadow(0 0 10px #ffe69d); } }
.card.dragging { transition:none; cursor:grabbing; }
.card.dragging .card-motion { transform:translateY(-10px) rotate(var(--drag-tilt,0deg)) scale(1.025); filter:drop-shadow(0 18px 13px rgba(0,0,0,.28)); }
.card.settling { pointer-events:none; }
.drop-ready { box-shadow: 0 0 0 4px rgba(246,196,83,.7) inset; }
.controls { position:fixed; z-index:100; right:clamp(12px,2vw,26px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:4px; padding:6px; border-radius:0; background:rgba(255,255,255,.96); color:var(--ink); border:1px solid rgba(0,0,0,.08); backdrop-filter:blur(18px); }
.controls button { min-width:64px; padding:10px 6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid #000; border-radius:0; color:var(--ink); background:white; cursor:pointer; transition:.15s ease; }
/* v1.4.86: hover lift only on devices with a real mouse — touch tap triggers :hover and misaligns buttons */
@media (hover:hover) { .controls button:hover:not(:disabled) { background:#f0f0f0; transform:translateY(-2px); } }
.controls button:disabled { opacity:.35; cursor:not-allowed; }
.controls button span { font-size:22px; line-height:1; }.controls button span svg { width:22px; height:22px; display:block; }
/* v1.4.1: undo is a bold svg arrow; nudge the auto triangle right/down so it sits centered over its label */
#autoButton span { transform:translate(2px,1.5px); }.controls button b { font-size:15px; font-weight:400; }.controls button small { display:none; }
.controls .auto { background:var(--ink); color:white; padding:10px 6px; }.controls .auto:hover:not(:disabled) { background:#173e3a; }.controls .auto small { color:#bdbdbd; border-color:#5a5a5a; }
.controls .auto[aria-pressed="false"] { background:white; color:#757575; }
.controls .auto[aria-pressed="false"] small { color:#8e8e8e; border-color:#d1d1d1; }
dialog { color:var(--ink); border:0; padding:0; box-shadow:0 30px 90px rgba(0,25,21,.42); }
dialog::backdrop { background:rgba(0,31,27,.68); backdrop-filter:blur(5px); }
.panel-dialog { width:min(900px, calc(100% - 28px)); max-height:min(780px, calc(100% - 28px)); border-radius:0; border:1px solid #000; background:var(--cream); text-transform:capitalize; opacity:.9; }
/* v1.4.102: records dialog — 85% opacity, no backdrop dim */
#recordsDialog { opacity:.85; }
#recordsDialog::backdrop { background:transparent; backdrop-filter:none; }
.dialog-head { padding:25px 28px 20px; display:flex; justify-content:space-between; align-items:center; }
.dialog-head p { margin:0 0 5px; color:#767676; font-size:17px; line-height:1; }.dialog-head h2 { margin:0; font-size:30px; line-height:1.05; }
.close-button { width:40px; height:40px; border-radius:0; border:1px solid #000; background:white; font-size:26px; cursor:pointer; color:var(--ink); }
.stat-grid { display:flex; gap:10px; padding:0 28px 23px; }
.stat-grid article { flex:1 1 auto; }
.stat-grid article { min-height:86px; padding:12px 14px; border-radius:0; background:white; border:1px solid #000; display:grid; align-content:center; }
.stat-grid span { color:#7d7d7d; font-size:19px; }.stat-grid strong { font-size:35px; line-height:1.15; font-variant-numeric:tabular-nums; }.stat-grid small { color:#a8a8a8; font-size:18px; }
.stat-grid span,.stat-grid strong,.stat-grid small { display:inline-block; }
.history-head { padding:0 28px 12px; display:flex; justify-content:space-between; align-items:center; }.history-head h3 { margin:0; font-size:24px; }.history-head button { border:0; background:transparent; color:#8c5954; cursor:pointer; font-size:18px; }.history-head-solo { justify-content:flex-end; }
.cloud-note { color:#818181; font-size:18px; display:inline-block; }
.history-head-solo { gap:12px; }
.records-practice-help { flex:1;min-width:0;margin:0;color:#818181;font-size:11px;line-height:1.4;text-align:left;text-transform:none;overflow-wrap:anywhere; }
.history-head-solo .cloud-note { flex:0 1 auto;max-width:45%;text-align:right; }
.history-wrap { max-height:370px; overflow:auto; border-top:1px solid #e1e1e1; }
/* v1.4.149: sortable leaderboard — click time/moves headers to re-rank */
.history-wrap th[data-sort] { cursor:pointer; user-select:none; }
.history-wrap th[data-sort]:hover { color:#000; }
.history-wrap th.sort-active { color:#000; }
.history-wrap th.sort-active::after { content:' ▲'; font-size:13px; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
th, td { text-align:left; padding:13px 16px; border-bottom:1px solid #e5e5e5; white-space:nowrap; } th { position:sticky; top:0; z-index:1; background:#f0f0f0; color:#7b7b7b; font-size:18px; } td { font-size:19px; }
.empty-history { display:none; padding:60px 20px; text-align:center; color:#929292; font-size:20px; }
.text-button { border:0; background:transparent; color:#737373; margin-top:12px; cursor:pointer; }
.toast { position:fixed; z-index:300; left:50%; top:94px; transform:translate(-50%,-15px); opacity:0; pointer-events:none; background:#102b29; color:white; padding:10px 15px; border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.2); transition:.2s ease; font-size:19px; }.toast.show { opacity:1; transform:translate(-50%,0); }
.cascade-layer { position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden; opacity:1; transition:opacity .9s ease; }.cascade-layer.fading { opacity:0; }.cascade-layer.live { pointer-events:auto; cursor:pointer; }.cascade-card { position:fixed; left:0; top:0; width:var(--card-w); height:var(--card-h); color:var(--card-black); pointer-events:none; will-change:transform; perspective:700px; opacity:.9; }.cascade-card.red { color:var(--red); }
/* v1.4.5: win tiles are dealt from the foundations flipping green-back -> photo */
.dvd-flip { position:absolute; inset:0; transform-style:preserve-3d; animation:dvd-deal .6s cubic-bezier(.22,1,.36,1); }
.dvd-face { position:absolute; inset:0; border-radius:var(--radius); overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.dvd-photo { border:4px solid #8BD450; background-color:#8BD450; background-size:cover; background-position:center; box-shadow:0 10px 30px rgba(0,0,0,.28), inset 0 0 0 2px #711F8C; }
.dvd-back { transform:rotateY(180deg); background:#8BD450; border:4px solid #8BD450; box-shadow:inset 0 0 0 2px #711F8C, 0 10px 30px rgba(0,0,0,.28); }
@keyframes dvd-deal { 0% { transform:rotateY(180deg) scale(.55); opacity:0; } 18% { opacity:1; } 100% { transform:rotateY(360deg) scale(1); opacity:1; } }
@media (max-width: 760px) {
  /* v1.3.0: card width accounts for shell padding (8px x2) + 6 gaps (7px) so the 7 columns never overflow */
  :root { --card-w: calc((100vw - 60px) / 7); }
  .topbar { height:67px; grid-template-columns:auto 1fr auto; padding:0 12px; gap:10px; }
  /* v1.3.1: brand goes two-line on mobile so dichenchen.com stays visible up top */
  .brand { flex-direction:column; align-items:center; justify-content:center; justify-self:center; line-height:1.25; }
  .brand strong { font-size:23px; }
  .brand-at { font-size:20px; }
  .brand-site { display:inline-block; margin-left:0; }
  .brand-site strong { font-size:13px; letter-spacing:.02em; }
  /* v1.3.1: lock the page to exactly one viewport on mobile — no vertical scroll */
  html, body { height:100%; }
  body.dichen-klondike-page { overflow:hidden; }
  .scoreboard { position:static; transform:none; gap:14px; background:none; border:0; border-radius:0; padding:0; box-shadow:none; backdrop-filter:none; justify-self:start; align-self:center; }
  .scoreboard div { min-width:0; }.scoreboard span { color:#777; font-size:14px; }.scoreboard strong { font-size:20px; }
  /* v1.3.0: sound button restored on mobile (was hidden); everything sized to fit 360px viewports */
  .icon-button { display:grid; place-items:center; line-height:1; width:36px; height:36px; font-size:17px; border-radius:11px; }
  .record-button { height:36px; padding:0 10px; }.record-button span { display:none; }
  .player-control { width:92px; height:36px; padding:0 8px; font-size:15px; }.player-control span { display:none; }.player-control input { width:100%; }
  /* v1.3.1: shell is exactly viewport-minus-topbar; combined with body overflow:hidden the page never scrolls on mobile */
  .game-shell { height:calc(100vh - 67px); height:calc(100dvh - 67px); min-height:0; padding:112px 8px 0; overflow:hidden; }
  .game-shell::before { inset:67px 0 0; }
  .game-board { min-height:0; }
  .top-row, .tableau { gap:7px; }
  .card { border-width:1px; }
  .card-back { border-width:3px; }.card-back::before { inset:2px; background-size:14px 14px; border-width:1px; }
  .card-corner { top:8%; left:10%; font-size:clamp(9px,2.6vw,13px); flex-direction:row; gap:3px; }
  .cc-suit { display:block; width:clamp(7px,2vw,10px); margin-top:0; }
  .cc-suit svg { width:100%; height:auto; display:block; overflow:visible; }
  .card-pips { display:none !important; }
  .card-pips .court-rank, .card-pips .court-suit { display:none !important; }
  .card-center-mobile { display:flex; position:absolute; inset:0; flex-direction:row; align-items:center; justify-content:center; pointer-events:none; gap:calc(var(--card-w) * .08); }
  .card-center-mobile b { font:500 calc(var(--card-w) * .48)/1 "circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; font-weight:500; }
  .card-center-mobile i { display:block; width:calc(var(--card-w) * .40); }
  .card-center-mobile i svg { width:100%; height:auto; display:block; overflow:visible; }
  .card-pips { inset:21% 10%; }.pip { font-size:clamp(11px,calc(var(--card-w) * .29),17px); }.card[data-rank="1"] .pip { font-size:clamp(20px,calc(var(--card-w) * .56),32px); }
  .card[data-rank="6"] .pip,.card[data-rank="7"] .pip,.card[data-rank="8"] .pip { font-size:clamp(10px,calc(var(--card-w) * .26),16px); }
  .card[data-rank="9"] .pip { font-size:clamp(9px,calc(var(--card-w) * .22),14px); }.card[data-rank="10"] .pip { font-size:clamp(8px,calc(var(--card-w) * .21),13px); }
  .court-rank { font-size:clamp(17px,7vw,31px); }.court-suit { font-size:clamp(11px,4.6vw,20px); }
  .tableau { margin-top:20px; }
  .controls { left:50%; right:auto; top:auto; bottom:max(8px,env(safe-area-inset-bottom)); transform:translateX(-50%); flex-direction:row; width:calc(100% - 16px); justify-content:stretch; border-radius:18px; }
  .controls button { min-width:0; flex:1; height:52px; padding:0 5px; gap:3px; flex-direction:column; }.controls button span { font-size:18px; line-height:1; }.controls button span svg { width:19px; height:19px; }.controls button b { font-size:13px; }.controls button small { display:none; }.controls .auto { padding:0 6px; }
  .site-back { right:12px; bottom:calc(80px + env(safe-area-inset-bottom)); }
  .site-back a { font-size:13px; }
  .site-back .back-to { font-size:9px; }
  /* v1.3.0: monogram pair sits bottom-left above the control bar on mobile */
  .side-links { left:12px; bottom:calc(80px + env(safe-area-inset-bottom)); }
  .mono-button { width:36px; height:36px; }
  .mono-button svg { width:20px; height:20px; }
  .spotify-panel { left:12px; bottom:calc(124px + env(safe-area-inset-bottom)); width:min(300px, calc(100vw - 24px)); }
  .stat-grid { gap:8px; padding-inline:16px; }.stat-grid article { min-height:88px; padding:10px 8px; }.stat-grid span { font-size:16px; }.stat-grid strong { font-size:27px; }.stat-grid small { font-size:14px; }
  .dialog-head,.history-head { padding-inline:16px; }
  /* v1.4.1: leaderboard table — mobile shows rank/player/time/deal only */
  /* v1.4.150: mobile shows rank/player/time/moves; deal # + date move under the player name */
  .history-wrap th:nth-child(4), .history-wrap td:nth-child(4), .history-wrap th:nth-child(6), .history-wrap td:nth-child(6) { display:none; }
  /* v1.4.31: mobile shows the win date small below the player name */
  /* v1.4.150: deal # + date, one line, smaller, dark gray */
  /* v1.4.151: scoped under .history-wrap to beat the later base .record-date{display:none} */
  .history-wrap .record-date { display:block; font-size:11px; color:#555; margin-top:2px; letter-spacing:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* v1.4.151: mobile table fits the screen — vertical scroll only, no horizontal scroll */
  .history-wrap { overflow-x:hidden; overflow-y:auto; }
  .history-wrap table { table-layout:fixed; width:100%; }
  .history-wrap th, .history-wrap td { padding:10px 8px; }
  .history-wrap th:nth-child(1), .history-wrap td:nth-child(1) { width:28px; }
  .history-wrap th:nth-child(3), .history-wrap td:nth-child(3) { width:78px; white-space:nowrap; }
  .history-wrap th:nth-child(5), .history-wrap td:nth-child(5) { width:74px; white-space:nowrap; }
  /* v1.4.152: smaller mobile headers so Time/Moves labels fit their columns */
  .history-wrap th { font-size:12px; letter-spacing:1px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }
/* v1.4.18: numerals use the site font (circular) like everything else, except the top-left brand */
.scoreboard strong, .record-button strong, .stat-grid strong, .history-wrap td:nth-child(1), .history-wrap td:nth-child(3), .history-wrap td:nth-child(4), .history-wrap td:nth-child(5), .history-wrap td:nth-child(6), .toast { font-family:"circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; }
.record-date { display:none; }

/* v1.2.0: leaderboard — highlight your win, rename inline */
#historyBody tr.just-won { background:#fff4d2; }
.you-chip { display:inline-block; margin-left:8px; padding:2px 9px; border-radius:99px; background:var(--gold); color:#fff; font-size:13px; letter-spacing:.05em; vertical-align:2px; }
.record-name { font:inherit; color:inherit; background:transparent; border:0; border-bottom:1px dashed #b4b4b4; max-width:150px; padding:1px 2px; }
.record-name:focus { outline:none; border-bottom:1px solid var(--ink); }
.record-save { display:inline-grid; place-items:center; width:28px; height:28px; margin-left:8px; border:1px solid #000; border-radius:0; background:#fff; color:var(--ink); font-size:15px; line-height:1; cursor:pointer; vertical-align:1px; }
.record-save:active { transform:scale(.93); }
.again-dialog { width:min(430px, calc(100% - 40px)); }
.again-actions { display:flex; gap:10px; padding:4px 22px 24px; }
.again-primary { flex:1; padding:13px; border-radius:14px; border:1px solid var(--ink); background:var(--ink); color:var(--cream); font:inherit; font-size:17px; cursor:pointer; }
.again-ghost { flex:1; padding:13px; border-radius:14px; border:1px solid #dadada; background:#fff; color:var(--ink); font:inherit; font-size:17px; cursor:pointer; }
.again-primary:active, .again-ghost:active { transform:scale(.98); }

/* v1.4.32: short landscape viewport — header becomes a left sidebar so the
   game keeps its vertical room; the black line moves to the sidebar's right edge */
/* v1.4.42: block phone landscape — portrait only (touch devices only) */
@media (orientation:landscape) and (max-width:900px) and (pointer:coarse) {
  .game-shell, .topbar, .site-back, .side-links { display:none !important; }
  body.dichen-klondike-page::after { content:attr(data-rotate-message); position:fixed; inset:0; display:grid; place-items:center; background:#fff; color:#000; font:400 20px/1.5 "circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; z-index:9999; }
}
@media (max-height: 500px) and (min-width: 761px) {
  .topbar { position:fixed; left:0; top:0; bottom:0; width:128px; height:auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:16px; padding:16px 10px; border-bottom:0; border-right:2px solid #000; z-index:50; }
  .brand { flex-direction:column; align-items:center; gap:2px; justify-self:auto; }
  .brand strong { font-size:20px; }
  .brand-at { font-size:16px; }
  .brand-site { margin-left:0; font-size:12px; }
  .scoreboard { flex-direction:column; gap:10px; }
  .scoreboard div { min-width:0; }
  .scoreboard span { font-size:14px; }
  .scoreboard strong { font-size:22px; }
  .header-actions { flex-direction:column; gap:8px; align-items:stretch; justify-self:auto; }
  .player-control { justify-content:center; height:38px; font-size:15px; }
  .player-control input { width:100%; min-width:0; text-align:center; }
  .icon-button { width:100%; height:38px; }
  .record-button { justify-content:center; height:38px; }
  body.dichen-klondike-page { padding-left:128px; }
  .game-shell { min-height:100vh; min-height:100dvh; }
  .side-links { left:calc(128px + 12px); }
  .spotify-panel { left:calc(128px + 12px); }
  /* v1.4.41: 3-column landscape — left sidebar gets controls, middle holds stock/waste/foundations, right holds tableau */
  nav.controls { position:fixed; left:0; bottom:0; width:128px; z-index:51; flex-direction:column; gap:6px; padding:8px; background:#fff; border-top:2px solid #000; }
  nav.controls button { width:100%; min-height:42px; }
  nav.controls button small { display:none; }
  .game-board { display:grid; grid-template-columns:auto 1fr; gap:clamp(10px,2vw,20px); max-width:none; min-height:0; align-items:start; }
  .top-row { grid-column:1; display:grid; grid-template-columns:repeat(2,auto); gap:10px; }
  .top-row .spacer { display:none; }
  #tableau { grid-column:2; }
}

/* v1.4.85: kill double-tap zoom on mobile (viewport user-scalable=no isn't enough on iOS) */
body.dichen-klondike-page, body.dichen-klondike-page button, body.dichen-klondike-page .controls { touch-action:manipulation; }

/* v1.4.79: dark mode — follows device prefers-color-scheme, black bg + white text */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: rgba(255,255,255,.92);
    --felt-deep: #050505;
    --felt: #000000;
    --felt-light: #0d0d0d;
    --cream: #0a0a0a;
  }
  body { background:#000; color:var(--ink); }
  .game-shell { background:#000; }
  .topbar { background:rgba(0,0,0,.98); border-bottom-color:#fff; }
  .stock-zone, .waste-zone, .foundation { background:#0a0a0a; border-color:rgba(255,255,255,.22); }
  .slot-suit.black { color:rgba(255,255,255,.55); }
  .player-control { background:#0a0a0a; border-color:#fff; color:#bdbdbd; }
  .icon-button, .record-button { background:#0a0a0a; border-color:#fff; color:var(--ink); }
  .controls button { background:#0a0a0a; border-color:#fff; color:var(--ink); }
  .controls button small { border-color:#6a6a6a; color:#9a9a9a; }
  .controls .auto { background:#fff; color:#000; }
  .controls .auto:hover:not(:disabled) { background:#d8d8d8; }
  .controls .auto small { color:#5a5a5a; border-color:#8a8a8a; }
  .controls .auto[aria-pressed="false"] { background:#0a0a0a; color:#8a8a8a; }
  .panel-dialog { background:#0a0a0a; border-color:#fff; color:var(--ink); }
  .close-button { background:#0a0a0a; border-color:#fff; color:var(--ink); }
  .stat-grid article { background:#0a0a0a; border-color:#fff; }
  .record-name { background:#000; color:#fff; border-color:#5a5a5a; }
  .spotify-panel { background:#0a0a0a; border-color:rgba(255,255,255,.15); }
  .scoreboard span { color:#8a8a8a; }
  .controls { background:rgba(10,10,10,.96); border-color:rgba(255,255,255,.15); }
  .mono-button { background:rgba(10,10,10,.96); border-color:rgba(255,255,255,.18); color:var(--ink); }
  /* v1.4.81: dark-mode card faces — darker gray paper, light ink */  .card-inner, .card-front { background:#4e4e4e; border:1px solid rgba(255,255,255,.35); }
  .card { color:rgba(255,255,255,.93); }
  .card.red { color:#ff7070; }
  .cascade-card { color:rgba(255,255,255,.93); }
  .cascade-card.red { color:#ff7070; }
  /* v1.4.84: dark-mode chrome at 70% opacity */
  .topbar, .controls { opacity:.7; }
  .mono-button::after { background:#e8e8e8; color:#000; }
  /* cards stay light paper on the black felt for readability */
  /* v1.4.149: sortable leaderboard headers */
  .history-wrap th[data-sort]:hover { color:#fff; }
  .history-wrap th.sort-active { color:#fff; }
  /* v1.4.150: record-date sub-line stays readable on dark */
  .record-date { color:#a8a8a8; }
}

/* v1.4.87: shortcuts dialog */
.shortcuts-list { display:grid; gap:10px; padding:6px 28px 28px; }
.shortcuts-list div { display:flex; align-items:center; gap:8px; }
.shortcuts-list kbd { font-family:inherit; font-size:14px; border:1px solid #000; border-radius:4px; padding:3px 9px; background:#fff; min-width:28px; text-align:center; color:#000; text-transform:lowercase; }
.shortcuts-list span { margin-left:6px; color:#000; font-size:15px; }
/* v1.4.136: solver lab — advanced shortcuts tucked into a collapsed section */
/* v1.4.141: lab rows are single-line like the general list */
/* v1.4.142: lab gap 16px — CJK + rate suffixes render visually denser, so the lab gets more air than the general 10px */
.shortcuts-advanced { margin-top:6px; border-top:1px solid #000; padding-top:14px; display:grid; gap:16px; }
.shortcuts-advanced .lab-note span { font-size:13px; color:#666; margin-left:0; }
.shortcuts-advanced summary { cursor:pointer; font-size:15px; color:#000; list-style:none; }
.shortcuts-advanced summary::-webkit-details-marker { display:none; }
.shortcuts-advanced summary::before { content:'+ '; }
.shortcuts-advanced[open] summary::before { content:'− '; }
/* v1.4.89: no backdrop dim, left-aligned (opacity now on .panel-dialog) */
.shortcuts-dialog::backdrop { background:transparent; backdrop-filter:none; }
.shortcuts-dialog .close-button:focus-visible { outline:none; }
.panel-dialog .close-button:focus-visible { outline:none; }
@media (prefers-color-scheme: dark) {
  .shortcuts-list kbd { border-color:#fff; background:#1a1a1a; color:#fff; }
  .shortcuts-list span { color:#fff; }
  .shortcuts-advanced { border-top-color:#fff; }
  .shortcuts-advanced summary { color:#fff; }
  .shortcuts-advanced .lab-note span { color:#999; }
}

/* v1.4.90: button shortcut hints in 80% gray */
.key-hint { font-style:normal; color:#808080; font-size:.85em; }

/* v1.4.157: readable Solver Lab rows; details uses explicit margins. */
.shortcuts-advanced { display:block; }
.shortcuts-advanced > summary { margin-bottom:18px; line-height:1.5; }
.shortcuts-list .shortcuts-advanced > div { gap:14px; margin:16px 0; align-items:flex-start; }
.shortcuts-list .shortcuts-advanced > .solver-row { padding:14px 0; margin:0; border-bottom:1px solid rgba(128,128,128,.25); }
.shortcuts-advanced .solver-row > kbd { flex:0 0 36px; margin-top:2px; }
.shortcuts-list .solver-row > span { display:block; margin-left:0; min-width:0; line-height:1.55; text-transform:none; }
.solver-row strong { display:block; font-size:15px; font-weight:500; }
.solver-row small { display:block; margin-top:5px; font-size:13px; opacity:.7; }
.shortcuts-advanced .solver-metric-note { margin:14px 0 24px; max-width:58ch; font-size:12px; line-height:1.6; opacity:.7; text-transform:none; }
.shortcuts-advanced .lab-note { padding-top:12px; line-height:1.6; }
@media(max-width:600px){
 .shortcuts-list { padding-left:18px; padding-right:18px; }
 .shortcuts-list > div { flex-wrap:wrap; row-gap:8px; }
 .shortcuts-list .shortcuts-advanced > div { gap:10px; }
 .shortcuts-list .shortcuts-advanced > div > span { min-width:0; line-height:1.5; }
 .solver-row strong { font-size:14px; }
}

/* v1.5.000: basic controls and Solver Lab side by side. */
.shortcuts-dialog { width:min(1040px,calc(100% - 28px)); }
.shortcuts-list { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; }
.shortcuts-list section { min-width:0; }
.shortcuts-list h3 { font-size:16px; font-weight:500; margin:0 0 18px; }
.shortcuts-basic > div { margin:0 0 13px; line-height:1.5; }
.shortcuts-basic .tableau-shortcut { align-items:flex-start; flex-direction:column; gap:7px; }
.shortcuts-list .key-group { display:flex; gap:6px; margin-left:0; }
.shortcuts-list .tableau-shortcut > span { margin-left:0; }
.shortcuts-list .shortcuts-advanced { margin:0; padding:0 0 0 28px; border-top:0; border-left:1px solid rgba(128,128,128,.35); }
.shortcuts-list .shortcuts-advanced > div { margin:12px 0; }
.shortcuts-list .shortcuts-advanced > .solver-row { padding:10px 0; margin:0; }
.shortcuts-advanced .solver-metric-note { margin:12px 0 16px; }
.shortcuts-advanced .lab-note { padding-top:5px; }
@media(max-width:760px){
 .shortcuts-list { grid-template-columns:1fr; gap:24px; }
 .shortcuts-list .shortcuts-advanced { padding:22px 0 0; border-left:0; border-top:1px solid rgba(128,128,128,.35); }
}

/* v1.5.001: explicit collection state and collapsed Solver Lab. */
.controls #autoButton { gap:2px; }
.controls #autoButton .auto-status { font-size:11px; line-height:1.1; text-transform:lowercase; }
.controls #autoButton .auto-state { font-size:20px; line-height:1.05; text-transform:lowercase; }
.controls #autoButton b { font-size:12px; text-transform:none; }
.shortcuts-list .shortcuts-advanced { min-width:0; }
.shortcuts-advanced > summary { font-size:16px; font-weight:500; line-height:1.5; margin-bottom:18px; }
.shortcuts-advanced:not([open]) > summary { margin-bottom:0; }

.controls #autoButton span { transform:none; }
/* Header labels share a size; Records remains labelled without a counter. */
.record-button span { font-size:18px; display:inline-block; }
@media(max-width:760px){.record-button span { font-size:15px; }}

/* v1.5.004 bounded exploration controls */
.explorer-bar[hidden]{display:none!important}.explorer-bar{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:46;background:white;border:1px solid #111;padding:8px 12px;display:flex;align-items:center;gap:12px;max-width:90vw;font-size:13px}.explorer-bar button,.explorer-records button,#explorerToggle{background:white;border:1px solid #111;padding:6px 10px;cursor:pointer;font:inherit;white-space:nowrap}.explorer-records{font-size:13px;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0}.explorer-records span{line-height:1.5}#solverModeStatus{font-size:12px;margin:6px 0}#explorerToggle{font-size:13px}.shortcuts-advanced .solver-row small{display:block;margin-top:4px;font-size:11px;line-height:1.35}

/* v1.5.006: compact mobile header and unclipped three-line collection control. */
#explorerToggle,.explorer-bar button { color:var(--ink); -webkit-appearance:none; appearance:none; }
@media (max-width:760px) {
 .topbar { width:100%; max-width:100%; grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.2fr); gap:6px; padding-inline:8px; }
 .topbar > * { min-width:0; }
 .scoreboard { width:100%; gap:6px; justify-content:space-between; }
 .scoreboard span { font-size:clamp(11px,3.1vw,14px); }
 .scoreboard strong { font-size:clamp(15px,4.5vw,20px); }
 .brand { max-width:100%; transform:none; }
 .brand strong { font-size:clamp(18px,5.4vw,23px); white-space:nowrap; }
 .brand-at { font-size:clamp(15px,4.5vw,20px); }
 .brand-site strong { font-size:clamp(10px,3vw,13px); letter-spacing:0; }
 .header-actions { width:100%; min-width:0; gap:5px; }
 .player-control { flex:1 1 0; width:auto; min-width:0; padding-inline:4px; font-size:clamp(11px,3.2vw,15px); }
 .record-button { flex:0 0 auto; min-width:0; padding-inline:6px; }
 .record-button span { font-size:clamp(11px,3.2vw,15px); }
 .controls button { height:64px; min-height:64px; padding:4px 2px; }
 .controls button b { white-space:nowrap; line-height:1.15; }
 .controls #autoButton { padding:4px 2px; gap:2px; }
 .controls #autoButton b { font-size:clamp(9px,2.7vw,12px); white-space:nowrap; }
 .controls #autoButton .key-hint { display:inline; }
 .site-back,.side-links { bottom:calc(94px + env(safe-area-inset-bottom)); }
 .spotify-panel { bottom:calc(138px + env(safe-area-inset-bottom)); }
 .explorer-bar { bottom:calc(140px + env(safe-area-inset-bottom)); width:calc(100% - 24px); max-width:none; font-size:11px; z-index:110; }
 #explorerToggle { min-height:44px; white-space:normal; text-align:left; }
}

/* Touch-accessible sound toggle in the shortcut list. */
#soundToggle { min-width:52px; min-height:44px; margin-left:8px; padding:6px 10px; border:1px solid var(--ink); background:transparent; color:var(--ink); font:inherit; text-transform:lowercase; cursor:pointer; -webkit-appearance:none; appearance:none; }
#soundToggle[aria-pressed="true"] { background:var(--ink); color:white; }

/* v1.5.014: 200-row pages and the latest win at any global rank. */
.leaderboard-footer { display:grid; justify-items:center; gap:12px; padding:18px 16px 24px; }
#leaderboardCount { font-size:14px; color:#777; }
#leaderboardMore { border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:18px; padding:10px 24px; cursor:pointer; }
#leaderboardMore:disabled { opacity:.5; cursor:wait; }
#leaderboardMore[hidden],.latest-win[hidden] { display:none; }
.latest-win { margin:0 28px 18px; padding:13px 16px; border:1px solid currentColor; background:rgba(210,170,65,.10); }
.latest-win-heading { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:15px; margin-bottom:8px; }
.latest-win-heading strong { font-family:"circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; font-weight:400; }
#latestWinDetails { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.latest-win-player { min-width:0; overflow-wrap:anywhere; }
.latest-win-stats { font-size:15px; font-family:"circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Hiragino Kaku Gothic ProN","Malgun Gothic",sans-serif; }
@media(max-width:600px){
  .latest-win { margin:0 14px 14px; padding:12px; }
  .history-wrap th:nth-child(1),.history-wrap td:nth-child(1) { width:48px; padding-left:6px; padding-right:4px; font-size:14px; }
}

.latest-win-date { margin-top:4px; font-size:13px; }
#recordsDialog { width:min(1080px, calc(100% - 28px)); }

.record-name-controls { display:inline-flex; align-items:center; gap:8px; max-width:100%; }
.latest-win-player { display:flex; align-items:center; flex-wrap:wrap; gap:8px; max-width:100%; }
.latest-win-player .you-chip { margin-left:0; }
.record-name-controls .record-name { flex:0 1 auto; min-width:28px; max-width:calc(100vw - 175px); box-sizing:content-box; }
.record-name-controls .record-save { flex:0 0 auto; width:auto; min-width:54px; height:30px; padding:5px 10px; margin:0; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; font-size:15px; }

/* v1.5.015: preserve month casing and lowercase am/pm; timezone appears once. */
#leaderboardDateHeading, #historyBody td:last-child, .history-wrap .record-date, .latest-win-date { text-transform:none; }

/* This stylesheet is loaded only by the standalone Klondike template. */
.shortcuts-basic .language-control { margin-top:22px; flex-wrap:wrap; }
.language-control label { text-transform:none; }
.language-control label::after { content:":"; }
.shortcuts-list .language-select-wrap { position:relative; margin:0; display:inline-flex; }
.language-select-wrap::after { content:""; position:absolute; right:12px; top:50%; margin-top:-2px; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid #000; pointer-events:none; }
#languageSelect { appearance:none; -webkit-appearance:none; border:1px solid #000; border-radius:0; background:#fff; color:#000; padding:8px 36px 8px 12px; max-width:100%; font:inherit; text-transform:none; cursor:pointer; }
#languageSelect option { background:#fff; color:#000; }
#languageSelect:focus-visible { outline:2px solid #000; outline-offset:3px; }
.player-name, [translate="no"], .player-control input { text-transform:none; }
html:not([lang="en"]) body { text-transform:none; }
.controls button b > [data-i18n] { font:inherit; }
.shortcuts-list span[data-i18n] { margin-left:0; color:inherit; }

/* Arabic reading order is confined to text; the card table keeps its layout. */
html[lang="ar"] .dialog-head, html[lang="ar"] .shortcuts-basic,
html[lang="ar"] .shortcuts-advanced, html[lang="ar"] .again-actions,
html[lang="ar"] .toast { direction:rtl; }
html[lang="ar"] .shortcuts-list kbd, .player-name { unicode-bidi:isolate; }
#languageSelect { direction:ltr; }
.language-control { max-width:100%; }
.language-select-wrap { max-width:100%; }
.language-pending { font-size:11px; line-height:1.5; opacity:.65; text-transform:none; margin:0; }
html[lang="nan-Latn-TW"] .controls b { font-size:12px; }
html:not([lang="en"]) .controls { flex-wrap:wrap; }
html:not([lang="en"]) .panel-dialog,
html:not([lang="en"]) .scoreboard span,
html:not([lang="en"]) .brand { text-transform:none; }
html:not([lang="en"]) .controls button b { white-space:normal; overflow-wrap:anywhere; }
@media (min-width:801px) {
 html:not([lang="en"]) .controls { max-width:140px; }
}
@media (max-width:800px) {
 html:not([lang="en"]) .controls button { height:auto; min-height:64px; }
 html:not([lang="en"]) .controls button b { font-size:11px; line-height:1.25; }
}

/* A second native modal stays above Info and keeps keyboard focus inside. */
.language-dialog { width:min(820px,calc(100% - 32px)); max-height:calc(100dvh - 32px); box-sizing:border-box; padding:0; border:1px solid #000; border-radius:0; background:rgba(255,255,255,.9); color:#000; opacity:1; text-transform:none; }
.language-dialog::backdrop { background:rgba(0,0,0,.12); }
.language-dialog .dialog-head { padding:22px 24px 16px; }
.language-dialog h2 { margin:0; font-size:24px; font-weight:400; }
.language-dialog .close-button { background:#fff; color:#000; border:1px solid #000; }
.language-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; padding:0 24px 20px; }
.language-option { min-width:0; min-height:44px; padding:7px 6px; border:1px solid #000; border-radius:0; background:transparent; color:#000; font:400 15px/1.35 "circular","PingFang TC","Microsoft JhengHei","Noto Sans CJK TC",sans-serif; text-transform:none; cursor:pointer; overflow-wrap:anywhere; }
.language-option:hover:not(:disabled), .language-option[aria-pressed="true"] { color:#fff; background:#000; }
.language-option:focus-visible { outline:2px solid #000; outline-offset:2px; }
.language-option:disabled { opacity:.35; cursor:default; }
.language-dialog .language-pending { margin:0; padding:0 24px 20px; }
#languageSelect { min-width:170px; text-align:left; }
.shortcuts-basic > div > span:not(.key-group), .shortcuts-basic > div > span [data-i18n], .shortcuts-basic .language-control label { font-size:15px; line-height:1.5; }
html[lang="zh-TW"] .brand { align-items:flex-end; }
html[lang="zh-TW"] .brand-new strong { transform:none; line-height:1; }
html[lang="zh-TW"] .brand-site strong { transform-origin:center bottom; }
@media (max-width:650px) {
 .language-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
 .language-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:0 14px 14px; }
 .language-dialog .dialog-head { padding:16px 14px 12px; }
 .language-option { font-size:13px; min-height:40px; padding:5px 3px; }
 .language-dialog .language-pending { padding:0 14px 14px; font-size:10px; }
}

/* Northern Sixian: Han text leads, Taiwan Hakka Pinyin is annotation. */
.hakka-copy{display:inline-flex;flex-direction:column;max-width:100%;vertical-align:middle;line-height:1.3;text-align:inherit}
.hakka-copy .hakka-text,.shortcuts-list .hakka-copy .hakka-text{font:inherit;margin:0;color:inherit}
.hakka-copy .hakka-reading,.controls button .hakka-copy .hakka-reading,.shortcuts-list .hakka-copy .hakka-reading{display:block;font:400 9px/1.3 system-ui,sans-serif;opacity:.7;text-transform:none;letter-spacing:0;margin:2px 0 0;white-space:normal;color:inherit}
.controls button .hakka-copy{font:inherit}
html[data-game-language="hak-TW"] .brand strong{transform:none}
html[data-game-language="hak-TW"] .brand .hakka-reading{font-size:9px}
#latestWinRank{white-space:normal}
#soundToggle .hakka-copy{color:inherit;margin:0;font:inherit}

/* Hakka annotations: consistent rhythm without changing the Han type scale. */
html[lang="hak-TW"] .hakka-copy{row-gap:2px}
html[lang="hak-TW"] .hakka-copy .hakka-reading{margin-top:0;line-height:1.35}
html[lang="hak-TW"] .shortcuts-list .hakka-copy{margin-left:0}
html[lang="hak-TW"] .shortcuts-basic > div{align-items:center}
html[lang="hak-TW"] .controls button b{display:flex;align-items:center;justify-content:center;gap:4px}
html[lang="hak-TW"] .controls button .key-hint{font-size:9px;opacity:.65}
@media(max-width:760px){
 html[lang="hak-TW"] .brand{gap:3px;line-height:1}
 html[lang="hak-TW"] .brand-new .hakka-copy{row-gap:2px}
 html[lang="hak-TW"] .brand .hakka-reading{font-size:8px;line-height:1.2}
 html[lang="hak-TW"] .scoreboard .hakka-copy{align-items:center;row-gap:2px}
 html[lang="hak-TW"] .scoreboard .hakka-reading{font-size:8px}
 html[lang="hak-TW"] .controls button{height:82px;min-height:82px;padding:5px 2px;gap:5px}
 html[lang="hak-TW"] .controls button b{font-size:11px;white-space:normal;max-width:100%}
 html[lang="hak-TW"] .controls button .hakka-text{line-height:1.2}
 html[lang="hak-TW"] .controls button .hakka-reading{font-size:8px;line-height:1.25;overflow-wrap:normal}
 html[lang="hak-TW"] .controls #autoButton{gap:3px}
 html[lang="hak-TW"] .controls #autoButton .auto-status{font-size:10px}
 html[lang="hak-TW"] .controls #autoButton .auto-status .hakka-reading{font-size:7px;line-height:1.1}
 html[lang="hak-TW"] .controls #autoButton .auto-state{font-size:20px}
 html[lang="hak-TW"] .site-back,html[lang="hak-TW"] .side-links{bottom:calc(112px + env(safe-area-inset-bottom))}
 html[lang="hak-TW"] .spotify-panel{bottom:calc(156px + env(safe-area-inset-bottom))}
}

#restartButton{padding:6px 10px;min-height:44px;border:1px solid #000;border-radius:0;background:white;color:#000;font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.shortcuts-list .restart-control small{display:block;margin:4px 0 0;font-size:11px;line-height:1.4}
#restartButton span{margin:0;color:inherit;font:inherit}

/* Practice is deliberately separate from scored games. */
.practice-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:12px;text-transform:none;white-space:nowrap;color:var(--ink);pointer-events:none;z-index:3}
.practice-badge[hidden]{display:none}
.shortcuts-list .practice-help{font-size:12px;line-height:1.5;margin:0 0 14px;text-transform:none}
#recordsDialog.replay-ready{touch-action:manipulation}
#recordsDialog.replay-ready :not(input):not(textarea){-webkit-user-select:none;user-select:none}
/* Slightly tighter annotations on desktop; mobile refinements are scoped below. */
html[lang="hak-TW"] .hakka-copy{row-gap:1px}
@media(max-width:760px) and (orientation:portrait){
 .scoreboard > div:nth-child(2){transform:translateX(-5px)}


 html[lang="hak-TW"] .hakka-copy{row-gap:1px}
 html[lang="hak-TW"] .hakka-copy .hakka-reading{margin-top:0;font-size:10px;line-height:1.15}
 html[lang="hak-TW"] .scoreboard .hakka-copy{row-gap:1px}
 html[lang="hak-TW"] .scoreboard .hakka-text{font-size:13px}
 html[lang="hak-TW"] .brand{transform:translateY(3px);gap:2px}
 html[lang="hak-TW"] .brand-new strong{font-size:clamp(21px,6vw,25px)}
 html[lang="hak-TW"] .brand-new .hakka-copy{row-gap:1px}
 html[lang="hak-TW"] .brand .hakka-reading{font-size:10px;line-height:1.1}
 html[lang="hak-TW"] .controls button b{font-size:12px}
 html[lang="hak-TW"] .controls button .hakka-reading{font-size:9px;line-height:1.15}
 html[lang="hak-TW"] .controls #autoButton .auto-status .hakka-reading{font-size:8px}
}
@media(max-width:760px) and (orientation:portrait) and (prefers-color-scheme:dark){
 .card-inner,.card-front{background:#1a1a1a;border-color:#a6a6a6}
 .card.black{color:#fff}
 .card.red{color:#f00}
}

/* Only the close control stays visible; the title scrolls with the content. */
#shortcutsDialog > .shortcut-close-anchor{position:sticky;top:0;height:0;z-index:20;pointer-events:none}
#shortcutsDialog > .shortcut-close-anchor .close-button{position:absolute;top:25px;right:28px;pointer-events:auto}
#shortcutsDialog > .dialog-head{position:static;padding-right:84px}
.shortcuts-list .restart-control > kbd{flex-shrink:0;white-space:nowrap;box-sizing:border-box}
.shortcuts-list .restart-control > kbd:first-child{min-width:54px;padding-inline:10px}
.shortcuts-list .restart-control > span{min-width:0}
@media(max-width:760px){
 #shortcutsDialog > .shortcut-close-anchor .close-button{top:16px;right:16px}
 .shortcuts-list .restart-control{flex-wrap:wrap;gap:6px}
 .shortcuts-list .restart-control > span{flex:1 1 130px}
}

/* Shortcut keys use a quiet grey fill distinct from action buttons. */
.shortcuts-list kbd{background:#e6e6e6;color:#000;border-color:#000}
.practice-help::before{content:"* ";}
@media(min-width:761px){
 .shortcuts-dialog{width:min(1120px,calc(100% - 28px))}
 .shortcuts-list{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
 .shortcuts-basic .tableau-shortcut{flex-direction:row;align-items:center;gap:12px}
 .shortcuts-basic .tableau-shortcut .key-group{flex-shrink:0}
 .shortcuts-basic .restart-control > span{display:flex;align-items:center;gap:12px}
 .shortcuts-basic .restart-control small{margin:0;min-width:0}
 #restartButton{flex-shrink:0}
 html[lang="hak-TW"] .hakka-text{letter-spacing:.04em}
 html[lang="hak-TW"] .hakka-copy,html[lang="hak-TW"] .brand-new .hakka-copy{row-gap:0}
 html[lang="hak-TW"] .hakka-copy .hakka-reading,
 html[lang="hak-TW"] .controls button .hakka-copy .hakka-reading,
 html[lang="hak-TW"] .shortcuts-list .hakka-copy .hakka-reading{font-size:11px;line-height:1.15;margin-top:0;letter-spacing:0}
}

/* Compact standalone solver group; exploration keeps its separate divider. */
.shortcuts-list .shortcuts-advanced > .solver-row.solver-unit-row { border-bottom:0; padding:8px 0; }

/* Keep the standalone solver group separated from Headless. */
.shortcuts-list .shortcuts-advanced > .solver-row.solver-unit-last { border-bottom:1px solid rgba(128,128,128,.25); }

/* Header labels use the same black as the game controls; names stay gray. */
.player-control > span, .record-button span, .record-button strong { color:#000; }
.player-control input, .player-control input::placeholder { color:#737373; }

/* Release number at the end of the expanded Solver Lab. */
.shortcuts-advanced .solver-version { display:block; margin:12px 0 0; padding:0; border:0; text-align:right; color:#767676; font:11px/1.3 "circular",sans-serif; text-transform:none; letter-spacing:0; }
.shortcuts-list kbd[role="button"] { cursor:pointer; touch-action:manipulation; user-select:none; }
.shortcuts-list kbd[role="button"]:focus-visible { outline:2px solid #000; outline-offset:3px; }
.shortcuts-list kbd[role="button"]:active { background:#ccc; }
@media (pointer:coarse) {
 .shortcuts-list kbd[role="button"] { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:44px; min-height:44px; }
 .shortcuts-list .key-group { flex-wrap:wrap; max-width:100%; }
}

/* Phone Records: three stats, bounded content and vertical scrolling only. */
@media (max-width:760px) {
 #recordsDialog { box-sizing:border-box; max-width:calc(100vw - 28px); overflow-x:hidden; overscroll-behavior-x:none; touch-action:pan-y pinch-zoom; }
 #recordsDialog.replay-ready { touch-action:pan-y pinch-zoom; }
 #recordsDialog .dialog-head > div { min-width:0; }
 #recordsDialog .dialog-head h2 { overflow-wrap:anywhere; }
 #recordsDialog .close-button { flex-shrink:0; }
 #recordsDialog .stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
 #recordsDialog .stat-grid article { min-width:0; }
 #recordsDialog .stat-grid article:nth-child(3) { display:none; }
 #recordsDialog .stat-grid span,#recordsDialog .stat-grid small { overflow-wrap:anywhere; }
 #recordsDialog .stat-grid strong { font-size:clamp(18px,5.7vw,26px); }
 #recordsDialog .history-wrap { width:100%; max-width:100%; overflow-x:hidden; overscroll-behavior-x:none; touch-action:pan-y pinch-zoom; }
 #recordsDialog .history-wrap table { width:100%; table-layout:fixed; }
 #recordsDialog .history-wrap th,#recordsDialog .history-wrap td { padding-inline:4px; }
 #recordsDialog .history-wrap th:nth-child(1),#recordsDialog .history-wrap td:nth-child(1) { width:36px; padding-inline:2px; font-size:11px; letter-spacing:0; }
 #recordsDialog .history-wrap th:nth-child(3),#recordsDialog .history-wrap td:nth-child(3) { width:64px; }
 #recordsDialog .history-wrap th:nth-child(5),#recordsDialog .history-wrap td:nth-child(5) { width:58px; }
 #recordsDialog .history-wrap td:nth-child(2) { white-space:normal; overflow-wrap:anywhere; }
 #recordsDialog .history-wrap .record-date { white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere; line-height:1.35; }
 #recordsDialog .history-wrap .record-name { max-width:100%; min-width:0; }
}

/* Phone card readability: enlarge only the top corner and central face. */
@media (max-width:760px) {
 .card-corner:not(.bottom) { top:4%; left:4%; gap:0; font-size:calc(clamp(9px,2.6vw,13px) + 12px); }
 .card-corner:not(.bottom) .cc-suit { width:calc(clamp(7px,2vw,10px) + 12px); flex-shrink:0; }
 .card-center-mobile { gap:0; }
 .card-center-mobile b { font-size:calc(var(--card-w) * .52); }
 .card-center-mobile i { width:calc(var(--card-w) * .44); flex-shrink:0; }
 /* Two-digit ranks need tighter tracking to stay inside narrow phone cards. */
 .card[data-rank="10"] .card-center-mobile b { letter-spacing:-.08em; }
}

.mobile-count-pips { display:none; }
@media (max-width:760px) {
 .card-center-mobile,.card-corner.bottom { display:none; }
 .card[data-rank="10"] .card-corner:not(.bottom) b { letter-spacing:normal; transform:none; margin-right:0; }
 .mobile-count-pips { position:absolute;right:0;bottom:0;display:grid;grid-template-columns:repeat(var(--pip-cols),calc(var(--card-w) * .135));gap:calc(var(--card-w) * .003);width:max-content; }
 .mobile-count-pips i { display:block;aspect-ratio:1;font-style:normal; }
 .mobile-count-pips svg { display:block;width:100%;height:100%; }
 .mobile-count-pips:empty { display:none; }
}

/* Two balanced shortcut columns; no expandable Solver Lab category. */
#shortcutsDialog .shortcuts-list .restart-control small { font-size:11px!important;color:#818181;line-height:1.4; }
.shortcuts-list .restart-control small::before { content:"*"; }
.shortcuts-list > section { min-width:0; }
.shortcuts-list .shortcuts-advanced > div { margin:0 0 18px; }
.shortcuts-list .shortcuts-advanced > .solver-unit-row { padding:7px 0; }
.shortcuts-list .shortcuts-advanced > .solver-unit-last { border-bottom:0; }
.shortcuts-list .shortcuts-advanced .language-control { margin-top:20px; }
.shortcuts-list .shortcuts-advanced .language-pending { margin-bottom:22px; }
.shortcuts-list .shortcuts-advanced .lab-note { margin:12px 0; }
.shortcuts-list .shortcuts-advanced .solver-version { margin:12px 0 0; }