.arcade {
  --arcade-paper: #ece9d8;
  --arcade-ink: #202834;
  --arcade-muted: #4d5863;
  --arcade-chip: #f4f1e6;
  --arcade-chip-hover: #fffbea;
  --arcade-accent: #e8f0fc;
  --arcade-accent-hover: #f6faff;
  min-width: 0;
  min-height: 100%;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
  background: var(--arcade-paper);
  color: var(--arcade-ink);
  font-family: Tahoma, Verdana, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  outline: none;
}
.arcade *, .arcade *::before, .arcade *::after { box-sizing: border-box; box-shadow: none; outline: none; }
.arcade-heading { margin: 0 0 12px; }
.arcade-heading h2 { margin: 0 0 3px; font: 700 19px/1.25 Tahoma, Verdana, Arial, sans-serif; color: var(--arcade-ink); }
.arcade-heading p { margin: 0; color: var(--arcade-muted); }
.arcade-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.arcade-button {
  min-height: 35px;
  padding: 7px 13px;
  border: 1px solid #969786;
  border-radius: 3px;
  background: linear-gradient(180deg, #fffef8 0%, var(--arcade-chip) 70%, #dedccc 100%);
  color: var(--arcade-ink);
  font: 700 12px/1.2 Tahoma, Verdana, Arial, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: none;
  transition: background-color .12s, transform .12s;
}
.arcade-button:hover, .arcade-button:focus-visible { background: linear-gradient(180deg, #fffef5, var(--arcade-chip-hover), #e9e4cb); color: var(--arcade-ink); border-color: #618234; }
.arcade-button:active { transform: scale(.985); background: linear-gradient(180deg, #d6d8c7, #f6f6e8); color: #26342e; }
.arcade-button.primary { background: linear-gradient(180deg, #fff, var(--arcade-accent), #c9d9ef); border-color: #5d7eaf; color: #16375a; }
.arcade-button.primary:hover, .arcade-button.primary:focus-visible { background: linear-gradient(180deg, #fff, var(--arcade-accent-hover), #d8e8fa); border-color: #376cab; color: #143c68; }
.arcade-button.primary:active { background: linear-gradient(180deg, #bad0ea, #ecf4ff); color: #133a62; }
.arcade-button:disabled, .arcade-button:disabled:hover { background: #e0e2d8; color: #666e62; cursor: default; transform: none; }
.arcade-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin: 10px 0 12px; font-size: 11px; color: var(--arcade-muted); }
.arcade-stats > span { white-space: nowrap; }
.arcade-stats strong { margin-left: 3px; color: var(--arcade-ink); font-size: 13px; font-weight: 700; }
.arcade-message { margin: 10px 0; color: var(--arcade-ink); min-height: 1.5em; }
.arcade-footnote { margin: 8px 0 0; color: var(--arcade-muted); font-size: 10px; line-height: 1.6; }
.arcade-progress { margin-left: auto; color: var(--arcade-muted); font-size: 11px; white-space: nowrap; }
.arcade-stage { position: relative; width: 100%; overflow: hidden; border-radius: 3px; border: 1px solid #7b8e79; background: #193323; }
.arcade-stage:focus-within { border-color: #a0ad62; }
.arcade-canvas { display: block; width: 100%; height: auto; touch-action: none; outline: none; }
.defrag-stage .arcade-canvas { aspect-ratio: 10 / 7; }
.snake-stage .arcade-canvas { aspect-ratio: 1; }
.arcade-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; background: rgba(20, 39, 26, .92); color: #f7f2df; pointer-events: none; }
.arcade-overlay[hidden] { display: none; }
.arcade-overlay h3 { margin: 0; max-width: 100%; color: #f7f2df; font-size: 21px; line-height: 1.25; }
.arcade-overlay p { margin: 0; max-width: 260px; color: #d2dbc8; font-size: 12px; }
.arcade-overlay .arcade-button.primary { background: linear-gradient(180deg, #f9fbf1, #d4e0bc); border-color: #9bae79; color: #1e3a25; pointer-events: auto; }
.arcade-overlay .arcade-button.primary:hover, .arcade-overlay .arcade-button.primary:focus-visible { background: linear-gradient(180deg, #fff, #e3eccf); border-color: #cedaaf; color: #1e3a25; }
.arcade-overlay .arcade-button.primary:active { background: linear-gradient(180deg, #b8cba0, #e3eccc); color: #1e3a25; }
.arcade-rules { margin-top: 12px; color: var(--arcade-muted); font-size: 11px; }
.arcade-rules summary { width: fit-content; padding: 6px 0; color: var(--arcade-ink); font-weight: 700; cursor: pointer; white-space: nowrap; }
.arcade-rules summary:focus-visible { color: #286337; background: #e0e9cf; border-radius: 4px; }
.arcade-rules p { margin: 7px 0; }
.sol-board { --sol-gap: 8px; --card-height: 105px; --card-step: 26px; width: 100%; padding: 12px; border-radius: 3px; background: #216438; color: #fff; }
.sol-top, .sol-tableau { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sol-gap); }
.sol-top { margin-bottom: 14px; padding-bottom: 20px; }
.sol-slot, .sol-column { position: relative; min-width: 0; height: var(--card-height); }
.sol-pile-label { position: absolute; top: calc(var(--card-height) + 4px); left: 0; width: 100%; text-align: center; font-size: 9px; line-height: 14px; color: #dce8d7; white-space: nowrap; }
.sol-empty, .sol-stock, .sol-card { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 100%; height: var(--card-height); border: 0; border-radius: 6px; color: #2a4834; font-family: Tahoma, Verdana, Arial, sans-serif; cursor: pointer; padding: 0; white-space: nowrap; }
.sol-empty { background: rgba(241, 245, 220, .1); color: #c1d4b7; font-size: 22px; }
.sol-empty:hover, .sol-empty:focus-visible { background: rgba(241, 245, 220, .23); color: #f5f2d2; }
.sol-stock { background: rgba(241, 245, 220, .14); color: #e6eddb; font-size: 10px; }
.sol-stock:hover, .sol-stock:focus-visible { background: rgba(241, 245, 220, .29); color: #fff7db; }
.sol-stock.has-cards, .sol-card.face-down { background: linear-gradient(180deg, #a9cdf1, #d8e9f6 55%, #94bd82); color: #456140; overflow: hidden; }
.sol-stock.has-cards:hover, .sol-stock.has-cards:focus-visible { background: linear-gradient(180deg, #c5ddfa, #f1f8fc 55%, #afd197); color: #354f30; }
.sol-stock svg, .sol-card.face-down svg { display: block; width: 34%; height: 56%; }
.sol-card { top: calc(var(--offset) * var(--card-step)); display: block; background: #fffaf0; color: #223f2a; text-align: center; }
.sol-card.red-suit { color: #a83c34; }
.sol-card:hover, .sol-card:focus-visible { background: #f3e6b8; color: #223f2a; }
.sol-card.red-suit:hover, .sol-card.red-suit:focus-visible { background: #f3e6b8; color: #9b302b; }
.sol-card.is-selected { background: #eed58b; color: #1f3e28; }
.sol-card.is-selected.red-suit { background: #eed58b; color: #942e28; }
.sol-card.face-down { display: flex; cursor: default; }
.sol-back-clippy { position: absolute; left: 50%; top: 4%; height: 92%; width: 86%; transform: translateX(-50%); object-fit: contain; pointer-events: none; }
.sol-card.court-card.face-up { background: linear-gradient(180deg, #fff9e9, #f3e6bd); }
.sol-card.court-card.is-selected, .sol-card.court-card:focus-visible { background: #eed58b; }
.sol-court-clippy { position: absolute; top: 24%; left: 50%; width: 65%; height: 59%; transform: translateX(-50%); object-fit: contain; pointer-events: none; }
.sol-court-suit { position: absolute; top: 5px; right: 3px; width: 16%; }
.sol-court-suit svg { width: 100%; display: block; }
.sol-court-role { position: absolute; bottom: 3px; width: 100%; left: 0; font-size: 8px; line-height: 10px; font-weight: 700; color: #5c4d28; white-space: nowrap; }
.sol-rank { position: absolute; left: 0; top: 2px; width: 100%; display: block; font-size: 16px; font-weight: 700; line-height: 20px; }
.sol-suit { position: absolute; left: 50%; top: 55%; width: 34%; transform: translate(-50%, -50%); }
.sol-suit svg { width: 100%; height: auto; display: block; }
.snake-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.snake-controls .arcade-message { flex: 1; max-width: 260px; font-size: 11px; }
.snake-pad { flex: 0 0 auto; display: grid; grid-template-columns: 36px 36px 36px; grid-template-rows: 35px 35px; gap: 4px; }
.snake-direction { width: 36px; min-height: 35px; padding: 8px; }
.snake-direction svg { display: block; width: 20px; height: 20px; }
.direction-up { grid-column: 2; grid-row: 1; }
.direction-left { grid-column: 1; grid-row: 2; }
.direction-down { grid-column: 2; grid-row: 2; }
.direction-right { grid-column: 3; grid-row: 2; }
.pinball-stage { max-width: 420px; margin-inline: auto; background: #173650; }
.pinball-stage .arcade-canvas { aspect-ratio: 3 / 4; }
.pinball-flippers { max-width: 420px; margin: 9px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pinball-flippers > span { color: var(--arcade-muted); font-size: 9px; line-height: 1.25; text-align: center; }
.pinball-flipper { min-height: 40px; padding-inline: 17px; touch-action: none; }
.pinball-flipper[aria-pressed="true"] { background: linear-gradient(180deg, #c6d3ae, #e7edcf); border-color: #648242; color: #213d29; }
.pinball-app .arcade-toolbar { max-width: 420px; margin-inline: auto; }
.pinball-app .arcade-message { font-size: 11px; }
[data-theme="dark"] .arcade, .dark .arcade { --arcade-paper: #1d3027; --arcade-ink: #edf1df; --arcade-muted: #bbcab9; --arcade-chip: #354c39; --arcade-chip-hover: #45634a; --arcade-accent: #407d4c; --arcade-accent-hover: #356c40; }
[data-theme="dark"] .arcade-button, .dark .arcade-button { background: linear-gradient(180deg, #4c6152, #304937); border-color: #849980; color: #f3f3e3; }
[data-theme="dark"] .arcade-button:hover, [data-theme="dark"] .arcade-button:focus-visible, .dark .arcade-button:hover, .dark .arcade-button:focus-visible { background: linear-gradient(180deg, #64795c, #425c3f); border-color: #bdcb9d; color: #fffde9; }
[data-theme="dark"] .arcade-button.primary, .dark .arcade-button.primary { background: linear-gradient(180deg, #546f8b, #284861); border-color: #97aabb; color: #f5f9ff; }
[data-theme="dark"] .arcade-button.primary:hover, [data-theme="dark"] .arcade-button.primary:focus-visible, .dark .arcade-button.primary:hover, .dark .arcade-button.primary:focus-visible { background: linear-gradient(180deg, #69869e, #36566d); border-color: #b8c9d5; color: #fff; }
[data-theme="dark"] .arcade-button:active, .dark .arcade-button:active { background: #4f7051; color: #f1f4e6; }
[data-theme="dark"] .arcade-button:disabled, .dark .arcade-button:disabled { background: #354138; color: #a4afa1; }
[data-theme="dark"] .arcade-rules summary:focus-visible, .dark .arcade-rules summary:focus-visible { background: #3a533c; color: #e1f0c2; }
@media (max-width: 480px) {
  .arcade { padding: 12px 10px; }
  .arcade-heading h2 { font-size: 17px; }
  .arcade-heading p { font-size: 11px; }
  .arcade-toolbar { gap: 6px; }
  .arcade-button { font-size: 11px; padding-inline: 11px; }
  .arcade-stats { gap: 5px 9px; font-size: 10px; }
  .arcade-stats strong { font-size: 12px; }
  .arcade-progress { margin-left: 0; width: 100%; font-size: 10px; }
  .arcade-overlay { padding: 12px; gap: 8px; }
  .arcade-overlay h3 { font-size: 18px; }
  .arcade-overlay p { font-size: 11px; }
  .sol-board { padding: 8px 6px; }
  .sol-rank { top: 1px; font-size: 13px; line-height: 16px; }
  .sol-pile-label { font-size: 8px; }
  .sol-stock { font-size: 8px; }
  .sol-court-role { font-size: 6px; line-height: 8px; bottom: 2px; }
  .pinball-flipper { padding-inline: 10px; font-size: 10px; }
  .sol-card, .sol-stock, .sol-empty { border-radius: 4px; }
.sol-top { margin-bottom: 10px; }
}
.sol-board{background:radial-gradient(ellipse at 50% 0,#247748,#185530);min-height:345px;touch-action:pan-y}
.sol-column{height:100%;min-height:var(--card-height)}
.sol-card{border:1px solid #c7c1ae;border-radius:4px;user-select:none;touch-action:none;overflow:hidden}
.sol-card.face-up{cursor:grab;color:#192b31;background:#fffdf5}
.sol-card.face-up.red-suit{color:#b12522}
.sol-card.face-up:active{cursor:grabbing}
.sol-card.face-up:hover,.sol-card.face-up:focus-visible{background:#fff1c8;color:#192b31}
.sol-card.face-up.red-suit:hover,.sol-card.face-up.red-suit:focus-visible{color:#b12522}
.sol-card.is-selected,.sol-card.is-selected:hover{background:#f3d789}
.sol-corner{position:absolute;left:3%;top:2%;width:19%;display:flex;flex-direction:column;align-items:center;line-height:1;font-size:clamp(9px,1.1vw,15px)}
.sol-corner b{line-height:1.05;font-weight:700}.sol-corner svg{width:74%;margin-top:1px}
.sol-corner.bottom{left:auto;top:auto;bottom:2%;right:3%;rotate:180deg}
.sol-pips{position:absolute;inset:12% 16%;pointer-events:none}
.sol-pips>span{position:absolute;width:24%;transform:translate(-50%,-50%);line-height:0}
.sol-pips svg{display:block;width:100%;height:auto}
.sol-pips svg{transform:rotate(var(--pip-rotation,0deg))}
.sol-pips.sol-ace>span{width:62%}
.sol-drag{position:fixed;z-index:50000;pointer-events:none;font-family:Tahoma,Verdana,Arial,sans-serif;opacity:.97}
.sol-lifted{opacity:.22}
.sol-drop-ready{background:rgba(238,229,159,.23);border-radius:4px}
.sol-card.face-down,.sol-stock.has-cards{background:linear-gradient(180deg,#5e98cf,#bfdcec 53%,#93b078);border:1px solid #eee7d2}
.sol-back-clippy{height:80%;top:10%;width:78%}
.sol-card.court-card .sol-court-clippy{height:68%;top:15%;width:61%}
.sol-card.court-card .sol-court-role{font-size:8px;bottom:7%}
.sol-court-suit{display:none}
@media(max-width:480px){.sol-board{min-height:260px}.sol-corner{font-size:10px}.sol-corner svg{display:none}.sol-court-role{display:none}.sol-pips{inset:14% 13%}.sol-pips>span{width:27%}}
.sol-card.court-card.face-up{background:#faf7ec}
.sol-court-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;clip-path:inset(1% 19%);pointer-events:none}
.sol-corner{z-index:1}
.sol-card.court-card.is-selected{background:#f3d789}
.card-collection{padding:18px;background:#ece9d8;color:#252f35;min-height:100%;font:12px/1.5 Tahoma,Verdana,sans-serif}
.card-collection h1{margin:0;font-size:20px}.card-collection>p{margin:6px 0 16px}
.card-collection-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:20px 0}
.card-collection figure{margin:0;min-width:0}
.card-collection figure>button{aspect-ratio:5/7;max-height:390px;border:0;padding:0;background:transparent;display:block;width:100%;cursor:pointer}
.card-collection figure img{display:block;width:100%;height:auto;max-height:390px;object-fit:contain}
.card-collection figcaption{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.card-collection figcaption .arcade-button{font-size:11px;padding:6px 10px;min-height:30px;text-decoration:none}
.defrag-app .arcade-stage,.trail-app .arcade-stage{border:1px solid #8797a3;border-radius:0;background:#ebe8da}
.defrag-app .defrag-stage .arcade-canvas{aspect-ratio:64/46}.trail-app .snake-stage .arcade-canvas{aspect-ratio:1}
.xp-game-dialog{inset:50% auto auto 50%;width:min(320px,88%);transform:translate(-50%,-50%);height:auto;padding:18px 20px;gap:10px;background:#ece9d8;border:1px solid #1d5eae;border-radius:3px;color:#223343;pointer-events:auto}
.xp-game-dialog h3{font-size:19px;color:#204a7d}.xp-game-dialog p{color:#46545e}.xp-game-dialog>img{width:40px;height:40px;image-rendering:auto}
.xp-game-dialog .arcade-button.primary{background:linear-gradient(#fff,#e1eaf7);color:#173c63;border-color:#678aad}
.xp-game-dialog .arcade-button.primary:hover,.xp-game-dialog .arcade-button.primary:focus-visible{background:#fff6d2;color:#173c63}
.defrag-meter{display:flex;align-items:center;gap:10px;margin:10px 0 0}.defrag-meter progress{flex:1;height:15px;min-width:30px;accent-color:#52a236}.defrag-meter span{font-size:11px;white-space:nowrap}
.defrag-meter progress{appearance:none;border:1px solid #879ba8;border-radius:0;background:#fff}
.defrag-meter progress::-webkit-progress-bar{background:#fff}
.defrag-meter progress::-webkit-progress-value{background:linear-gradient(#a8d891,#4d9f30,#74bc53)}
.defrag-effect{font-size:11px;flex-basis:100%;color:#495d6b;min-height:17px}
.defrag-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:10px;color:#4b5a64}.defrag-legend>span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.defrag-tool{display:inline-grid;place-items:center;width:19px;height:18px;border:1px solid currentColor;background:#fffcec;color:#397db7}
.defrag-tool.tool-split{color:#b74831}.defrag-tool.tool-slow{color:#6e8532}.defrag-tool.tool-catch{color:#ab7724}
.trail-options{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px}
.trail-options label{display:flex;align-items:center;gap:7px}.trail-options select{height:29px;padding:4px 26px 4px 7px;background-color:#fff;color:#253f59;font:11px Tahoma,Verdana,sans-serif}
.trail-options>span{white-space:nowrap;color:#586972}
@media(max-width:480px){.xp-game-dialog{padding:12px;gap:7px}.xp-game-dialog>img{width:30px;height:30px}.xp-game-dialog h3{font-size:17px}.card-collection{padding:12px}.card-collection-grid{gap:12px}.card-collection figcaption{flex-wrap:wrap;justify-content:center}.card-collection figcaption>span{width:100%;text-align:center}}
/* Breakout uses the XP application frame around a dedicated arcade display. */
.trail-app{padding:0;background:#ece9d8}
.snake-menubar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:8px 10px}.snake-menubar .xp-btn{font-size:11px;min-width:0;min-height:29px;padding:4px 11px}.snake-menubar label{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px}.snake-menubar select{height:29px;max-width:133px;font-size:11px;background-color:#fff;color:#22354d;padding-left:7px}
.snake-scoreboard{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 14px 12px;color:#4c604a;font-size:10px}.snake-scoreboard>span{white-space:nowrap}.snake-scoreboard strong{display:block;color:#2e4934;font-size:20px;font-weight:normal}
.trail-app .snake-stage{width:calc(100% - 20px);margin:0 10px;border:0;background:#6b8660}
.trail-app .snake-prompt{inset:58% 5% auto;width:auto;height:auto;transform:none;background:#e8edc9;color:#284831;padding:12px 0;gap:5px;pointer-events:none}
.trail-app .snake-prompt[hidden]{display:none}.trail-app .snake-prompt h3{color:#325539;font:bold 23px/1.2 Tahoma,Verdana,sans-serif}.trail-app .snake-prompt p{color:#4d6943;font-size:11px;margin:0 0 6px}.trail-app .snake-prompt .xp-btn{pointer-events:auto;min-height:30px;font-size:11px;padding:5px 14px}
.trail-app .snake-controls{padding:11px 14px;margin:0;gap:10px;align-items:center}.trail-app .snake-controls>div:first-child{flex:1;min-width:0}.trail-app .arcade-message{font-size:10px;margin:0 0 4px}.trail-app .arcade-footnote{font-size:10px;margin:0 0 9px}.trail-app [data-action=play]{font-size:10px;min-height:27px;padding:4px 12px;min-width:0}.trail-app [data-action=play]:disabled{display:none}
.trail-app .snake-pad{width:102px;flex:none;gap:3px;grid-template-columns:32px 32px 32px;grid-template-rows:32px 32px}.trail-app .snake-direction{width:32px;min-height:29px;padding:5px}.trail-app .snake-direction svg{width:17px;height:17px;display:block;margin:auto}
.snake-help{font:10px/1.6 Tahoma,Verdana,sans-serif;margin:0;padding:0 14px 12px;color:#435742}.snake-help summary{cursor:pointer;width:fit-content;color:#204c82;white-space:nowrap}.snake-help summary:focus-visible{background:#d5dfca;color:#123a6f}.snake-help p{margin:10px 0 0}
@media(max-width:480px){.snake-menubar{padding:6px;gap:4px}.snake-menubar .xp-btn{font-size:10px;padding:4px 8px}.snake-menubar label{font-size:10px}.snake-menubar select{max-width:106px;font-size:10px}.snake-scoreboard{padding:5px 10px 10px;font-size:9px}.snake-scoreboard strong{font-size:17px}.trail-app .snake-stage{width:calc(100% - 12px);margin:0 6px}.trail-app .snake-prompt{inset:58% 3% auto;padding:6px 0;gap:3px}.trail-app .snake-prompt h3{font-size:18px}.trail-app .snake-prompt p{font-size:9px;margin-bottom:3px}.trail-app .snake-prompt .xp-btn{min-height:27px;font-size:10px}.trail-app .snake-controls{padding:10px}.trail-app .snake-pad{width:93px;grid-template-columns:29px 29px 29px;grid-template-rows:32px 32px}.trail-app .snake-direction{width:29px}.trail-app .snake-controls .arcade-footnote{font-size:9px}}