/* Leonidas: schwarzfigurige Vasenmalerei. Terrakotta, Schwarz, Creme, ein Goldton. Ein Tempo (200 ms),
   400 ms nur für Würfel-Moment und Urteil. Farben aus dem Theme in app.css (.app.theme-leonidas). */

.leo-glyph { width: 15px; height: 15px; vertical-align: -3px; }

/* --- Polis-Tafel --- */
.leo-tafel {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px; background: var(--leo-black);
    /* Der Mäander: eine Stelle pro Screen, als Border-Image aus Inline-SVG. */
    border: 16px solid transparent;
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect width='48' height='48' fill='%2314100E'/><path d='M4 4h40v40H4z' fill='none' stroke='%23E9DCC3' stroke-width='3'/><path d='M12 12h24v24H12V20h16v8H20' fill='none' stroke='%23E9DCC3' stroke-width='3'/></svg>") 16 round;
}
.leo-poleis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px; }
/* Ruhm-Leiste aller Poleis auf einer Skala. */
.leo-race { display: flex; align-items: center; gap: 10px; color: var(--leo-cream); padding: 0 4px; }
.leo-race-label { font-family: var(--leo-display); font-weight: 700; font-size: 1rem; letter-spacing: .04em; color: var(--leo-gold); }
.leo-race-goal { font-family: var(--leo-display); font-weight: 700; font-size: 1.2rem; color: var(--leo-gold); font-variant-numeric: tabular-nums; }
.leo-race-track { position: relative; flex: 1 1 auto; height: 26px; border-bottom: 2px solid var(--leo-cream); margin: 0 12px; }
.leo-race-tick { position: absolute; bottom: -2px; width: 1px; height: 6px; background: var(--leo-cream); opacity: .6; }
.leo-race-mark {
    position: absolute; bottom: 4px; transform: translateX(-50%);
    min-width: 22px; height: 22px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--leo-cream); color: var(--leo-black); border-left: 4px solid var(--polis-color, var(--leo-terra));
    font-family: var(--leo-display); font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums;
    transition: left 400ms ease-out;
}
.leo-race-mark.mine { outline: 2px solid var(--leo-gold); }
.leo-race-mark.polis-sparta { --polis-color: #8b1e1e; } .leo-race-mark.polis-athen { --polis-color: #2f4e6f; }
.leo-race-mark.polis-korinth { --polis-color: #b5552b; } .leo-race-mark.polis-theben { --polis-color: #4c6a3a; }
.leo-race-mark:nth-child(odd of .leo-race-mark) { bottom: 4px; }
.leo-race-mark:nth-child(even of .leo-race-mark) { bottom: 30px; }
.leo-race-track:has(.leo-race-mark:nth-child(even of .leo-race-mark)) { height: 52px; }
.leo-polis {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 10px 12px 12px; background: var(--leo-cream); color: var(--leo-black);
    transition: background 200ms ease-out, box-shadow 200ms ease-out;
}
.leo-polis.waiting { box-shadow: inset 0 0 0 2px var(--leo-black); }
.leo-polis.resigned { opacity: .5; }
.leo-polis-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leo-polis-stripe { width: 6px; height: 18px; background: var(--polis-stripe, var(--leo-terra)); }
/* Gewählte Sitzfarbe (Farbwahl) kommt als --polis-stripe inline; ohne Wahl die Farbe der Polis. */
.polis-sparta .leo-polis-stripe { background: var(--polis-stripe, #8b1e1e); }
.polis-athen .leo-polis-stripe { background: var(--polis-stripe, #2f4e6f); }
.polis-korinth .leo-polis-stripe { background: var(--polis-stripe, #b5552b); }
.polis-theben .leo-polis-stripe { background: var(--polis-stripe, #4c6a3a); }
.leo-polis-kind { font-family: var(--leo-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; }
.leo-polis-name { font-size: .82rem; color: #4a3b2f; }
.leo-tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border: 1px solid var(--leo-black); }
.leo-tag.gold { border-color: var(--leo-gold); color: #7a5a14; }
.leo-tag.dran { background: var(--leo-black); color: var(--leo-cream); }
.leo-laurel { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--leo-gold); margin-left: 2px; vertical-align: middle; }
.leo-stock { font-size: .75rem; color: #4a3b2f; font-style: italic; }
.leo-ruhm { display: flex; align-items: center; gap: 8px; }
.leo-ruhm-num { font-family: var(--leo-display); font-weight: 700; font-size: 1.6rem; line-height: 1; min-width: 1.4ch; font-variant-numeric: tabular-nums; color: var(--leo-gold); }
.leo-ruhm-bar { flex: 1 1 auto; height: 8px; background: var(--leo-black); position: relative; }
.leo-ruhm-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--leo-gold); transition: width 200ms ease-out; }
.leo-goods { display: flex; gap: 10px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.leo-goods span { display: inline-flex; align-items: center; gap: 3px; }
.leo-fighters { display: flex; flex-direction: column; gap: 4px; }
.leo-none { font-size: .8rem; color: #6b5a4a; font-style: italic; }
.leo-fighter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 8px; background: rgba(20, 16, 14, .06); border-left: 3px solid var(--leo-black); }
.leo-fighter.down { opacity: .5; text-decoration: line-through; }
.leo-fighter-name { font-family: var(--leo-display); font-weight: 700; font-size: 1.05rem; }
.leo-stats { display: inline-flex; gap: 8px; }
.leo-stat { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.leo-stat-key { font-size: .7rem; color: #6b5a4a; }
.leo-stat-val { font-family: var(--leo-display); font-weight: 700; font-size: 1.1rem; }
.leo-wound { display: inline-block; width: 3px; height: 12px; background: #9c1c1c; transform: skewX(-15deg); margin-left: 1px; }
.leo-wound.big { width: 6px; height: 28px; }
.leo-equip { font-size: .75rem; color: #4a3b2f; width: 100%; }

/* --- Würfel-Moment --- */
.leo-dice { display: flex; flex-direction: column; align-items: center; gap: 22px; color: var(--leo-cream); font-family: var(--leo-body); }
.leo-dice-head { display: flex; align-items: baseline; gap: 14px; font-family: var(--leo-display); }
.leo-dice-name { font-size: 2rem; font-weight: 700; }
.leo-dice-vs { font-size: 1rem; opacity: .6; letter-spacing: .1em; text-transform: uppercase; }
.leo-dice-rows { display: grid; grid-template-columns: auto 90px auto; align-items: start; gap: 0 14px; }
.leo-dice-col { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.leo-dice-label { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; height: 20px; }
.leo-die {
    width: 64px; height: 64px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--leo-cream); color: var(--leo-black);
    font-family: var(--leo-display); font-size: 2.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
    animation: leo-die-in 400ms ease-out both; animation-delay: calc(var(--i) * 90ms);
}
.leo-die.spare { opacity: .35; }
.leo-die.hit { animation: leo-die-in 400ms ease-out both, leo-pulse 400ms ease-out 1; animation-delay: calc(var(--i) * 90ms), calc(600ms + var(--i) * 90ms); }
.leo-dice-links { display: flex; flex-direction: column; gap: 14px; padding-top: 34px; }
.leo-link { display: block; width: 90px; height: 64px; position: relative; }
.leo-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(233, 220, 195, .25); transform: scaleX(0); transform-origin: left; animation: leo-link-in 400ms ease-out forwards; animation-delay: calc(500ms + var(--i) * 90ms); }
.leo-link.hit::before { background: var(--leo-gold); height: 3px; }
.leo-dice-result { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.1rem; min-height: 60px; animation: leo-die-in 400ms ease-out both; animation-delay: 900ms; }
.leo-dice-wounds { display: inline-flex; gap: 8px; }
.leo-dice-note { font-size: .85rem; opacity: .7; }
@keyframes leo-die-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes leo-pulse { 0% { box-shadow: 0 0 0 0 var(--leo-gold); } 60% { box-shadow: 0 0 0 10px rgba(200, 155, 60, 0); } 100% { box-shadow: none; } }
@keyframes leo-link-in { to { transform: scaleX(1); } }
@media (max-width: 599.98px) {
    .leo-die { width: 46px; height: 46px; font-size: 1.9rem; }
    .leo-dice-rows { grid-template-columns: auto 40px auto; }
    .leo-link { width: 40px; height: 46px; }
    .leo-dice-links { padding-top: 34px; gap: 14px; }
    .leo-dice-name { font-size: 1.4rem; }
}

/* --- Tisch --- */
.leo-game { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; background: var(--leo-terra); font-family: var(--leo-body); color: var(--leo-black); }
.leo-tafel-slot { flex: 0 0 auto; padding: .6rem .6rem 0; }
.leo-tafel-slot .hx-sheet { background: transparent; border: 0; }
.leo-tafel-slot .hx-sheet-body { padding: 0; }
.leo-stage { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; padding: .6rem; align-content: start; min-width: 0; }
.leo-stage > * { min-width: 0; }
.leo-game { overflow-x: hidden; }
@media (min-width: 960px) { .leo-stage { grid-template-columns: minmax(0, 1fr) 320px; } .leo-stage > .leo-log { grid-column: 2; grid-row: 1 / span 3; } }
.leo-status { grid-column: 1; display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; color: var(--leo-cream); }
.leo-status-main { font-family: var(--leo-display); font-size: 1.35rem; font-weight: 700; }
.leo-status-sub { font-size: .85rem; opacity: .85; }
.leo-status .error { color: #ffd6cc; }
.leo-choice { grid-column: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.leo-choice.small { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.leo-card { display: flex; flex-direction: column; gap: .35rem; border: 2px solid var(--leo-black) !important; border-radius: 4px !important; }
.leo-card.selected { box-shadow: inset 0 0 0 3px var(--leo-gold); }
.leo-card-name { font-family: var(--leo-display); font-size: 1.5rem; font-weight: 700; }
.leo-card-flavour { font-style: italic; color: #4a3b2f; font-size: .9rem; }
.leo-card-stats { display: flex; gap: .8rem; font-size: .85rem; }
.leo-card-stats b { font-family: var(--leo-display); font-size: 1.4rem; font-weight: 700; margin-right: 2px; }
.leo-card-equip { font-size: .8rem; color: #4a3b2f; }
.leo-prepare { grid-column: 1; display: flex; flex-direction: column; gap: .6rem; }
.leo-equip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.leo-equip-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: #5b4632; min-width: 5rem; }
.leo-name-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.leo-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0; }
.leo-stage .hx-card { border: 2px solid var(--leo-black); border-radius: 4px; box-shadow: none; }
.leo-stage .hx-empty { background: var(--leo-cream); border: 2px solid var(--leo-black); border-radius: 4px; color: var(--leo-black); }
.leo-stage .hx-empty .hx-empty-title { font-family: var(--leo-display); font-size: 1.4rem; }
.leo-log ul { list-style: none; margin: 0; padding: 0; font-size: .85rem; max-height: 60vh; overflow-y: auto; }
.leo-log li { padding: .25rem 0; border-top: 1px solid rgba(20, 16, 14, .2); }
.leo-log li:first-child { border-top: 0; }

/* --- Agon --- */
.leo-agon { grid-column: 1; display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 720px) { .leo-agon { grid-template-columns: minmax(280px, 1fr) minmax(260px, 340px); align-items: start; } }
.leo-arena { width: 100%; max-width: 560px; margin: 0 auto; display: block; background: var(--leo-sand); border: 2px solid var(--leo-black); border-radius: 4px; }
.leo-hex { fill: var(--leo-sand); stroke: var(--leo-black); stroke-width: 1; transition: fill 200ms ease-out; }
.leo-hex.target { fill: var(--leo-cream); cursor: pointer; filter: drop-shadow(0 0 6px rgba(233, 220, 195, .9)); }
.leo-hex.target:hover { fill: #fff8ea; }
.leo-hex.attack { stroke: #9c1c1c; stroke-width: 3; cursor: pointer; }
.leo-figure { pointer-events: none; transition: transform 200ms ease-out; }
.leo-figure .leo-body, .leo-figure .leo-crest, .leo-figure .leo-spear-tip { fill: var(--leo-black); }
.leo-figure .leo-shield { fill: var(--leo-black); stroke: var(--leo-cream); stroke-width: 1.5; }
.leo-figure .leo-spear { stroke: var(--leo-black); stroke-width: 2; stroke-linecap: round; }
.leo-figure-ring { fill: none; stroke: var(--leo-cream); stroke-width: 2; stroke-dasharray: 6 5; }
.leo-figure.down { opacity: .45; }
.leo-agon-side { display: flex; flex-direction: column; gap: .5rem; }
.leo-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--leo-black); border: 2px solid var(--leo-black); }
.leo-duelist { display: flex; flex-direction: column; gap: 3px; padding: .5rem .6rem; background: var(--leo-cream); }
.leo-duelist.active { box-shadow: inset 0 0 0 3px var(--leo-gold); }
.leo-duel-polis { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; border-left: 4px solid var(--polis); padding-left: 6px; }
.leo-duel-name { font-family: var(--leo-display); font-size: 1.3rem; font-weight: 700; }
.leo-duel-caused { font-size: .75rem; color: #5b4632; }
.leo-turn { color: var(--leo-cream); font-family: var(--leo-display); font-size: 1.1rem; }
.leo-agon-side .muted, .leo-agon-side .small { color: var(--leo-cream); }
.leo-agon-side .hx-card .muted { color: #5b4632; }

/* --- Urteil --- */
.leo-judge { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: leo-die-in 400ms ease-out both; }
.leo-judge-word { font-family: var(--leo-display); font-size: 5rem; font-weight: 700; line-height: 1; letter-spacing: .04em; }
.leo-judge.shame .leo-judge-word { color: #ff8a7a; }
.leo-judge-text { font-size: 1.1rem; opacity: .85; }

/* --- Agora, Wetten, Handel --- */
.leo-lots { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: .6rem; }
.leo-lot { padding: 3px 8px; border: 1px solid var(--leo-black); font-size: .78rem; background: transparent; }
.leo-lot.current { background: var(--leo-black); color: var(--leo-cream); }
.leo-lot.done { opacity: .4; text-decoration: line-through; }
.leo-lot.host { border-style: dashed; }
.leo-current-card { display: flex; flex-direction: column; gap: 3px; padding: .6rem .8rem; margin-bottom: .6rem; border-left: 4px solid var(--leo-gold); background: rgba(20, 16, 14, .06); }
.leo-card-type { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #5b4632; }
.leo-note { margin: .4rem 0; font-size: .9rem; }
.leo-result { border-top: 1px solid rgba(20, 16, 14, .2); padding-top: .5rem; }
.leo-bidders { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; margin-bottom: .5rem; }
.leo-bidder { padding: 2px 8px; border: 1px solid rgba(20, 16, 14, .3); }
.leo-bidder.done { background: var(--leo-black); color: var(--leo-cream); }
.leo-bid { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.leo-bid .hx-btn { margin: 0; min-width: 32px; padding: 0 8px; }
.leo-bid-amount { font-family: var(--leo-display); font-size: 1.6rem; font-weight: 700; min-width: 1.6ch; text-align: center; font-variant-numeric: tabular-nums; }
.leo-bid-of { font-size: .8rem; color: #5b4632; }
.leo-bets { display: flex; flex-direction: column; gap: .5rem; }
.leo-bet-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.leo-bet-label { min-width: 12rem; font-weight: 600; }
.leo-bet-label small { font-weight: 400; color: #5b4632; margin-left: 4px; }
.leo-offer { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding: .5rem .6rem; margin-bottom: .4rem; border-left: 4px solid var(--leo-gold); background: rgba(20, 16, 14, .06); }
.leo-offer.mine { border-left-color: var(--leo-black); }
.leo-trade-form { display: flex; flex-direction: column; gap: .6rem; margin-top: .5rem; }
.leo-trade-sides { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.leo-trade-sides h4 { margin: 0 0 .3rem; font-family: var(--leo-display); font-size: 1.1rem; }
.leo-trade-goods { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.leo-trade-goods .hx-btn { margin: 0; }
.leo-payouts { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.leo-payouts li { padding: .2rem 0; }
.leo-payouts li.won { color: #2f6b2f; font-weight: 600; }
.leo-payouts li.lost { color: #6b5a4a; }
@media (max-width: 599.98px) { .leo-trade-sides { grid-template-columns: 1fr; } .leo-bet-label { min-width: 100%; } }

.leo-hand { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.leo-hand .hx-btn { margin: 0; }
.leo-hand small { font-weight: 400; opacity: .7; margin-left: 4px; }

/* --- Ränke --- */
.leo-hand-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .5rem; margin-bottom: .6rem; }
.leo-raenke-card {
    display: flex; flex-direction: column; gap: 3px; padding: .5rem .6rem; cursor: pointer;
    background: var(--leo-cream); border: 2px solid var(--leo-black); border-radius: 4px;
    transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.leo-raenke-card:hover { transform: translateY(-2px); }
.leo-raenke-card.selected { box-shadow: inset 0 0 0 3px var(--leo-gold); }
.leo-raenke-card.locked { opacity: .55; cursor: not-allowed; }
.leo-raenke-name { font-family: var(--leo-display); font-weight: 700; font-size: 1.15rem; }
.leo-raenke-meta { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #5b4632; }
.leo-raenke-text { font-size: .8rem; line-height: 1.35; }
.leo-raenke-reason { font-size: .75rem; color: #8b1e1e; }
.leo-play { display: flex; flex-direction: column; gap: .4rem; padding: .5rem .6rem; margin-bottom: .5rem; border-left: 4px solid var(--leo-gold); background: rgba(20, 16, 14, .06); }
.leo-redirect { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }

/* --- Stillstand für Vorschau und Screenshots --- */
.leo-still .leo-die:not(.spare), .leo-still .leo-dice-result { animation: none; opacity: 1; transform: none; }
.leo-still .leo-die.spare { animation: none; }
.leo-still .leo-link::before { animation: none; transform: scaleX(1); }

/* --- Phasenleiste --- */
.leo-strip { grid-column: 1; display: flex; flex-direction: column; gap: .4rem; color: var(--leo-cream); }
.leo-phases { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: phase; }
.leo-phase { counter-increment: phase; padding: 3px 10px; border: 1px solid rgba(233, 220, 195, .5); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.leo-phase::before { content: counter(phase) " "; opacity: .7; }
.leo-phase.done { opacity: .45; text-decoration: line-through; }
.leo-phase.current { opacity: 1; background: var(--leo-cream); color: var(--leo-black); border-color: var(--leo-cream); font-weight: 600; }
.leo-strip-line { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.leo-strip-main { font-family: var(--leo-display); font-size: 1.35rem; font-weight: 700; }
.leo-strip-who { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.leo-who { padding: 2px 8px 2px 6px; border-left: 4px solid var(--polis); background: rgba(20, 16, 14, .35); font-size: .8rem; }
.leo-who.me { background: var(--leo-cream); color: var(--leo-black); }
.leo-strip-meta { font-size: .85rem; opacity: .85; }
.leo-strip-error { color: #ffd6cc; }
.leo-strip-clock { color: var(--leo-cream); }

/* --- Kartenbilder Ränke --- */
.leo-rcard {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: .5rem .6rem .5rem .8rem;
    background: var(--leo-cream); color: var(--leo-black); border: 2px solid var(--leo-black); border-radius: 4px;
    transition: transform 200ms ease-out, box-shadow 200ms ease-out; min-width: 0;
}
.leo-rcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--leo-terra); }
.leo-rcard.typ-reaktion::before { background: var(--leo-black); }
.leo-rcard.typ-wache::before { background: var(--leo-gold); }
.leo-rcard.clickable { cursor: pointer; }
.leo-rcard.clickable:hover { transform: translateY(-2px); }
.leo-rcard.selected { box-shadow: inset 0 0 0 3px var(--leo-gold); }
.leo-rcard.locked { opacity: .55; cursor: not-allowed; }
.leo-rcard.locked:hover { transform: none; }
.leo-rcard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.leo-rcard-name { font-family: var(--leo-display); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.leo-rcard-typ { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: #5b4632; }
.leo-rcard-req { display: flex; flex-wrap: wrap; gap: 4px; }
.leo-req { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border: 1px solid rgba(20, 16, 14, .35); }
.leo-req.ruhm { border-color: var(--leo-gold); color: #7a5a14; font-weight: 600; }
.leo-req.abwehr { border-style: dashed; }
.leo-rcard-text { font-size: .8rem; line-height: 1.35; }
.leo-rcard-flavour { font-size: .78rem; font-style: italic; color: #4a3b2f; }
.leo-rcard-reason { font-size: .75rem; color: #8b1e1e; }
.leo-rcard.small { padding: .4rem .5rem .4rem .7rem; gap: 2px; }
.leo-rcard.small .leo-rcard-name { font-size: 1.05rem; }
.leo-rcard.small .leo-rcard-text { font-size: .75rem; }
.leo-hand-cards.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* --- Ränke-Fenster (Beistand, Abwehr, Spione) --- */
.leo-window { grid-column: 1; display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 2px; background: var(--leo-black); border: 2px solid var(--leo-black); border-radius: 4px; }
.leo-window.for-me { box-shadow: 0 0 0 3px var(--leo-gold); }
.leo-window-card { padding: 10px; background: var(--leo-black); display: flex; align-items: flex-start; }
.leo-window-card .leo-rcard { width: 100%; }
.leo-window-body { padding: .7rem .9rem; background: var(--leo-cream); display: flex; flex-direction: column; gap: .4rem; }
.leo-window-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.leo-window-title { font-family: var(--leo-display); font-size: 1.3rem; font-weight: 700; }
.leo-actions.big .hx-btn { min-height: 44px; }
.leo-play-title { font-family: var(--leo-display); font-size: 1.2rem; font-weight: 700; }
.leo-name-row .hx-btn small { font-weight: 400; opacity: .75; margin-left: 4px; }
@media (max-width: 599.98px) { .leo-window { grid-template-columns: 1fr; } }

/* --- Kartenbilder Agora --- */
.leo-acard { display: flex; flex-direction: column; gap: 2px; padding: .5rem .7rem; background: var(--leo-cream); color: var(--leo-black); border: 2px solid var(--leo-black); border-radius: 4px; min-width: 0; }
.leo-acard.small { padding: .35rem .55rem; flex: 0 1 150px; }
.leo-acard.small .leo-acard-name { font-size: 1rem; }
.leo-acard.small .leo-acard-stats b { font-size: 1rem; }
.leo-acard.done { opacity: .4; }
.leo-acard.done .leo-acard-name { text-decoration: line-through; }
.leo-acard.current { box-shadow: inset 0 0 0 3px var(--leo-gold); }
.leo-acard.big { margin: .4rem 0 .6rem; padding: .8rem 1rem; border-left-width: 6px; }
.leo-acard.host { border-color: var(--leo-gold); background: #f3e7c9; }
.leo-acard-name { font-family: var(--leo-display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.leo-acard-typ { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #5b4632; }
.leo-acard-stats { display: flex; gap: .8rem; font-size: .8rem; }
.leo-acard-stats b { font-family: var(--leo-display); font-size: 1.4rem; font-weight: 700; margin-right: 2px; }
.leo-acard-flavour { font-style: italic; color: #4a3b2f; font-size: .85rem; }
.leo-lots { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .6rem; }
.leo-agora.host { border-color: var(--leo-gold) !important; }
.leo-bid-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: .4rem 0; }
.leo-bid-btn { min-width: 44px; min-height: 44px; font-family: var(--leo-display); font-size: 1.3rem; font-weight: 700; padding: 0 10px; margin: 0; }
.leo-bidders { align-items: center; }

/* --- Auflösungs-Moment --- */
.leo-auction { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--leo-black); animation: leo-die-in 400ms ease-out both; }
.leo-auction-what { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; opacity: .7; }
.leo-auction-word { font-family: var(--leo-display); font-size: 3.6rem; font-weight: 700; line-height: 1; border-bottom: 6px solid var(--polis, var(--leo-gold)); padding-bottom: 4px; }
.leo-auction-text { font-size: 1.1rem; }
.leo-auction-bids { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.leo-auction-bid { display: flex; flex-direction: column; align-items: center; min-width: 84px; padding: 8px 10px; border: 2px solid var(--leo-black); border-top: 6px solid var(--polis); background: var(--leo-cream); animation: leo-die-in 400ms ease-out both; animation-delay: 300ms; }
.leo-auction-bid.won { box-shadow: 0 0 0 3px var(--leo-gold); }
.leo-auction-bidder { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.leo-auction-amount { font-family: var(--leo-display); font-size: 2.2rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hx-moment-light.leo-auction-moment .hx-moment-body { background: transparent; }

/* --- Wetten --- */
.leo-bet-duel { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; margin-bottom: .6rem; }
.leo-bet-fighter { border-left: 4px solid var(--polis); padding-left: 8px; }
.leo-bet-fighter b { font-family: var(--leo-display); font-size: 1.2rem; }
.leo-bet-vs { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: #5b4632; }
.leo-bet-pick { display: inline-flex; gap: 4px; }
.leo-bet-payout { font-size: .78rem; color: #2f6b2f; min-width: 9rem; }

/* --- Agon: Initiative, Wundenwahl, Kerben --- */
.leo-initiative { display: flex; flex-wrap: wrap; gap: .3rem 1rem; color: var(--leo-cream); font-size: .85rem; }
.leo-initiative span { border-left: 4px solid var(--polis); padding-left: 6px; display: inline-flex; align-items: center; gap: 3px; }
.leo-pip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--leo-cream); color: var(--leo-black); font-style: normal; font-family: var(--leo-display); font-weight: 700; font-size: .85rem; }
.leo-wound-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin: .4rem 0; }
.leo-wound-btn { display: flex !important; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 8px 10px; }
.leo-wound-btn .leo-wound-pips { display: inline-flex; gap: 3px; }
.leo-wound-btn .leo-pip { width: 12px; height: 12px; background: var(--leo-black); }
.leo-wound-btn .leo-pip.lost { background: #9c1c1c; transform: skewX(-15deg); }
.leo-wound-btn .leo-wound-num { font-size: .75rem; opacity: .8; }
.leo-wound-btn .leo-wound-stat { font-weight: 600; }
.leo-figure-notch { fill: #9c1c1c; }

/* --- Handy: große Ziele --- */
@media (max-width: 719.98px) {
    .leo-bid .hx-btn, .leo-bet-pick .hx-btn, .leo-name-row .hx-btn, .leo-actions .hx-btn-primary { min-height: 44px; }
    .leo-arena { max-width: none; }
    .leo-wound-choice { grid-template-columns: 1fr; }
    .leo-tafel { padding: 6px; border-width: 12px; }
    .leo-race-track { height: 30px; }
}
.leo-still .leo-auction, .leo-still .leo-auction-bid, .leo-still .leo-judge { animation: none; opacity: 1; transform: none; }

/* --- Handy: die Polis-Tafel als Sheet an der Unterkante des Spielbereichs, Griff sichtbar ---
   Das Sheet haengt an .leo-game statt am Fenster. Darunter sitzt die Plattform-Leiste mit
   Aufgeben und Remis, deren Hoehe mit dem Inhalt umbricht; ein fester Abstand zum Fensterrand
   hat sie bei zwei Zeilen verdeckt und die Klicks abgefangen. Dafuer scrollt jetzt .leo-stage
   statt .leo-game, sonst wuerde der Griff mit dem Inhalt wegscrollen. */
@media (max-width: 719.98px) {
    .leo-tafel-slot { padding: 0; }
    .leo-game { position: relative; overflow-y: hidden; }
    .leo-stage { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 3.6rem; }
    .leo-tafel-slot .hx-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--leo-black); color: var(--leo-cream); border: 0; border-radius: 12px 12px 0 0; }
    .leo-tafel-slot .hx-sheet-handle { color: var(--leo-cream); font-family: var(--leo-display); font-size: 1.05rem; }
    .leo-tafel-slot .hx-sheet-grip { background: var(--leo-cream); opacity: .7; }
    .leo-tafel-slot .hx-sheet-body { max-height: calc(82vh - 48px); }
    .leo-tafel { border-width: 10px; padding: 6px; }
    .leo-phase { font-size: .68rem; padding: 2px 6px; }
    .leo-strip-main { font-size: 1.2rem; }
}
@media (max-width: 719.98px) {
    /* Geschlossen zeigt das Sheet nur den Griff; der Rest ist abgeschnitten. */
    .leo-tafel-slot .hx-sheet { transform: none; max-height: 48px; overflow: hidden; transition: max-height 300ms ease-out; }
    .leo-tafel-slot .hx-sheet.open { max-height: 82vh; }
}