.mt-form { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; min-width: 0; }
.mt-form .cap { flex: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 800; }
.mt-form .dots {
    display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; min-width: 0;
    mask-image: linear-gradient(90deg, #000 85%, transparent);
}
.mt-form .dots::-webkit-scrollbar { display: none; }
.mt-form .d {
    flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center; font: 800 11px/1 var(--f-display); color: #fff;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000));
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.22), 0 3px 10px -4px var(--c);
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.mt-form .d.h { --c: #1d3f9a; color: #ffd36b; box-shadow: inset 0 0 0 1.5px #ffd36b, inset 0 -3px 0 rgba(0,0,0,.25); }
.mt-form .d.n { --c: #59647a; }
.mt-form .d.new { animation: mtDotIn .55s var(--ease); }
.mt-form .none { font-size: 12px; color: var(--faint); white-space: nowrap; }
@keyframes mtDotIn { from { transform: translateX(-14px) scale(.4); opacity: 0; } }

.mt-stage {
    --cw: 108px; --ch: 150px;
    position: relative; overflow: hidden; height: 580px; border-radius: var(--r-xl); isolation: isolate;
    background: #070b1f;
    box-shadow: var(--sh-screen), inset 0 0 0 1px rgba(140,170,255,.12);
    user-select: none; -webkit-user-select: none;
}
.mt-sky {
    position: absolute; inset: 0 0 38% 0; z-index: 0;
    background: url('../assets/art/match/stands.webp') 50% 0 / cover no-repeat;
    mask-image: linear-gradient(180deg, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
    transform-origin: 50% 30%; animation: mtBreath 14s ease-in-out infinite alternate;
    transition: filter .6s;
}
@keyframes mtBreath { to { transform: scale(1.04); } }
.mt-stage[data-tense="1"] .mt-sky { filter: brightness(.55) saturate(.8); }

.mt-beam {
    position: absolute; top: -10%; width: 44%; height: 90%; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: .5;
    background: conic-gradient(from 180deg at 50% 0%, transparent 42%, rgba(160,190,255,.22) 48%, rgba(220,235,255,.32) 50%, rgba(160,190,255,.22) 52%, transparent 58%);
    filter: blur(6px); transform-origin: 50% 0;
}
.mt-beam.l { left: -4%; animation: mtSweepL 9s ease-in-out infinite alternate; }
.mt-beam.r { right: -4%; animation: mtSweepR 11s ease-in-out infinite alternate; }
@keyframes mtSweepL { from { transform: rotate(-24deg); } to { transform: rotate(-8deg); } }
@keyframes mtSweepR { from { transform: rotate(24deg); } to { transform: rotate(8deg); } }

.mt-crowd { position: absolute; inset: 0 0 38% 0; width: 100%; height: 62%; z-index: 2; pointer-events: none; }

.mt-ground {
    position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 2; pointer-events: none;
    background:
        radial-gradient(60% 70% at 50% 100%, rgba(60,200,120,.28), transparent 70%),
        linear-gradient(180deg, transparent, rgba(6,30,18,.85) 30%, #04170d);
}
.mt-field {

    position: absolute; left: calc(50% - var(--fw, 780px) / 2); bottom: 1.5%; width: var(--fw, 780px); aspect-ratio: 1536 / 519;
}
.mt-pitch {
    position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none;
    filter: drop-shadow(0 -8px 26px rgba(60,220,140,.16)) drop-shadow(0 12px 18px rgba(0,0,0,.5));
}

.mt-cc {
    position: absolute; left: 50%; top: 41.2%; z-index: 4; width: 16.6%; height: 27.8%; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none; opacity: 0;
}
.mt-stage[data-win="draw"] .mt-cc { animation: mtCenter 1s ease-in-out 3; }
@keyframes mtCenter {
    0%, 100% { opacity: 0; box-shadow: none; }
    50% { opacity: 1; box-shadow: 0 0 0 3px #ffe08a, 0 0 26px 4px rgba(255,211,107,.8), inset 0 0 18px rgba(255,211,107,.6); }
}

.mt-goal { position: absolute; top: 19.7%; width: 6.8%; height: 31.2%; z-index: 4; pointer-events: none; }
.mt-goal.l { left: 7.9%; }
.mt-goal.r { left: 85.4%; }
.mt-goal i {
    position: absolute; inset: -20%; border-radius: 40%; opacity: 0;
    background: radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,236,170,.6) 45%, transparent);
    mix-blend-mode: screen;
}
.mt-goal.hit i { animation: mtNet .9s ease-out; }
@keyframes mtNet { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.3); } }

.mt-board {
    position: absolute; left: 50%; top: 12px; z-index: 8; transform: translateX(-50%);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 14px;
    width: min(560px, calc(100% - 24px)); padding: 10px 16px 8px; border-radius: 18px;
    background:
        radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.4px) 0 0 / 5px 5px,
        linear-gradient(180deg, rgba(10,16,40,.92), rgba(5,8,22,.92));
    box-shadow: 0 16px 36px -14px rgba(0,0,0,.8), inset 0 0 0 1px rgba(140,170,255,.18), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(6px);
}
.mt-board .team { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-width: 0; }
.mt-board .team.away { grid-template-columns: 1fr auto; text-align: right; }
.mt-board .team .crest { grid-row: span 2; width: 42px; height: 48px; }
.mt-board .team.away .crest { grid-column: 2; grid-row: 1 / span 2; }
.mt-board .team b { font: 800 14px/1.15 var(--f-display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-board .team small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.mt-board .team.away b, .mt-board .team.away small { grid-column: 1; }
.mt-board .score {
    display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 12px;
    font: 800 30px/1 var(--f-display); color: #ffe7a6; background: #03060f;
    box-shadow: inset 0 0 0 1px rgba(255,211,107,.25), inset 0 0 18px rgba(255,190,80,.12);
    text-shadow: 0 0 12px rgba(255,190,80,.7); font-variant-numeric: tabular-nums;
}
.mt-board .score i { font-style: normal; opacity: .6; animation: mtBlink 1s ease-in-out infinite; }
.mt-board .score span.up { animation: mtScore .7s var(--ease); }
@keyframes mtScore { 30% { transform: scale(1.7); color: #fff; text-shadow: 0 0 22px #ffd36b; } }
@keyframes mtBlink { 50% { opacity: .15; } }
.mt-board .led {
    grid-column: 1 / -1; justify-self: center; padding: 3px 14px; border-radius: 8px; min-width: 60%; text-align: center;
    font: 800 12px/1.3 var(--f-display); letter-spacing: .14em; color: #ffb547; background: #020409;
    text-shadow: 0 0 8px rgba(255,160,50,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: inset 0 0 0 1px rgba(255,160,50,.18);
}
.mt-board .led.pop { animation: mtLed .5s ease-out; }
@keyframes mtLed { from { filter: brightness(2.2); letter-spacing: .3em; } }
.mt-board.goal { animation: mtBoardGoal 1.2s ease-out; }
.mt-board.goal .led { color: #fff; background: linear-gradient(90deg, #ff3d6e, #ffb547, #ffe08a, #3dffa2, #3d8bff, #b35cff, #ff3d6e); background-size: 200% 100%; animation: mtRainbow 1s linear infinite; text-shadow: 0 1px 2px rgba(0,0,0,.5); font-size: 15px; }
@keyframes mtRainbow { to { background-position: 200% 0; } }
@keyframes mtBoardGoal { 10%, 30%, 50% { box-shadow: 0 0 0 2px #ffe08a, 0 0 40px 6px rgba(255,211,107,.6); } 20%, 40% { box-shadow: 0 0 0 1px rgba(140,170,255,.18); } }

.crest { display: inline-block; flex: none; }
.crest svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); }

.mt-head { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 9; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; font-size: 11px; color: rgba(255,255,255,.55); }
.mt-head .hash { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, monospace; }

.mt-slot {
    --fx: 0px; --fy: 0px;
    position: absolute; top: 45%; z-index: 6; width: var(--cw); height: var(--ch); transform: translate(-50%, -50%);
}
.mt-slot.home { left: 31%; }
.mt-slot.away { left: 69%; }
.mt-slot .lbl {
    position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
    font: 800 10.5px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75);
    padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.45); transition: opacity .3s;
}
.mt-slot::before {
    content: ''; position: absolute; inset: -4px; border-radius: 14px; border: 2px dashed rgba(255,255,255,.28);
    transition: opacity .3s;
}
.mt-slot.has::before { opacity: 0; }
.mt-card {
    position: absolute; inset: 0; perspective: 900px;
    transform: translate(var(--fx), var(--fy)) scale(.35) rotate(-25deg); opacity: 0;
    transition: transform .6s cubic-bezier(.2,.9,.25,1.05), opacity .25s, filter .5s;
}
.mt-slot.has .mt-card { transform: none; opacity: 1; }
.mt-card .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.4,.4,1); }
.mt-card.open .in { transform: rotateY(180deg); }
.mt-card .face, .mt-card .back, .mt-card .peel { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mt-card .face { transform: rotateY(180deg); }
.mt-card[data-mt-card="away"] .face { transform: none; }
.mt-card[data-mt-card="away"].open .in { transform: none; }

.mt-card .face {
    --ink: #151a2b;
    background: linear-gradient(160deg, #ffffff, #f2efe6);
    box-shadow: 0 14px 30px -8px rgba(0,0,0,.65), inset 0 0 0 1px rgba(0,0,0,.08), inset 0 0 0 5px #fff, inset 0 0 0 6px rgba(0,0,0,.06);
    color: var(--ink); overflow: hidden;
}
.mt-card .face.red { --ink: #e0233f; }
.mt-card .face .ix { position: absolute; display: grid; justify-items: center; line-height: .95; font: 800 calc(var(--cw) * .2)/1 var(--f-display); }
.mt-card .face .ix small { font-size: .78em; }
.mt-card .face .ix.tl { left: 7%; top: 5%; }
.mt-card .face .ix.br { right: 7%; bottom: 5%; transform: rotate(180deg); }
.mt-card .face .big {
    position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 0;
    font: 800 calc(var(--cw) * .5)/1 var(--f-display); letter-spacing: -.04em;
}
.mt-card .face .big small { font-size: .52em; margin-top: -.05em; }
.mt-card .face.pic { background: radial-gradient(circle at 50% 45%, #fff8df, #f3e3b0 70%, #e3c983); }
.mt-card .face.pic::before {
    content: ''; position: absolute; inset: 11% 14%; border-radius: 6px; border: 2px solid rgba(176,125,20,.55);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.6);
}
.mt-card .face.pic .big::before { content: '👑'; font-size: .36em; margin-bottom: -.05em; }

.mt-card .back {
    background:
        radial-gradient(circle at 50% 50%, transparent 25%, rgba(0,0,0,.35) 26%, transparent 29%),
        repeating-linear-gradient(45deg, rgba(255,211,107,.16) 0 2px, transparent 2px 11px),
        repeating-linear-gradient(-45deg, rgba(255,211,107,.16) 0 2px, transparent 2px 11px),
        linear-gradient(160deg, #1b2f78, #0a1438);
    box-shadow: 0 14px 30px -8px rgba(0,0,0,.65), inset 0 0 0 3px #0a1438, inset 0 0 0 5px #ffd36b, inset 0 0 18px rgba(255,211,107,.25);
}
.mt-card .back::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; background: url('../assets/art/lion/face.webp') center / cover, #0a1438;
    box-shadow: 0 0 0 3px #ffd36b, 0 0 16px rgba(255,211,107,.6);
}

.mt-card .peel { filter: drop-shadow(-4px 4px 5px rgba(0,0,0,.55)); backface-visibility: visible; }
.mt-card .peel .back { backface-visibility: visible; }
.mt-card .peel .fold {
    position: absolute; height: 3px; left: 0; top: 0; transform-origin: 0 50%; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,240,200,.95), rgba(255,255,255,0));
}

.mt-slot.win .mt-card { transform: scale(1.1); }
.mt-slot.win .mt-card .face { box-shadow: 0 0 0 3px #ffe08a, 0 0 36px 6px rgba(255,211,107,.75), 0 18px 34px -8px rgba(0,0,0,.6); }
.mt-slot.lose .mt-card { filter: brightness(.55) saturate(.6); transform: scale(.94); }
.mt-slot.win .lbl { background: #ffd36b; color: #2b1600; }
.mt-slot.tense .mt-card { animation: mtHeart .8s ease-in-out infinite; }
@keyframes mtHeart { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,211,107,0)); } 20% { filter: drop-shadow(0 0 18px rgba(255,211,107,.8)); } 35% { filter: drop-shadow(0 0 6px rgba(255,211,107,.3)); } 50% { filter: drop-shadow(0 0 16px rgba(255,211,107,.7)); } }

.mt-stage::after {
    content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; transition: opacity .6s;
    background: radial-gradient(ellipse 60% 55% at 70% 60%, transparent 30%, rgba(0,0,0,.72));
}
.mt-stage[data-tense="1"]::after { opacity: 1; }
.mt-stage[data-tense="1"] .mt-slot.away { z-index: 9; }

.mt-ball { position: absolute; left: 0; top: 0; z-index: 11; width: 34px; height: 34px; opacity: 0; pointer-events: none; will-change: transform; filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)); }
.mt-ball.on { opacity: 1; }

.mt-lion {
    position: absolute; left: 39%; bottom: 2%; z-index: 10; height: 48%; pointer-events: none; opacity: 0;
    transform: translateX(-260%); filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.mt-lion.run { animation: mtLionRun 2.6s cubic-bezier(.3,.7,.3,1) forwards; }
@keyframes mtLionRun {
    0% { opacity: 1; transform: translateX(-260%) rotate(-4deg); }
    30% { transform: translateX(-12%) translateY(-6%) rotate(3deg); }
    40% { transform: translateX(0) translateY(0) rotate(-2deg); }
    52% { transform: translateX(0) translateY(-18%) rotate(2deg) scale(1.03); }
    62% { transform: translateX(0) translateY(0) rotate(0); }
    74% { transform: translateX(0) translateY(-16%) rotate(-3deg) scale(1.03); }
    84%, 100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0); }
}

.mt-ref {
    position: absolute; left: 33%; bottom: 0; z-index: 10; height: 46%; pointer-events: none; opacity: 0;
    transform: translateY(70%); transition: transform .6s cubic-bezier(.2,.9,.3,1.15), opacity .3s;
    filter: drop-shadow(0 14px 18px rgba(0,0,0,.55));
}
.mt-ref.in { opacity: 1; transform: translateY(4%); }

.mt-react {
    position: absolute; left: 30%; top: 36%; z-index: 12; pointer-events: none; opacity: 0; white-space: nowrap;
    font: 800 22px/1 var(--f-display); letter-spacing: .02em; font-style: italic; text-transform: uppercase;
    transform: translate(-50%, 0);
}
.mt-react.roar { color: #ffe08a; text-shadow: 0 0 18px rgba(255,190,80,.9), 0 3px 0 #7a4a07; }
.mt-react.boo { color: #c9d4ff; text-shadow: 0 0 14px rgba(120,150,255,.6), 0 3px 0 #1d2a5c; }
.mt-react.hum { color: #fff; font-size: 17px; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.mt-react.on { animation: mtReact 1.7s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes mtReact {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(.5); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
    30% { transform: translate(-50%, 0) scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -40px) scale(1); }
}

.mt-center {
    position: absolute; left: 50%; top: 40%; z-index: 9; transform: translate(-50%, -50%);
    display: grid; justify-items: center; gap: 4px; text-align: center; transition: opacity .35s, transform .35s;
}
.mt-center .cap { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; color: rgba(255,255,255,.75); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.mt-timer { font: 800 56px/1 var(--f-display); color: #fff; text-shadow: 0 0 26px rgba(120,160,255,.6), 0 4px 0 rgba(0,0,0,.35); font-variant-numeric: tabular-nums; }
.mt-center .tip { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.7); text-shadow: 0 1px 6px rgba(0,0,0,.9); }
.mt-stage.has-slip .mt-center .tip { opacity: 0; }
.mt-stage:not([data-phase="betting"]) .mt-center { opacity: 0; transform: translate(-50%, -50%) scale(.85); pointer-events: none; }

.mt-result {
    position: absolute; left: 50%; top: 31%; z-index: 13; transform: translate(-50%, -50%);
    display: grid; justify-items: center; gap: 6px; padding: 14px 26px 16px; border-radius: 20px; min-width: 300px; text-align: center;
    background: linear-gradient(180deg, rgba(8,12,32,.86), rgba(4,6,18,.9)); backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 24px 50px -16px rgba(0,0,0,.9);
    animation: mtResIn .6s cubic-bezier(.2,.9,.3,1.25);
}
.mt-result .m {
    font: 800 38px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase;
    background: linear-gradient(180deg, #fff, #ffe08a 55%, #ffb547); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 3px 0 rgba(122,74,7,.8));
}
.mt-result.away .m { background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--c, #3d8bff) 60%, #fff)); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.mt-result.draw .m { background: linear-gradient(180deg, #fff, #b9c6e4); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); }
.mt-result .t { font-size: 13.5px; font-weight: 700; color: var(--dim); }
.mt-result .t b { color: var(--mint); }
.mt-result .t b.lost { color: var(--faint); }
@keyframes mtResIn { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }

.mt-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 14; pointer-events: none; }
.mt-flash { position: absolute; inset: 0; z-index: 15; pointer-events: none; background: #fff; opacity: 0; }
.mt-flash.on { animation: mtFlash .5s ease-out; }
@keyframes mtFlash { 0% { opacity: .75; } 100% { opacity: 0; } }
.mt-stage.shake { animation: mtShake .45s ease-out; }
@keyframes mtShake { 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }

.mt-slip {
    position: relative; padding: 16px 16px 16px; overflow: visible;
    background:
        radial-gradient(120% 60% at 50% -12%, rgba(47,211,122,.2), transparent 55%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 26px, transparent 26px 52px),
        linear-gradient(175deg, #10271f, #0b1719 72%);
    border: 1px solid rgba(90,230,160,.2);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 26px 50px -30px rgba(0,0,0,.95);
}
.mt-slip-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mt-slip-h b { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-size: 16px; }
.mt-slip-h b::before {
    content: '⚽'; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-size: 15px;
    background: linear-gradient(160deg, #2fd37a, #138a4c); box-shadow: 0 6px 14px -6px rgba(47,211,122,.9);
}
.mt-slip-h small { color: var(--faint); font-size: 10.5px; font-weight: 700; text-align: right; line-height: 1.3; max-width: 55%; }

.mt-slip .mt-bet { padding: 0; margin: 0; background: none; border: 0; box-shadow: none; overflow: visible; }
.mt-slip .mt-bet .chips { display: flex; justify-content: space-between; gap: 4px; padding: 10px 2px 6px; overflow: visible; }
.mt-slip .mt-bet .chips .c { width: 42px; height: 42px; font-size: 11px; flex: none; }
.mt-slip .mt-bet .fb-own { margin-top: 8px; }
.mt-slip .mt-bet .fb-amt, .mt-slip .mt-bet .fb-own > button { height: 42px; }
.mt-slip .mt-bet .fb-amt { background: rgba(0,0,0,.3); }
.mt-slip .mt-bet .fb-amt input { font-size: 18px; }
.mt-slip .mt-bet .fb-total, .mt-slip .mt-bet .acts { display: none; }

.mt-mk .mk-h { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px; }
.mt-mk .mk-h span { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(235,255,245,.9); }
.mt-mk .mk-h small { color: var(--faint); font-size: 10.5px; font-weight: 600; }
.mt-mk .mk-note { margin: 7px 0 0; font-size: 10.5px; font-weight: 600; color: var(--faint); text-align: center; }

.mt-line { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.mt-line.nudge { animation: mtNudge .6s var(--ease); }
@keyframes mtNudge { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.mt-odd, .mt-side {
    position: relative; border: 0; cursor: pointer; color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--c) 24%, #16202b), #10171f);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px color-mix(in srgb, var(--c) 34%, transparent);
    transition: transform .15s, box-shadow .2s, filter .2s;
}
.mt-odd { --c: #2fd37a; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 11px 4px 10px; border-radius: 16px; text-align: center; min-width: 0; }
.mt-odd.home { --c: #ffd36b; background: linear-gradient(180deg, #2b4ab0, #16245e 70%, #111a3d); }
.mt-odd.draw { --c: #9fb3d9; }
.mt-odd:hover:not(:disabled), .mt-side:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--c), 0 14px 26px -14px var(--c); }
.mt-odd:active:not(:disabled), .mt-side:active:not(:disabled) { transform: translateY(1px) scale(.97); }
.mt-odd:disabled, .mt-side:disabled { filter: grayscale(.45) brightness(.72); cursor: default; }
.mt-odd .crest { width: 32px; height: 36px; margin-bottom: 2px; transition: transform .3s var(--ease); }
.mt-odd:hover:not(:disabled) .crest { transform: translateY(-2px) rotate(-4deg) scale(1.06); }
.mt-odd .ico { font-size: 25px; height: 38px; display: grid; place-items: center; }
.mt-odd .nm { display: grid; font-weight: 800; font-size: 12.5px; min-width: 0; max-width: 100%; line-height: 1.2; }
.mt-odd .nm small, .mt-side .nm small { font-weight: 600; font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-odd b { margin-top: 4px; padding: 3px 10px; border-radius: 9px; font: 800 16px/1.1 var(--f-display); color: color-mix(in srgb, var(--c) 50%, #fff); background: rgba(0,0,0,.28); }
.mt-odd .mine { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); z-index: 2; }
.mt-odd.has, .mt-side.has, .mt-dock-picks button.has { box-shadow: inset 0 0 0 2px #ffd36b, 0 0 22px -8px #ffd36b; }
.mt-odd.won, .mt-side.won, .mt-dock-picks button.won { box-shadow: inset 0 0 0 2px var(--mint), 0 0 26px -6px var(--mint); }
[data-mt-x].up { display: inline-block; animation: mtOddUp .7s var(--ease); }
@keyframes mtOddUp { 30% { transform: scale(1.35); color: #ffe08a; text-shadow: 0 0 14px rgba(255,211,107,.9); } }

.mt-extra { display: grid; gap: 10px; }
.mt-side { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px; text-align: left; }
.mt-side .ico {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 17px;
    background: color-mix(in srgb, var(--c) 22%, rgba(0,0,0,.3));
}
.mt-side .ico.red { color: #ff4867; font-size: 14px; letter-spacing: -.1em; }
.mt-side .nm { display: grid; font-weight: 800; font-size: 12.5px; min-width: 0; line-height: 1.25; }
.mt-side .mine { position: absolute; right: 10px; bottom: -8px; z-index: 2; }
.mt-side b { font: 800 16px/1 var(--f-display); color: color-mix(in srgb, var(--c) 50%, #fff); }

.mt-odd.placed, .mt-side.placed, .mt-dock-picks button.placed, .mt-slot.placed .bet { animation: mtPlaced .35s var(--ease); }
@keyframes mtPlaced { 30% { transform: scale(1.06); filter: brightness(1.25); } }
.mt-fly {
    position: absolute; left: 50%; top: 0; z-index: 5; pointer-events: none; font-style: normal;
    padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap;
    color: #1a1204; background: linear-gradient(180deg, #ffe08a, #f0a62c); box-shadow: 0 6px 16px -6px rgba(0,0,0,.6);
    animation: mtFly .8s var(--ease) forwards;
}
@keyframes mtFly { from { transform: translate(-50%, 4px) scale(.7); opacity: 0; } 25% { opacity: 1; transform: translate(-50%, -18px) scale(1); } to { opacity: 0; transform: translate(-50%, -38px); } }

.mt-ticket {
    position: relative; margin: 18px -4px 0; padding: 12px 14px 10px; border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,236,190,.09), rgba(255,236,190,.04));
    box-shadow: inset 0 0 0 1px rgba(255,214,120,.2);
}

.tk-sum { position: relative; }
.tk-sum::before, .tk-sum::after {
    content: ''; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%;
    background: #0c191a; box-shadow: inset 0 0 0 1px rgba(255,214,120,.2);
}
.tk-sum::before { left: -22px; clip-path: inset(0 0 0 50%); }
.tk-sum::after { right: -22px; clip-path: inset(0 50% 0 0); }
.tk-list { display: grid; gap: 2px; }
.tk-row {
    display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 24px; align-items: center; gap: 9px;
    padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.05); animation: mtRowIn .3s var(--ease);
}
.tk-row:last-child { border-bottom: 0; }
@keyframes mtRowIn { from { opacity: 0; transform: translateX(-8px); } }
.tk-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.tk-row .nm { display: grid; min-width: 0; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-row .nm small { font-size: 10.5px; font-weight: 600; color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
.tk-row b { font: 700 14px/1 var(--f-display); color: var(--gold-text); font-variant-numeric: tabular-nums; }
.tk-row .del {
    width: 24px; height: 24px; border: 0; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 800;
    color: var(--faint); background: rgba(255,255,255,.05); transition: background .15s, color .15s;
}
.tk-row .del:hover { color: var(--pink); background: rgba(255,102,133,.16); }
.tk-row:not(:has(.del)) { grid-template-columns: 8px minmax(0, 1fr) auto; }
.tk-empty { display: flex; align-items: center; gap: 10px; padding: 6px 0 8px; color: var(--dim); font-size: 12px; font-weight: 600; line-height: 1.35; }
.tk-empty b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; background: rgba(255,255,255,.06); animation: mtBounce 1.6s ease-in-out infinite; }
@keyframes mtBounce { 50% { transform: translateY(-3px) rotate(20deg); } }
.tk-sum {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; padding-top: 10px;
    border-top: 1.5px dashed rgba(255,214,120,.25);
}
.tk-sum small { display: block; color: var(--gold-warm); font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tk-sum b { display: block; margin-top: 2px; font: 700 19px/1.1 var(--f-display); color: var(--gold-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-sum .pot { text-align: right; }
.tk-sum .pot b { color: var(--mint); }
.tk-acts { display: flex; justify-content: space-between; gap: 4px; margin-top: 10px; }
.tk-acts button {
    flex: 1; height: 30px; border: 0; border-radius: 9px; cursor: pointer; white-space: nowrap;
    font-size: 11.5px; font-weight: 800; color: var(--text); background: rgba(255,255,255,.06); transition: background .15s, opacity .15s;
}
.tk-acts button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.tk-acts button.clr { color: var(--pink); }
.tk-acts button:disabled { opacity: .35; cursor: default; }

.mt-slip-go {
    width: 100%; min-height: 54px; margin-top: 12px; border-radius: 15px; font-size: 16px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.mt-slip-go small { padding: 3px 9px; border-radius: 8px; font-size: 13px; font-weight: 800; background: rgba(60,30,0,.16); }
.mt-slip-go small:empty { display: none; }
[data-mt-go].ready:not(:disabled) { animation: mtGoReady 1.6s ease-in-out infinite; }
@keyframes mtGoReady { 50% { box-shadow: 0 0 0 3px rgba(255,211,107,.35), 0 10px 30px -6px rgba(255,211,107,.9); } }

.mt-slot { cursor: pointer; }
.mt-slot .bet {
    position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: 3px;
    border-radius: 12px; text-align: center; transition: opacity .25s, background .2s;
}
.mt-slot .bet b { font: 800 20px/1 var(--f-display); color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.mt-slot .bet small { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mt-slot .bet .stk { font-style: normal; font-size: 12px; font-weight: 800; padding: 2px 8px; border-radius: 999px; color: #1b0f00; background: #ffd36b; }
.mt-slot .bet .stk:empty { display: none; }
.mt-slot.bet-on .bet small { display: none; }
.mt-slot.bet-on::before { border-color: #ffd36b; border-style: solid; box-shadow: 0 0 22px -4px rgba(255,211,107,.7); }
.mt-slot.home.bet-on::before { background: rgba(35,64,154,.35); }
.mt-slot.away.bet-on::before { background: color-mix(in srgb, var(--c, #3d8bff) 20%, transparent); }
.mt-slot.has .bet { opacity: 0; pointer-events: none; }
.mt-slip .mine, .mt-extras .mine {
    font-style: normal; font-size: 10.5px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums;
    padding: 2px 8px; border-radius: 999px; color: #1b0f00; background: linear-gradient(180deg, #ffe08a, #f0b43c);
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.6);
}
.mt-stage[data-phase="play"] .mt-slot { cursor: default; }
@media (hover: hover) {
    .mt-stage[data-phase="betting"] .mt-slot:not(.has):hover::before { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); }
}

.mt-dock-picks { display: none; }

.mt-pop { position: fixed; z-index: 60; width: 8px; height: 12px; border-radius: 2px; pointer-events: none; }

.mt-stats {
    padding: 16px;
    background: radial-gradient(100% 60% at 0% 0%, rgba(61,139,255,.14), transparent 60%), radial-gradient(90% 60% at 100% 0%, rgba(255,211,107,.1), transparent 60%), var(--panel);
}
.st-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.st-h b { font-family: var(--f-display); font-size: 15px; }
.st-h small { color: var(--faint); font-size: 11px; font-weight: 700; }
.st-top { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 14px; }
.st-ring { position: relative; width: 112px; height: 112px; }
.st-ring svg { width: 100%; height: 100%; transform: rotate(0); filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.st-ring circle { transition: stroke-dasharray .6s var(--ease), stroke-dashoffset .6s var(--ease); }
.st-ring span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.st-ring span b { font: 800 26px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.st-ring span small { margin-top: 2px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.st-leg { display: grid; gap: 6px; }
.st-leg > div {
    display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px;
    background: color-mix(in srgb, var(--c) 9%, rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 18%, transparent);
}
.st-leg i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.st-leg span { font-size: 12.5px; font-weight: 700; color: var(--dim); }
.st-leg b { font: 700 15px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.st-leg small { min-width: 34px; text-align: right; font-size: 11px; font-weight: 800; color: color-mix(in srgb, var(--c) 70%, #fff); }
.st-best {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 14px 10px 10px;
    border-radius: 14px; background: linear-gradient(160deg, rgba(255,211,107,.16), rgba(255,211,107,.03)); box-shadow: inset 0 0 0 1px rgba(255,211,107,.28);
}
.st-best .ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 19px; background: rgba(255,211,107,.16); }
.st-best .tx { display: grid; min-width: 0; }
.st-best small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-warm); }
.st-best em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-best b { font: 700 19px/1 var(--f-display); color: var(--gold-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.st-streak {
    margin-top: 10px; padding: 8px 12px; border-radius: 11px; font-size: 12.5px; font-weight: 800; text-align: center;
    background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
    color: color-mix(in srgb, var(--c) 60%, #fff);
}

.mt-extras { margin-top: 14px; padding: 14px 16px 16px; }
.mt-extras .mk-h { margin-top: 0; }
.mt-extras .mt-extra { grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-extras .mt-side { padding: 12px 14px 12px 12px; }
.mt-extras .mt-side .ico { width: 38px; height: 38px; font-size: 20px; }
.mt-extras .mt-side { grid-template-columns: 38px minmax(0, 1fr) auto; }
.mt-extras .mt-side .nm { font-size: 13.5px; }
.mt-extras .mt-side b { font-size: 19px; }

.mt-dock-go { flex: 1; }

@media (max-width: 720px) {
    .mt-stage { --cw: 54px; --ch: 75px; height: 310px; }
    .mt-field { bottom: 0; }

    .mt-slot .bet b { font-size: 15px; }
    .mt-slot .bet small { display: none; }
    .mt-slot .bet .stk { font-size: 10.5px; padding: 1px 6px; }
    .mt-slot::before { inset: -3px; border-radius: 10px; }
    .mt-center .tip { display: none; }
    .mt-sky { inset: 0 0 44% 0; background-position: 50% 0; }
    .mt-crowd { height: 56%; }
    .mt-board { top: 8px; padding: 8px 10px 7px; gap: 5px 8px; border-radius: 14px; }
    .mt-board .team { column-gap: 6px; }
    .mt-board .team .crest { width: 30px; height: 34px; }
    .mt-board .team b { font-size: 11px; }
    .mt-board .team small { display: none; }
    .mt-board .team .full { display: none; }
    .mt-board .team .crest, .mt-board .team.away .crest { grid-row: 1; }
    .mt-board .score { font-size: 22px; padding: 3px 8px; }
    .mt-board .led { font-size: 10.5px; min-width: 80%; }
    .mt-slot .lbl { font-size: 9px; }
    .mt-timer { font-size: 32px; }
    .mt-center { top: 44%; }
    .mt-result { min-width: 0; width: calc(100% - 36px); padding: 10px 14px; top: 44%; }
    .mt-result .m { font-size: 28px; }
    .mt-react { font-size: 17px; }
    .mt-lion { height: 40%; left: 36%; }
    .mt-ref { height: 40%; left: 30%; }
    .mt-head .hash { display: none; }
}

html.is-lite .mt-sky, html.is-lite .mt-beam { animation: none; }
html.is-lite .mt-board, html.is-lite .mt-result { backdrop-filter: none; }
@media (prefers-reduced-motion: reduce) {
    .mt-sky, .mt-beam, .mt-stage.shake, .mt-slot.tense .mt-card, .mt-board .score i { animation: none !important; }
}

@media (max-width: 760px) {
    .mt-slip { padding: 12px; }
    .mt-slip { display: none; }
    .mt-extras { margin-top: 10px; padding: 12px; }
    .mt-extras .mk-h small { display: none; }

    .dock > .fish-bar.mt-bet .fb-clear.is-off { opacity: .4; pointer-events: none; }

    .dock .dock-main:has(.mt-dock-picks) { flex-wrap: wrap; row-gap: 8px; }
    .mt-dock-picks { display: flex; gap: 6px; flex: 1 1 100%; min-width: 0; }
    .mt-dock-picks button {
        --c: #9fb3d9; position: relative; flex: 1; min-width: 0; min-height: 46px; border: 0; border-radius: 12px; padding: 4px 2px; color: #fff;
        display: grid; justify-items: center; align-content: center; gap: 1px;
        background: linear-gradient(170deg, color-mix(in srgb, var(--c) 42%, #121a26), color-mix(in srgb, var(--c) 16%, #0c121c));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent);
        touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform .12s, filter .2s;
    }
    .mt-dock-picks button.home { --c: #ffd36b; background: linear-gradient(170deg, #2a4bb0, #13205a); }
    .mt-dock-picks button.away { --c: var(--club, #3d8bff); }
    .mt-dock-picks button:active:not(:disabled) { transform: scale(.96); }
    .mt-dock-picks button:disabled { filter: grayscale(.5) brightness(.7); }
    .mt-dock-picks button span { font-size: 11.5px; font-weight: 800; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mt-dock-picks button b { font: 700 13px/1.1 var(--f-display); color: color-mix(in srgb, var(--c) 45%, #fff); }
    .mt-dock-picks .mine {
        position: absolute; top: -8px; right: 50%; transform: translateX(50%); z-index: 2;
        font-style: normal; font-size: 10.5px; font-weight: 800; white-space: nowrap; padding: 2px 7px; border-radius: 999px;
        color: #1b0f00; background: linear-gradient(180deg, #ffe08a, #f0b43c); box-shadow: 0 4px 10px -4px rgba(0,0,0,.6);
    }
    .dock-main:has(.mt-dock-picks) .btn { min-height: 48px; }
}

@media (max-width: 480px) {
    .mt-extras .mt-extra { grid-template-columns: 1fr; gap: 10px; }
    .st-top { grid-template-columns: 96px 1fr; }
    .st-ring { width: 96px; height: 96px; }
}

@media (min-width: 1101px) and (max-height: 880px) {
    .mt-stage { height: clamp(470px, calc(100vh - 300px), 580px); }

    .mt-center { top: 33%; }
    .mt-extras { margin-top: 12px; padding: 12px 14px 14px; }
}

.mt-field > .brandmark {
    z-index: 4; top: 41.2%; width: 13%; --bm-o: .55;
    transform: translate(-50%, -50%) scaleY(.6);
}