:root {
    --felt: #0b4d3a;
    --felt-dark: #063527;
    --panel: #0e2f27;
    --panel-border: #1c5643;
    --text: #eaf3ef;
    --text-dim: #9fc2b6;
    --accent: #f2c14e;
    --good: #4caf50;
    --bad: #e5533d;
    --card-bg: #fdfdfb;
    --card-border: #cfcfcf;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(ellipse at top, var(--felt), var(--felt-dark));
    color: var(--text);
    min-height: 100vh;
}

#app { max-width: 1100px; margin: 0 auto; padding: 20px; }

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}
header h1 { margin: 0; font-size: 1.6rem; letter-spacing: 0.02em; }
.header-controls { display: flex; align-items: center; gap: 8px; }
.header-controls label { color: var(--text-dim); font-size: 0.9rem; }

select, input[type="number"], button {
    font: inherit;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    padding: 6px 10px;
}
select { cursor: pointer; }
input[type="number"] { width: 70px; text-align: right; }

button {
    cursor: pointer;
    background: var(--accent);
    color: #2a1d00;
    font-weight: 600;
    border: none;
    padding: 10px 22px;
    font-size: 1rem;
    transition: transform 0.05s ease, opacity 0.15s ease;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:disabled { opacity: 0.4; cursor: default; transform: none; }
#reset-stats { background: var(--panel); color: var(--text-dim); padding: 6px 12px; font-size: 0.85rem; font-weight: 400; border: 1px solid var(--panel-border); margin-top: 8px; }

.main-layout { display: grid; grid-template-columns: 280px 1fr; gap: 20px; align-items: start; }
@media (max-width: 780px) { .main-layout { grid-template-columns: 1fr; } }

#paytable-panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 16px;
}
#paytable-panel h2 { font-size: 1rem; margin: 0 0 10px; color: var(--text-dim); }
.hint { font-weight: 400; font-size: 0.75rem; }

#paytable { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
#paytable td { padding: 4px 2px; border-bottom: 1px solid rgba(255,255,255,0.06); }
#paytable td:first-child { color: var(--text-dim); }
#paytable td:last-child { text-align: right; }

