/* Memory — the third game at The Card Table. */
.hub-game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.hub-game-grid .hub-card-art { height:175px;flex-basis:175px; }
.hub-game-grid .hub-game-info { padding:23px 25px 26px; }
.hub-game-grid .hub-game-title { font-size:clamp(32px,3.1vw,43px); }
.hub-game-grid .hub-preview-card { transform-origin:center;top:14px; }
.hub-game-grid .hub-preview-one { transform:rotate(-19deg) translateX(-33px) scale(.83); }
.hub-game-grid .hub-preview-two { transform:rotate(16deg) translateX(34px) scale(.83); }
.hub-game-grid .hub-war-card-one { transform:rotate(-17deg) translateX(-38px) scale(.83); }
.hub-game-grid .hub-war-card-two { transform:rotate(16deg) translateX(39px) scale(.83); }
.hub-memory { background:linear-gradient(155deg,#f9fcff,#d8edff);color:#123c6d;box-shadow:0 13px 0 #205f98,0 22px 36px #010c2575; }
.hub-memory:hover,.hub-memory:focus-visible { transform:translateY(-5px);border-color:#fff;box-shadow:0 16px 0 #367caf,0 28px 42px #010c25ad;outline:2px solid #d4efff;outline-offset:2px; }
.hub-memory-art { background:radial-gradient(circle at 51% 42%,#9fdbff,#3984cb 46%,#13487d 100%); }
.hub-memory-preview { position:absolute;top:30px;left:calc(50% - 48px);width:96px;height:133px;border:4px solid white;border-radius:12px;background:#e6f5ff;color:#145691;box-shadow:0 15px 26px #07335e91;display:grid;place-items:center;font:900 50px Outfit,sans-serif; }
.hub-memory-preview.card-one { transform:translateX(-77px) rotate(-16deg);background:repeating-linear-gradient(45deg,#1b69b5 0 7px,#1a5d9c 7px 14px);color:#d5f0ff; }
.hub-memory-preview.card-two { z-index:2;transform:translateY(-7px);background:white; }
.hub-memory-preview.card-two small { font-size:35px;color:#d84f61; }
.hub-memory-preview.card-three { transform:translateX(77px) rotate(16deg);background:repeating-linear-gradient(45deg,#1b69b5 0 7px,#1a5d9c 7px 14px);color:#d5f0ff; }
.hub-memory-star { position:absolute;top:0;right:24px;color:#e8f9ff;font-size:48px; }

.memory-screen { position:fixed;inset:0;z-index:160;min-height:100dvh;overflow-y:auto;padding:18px 24px 45px;color:#f2faff;background:radial-gradient(ellipse at 72% 12%,#2466a0 0,transparent 46%),radial-gradient(ellipse at 8% 86%,#164b7c 0,transparent 48%),#07192f; }
.memory-shell { max-width:1130px;width:100%;margin:auto; }
.memory-header { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;border-bottom:1px solid #689ec966;padding:6px 0 16px; }
.memory-brand { letter-spacing:.15em;font:900 12px Outfit,sans-serif; }
.memory-brand small { color:#9cd3fa;font-size:11px; }
.memory-back,.memory-secondary { background:#15477491;border:1px solid #669fcf;border-radius:9px;color:#ddf2ff;padding:10px 15px;font-size:12px;font-weight:800; }
.memory-back:hover,.memory-secondary:hover { background:#226094; }
.memory-kicker { color:#9bd9fc;font-size:10px;letter-spacing:.17em;font-weight:900; }
.memory-home { padding-top:28px; }
.memory-hero { display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;min-height:290px; }
.memory-hero h1 { font:900 clamp(45px,6vw,78px)/1 Outfit,sans-serif;letter-spacing:-.055em;margin:20px 0; }
.memory-hero h1 em { font-style:normal;color:#a8dfff; }
.memory-hero p { color:#bed9ed;max-width:540px;font-size:15px;line-height:1.75; }
.memory-hero-badges { display:flex;flex-wrap:wrap;gap:9px;margin-top:25px; }
.memory-hero-badges span { color:#bcddf3;border:1px solid #568bb9;border-radius:20px;padding:8px 13px;font-size:9px;font-weight:900;letter-spacing:.14em; }
.memory-hero-art { height:265px;position:relative;display:flex;justify-content:center;align-items:center;gap:0;filter:drop-shadow(0 20px 28px #0006); }
.memory-hero-art span { display:grid;place-items:center;width:122px;height:169px;flex-shrink:0;border:4px solid white;border-radius:14px;font:900 72px Outfit,sans-serif; }
.memory-hero-art span:first-child,.memory-hero-art span:last-child { background:repeating-linear-gradient(45deg,#1e70b6 0 8px,#164f8c 8px 16px);color:#aee3ff; }
.memory-hero-art span:first-child { transform:translateX(37px) rotate(-18deg); }
.memory-hero-art span:nth-child(2) { position:relative;z-index:2;color:#174f8c;background:#fffefa;flex-direction:column;transform:translateY(-8px); }
.memory-hero-art span:nth-child(2) small { font-size:44px;line-height:1;color:#d95464; }
.memory-hero-art span:last-child { transform:translateX(-37px) rotate(18deg); }
.memory-mode-title { margin:15px 0 19px; }
.memory-mode-title>span { color:#8fc6ea;font-size:10px;font-weight:900;letter-spacing:.16em; }
.memory-mode-title h2 { font:850 27px Outfit,sans-serif;letter-spacing:-.03em;margin:8px 0; }
.memory-mode-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.memory-mode-option { display:flex;flex-direction:column;align-items:flex-start;text-align:left;border:1px solid #699ecc;border-radius:19px;padding:25px;min-height:225px;color:#e8f7ff;background:linear-gradient(160deg,#1b4d80,#0d315b);transition:transform .2s,border-color .2s; }
.memory-mode-option:hover { transform:translateY(-4px);border-color:#e6f8ff; }
.memory-mode-option.memory-featured { color:#104b82;background:linear-gradient(135deg,#f5fbff,#aee0ff);border-color:#b4e5ff; }
.memory-option-kicker { color:#99d8ff;font-size:10px;font-weight:900;letter-spacing:.13em; }
.memory-featured .memory-option-kicker { color:#347ab6; }
.memory-mode-option strong { font:900 clamp(23px,3vw,35px) Outfit,sans-serif;letter-spacing:-.035em;margin:16px 0 8px; }
.memory-mode-option p { color:#b8d8eb;font-size:12px;line-height:1.65;margin:0 0 17px; }
.memory-featured p { color:#3b6c90; }
.memory-option-cta { margin-top:auto;border-bottom:1px solid currentColor;padding-bottom:5px;font-size:10px;font-weight:900;letter-spacing:.09em; }
.memory-lobby { max-width:560px;margin:48px auto 0;padding:32px;border-radius:22px;background:#10335c;border:1px solid #699ccb;box-shadow:0 19px 50px #030e2480; }
.memory-lobby .memory-kicker { display:block;margin-top:29px; }
.memory-lobby h2 { font:900 clamp(34px,5vw,49px) Outfit,sans-serif;letter-spacing:-.05em;margin:12px 0; }
.memory-lobby>p:not(.memory-error) { color:#bddbf0;font-size:13px;line-height:1.65; }
.memory-join-options { display:flex;flex-direction:column;gap:20px;margin-top:26px; }
.memory-primary { background:#c9ebff;color:#104779;border:0;border-radius:9px;padding:15px 21px;font-size:12px;font-weight:900;letter-spacing:.07em;box-shadow:0 3px 0 #64a9d8; }
.memory-primary:hover:not(:disabled) { background:#fff; }
.memory-primary:disabled { opacity:.65;cursor:default; }
.memory-divider { color:#85b6d9;font-size:10px;font-weight:900;letter-spacing:.13em;text-align:center; }
.memory-room-input { display:flex;gap:8px; }
.memory-room-input input { min-width:0;flex:1;border:1px solid #699fcb;border-radius:9px;background:#082549;color:#eff9ff;padding:13px;font:750 12px 'DM Sans',sans-serif; }
.memory-room-input button { border:1px solid #81b6df;background:#1c5789;color:#eff9ff;border-radius:9px;padding:9px 15px;font-weight:850; }
.memory-waiting { display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;margin-top:25px;padding:20px;border:1px solid #5487b4;border-radius:14px;background:#0a284c; }
.memory-waiting .memory-pulse { display:grid;place-items:center;border:1px solid #9bd9ff;border-radius:50%;height:70px;width:70px;font-size:43px;animation:memory-breathe 2s ease-in-out infinite; }
@keyframes memory-breathe { 50% { transform:scale(1.08);opacity:.55; } }
.memory-waiting strong { font:850 18px Outfit,sans-serif; }
.memory-waiting small { font-size:11px;line-height:1.6;color:#a1c8e4; }
.memory-waiting .memory-room-input { width:100%; }
.memory-code { font-size:11px;letter-spacing:.12em;color:#a1c8e4; }
.memory-code b { font:900 24px Outfit,sans-serif;color:white;letter-spacing:.13em;margin-left:12px; }
.memory-error { min-height:20px;color:#ffb2a8;font-size:12px;font-weight:750; }
.memory-arena { padding:23px 0;max-width:810px;margin:0 auto; }
.memory-arena-heading { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px; }
.memory-scoreboard { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:17px; }
.memory-score-cell { border:1px solid #5e99c9;background:#103963;border-radius:15px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px; }
.memory-score-cell span { color:#b0d3eb;font-size:10px;font-weight:900;letter-spacing:.1em; }
.memory-score-cell strong { font:900 28px Outfit,sans-serif;color:#fff; }
.memory-board-wrap { background:linear-gradient(158deg,#134779,#092c56);border:1px solid #6ba3ce;border-radius:22px;padding:22px;box-shadow:0 20px 44px #0005; }
.memory-board-top { display:flex;justify-content:space-between;gap:10px;color:#acd7f6;font-size:10px;font-weight:900;letter-spacing:.13em;margin-bottom:19px; }
.memory-board { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:610px;margin:0 auto; }
.memory-tile { display:block;position:relative;width:100%;aspect-ratio: .8;min-height:105px;max-height:154px;border:none;background:none;padding:0;perspective:750px;touch-action:manipulation; }
.memory-tile:focus-visible { outline:3px solid #fff;outline-offset:3px;border-radius:10px; }
.memory-tile:disabled { cursor:default; }
.memory-tile-inner { position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .37s cubic-bezier(.22,.75,.33,1); }
.memory-tile.is-up .memory-tile-inner { transform:rotateY(180deg); }
.memory-face { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:11px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 8px 18px #02142d80; }
.memory-back-face { background:repeating-linear-gradient(45deg,#1f79bf 0 7px,#12558f 7px 14px);border:4px solid #d7eeff; }
.memory-back-face::after { content:'♠';display:grid;place-items:center;width:51%;aspect-ratio:1;border:2px solid #bde7ff;border-radius:50%;background:#174a78;color:#d3efff;font-size:30px; }
.memory-front-face { transform:rotateY(180deg);background:#fffdfb;color:#153b65;border:4px solid white;flex-direction:column;font:900 clamp(22px,4vw,43px) Outfit,sans-serif; }
.memory-front-face small { color:#d95065;font-size:clamp(20px,3.5vw,35px); }
.memory-tile.is-matched .memory-front-face { background:#d4f3ff;border-color:#77d2ff;box-shadow:inset 0 0 0 2px #6cc0eb; }
.memory-tile:not(:disabled):hover .memory-tile-inner { filter:brightness(1.14); }
.memory-tile.is-dealing { animation:memory-deal .47s cubic-bezier(.2,.85,.28,1.1) both;animation-delay:var(--deal-delay); }
@keyframes memory-deal { from { transform:translateY(-55px) scale(.72) rotate(-7deg);opacity:0; } to { transform:translateY(0) scale(1) rotate(0);opacity:1; } }
.memory-board-message { display:block;text-align:center;min-height:42px;padding:23px 0 0;color:#ddf2ff;font:900 13px Outfit,sans-serif;letter-spacing:.08em; }
.memory-game-hint { text-align:center;margin:15px 0;color:#a9cbe3;font-size:12px;line-height:1.6; }
.memory-result { border:1px solid #7fc5f3;background:linear-gradient(145deg,#e3f6ff,#b5e2ff);color:#154978;border-radius:20px;padding:30px;text-align:center;margin:20px auto;max-width:590px;box-shadow:0 22px 35px #001c3c77; }
.memory-result .memory-kicker { color:#4089be; }
.memory-result-icon { color:#287fb7;font-size:52px;margin:4px 0; }
.memory-result h2 { font:900 40px Outfit,sans-serif;margin:4px 0;letter-spacing:-.04em; }
.memory-result p { font-size:13px;color:#396b92;line-height:1.65; }
.memory-result-actions { display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:20px; }
.memory-result .memory-primary { background:#185fa3;color:white;box-shadow:none; }
.memory-result .memory-secondary { color:#18598c;background:transparent; }
.memory-rules-dialog { max-width:590px; }
.memory-rules-dialog li { margin-bottom:10px;line-height:1.6; }

@media(max-width:960px) {
  .hub-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hub-game-grid .hub-game-card { min-height:0; }
  .memory-mode-grid { grid-template-columns:1fr; }
  .memory-mode-option { min-height:150px; }
}
@media(max-width:760px) {
  .hub-game-grid { grid-template-columns:1fr; }
  .hub-game-grid .hub-game-card { flex-direction:row;min-height:230px; }
  .hub-game-grid .hub-card-art { flex:0 0 38%;height:auto; }
  .hub-game-grid .hub-game-info { padding:22px; }
  .memory-hero { grid-template-columns:1fr; }
  .memory-hero-art { display:none; }
}
@media(max-width:560px) {
  .hub-game-grid .hub-game-card { flex-direction:column; }
  .hub-game-grid .hub-card-art { height:144px;flex:0 0 144px; }
  .memory-screen { padding:11px 14px 35px; }
  .memory-header { gap:7px; }
  .memory-brand { font-size:9px;letter-spacing:.04em; }
  .memory-brand small { font-size:9px; }
  .memory-back { padding:9px 11px;font-size:10px; }
  .memory-home { padding-top:24px; }
  .memory-hero h1 { font-size:46px; }
  .memory-hero p { font-size:13px; }
  .memory-lobby { margin-top:23px;padding:19px 15px; }
  .memory-room-input { flex-wrap:wrap; }
  .memory-room-input button { padding:11px; }
  .memory-arena { padding-top:17px; }
  .memory-scoreboard { gap:7px; }
  .memory-score-cell { padding:12px 8px;flex-direction:column;align-items:flex-start;gap:4px; }
  .memory-score-cell span { font-size:8px; }
  .memory-score-cell strong { font-size:24px; }
  .memory-board-wrap { padding:12px 10px 19px;border-radius:14px; }
  .memory-board { gap:8px; }
  .memory-tile { min-height:64px;max-height:none; }
  .memory-back-face { border-width:3px; }
  .memory-back-face::after { font-size:18px; }
  .memory-front-face { border-width:3px;font-size:24px; }
  .memory-front-face small { font-size:22px; }
  .memory-board-top { font-size:8px;letter-spacing:.06em; }
}
@media(prefers-reduced-motion:reduce) {
  .memory-tile-inner { transition:none; }
  .memory-tile.is-dealing,.memory-waiting .memory-pulse { animation:none; }
}

/* Board size picker — the same blue felt, card edges, and icy accents as Memory. */
.memory-pair-setting {display:grid;grid-template-columns:.85fr 1.4fr;gap:36px;align-items:center;margin:28px 0 34px;padding:28px 30px;border:1px solid #639bd074;border-radius:20px;background:linear-gradient(125deg,#174a79e6,#0b2c50e6);box-shadow:inset 0 1px 0 #c9eaff12,0 14px 32px #03142733;}
.memory-pair-intro h2 {margin:13px 0 10px;font:900 clamp(25px,3vw,35px)/1.1 Outfit,sans-serif;letter-spacing:-.04em;color:#effaff;}
.memory-pair-intro p {margin:0;color:#bed9ed;font-size:13px;line-height:1.65;}
.memory-pair-host {display:block;margin-top:18px;color:#92b9d7;font-size:11px;}
.memory-pair-controls {min-width:0;}
.memory-pair-controls-top {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;}
.memory-pair-controls-top label {color:#a7d5f5;font-size:10px;font-weight:900;letter-spacing:.14em;}
.memory-card-total {padding:6px 10px;border:1px solid #77b8e13d;border-radius:20px;background:#09274388;color:#b8e6ff;font-size:11px;font-weight:700;white-space:nowrap;}
.memory-pair-presets {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}
.memory-pair-presets button {position:relative;min-height:86px;border:1px solid #6e9cc866;border-radius:12px;background:#0b2e52;color:#dfedfc;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;padding:12px 4px;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s;}
.memory-pair-presets button strong {font:900 29px/1 Outfit,sans-serif;letter-spacing:-.04em;}
.memory-pair-presets button span {font-size:10px;font-weight:750;white-space:nowrap;}
.memory-pair-presets button i {font-style:normal;font-size:11px;}
.memory-pair-presets button:hover {border-color:#bce9ff;background:#1a517e;}
.memory-pair-presets button.is-selected {background:linear-gradient(135deg,#eaf8ff,#99d7ff);color:#104473;border-color:#cef0ff;box-shadow:0 4px 0 #417eaf,0 0 22px #80ceff20;}
.memory-pair-adjust {display:flex;align-items:center;gap:22px;margin-top:22px;}
.memory-pair-slider {min-width:0;flex:1;}
#memoryPairCount {appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:100%;height:6px;margin:14px 0 15px;padding:0;border:0;border-radius:10px;background:linear-gradient(to right,#a5dfff 0 var(--pair-progress,28%),#345a7c var(--pair-progress,28%) 100%);cursor:pointer;touch-action:pan-y;}
#memoryPairCount::-webkit-slider-thumb {appearance:none;-webkit-appearance:none;width:20px;height:20px;border:3px solid #e9f9ff;border-radius:50%;background:#70bce8;box-shadow:0 0 0 4px #70bce825,0 3px 8px #001c35;}
#memoryPairCount::-moz-range-thumb {width:14px;height:14px;border:3px solid #e9f9ff;border-radius:50%;background:#70bce8;box-shadow:0 0 0 4px #70bce825;}
.memory-pair-limits {display:flex;justify-content:space-between;gap:8px;color:#82a9c9;font-size:8px;font-weight:800;letter-spacing:.08em;}
.memory-pair-stepper {display:flex;align-items:center;gap:3px;border:1px solid #649cc86b;border-radius:12px;background:#082844;padding:5px;}
.memory-pair-stepper button {display:grid;place-items:center;width:36px;height:40px;border:0;border-radius:8px;background:transparent;color:#b6e4ff;font-size:23px;font-weight:500;cursor:pointer;}
.memory-pair-stepper button:hover:not(:disabled) {background:#205784;color:#fff;}
.memory-pair-stepper button:disabled {opacity:.25;cursor:default;}
.memory-pair-stepper output {display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:38px;height:40px;color:#e8f8ff;font:900 22px/1 Outfit,sans-serif;}
.memory-pair-stepper output span {margin-top:3px;font:700 9px/1 Outfit,sans-serif;color:#9bc2de;}
.memory-pair-presets button:focus-visible,.memory-pair-stepper button:focus-visible,#memoryPairCount:focus-visible {outline:2px solid #dbf5ff;outline-offset:5px;}
@media(max-width:760px) {.memory-pair-setting {grid-template-columns:1fr;gap:22px;padding:23px;}.memory-pair-intro p br {display:none;}.memory-pair-host {margin-top:9px;}}
@media(max-width:420px) {.memory-pair-setting {padding:19px 15px;}.memory-pair-presets {gap:7px;}.memory-pair-presets button {min-height:80px;}.memory-pair-presets button span {font-size:9px;}.memory-pair-adjust {gap:14px;}.memory-pair-stepper button {width:30px;}.memory-card-total {font-size:10px;padding:6px 8px;}}
@media(prefers-reduced-motion:reduce) {.memory-pair-presets button {transition:none;}}

/* Board dimensions are calculated for the card count and current viewport. */
.memory-board {max-width:100%;}
.memory-board .memory-tile {min-height:0;max-height:none;aspect-ratio:.8;}
.memory-board .memory-front-face {font-size:var(--memory-rank-size, 24px);}
.memory-board .memory-front-face small,.memory-board .memory-back-face::after {font-size:var(--memory-suit-size, 22px);}