/* Spider Solitaire, FreeCell and Hearts. Card faces build on the .playing-card styles in arcade.css. */
.xpcards-app{container-type:inline-size;display:flex;flex-direction:column;min-height:100%;font:12px Tahoma,Arial,sans-serif;background:var(--chrome);color:#111;outline:none;--card-w:64px;--card-h:88px;--rank-size:15px}
.xpcards-app .app-menubar{flex-shrink:0}.xpcards-app .app-menubar select,.xpcards-app .app-menubar input[type=number]{font:12px Tahoma,Arial,sans-serif;max-width:100%}
.xpcards-app .xp-felt{flex:1;background:#17634e;background-image:radial-gradient(circle at 50% 30%,#1d7a5f,#155a46 75%);padding:10px;min-height:300px;position:relative;box-sizing:border-box;overflow:hidden}
.xpcards-app .xp-status{margin:0;padding:6px 10px;line-height:1.4;background:var(--chrome);min-height:2.8em;box-sizing:border-box;flex-shrink:0}
/* Cards */
.xpcards-app .playing-card{width:var(--card-w);height:var(--card-h);max-width:none;min-width:0;padding:2px 3px;border-radius:4px;background:#fffff8;color:#16272a;border:1px solid #273f32;box-shadow:1px 1px #0004;font:bold var(--rank-size)/1 Georgia,'Times New Roman',serif;display:flex;flex-direction:column;justify-content:space-between;text-align:left;overflow:hidden;box-sizing:border-box;cursor:pointer;touch-action:manipulation}
.xpcards-app .playing-card.red-card{color:#b32334}
.xpcards-app .playing-card.card-back{background:repeating-linear-gradient(45deg,#37558f 0 3px,#677ebb 3px 5px);border:3px solid #e9eee6;box-shadow:0 0 0 1px #273f32,1px 1px #0004;cursor:default}
.xpcards-app .xp-corner{display:block;white-space:nowrap;font-size:var(--rank-size);letter-spacing:-.04em;line-height:1}.xpcards-app .xp-corner i{font-style:normal;margin-left:1px}
.xpcards-app .xp-pip{align-self:center;font-size:calc(var(--card-w) * .42);line-height:1;margin-bottom:8%}
.xpcards-app .xp-small .xp-pip{display:none}.xpcards-app .xp-small .playing-card{padding:1px 2px;border-radius:3px}.xpcards-app .xp-small .playing-card.card-back{border-width:2px}
.xpcards-app .xp-small .xp-corner{letter-spacing:-.08em}
.xpcards-app .playing-card.selected-card{outline:3px solid #f7d363;outline-offset:-3px;filter:brightness(.9)}
.xpcards-app .xp-target{outline:2px dashed #f7d363;outline-offset:1px}
.xpcards-app .xp-hint{outline:3px solid #7fd7ff;outline-offset:-3px}
.xpcards-app .playing-card:focus-visible,.xpcards-app .xp-slot:focus-visible,.xpcards-app .spider-stock:focus-visible{outline:2px solid #fff;outline-offset:1px}
.xpcards-app .xp-slot{width:var(--card-w);height:var(--card-h);max-width:none;min-width:0;padding:0;border-radius:4px;border:2px solid #a1ccb055;background:#10473488;color:#93b9a6;font:calc(var(--card-w) * .4)/1 Georgia,serif;box-sizing:border-box;cursor:pointer}
.xpcards-app .xp-slot.red-slot{color:#d39aa2}
.xpcards-app .xp-col{position:relative;min-width:0}.xpcards-app .xp-col>*{position:absolute;left:0;top:0}
/* Spider */
.spider-app .spider-felt{display:flex;flex-direction:column;justify-content:space-between;gap:10px}
.spider-app .spider-columns{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:6px;align-items:start}
.spider-app .spider-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:var(--card-h)}
.spider-app .spider-done{display:flex;min-width:var(--card-w);padding-right:calc(var(--card-w) * .7)}.spider-app .spider-done .playing-card{margin-right:calc(var(--card-w) * -.7);cursor:default}
.spider-app .spider-score{color:#e7f3df;font-weight:bold;text-shadow:1px 1px #0006;align-self:center;text-align:center}
.spider-app .spider-stock{position:relative;width:calc(var(--card-w) + 4 * 9px);height:var(--card-h);padding:0;border:0;background:none;cursor:pointer}
.spider-app .spider-stock i{position:absolute;top:0;width:var(--card-w);height:var(--card-h);border-radius:4px;box-sizing:border-box;background:repeating-linear-gradient(45deg,#37558f 0 3px,#677ebb 3px 5px);border:3px solid #e9eee6;box-shadow:0 0 0 1px #273f32,1px 1px #0004}
.spider-app .spider-stock i:nth-child(1){left:0}.spider-app .spider-stock i:nth-child(2){left:9px}.spider-app .spider-stock i:nth-child(3){left:18px}.spider-app .spider-stock i:nth-child(4){left:27px}.spider-app .spider-stock i:nth-child(5){left:36px}
.spider-app .spider-stock-empty{border:2px solid #a1ccb055;border-radius:4px;width:var(--card-w);cursor:default}
/* FreeCell */
.freecell-app .freecell-top,.freecell-app .freecell-columns{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:6px;align-items:start}
.freecell-app .freecell-top{margin-bottom:12px}.freecell-app .xp-foundation:nth-child(5){margin-left:0}
.freecell-app .xp-cell.xp-slot{background:#0d3d2d99}
.freecell-app .freecell-pick{display:inline-flex;align-items:center;gap:4px;margin:0}.freecell-app .freecell-pick label{display:flex;align-items:center;gap:4px}.freecell-app .freecell-pick input{width:7.5em}
.freecell-app .freecell-auto{display:flex;align-items:center;gap:4px}
/* Hearts */
.hearts-app .hearts-felt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;grid-template-areas:"w n e" "w t e" "me me me";gap:8px;--hand-w:64px;--hand-h:88px}
.hearts-app .hearts-seat{color:#e7f3df;text-shadow:1px 1px #0006;display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:4px;line-height:1.3}
.hearts-app .hearts-seat small{display:block;font-size:11px;opacity:.85;white-space:nowrap}.hearts-app .hearts-points{font-weight:bold;color:#fff3c4}
.hearts-app .hearts-seat.hearts-turn{background:#0006;box-shadow:inset 0 0 0 1px #f7d36399}
.hearts-app [data-seat="2"]{grid-area:n;justify-self:center}.hearts-app [data-seat="1"]{grid-area:w;flex-direction:column;align-self:center;text-align:center;max-width:76px}.hearts-app [data-seat="3"]{grid-area:e;flex-direction:column;align-self:center;text-align:center;max-width:76px}
.hearts-app .hearts-back{flex-shrink:0;width:22px;height:30px;border-radius:3px;box-sizing:border-box;background:repeating-linear-gradient(45deg,#37558f 0 2px,#677ebb 2px 4px);border:2px solid #e9eee6;box-shadow:0 0 0 1px #273f32}
.hearts-app .hearts-trick{grid-area:t;position:relative;justify-self:center;align-self:center;width:calc(var(--hand-w) * 3.1);height:calc(var(--hand-h) * 2.25);--card-w:var(--hand-w);--card-h:var(--hand-h)}
.hearts-app .hearts-trick .playing-card{position:absolute;cursor:default}
.hearts-app .hearts-trick [data-from="0"]{left:calc(50% - var(--hand-w) / 2);bottom:0}.hearts-app .hearts-trick [data-from="2"]{left:calc(50% - var(--hand-w) / 2);top:0}
.hearts-app .hearts-trick [data-from="1"]{left:0;top:calc(50% - var(--hand-h) / 2)}.hearts-app .hearts-trick [data-from="3"]{right:0;top:calc(50% - var(--hand-h) / 2)}
.hearts-app .hearts-trick .xp-winner{box-shadow:0 0 0 3px #f7d363}
.hearts-app .hearts-me{grid-area:me;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.hearts-app .hearts-hand{position:relative;width:100%;height:calc(var(--hand-h) + 14px);--card-w:var(--hand-w);--card-h:var(--hand-h)}
.hearts-app .hearts-hand .playing-card{position:absolute;top:14px}
.hearts-app .hearts-hand .xp-raised{top:0}
.hearts-app .hearts-hand .xp-playable:hover{top:8px}
.hearts-app .hearts-hand .xp-dim{filter:brightness(.72) saturate(.6);cursor:not-allowed}
.hearts-app .hearts-hand .xp-wait{cursor:default}
.hearts-app .hearts-hand .xp-new{box-shadow:0 0 0 2px #7fd7ff,1px 1px #0004}
.hearts-app .hearts-action:not([hidden]){font-weight:bold}
.hearts-app .hearts-rule{color:#444;font-size:11px}
@media (prefers-reduced-motion:no-preference){.hearts-app .hearts-hand .playing-card{transition:top .12s ease-out}}
@container (max-width:520px){
  .xpcards-app .xp-felt{padding:6px}
  .spider-app .spider-columns,.freecell-app .freecell-top,.freecell-app .freecell-columns{column-gap:3px}
  .xpcards-app .app-menubar .bevel-button{padding:4px 7px}
  .xpcards-app .xp-status{font-size:11px}
  .spider-app .spider-score{font-size:11px}
  .hearts-app .hearts-felt{gap:4px}.hearts-app .hearts-rule{display:none}
  .hearts-app [data-seat="1"],.hearts-app [data-seat="3"]{max-width:64px;padding:2px;font-size:11px}.hearts-app [data-seat="1"] small,.hearts-app [data-seat="3"] small{white-space:normal}
  .hearts-app .hearts-seat small{font-size:10px}
}