#strategy-download { margin: 12px 0 0; }
.strategy-link {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.strategy-link:hover { background: var(--accent); color: #2a1d00; }
.strategy-link svg { flex-shrink: 0; }

.stats { margin-top: 20px; }
.stat-row { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 3px 0; }
.stat-row span:first-child { color: var(--text-dim); }

main { display: flex; flex-direction: column; align-items: center; gap: 18px; }

#credit-meter {
    background: #000;
    color: var(--accent);
    font-family: "Courier New", monospace;
    font-weight: 700;
    letter-spacing: 0.1em;
    font-size: 1.1rem;
    padding: 8px 24px;
    border-radius: 6px;
    border: 1px solid #333;
}

#hand-area { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.row-label { align-self: flex-start; font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 6px; }
.row-label .hint { text-transform: none; letter-spacing: normal; opacity: 0.7; }
.card-row { display: flex; gap: 10px; }
.card {
    width: 90px;
    height: 126px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a1a;
    cursor: pointer;
    user-select: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    position: relative;
}
.card .rank { line-height: 1.1; }
.card .suit { font-size: 1.5rem; line-height: 1; }
.card .suit.red { color: #c0392b; }
/* Absolutely positioned (not a flex child) so it doesn't shift the rank+suit above it out of
   the same centered position a normal 2-span card uses -- it just sits below, independently. */
.card .wild-tag {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em; color: #b8860b; white-space: nowrap;
}
.card.held { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(242,193,78,0.35); transform: translateY(-8px); }
.card:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.card.empty { background: transparent; border-style: dashed; border-color: rgba(255,255,255,0.25); cursor: default; }
.card.disabled { cursor: default; }
.card .badge {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    background: var(--accent); color: #2a1d00; font-size: 0.65rem; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.card.back {
    cursor: default;
    background: repeating-linear-gradient(45deg, #7a1f2b, #7a1f2b 6px, #922539 6px, #922539 12px);
    border-color: #3d0f16;
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.15);
}
.card.back.just-revealed { animation: reveal 0.25s ease; }
@keyframes reveal { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Rank/suit "what-if" editor: only active on "Your hand" cards after the draw (see
   attachEditing in main.js). Hovering or tapping a card's rank or suit pops a row of buttons
   above the card; picking one edits that card in place and refreshes the Hold/EV table as if
   the hand had been dealt that way. */
.card .rank.edit-trigger, .card .suit.edit-trigger, .card .wild-tag.edit-trigger {
    cursor: pointer;
    text-decoration: underline dotted rgba(255,255,255,0.55);
    text-underline-offset: 3px;
}
/* top/bottom is set inline per-popover (see attachTrigger in main.js), anchored to the actual
   rank/suit trigger's own position within the card rather than the card as a whole. */
.edit-popover {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    width: max-content;
    max-width: 220px;
    gap: 2px;
    padding: 4px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    z-index: 20;
}
.edit-popover.align-left { left: 0; transform: none; }
.edit-popover.align-right { left: auto; right: 0; transform: none; }
.popover-opt {
    min-width: 24px;
    padding: 4px 5px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: inherit;
    color: #eee;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
}
.popover-opt:hover { background: rgba(255,255,255,0.15); }
.popover-opt.current { border-color: var(--accent); color: var(--accent); }

/* Card watermarks (see main.js's cardArt/data-card-art hook): Shamrock 7s marks every dealt
   seven with a shamrock, 8-Ball every dealt eight with an 8-ball, and the joker games mark the
   joker itself with a dancing jester. These sit in the card's background layer, so the rank and
   suit paint over them and stay fully legible. Each shape is drawn inside a single <g opacity>,
   rather than per-shape fill-opacity, so overlapping parts don't composite into darker seams.
   Placed after .card.back so a face-down card can never pick one up. */
.card[data-card-art] {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 95%;
}
/* Trefoil centered on the card's middle, with a short straight stem -- a longer curved stem
   pulled the shape's visual mass down and left of the rank/suit above it. */
.card[data-card-art="shamrock"] {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g opacity='0.24' fill='%232e9e4f' stroke='%232e9e4f'><circle cx='50' cy='31' r='21' stroke='none'/><circle cx='32' cy='60' r='21' stroke='none'/><circle cx='68' cy='60' r='21' stroke='none'/><path d='M50 74 L50 88' fill='none' stroke-width='8' stroke-linecap='round'/></g></svg>");
}
/* The ball deliberately carries no numeral of its own: it only ever appears behind an eight,
   so the card's own rank lands in the white label and reads as the ball's number. */
.card[data-card-art="eight-ball"] {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g opacity='0.18'><circle cx='50' cy='50' r='47' fill='%23111111'/><circle cx='50' cy='50' r='29' fill='%23ffffff'/></g></svg>");
}
/* Dancing jester for the joker in Joker Poker / Wild Joker: filled cap lobes with bells rather
   than thin lines (a stroked version read as a stick figure with antennae), and shifted up the
   card so the kicking legs clear the gold "Wild" tag along the bottom. */
.card[data-card-art="jester"] {
    background-size: 88%;
    background-position: center 38%;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g opacity='0.26' fill='%236b3fa0' stroke='%236b3fa0' stroke-width='9' stroke-linecap='round' stroke-linejoin='round'><g stroke='none'><path d='M37 40 Q50 22 63 40 Z'/><path d='M41 33 L15 17 L31 39 Z'/><path d='M43 29 L50 6 L57 29 Z'/><path d='M59 33 L85 19 L69 39 Z'/><circle cx='12' cy='15' r='5.5'/><circle cx='50' cy='5' r='5.5'/><circle cx='88' cy='18' r='5.5'/><circle cx='50' cy='41' r='11'/><path d='M42 52 L58 52 L67 74 L58 70 L50 78 L42 70 L33 74 Z'/><circle cx='21' cy='41' r='5'/><circle cx='81' cy='60' r='5'/><circle cx='35' cy='94' r='5'/><circle cx='76' cy='88' r='5'/></g><path d='M43 54 L23 43' fill='none'/><path d='M57 54 L79 59' fill='none'/><path d='M46 74 L37 92' fill='none'/><path d='M55 74 L73 86' fill='none'/></g></svg>");
}

#controls { display: flex; gap: 12px; }

#outcome-banner {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
    min-height: 1.6em;
}
#outcome-banner.hidden { visibility: hidden; }
#outcome-banner.zero { color: var(--text-dim); font-weight: 400; font-size: 1.05rem; }

#feedback {
    width: 100%;
    max-width: 640px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    padding: 16px 20px;
}
#feedback.hidden { display: none; }
#feedback-headline { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
#feedback-headline.good { color: var(--good); }
#feedback-headline.bad { color: var(--bad); }
#feedback-detail { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 12px; }

#mask-table-wrap { max-height: 220px; overflow-y: auto; }
#mask-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
#mask-table th { text-align: left; color: var(--text-dim); font-weight: 500; padding: 4px 8px; position: sticky; top: 0; background: var(--panel); }
#mask-table td { padding: 4px 8px; border-top: 1px solid rgba(255,255,255,0.06); }
#mask-table tr.best-row { background: rgba(76,175,80,0.15); }
#mask-table tr.your-row:not(.best-row) { background: rgba(229,83,61,0.15); }

footer { margin-top: 30px; text-align: center; color: var(--text-dim); font-size: 0.8rem; }
footer p { max-width: 640px; margin: 0 auto; }