/* One compact chooser across devices; more games never create more toolbar rows. */
.play-game-picker{display:flex;align-items:center;gap:16px;padding:12px 30px;border-block:1px solid var(--play-line);background:#f1e8d7}
.play-game-picker>label{flex:none;font:500 14px/1.5 var(--sans);color:var(--play-ink)}
.play-game-select{position:relative;flex:0 1 360px;min-width:0}
.play-game-select::after{content:'';position:absolute;right:17px;top:18px;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);pointer-events:none}
#playGameSelect{appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;min-height:48px;padding:10px 42px 10px 14px;border:1px solid #b99d79;border-radius:6px;background:var(--play-paper);color:var(--play-ink);font:500 16px/1.5 var(--sans);cursor:pointer}
#playGameSelect:focus-visible{outline:2px solid var(--play-ink);outline-offset:3px}
.play-game-count{margin-left:auto;white-space:nowrap;font:400 13px/1.5 var(--sans);color:var(--play-muted)}
@media(max-width:760px), (max-width:1000px) and (max-height:500px) and (orientation:landscape){
 .play-game-picker{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:12px 16px}
 .play-game-count{display:none}
}
@media(max-height:500px) and (max-width:1000px) and (orientation:landscape){.play-game-picker{grid-template-columns:auto minmax(0,1fr) auto;padding-block:8px}}

/* Small table games share the playroom's wine ink, gold counters and printed paper. */

