/* ═══ Oracle de la Glace — thème World of Warcraft ═══ */
:root {
  --bg: #0b0805; --bg2: #15100a; --panel: #1b140c; --panel2: #241a0f;
  --gold: #f8b700; --gold-l: #ffd96a; --gold-d: #8a6a1c; --bronze: #5c4420;
  --parch: #e8d8b0; --text: #e9dcc0; --muted: #a8977a;
  --alliance: #2a7fff; --alliance-d: #123a7a; --horde: #e0261b; --horde-d: #6e0f0a;
  --good: #1eff00; --bad: #ff5a4a; --arc: #3fc7eb;
  --shadow: 0 6px 24px rgba(0, 0, 0, .65);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--text); font: 17px/1.45 'Alegreya', Georgia, serif; min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, #3a2a12 0%, transparent 55%),
    radial-gradient(ellipse at 10% 100%, #12233f 0%, transparent 45%),
    radial-gradient(ellipse at 95% 90%, #3a0f0c 0%, transparent 40%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 5px), var(--bg);
  background-attachment: fixed;
}
h1, h2, h3, .tabs button, .btn, .tip-title, .brand h1 { font-family: 'Cinzel', serif; }
h2 { color: var(--gold); font-size: 1.15rem; margin: 0 0 .7rem; letter-spacing: .04em; text-shadow: 0 2px 0 #000; }
h2 small { color: var(--muted); font-weight: 500; }
code { background: #000a; padding: 1px 5px; border-radius: 3px; color: var(--gold-l); font-size: .9em; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; }
.good { color: var(--good) !important; } .bad { color: var(--bad) !important; } .gold:not(.btn) { color: var(--gold) !important; }

/* braises */
.embers { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.embers::before, .embers::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -20px; height: 100%;
  background-image: radial-gradient(2px 2px at 10% 90%, #ffb347 50%, transparent 52%), radial-gradient(2px 2px at 30% 80%, #ff8c1a 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 55% 95%, #ffd27a 50%, transparent 52%), radial-gradient(2px 2px at 75% 85%, #ff7a2a 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 90% 92%, #ffc266 50%, transparent 52%);
  opacity: .55; animation: rise 14s linear infinite;
}
.embers::after { animation-duration: 22s; animation-delay: -8s; transform: scaleX(-1); opacity: .35; }
@keyframes rise { from { transform: translateY(30%); opacity: 0; } 15% { opacity: .6; } to { transform: translateY(-110%); opacity: 0; } }

/* barre du haut */
.topbar {
  position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; justify-content: space-between;
  padding: 12px clamp(14px, 3vw, 34px);
  background: linear-gradient(#2a1d0e, #120c06); border-bottom: 3px solid var(--gold-d);
  box-shadow: 0 4px 0 #000, 0 8px 22px #000a, inset 0 -2px 0 #000;
}
.brand { display: flex; gap: 12px; align-items: center; }
.sigil { font-size: 2.3rem; filter: drop-shadow(0 0 10px #a335ee); animation: pulse 3.5s ease-in-out infinite; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 18px #ff8000); transform: scale(1.06); } }
.brand h1 { margin: 0; font-family: 'Cinzel Decorative', 'Cinzel', serif; font-size: clamp(1.15rem, 3vw, 1.7rem); font-weight: 900; letter-spacing: .05em;
  background: linear-gradient(#fff3b0, #f8b700 55%, #8a5a00); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 2px 0 #000); }
.brand small { color: var(--muted); font-style: italic; }
.hero { display: flex; align-items: center; gap: 12px; flex: 1 1 340px; max-width: 640px; }
.portrait { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #5a3e92, #1a1030); border: 3px solid var(--gold); box-shadow: 0 0 0 2px #000, 0 0 14px #a335ee88, inset 0 0 10px #000; font: 900 1.4rem 'Cinzel', serif; color: var(--gold-l); text-shadow: 0 2px 0 #000; }
.hero-info { flex: 1; min-width: 0; }
.hero-name { font: 700 1rem 'Cinzel', serif; color: var(--parch); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-name em { color: #c79cff; font-weight: 500; font-size: .85rem; margin-left: 4px; }
.xpbar { position: relative; height: 16px; margin-top: 3px; background: #000; border: 2px solid var(--bronze); border-radius: 4px; overflow: hidden; }
.xpbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#c79cff, #7a3cc8 60%, #4b1c8c); box-shadow: 0 0 10px #a335ee; transition: width .6s; }
.xpbar span { position: absolute; inset: 0; text-align: center; font: 600 .7rem/12px 'Cinzel', serif; color: #fff; text-shadow: 0 1px 2px #000; }
.gold-box { display: flex; align-items: center; gap: 6px; padding: 4px 10px; background: #000a; border: 2px solid var(--bronze); border-radius: 6px; font: 700 1rem 'Cinzel', serif; color: var(--gold-l); white-space: nowrap; }
.coin { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f8b700 55%, #8a5a00); box-shadow: 0 0 6px #f8b70099; }
.record { font: 700 1.1rem 'Cinzel', serif; } .record .w { color: var(--good); } .record .l { color: var(--bad); }
.auth { display: flex; gap: 6px; align-items: center; }
.chip { padding: 3px 10px; border: 1px solid var(--bronze); border-radius: 99px; background: #000a; font-size: .85rem; color: var(--muted); }
.chip.ok { color: var(--good); border-color: #1eff0055; } .chip.tiny { font-size: .7rem; padding: 0 7px; }

/* onglets */
.tabs { position: sticky; top: 0; z-index: 5; display: flex; gap: 4px; justify-content: center; padding: 8px 10px; background: linear-gradient(#0e0a05ee, #0e0a05cc); backdrop-filter: blur(6px); border-bottom: 1px solid var(--bronze); overflow-x: auto; }
.tabs button { flex: none; cursor: pointer; padding: 8px 18px; color: var(--muted); font-size: .95rem; letter-spacing: .04em; background: linear-gradient(#2a2014, #14100a); border: 2px solid var(--bronze); border-radius: 6px; transition: .15s; }
.tabs button:hover { color: var(--gold-l); border-color: var(--gold-d); }
.tabs button.on { color: #1a1000; background: linear-gradient(#ffe38a, #f8b700 60%, #b07800); border-color: #fff3b0; box-shadow: 0 0 14px #f8b70088; }

main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 18px clamp(10px, 2.5vw, 24px) 40px; display: flex; flex-direction: column; gap: 16px; }
.foot { position: relative; z-index: 1; text-align: center; padding: 20px; color: var(--muted); font-size: .8rem; }

/* panneaux (cadre doré) */
.panel {
  position: relative; padding: 16px 18px; background: linear-gradient(180deg, #241a0f 0%, #17110a 100%);
  border: 2px solid var(--gold-d); border-radius: 8px; box-shadow: var(--shadow), inset 0 0 0 2px #000, inset 0 0 0 3px #5c442066, inset 0 0 40px #000a;
}
.panel::before, .panel::after { content: '◆'; position: absolute; color: var(--gold); font-size: .6rem; text-shadow: 0 0 6px #f8b700; }
.panel::before { top: -7px; left: 10px; } .panel::after { bottom: -8px; right: 10px; }

/* boutons */
.btn { cursor: pointer; padding: 8px 16px; color: var(--parch); font-weight: 700; font-size: .85rem; letter-spacing: .04em; background: linear-gradient(#4a3822, #2a1e10); border: 2px solid var(--gold-d); border-radius: 5px; box-shadow: 0 2px 0 #000; transition: .12s; display: inline-block; }
.btn:hover:not(:disabled) { color: #fff; border-color: var(--gold); filter: brightness(1.2); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.gold { color: #2a1700; background: linear-gradient(#ffe38a, #f8b700 55%, #b57d00); border-color: #fff0a0; text-shadow: none; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
.btn.small { padding: 4px 10px; font-size: .75rem; } .btn.big { padding: 12px 28px; font-size: 1rem; }
.btn.good { border-color: #1a8c00; color: var(--good); } .btn.bad { border-color: #8c1a10; color: var(--bad); }
.x { cursor: pointer; background: none; border: 0; color: var(--muted); font-size: 1rem; padding: 2px 6px; } .x:hover { color: var(--bad); }
input, select, textarea { font: inherit; color: var(--parch); background: #0b0805; border: 2px solid var(--bronze); border-radius: 5px; padding: 6px 9px; outline: none; max-width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 8px #f8b70066; }
textarea { width: 100%; margin: 8px 0; font-family: monospace; }
.field { display: flex; flex-direction: column; gap: 3px; } .field span { font: 600 .72rem 'Cinzel', serif; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; } .field.grow { flex: 1; }

.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.empty { text-align: center; padding: 40px 20px; } .big-ico { font-size: 3.6rem; margin-bottom: 6px; filter: drop-shadow(0 0 12px #a335ee88); }

/* choix de l'oracle */
.oracle-picks ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.oracle-picks a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; color: var(--text); text-decoration: none; background: #0007; border: 1px solid var(--bronze); border-radius: 6px; }
.oracle-picks a:hover { border-color: var(--gold); background: #f8b70012; }
.medal { font-size: 1.4rem; } .pn { font: 700 1rem 'Cinzel', serif; flex: 1; min-width: 140px; } .pm { color: var(--muted); font-size: .85rem; } .pe { font-weight: 700; }

/* quêtes */
.quests { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr)); gap: 16px; align-items: start; }
.quest { position: relative; padding: 0 0 14px; background: linear-gradient(180deg, #2a1f12, #17110a); border: 2px solid var(--gold-d); border-radius: 8px; box-shadow: var(--shadow), inset 0 0 0 2px #000; overflow: hidden; scroll-margin-top: 70px; }
.quest.done { opacity: .78; filter: saturate(.7); }
.quest-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: linear-gradient(#4a3822, #2a1e10); border-bottom: 2px solid #000; font: 600 .85rem 'Cinzel', serif; }
.quest-head .x { margin-left: auto; }
.badge-state { padding: 1px 9px; border-radius: 4px; font-size: .72rem; background: #000a; border: 1px solid var(--bronze); }
.badge-state.live { color: #fff; background: var(--horde-d); border-color: var(--horde); animation: blink 1.4s infinite; } .badge-state.final { color: var(--muted); }
@keyframes blink { 50% { opacity: .55; } }
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; padding: 14px 10px 6px; }
.vs { font: 900 1.1rem 'Cinzel Decorative', serif; color: var(--gold); text-shadow: 0 0 10px #f8b70088, 0 2px 0 #000; }
.side { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 6px; border-radius: 8px; border: 2px solid transparent; transition: .2s; }
.side.away { background: radial-gradient(circle at 50% 0, #6e0f0a55, transparent 75%); } .side.home { background: radial-gradient(circle at 50% 0, #123a7a88, transparent 75%); }
.side.chosen.away { border-color: var(--horde); box-shadow: 0 0 16px #e0261b66; } .side.chosen.home { border-color: var(--alliance); box-shadow: 0 0 16px #2a7fff66; }
.side.winner { border-color: var(--gold) !important; box-shadow: 0 0 20px #f8b70099 !important; }
.tname { font: 700 .95rem 'Cinzel', serif; line-height: 1.15; } .sub { font-size: .78rem; color: var(--muted); } .sub b { color: var(--gold-l); font-size: 1rem; }
.logo { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 4px #000); }
.logo.sm { width: 28px; height: 28px; }
.logo.badge { display: inline-grid; place-items: center; border-radius: 50%; background: #000a; border: 2px solid var(--gold-d); font: 700 .85rem 'Cinzel', serif; color: var(--gold-l); }
input.odds { width: 84px; margin-top: 5px; text-align: center; font: 700 1.05rem 'Cinzel', serif; color: var(--gold-l); padding: 4px 6px; }
.score { font: 900 2.2rem/1 'Cinzel Decorative', serif; color: var(--gold-l); text-shadow: 0 0 12px #f8b70099, 0 3px 0 #000; margin-top: 2px; }
.side.winner .score { color: var(--good); }
.book-note { margin: 6px 14px 0; font-size: .78rem; color: var(--muted); } .book-note b { color: var(--gold-l); }
.live-note { margin: 4px 14px 0; padding: 4px 10px; font-size: .8rem; color: #ffb347; background: #ff8c0014; border: 1px dashed #ff8c00aa; border-radius: 4px; }
.mbar { display: flex; height: 22px; margin: 4px 14px; border: 2px solid #000; border-radius: 4px; overflow: hidden; font: 700 .72rem/18px 'Cinzel', serif; text-align: center; color: #fff; }
.mbar .a { background: linear-gradient(#ff5a4a, var(--horde-d)); } .mbar .h { background: linear-gradient(#5aa0ff, var(--alliance-d)); }
.mbar.empty { display: block; background: none; border: 1px dashed var(--bronze); color: var(--muted); font-family: 'Alegreya'; font-weight: 400; font-style: italic; }
.gut { margin: 10px 14px 0; padding: 8px 10px; background: #0006; border: 1px solid var(--bronze); border-radius: 6px; }
.meter-head { display: flex; justify-content: space-between; align-items: center; font: 700 .85rem 'Cinzel', serif; margin-bottom: 4px; }
.meter-head span { font: 400 .8rem 'Alegreya'; color: var(--muted); }
.meter-head .away { color: #ff7d70; } .meter-head .home { color: #6aaeff; }
.pips { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.pip { display: grid; place-items: center; height: 22px; border-radius: 4px; background: #000; border: 2px solid #3a2c18; font-style: normal; font-size: .75rem; transition: .25s; }
.pip.a { background: linear-gradient(#ff5a4a, var(--horde-d)); border-color: #ff8a7d; box-shadow: 0 0 8px #e0261b88; }
.pip.h { background: linear-gradient(#5aa0ff, var(--alliance-d)); border-color: #9ac6ff; box-shadow: 0 0 8px #2a7fff88; }
.pips.big { gap: 7px; } .pips.big .pip { height: 46px; font-size: 1.25rem; }
.gut-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.crits { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.crit { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 6px; align-items: center; }
.cn { text-align: center; font: 600 .78rem 'Cinzel', serif; cursor: help; } .cn small { opacity: .8; }
.plus { cursor: pointer; padding: 5px 4px; font: 700 .75rem 'Cinzel', serif; color: var(--parch); background: #000a; border: 2px solid #3a2c18; border-radius: 4px; transition: .12s; }
.plus.away:hover:not(:disabled), .plus.away.on { background: linear-gradient(#ff5a4a, var(--horde-d)); border-color: #ff8a7d; color: #fff; }
.plus.home:hover:not(:disabled), .plus.home.on { background: linear-gradient(#5aa0ff, var(--alliance-d)); border-color: #9ac6ff; color: #fff; }

/* tooltip d'objet WoW */
.tip { margin: 12px 14px 0; padding: 10px 12px; background: linear-gradient(#0b0f1fee, #05060ff2); border: 2px solid var(--rc, #666); border-radius: 6px; box-shadow: 0 0 14px color-mix(in srgb, var(--rc, #666) 45%, transparent), inset 0 0 0 1px #000; font-size: .92rem; }
.tip-title { font-size: 1rem; font-weight: 700; } .tip-sub { color: var(--muted); font-size: .8rem; margin-bottom: 4px; }
.tl { display: flex; justify-content: space-between; gap: 10px; } .tl span { color: #c9c2b0; } .tl b { font-family: 'Cinzel', serif; font-size: .85rem; color: #fff; }
.flavor { color: var(--gold-l); font-style: italic; margin: 6px 0 0; } .warn { color: #ffb347; margin: 6px 0 0; font-size: .85rem; }
.bet-row { display: flex; gap: 8px; padding: 12px 14px 0; flex-wrap: wrap; } .bet-row select { flex: 1; min-width: 130px; } input.stake { width: 96px; }
.bet-open { margin: 12px 14px 0; padding: 8px 12px; background: #f8b70018; border: 1px dashed var(--gold); border-radius: 6px; }

/* Arène */
.arena-top { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 12px; } .arena select { width: 100%; }
.modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.mode { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; font: 700 .85rem 'Cinzel', serif; color: var(--muted); background: #000a; border: 2px solid var(--bronze); border-radius: 6px; } .mode span { font-size: 1.5rem; }
.mode.on { color: var(--gold-l); border-color: var(--gold); box-shadow: 0 0 14px #f8b70055; background: #f8b70014; }
.stage { min-height: 300px; margin-top: 8px; padding: 18px 10px; background: radial-gradient(ellipse at 50% 0, #2c1d4a 0%, #0b0610 70%); border: 2px solid #3a2c5a; border-radius: 8px; box-shadow: inset 0 0 40px #000; }
.question { text-align: center; margin-bottom: 14px; } .question .qi { font-size: 2.2rem; } .question h3 { margin: 4px 0 0; font-size: clamp(1rem, 3.2vw, 1.35rem); color: var(--parch); }
.timer { height: 10px; margin: 0 auto 16px; max-width: 520px; background: #000; border: 2px solid var(--bronze); border-radius: 6px; overflow: hidden; } .timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff3b2a, #ffb347, #1eff00); transform-origin: left; }
@keyframes drain { to { transform: scaleX(0); } }
.duel { display: flex; align-items: stretch; justify-content: center; gap: 12px; flex-wrap: wrap; }
.team-btn { cursor: pointer; flex: 1; min-width: 150px; max-width: 280px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 10px; color: var(--parch); font-family: 'Cinzel', serif; border-radius: 10px; border: 3px solid; transition: .1s; }
.team-btn.home { background: linear-gradient(#1c4fa0, #0b1f45); border-color: var(--alliance); } .team-btn.away { background: linear-gradient(#a8221a, #3d0805); border-color: var(--horde); }
.team-btn:hover { transform: scale(1.04); filter: brightness(1.2); } .team-btn.picked { outline: 4px solid var(--gold); transform: scale(1.08); } .team-btn small { color: #ffffffaa; }
.team-btn .logo { width: 72px; height: 72px; }
.runes { display: flex; justify-content: center; gap: clamp(8px, 3vw, 24px); perspective: 900px; }
.rune-card { cursor: pointer; width: clamp(90px, 26vw, 150px); aspect-ratio: 2/3; background: none; border: 0; padding: 0; }
.rune-card .inner { position: relative; width: 100%; height: 100%; transition: transform .7s; transform-style: preserve-3d; }
.rune-card.flipped .inner { transform: rotateY(180deg); } .rune-card:not(.flipped):hover .inner { transform: translateY(-8px) rotateZ(-2deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 3px solid var(--gold); font-family: 'Cinzel', serif; }
.face.back { background: radial-gradient(circle, #5a3e92, #1a1030 70%); } .face.back span { font-size: 3.2rem; color: var(--gold-l); text-shadow: 0 0 14px #a335ee; }
.face.front { transform: rotateY(180deg); } .face.front.home { background: linear-gradient(#1c4fa0, #0b1f45); } .face.front.away { background: linear-gradient(#a8221a, #3d0805); }
.face.front .logo { width: 70%; height: auto; max-height: 55%; } .rune-card.chosen .face { box-shadow: 0 0 24px var(--gold); } .rune-card.dim { opacity: .55; }
.pend { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; max-width: 780px; margin: 10px auto 18px; }
.end { display: flex; flex-direction: column; align-items: center; font-family: 'Cinzel', serif; font-size: .85rem; } .end .logo { width: 56px; height: 56px; } .end.away { color: #ff7d70; } .end.home { color: #6aaeff; }
.track { position: relative; height: 70px; background: linear-gradient(90deg, #6e0f0a 0%, #1a1020 45%, #1a1020 55%, #123a7a 100%); border: 3px solid var(--gold-d); border-radius: 40px; box-shadow: inset 0 0 20px #000; }
.track .mid { position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; background: #ffffff55; }
.bob { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, #f8b700 55%, #8a5a00); box-shadow: 0 0 20px #f8b700; border: 2px solid #fff3b0; }
.bob.homeglow { box-shadow: 0 0 30px #2a7fff; background: radial-gradient(circle at 35% 30%, #cfe3ff, #2a7fff 60%, #123a7a); } .bob.awayglow { box-shadow: 0 0 30px #e0261b; background: radial-gradient(circle at 35% 30%, #ffd0cb, #e0261b 60%, #6e0f0a); }
.oracle-says { --rc: var(--gold); margin-top: 16px; text-align: center; padding: 16px; border: 2px solid var(--rc); border-radius: 8px; background: #000a; box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 50%, transparent); }
.oracle-says small { display: block; color: var(--muted); } .oracle-says strong { display: block; font: 900 1.6rem 'Cinzel', serif; color: var(--rc); text-shadow: 0 0 12px var(--rc); margin: 2px 0; } .oracle-says em { display: block; margin-bottom: 10px; color: var(--parch); }
.done h3, .intro h3 { color: var(--gold); font-size: 1.3rem; margin: 6px 0; }

/* grimoire */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.stat { padding: 10px 14px; background: linear-gradient(#2a1f12, #17110a); border: 2px solid var(--bronze); border-radius: 6px; } .stat span { display: block; font: 600 .7rem 'Cinzel', serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .stat b { font: 700 1.4rem 'Cinzel', serif; } .stat small { font-size: .7rem; color: var(--muted); }
.rrow { display: grid; grid-template-columns: 110px 1fr 110px; gap: 10px; align-items: center; margin: 5px 0; font: 600 .85rem 'Cinzel', serif; } .rbar { height: 12px; background: #000; border: 1px solid var(--bronze); border-radius: 3px; overflow: hidden; } .rbar i { display: block; height: 100%; } .rrow small { color: var(--muted); font: 400 .8rem 'Alegreya'; }
.ledger { display: flex; flex-direction: column; gap: 8px; }
.bet { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: #0007; border: 1px solid var(--bronze); border-left: 5px solid var(--gold); border-radius: 6px; }
.bet.won { border-left-color: var(--good); } .bet.lost { border-left-color: var(--bad); } .bet.void { border-left-color: var(--muted); }
.bi small, .bm span:first-child { display: block; font-size: .78rem; color: var(--muted); } .bm { font-size: .9rem; } .bm span:first-child { font-family: 'Cinzel', serif; }
.ba { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.res { font: 700 .95rem 'Cinzel', serif; } .res.won { color: var(--good); } .res.lost { color: var(--bad); }

/* hauts-faits */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ach { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: #0008; border: 2px solid #2a2014; border-radius: 6px; filter: grayscale(1); opacity: .6; }
.ach.on { filter: none; opacity: 1; border-color: var(--gold-d); background: linear-gradient(#2a1f12, #17110a); box-shadow: 0 0 12px #f8b70033; }
.ai { font-size: 2rem; width: 46px; height: 46px; display: grid; place-items: center; background: #000; border: 2px solid var(--bronze); border-radius: 6px; flex: none; } .ach.on .ai { border-color: var(--gold); }
.ach b { display: block; font: 700 .9rem 'Cinzel', serif; color: var(--gold-l); } .ach small, .ach em { display: block; color: var(--muted); font-size: .8rem; }
table.lb { width: 100%; margin-top: 10px; border-collapse: collapse; } .lb th { text-align: left; font: 600 .75rem 'Cinzel', serif; color: var(--muted); border-bottom: 2px solid var(--bronze); padding: 4px; } .lb td { padding: 6px 4px; border-bottom: 1px solid #3a2c18; } .lb tr.me td { color: var(--gold-l); background: #f8b70014; } .lb em { color: #c79cff; font-size: .8rem; }

/* réglages */
.setrow { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #3a2c1855; } .setrow span small { display: block; color: var(--muted); font-size: .78rem; } .setrow input[type=range] { width: calc(100% - 52px); } .setrow input[type=checkbox] { width: 22px; height: 22px; } .setrow b { color: var(--gold-l); margin-left: 6px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; } .how li { margin: 6px 0; }

/* modale + toasts */
.modal { display: none; position: fixed; inset: 0; z-index: 50; place-items: center; } .modal.show { display: grid; }
.modal-back { position: absolute; inset: 0; background: #000b; } .modal-box { position: relative; width: min(94vw, 560px); max-height: 92vh; overflow: auto; } .modal-box .close { position: absolute; top: 8px; right: 8px; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .form .btn { grid-column: 1 / -1; }
#toasts { position: fixed; z-index: 60; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 380px); }
.toast { padding: 10px 14px; background: linear-gradient(#2a1f12, #120c06); border: 2px solid var(--gold-d); border-left: 6px solid var(--gold); border-radius: 6px; box-shadow: var(--shadow); animation: slide .3s; }
.toast.good { border-left-color: var(--good); } .toast.bad { border-left-color: var(--bad); } .toast.ach { border-color: #a335ee; border-left-color: #a335ee; box-shadow: 0 0 20px #a335ee88; } .toast.out { opacity: 0; transform: translateX(30px); transition: .5s; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .tabs { justify-content: flex-start; } .tabs button { padding: 8px 12px; } .tabs button span { display: none; } .tabs button { font-size: 1.2rem; }
  .matchup { grid-template-columns: 1fr 1fr; } .matchup .vs { display: none; }
  .bet { grid-template-columns: 1fr; } .ba { justify-content: flex-start; } .setrow { grid-template-columns: 1fr; } .form { grid-template-columns: 1fr; }
  .rrow { grid-template-columns: 90px 1fr; } .rrow small { grid-column: 1 / -1; } .hero { order: 3; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }