:root{--color-table:#3d2410;--color-table-deep:#2a180c;--color-table-edge:#1a0e08;--color-felt-line:#c46828;--color-card-face:#f7f4ef;--color-card-back:#0a0a0a;--color-card-back-pattern:#1f1f1f;--color-ink:#1a1a1a;--color-ink-muted:#5a5a5a;--color-suit-red:#b42318;--color-suit-black:#141414;--color-focus-ring:#e8b84a;--color-hud:#2a180c;--color-hud-text:#f2efe8;--color-win:#2f6b3a;--color-lose:#8a2f2f;--color-correct-glow:#d4a017;--color-border:#1a0e08;--color-overlay:#140a04b8;--radius-card:.55rem;--radius-panel:.75rem;--radius-button:.5rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.5rem;--space-6:2rem;--shadow-card:0 .15rem .35rem #00000059;--shadow-raised:0 .35rem .85rem #0006;--font-display:"Fraunces", "Palatino Linotype", Palatino, "Book Antiqua", serif;--font-ui:"Source Sans 3", "Segoe UI", "Helvetica Neue", sans-serif;--font-mono:"IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;--phone-width:26.5rem;--card-width:clamp(2.4rem, 5.2vw, 3.6rem);--card-height:calc(var(--card-width) * 1.4);--target-width:clamp(4.25rem, 22vw, 5.5rem);--target-height:calc(var(--target-width) * 1.4);--preview-safe:calc(var(--target-height) + var(--space-6) + env(safe-area-inset-bottom,0px));--motion-fast:.14s;--motion-deal:.42s;--motion-flip:.36s}@media (prefers-reduced-motion:reduce){:root{--motion-fast:1ms;--motion-deal:1ms;--motion-flip:1ms}}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:var(--font-ui);color:var(--color-hud-text);background:var(--color-table-edge);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;justify-content:center;align-items:stretch;min-height:100dvh;display:flex}button{font:inherit}.game-shell{width:100%;max-width:var(--phone-width);background:var(--color-table);flex-direction:column;min-height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden auto;transform:translateZ(0)}.game-webgl{pointer-events:none;z-index:0;opacity:.55;position:absolute;inset:0}.game-webgl canvas{width:100%;height:100%;display:block}.game-content{z-index:1;min-height:100%;padding:var(--space-4);padding-bottom:calc(var(--preview-safe) + var(--space-5));flex-direction:column;flex:1;display:flex;position:relative}.game-board{gap:var(--space-5);flex-direction:column;flex:1;width:100%;margin:0 auto;display:flex}.suit-group{gap:var(--space-2);flex-direction:column;align-items:center;display:flex}.suit-group__label{font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:color-mix(in srgb, var(--color-hud-text) 82%, transparent);align-self:flex-start;width:100%;font-size:.95rem}.suit-group__cards{align-items:center;gap:var(--space-2);flex-direction:column;width:100%;display:flex}.suit-group__row{justify-content:center;gap:var(--space-2);width:100%;display:flex}.suit-group__row .card-button{width:calc((100% - (2 * var(--space-2))) / 3);flex:none;max-width:4.25rem}.card-button{aspect-ratio:5/7;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-card-back);min-height:0;color:var(--color-card-face);box-shadow:var(--shadow-card);cursor:pointer;transform-style:preserve-3d;transition:transform var(--motion-fast) ease, box-shadow var(--motion-fast) ease, opacity var(--motion-fast) ease;-webkit-tap-highlight-color:transparent;padding:0;position:relative}.card-button:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.card-button:disabled{cursor:default}.card-button.is-dealing{opacity:0;transform:translateY(-.6rem)}.card-button.is-dealt{opacity:1;transition-duration:var(--motion-deal);transform:none}.card-button.is-selected,.card-button.is-correct{z-index:2}.card-button.is-correct{box-shadow:0 0 0 2px var(--color-correct-glow), var(--shadow-raised)}.card-button.is-wrong{box-shadow:0 0 0 2px var(--color-lose), var(--shadow-card)}.card-face{border-radius:inherit;backface-visibility:hidden;flex-direction:column;justify-content:space-between;padding:.28rem;display:flex;position:absolute;inset:0}.card-face--back{background-color:var(--color-card-back);background-image:url(/textures/card-back.svg);background-repeat:repeat;background-size:48px 48px}.card-face--front{background:var(--color-card-face);color:var(--color-suit-black);transform:rotateY(180deg)}.card-button.is-revealed .card-inner{transform:rotateY(180deg)}.card-inner{transform-style:preserve-3d;transition:transform var(--motion-flip) ease;position:absolute;inset:0}.card-corner{line-height:1;font-family:var(--font-mono);flex-direction:column;align-items:center;font-size:clamp(.55rem,1.8vw,.8rem);font-weight:700;display:flex}.card-corner--bl{align-self:flex-start;transform:rotate(180deg)}.card-center{pointer-events:none;place-items:center;font-size:clamp(.9rem,2.8vw,1.4rem);display:grid;position:absolute;inset:0}.card-red{color:var(--color-suit-red)}.card-black{color:var(--color-suit-black)}.target-preview{left:max(var(--space-4), env(safe-area-inset-left));bottom:max(var(--space-4), env(safe-area-inset-bottom));z-index:5;gap:var(--space-2);pointer-events:none;flex-direction:column;display:flex;position:absolute}.target-preview__label{font-family:var(--font-display);letter-spacing:.03em;color:var(--color-hud-text);text-shadow:0 1px 2px #00000073;font-size:.85rem}.target-preview__card{width:var(--target-width);height:var(--target-height);border:2px solid var(--color-focus-ring);border-radius:var(--radius-card);background:var(--color-card-face);box-shadow:var(--shadow-raised);flex-direction:column;justify-content:space-between;padding:.4rem;display:flex}.target-preview__card .card-center{font-size:1.6rem}.game-hud{justify-content:space-between;align-items:center;gap:var(--space-3);width:100%;margin:0 auto var(--space-4);padding:var(--space-3) var(--space-4);background:var(--color-hud);border:1px solid var(--color-border);border-radius:var(--radius-panel);box-shadow:var(--shadow-card);display:flex}.game-hud__brand{font-family:var(--font-display);margin:0;font-size:1.25rem}.game-hud__actions{align-items:center;gap:var(--space-2);display:flex}.ui-button{appearance:none;border:1px solid color-mix(in srgb, var(--color-hud-text) 25%, transparent);background:color-mix(in srgb, var(--color-table) 55%, #000);color:var(--color-hud-text);border-radius:var(--radius-button);cursor:pointer;padding:.45rem .85rem}.ui-button:focus-visible{outline:3px solid var(--color-focus-ring);outline-offset:2px}.ui-button:hover{background:color-mix(in srgb, var(--color-table) 35%, #000)}.status-live{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.result-dialog{z-index:20;background:var(--color-overlay);padding:var(--space-4);place-items:center;display:grid;position:absolute;inset:0}.result-dialog__panel{background:var(--color-hud);border:1px solid var(--color-border);border-radius:var(--radius-panel);width:min(24rem,100%);padding:var(--space-5);box-shadow:var(--shadow-raised);text-align:center}.result-dialog__panel h2{font-family:var(--font-display);margin:0 0 var(--space-3)}.result-dialog__panel p{margin:0 0 var(--space-4);color:color-mix(in srgb, var(--color-hud-text) 88%, transparent)}.result-dialog__panel[data-result=won] h2{color:#8fd39a}.result-dialog__panel[data-result=lost] h2{color:#f0a0a0}.board-pulse{animation:board-pulse var(--motion-deal) ease}@keyframes board-pulse{0%{filter:brightness()}40%{filter:brightness(.82)}to{filter:brightness()}}@media (width>=480px){body{padding:var(--space-4) 0;align-items:flex-start}.game-shell{min-height:min(100dvh - 2 * var(--space-4), 52rem);max-height:calc(100dvh - 2 * var(--space-4));border:1px solid color-mix(in srgb, var(--color-border) 70%, #a85a28);border-radius:1.35rem;box-shadow:0 .75rem 2rem #00000073}}@media (prefers-reduced-motion:reduce){.card-button,.card-inner,.board-pulse{transition:none!important;animation:none!important}}