.table-game .game-heading h3 {font-size:29px;}
.table-game .game-heading p {font-size:15px;line-height:1.7;max-width:45ch;}
.table-game .game-reset {font:500 13px/1.5 var(--sans);min-height:44px;}
.table-game .game-status {font-size:15px;line-height:1.7;min-height:42px;}
.game-stage--connect,.game-stage--dots,.game-stage--memory {max-width:480px;margin-inline:auto;}
.table-game-key {display:flex;gap:24px;margin-bottom:16px;font:500 13px/1.5 var(--sans);}
.table-game-key>span {display:flex;align-items:center;gap:8px;}
.table-game-key i {display:block;width:15px;height:15px;border-radius:50%;}
.counter-you {background:#70404e;}
.counter-bot {background:#c39a54;}
.table-game-score {display:flex;gap:36px;align-items:baseline;margin:0 0 18px;font:400 14px/1.5 var(--sans);color:#735e49;}
.table-game-score>span {display:flex;align-items:baseline;gap:12px;}
.table-game-score strong {font:500 25px/1.3 var(--sans);color:#532d3a;font-variant-numeric:tabular-nums;}
.connect-columns {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;padding:0 12px 10px;}
.connect-columns button {display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:4px 0;background:none;border:0;border-radius:5px;color:#70404e;font:500 12px var(--sans);cursor:pointer;}
.connect-columns svg {width:19px;height:19px;}
.connect-columns button:hover:not(:disabled) {background:#e9dac5;}
.connect-columns button:disabled {opacity:.3;cursor:default;}
.connect-wells {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;padding:16px;border:1px solid #b39874;border-radius:12px;background:#e6d5b8;}
.connect-row {display:contents;}
.connect-cell {display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:#fffaf0;color:transparent;box-shadow:inset 0 2px 3px #76533a16;}
.connect-cell.is-you {background:#70404e;color:#fff5e4;}
.connect-cell.is-bot {background:#c39a54;color:#382b1f;}
.connect-cell>span {font:600 12px/1 var(--sans);}
.connect-cell.is-last {outline:1px dashed #532d3a;outline-offset:3px;}
.connect-cell.is-winning {outline:3px solid #3a6549;outline-offset:2px;}
.connect-mobile {display:none;}
.dots-board {display:grid;grid-template-columns:12px repeat(3,minmax(0,1fr) 12px);grid-template-rows:12px repeat(3,minmax(0,1fr) 12px);width:min(360px,100%);aspect-ratio:1;margin:auto;padding:20px;background:#f5ecdc;border:1px solid #c5ae8c;border-radius:10px;}
.dots-dot {position:relative;z-index:2;width:12px;height:12px;border-radius:50%;background:#532d3a;pointer-events:none;}
.dots-edge {position:relative;z-index:1;display:grid;place-items:center;align-self:center;justify-self:center;padding:0;background:none;border:0;cursor:pointer;}
.dots-edge.is-horizontal {width:100%;height:44px;}
.dots-edge.is-vertical {width:44px;height:100%;}
.dots-edge>span {border-radius:3px;background:#cdbb9e;pointer-events:none;transition:background .15s;}
.dots-edge.is-horizontal>span {width:100%;height:5px;}
.dots-edge.is-vertical>span {width:5px;height:100%;}
.dots-edge:hover:not(:disabled)>span,.dots-edge:focus-visible>span {background:#947180;}
.dots-edge.is-you>span {background:#70404e;}
.dots-edge.is-bot>span {background:#ac803d;}
.dots-edge.is-last>span {box-shadow:0 0 0 1px #532d3a;}
.dots-edge:disabled {cursor:default;}
.dots-box {display:grid;place-items:center;margin:6px;border-radius:4px;font:500 24px/1 var(--sans);color:#532d3a;}
.dots-box.is-you {background:#ead8dc;}
.dots-box.is-bot {background:#ebd7b1;}
.memory-board {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.memory-tile {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:108px;aspect-ratio:1/1.12;padding:10px 6px;border:1px solid #b99a75;border-radius:8px;background:#70404e;color:#532d3a;cursor:pointer;transition:background .2s,border-color .2s;}
.memory-tile:hover:not(:disabled) {background:#875664;}
.memory-tile .memory-back {width:52px;height:52px;object-fit:contain;}
.memory-tile.is-revealed {background:#fffbf0;}
.memory-tile.is-matched {background:#e8ebda;border-color:#9baf80;}
.memory-tile>img:not(.memory-back) {display:block;width:100%;height:62px;object-fit:contain;}
.memory-tile>span {font:500 12px/1.4 var(--sans);text-align:center;}
.memory-tile:disabled {cursor:default;opacity:1;}
@media(max-width:760px), (max-width:1000px) and (max-height:500px) and (orientation:landscape) {

 .table-game .game-heading h3 {font-size:26px;}
 .table-game .game-heading p {font-size:14px;}
 .table-game .game-status {font-size:14px;}
 .table-game .game-reset {font-size:13px;}
 .connect-columns {display:none;}
 .connect-wells {gap:6px;padding:12px;}
 .connect-mobile {display:grid;grid-template-columns:auto 68px minmax(0,1fr);gap:12px;align-items:center;margin-top:16px;font:500 14px var(--sans);}
 .connect-mobile select {min-width:0;width:100%;height:46px;padding:8px;border:1px solid #b99d79;border-radius:5px;background:#fffbf0;color:#532d3a;font:500 16px var(--sans);}
 .connect-mobile button {min-height:46px;padding:8px 12px;border:1px solid #70404e;border-radius:5px;background:#70404e;color:#fff4df;font:500 14px var(--sans);}
 .connect-mobile button:disabled,.connect-mobile select:disabled {opacity:.5;}
 .table-game-key {font-size:13px;margin-bottom:14px;}
 .table-game-score {gap:28px;font-size:13px;}
 .table-game-score strong {font-size:23px;}
 .memory-board {gap:8px;}
 .memory-tile {min-height:84px;aspect-ratio:1/1.25;padding:8px 4px;}
 .memory-tile .memory-back {width:42px;height:42px;}
 .memory-tile>img:not(.memory-back) {height:47px;}
 .memory-tile>span {font-size:12px;}
 .dots-board {padding:18px;}
 .game-stage--connect .result-detail,.game-stage--dots .result-detail,.game-stage--memory .result-detail {font-size:14px;}
}
@media(max-width:360px) {
 .connect-mobile {grid-template-columns:auto 60px minmax(0,1fr);gap:8px;}
 .connect-mobile button {font-size:13px;padding-inline:6px;}
 .connect-wells {padding:10px;gap:5px;}
 .connect-cell>span {font-size:12px;}
 .memory-board {gap:6px;}
 .memory-tile {min-height:80px;}
 .memory-tile>span {font-size:12px;}
 .memory-tile>img:not(.memory-back) {height:42px;}
 .dots-box {font-size:21px;}
}
@media(prefers-reduced-motion:reduce) {.memory-tile,.dots-edge>span {transition:none;}}
