/* SCOUTED Online „Flutlicht“: alles unter .ol, damit es das Hauptspiel nicht berührt (erzeugt aus dem alten online.html plus Online 3.0) */
.ol {color-scheme: dark;
  --night: #0C1B2A; --night2: #16304A; --night3: #1F4163;
  --turf: #1F8A4C; --turf2: #166B3A;
  --flood: #FFCC33; --flood2: #C99A10;
  --chalk: #F6F1E4; --dim: #9FB3C8;
  --flag: #F0484E; --flag2: #B8262C;
  --sky: #3FA7F5; --epic: #9B5CF0;
  --f-big: "Lilita One", "Arial Black", Impact, sans-serif;
  --f-body: Nunito, "Trebuchet MS", system-ui, sans-serif;
  --bounce: cubic-bezier(.2,.8,.2,1.25);}
.ol, .ol * {box-sizing: border-box;}
.ol {height: 100%;}
.ol {margin: 0; background: radial-gradient(120% 60% at 50% -10%, #23466B 0%, var(--night) 55%) fixed, var(--night); color: var(--chalk); font: 700 15px/1.4 var(--f-body); -webkit-tap-highlight-color: transparent;}
.ol button {font: inherit; color: inherit; cursor: pointer;}
.ol button:focus-visible, .ol input:focus-visible {outline: 3px solid var(--flood); outline-offset: 2px;}
.ol {max-width: 480px; margin: 0 auto; min-height: 100%;}
.ol .screen {padding: 12px 16px 120px; display: flex; flex-direction: column; gap: 14px;}
.ol .s-duel, .ol .s-pack, .ol .s-onboard, .ol .s-reveal, .ol .s-found {padding-bottom: 40px;}
.ol h1, .ol h2 {margin: 0; font-weight: 400;}
.ol .btn {border: 0; border-radius: 16px; padding: 12px 18px; background: var(--turf); color: #fff; font: 400 18px/1.1 var(--f-big); letter-spacing: 0.02em; box-shadow: 0 5px 0 var(--turf2), 0 10px 18px -8px rgba(0,0,0,.6); transition: transform .08s, box-shadow .08s; display: grid; justify-items: center; gap: 2px;}
.ol .btn:active:not(:disabled) {transform: translateY(4px); box-shadow: 0 1px 0 var(--turf2);}
.ol .btn small {font: 800 12px var(--f-body); opacity: .85;}
.ol .btn.gold {background: var(--flood); color: #2A1E00; box-shadow: 0 5px 0 var(--flood2), 0 10px 18px -8px rgba(0,0,0,.6);}
.ol .btn.gold:active:not(:disabled) {box-shadow: 0 1px 0 var(--flood2);}
.ol .btn.ghost {background: var(--night2); box-shadow: 0 5px 0 #0A1522;}
.ol .btn.big {font-size: 22px; padding: 14px 20px;}
.ol .btn.huge {font-size: 34px; padding: 16px 20px 14px; background: linear-gradient(180deg, #FFD95C, var(--flood)); color: #2A1E00; box-shadow: 0 7px 0 var(--flood2), 0 16px 28px -10px rgba(255, 204, 51, .5); border-radius: 22px;}
.ol .btn.huge:active:not(:disabled) {box-shadow: 0 2px 0 var(--flood2); transform: translateY(5px);}
.ol .btn.sm {font-size: 14px; padding: 8px 12px; border-radius: 12px;}
.ol .btn.sq {width: 52px; font-size: 26px; padding: 8px;}
.ol .btn:disabled {filter: grayscale(.8) brightness(.7); cursor: default;}
.ol .linkbtn {border: 0; background: none; color: var(--dim); font-weight: 800; padding: 8px; text-decoration: underline; text-underline-offset: 3px;}
.ol .hint {margin: 0; color: var(--dim); font-size: 13px; text-align: center;}
.ol .topbar {position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 10px 16px; background: linear-gradient(180deg, rgba(12,27,42,.97), rgba(12,27,42,.85)); backdrop-filter: blur(6px);}
.ol .res {display: flex; align-items: center; gap: 6px; background: rgba(24,33,27,.06); border-radius: 999px; padding: 4px 12px 4px 4px; font: 400 17px var(--f-big);}
.ol .res.arena {justify-self: center; padding: 4px 14px; font-size: 14px; color: var(--hi); letter-spacing: .04em; text-transform: uppercase;}
.ol .res i {width: 24px; height: 24px; border-radius: 50%; display: block;}
.ol .res.tro i, .ol .rw.tro i {background: radial-gradient(circle at 35% 30%, #FFE68A, var(--flood) 45%, var(--flood2)); clip-path: polygon(15% 5%, 85% 5%, 80% 45%, 60% 60%, 60% 78%, 75% 95%, 25% 95%, 40% 78%, 40% 60%, 20% 45%); border-radius: 0;}
.ol .res.coin i, .ol .rw.coin i {background: radial-gradient(circle at 35% 30%, #FFE68A, var(--flood) 50%, var(--flood2)); box-shadow: inset 0 0 0 3px #E0A91C;}
.ol .bottomnav {position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); max-width: 480px; margin: 0 auto; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, #08131E 70%, rgba(8,19,30,0));}
.ol .bottomnav button {position: relative; border: 0; background: none; display: grid; justify-items: center; gap: 2px; padding: 6px 2px; border-radius: 14px; color: var(--dim);}
.ol .bottomnav button b {font: 400 12px var(--f-big); letter-spacing: .03em;}
.ol .bottomnav button.on {color: var(--chalk); background: var(--night2);}
.ol .bottomnav button.mid {transform: translateY(-14px); background: var(--flood); color: #2A1E00; box-shadow: 0 5px 0 var(--flood2); border-radius: 18px;}
.ol .bottomnav button.mid.on {background: #FFD95C;}
.ol .ni {width: 26px; height: 26px; display: block; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;}
.ol .n-captain {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E");}
.ol .n-squad {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2l4 2 4-2 5 4-3 4-2-1v13H8V9L6 10 3 6z'/%3E%3C/svg%3E");}
.ol .n-train {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l4 18H8zM4 20h16v2H4z'/%3E%3C/svg%3E");}
.ol .n-cards {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='11' height='15' rx='2' transform='rotate(-10 8 12)'/%3E%3Crect x='10' y='4' width='11' height='15' rx='2' transform='rotate(8 15 11)'/%3E%3C/svg%3E");}
.ol .n-home {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 5.2l-3.6 2.6 1.4 4.2h4.4l1.4-4.2zM4.3 9.6l2.2-.6 1.4 4.3-1.6 2.3-2.4-.3A8 8 0 0 1 4.3 9.6zm15.4 0a8 8 0 0 1 .4 5.7l-2.4.3-1.6-2.3 1.4-4.3zM9.4 17.2h5.2l1 2.2a8 8 0 0 1-7.2 0z'/%3E%3C/svg%3E");}
.ol .n-club {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l9 3v6c0 6-4 10-9 11-5-1-9-5-9-11V5z'/%3E%3C/svg%3E");}
.ol .n-league {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v3h3c0 4-2 6-4.5 6.5A6 6 0 0 1 13 15v3h4v3H7v-3h4v-3a6 6 0 0 1-3.5-2.5C5 12 3 10 3 6h3z'/%3E%3C/svg%3E");}
.ol .dot {position: absolute; top: 2px; right: 18%; min-width: 18px; height: 18px; border-radius: 9px; background: var(--flag); color: #fff; font: 400 12px/18px var(--f-big); font-style: normal;}
.ol .s-splash {min-height: 100vh; justify-content: center; align-items: center; text-align: center; position: relative; overflow: hidden;}
.ol .floods {position: absolute; inset: 0; pointer-events: none; overflow: hidden;}
.ol .floods i {position: absolute; top: -40px; width: 180px; height: 420px; background: linear-gradient(180deg, rgba(255,236,160,.45), rgba(255,236,160,0)); filter: blur(10px); transform-origin: top center;}
.ol .floods i:first-child {left: -30px; transform: rotate(-22deg);}
.ol .floods i:last-child {right: -30px; transform: rotate(22deg);}
.ol .logo {display: grid; justify-items: center; line-height: .85; position: relative;}
.ol .logo span {font: 400 64px var(--f-big); letter-spacing: .02em; color: var(--chalk); text-shadow: 0 5px 0 #0A1522, 0 0 30px rgba(255,204,51,.35);}
.ol .logo em {font: 400 26px var(--f-big); font-style: normal; color: var(--night); background: var(--flood); padding: 4px 14px; border-radius: 10px; transform: rotate(-3deg); margin-top: 6px; box-shadow: 0 4px 0 var(--flood2);}
.ol .logo.big {margin: 40px 0 10px;}
.ol .loading {color: var(--dim);}
.ol .coach {display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: end;}
.ol .coach-face {width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--night3); box-shadow: 0 0 0 3px var(--flood);}
.ol .bubble {position: relative; background: var(--chalk); color: #14202C; border-radius: 16px 16px 16px 4px; padding: 10px 12px; display: grid; gap: 6px; justify-items: start;}
.ol .bubble small {font: 400 12px var(--f-big); color: var(--turf2); letter-spacing: .04em; text-transform: uppercase;}
.ol .bubble p {margin: 0; font-weight: 800;}
.ol .steps {display: flex; gap: 6px; justify-content: center;}
.ol .steps i {width: 36px; height: 6px; border-radius: 3px; background: var(--night3);}
.ol .steps i.on {background: var(--flood);}
.ol .flags {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.ol .flag {border: 0; background: var(--night2); border-radius: 14px; padding: 12px 6px; display: grid; gap: 2px; justify-items: center; box-shadow: 0 4px 0 #0A1522;}
.ol .flag span {font-size: 30px;}
.ol .flag b {font-size: 12px;}
.ol .seg {display: grid; grid-template-columns: 1fr 1fr; background: var(--night2); border-radius: 14px; padding: 4px;}
.ol .seg button {border: 0; background: none; border-radius: 10px; padding: 10px; font: 400 16px var(--f-big); color: var(--dim);}
.ol .seg button.on {background: var(--flood); color: #2A1E00;}
.ol .faces {display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;}
.ol .face {border: 0; aspect-ratio: 1; border-radius: 20px; background: radial-gradient(circle at 50% 30%, var(--night3), var(--night2)); padding: 0; overflow: hidden; box-shadow: 0 5px 0 #0A1522; transition: transform .15s var(--bounce);}
.ol .face:hover {transform: scale(1.04);}
.ol .face canvas {width: 100% !important; height: 100% !important;}
.ol .roles {display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.ol .role {border: 0; background: var(--night2); border-radius: 18px; padding: 14px 10px; display: grid; gap: 4px; justify-items: center; box-shadow: 0 5px 0 #0A1522;}
.ol .role b {font: 400 22px var(--f-big);}
.ol .role em {font-style: normal; color: var(--dim); font-size: 13px;}
.ol .pm {width: 70px; height: 90px; border-radius: 8px; background: linear-gradient(var(--turf), var(--turf2)); position: relative; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);}
.ol .pm::before {content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.5);}
.ol .pm::after {content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--flood); box-shadow: 0 0 10px var(--flood); left: 27px;}
.ol .pm-TW::after {top: 72px;}
.ol .pm-ABW::after {top: 56px;}
.ol .pm-MIT::after {top: 37px;}
.ol .pm-ANG::after {top: 10px;}
.ol .namerow {display: grid; grid-template-columns: 1fr auto; gap: 8px;}
.ol .namerow input, .ol .bigin {border: 0; border-radius: 14px; padding: 14px; background: var(--chalk); color: #14202C; font: 400 22px var(--f-big); text-align: center; width: 100%;}
.ol .shout {text-align: center; font: 400 32px/1 var(--f-big); text-shadow: 0 4px 0 #0A1522;}
.ol .sub {margin: -8px 0 0; text-align: center; color: var(--dim);}
.ol .rays {position: fixed; inset: 0; z-index: -1; background: repeating-conic-gradient(from 0deg at 50% 32%, rgba(255,204,51,.08) 0 10deg, transparent 10deg 20deg); animation: ol-spin 30s linear infinite;}
@keyframes ol-spin{ to { transform: rotate(360deg); } }
.ol .spot {display: grid; justify-items: center; position: relative; padding-top: 6px;}
.ol .card {position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 14px; padding: 6px; display: grid; grid-template-rows: auto 1fr auto auto; background: var(--night3); color: #14202C; overflow: hidden; isolation: isolate; box-shadow: 0 6px 0 rgba(0,0,0,.35); border: 3px solid #D9D4C4;}
.ol .card::before {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(170deg, #FFFFFF, #CFC8B4);}
.ol .card.rar-R {border-color: var(--sky);}
.ol .card.rar-R::before {background: linear-gradient(170deg, #D6EEFF, #74B9EE);}
.ol .card.rar-E {border-color: var(--epic); color: #fff;}
.ol .card.rar-E::before {background: linear-gradient(170deg, #B98BFF, #5B2DB0);}
.ol .card.rar-L {border-color: var(--hi); color: #2A1E00; box-shadow: 0 0 18px rgba(255,204,51,.55), 0 6px 0 rgba(0,0,0,.35);}
.ol .card.rar-L::before {background: linear-gradient(170deg, #FFF1B8, #F2B51C 60%, #B7880F);}
.ol .card.rar-L::after {content: ""; position: absolute; inset: -50%; z-index: -1; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.6) 50%, transparent 58%); animation: ol-foil 3s ease-in-out infinite;}
.ol .card.rar-H {border-color: var(--hi); color: #fff;}
.ol .card.rar-H::before {background: linear-gradient(170deg, #2DB36A, #145C33);}
@keyframes ol-foil{ 0%, 50% { transform: translateX(-40%); } 100% { transform: translateX(40%); } }
.ol .c-top {display: flex; align-items: flex-start; justify-content: space-between;}
.ol .c-top b {font: 400 26px/0.9 var(--f-big);}
.ol .c-top span {font: 400 12px var(--f-big); opacity: .8; margin-right: 22px;}
.ol .c-cost {position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; border-radius: 50%; background: #3FA7F5; color: #fff; font: 400 13px/22px var(--f-big); text-align: center; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25);}
.ol .c-face {display: grid; place-items: end center; min-height: 0; overflow: hidden; margin: 0 -6px;}
.ol .c-face {position: relative;}
.ol .c-face canvas {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 100% !important; width: auto !important;}
.ol .c-face.q {place-items: center; font: 400 40px var(--f-big); opacity: .4;}
.ol .c-name {font: 400 15px/1 var(--f-big); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase;}
.ol .c-foot {margin: 4px -6px -6px; padding: 3px 0; text-align: center; font: 400 11px var(--f-big); letter-spacing: .06em; text-transform: uppercase; background: rgba(0,0,0,.18);}
.ol .card.xl {width: 190px;}
.ol .card.xl .c-top b {font-size: 40px;}
.ol .card.xl .c-name {font-size: 22px;}
.ol .card.xl .c-cost {width: 30px; height: 30px; line-height: 30px; font-size: 17px;}
.ol .card.md {width: 118px;}
.ol .card.sm .c-top b {font-size: 17px;}
.ol .card.sm .c-cost {width: 16px; height: 16px; font-size: 10px; line-height: 16px; top: 3px; right: 3px;}
.ol .card.sm .c-top span {margin-right: 14px;}
.ol .card.sm .c-name {font-size: 12px;}
.ol .card.sm .c-top span {font-size: 10px;}
.ol .card.sm .c-foot {font-size: 9px;}
.ol .card.back {background: repeating-linear-gradient(45deg, var(--night3) 0 8px, var(--night2) 8px 16px); border-color: var(--hi);}
.ol .card.back::before, .ol .card.slot::before {display: none;}
.ol .card.slot {background: rgba(24,33,27,.05); border: 3px dashed rgba(255,255,255,.3); display: grid; place-items: center; font: 400 40px var(--f-big); color: rgba(255,255,255,.35);}
.ol .lockedc {filter: grayscale(1) brightness(.5);}
.ol .rise {animation: ol-rise .7s var(--bounce);}
@keyframes ol-rise{ from { transform: translateY(40px) scale(.6); opacity: 0; } }
.ol .pop {animation: ol-popin .5s var(--bounce);}
@keyframes ol-popin{ from { transform: scale(.3) rotate(-8deg); opacity: 0; } }
.ol .work {animation: ol-work .3s ease-in-out 3;}
@keyframes ol-work{ 50% { transform: translateY(-10px) rotate(2deg); } }
.ol .xppop {position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: var(--flood); color: #2A1E00; font: 400 32px var(--f-big); padding: 8px 18px; border-radius: 16px; display: grid; justify-items: center; animation: ol-popin .5s var(--bounce); box-shadow: 0 6px 0 var(--flood2);}
.ol .xppop small {font-size: 14px;}
.ol .xppop b {font-weight: 400; font-size: 20px; color: var(--turf2);}
.ol .xppop.crit {background: var(--epic); color: #fff; box-shadow: 0 6px 0 #5B2DB0;}
.ol .xp {display: grid; gap: 4px;}
.ol .xpbar, .ol .tbar, .ol .qbar, .ol .cbar {height: 12px; border-radius: 6px; background: rgba(24,33,27,.06); overflow: hidden; position: relative;}
.ol .xpbar i, .ol .tbar i, .ol .qbar i, .ol .cbar i {display: block; height: 100%; background: linear-gradient(90deg, var(--turf), #43D17E); border-radius: 6px;}
.ol .xp span {text-align: center; color: var(--dim); font-size: 13px;}
.ol .arena {position: relative; border-radius: 24px; padding: 16px 12px 12px; background: radial-gradient(90% 70% at 50% 0%, var(--sky, #16304A), #0A1522); overflow: hidden; display: grid; gap: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);}
.ol .arena-name {text-align: center; position: relative;}
.ol .arena-name small {color: var(--hi); font: 400 12px var(--f-big); letter-spacing: .1em; text-transform: uppercase;}
.ol .arena-name b {display: block; font: 400 30px/1 var(--f-big); text-shadow: 0 4px 0 #0A1522;}
.ol .pitch-art {height: 60px; margin: 0 -12px; background: linear-gradient(180deg, transparent, rgba(31,138,76,.5)), repeating-linear-gradient(90deg, #1F8A4C 0 30px, #1A7A43 30px 60px); clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);}
.ol .deckrow {display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: -48px; position: relative;}
.ol .troph {display: grid; gap: 4px; text-align: center; font-size: 12px; color: var(--dim);}
.ol .troph .tbar i {background: linear-gradient(90deg, var(--flood2), var(--flood));}
.ol .slots {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.ol .slot {border: 0; border-radius: 16px; background: var(--night2); min-height: 108px; padding: 8px 4px; display: grid; justify-items: center; align-content: center; gap: 4px; text-align: center; box-shadow: 0 4px 0 #0A1522;}
.ol .slot.empty {background: rgba(24,33,27,.05); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); color: var(--dim);}
.ol .slot b {font: 400 12px var(--f-big);}
.ol .slot em, .ol .slot span {font-style: normal; font-size: 11px; color: var(--dim);}
.ol .slot.ready {background: var(--turf); animation: ol-nudge 1.4s ease-in-out infinite;}
.ol .slot.ready em {color: #fff; font-weight: 900;}
.ol .slot.running em {color: var(--hi);}
@keyframes ol-nudge{ 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-4deg); } 90% { transform: rotate(4deg); } }
.ol .mini-pack {width: 34px; height: 44px; border-radius: 6px; display: block; box-shadow: 0 3px 0 rgba(0,0,0,.35);}
.ol .pk-silver .mini-pack, .ol .bigpack.pk-silver {background: linear-gradient(160deg, #F1F4F7, #9CA7B2);}
.ol .pk-gold .mini-pack, .ol .bigpack.pk-gold {background: linear-gradient(160deg, #FFF0B0, #F2B51C 55%, #A87A08);}
.ol .pk-magic .mini-pack, .ol .bigpack.pk-magic {background: linear-gradient(160deg, #D2B4FF, #7B3FE4 55%, #3A1A80);}
.ol .quests {background: var(--night2); border-radius: 18px; padding: 12px; display: grid; gap: 8px;}
.ol .qh {display: flex; justify-content: space-between; align-items: baseline;}
.ol .qh b {font: 400 18px var(--f-big);}
.ol .qh span {font-size: 12px; color: var(--hi);}
.ol .q {display: grid; grid-template-columns: 1fr 90px 34px; gap: 8px; align-items: center; font-size: 13px;}
.ol .q em {font-style: normal;}
.ol .q b {font: 400 13px var(--f-big); text-align: right;}
.ol .q.done em {color: var(--dim); text-decoration: line-through;}
.ol .packopen {display: grid; justify-items: center; gap: 16px; min-height: 60vh; align-content: center;}
.ol .bigpack {position: relative; border: 0; width: 190px; aspect-ratio: 3 / 4.2; border-radius: 22px; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 4px; color: #2A1E00; box-shadow: 0 10px 0 rgba(0,0,0,.35), 0 0 60px rgba(255,204,51,.3); animation: ol-float 2.4s ease-in-out infinite;}
.ol .bigpack.pk-magic {color: #fff;}
.ol .bigpack .pk-logo {font: 400 32px var(--f-big);}
.ol .bigpack b {font: 400 16px var(--f-big); text-transform: uppercase;}
.ol .bigpack em {font-style: normal; font-weight: 900; font-size: 13px; opacity: .8;}
.ol .shine {position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.7) 50%, transparent 58%); animation: ol-foil 2.2s ease-in-out infinite;}
@keyframes ol-float{ 50% { transform: translateY(-8px); } }
.ol .bigpack.shake {animation: ol-shake .8s ease-in-out;}
@keyframes ol-shake{ 20% { transform: rotate(-7deg) scale(1.05); } 40% { transform: rotate(7deg) scale(1.1); } 60% { transform: rotate(-6deg) scale(1.14); } 80% { transform: rotate(5deg) scale(1.18); } }
.ol .bigpack.burst {animation: ol-burst .26s ease-in forwards;}
@keyframes ol-burst{ to { transform: scale(1.6); opacity: 0; filter: brightness(3); } }
.ol .dropcard {display: grid; justify-items: center; gap: 10px;}
.ol .gain {display: grid; justify-items: center; gap: 4px; width: 220px;}
.ol .gain b {font: 400 40px var(--f-big); color: var(--hi); text-shadow: 0 4px 0 #0A1522;}
.ol .gain b.new {color: var(--flag); animation: ol-popin .6s var(--bounce);}
.ol .gain span {font: 400 14px var(--f-big); text-transform: uppercase; letter-spacing: .08em;}
.ol .gain .cbar {width: 100%;}
.ol .gain em {font-style: normal; font-size: 12px; color: var(--dim);}
.ol .packinfo {text-align: center; color: var(--dim);}
.ol .packinfo p {margin: 0;}
.ol .summary {display: grid; justify-items: center; gap: 6px;}
.ol .coinburst {font: 400 56px var(--f-big); color: var(--hi); text-shadow: 0 5px 0 var(--flood2); animation: ol-popin .6s var(--bounce);}
.ol .summary p {margin: 0; color: var(--dim);}
.ol .sumcards {display: grid; grid-template-columns: repeat(5, 64px); gap: 6px; justify-content: center;}
.ol .duelhead {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: rgba(24,33,27,.06); border-radius: 18px; padding: 8px 10px;}
.ol .side {display: flex; align-items: center; gap: 6px; font: 400 15px var(--f-big);}
.ol .side.op {justify-content: flex-end; flex-direction: row-reverse;}
.ol .board {display: grid; grid-template-columns: auto auto auto; gap: 6px; align-items: center; text-align: center; font: 400 36px/1 var(--f-big);}
.ol .board small {grid-column: 1 / -1; font: 800 11px var(--f-body); color: var(--dim);}
.ol .board.bump {animation: ol-popin .4s var(--bounce);}
.ol .vs {display: grid; justify-items: center; gap: 8px; margin: 30px 0; text-align: center;}
.ol .vs b {font: 400 64px var(--f-big); color: var(--hi); text-shadow: 0 5px 0 var(--flood2);}
.ol .vsname {font: 400 24px var(--f-big); display: grid;}
.ol .vsname small {font: 800 12px var(--f-body); color: var(--dim);}
.ol .field {position: relative; border-radius: 22px; padding: 12px; min-height: 330px; display: grid; grid-template-rows: 1fr 1fr; justify-items: center; align-items: center; background: repeating-linear-gradient(180deg, #1F8A4C 0 34px, #1A7A43 34px 68px); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), inset 0 0 40px rgba(0,0,0,.35); overflow: hidden;}
.ol .field::before {content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px solid rgba(255,255,255,.35);}
.ol .field::after {content: ""; position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35);}
.ol .lane {position: relative; z-index: 1;}
.ol .slam {animation: ol-slam .35s var(--bounce);}
@keyframes ol-slam{ from { transform: scale(1.6); opacity: 0; } }
.ol .ball {position: absolute; z-index: 2; width: 22px; height: 22px; border-radius: 50%; left: calc(50% - 11px); top: calc(50% - 11px); background: radial-gradient(circle at 35% 30%, #fff, #ddd 50%, #999); box-shadow: 0 3px 6px rgba(0,0,0,.4); transition: all .5s cubic-bezier(.3,.7,.3,1);}
.ol .ball.to-op-goal {top: -30px;}
.ol .ball.to-op-save {top: 16%; left: 70%;}
.ol .ball.to-me-goal {top: calc(100% + 10px);}
.ol .ball.to-me-save {top: 82%; left: 20%;}
.ol .banner {position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .2s;}
.ol .banner.show {opacity: 1;}
.ol .duelnums {display: grid; grid-template-columns: auto auto auto; gap: 12px; align-items: center; background: rgba(8,19,30,.85); padding: 10px 16px; border-radius: 16px;}
.ol .duelnums b {font: 400 40px var(--f-big);}
.ol .duelnums b.me {color: #43D17E;}
.ol .duelnums b.op {color: var(--flag);}
.ol .duelnums i {font-style: normal; font-size: 12px; color: var(--dim);}
.ol .shoutbig {font: 400 58px var(--f-big); padding: 6px 22px; border-radius: 18px; transform: rotate(-4deg); animation: ol-popin .45s var(--bounce);}
.ol .shoutbig.good {background: var(--flood); color: #2A1E00; box-shadow: 0 6px 0 var(--flood2);}
.ol .shoutbig.bad {background: var(--flag); color: #fff; box-shadow: 0 6px 0 var(--flag2);}
.ol .scenehint {margin: 0; text-align: center; font: 400 18px var(--f-big);}
.ol .stam {display: grid; grid-template-columns: auto repeat(10, 1fr) auto; gap: 3px; align-items: center; font-size: 12px; color: var(--dim);}
.ol .stam i {height: 12px; border-radius: 4px; background: rgba(24,33,27,.05);}
.ol .stam i.on {background: linear-gradient(180deg, #7CC8FF, var(--sky));}
.ol .stam b {font: 400 18px var(--f-big); color: var(--sky);}
.ol .hand {display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;}
.ol .handcard {border: 0; background: none; padding: 0; display: grid; gap: 4px; transition: transform .15s var(--bounce);}
.ol .handcard:hover:not(:disabled) {transform: translateY(-6px);}
.ol .handcard em {font-style: normal; font: 400 11px var(--f-big); text-align: center; color: var(--hi);}
.ol .handcard.tired, .ol .handcard.poor {opacity: .4;}
.ol .handcard.tired em, .ol .handcard.poor em {color: var(--dim);}
.ol .verdict {text-align: center; font: 400 64px/1 var(--f-big); margin-top: 16px; text-shadow: 0 6px 0 rgba(0,0,0,.4); animation: ol-popin .6s var(--bounce);}
.ol .verdict.w {color: var(--hi);}
.ol .verdict.l {color: var(--flag);}
.ol .verdict.d {color: var(--chalk);}
.ol .rewards {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
.ol .rw {background: var(--night2); border-radius: 16px; padding: 10px 14px; display: grid; justify-items: center; gap: 2px; min-width: 96px; box-shadow: 0 4px 0 #0A1522;}
.ol .rw i {width: 30px; height: 30px; display: block; border-radius: 50%;}
.ol .rw b {font: 400 24px var(--f-big);}
.ol .rw span {font-size: 12px; color: var(--dim);}
.ol .newarena {text-align: center; background: var(--flood); color: #2A1E00; border-radius: 14px; padding: 10px; font: 400 20px var(--f-big);}
.ol .title {display: flex; justify-content: space-between; align-items: baseline; font: 400 22px var(--f-big);}
.ol .title small {font: 800 13px var(--f-body); color: var(--dim);}
.ol .deck {display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: rgba(24,33,27,.06); border-radius: 16px; padding: 8px;}
.ol .dk, .ol .cc {border: 0; background: none; padding: 0; display: grid; gap: 4px;}
.ol .swaphint {margin: 0; text-align: center; background: var(--flood); color: #2A1E00; border-radius: 12px; padding: 8px; font-weight: 800;}
.ol .swaphint .linkbtn {color: #2A1E00;}
.ol .coll {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.ol .cc .cbar {height: 16px;}
.ol .cc .cbar span {position: absolute; inset: 0; font: 400 11px/16px var(--f-big); text-align: center; color: #fff;}
.ol .cc .cbar.full i {background: linear-gradient(90deg, var(--flood2), var(--flood));}
.ol .cc.upg .card {animation: ol-nudge 1.6s ease-in-out infinite;}
.ol .cc.indeck .card {box-shadow: 0 0 0 3px var(--turf), 0 6px 0 rgba(0,0,0,.35);}
.ol .sheet {position: fixed; inset: 0; z-index: 40; background: rgba(4,10,16,.75); display: grid; align-items: end; justify-items: center;}
.ol .sheet-in {width: 100%; max-width: 480px; max-height: 90vh; overflow: auto; background: var(--night2); border-radius: 26px 26px 0 0; padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; animation: ol-up .3s var(--bounce);}
@keyframes ol-up{ from { transform: translateY(100%); } }
.ol .sheet-in h2 {font: 400 26px var(--f-big); text-align: center;}
.ol .abil {background: rgba(24,33,27,.06); border-radius: 14px; padding: 10px 12px; display: grid;}
.ol .abil b {font: 400 18px var(--f-big); color: var(--hi);}
.ol .stats {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;}
.ol .stats div {background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px;}
.ol .stats b {display: block; font: 400 26px var(--f-big);}
.ol .stats span {font-size: 11px; color: var(--dim);}
.ol .crest {display: inline-grid; place-items: center; flex: none; clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%);}
.ol .crest b {font: 400 16px var(--f-big); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); margin-top: -12%;}
.ol .clubhero {display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; background: var(--night2); border-radius: 20px; padding: 12px;}
.ol .clubhero h1 {font: 400 24px/1 var(--f-big);}
.ol .clubhero span {font-size: 13px; color: var(--dim);}
.ol .clubhero .big {text-align: center;}
.ol .clubhero .big b {display: block; font: 400 28px var(--f-big); color: var(--hi);}
.ol .clubhero .big small {font-size: 11px; color: var(--dim);}
.ol .clublist {display: grid; gap: 8px;}
.ol .clubrow {display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; background: var(--night2); border-radius: 16px; padding: 10px;}
.ol .clubrow b {display: block; font: 400 17px var(--f-big);}
.ol .clubrow span {font-size: 12px; color: var(--dim);}
.ol .req {display: grid; grid-template-columns: 60px 1fr auto; gap: 10px; align-items: center; background: var(--night2); border-radius: 16px; padding: 8px;}
.ol .req b {display: block; font: 400 16px var(--f-big);}
.ol .req span {font-size: 12px; color: var(--dim);}
.ol .req.mine {border: 2px solid var(--flood);}
.ol .members, .ol .league {display: grid; gap: 6px;}
.ol .members > div, .ol .lrow {display: grid; grid-template-columns: 26px auto 1fr auto; gap: 10px; align-items: center; background: var(--night2); border-radius: 14px; padding: 8px 10px;}
.ol .members > div.me, .ol .lrow.me {box-shadow: inset 0 0 0 2px var(--flood);}
.ol .members i, .ol .lrow i {font: 400 16px var(--f-big); font-style: normal; color: var(--dim); text-align: center;}
.ol .members b, .ol .lrow b {font: 400 15px var(--f-big); display: grid;}
.ol .members b small, .ol .lrow b small {font: 700 12px var(--f-body); color: var(--dim);}
.ol .members em {font-style: normal; font: 400 10px var(--f-big); color: var(--hi); margin-left: 6px;}
.ol .members strong, .ol .lrow strong {font: 400 18px var(--f-big); color: var(--hi);}
.ol .pf {width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--night3); display: block;}
.ol .foundcrest {display: grid; justify-items: center;}
.ol .kits {display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;}
.ol .kitb {border: 0; aspect-ratio: 1; border-radius: 12px; background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); box-shadow: 0 3px 0 rgba(0,0,0,.4);}
.ol .kitb.on {outline: 3px solid var(--chalk); outline-offset: 2px;}
.ol .res.team {gap: 8px; padding: 3px 12px 3px 6px; font-size: 14px; max-width: 150px;}
.ol .res.team b {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .nextmatch {background: radial-gradient(90% 80% at 50% 0%, #23466B, var(--night2)); border-radius: 24px; padding: 14px; display: grid; gap: 12px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);}
.ol .nm-head {display: flex; justify-content: space-between; font: 400 13px var(--f-big); color: var(--hi); letter-spacing: .06em; text-transform: uppercase;}
.ol .nm-teams {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 6px;}
.ol .nm-teams > div {display: grid; justify-items: center; gap: 4px;}
.ol .nm-teams b {font: 400 16px/1.05 var(--f-big);}
.ol .nm-teams small {font-size: 11px; color: var(--dim);}
.ol .nm-teams em {font: 400 30px var(--f-big); font-style: normal; color: var(--hi);}
.ol .nm-compare {display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; text-align: center;}
.ol .nm-compare b {display: block; font: 400 30px/1 var(--f-big);}
.ol .nm-compare span {font-size: 11px; color: var(--dim);}
.ol .favor {background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px; font: 400 15px var(--f-big);}
.ol .favor.good {color: #43D17E;}
.ol .favor.bad {color: var(--flag);}
.ol .nm-fit {display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12px; color: var(--dim);}
.ol .nm-fit b {font: 400 16px var(--f-big); color: var(--chalk);}
.ol .cond {display: block; height: 7px; border-radius: 4px; background: rgba(0,0,0,.45); overflow: hidden; min-width: 34px;}
.ol .cond i {display: block; height: 100%; border-radius: 4px;}
.ol .cond.ok i {background: #43D17E;}
.ol .cond.mid i {background: var(--flood);}
.ol .cond.low i {background: var(--flag);}
.ol .pitch {position: relative; aspect-ratio: 3 / 3.9; border-radius: 22px; background: repeating-linear-gradient(180deg, #1F8A4C 0 9%, #1A7A43 9% 18%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), inset 0 0 40px rgba(0,0,0,.3); overflow: hidden;}
.ol .pitch::before {content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px solid rgba(255,255,255,.3);}
.ol .pitch::after {content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 16%; border: 3px solid rgba(255,255,255,.3); border-bottom: 0;}
.ol .pdot {position: absolute; transform: translate(-50%, -50%); border: 0; background: rgba(8,19,30,.82); border-radius: 14px; width: 66px; padding: 4px 4px 5px; display: grid; justify-items: center; gap: 1px; color: var(--chalk); z-index: 1; box-shadow: 0 4px 0 rgba(0,0,0,.35);}
.ol .pitch.edit .pdot {cursor: pointer;}
.ol .pitch.edit .pdot:hover {box-shadow: 0 0 0 3px var(--flood), 0 4px 0 rgba(0,0,0,.35);}
.ol .pdot .pface {border-radius: 10px; overflow: hidden; background: var(--night3);}
.ol .pdot b {font: 400 16px/1 var(--f-big); color: var(--hi);}
.ol .pdot em {font: 400 10px/1.1 var(--f-big); font-style: normal; text-transform: uppercase; max-width: 60px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .pdot .cond {width: 48px; height: 5px;}
.ol .pdot.off {box-shadow: 0 0 0 2px var(--flag), 0 4px 0 rgba(0,0,0,.35);}
.ol .pdot.empty b {font-size: 22px;}
.ol .pface {display: block; flex: none; border-radius: 50%; overflow: hidden; background: var(--night3);}
.ol .formsel {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;}
.ol .formsel button {border: 0; border-radius: 12px; padding: 10px 4px; background: var(--night2); font: 400 16px var(--f-big); color: var(--dim); box-shadow: 0 4px 0 #0A1522;}
.ol .formsel button.on {background: var(--flood); color: #2A1E00; box-shadow: 0 4px 0 var(--flood2);}
.ol .sqstat {display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center;}
.ol .sqstat > div {background: var(--night2); border-radius: 14px; padding: 8px; text-align: center;}
.ol .sqstat b {display: block; font: 400 24px var(--f-big);}
.ol .sqstat span {font-size: 11px; color: var(--dim);}
.ol .plist {display: grid; gap: 6px;}
.ol .prow {position: relative; border: 0; width: 100%; background: var(--night2); border-radius: 14px; padding: 8px 10px; display: grid; grid-template-columns: auto 1fr auto 52px; gap: 10px; align-items: center; text-align: left; box-shadow: 0 3px 0 #0A1522;}
.ol .prow span {display: grid; min-width: 0;}
.ol .prow b {font: 400 15px var(--f-big); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .prow em {font-style: normal; font-size: 11px; color: var(--dim);}
.ol .prow strong {font: 400 22px var(--f-big); color: var(--hi);}
.ol .prow.sel {box-shadow: 0 0 0 3px var(--flood);}
.ol .prow.upg {box-shadow: 0 0 0 2px var(--flood), 0 3px 0 #0A1522;}
.ol .tgain {position: absolute; right: 70px; top: 6px; font: 400 16px var(--f-big); font-style: normal; color: #43D17E; opacity: 0; transform: translateY(6px); transition: all .3s var(--bounce);}
.ol .tgain.show {opacity: 1; transform: none;}
.ol .seg.three {grid-template-columns: repeat(3, 1fr);}
.ol .scoreboard {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: rgba(24,33,27,.06); border-radius: 18px; padding: 10px; text-align: center;}
.ol .scoreboard .team {display: grid; justify-items: center; gap: 4px;}
.ol .scoreboard .team b {font: 400 13px/1.05 var(--f-big);}
.ol .score {display: grid; justify-items: center;}
.ol .score div {font: 400 44px/1 var(--f-big); display: flex; gap: 6px;}
.ol .score em {font-style: normal; font: 400 16px var(--f-big); color: var(--hi); background: rgba(24,33,27,.06); border-radius: 8px; padding: 2px 10px; margin-top: 4px;}
.ol .score.bump {animation: ol-popin .4s var(--bounce);}
.ol .possbar {position: relative; height: 16px; border-radius: 8px; background: var(--flag); overflow: hidden;}
.ol .possbar i {display: block; height: 100%; background: linear-gradient(90deg, var(--turf), #43D17E); transition: width .4s;}
.ol .possbar span {position: absolute; inset: 0; font: 400 11px/16px var(--f-big); text-align: center; letter-spacing: .08em; text-transform: uppercase;}
.ol .livepitch {position: relative; height: 150px; border-radius: 18px; background: repeating-linear-gradient(90deg, #1F8A4C 0 10%, #1A7A43 10% 20%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.35); overflow: hidden;}
.ol .livepitch::before {content: ""; position: absolute; top: 0; bottom: 0; left: 50%; border-left: 3px solid rgba(255,255,255,.3);}
.ol .livepitch::after {content: ""; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.3);}
.ol .lball {position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px; border-radius: 50%; z-index: 1; background: radial-gradient(circle at 35% 30%, #fff, #ccc 60%, #888); box-shadow: 0 3px 6px rgba(0,0,0,.4); transition: all .45s cubic-bezier(.3,.7,.3,1);}
.ol .goalflash {position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font: 400 52px var(--f-big); animation: ol-popin .45s var(--bounce);}
.ol .goalflash.me {background: rgba(255,204,51,.85); color: #2A1E00;}
.ol .goalflash.op {background: rgba(240,72,78,.85); color: #fff;}
.ol .comm {list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; min-height: 176px;}
.ol .comm li {background: var(--night2); border-radius: 10px; padding: 6px 10px; font-size: 13px; animation: ol-popin .3s var(--bounce);}
.ol .comm li b {font: 400 13px var(--f-big); color: var(--dim); margin-right: 4px;}
.ol .comm li.goal {background: var(--flood); color: #2A1E00; font-weight: 900;}
.ol .comm li.goal b {color: #2A1E00;}
.ol .comm li.opgoal {background: var(--flag); color: #fff; font-weight: 900;}
.ol .comm li.opgoal b {color: #fff;}
.ol .comm li.chance {box-shadow: inset 3px 0 0 #43D17E;}
.ol .comm li.save {box-shadow: inset 3px 0 0 var(--sky);}
.ol .ment {display: grid; gap: 4px;}
.ol .ment > span {font-size: 12px; color: var(--dim);}
.ol .livebtns {display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center;}
.ol .livestr {text-align: right; font-size: 12px; color: var(--dim);}
.ol .livestr b {font: 400 18px var(--f-big); color: var(--chalk);}
.ol .talks {display: grid; gap: 8px;}
.ol .lrow {grid-template-columns: 26px auto 1fr auto auto;}
.ol .lrow span {font-size: 11px; color: var(--dim);}
.ol .lrow.up {box-shadow: inset 4px 0 0 #43D17E;}
.ol .lrow.down {box-shadow: inset 4px 0 0 var(--flag);}
.ol .lrow.me.up, .ol .lrow.me.down {box-shadow: inset 0 0 0 2px var(--flood), inset 5px 0 0 currentColor;}
.ol .confetti {position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden;}
.ol .confetti i {position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: ol-fall 2.2s cubic-bezier(.2,.6,.4,1) forwards;}
@keyframes ol-fall{ to { transform: translateY(110vh) rotate(720deg); } }
.ol #toast {position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; background: var(--chalk); color: #14202C; font-weight: 900; padding: 10px 16px; border-radius: 14px; max-width: 90%; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.35);}
@media (prefers-reduced-motion: reduce){.ol, .ol *, .ol *::before, .ol *::after {animation: none !important; transition: none !important;}}
@media (max-width: 380px){.ol .logo span {font-size: 52px;}
.ol .card.xl {width: 160px;}
.ol .btn.huge {font-size: 28px;}}
.ol .panel {background: var(--night2); border-radius: 20px; padding: 14px; display: grid; gap: 10px;}
.ol .panel h2 {font: 400 20px var(--f-big); letter-spacing: .02em;}
.ol .hint.left {text-align: left;}
.ol .eyebrow {font: 400 12px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--hi);}
.ol .exitb {border: 0; background: rgba(24,33,27,.06); color: var(--chalk); width: 36px; height: 36px; border-radius: 50%; font: 400 24px/1 var(--f-big); display: grid; place-items: center; padding: 0 0 3px;}
.ol .exitb.float {position: absolute; top: 14px; left: 14px; z-index: 30;}
.ol .topbar {grid-template-columns: auto 1fr auto auto;}
.ol .me-res {border: 0; color: var(--chalk); justify-self: start;}
.ol .me-res em {font: 800 11px var(--f-body); font-style: normal; color: var(--hi);}
.ol .pface {display: inline-block; border-radius: 50%; overflow: hidden; background: var(--night3); flex: none; vertical-align: middle;}
.ol .pface canvas {width: 100% !important; height: 100% !important; display: block;}
.ol .res.en i {background: linear-gradient(180deg, #7CF29C, var(--turf)); clip-path: polygon(55% 0, 15% 55%, 45% 55%, 35% 100%, 85% 40%, 55% 40%); border-radius: 0;}
.ol .n-match {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 5.2l-3.6 2.6 1.4 4.2h4.4l1.4-4.2zM4.3 9.6l2.2-.6 1.4 4.3-1.6 2.3-2.4-.3A8 8 0 0 1 4.3 9.6zm15.4 0a8 8 0 0 1 .4 5.7l-2.4.3-1.6-2.3 1.4-4.3zM9.4 17.2h5.2l1 2.2a8 8 0 0 1-7.2 0z'/%3E%3C/svg%3E");}
.ol .n-train {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 10h3v4H2zM19 10h3v4h-3zM5 7h3v10H5zM16 7h3v10h-3zM8 11h8v2H8z'/%3E%3C/svg%3E");}
.ol .n-home {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4.5'/%3E%3Cpath d='M3 22c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E");}
.ol .posgrid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
.ol .posb {border: 0; background: var(--night2); border-radius: 16px; padding: 12px; display: grid; gap: 2px; box-shadow: 0 4px 0 #0A1522; text-align: left;}
.ol .posb b {font: 400 24px var(--f-big); color: var(--hi);}
.ol .posb span {font-size: 13px; color: var(--dim);}
.ol .hero-face {width: 150px; height: 150px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--flood), 0 0 40px rgba(255,204,51,.35);}
.ol .bigin.small {font-size: 17px;}
.ol .herocard {display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: center; background: linear-gradient(160deg, var(--night3), var(--night2)); border-radius: 24px; padding: 14px; box-shadow: inset 0 0 0 2px rgba(255,204,51,.25);}
.ol .hc-face {width: 120px; height: 120px;}
.ol .hc-face .pface {width: 120px !important; height: 120px !important; box-shadow: 0 0 0 4px var(--flood);}
.ol .hc-info {display: grid; gap: 4px; min-width: 0;}
.ol .hc-pos {font: 400 13px var(--f-big); color: var(--hi); letter-spacing: .06em;}
.ol .hc-info h1 {font: 400 26px/1 var(--f-big); overflow-wrap: anywhere;}
.ol .hc-ovr {display: flex; align-items: baseline; gap: 6px;}
.ol .hc-ovr b {font: 400 44px/1 var(--f-big); color: var(--hi); text-shadow: 0 3px 0 rgba(0,0,0,.4);}
.ol .hc-ovr small {color: var(--dim); font-size: 12px;}
.ol .hc-club {display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim);}
.ol .xpbar {position: relative; height: 18px; border-radius: 9px; background: rgba(24,33,27,.06); overflow: hidden;}
.ol .xpbar i {position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--turf), #43D17E); border-radius: 9px;}
.ol .xpbar span {position: relative; display: block; text-align: center; font: 800 11px/18px var(--f-body);}
.ol .ptsbanner {display: grid; justify-items: center; background: var(--flood); color: #2A1E00; border-radius: 16px; padding: 10px; box-shadow: 0 5px 0 var(--flood2); animation: ol-float 2s ease-in-out infinite;}
.ol .ptsbanner b {font: 400 20px var(--f-big);}
.ol .ptsbanner span {font-size: 12px;}
.ol .attrs {display: grid; gap: 8px;}
.ol .attr {display: grid; grid-template-columns: 92px minmax(0, 1fr) 30px auto; gap: 8px; align-items: center; font-size: 13px;}
.ol .attr span {color: var(--dim);}
.ol .attr.key span {color: var(--chalk);}
.ol .abar {height: 10px; border-radius: 5px; background: rgba(24,33,27,.06); overflow: hidden;}
.ol .abar i {display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--sky), #8FD0FF);}
.ol .attr.key .abar i {background: linear-gradient(90deg, var(--flood2), var(--flood));}
.ol .attr b {font: 400 18px var(--f-big); text-align: right;}
.ol .plus {border: 0; width: 30px; height: 30px; border-radius: 10px; background: var(--flood); color: #2A1E00; font: 400 20px/1 var(--f-big); box-shadow: 0 3px 0 var(--flood2);}
.ol .statgrid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;}
.ol .statgrid.three {grid-template-columns: repeat(3, 1fr);}
.ol .statgrid div {background: var(--night2); border-radius: 14px; padding: 10px 4px; text-align: center;}
.ol .statgrid b {display: block; font: 400 24px var(--f-big);}
.ol .statgrid span {font-size: 11px; color: var(--dim);}
.ol .nextcard {border: 0; display: grid; gap: 2px; text-align: left; background: linear-gradient(135deg, var(--turf), var(--turf2)); border-radius: 18px; padding: 14px; box-shadow: 0 5px 0 #0E4426;}
.ol .nextcard b {font: 400 20px/1.1 var(--f-big);}
.ol .nextcard small {color: #CFF5DD;}
.ol .lr, .ol .rrow2, .ol .note, .ol .mem {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;}
.ol .lr b, .ol .rrow2 b, .ol .note b, .ol .mem b {display: block; font-size: 14px;}
.ol .lr small, .ol .rrow2 small, .ol .note small, .ol .mem small {color: var(--dim); font-size: 12px;}
.ol .rrow2 {border: 0; background: rgba(24,33,27,.06); border-radius: 14px; padding: 8px 10px; text-align: left; grid-template-columns: auto minmax(0, 1fr);}
.ol .rate {display: inline-grid; place-items: center; min-width: 44px; height: 34px; border-radius: 10px; font: 400 19px var(--f-big); background: #6B7C8F; color: #fff;}
.ol .rate.top {background: var(--flood); color: #2A1E00;}
.ol .rate.good {background: var(--turf);}
.ol .rate.ok {background: #5C7A99;}
.ol .rate.bad {background: var(--flag);}
.ol .rate.big {min-width: 90px; height: 70px; font-size: 40px; border-radius: 18px;}
.ol .energybox {display: grid; justify-items: center; gap: 6px; background: var(--night2); border-radius: 18px; padding: 12px;}
.ol .edots {display: flex; gap: 6px;}
.ol .edots i {width: 26px; height: 34px; background: rgba(24,33,27,.05); clip-path: polygon(55% 0, 10% 55%, 45% 55%, 35% 100%, 90% 40%, 55% 40%);}
.ol .edots i.on {background: linear-gradient(180deg, #7CF29C, var(--turf));}
.ol .energybox span {font-size: 12px; color: var(--dim);}
.ol .drills {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.ol .drill {position: relative; border: 0; background: var(--night2); border-radius: 16px; padding: 14px 6px 10px; display: grid; justify-items: center; gap: 2px; box-shadow: 0 5px 0 #0A1522;}
.ol .drill b {font: 400 14px var(--f-big);}
.ol .drill span {font: 400 28px var(--f-big); color: var(--sky);}
.ol .drill em {position: absolute; top: 6px; right: 6px; font: 800 9px var(--f-body); font-style: normal; color: #2A1E00; background: var(--flood); padding: 1px 5px; border-radius: 6px;}
.ol .drill:disabled {opacity: .45;}
.ol .s-drill {min-height: 100vh; justify-content: space-between;}
.ol .drillhead {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;}
.ol .drillhead b {font: 400 22px var(--f-big);}
.ol .drillhead span {justify-self: end; color: var(--dim);}
.ol .drillhead .linkbtn {justify-self: start;}
.ol .drillstage {display: grid; gap: 22px; justify-items: center; padding: 30px 0;}
.ol .dval {display: grid; justify-items: center;}
.ol .dval b {font: 400 80px/1 var(--f-big); color: var(--hi); text-shadow: 0 6px 0 rgba(0,0,0,.4);}
.ol .dval small {color: var(--dim);}
.ol .dbar {position: relative; width: 100%; height: 56px; border-radius: 28px; background: repeating-linear-gradient(90deg, #16304A 0 10%, #1A3856 10% 20%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.15); overflow: hidden;}
.ol .dbar .zone {position: absolute; top: 0; bottom: 0; background: rgba(67,209,126,.45);}
.ol .dbar .core {position: absolute; top: 0; bottom: 0; background: rgba(255,204,51,.75);}
.ol .dbar .mark {position: absolute; top: 6px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #D9D4C4); box-shadow: 0 3px 6px rgba(0,0,0,.5);}
.ol .dhits {display: flex; gap: 10px;}
.ol .dhits i {width: 16px; height: 16px; border-radius: 50%; background: rgba(255,255,255,.15);}
.ol .dhits i.perfect {background: var(--flood);}
.ol .dhits i.good {background: #43D17E;}
.ol .dhits i.miss {background: var(--flag);}
.ol .dmsg {margin: 0; min-height: 30px; font: 400 22px var(--f-big); color: var(--dim);}
.ol .dmsg.perfect {color: var(--hi);}
.ol .dmsg.good {color: #43D17E;}
.ol .dmsg.miss {color: var(--flag);}
.ol .tres {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center;}
.ol .tres div {background: rgba(24,33,27,.06); border-radius: 12px; padding: 10px 4px;}
.ol .tres b {display: block; font: 400 22px var(--f-big); color: var(--hi);}
.ol .tres span {font-size: 11px; color: var(--dim);}
.ol .s-friendly {padding-bottom: 40px;}
.ol .fscore {display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; background: var(--night2); border-radius: 20px; padding: 12px;}
.ol .fscore span {display: grid; justify-items: center; gap: 4px; text-align: center;}
.ol .fscore span b {font-size: 12px;}
.ol .fscore strong {font: 400 46px/1 var(--f-big);}
.ol .fmin {position: relative; height: 22px; border-radius: 11px; background: rgba(24,33,27,.06); overflow: hidden;}
.ol .fmin i {position: absolute; inset: 0 auto 0 0; background: var(--turf); transition: width .1s linear;}
.ol .fmin b {position: relative; display: block; text-align: center; font: 400 14px/22px var(--f-big);}
.ol .flog {list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 240px; overflow: auto;}
.ol .flog li {display: grid; grid-template-columns: 34px 1fr; gap: 6px; background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 10px; font-size: 14px;}
.ol .flog li i {font-style: normal; color: var(--dim); font-weight: 900;}
.ol .flog li.goal {background: rgba(31,138,76,.5);}
.ol .flog li.conc {background: rgba(240,72,78,.3);}
.ol .flog li.save {background: rgba(63,167,245,.3);}
.ol .flog li.miss {color: var(--dim);}
.ol .scene {background: linear-gradient(160deg, var(--night3), var(--night2)); border-radius: 22px; padding: 16px; display: grid; gap: 12px; box-shadow: 0 0 0 3px var(--flood), 0 0 40px rgba(255,204,51,.25); animation: ol-popin .3s var(--bounce);}
.ol .scene h2 {font: 400 26px/1.1 var(--f-big);}
.ol .sopts {display: grid; gap: 10px;}
.ol .fend {display: grid; justify-items: center; gap: 10px;}
.ol .fend p {margin: 0; color: var(--dim);}
.ol .matchup {background: linear-gradient(180deg, #23466B, var(--night2)); border-radius: 24px; padding: 16px; display: grid; gap: 12px; justify-items: center; text-align: center;}
.ol .mu {display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; width: 100%;}
.ol .mu div {display: grid; justify-items: center; gap: 6px;}
.ol .mu b {font-size: 14px; line-height: 1.15;}
.ol .mu strong {font: 400 26px var(--f-big); color: var(--dim);}
.ol .matchup.done .mu strong {font-size: 52px; color: var(--chalk);}
.ol .mu strong.slam {animation: ol-slam .5s var(--bounce);}
.ol .countdown {font: 400 20px var(--f-big); color: var(--hi); background: rgba(24,33,27,.06); border-radius: 999px; padding: 6px 16px;}
.ol .focus {display: grid; gap: 8px;}
.ol .focus button {border: 0; text-align: left; background: rgba(24,33,27,.06); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; box-shadow: inset 0 0 0 2px transparent;}
.ol .focus button b {font: 400 17px var(--f-big);}
.ol .focus button span {font-size: 12px; color: var(--dim);}
.ol .focus button.on {box-shadow: inset 0 0 0 3px var(--flood); background: rgba(255,204,51,.12);}
.ol .mev {list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;}
.ol .mev li {display: grid; grid-template-columns: 34px 1fr; column-gap: 6px; background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 10px;}
.ol .mev li i {font-style: normal; font-weight: 900; color: var(--dim); grid-row: span 2;}
.ol .mev li.a {text-align: right; grid-template-columns: 1fr 34px;}
.ol .mev li.a i {grid-column: 2; grid-row: 1 / span 2;}
.ol .mev li.a b, .ol .mev li.a small {grid-column: 1;}
.ol .mev li small {color: var(--dim); font-size: 12px;}
.ol .mev li.me {box-shadow: inset 0 0 0 2px var(--flood);}
.ol .note {background: rgba(24,33,27,.06); border-radius: 14px; padding: 8px 10px;}
.ol .note.me, .ol .mem.me {box-shadow: inset 0 0 0 2px var(--flood);}
.ol .clublist {display: grid; gap: 8px;}
.ol .clubrow2 {display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--night2); border-radius: 16px; padding: 10px 12px;}
.ol .clubrow2 b {display: block; font: 400 17px var(--f-big);}
.ol .clubrow2 small {color: var(--dim); font-size: 12px;}
.ol .clubrow2 em {display: block; font-size: 12px; color: var(--hi); font-style: normal;}
.ol .clubhero em {display: block; font-style: normal; color: var(--hi); font-size: 13px;}
.ol .mem {background: rgba(24,33,27,.06); border-radius: 14px; padding: 8px 10px;}
.ol .mem .ovr {font: 400 24px var(--f-big); color: var(--hi);}
.ol .cap {display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--flood); color: #2A1E00; font: 400 11px var(--f-big); font-style: normal; vertical-align: middle;}
.ol .wall {list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;}
.ol .wall li {display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start;}
.ol .wall li div {background: var(--chalk); color: #14202C; border-radius: 4px 14px 14px 14px; padding: 6px 10px;}
.ol .wall li b {font-size: 12px; color: var(--turf2);}
.ol .wall li p {margin: 0; font-weight: 800;}
.ol .foundcrest {display: grid; place-items: center; padding: 10px;}
.ol .kits {display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;}
.ol .kitb {border: 0; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50%); box-shadow: 0 3px 0 #0A1522;}
.ol .kitb.on {box-shadow: 0 0 0 3px var(--flood);}
.ol .tbl {display: grid; gap: 4px;}
.ol .tbl .th, .ol .tbl .tr {display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px 48px 34px; gap: 6px; align-items: center; padding: 7px 8px; border-radius: 10px; font-size: 13px;}
.ol .tbl .th {color: var(--dim); font-size: 11px;}
.ol .tbl .tr {background: rgba(24,33,27,.06);}
.ol .tbl .tr span {display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.ol .tbl .tr.bot span {color: var(--dim);}
.ol .tbl .tr.me {box-shadow: inset 0 0 0 2px var(--flood);}
.ol .tbl .tr:first-of-type, .ol .tbl .th + .tr {background: rgba(255,204,51,.14);}
.ol .tbl em {font-style: normal; text-align: center; color: var(--dim);}
.ol .tbl b {text-align: right; font: 400 17px var(--f-big);}
.ol .tbl i {font-style: normal; color: var(--dim);}
.ol .mdgroup {display: grid; gap: 4px;}
.ol .res2 {display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; background: rgba(24,33,27,.06); border-radius: 10px; padding: 7px 10px; font-size: 13px;}
.ol .res2 span:last-child {text-align: right;}
.ol .res2 b {font: 400 17px var(--f-big);}
.ol .res2.me {box-shadow: inset 0 0 0 2px var(--flood);}
@keyframes ol-float{ 50% { transform: translateY(-4px); } }
.ol { position: fixed; inset: 0; z-index: 50; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; max-width: none; margin: 0; }
.ol .screen, .ol .topbar { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; }
.ol .bottomnav { z-index: 55; }
.ol .sheet { z-index: 60; } .ol .confetti { z-index: 70; }
.ol .faceed { display: grid; gap: 12px; }
.ol .fe-row { display: grid; gap: 6px; }
.ol .fe-row > span { font: 400 12px var(--f-big); letter-spacing: .08em; text-transform: uppercase; color: var(--hi); }
.ol .fe-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.ol .fe-sw { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); padding: 0; }
.ol .fe-sw.on { box-shadow: 0 0 0 3px var(--night2), 0 0 0 5px var(--flood); }
.ol .fe-sw.dye { border-style: dashed; }
.ol .fe-chip { border: 0; border-radius: 999px; padding: 7px 12px; background: rgba(24,33,27,.06); color: var(--chalk); font-weight: 800; font-size: 13px; }
.ol .fe-chip.on { background: var(--flood); color: #2A1E00; }
.ol .fe-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.ol .fe-style { border: 0; border-radius: 12px; background: rgba(24,33,27,.06); color: var(--chalk); padding: 4px 2px 3px; display: grid; justify-items: center; gap: 1px; }
.ol .fe-style i { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--night3); }
.ol .fe-style small { font-size: 10px; font-weight: 800; }
.ol .fe-style.on { box-shadow: inset 0 0 0 2px var(--flood); }
.ol .crest2 { display: inline-block; flex: none; vertical-align: middle; }
/* Sterne */
.ol .stars { margin-left: 6px; color: var(--hi); font: 400 18px var(--f-big); letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.ol .stars em { font-style: normal; font-size: 13px; margin-left: 2px; }
.ol .bigstar { margin: 0; text-align: center; font: 400 54px var(--f-big); color: var(--hi); text-shadow: 0 4px 0 var(--flood2); animation: ol-popin .5s var(--bounce); }
/* Tagesaufgaben */
.ol .quests2 { display: grid; gap: 8px; }
.ol .qrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: rgba(24,33,27,.06); border-radius: 14px; padding: 10px 12px; }
.ol .qrow b { display: block; font-size: 13px; margin-bottom: 5px; }
.ol .qrow > span { font: 400 15px var(--f-big); color: var(--dim); }
.ol .qbar { height: 8px; border-radius: 4px; background: rgba(24,33,27,.06); overflow: hidden; }
.ol .qbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--turf), #43D17E); }
.ol .qrow.done { box-shadow: inset 0 0 0 2px var(--flood); }
.ol .qrow.claimed { opacity: .5; } .ol .qrow.claimed > span { color: #43D17E; }
/* Bolzplatz */
.ol .s-bolz { min-height: 100vh; }
.ol .bres { display: flex; gap: 8px; justify-content: center; }
.ol .bres i { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.15); }
.ol .bres i.goal { background: #43D17E; } .ol .bres i.miss { background: var(--flag); }
.ol .goalbox { position: relative; height: 230px; border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, #23466B 0 55%, var(--turf) 55% 100%); }
.ol .net { position: absolute; left: 8%; right: 8%; top: 16%; height: 52%; border: 6px solid #F6F1E4; border-bottom: 0; border-radius: 4px 4px 0 0; background: repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.18) 10px 11px), repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.18) 10px 11px); }
.ol .keeper { position: absolute; left: 50%; top: 34%; width: 46px; height: 70px; margin-left: -23px; transition: left .45s cubic-bezier(.2,.8,.2,1), transform .45s; }
.ol .keeper span { position: absolute; inset: 0; border-radius: 22px 22px 8px 8px; background: linear-gradient(180deg, var(--flood) 0 30%, #F0484E 30% 100%); box-shadow: 0 0 0 3px #1B1A17; }
.ol .keeper::before { content: ""; position: absolute; left: 11px; top: -22px; width: 24px; height: 24px; border-radius: 50%; background: #C98F63; box-shadow: 0 0 0 3px #1B1A17; }
.ol .keeper.dl { transform: rotate(-60deg); } .ol .keeper.dr { transform: rotate(60deg); } .ol .keeper.dm { transform: translateY(-14px); }
.ol .aim { position: absolute; top: 18%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; border: 3px solid var(--flood); box-shadow: 0 0 12px var(--flood); }
.ol .aim::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--flood); }
.ol .ball2 { position: absolute; left: 50%; bottom: 6%; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #D9D4C4 70%); box-shadow: 0 0 0 3px #1B1A17; transition: left .6s cubic-bezier(.2,.7,.3,1), bottom .6s cubic-bezier(.2,.7,.3,1), transform .6s; }
.ol .powerbar { position: relative; height: 30px; border-radius: 15px; background: linear-gradient(90deg, #5C7A99 0 45%, #43D17E 45% 80%, var(--flood) 80% 92%, var(--flag) 92%); box-shadow: inset 0 0 0 3px rgba(0,0,0,.35); }
.ol .powerbar.off { opacity: .3; }
.ol .pmark { position: absolute; top: -6px; width: 8px; height: 42px; margin-left: -4px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 2px #1B1A17; }
.ol .bolzteaser { box-shadow: inset 0 0 0 2px rgba(255,204,51,.35); }
/* Skill-Duell */
.ol .n-duel { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='7' cy='15' r='5'/%3E%3Ccircle cx='17' cy='9' r='5' opacity='.6'/%3E%3Ccircle cx='15' cy='18' r='2.5'/%3E%3C/svg%3E"); }
.ol .duelhero { display: grid; gap: 12px; justify-items: center; text-align: center; background: radial-gradient(120% 80% at 50% 0%, #23466B, var(--night2)); border-radius: 26px; padding: 18px 14px; }
.ol .duelhero h1 { font: 400 40px/1 var(--f-big); text-shadow: 0 4px 0 rgba(0,0,0,.4); }
.ol .duelhero .xpbar { width: 100%; }
.ol .divbadge { display: grid; justify-items: center; padding: 12px 22px; border-radius: 18px; background: rgba(24,33,27,.06); box-shadow: inset 0 0 0 3px var(--dc); }
.ol .divbadge b { font: 400 30px var(--f-big); color: var(--dc); } .ol .divbadge span { font-size: 13px; color: var(--chalk); }
.ol .divs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ol .divs div { display: grid; justify-items: center; padding: 8px 2px; border-radius: 12px; background: rgba(24,33,27,.06); border-bottom: 4px solid var(--dc); }
.ol .divs div.on { box-shadow: inset 0 0 0 2px var(--dc); }
.ol .divs b { font: 400 13px var(--f-big); color: var(--dc); } .ol .divs span { font-size: 10px; color: var(--dim); }
.ol .s-duel { padding-bottom: 30px; }
.ol .dscore { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--night2); border-radius: 18px; padding: 8px 12px; }
.ol .dscore div { display: flex; align-items: center; gap: 8px; } .ol .dscore div:last-child { justify-content: flex-end; }
.ol .dscore strong { font: 400 34px var(--f-big); }
.ol .oppface { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: inline-block; }
.ol .dturn { margin: 0; text-align: center; font: 400 20px var(--f-big); color: var(--hi); }
.ol .flickwrap { display: grid; justify-items: center; }
.ol .flickwrap canvas { border-radius: 18px; box-shadow: 0 0 0 4px #F6F1E4, 0 12px 30px rgba(0,0,0,.5); touch-action: none; }
/* Ausrüstung */
.ol .gear { display: grid; gap: 8px; }
.ol .gitem { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: rgba(24,33,27,.06); border-radius: 14px; padding: 8px 10px; }
.ol .gi { font-size: 26px; text-align: center; }
.ol .gitem b { display: block; font-size: 14px; } .ol .gitem small { color: var(--dim); font-size: 12px; }
.ol .gmax { font: 400 15px var(--f-big); color: var(--hi); }
.ol .abar { position: relative; }
.ol .abar i.gb { position: absolute; top: 0; bottom: 0; background: #43D17E; border-radius: 0 5px 5px 0; }
.ol .dstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; }
.ol .dstats div { display: grid; justify-items: center; background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 2px; }
.ol .dstats b { font: 400 22px var(--f-big); color: var(--hi); } .ol .dstats span { font-size: 12px; font-weight: 900; } .ol .dstats small { font-size: 10px; color: var(--dim); }
/* Taktik-Duell */
.ol .trounds { display: flex; justify-content: center; gap: 6px; }
.ol .trounds i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 400 13px var(--f-big); font-style: normal; background: rgba(24,33,27,.06); color: var(--dim); }
.ol .trounds i.now { box-shadow: inset 0 0 0 2px var(--flood); color: var(--hi); }
.ol .trounds i.goal { background: var(--turf); color: #fff; } .ol .trounds i.conc { background: var(--flag); color: #fff; } .ol .trounds i.none { background: #3B5878; color: #fff; }
.ol .scout { margin: 0; text-align: center; font-size: 13px; color: var(--dim); } .ol .scout b { color: var(--hi); }
.ol .tq { text-align: center; font: 400 22px var(--f-big); }
.ol .thand { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ol .thand .tcard:last-child { grid-column: 1 / -1; }
.ol .tcard { position: relative; border: 0; display: grid; justify-items: center; gap: 2px; padding: 12px 8px 10px; border-radius: 18px; background: linear-gradient(170deg, var(--night3), var(--night2)); color: var(--chalk); box-shadow: 0 5px 0 #0A1522, inset 0 0 0 2px rgba(255,255,255,.08); text-align: center; }
.ol .tcard span { font-size: 28px; line-height: 1; }
.ol .tcard b { font: 400 18px var(--f-big); }
.ol .tcard small { font-size: 11px; color: var(--dim); line-height: 1.25; }
.ol .tcard em { position: absolute; top: 8px; right: 10px; font: 400 13px var(--f-big); font-style: normal; color: var(--hi); }
.ol .tcard:disabled { opacity: .3; }
.ol .tcard:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #0A1522; }
.ol .treveal { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.ol .treveal strong { font: 400 22px var(--f-big); color: var(--dim); }
.ol .tcard.big { padding: 18px 8px; animation: ol-popin .35s var(--bounce); }
.ol .tcard.big.flip { animation-delay: .25s; animation-fill-mode: both; }
.ol .tcard.big span { font-size: 40px; }
.ol .tcard.won { box-shadow: 0 0 0 3px var(--flood), 0 0 30px rgba(255,204,51,.4); }
.ol .tcard.lost { opacity: .55; }
.ol .tout { margin: 0; text-align: center; font: 400 20px/1.2 var(--f-big); }
.ol .tmatrix { display: grid; gap: 6px; }
.ol .tmatrix div { display: grid; grid-template-columns: 34px 110px 1fr; gap: 8px; align-items: center; background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 10px; }
.ol .tmatrix span { font-size: 22px; } .ol .tmatrix b { font: 400 15px var(--f-big); } .ol .tmatrix small { font-size: 12px; color: var(--dim); }
.ol .s-duel .drillstage { padding: 14px 0; gap: 16px; }
/* Gems */
.ol .res.gem { border: 0; color: var(--chalk); padding: 4px 10px 4px 6px; }
.ol .res.gem span { font-size: 16px; }
.ol .topbar { grid-template-columns: auto 1fr auto auto auto; gap: 6px; }
.ol .btn.gem { background: linear-gradient(180deg, #6FD3FF, #2F8FD8); color: #06233A; box-shadow: 0 5px 0 #1D5F94, 0 10px 18px -8px rgba(0,0,0,.6); }
.ol .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ol .gemlist { display: grid; gap: 6px; }
.ol .gemlist div { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 10px; }
.ol .gemlist b { font: 400 18px var(--f-big); color: #6FD3FF; }
.ol .intens { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; background: linear-gradient(90deg, rgba(47,143,216,.3), rgba(0,0,0,.2)); border-radius: 16px; padding: 10px 12px; box-shadow: inset 0 0 0 2px rgba(111,211,255,.35); }
.ol .intens input { width: 22px; height: 22px; accent-color: #2F8FD8; }
.ol .intens b { display: block; font: 400 16px var(--f-big); } .ol .intens small { font-size: 12px; color: var(--dim); }
/* Taktik-Duell: Brett */
.ol .tmsg { margin: 0; min-height: 38px; text-align: center; font-size: 13px; color: var(--chalk); }
.ol .tboard { position: relative; width: 100%; aspect-ratio: 5 / 6.6; border-radius: 18px; overflow: visible; background: repeating-linear-gradient(180deg, #23944F 0 11.11%, #1F8A4C 11.11% 22.22%); box-shadow: 0 0 0 4px #F6F1E4, 0 12px 30px rgba(0,0,0,.5); margin-top: 14px; }
.ol .tmid { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid rgba(255,255,255,.45); }
.ol .tgoal { position: absolute; left: 30%; width: 40%; height: 10px; background: #F6F1E4; border-radius: 4px; }
.ol .tgoal.top { top: -12px; } .ol .tgoal.bot { bottom: -12px; }
.ol .tp { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 3px solid var(--k2); background: var(--k1); box-shadow: 0 0 0 2px #1B1A17, 0 4px 8px rgba(0,0,0,.35); padding: 0; overflow: hidden; transition: left .32s cubic-bezier(.2,.8,.2,1), top .32s cubic-bezier(.2,.8,.2,1); font: 400 12px var(--f-big); color: var(--k2); display: grid; place-items: center; z-index: 2; }
.ol .tp canvas { width: 100% !important; height: 100% !important; }
.ol .tp.gk { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.ol .tp.ball::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #D9D4C4); box-shadow: 0 0 0 2px #1B1A17; }
.ol .tp.ball { overflow: visible; box-shadow: 0 0 0 2px #1B1A17, 0 0 0 5px rgba(255,204,51,.8), 0 4px 8px rgba(0,0,0,.35); }
.ol .tp.sel { box-shadow: 0 0 0 2px #1B1A17, 0 0 0 5px #6FD3FF; }
.ol .tp.shoot { transform: translateY(-8px) scale(1.12); transition: transform .3s; }
.ol .tbadge { position: absolute; z-index: 3; transform: translate(-50%, -50%); border: 0; border-radius: 999px; padding: 3px 7px; font: 400 13px var(--f-big); color: #1B1A17; box-shadow: 0 2px 0 rgba(0,0,0,.4); white-space: nowrap; }
.ol .tbadge.pass, .ol .tbadge.shot { transform: translate(-50%, -150%); }
.ol .tbadge.hi { background: #7CF29C; } .ol .tbadge.mid { background: var(--flood); } .ol .tbadge.lo { background: #F59B9E; }
.ol .tbadge.drib { opacity: .92; font-size: 11px; padding: 2px 5px; }
.ol .tbadge.shot { font-size: 15px; padding: 5px 12px; }
.ol .tbadge.move { background: #6FD3FF; width: 30px; height: 30px; padding: 0; font-size: 16px; }
.ol .tbadge.warn { background: var(--flag); color: #fff; pointer-events: none; animation: ol-float 1s ease-in-out infinite; }
.ol .tsteps { display: flex; justify-content: center; gap: 5px; margin-top: 14px; }
.ol .tsteps i { width: 22px; height: 6px; border-radius: 3px; background: var(--flood); }
.ol .tsteps i.used { background: rgba(255,255,255,.15); }
.ol .trounds i.m { } .ol .trounds i.o { border-radius: 8px; }
.ol .thow { display: grid; gap: 6px; width: 100%; text-align: left; }
.ol .thow div { background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 10px; display: grid; }
.ol .thow b { font: 400 15px var(--f-big); color: var(--hi); } .ol .thow span { font-size: 12px; color: var(--chalk); }
.ol .tlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.ol .tbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 18px; }
.ol .tbar button { border: 0; border-radius: 14px; padding: 10px 2px; background: var(--night2); color: var(--chalk); box-shadow: 0 4px 0 #0A1522; display: grid; justify-items: center; gap: 1px; }
.ol .tbar button b { font: 400 14px var(--f-big); } .ol .tbar button small { font: 400 13px var(--f-big); color: var(--hi); }
.ol .tbar button.on { background: var(--flood); color: #2A1E00; box-shadow: 0 4px 0 var(--flood2); }
.ol .tbar button:disabled { opacity: .4; }
.ol .tbar button[data-m="shot"]:not(:disabled) { background: var(--turf); box-shadow: 0 4px 0 var(--turf2); }
.ol .tplan { grid-column: 1 / -1; text-align: center; background: rgba(240,72,78,.2); border-radius: 12px; padding: 10px; font-size: 14px; box-shadow: inset 0 0 0 2px var(--flag); }
.ol .tmsg b { color: var(--hi); }
.ol .tbadge.move { width: 24px; height: 24px; font-size: 18px; line-height: 1; }
.ol .s-duel .dscore { padding: 4px 10px; } .ol .s-duel .dscore strong { font-size: 28px; }
.ol .s-duel .trounds i { width: 24px; height: 24px; font-size: 11px; }
.ol .s-duel .tmsg { min-height: 32px; font-size: 12px; }
.ol .s-duel.screen { gap: 8px; padding-top: 8px; }
.ol .tp { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.ol .tp.opp { box-shadow: 0 0 0 2px #1B1A17, inset 0 0 0 3px rgba(0,0,0,.25), 0 4px 8px rgba(0,0,0,.35); }
.ol .tbar { grid-template-columns: 1fr; margin-top: 0; }
.ol .tshot { border: 0; border-radius: 16px; padding: 12px; font: 400 20px var(--f-big); color: #1B1A17; box-shadow: 0 5px 0 rgba(0,0,0,.4); animation: ol-popin .3s var(--bounce); }
.ol .tshot.hi { background: #7CF29C; } .ol .tshot.mid { background: var(--flood); } .ol .tshot.lo { background: #F59B9E; }
.ol .tinfo { text-align: center; font-size: 12px; color: var(--dim); background: rgba(24,33,27,.06); border-radius: 12px; padding: 10px; }
.ol .tbadge.drib { display: grid; justify-items: center; line-height: 1; padding: 3px 5px; font-size: 15px; opacity: .9; }
.ol .tbadge.drib small { font-size: 9px; }
.ol .tbadge.block { background: #6FD3FF; font-size: 16px; padding: 4px 6px; box-shadow: 0 0 0 3px #fff, 0 2px 0 rgba(0,0,0,.4); animation: ol-float 1.2s ease-in-out infinite; }
.ol .tmsg { font-size: 14px; }
/* ---- Agentur ---- */
.ol .bottomnav.four { grid-template-columns: repeat(4, 1fr); }
.ol .n-market { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='14' y='3' width='6' height='9' rx='1.5' transform='rotate(40 17 7.5)'/%3E%3Crect x='3' y='13' width='14' height='4' rx='2' transform='rotate(-40 10 15)'/%3E%3Crect x='3' y='19' width='12' height='3' rx='1.5'/%3E%3C/svg%3E"); }
.ol .n-rank { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='12' width='6' height='10' rx='1'/%3E%3Crect x='9' y='5' width='6' height='17' rx='1'/%3E%3Crect x='16' y='9' width='6' height='13' rx='1'/%3E%3C/svg%3E"); }
.ol .n-home { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8h18v13H3zM8 4h8v4H8z'/%3E%3C/svg%3E"); }
.ol .aghero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; background: linear-gradient(160deg, var(--night3), var(--night2)); border-radius: 24px; padding: 14px; box-shadow: inset 0 0 0 2px rgba(255,204,51,.25); }
.ol .aghero h1 { font: 400 38px/1 var(--f-big); color: var(--hi); }
.ol .aghero small { font-size: 12px; font-weight: 800; } .ol .aghero small.up { color: #43D17E; } .ol .aghero small.down { color: var(--flag); }
.ol .aghero .xpbar { margin-top: 6px; }
.ol .panel h2 small { font: 800 13px var(--f-body); color: var(--dim); margin-left: 6px; }
.ol .clist { display: grid; gap: 8px; }
.ol .ccard { border: 0; width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; background: rgba(24,33,27,.06); color: var(--chalk); border-radius: 16px; padding: 8px 10px; }
.ol .ccard.ending { box-shadow: inset 0 0 0 2px var(--flag); }
.ol .cc-face { width: 56px; height: 56px; border-radius: 14px; overflow: hidden; background: var(--night3); display: inline-block; flex: none; }
.ol .cc-face canvas { width: 100% !important; height: 100% !important; display: block; }
.ol .cc-face.big { width: 96px; height: 96px; border-radius: 20px; }
.ol .eve-row .cc-face { width: 40px; height: 40px; border-radius: 10px; }
.ol .cc-mid { min-width: 0; } .ol .cc-mid b { display: block; font: 400 17px/1.1 var(--f-big); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol .cc-mid small { font-size: 12px; color: var(--dim); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol .cc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ol .cc-tags span { font-size: 10px; font-weight: 900; padding: 2px 6px; border-radius: 6px; background: rgba(24,33,27,.05); }
.ol .cc-tags .boost { background: rgba(124,242,156,.25); color: #7CF29C; } .ol .cc-tags .tgt { background: var(--flood); color: #2A1E00; }
.ol .cc-tags .pot { background: rgba(63,167,245,.25); color: #8FD0FF; } .ol .cc-tags .bad { background: rgba(240,72,78,.25); color: #F59B9E; }
.ol .cc-r { display: grid; justify-items: end; line-height: 1.1; } .ol .cc-r b { font: 400 26px var(--f-big); color: var(--hi); }
.ol .cc-r em { font-style: normal; font-size: 12px; font-weight: 900; } .ol .cc-r em.up { color: #43D17E; } .ol .cc-r em.down { color: var(--flag); }
.ol .cc-r small { font-size: 11px; color: var(--dim); }
.ol .cs-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.ol .cs-top h2 { text-align: left; font-size: 22px; }
.ol .cs-contract { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.ol .cs-contract div { background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 4px; } .ol .cs-contract b { display: block; font: 400 20px var(--f-big); } .ol .cs-contract span { font-size: 11px; color: var(--dim); }
.ol .cs-hist { display: grid; gap: 4px; max-height: 190px; overflow: auto; }
.ol .cs-hist div { display: grid; grid-template-columns: 28px 30px 1fr; gap: 6px; align-items: center; font-size: 12px; background: rgba(24,33,27,.06); border-radius: 8px; padding: 5px 8px; }
.ol .cs-hist i { font-style: normal; color: var(--dim); } .ol .cs-hist b { font: 400 16px var(--f-big); color: var(--hi); }
.ol .mhead h1 { font: 400 26px/1.05 var(--f-big); } .ol .mhead small { font-size: 12px; color: var(--dim); }
.ol .mbudget { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ol .mbudget span { background: var(--night2); border-radius: 12px; padding: 8px; font-size: 11px; color: var(--dim); text-align: center; } .ol .mbudget b { display: block; font: 400 17px var(--f-big); color: var(--chalk); }
.ol .lots { display: grid; gap: 10px; }
.ol .lot { background: var(--night2); border-radius: 18px; padding: 10px; display: grid; gap: 8px; }
.ol .lot.has { box-shadow: inset 0 0 0 2px var(--flood); }
.ol .lot-top { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ol .lot-top .cc-face { width: 58px; height: 58px; }
.ol .lot-top b { display: block; font: 400 17px/1.1 var(--f-big); } .ol .lot-top small { font-size: 12px; color: var(--dim); }
.ol .lot-mv { display: grid; justify-items: end; } .ol .lot-mv small { font-size: 10px; color: var(--dim); } .ol .lot-mv b { font: 400 17px var(--f-big); color: var(--hi); }
.ol .lot-bid { display: grid; grid-template-columns: 40px 1fr 40px auto; gap: 6px; align-items: center; }
.ol .lot-bid .btn.sm { padding: 8px 0; } .ol .lot-bid .btn.gold { padding: 8px 10px; font-size: 13px; }
.ol .bidval { display: grid; justify-items: center; line-height: 1.1; } .ol .bidval b { font: 400 20px var(--f-big); } .ol .bidval small { font-size: 10px; color: var(--dim); }
.ol .tgtbox { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: linear-gradient(160deg, var(--night3), var(--night2)); border-radius: 20px; padding: 12px; }
.ol .tgtbox .cc-face { width: 60px; height: 60px; } .ol .tgtbox b { display: block; font: 400 20px var(--f-big); } .ol .tgtbox small { font-size: 11px; color: var(--dim); }
.ol .boostbar { display: flex; gap: 4px; margin: 4px 0; } .ol .boostbar i { width: 22px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.15); } .ol .boostbar i.on { background: #7CF29C; }
.ol .mgs { display: grid; gap: 10px; }
.ol .mgcard { border: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; color: var(--chalk); background: var(--night2); border-radius: 20px; padding: 14px; box-shadow: 0 5px 0 #0A1522; }
.ol .mg-ic { font-size: 36px; text-align: center; } .ol .mgcard b { display: block; font: 400 20px var(--f-big); } .ol .mgcard small { font-size: 12px; color: var(--dim); }
.ol .mgcard em { font: 400 15px var(--f-big); font-style: normal; background: var(--flood); color: #2A1E00; padding: 8px 12px; border-radius: 12px; }
.ol .mgcard .xpbar { height: 8px; margin-top: 6px; }
.ol .ranks { display: grid; gap: 6px; }
.ol .rk { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; gap: 8px; align-items: center; background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 10px; }
.ol .rk.me { box-shadow: inset 0 0 0 2px var(--flood); } .ol .rk.bot { opacity: .85; }
.ol .rk i { font: 400 15px var(--f-big); font-style: normal; color: var(--dim); } .ol .rk b { display: block; font-size: 14px; } .ol .rk small { font-size: 11px; color: var(--dim); } .ol .rk strong { font: 400 17px var(--f-big); color: var(--hi); }
.ol .rk-b { font-size: 20px; text-align: center; }
.ol .spark { display: flex; align-items: flex-end; gap: 4px; height: 90px; } .ol .spark i { flex: 1; background: linear-gradient(180deg, var(--flood), var(--flood2)); border-radius: 4px 4px 0 0; }
.ol .evehead { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 20px 0 6px; } .ol .evehead h1 { font: 400 54px/1 var(--f-big); color: var(--hi); text-shadow: 0 5px 0 rgba(0,0,0,.4); animation: ol-popin .5s var(--bounce); } .ol .evehead small { color: var(--dim); }
.ol .s-evening { padding-bottom: 40px; }
.ol .eve-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: rgba(24,33,27,.06); border-radius: 12px; padding: 8px 10px; }
.ol .eve-row b { display: block; font-size: 14px; } .ol .eve-row small { font-size: 12px; color: var(--dim); }
/* Angebote */
.ol .decs { box-shadow: inset 0 0 0 2px var(--flood); }
.ol .decrow { border: 0; width: 100%; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; color: var(--chalk); background: rgba(255,204,51,.12); border-radius: 14px; padding: 8px 10px; }
.ol .decrow .cc-face { width: 40px; height: 40px; border-radius: 10px; }
.ol .decrow b { display: block; font-size: 14px; } .ol .decrow small { font-size: 11px; color: var(--dim); }
.ol .decrow em { font: 400 18px var(--f-big); font-style: normal; color: #2A1E00; background: var(--flood); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; animation: ol-float 1.2s ease-in-out infinite; }
.ol .dopts2 { display: grid; gap: 8px; }
.ol .nextcard.tick { background: var(--night2); box-shadow: 0 5px 0 #0A1522; }
.ol .row2 .nextcard { min-width: 0; }
/* Live-Auktion */
.ol .livebanner { border: 0; display: grid; gap: 2px; text-align: left; padding: 14px 16px; border-radius: 20px; color: #fff; background: linear-gradient(120deg, #F0484E, #9B2A6E); box-shadow: 0 5px 0 #6B1A3E, 0 0 30px rgba(240,72,78,.35); }
.ol .livebanner b { font: 400 22px var(--f-big); } .ol .livebanner span { font-size: 12px; opacity: .9; }
.ol .livebanner:disabled { filter: grayscale(.8); opacity: .6; }
.ol .s-live { padding-bottom: 40px; }
.ol .lrivals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ol .lr { position: relative; display: grid; justify-items: center; background: var(--night2); border-radius: 12px; padding: 6px 4px; }
.ol .lr b { font: 400 14px var(--f-big); } .ol .lr small { font-size: 11px; color: var(--dim); }
.ol .lr .say { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--flood); color: #2A1E00; font: 400 13px var(--f-big); font-style: normal; padding: 2px 8px; border-radius: 8px; opacity: 0; white-space: nowrap; }
.ol .lr .say.show { animation: ol-say 1.4s ease forwards; }
@keyframes ol-say { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; } }
.ol .lot.big .lot-top { grid-template-columns: 72px minmax(0, 1fr) auto; } .ol .lot.big .cc-face { width: 72px; height: 72px; }
.ol .lprice { display: grid; justify-items: center; } .ol .lprice b { font: 400 56px/1 var(--f-big); text-shadow: 0 4px 0 rgba(0,0,0,.4); }
.ol .lprice small { font-weight: 900; color: var(--dim); } .ol .lprice small.me { color: #43D17E; } .ol .lprice small.them { color: var(--flag); }
.ol .ltimer { height: 10px; border-radius: 5px; background: rgba(24,33,27,.06); overflow: hidden; } .ol .ltimer i { display: block; height: 100%; background: var(--flood); transition: width .1s linear; }
.ol .lbtns { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 8px; }
.ol .lbtns .btn { padding: 14px 4px; font-size: 18px; }
/* Talentwahl */
.ol .lot.pick { border: 0; text-align: left; color: var(--chalk); width: 100%; }
.ol .lot.pick.has .lot-mv b { font-size: 28px; color: #43D17E; }
.ol .s-draft { padding-bottom: 40px; }
/* Spielzeit, Ligen, Gesamtranking */
.ol .weekbar { border: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; align-items: center; text-align: left; color: var(--chalk); background: var(--night2); border-radius: 16px; padding: 10px 14px; box-shadow: inset 4px 0 0 var(--dc); }
.ol .weekbar b { font: 400 18px var(--f-big); color: var(--dc); } .ol .weekbar span { font-weight: 900; text-align: right; }
.ol .weekbar em { grid-column: 1 / -1; font-style: normal; font-size: 12px; color: var(--dim); }
.ol .divhead { display: grid; justify-items: center; gap: 4px; text-align: center; background: radial-gradient(120% 90% at 50% 0%, #23466B, var(--night2)); border-radius: 24px; padding: 16px 12px; box-shadow: inset 0 0 0 2px var(--dc); }
.ol .divhead h1 { font: 400 38px/1 var(--f-big); color: var(--dc); } .ol .divhead small { color: var(--dim); font-size: 12px; }
.ol .divhead .divs { width: 100%; margin-top: 8px; } .ol .divhead .divs b { font-size: 10px; }
.ol .rk.up { box-shadow: inset 4px 0 0 #43D17E; } .ol .rk.down { box-shadow: inset 4px 0 0 var(--flag); }
.ol .rk.me.up, .ol .rk.me.down { box-shadow: inset 0 0 0 2px var(--flood), inset 6px 0 0 currentColor; }
.ol .prizes { display: flex; flex-wrap: wrap; gap: 6px; } .ol .prizes span { font-size: 12px; font-weight: 900; background: rgba(24,33,27,.06); border-radius: 8px; padding: 4px 8px; }
.ol .subh2 { margin: 6px 0 0; font: 400 15px var(--f-big); color: var(--hi); }
.ol .me-res.gold { box-shadow: 0 0 0 2px var(--flood), 0 0 14px rgba(255,204,51,.5); }
.ol .dev { display: block; margin: 2px 0; }
.ol .devbox { display: grid; gap: 4px; background: rgba(24,33,27,.06); border-radius: 14px; padding: 10px; }
.ol .dev.big { width: 100%; height: 90px; overflow: visible; }
.ol .hofpanel { box-shadow: inset 0 0 0 2px rgba(255,204,51,.35); }
.ol .hofgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ol .hofcard { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; background: rgba(24,33,27,.06); border-radius: 16px; padding: 10px 6px; }
.ol .hofcard.top { background: linear-gradient(170deg, rgba(255,204,51,.25), rgba(0,0,0,.25)); box-shadow: inset 0 0 0 2px var(--flood); }
.ol .hofcard i { position: absolute; top: 6px; left: 8px; font: 400 15px var(--f-big); font-style: normal; color: var(--hi); }
.ol .hof-face { width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--night3); }
.ol .hof-face canvas { width: 100% !important; height: 100% !important; }
.ol .hofcard b { font: 400 15px/1.1 var(--f-big); } .ol .hofcard small { font-size: 11px; color: var(--dim); } .ol .hofcard em { font-style: normal; font-size: 11px; font-weight: 900; color: #43D17E; }
.ol .daily { box-shadow: inset 0 0 0 2px #43D17E; }
.ol .prizeline { margin: 0; text-align: center; background: rgba(67,209,126,.15); border-radius: 12px; padding: 8px; font-size: 13px; } .ol .prizeline b { color: #7CF29C; }
.ol .codebox { display: grid; justify-items: center; background: rgba(24,33,27,.06); border-radius: 12px; padding: 10px; } .ol .codebox small { font-size: 11px; color: var(--dim); } .ol .codebox b { font: 400 22px var(--f-big); color: var(--hi); letter-spacing: .03em; word-break: break-all; text-align: center; }
.ol .n-friends { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='4'/%3E%3Ccircle cx='17' cy='9' r='3'/%3E%3Cpath d='M1 21c0-4 3-7 7-7s7 3 7 7zM14 21c0-3 1-5 3-6 3 0 6 2 6 6z'/%3E%3C/svg%3E"); }

/* Tagesspiele, Tagesplan, Ruf */
.ol .repchip {display: inline-block; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: rgba(255,204,51,.14); color: var(--hi); font: 800 12px var(--f-body);}
.ol .mlist {display: grid; gap: 6px;}
.ol .mrowx {display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; border: 0; text-align: left; padding: 8px 10px; border-radius: 14px; background: var(--night2); transition: transform .1s;}
.ol .mrowx:active {transform: scale(.98);}
.ol .mrowx div {display: grid; min-width: 0;}
.ol .mrowx small {color: var(--dim); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .rate {min-width: 42px; text-align: center; padding: 4px 8px; border-radius: 10px; font: 400 16px var(--f-big); background: var(--night3);}
.ol .rate.top {background: var(--flood); color: #2A1E00;}
.ol .rate.good {background: var(--turf); color: #fff;}
.ol .rate.ok {background: var(--night3); color: var(--chalk);}
.ol .rate.bad {background: var(--flag2); color: #fff;}
.ol .plan {padding: 4px 10px; border-radius: 10px; font-size: 12px; background: rgba(255,204,51,.15); color: var(--hi); animation: ol-pulse 1.6s ease-in-out infinite;}
.ol .plan.set {animation: none; background: var(--night3); font-size: 16px;}
@keyframes ol-pulse {50% {opacity: .55;}}
.ol .hint.left {text-align: left;}
.ol .subh2 {margin: 14px 0 8px; font: 400 16px var(--f-big); letter-spacing: .02em;}
.ol .plans {display: grid; gap: 8px;}
.ol .planb {display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; border: 2px solid transparent; background: var(--night2); border-radius: 14px; padding: 10px 12px;}
.ol .planb span {grid-row: span 2; font-size: 24px;}
.ol .planb small {color: var(--dim); font-size: 12px;}
.ol .planb i {font-style: normal; font-size: 11px; background: var(--flood); color: #2A1E00; padding: 1px 6px; border-radius: 6px; margin-left: 4px; vertical-align: 2px;}
.ol .planb.on {border-color: var(--hi); background: var(--night3);}
.ol .mticker {background: var(--night2); border-radius: 14px; padding: 10px 12px; margin-top: 8px;}
.ol .mt-min {position: relative; height: 22px; border-radius: 11px; background: rgba(24,33,27,.06); overflow: hidden; margin-bottom: 8px;}
.ol .mt-min i {position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--turf2), var(--turf)); transition: width .25s linear;}
.ol .mt-min b {position: relative; display: block; text-align: center; font: 400 14px/22px var(--f-big);}
.ol .mticker ul {list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 180px; overflow: auto;}
.ol .mticker li {display: flex; gap: 8px; font-size: 13px; animation: ol-tick .3s var(--bounce);}
.ol .mticker li i {font-style: normal; color: var(--dim); min-width: 28px;}
.ol .mticker li.me {color: var(--hi);}
.ol .mticker li.them {color: #FF9A9E;}
@keyframes ol-tick {from {opacity: 0; transform: translateY(-6px);}}
.ol .mt-end {margin-top: 8px; text-align: center; font-size: 15px;}
.ol .mt-end b {font: 400 22px var(--f-big); color: var(--hi);}

/* Einblenden beim Ansichtswechsel */
.ol .screen.enter > * {animation: ol-rise .45s var(--bounce) both;}
.ol .screen.enter > *:nth-child(2) {animation-delay: .06s;}
.ol .screen.enter > *:nth-child(3) {animation-delay: .12s;}
.ol .screen.enter > *:nth-child(4) {animation-delay: .18s;}
.ol .screen.enter > *:nth-child(5) {animation-delay: .24s;}
.ol .screen.enter > *:nth-child(n+6) {animation-delay: .3s;}
@keyframes ol-rise {from {opacity: 0; transform: translateY(14px) scale(.98);}}
.ol .nextcard.wide {width: 100%;}

/* Intro beim Öffnen */
.ol .olintro {position: fixed; inset: 0; z-index: 95; background: #050D16; overflow: hidden; display: grid; place-items: center; transition: opacity .5s, transform .5s;}
.ol .olintro.out {opacity: 0; transform: scale(1.08); pointer-events: none;}
.ol .oi-pitch {position: absolute; left: -10%; right: -10%; bottom: -20%; height: 60%; background: repeating-linear-gradient(90deg, #17663A 0 12%, #1B7543 12% 24%); transform: perspective(500px) rotateX(58deg); transform-origin: bottom; opacity: 0; animation: ol-pitchon .7s .25s ease-out forwards;}
@keyframes ol-pitchon {to {opacity: .9;}}
.ol .oi-beam {position: absolute; top: -10%; width: 70%; height: 130%; opacity: 0; background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255,240,190,.55) 175deg, rgba(255,240,190,.75) 180deg, rgba(255,240,190,.55) 185deg, transparent 200deg); filter: blur(6px); animation: ol-beam .9s steps(1) forwards, ol-beamfade .5s .9s ease-out forwards;}
.ol .oi-beam.l {left: -20%; transform: rotate(-24deg);}
.ol .oi-beam.r {right: -20%; transform: rotate(24deg); animation-delay: .12s, 1.02s;}
@keyframes ol-beam {0% {opacity: 0;} 10% {opacity: 1;} 18% {opacity: .2;} 26% {opacity: 1;}}
@keyframes ol-beamfade {to {opacity: .7;}}
.ol .oi-word {position: relative; display: flex; gap: 2px; font: 400 64px var(--f-big); color: var(--chalk); text-shadow: 0 6px 0 #0A1522, 0 0 40px rgba(255,204,51,.45);}
.ol .oi-word span {display: inline-block; opacity: 0; animation: ol-drop .5s var(--bounce) forwards;}
@keyframes ol-drop {from {opacity: 0; transform: translateY(-60px) scale(1.6) rotate(-8deg);} to {opacity: 1; transform: none;}}
.ol .oi-stamp {position: absolute; top: calc(50% + 42px); font: 400 26px var(--f-big); color: var(--night); background: var(--flood); padding: 4px 16px; border-radius: 10px; box-shadow: 0 4px 0 var(--flood2); opacity: 0; animation: ol-stamp .4s 1.05s var(--bounce) forwards;}
@keyframes ol-stamp {from {opacity: 0; transform: rotate(-3deg) scale(2.4);} to {opacity: 1; transform: rotate(-3deg) scale(1);}}
.ol .oi-flash {position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; animation: ol-flash .35s 1.05s ease-out;}
@keyframes ol-flash {20% {opacity: .35;}}

/* Challenge-Modus: eigene Farbwelt in Violett */
.ol.chmode {--night: #1A0E2E; --night2: #2A1748; --night3: #3A2163; --turf: #9B5CF0; --turf2: #6E35C4; background: radial-gradient(120% 60% at 50% -10%, #4A2A80 0%, #1A0E2E 55%) fixed, #1A0E2E;}
.ol .chintro {position: fixed; inset: 0; z-index: 92; display: grid; place-items: center; padding: 20px; background: radial-gradient(90% 60% at 50% 30%, #4A2A80, #12081F 70%); overflow: hidden; animation: ol-chin .35s ease-out;}
.ol .chintro.out {opacity: 0; transition: opacity .3s;}
@keyframes ol-chin {from {opacity: 0;}}
.ol .chi-rays {position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, rgba(155,92,240,.18) 0 8deg, transparent 8deg 22deg); animation: ol-spin 18s linear infinite;}
@keyframes ol-spin {to {transform: rotate(360deg);}}
.ol .chi-box {position: relative; width: 100%; max-width: 380px; display: grid; justify-items: center; gap: 10px; text-align: center;}
.ol .chi-tag {font: 900 12px var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: #E3D2FF; background: rgba(155,92,240,.35); padding: 5px 12px; border-radius: 999px; animation: ol-rise .4s var(--bounce) both;}
.ol .chi-icon {font-size: 64px; line-height: 1; animation: ol-drop .55s .1s var(--bounce) both;}
.ol .chi-box h1 {font: 400 40px var(--f-big); color: #fff; text-shadow: 0 5px 0 #2A1748; animation: ol-rise .45s .15s var(--bounce) both;}
.ol .chi-vs {font-size: 14px; color: #E3D2FF; background: rgba(24,33,27,.06); padding: 6px 12px; border-radius: 12px;}
.ol .chi-vs b {color: var(--hi);}
.ol .chi-box ul {list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; width: 100%;}
.ol .chi-box li {background: rgba(24,33,27,.05); border-radius: 12px; padding: 9px 12px; font-size: 15px; animation: ol-rise .4s var(--bounce) both;}
.ol .chi-box li:first-child {background: rgba(255,204,51,.16); color: var(--hi);}
.ol .chi-tries {font-size: 12px; color: #C9B5EE;}
.ol .chi-go {width: 100%; margin-top: 6px; animation: ol-rise .4s 1.1s var(--bounce) both, ol-gopulse 1.4s 1.6s ease-in-out infinite;}
@keyframes ol-gopulse {50% {transform: scale(1.04);}}
.ol .chi-back {color: #C9B5EE;}
.ol .chi-count {font: 400 120px var(--f-big); color: #fff; text-shadow: 0 8px 0 #2A1748, 0 0 50px rgba(155,92,240,.8);}
.ol .chi-count.pop {animation: ol-count .5s var(--bounce);}
@keyframes ol-count {from {transform: scale(2.6); opacity: 0;} 60% {opacity: 1;}}
.ol .mt-score {text-align: center; font: 400 40px var(--f-big); margin: 2px 0 8px; letter-spacing: .04em;}
.ol .mt-score.pop {animation: ol-count .45s var(--bounce);}
.ol .tres.four {grid-template-columns: repeat(4, 1fr); gap: 6px;}
.ol .cc-tags span.prep {background: rgba(255,204,51,.16); color: var(--hi);}
.ol .tres.four b {font-size: 17px; white-space: nowrap;}
.ol .mdbar {height: 6px; border-radius: 3px; background: rgba(24,33,27,.06); overflow: hidden; margin-top: 6px;}
.ol .mdbar i {display: block; height: 100%; background: var(--flood); border-radius: 3px; transition: width .6s var(--bounce);}
.ol .mdbar.big {height: 10px; margin: 2px 0 8px;}
.ol .l5 {display: flex; gap: 3px; margin-top: 3px;}
.ol .l5 i {width: 14px; height: 5px; border-radius: 3px; background: var(--night3);}
.ol .l5 i.top {background: var(--flood);} .ol .l5 i.good {background: var(--turf);} .ol .l5 i.ok {background: #6F86A0;} .ol .l5 i.bad {background: var(--flag);}
.ol .mdlist {background: var(--night2); border-radius: 14px; padding: 8px 12px; margin-top: 8px;}
.ol .mdlist summary {cursor: pointer; font-weight: 900; padding: 4px 0;}
.ol .mdlist div {display: grid; grid-template-columns: 24px 1fr auto 46px; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; border-top: 1px solid rgba(255,255,255,.06);}
.ol .mdlist i {font-style: normal; color: var(--dim);}
.ol .mdlist em {font-style: normal; font-size: 13px; min-width: 0; padding: 2px 4px;}
.ol .stab {display: grid; gap: 2px; margin-top: 4px;}
.ol .stab div {display: grid; grid-template-columns: 30px 1fr 28px 28px 28px 34px; gap: 6px; align-items: center; font-size: 12px; padding: 3px 0; border-top: 1px solid rgba(255,255,255,.06);}
.ol .stab .sh {color: var(--dim); font-size: 11px; border-top: 0;}
.ol .stab i {font-style: normal; color: var(--dim);}
.ol .stab span {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .stab b {text-align: right; font-weight: 800;}
.ol .cstats summary {font-size: 13px;}
.ol .hofcard[data-hofopen] {cursor: pointer;}
.ol .sharecard {width: 100%; border-radius: 12px; display: block; margin: 8px 0 12px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6);}
.ol a.btn {text-decoration: none; text-align: center;}
.ol .draftbud {position: sticky; top: 8px; z-index: 5; display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 4px 8px; align-items: baseline; background: var(--night2); border-radius: 14px; padding: 10px 14px; box-shadow: 0 8px 20px -10px rgba(0,0,0,.6);}
.ol .draftbud span {color: var(--dim); font-size: 12px;}
.ol .draftbud b {font: 400 17px var(--f-big);}
.ol .draftbud b.neg {color: var(--flag);}
.ol .nextcard.arenacard {background: linear-gradient(135deg, #9B5CF0, #6E35C4); box-shadow: 0 5px 0 #4A2390;}
.ol .nextcard.arenacard small {color: #E3D2FF;}
.ol .hofcard.real {background: linear-gradient(170deg, rgba(255,204,51,.22), rgba(0,0,0,.3)); box-shadow: inset 0 0 0 3px #FFCC33, 0 0 18px -4px rgba(255,204,51,.55);}
.ol .hofcard.real::after {content: ""; position: absolute; inset: 3px; border-radius: 13px; border: 1px solid rgba(255,240,190,.5); pointer-events: none;}
.ol .hofcard.arena {background: rgba(155,92,240,.14); box-shadow: inset 0 0 0 1px rgba(155,92,240,.6);}
.ol .hofcard.arena i {color: #C9B5EE;}
.ol .hofcard u {position: absolute; top: 6px; right: 6px; text-decoration: none; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; background: #9B5CF0; color: #fff; padding: 2px 5px; border-radius: 5px;}
.ol .offbtns {display: grid; gap: 4px; justify-items: end;}
.ol .offbtns .btn.sm {padding: 6px 10px; font-size: 13px;}
.ol .offbtns .cheap {font-size: 11px; color: var(--dim);}
.ol .chintro.arena {background: radial-gradient(90% 60% at 50% 30%, #6E35C4, #12081F 70%);}
.ol .achgrid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;}
.ol .ach {display: grid; justify-items: center; text-align: center; gap: 1px; padding: 8px 4px; border-radius: 12px; background: rgba(24,33,27,.06); opacity: .45;}
.ol .ach.on {opacity: 1; background: linear-gradient(170deg, rgba(255,204,51,.18), rgba(0,0,0,.25)); box-shadow: inset 0 0 0 1px rgba(255,204,51,.5);}
.ol .ach span {font-size: 24px;}
.ol .ach b {font: 400 12px/1.1 var(--f-big);}
.ol .ach small {font-size: 10px; color: var(--dim); line-height: 1.2;}
.ol .achpop {position: fixed; z-index: 96; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); width: min(92vw, 420px); display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 18px; background: linear-gradient(135deg, #2A1E00, #5A4100); box-shadow: 0 0 0 2px var(--flood), 0 18px 40px -12px rgba(0,0,0,.7); animation: ol-popin .55s var(--bounce); cursor: pointer;}
.ol .achpop.out {opacity: 0; transform: translateX(-50%) translateY(-20px); transition: .35s;}
.ol .achpop .ap-ic {font-size: 40px; text-align: center; animation: ol-drop .6s .15s var(--bounce) both;}
.ol .achpop small {display: block; font: 900 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--hi);}
.ol .achpop b {display: block; font: 400 20px/1.1 var(--f-big); color: #fff;}
.ol .achpop span {font-size: 12px; color: #F3E3B0;}
@keyframes ol-popin {from {opacity: 0; transform: translateX(-50%) translateY(-40px) scale(.9);}}
.ol .fmtseg {display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: rgba(24,33,27,.06); padding: 4px; border-radius: 12px; margin-top: 8px;}
.ol .fmtseg button {border: 0; background: none; padding: 8px; border-radius: 9px; font-weight: 900; color: var(--dim);}
.ol .fmtseg button.on {background: var(--night3); color: var(--chalk);}
.ol .sharecard.story {width: auto; max-width: 100%; max-height: 52vh; margin: 8px auto 12px;}
.ol .teamrow {display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 14px; padding: 10px 14px; background: var(--night2);}
.ol .teamrow span {grid-row: span 2; font-size: 22px;}
.ol .teamrow small {color: var(--dim); font-size: 12px;}
.ol .teamrow em {grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-size: 12px; font-weight: 900; color: var(--sky);}
.ol .scoutlv {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 14px;}
.ol .scoutlv div {display: grid; justify-items: center; padding: 10px 4px; border-radius: 12px; background: rgba(24,33,27,.06); opacity: .5;}
.ol .scoutlv div.on {opacity: 1; box-shadow: inset 0 0 0 2px var(--sky);}
.ol .scoutlv b {font: 400 13px var(--f-big);}
.ol .scoutlv small {color: var(--dim); font-size: 11px;}
.ol .wheelpanel .mrowx {margin-bottom: 10px;}
.ol .wheelpanel > .btn {width: 100%;}
.ol .wheelbox {position: relative; width: min(78vw, 300px); aspect-ratio: 1; margin: 16px auto 10px;}
.ol .wheel {position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 6px #FFCC33, 0 0 0 10px #2A1748, 0 20px 40px -10px rgba(0,0,0,.7); transition: transform 4.2s cubic-bezier(.12,.75,.1,1);}
.ol .whub {position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: #12081F; box-shadow: 0 0 0 4px #FFCC33; display: grid; place-items: center; font-size: 30px;}
.ol .wpin {position: absolute; z-index: 2; left: 50%; top: -14px; margin-left: -14px; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #FFCC33; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5));}
.ol .wres {min-height: 64px;}
.ol .wres .mrowx {animation: ol-rise .4s var(--bounce) both;}
.ol .mgcard.off {opacity: .45;}
.ol .wheelbox {width: auto;}
.ol .wslot {position: absolute; left: 50%; top: 50%; width: 0; height: 0; display: grid; place-items: center;}
.ol .wslot i, .ol .wslot b {position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%);}
.ol .wslot i canvas {border-radius: 50%; background: rgba(255,255,255,.18); display: block;}
.ol .wslot b {color: #6F86A0; font: 900 14px var(--f-body);}
.ol .mgcard em.red {background: var(--flag); color: #fff; box-shadow: 0 3px 0 var(--flag2);}
.ol .slotbtn {float: right; padding: 4px 10px !important; font-size: 12px !important;}
.ol .sfly {margin-top: 12px; padding: 12px; border-radius: 16px; background: rgba(155,92,240,.12); display: grid; gap: 12px; justify-items: center;}
.ol .sf-wheel {display: grid; justify-items: center; line-height: 1;}
.ol .sf-wheel span {font-size: 40px;}
.ol .sf-wheel b {font: 400 26px var(--f-big); color: #E3D2FF; margin-top: 4px;}
.ol .sf-wheel small {font-size: 11px; color: var(--dim);}
.ol .sf-wheel.bump span {animation: ol-wbump .35s var(--bounce);}
@keyframes ol-wbump {50% {transform: scale(1.25) rotate(25deg);}}
.ol .sf-cards {display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;}
.ol .sf-card {width: 44px; height: 52px; border-radius: 10px; background: linear-gradient(170deg, #9B5CF0, #6E35C4); display: grid; place-items: center; box-shadow: 0 3px 0 #4A2390; opacity: 0; transform: translateY(16px) scale(.8); transition: transform .55s cubic-bezier(.5,-0.3,.6,1), opacity .5s;}
.ol .sf-card.in {opacity: 1; transform: none; transition: transform .35s var(--bounce), opacity .25s;}
.ol .sf-card.in[style] {transition: transform .55s cubic-bezier(.5,-0.3,.6,1), opacity .5s .1s;}
.ol .sf-card.empty {background: #1F2F42; box-shadow: 0 3px 0 #0A1522; color: #6F86A0; font-weight: 900;}
.ol .sf-card canvas {border-radius: 50%;}

/* Aufgeräumte Startseite */
.ol .res b {white-space: nowrap;}
.ol .hero2 {display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 6px 2px 0;}
.ol .hero2 .eyebrow {color: var(--dim);}
.ol .hero2 h1 {font: 400 40px/1 var(--f-big); color: var(--hi); margin: 2px 0;}
.ol .hero2 small {font-size: 13px; font-weight: 900;}
.ol .hero2 small.up {color: #43D17E;} .ol .hero2 small.down {color: #FF8A8F;}
.ol .h2pos {border: 0; background: var(--night2); border-radius: 14px; padding: 8px 12px; display: grid; justify-items: center; box-shadow: inset 0 -3px 0 var(--dc);}
.ol .h2pos b {font: 400 24px/1 var(--f-big);}
.ol .h2pos span {font-size: 11px; color: var(--dim); font-weight: 800;}
.ol .chiprow {display: flex; flex-wrap: wrap; gap: 6px;}
.ol .chip2 {border: 0; background: var(--night2); color: var(--chalk); border-radius: 999px; padding: 5px 11px; font: 800 12px var(--f-body);}
.ol .chip2.dim {color: var(--dim); background: none; padding-left: 4px;}
.ol .declist {display: grid; gap: 6px;}
.ol .declist .decrow {display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; text-align: left; border: 0; border-radius: 14px; padding: 8px 12px; background: rgba(255,204,51,.1); box-shadow: inset 3px 0 0 var(--flood);}
.ol .declist .decrow b {font-size: 14px;}
.ol .declist .decrow em {font-style: normal; font: 400 16px var(--f-big); color: var(--hi);}
.ol .tiles {display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px;}
.ol .tile {position: relative; border: 0; text-align: left; display: grid; gap: 1px; padding: 12px 12px 14px; border-radius: 16px; background: var(--night2); overflow: hidden; transition: transform .1s;}
.ol .tile:active {transform: scale(.97);}
.ol .tile:disabled {opacity: .5;}
.ol .tile .eyebrow {color: var(--dim); font-size: 10px;}
.ol .tile b {font: 400 26px/1.05 var(--f-big);}
.ol .tile small {font-size: 11px; color: var(--dim);}
.ol .tile.arena {background: linear-gradient(150deg, #6E35C4, #3A1F6E);}
.ol .tile.arena small, .ol .tile.arena .eyebrow {color: #D9C6FF;}
.ol .tile .tbar {position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(24,33,27,.06);}
.ol .tile .tbar i {display: block; height: 100%; background: var(--flood);}
.ol #lastrep {justify-self: center;}
.ol .mgrid {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.ol .mtile {position: relative; border: 0; text-align: left; display: grid; gap: 4px; padding: 14px; border-radius: 16px; background: var(--night2); transition: transform .1s;}
.ol .mtile:active {transform: scale(.97);}
.ol .mtile:disabled {opacity: .45;}
.ol .mtile .mt-ic {font-size: 26px; line-height: 1;}
.ol .mtile b {font: 400 18px/1.1 var(--f-big);}
.ol .mtile u {position: absolute; top: 10px; right: 10px; text-decoration: none; font-size: 14px; opacity: .8;}
.ol .mdots {display: flex; align-items: center; gap: 4px; min-height: 12px;}
.ol .mdots i {width: 9px; height: 9px; border-radius: 50%; background: var(--flood);}
.ol .mtile.wh .mdots i {background: var(--flag);}
.ol .mdots i.used {background: rgba(255,255,255,.15) !important;}
.ol .mdots em {font-style: normal; font-size: 11px; color: var(--dim); margin-left: 2px;}
.ol .panel.daily {box-shadow: none; border: 0;}
.ol .mtile .mt-s {font-size: 11px; color: var(--dim);}
.ol .panel.daily .mgrid {margin-bottom: 8px;}
.ol .segtabs {display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(24,33,27,.06);}
.ol .segtabs button {border: 0; background: none; padding: 9px 4px; border-radius: 10px; font: 400 14px var(--f-big); color: var(--dim);}
.ol .segtabs button.on {background: var(--night3); color: var(--chalk);}
.ol .prizeline2 {margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--dim); font-weight: 800;}
.ol .ranks .rk {padding-top: 8px; padding-bottom: 8px;}
.ol .ranks .rk small {font-size: 11px;}
.ol .panel .mtile {background: rgba(0,0,0,.22);}
.ol .segtabs.two {grid-template-columns: 1fr 1fr;}
.ol .n-fame {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l2.9 6.3 6.9.7-5.2 4.6 1.5 6.8L12 17l-6.1 3.4 1.5-6.8L2.2 9l6.9-.7z'/%3E%3C/svg%3E");}
.ol .bottomnav button.mid .dot {top: -4px;}
.ol .lockwrap {position: relative;}
.ol .lockwrap .btn.locked {width: 100%; opacity: .75;}
.ol .locktip {position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 5; display: grid; gap: 4px; padding: 8px; border-radius: 14px; background: #2A1748; box-shadow: 0 0 0 1px rgba(155,92,240,.6), 0 14px 30px -10px rgba(0,0,0,.7); opacity: 0; transform: translateY(6px) scale(.97); pointer-events: none; transition: opacity .18s, transform .18s var(--bounce);}
.ol .locktip::after {content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; border: 7px solid transparent; border-bottom: 0; border-top-color: #2A1748;}
.ol .locktip.show, .ol .lockwrap:hover .locktip {opacity: 1; transform: none; pointer-events: auto;}
.ol .locktip button {display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; border: 0; background: rgba(24,33,27,.05); border-radius: 10px; padding: 8px 10px; text-align: left;}
.ol .locktip button span {font-size: 20px;}
.ol .locktip button b {font: 400 15px var(--f-big);}
.ol .locktip button em {font-style: normal; font-weight: 900; color: var(--flag); font-size: 13px;}
.ol .frow {display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center;}
.ol .frow .bigin {min-width: 0;}

/* Verhandlung */
.ol .negobtn {width: 100%; margin-bottom: 8px;}
.ol .nego {display: grid; gap: 10px;}
.ol .ng-head {display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; align-items: center;}
.ol .ng-av {width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--bc); color: #0C1B2A; font: 400 18px var(--f-big);}
.ol .ng-head small {display: block; color: var(--dim); font-size: 12px;}
.ol .ng-head small i {font-style: normal; color: var(--chalk); background: rgba(24,33,27,.05); padding: 1px 6px; border-radius: 6px;}
.ol .ng-off {text-align: right;}
.ol .ng-off small {display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em;}
.ol .ng-off b {font: 400 24px var(--f-big); color: var(--hi); display: inline-block;}
.ol .ng-off b.bump {animation: ol-count .45s var(--bounce);}
.ol .ng-log {display: flex; flex-direction: column; gap: 6px; max-height: 38vh; min-height: 120px; overflow-y: auto; padding: 8px; border-radius: 14px; background: rgba(24,33,27,.06);}
.ol .ng-msg {max-width: 82%; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.35; animation: ol-tick .25s var(--bounce);}
.ol .ng-msg.boss {align-self: flex-start; background: var(--night3); border-bottom-left-radius: 4px;}
.ol .ng-msg.me {align-self: flex-end; background: var(--turf); color: #fff; border-bottom-right-radius: 4px;}
.ol .ng-msg.sys {align-self: center; background: none; color: var(--hi); font-size: 12px; font-weight: 900;}
.ol .ng-msg.typing {color: var(--dim); animation: ol-pulse 1s infinite;}
.ol .ng-chips {display: flex; gap: 6px; flex-wrap: wrap;}
.ol .ng-chips button {border: 0; border-radius: 999px; padding: 6px 12px; background: var(--night2); font-weight: 800; font-size: 13px;}
.ol .ng-in {display: grid; grid-template-columns: 1fr auto; gap: 6px;}
.ol .ng-in input {min-width: 0; border: 0; border-radius: 12px; padding: 10px 12px; background: var(--chalk); color: #14202C; font: 800 15px var(--f-body);}
.ol .ng-chips button:disabled, .ol .ng-in :disabled {opacity: .4;}

/* Bindung: Heute, Pakete, Aufgaben, Pass, Serie, großer Knopf */
.ol .today h2 {margin-bottom: 8px;}
.ol .packs {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px;}
.ol .pslot {border: 0; border-radius: 14px; padding: 10px 4px; display: grid; justify-items: center; gap: 2px; background: rgba(24,33,27,.06);}
.ol .pslot b {font-size: 26px; line-height: 1;}
.ol .pslot small {font-size: 11px; color: var(--dim); font-weight: 800;}
.ol .pslot.ready {background: linear-gradient(160deg, #FFCC33, #C99A10); animation: ol-wiggle 1.6s ease-in-out infinite;}
.ol .pslot.ready small {color: #2A1E00;}
.ol .pslot.got {opacity: .45;}
.ol .pslot:disabled:not(.got) {opacity: .7;}
@keyframes ol-wiggle {0%, 70%, 100% {transform: none;} 76% {transform: rotate(-5deg) scale(1.04);} 84% {transform: rotate(5deg) scale(1.04);} 92% {transform: rotate(-2deg);}}
.ol .quests {display: grid; gap: 6px;}
.ol .quest {display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; border: 0; text-align: left; border-radius: 12px; padding: 8px 10px; background: rgba(24,33,27,.06);}
.ol .quest span {font-size: 18px;}
.ol .quest b {display: block; font-size: 13px; margin-bottom: 4px;}
.ol .quest > div > i {display: block; height: 6px; border-radius: 3px; background: rgba(24,33,27,.05); overflow: hidden;}
.ol .quest > div > i > i {display: block; height: 100%; background: var(--turf); border-radius: 3px;}
.ol .quest em {font-style: normal; font-size: 12px; font-weight: 900; color: var(--dim); min-width: 34px; text-align: right;}
.ol .quest.ready {background: rgba(67,209,126,.16); box-shadow: inset 0 0 0 1px #43D17E;}
.ol .quest.ready em {color: #43D17E;}
.ol .quest.done {opacity: .5;}
.ol .quest:disabled {color: inherit;}
.ol .passrow {display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; border: 0; text-align: left; border-radius: 16px; padding: 12px 14px; background: var(--night2);}
.ol .passrow span {font-size: 22px;}
.ol .passrow b {display: block; font-size: 14px; margin-bottom: 5px;}
.ol .passrow em {font-style: normal; background: var(--flag); color: #fff; border-radius: 10px; padding: 2px 8px; font-weight: 900; font-size: 12px;}
.ol .passrow small {color: var(--dim); font-size: 20px;}
.ol .passbar {position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(24,33,27,.06); overflow: hidden;}
.ol .passbar i {display: block; height: 100%; background: linear-gradient(90deg, #FFCC33, #FF8A3D); border-radius: 4px;}
.ol .passbar.big {height: 18px; border-radius: 9px; margin: 8px 0 12px;}
.ol .passbar.big span {position: absolute; inset: 0; text-align: center; font: 800 11px/18px var(--f-body);}
.ol .ptiers {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 46vh; overflow-y: auto;}
.ol .ptier {border: 0; border-radius: 12px; padding: 8px 4px; display: grid; justify-items: center; gap: 1px; background: rgba(24,33,27,.06); opacity: .55;}
.ol .ptier i {font-style: normal; font-size: 10px; color: var(--dim);}
.ol .ptier b {font: 400 14px var(--f-big);}
.ol .ptier em {font-style: normal; font-size: 10px; font-weight: 900;}
.ol .ptier.open {opacity: 1; background: linear-gradient(160deg, #FFCC33, #C99A10); color: #2A1E00;}
.ol .ptier.open i {color: #2A1E00;}
.ol .ptier.got {opacity: .8; background: rgba(67,209,126,.15);}
.ol .ptier.final {grid-column: span 4; box-shadow: inset 0 0 0 2px #FFCC33;}
.ol .pack {display: grid; justify-items: center; gap: 10px; padding: 10px 0;}
.ol .pk-card {width: 170px; height: 220px; border-radius: 22px; display: grid; place-items: center; align-content: center; gap: 10px; cursor: pointer; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 70%, #fff), var(--rc) 55%, color-mix(in srgb, var(--rc) 60%, #000)); box-shadow: 0 0 0 4px rgba(255,255,255,.15), 0 0 50px -6px var(--rc), 0 20px 40px -14px rgba(0,0,0,.7); transition: background .3s, box-shadow .3s;}
.ol .pk-card span {font: 900 13px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,0,.65);}
.ol .pk-card b {font-size: 64px; line-height: 1;}
.ol .pk-card.pop {animation: ol-pkpop .42s var(--bounce);}
@keyframes ol-pkpop {0% {transform: scale(1);} 35% {transform: scale(.88) rotate(-4deg);} 70% {transform: scale(1.12) rotate(3deg);} 100% {transform: none;}}
.ol .pk-give {font: 400 22px var(--f-big); color: var(--hi); min-height: 26px;}
.ol .res.streak {padding: 4px 10px; gap: 4px; font-size: 15px; opacity: .55;}
.ol .res.streak.lit {opacity: 1; box-shadow: inset 0 0 0 1px rgba(255,138,61,.6);}
.ol .cta {position: fixed; z-index: 21; left: 50%; transform: translateX(-50%); bottom: calc(86px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 32px), 440px); border: 0; border-radius: 18px; padding: 14px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; background: linear-gradient(180deg, #FFD95C, var(--flood)); color: #2A1E00; font: 400 19px var(--f-big); box-shadow: 0 5px 0 var(--flood2), 0 14px 30px -10px rgba(0,0,0,.7); animation: ol-ctain .4s var(--bounce);}
.ol .cta span {font-size: 22px;}
.ol .cta:active {transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 var(--flood2);}
@keyframes ol-ctain {from {opacity: 0; transform: translateX(-50%) translateY(20px);}}
.ol .screen {padding-bottom: 190px;}
.ol .topbar {gap: 6px; padding-left: 12px; padding-right: 12px;}
.ol .me-res em {display: none;}
.ol .me-res b {max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ol .topbar > .res {flex-shrink: 0;}
.ol .topbar {display: flex; align-items: center;}
.ol .topbar .me-res {margin-right: auto; min-width: 0;}

/* Nächster Anstoß */
.ol .tile.kick b {font-variant-numeric: tabular-nums;}
.ol .tile.kick b.soon, .ol .kc-cd.soon {color: var(--flag); animation: ol-pulse 1s infinite;}
.ol .kickcard {position: relative; overflow: hidden; display: grid; justify-items: center; gap: 4px; text-align: center; padding: 18px 16px 14px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #1F8A4C 0%, #11512D 55%, #0B3A20 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 14px 30px -14px rgba(0,0,0,.7);}
.ol .kickcard::before {content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 34px, transparent 34px 68px); pointer-events: none;}
.ol .kickcard::after {content: ""; position: absolute; left: 50%; top: -60px; width: 160px; height: 160px; margin-left: -80px; border-radius: 50%; border: 2px solid rgba(255,255,255,.12); pointer-events: none;}
.ol .kickcard > * {position: relative; z-index: 1;}
.ol .kickcard .eyebrow {color: #CFF5DD;}
.ol .kc-cd {font: 400 58px/1 var(--f-big); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .02em; text-shadow: 0 4px 0 rgba(0,0,0,.25);}
.ol .kickcard small {color: #CFF5DD; font-weight: 800;}
.ol .kc-opp {display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px;}
.ol .kc-opp span {display: inline-flex; align-items: center; gap: 5px; background: rgba(24,33,27,.06); border-radius: 999px; padding: 3px 10px 3px 3px; font-size: 12px; font-weight: 800;}
.ol .kc-opp .cc-face {width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: inline-block;}
.ol .kc-days {display: grid; grid-template-columns: repeat(34, 1fr); gap: 2px; width: 100%; margin-top: 10px;}
.ol .kc-days i {height: 6px; border-radius: 2px; background: rgba(24,33,27,.06);}
.ol .kc-days i.done {background: #CFF5DD;}
.ol .kc-days i.next {background: var(--flood); animation: ol-pulse 1.2s infinite;}
.ol .chip2.season {background: var(--flood); color: #2A1E00;}
.ol .ups {display: grid; gap: 6px; margin-bottom: 10px;}
.ol .upg {display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; border: 0; text-align: left; border-radius: 14px; padding: 10px 12px; background: var(--night2);}
.ol .upg span {font-size: 22px;}
.ol .upg b {font-size: 14px;} .ol .upg b i {font-style: normal; color: var(--dim); font-size: 12px; margin-left: 4px;}
.ol .upg small {display: block; color: var(--dim); font-size: 12px;}
.ol .upg em {font-style: normal; font-weight: 900; color: var(--sky);}
.ol .upg.max {opacity: .6;} .ol .upg:disabled:not(.max) {opacity: .5;}
.ol .ccard.keep {position: relative;}
.ol .ccard.keep.on {box-shadow: inset 0 0 0 3px var(--flood);}
.ol .ccard .kp {position: absolute; top: 8px; right: 8px; font-style: normal; background: var(--flood); color: #2A1E00; border-radius: 50%; width: 24px; height: 24px; display: grid; place-items: center; font-weight: 900;}
.ol .boostbox {display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(63,167,245,.1); box-shadow: inset 0 0 0 1px rgba(63,167,245,.35); margin-bottom: 8px;}
.ol .boostbox b {display: block; font-size: 14px;}
.ol .boostbox small {display: block; font-size: 11px; color: var(--dim); margin: 2px 0 6px;}
.ol .bdots {display: flex; gap: 4px;}
.ol .bdots i {width: 16px; height: 6px; border-radius: 3px; background: rgba(24,33,27,.05);}
.ol .bdots i.on {background: var(--sky); box-shadow: 0 0 6px var(--sky);}
.ol .bbtns {display: grid; gap: 6px;}
.ol .bbtns .btn.sm {padding: 6px 10px; font-size: 13px;}
.ol .tacbox {position: relative; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--night2); margin: 8px 0;}
.ol .tacbox small {display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .tacbox b {display: block; font: 400 15px/1.15 var(--f-big);}
.ol .tacbox i {display: block; font-style: normal; font-size: 11px; color: var(--dim); line-height: 1.25;}
.ol .tb-r {display: grid; justify-items: center; gap: 4px;}
.ol .fitring {width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--fc, #43D17E) calc(var(--f) * 1%), rgba(255,255,255,.1) 0); --fc: hsl(calc(var(--f) * 1.2), 70%, 52%);}
.ol .fitring b {width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--night2); font: 400 15px var(--f-big);}
.ol .role {font-size: 10px !important; font-weight: 900; text-transform: none !important; letter-spacing: 0 !important; padding: 2px 6px; border-radius: 6px;}
.ol .role.stamm {background: rgba(67,209,126,.2); color: #43D17E;}
.ol .role.rot {background: rgba(255,204,51,.18); color: var(--hi);}
.ol .role.bank {background: rgba(240,72,78,.2); color: #FF8A8F;}
.ol .tb-fee {grid-column: 1 / -1; font-weight: 900; color: var(--hi); font-size: 13px; border-top: 1px solid rgba(255,255,255,.06); padding-top: 6px;}
.ol .n-buddies {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a4 4 0 1 1 0 8 4 4 0 0 1 0-8zM4 21c0-4.4 3.6-8 8-8s8 3.6 8 8zM19 6h2v2h2v2h-2v2h-2v-2h-2V8h2z'/%3E%3C/svg%3E");}
.ol .n-friends {--m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l4 2 3-2 3 2 4-2-1 6 3 2-4 2 1 7-6-4-6 4 1-7-4-2 3-2z'/%3E%3C/svg%3E");}
.ol .twist {margin: 6px 0; padding: 8px 12px; border-radius: 12px; font-size: 13px; font-weight: 800; background: rgba(240,72,78,.12); box-shadow: inset 3px 0 0 var(--flag);}
.ol .twist.move {background: rgba(63,167,245,.12); box-shadow: inset 3px 0 0 var(--sky);}
/* Kein seitliches Scrollen */
html, body, .ol, .ol-app {overflow-x: hidden; max-width: 100vw;}
.ol, .ol-app, .ol .screen {overscroll-behavior-x: none;}
.ol .screen {touch-action: pan-y;}
@media (max-width: 420px) {
  .ol .topbar {gap: 4px; padding-left: 10px; padding-right: 10px;}
  .ol .topbar .res {font-size: 15px; padding: 4px 9px 4px 4px;}
  .ol .topbar .res.streak, .ol .topbar .res.gem {padding: 4px 8px;}
  .ol .me-res b {max-width: 70px;}
}
.ol .hofcard.career {background: rgba(63,167,245,.12); box-shadow: inset 0 0 0 1px rgba(63,167,245,.6);}
.ol .hofcard.career u {background: var(--sky);}

/* Freundes-Klub */
.ol .nextcard.fcentry {background: linear-gradient(135deg, #3FA7F5, #1D428A); box-shadow: 0 5px 0 #12305F;}
.ol .nextcard.fcentry small {color: #D6ECFF;}
.ol .mgrid.three {grid-template-columns: repeat(3, 1fr);}
.ol .fchead {display: grid; justify-items: center; text-align: center; gap: 2px; padding: 16px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, #1D428A, #0C1B2A 80%); box-shadow: inset 0 0 0 2px rgba(63,167,245,.35);}
.ol .fchead .eyebrow {color: #9FD2FF;}
.ol .fchead h1 {font: 400 30px/1.1 var(--f-big);}
.ol .fchead > small {color: var(--dim); font-size: 12px;}
.ol .fc-str {display: flex; align-items: baseline; gap: 8px; margin: 4px 0;}
.ol .fc-str b {font: 400 40px var(--f-big); color: var(--hi);}
.ol .fc-str small {color: var(--dim); font-size: 12px;}
.ol .fcareas {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;}
.ol .fca {display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: var(--night2);}
.ol .fca.mine {box-shadow: inset 0 0 0 2px var(--flood);}
.ol .fca span {font-size: 22px;}
.ol .fca b {font: 400 14px var(--f-big);}
.ol .fca i {font-style: normal; font-size: 11px; font-weight: 900; color: var(--oc);}
.ol .fca em {font-style: normal; font: 400 20px var(--f-big);}
.ol .fcsq {display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px;}
.ol .fcsq small {width: 100%; color: var(--dim); font-size: 11px; font-weight: 900;}
.ol .fcp {display: inline-flex; gap: 5px; align-items: center; font-size: 12px; padding: 3px 8px 3px 3px; border-radius: 999px; background: rgba(24,33,27,.06); box-shadow: inset 0 0 0 1px var(--oc);}
.ol .fcp b {background: var(--oc); color: #0C1B2A; border-radius: 999px; padding: 1px 6px; font-size: 11px;}
.ol .fcfeed {margin: 0 0 6px; font-size: 13px; color: var(--chalk); padding-left: 10px; border-left: 2px solid rgba(63,167,245,.5);}
.ol .rk.bot {cursor: pointer;}
.ol .rk.bot::after {content: "›"; color: var(--dim); margin-left: 6px; font-size: 18px;}
.ol .ro-r {text-align: right;}
.ol .ro-r b {display: block; font: 400 18px var(--f-big); color: var(--hi);}
.ol .ro-r small {font-size: 11px; color: var(--dim);}
.ol .fcareas.four {grid-template-columns: repeat(4, 1fr);}
.ol .fcareas.four .fca b {font-size: 12px;}
.ol .fcpitch {position: relative; display: grid; gap: 10px; padding: 14px 6px; border-radius: 16px; background: repeating-linear-gradient(0deg, #1F8A4C 0 34px, #1B7A43 34px 68px); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);}
.ol .fcpitch::before {content: ""; position: absolute; left: 10%; right: 10%; top: 50%; border-top: 2px solid rgba(255,255,255,.25);}
.ol .fcpitch::after {content: ""; position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);}
.ol .fcrow {position: relative; z-index: 1; display: flex; justify-content: space-evenly;}
.ol .fcman {display: grid; justify-items: center; gap: 1px; width: 72px; text-align: center;}
.ol .fcman i {width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 400 15px var(--f-big); font-style: normal; color: #0C1B2A; background: var(--oc); box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 0 2px #fff;}
.ol .fcman b {font-size: 11px; max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.6);}
.ol .fcman small {font-size: 9px; color: #CFF5DD; font-weight: 800;}
.ol .fclegend {display: flex; gap: 10px; justify-content: center; margin-top: 8px;}
.ol .fclegend span {font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; gap: 4px;}
.ol .fclegend span::before {content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--oc);}
/* Freundes-Klub im Stil des Vereinsmodus */
.ol .fclubhead {display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; background: var(--night2);}
.ol .fclubhead > div {display: grid; gap: 1px;}
.ol .fclubhead .eyebrow {color: var(--dim); font-size: 10px;}
.ol .fclubhead b {font: 400 30px/1 var(--f-big); color: var(--hi);}
.ol .fclubhead small {color: var(--dim); font-size: 11px;}
.ol .fch-chips {grid-column: 1 / -1; display: flex; gap: 6px;}
.ol .fch-chips span {flex: 1; display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: rgba(24,33,27,.06); font-size: 12px; font-weight: 800; color: var(--dim);}
.ol .fch-chips b {font: 400 16px var(--f-big); color: var(--chalk);}
.ol .fcpitch2 {position: relative; aspect-ratio: 3 / 4.2; border-radius: 22px; overflow: hidden; background: repeating-linear-gradient(0deg, #1F8A4C 0 9%, #1B7A43 9% 18%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.15);}
.ol .fclines {position: absolute; inset: 0; width: 100%; height: 100%;}
.ol .fclines * {fill: none; stroke: rgba(255,255,255,.55); stroke-width: .6; vector-effect: non-scaling-stroke;}
.ol .fslot {position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 1px; width: 70px;}
.ol .fslot .sf {width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: rgba(24,33,27,.06); box-shadow: 0 0 0 3px var(--oc), 0 4px 8px rgba(0,0,0,.4);}
.ol .fslot .sf canvas {display: block; margin: 2px auto 0;}
.ol .fslot b {margin-top: -8px; position: relative; z-index: 1; min-width: 24px; text-align: center; font: 400 12px/18px var(--f-big); background: var(--oc); color: #0C1B2A; border-radius: 9px; padding: 0 5px;}
.ol .fslot small {font-size: 10px; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.8); white-space: nowrap; max-width: 70px; overflow: hidden; text-overflow: ellipsis;}
.ol .fcsquad {display: grid; gap: 4px;}
.ol .fcrowp {display: grid; grid-template-columns: 32px 30px 1fr auto 30px; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: rgba(24,33,27,.06); box-shadow: inset 3px 0 0 var(--oc);}
.ol .fcrowp em {font-style: normal; font-size: 11px; font-weight: 900; color: var(--dim);}
.ol .fcrowp b {font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ol .fcrowp small {font-size: 11px; color: var(--dim);}
.ol .fcrowp i {font-style: normal; font: 400 16px var(--f-big); color: var(--hi); text-align: right;}
.ol .fchist {display: grid; gap: 4px;}
.ol .fchist div {display: grid; grid-template-columns: 1fr auto auto; gap: 10px; font-size: 13px; padding: 4px 0; border-top: 1px solid rgba(255,255,255,.06);}
.ol .fchist em {font-style: normal; font-size: 12px; color: var(--hi);}
.ol .exch {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px;}
.ol .exch .btn small {display: block;}
.ol .nextcard.proentry {background: linear-gradient(135deg, #43D17E, #1F8A4C); box-shadow: 0 5px 0 #0E4426;}
.ol .proface {display: grid; place-items: center; margin: 4px 0;}
.ol .chips {display: flex; flex-wrap: wrap; gap: 6px;}
.ol .prohead {display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 14px; border-radius: 20px; background: radial-gradient(120% 90% at 50% 0%, #1F8A4C, #0C1B2A 85%);}
.ol .prohead .cc-face {width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(24,33,27,.06); box-shadow: 0 0 0 3px var(--flood);}
.ol .prohead h1 {font: 400 24px/1.1 var(--f-big);}
.ol .prohead small {display: block; color: #CFF5DD; font-size: 12px; margin-bottom: 4px;}
.ol .prohead .eyebrow {color: #CFF5DD;}
.ol .proR {text-align: center;}
.ol .proR b {display: block; font: 400 42px/1 var(--f-big); color: var(--hi);}
.ol .proR small {font-size: 11px; color: #CFF5DD;}
.ol .pattrs {display: grid; gap: 6px;}
.ol .pattr {display: grid; grid-template-columns: 26px 70px 1fr 30px; gap: 8px; align-items: center; border: 0; text-align: left; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22);}
.ol .pattr span {font-size: 18px;} .ol .pattr b {font-size: 13px;}
.ol .pattr > i {display: block; height: 8px; border-radius: 4px; background: rgba(24,33,27,.05); overflow: hidden;}
.ol .pattr > i > i {display: block; height: 100%; background: linear-gradient(90deg, #43D17E, #FFCC33);}
.ol .pattr em {font-style: normal; font: 400 16px var(--f-big); text-align: right;}
.ol .pattr:not(:disabled):hover, .ol .pattr:not(:disabled):active {box-shadow: inset 0 0 0 2px #43D17E;}
.ol .pattr:disabled {opacity: .75;}
.ol .fslot.meslot .sf {box-shadow: 0 0 0 3px var(--oc), 0 0 14px var(--oc);}
.ol .sheet.noanim, .ol .sheet.noanim .sheet-in {animation: none !important;}
.ol .divpick {display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px;}
.ol .divpick button {border: 0; border-radius: 12px; padding: 10px 6px; background: rgba(24,33,27,.06); display: grid; gap: 2px; box-shadow: inset 0 -3px 0 var(--dc);}
.ol .divpick button.on {background: var(--night3); box-shadow: inset 0 0 0 2px var(--dc);}
.ol .divpick b {font: 400 14px var(--f-big);} .ol .divpick small {font-size: 11px; color: var(--dim);}
.ol .divpick button:disabled {opacity: .4;}
.ol .endbest {display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;}
.ol .endbest div {flex: 1; min-width: 90px; padding: 8px 10px; border-radius: 12px; background: rgba(24,33,27,.06); box-shadow: inset 0 -3px 0 var(--dc);}
.ol .endbest small {display: block; font-size: 11px; color: var(--dim);}
.ol .endbest b {font: 400 18px var(--f-big); color: var(--hi);}
.ol .ranks.flexrank {display: flex; flex-direction: column;}
.ol .rk.ghost {background: transparent; box-shadow: inset 0 0 0 1.5px dashed rgba(255,204,51,.6); border: 1.5px dashed rgba(255,204,51,.55); opacity: .9;}
.ol .rk.ghost strong {color: var(--dim);}
.ol .ranks.flexrank {gap: 6px;}
.ol .proev {box-shadow: inset 0 0 0 2px var(--flood);}
.ol .ballrow {width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; border: 0; text-align: left; padding: 10px 12px; border-radius: 14px; margin-bottom: 8px; background: linear-gradient(135deg, rgba(246,241,228,.16), rgba(246,241,228,.05)); box-shadow: inset 0 0 0 1px rgba(246,241,228,.3);}
.ol .ballrow span {font-size: 24px; animation: ol-wiggle 1.6s ease-in-out infinite;}
.ol .ballrow b {font-size: 14px;}
.ol .ballrow em {font-style: normal; background: var(--flood); color: #2A1E00; padding: 4px 10px; border-radius: 10px; font-weight: 900; font-size: 12px;}
.ol .pk-card.ball {border-radius: 50%; width: 180px; height: 180px;}
.ol .bbtns {grid-template-columns: 1fr;}
.ol .bbtns .btn small {display: block; font-size: 10px;}
.ol .scoutp .scd {font-size: 44px; text-align: center; color: var(--hi);}
.ol .sreps {display: grid; gap: 8px; margin-bottom: 8px;}
.ol .srep {padding: 10px; border-radius: 14px; background: rgba(0,0,0,.22);}
.ol .sr-top {display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;}
.ol .sr-top .cc-face {width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: block;}
.ol .sr-top b {display: block; font-size: 14px;} .ol .sr-top small {color: var(--dim); font-size: 12px;}
.ol .sr-pot {text-align: right;}
.ol .sr-pot small {display: block; font-size: 10px; color: var(--dim);}
.ol .sr-pot b {font: 400 18px var(--f-big); color: var(--hi);}
.ol .sr-pot i {display: block; font-style: normal; font-size: 11px; color: var(--hi); letter-spacing: 1px;}
.ol .sr-txt {list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 2px; font-size: 12px;}
.ol .sr-txt li::before {margin-right: 6px; font-weight: 900;}
.ol .sr-txt li.p::before {content: "+"; color: #43D17E;} .ol .sr-txt li.m::before {content: "−"; color: #FF8A8F;}
.ol .srep .btn {width: 100%;}
.ol .scoutp .row2 .btn small {display: block; font-size: 10px;}
.ol .scoutpick {display: grid; grid-template-columns: 1fr 1fr; gap: 6px;}
.ol .scoutpick button {border: 0; border-radius: 12px; padding: 10px; display: grid; gap: 2px; justify-items: start; text-align: left; background: rgba(24,33,27,.06);}
.ol .scoutpick button.on {box-shadow: inset 0 0 0 2px var(--flood); background: var(--night3);}
.ol .scoutpick span {font-size: 20px;} .ol .scoutpick b {font-size: 13px;} .ol .scoutpick small {font-size: 11px; color: var(--dim);}
.ol .scouthire {display: grid; gap: 6px;}
.ol .scouthire .btn small {display: block; font-size: 11px;}
/* Mein Spieler live: Spieltage, Matchplan, Szenen, Ticker */
.ol .pk-vs {font: 400 18px/1.2 var(--f-big); color: #fff; letter-spacing: .02em;}
.ol .pk-vs i {font-style: normal; color: #CFF5DD; font-size: 13px; margin: 0 4px;}
.ol .kc-days i.kr-w {background: #6EE7A0;}
.ol .kc-days i.kr-d {background: #F5D76E;}
.ol .kc-days i.kr-l {background: #FF6B6B;}
.ol .pplans {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.ol .pplan {display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: 14px; background: rgba(24,33,27,.05); color: var(--chalk); border: 2px solid transparent; text-align: center;}
.ol .pplan span {font-size: 22px;}
.ol .pplan b {font-size: 12px;}
.ol .pplan small {font-size: 10px; color: #9FB3C8; line-height: 1.2;}
.ol .pplan.on {border-color: var(--hi); background: rgba(255,204,51,.12);}
.ol .pscene {margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255,204,51,.08); box-shadow: inset 0 0 0 2px rgba(255,204,51,.35);}
.ol .pscene p {margin: 4px 0 10px; font-size: 13px; color: #CFD9E3;}
.ol .pscene .btn small {display: block; font-size: 10px; font-weight: 600; opacity: .8;}
.ol .pscore {display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin-bottom: 10px; text-align: center;}
.ol .pscore span {font-size: 12px; font-weight: 800; color: #CFD9E3; overflow: hidden; text-overflow: ellipsis;}
.ol .pscore b {font: 400 40px/1 var(--f-big); padding: 4px 14px; border-radius: 12px; background: rgba(24,33,27,.06);}
.ol .pscore.w b {color: #6EE7A0;} .ol .pscore.l b {color: #FF6B6B;} .ol .pscore.d b {color: #F5D76E;}
.ol .pticker {margin-top: 10px; display: grid; gap: 4px;}
.ol .pticker p {margin: 0; font-size: 13px; padding: 4px 10px; border-left: 2px solid rgba(255,204,51,.5); color: var(--chalk);}
.ol .rate.sm {min-width: 32px; height: 22px; font-size: 13px; border-radius: 7px;}
.ol .tres .rate {min-width: 0; height: auto; padding: 0 8px; background: none;}
.ol .tres .rate.top {color: var(--hi);} .ol .tres .rate.good {color: #6EE7A0;} .ol .tres .rate.bad {color: #FF6B6B;} .ol .tres .rate.ok {color: #CFD9E3;}
.ol .ptab {display: grid; gap: 2px; margin-top: 8px;}
.ol .ptab div {display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 13px; background: rgba(255,255,255,.03);}
.ol .ptab div i {font-style: normal; color: #9FB3C8;}
.ol .ptab div.up i {color: #6EE7A0;} .ol .ptab div.down i {color: #FF6B6B;}
.ol .ptab div.me {background: rgba(255,204,51,.15); font-weight: 800;}
/* Fußball öffnen */
.ol .bopen {display: grid; justify-items: center; gap: 8px; padding: 6px 0 4px;}
.ol .bstage {position: relative; width: 260px; height: 260px; display: grid; place-items: center;}
.ol .bglow {position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bc) 55%, transparent), transparent 68%); opacity: .35; animation: ol-bpulse 1.8s ease-in-out infinite;}
.ol .bring {position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 6px solid var(--bc); opacity: 0; pointer-events: none;}
.ol .bfoot {position: relative; z-index: 2; width: 150px; height: 150px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 16px 18px rgba(0,0,0,.5)); animation: ol-bfloat 2.4s ease-in-out infinite;}
.ol .bfoot svg {width: 100%; height: 100%; display: block;}
.ol .bfoot.hop {animation: ol-bhop 1.4s ease-in-out infinite;}
.ol .bopen.shake .bfoot {animation: ol-bshake .8s ease-in both;}
.ol .bopen.open .bfoot {animation: ol-bburst .35s ease-out forwards; pointer-events: none;}
.ol .bopen.open .bring {animation: ol-bring .6s ease-out forwards;}
.ol .bopen.open .bglow {opacity: .9; animation: none; transition: opacity .3s;}
.ol .brew {position: absolute; z-index: 3; display: grid; justify-items: center; gap: 8px; opacity: 0; transform: scale(.3);}
.ol .brew b {font-size: 86px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45));}
.ol .brew span {font: 400 26px var(--f-big); color: var(--bc); text-shadow: 0 3px 0 rgba(0,0,0,.35); white-space: nowrap;}
.ol .bopen.open .brew {animation: ol-brew .55s .12s var(--bounce) forwards;}
.ol .bhint {margin: 0; min-height: 18px; color: #9FB3C8; font-size: 13px; font-weight: 800;}
.ol .bbtns {display: grid; gap: 8px; width: 100%; min-height: 10px;}
@keyframes ol-bpulse {0%, 100% {transform: scale(.92);} 50% {transform: scale(1.04);}}
@keyframes ol-bfloat {0%, 100% {transform: translateY(0) rotate(0);} 50% {transform: translateY(-10px) rotate(6deg);}}
@keyframes ol-bhop {0%, 60%, 100% {transform: translateY(0);} 70% {transform: translateY(-22px) rotate(-12deg);} 80% {transform: translateY(0) scale(1.05, .95);} 88% {transform: translateY(-8px) rotate(6deg);}}
@keyframes ol-bshake {0% {transform: none;} 15% {transform: rotate(-14deg) scale(1.04);} 30% {transform: rotate(14deg) scale(1.06);} 45% {transform: rotate(-18deg) scale(1.08);} 60% {transform: rotate(18deg) scale(1.1);} 75% {transform: rotate(-8deg) scale(1.16);} 100% {transform: rotate(0) scale(1.22);}}
@keyframes ol-bburst {to {transform: scale(1.9); opacity: 0;}}
@keyframes ol-bring {0% {opacity: .9; transform: scale(.8);} 100% {opacity: 0; transform: scale(2.2);}}
@keyframes ol-brew {to {opacity: 1; transform: none;}}
/* Scouting-Zeile auf der Startseite */
.ol .scoutrow {width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; border: 0; text-align: left; padding: 12px; border-radius: 16px; margin: 10px 0; color: var(--chalk); background: linear-gradient(135deg, rgba(63,167,245,.18), rgba(63,167,245,.05)); box-shadow: inset 0 0 0 1px rgba(63,167,245,.35);}
.ol .scoutrow > span {font-size: 26px;}
.ol .scoutrow b {display: block; font-size: 14px;}
.ol .scoutrow small {display: block; font-size: 12px; color: #9FB3C8;}
.ol .scoutrow em {font-style: normal; background: rgba(63,167,245,.25); color: #CFE7FF; padding: 5px 10px; border-radius: 10px; font-weight: 900; font-size: 12px; font-variant-numeric: tabular-nums;}
.ol .scoutrow.open em, .ol .scoutrow.hot em {background: var(--flood); color: #2A1E00;}
.ol .scoutrow.hot {animation: ol-wiggle 1.6s ease-in-out infinite;}
/* ---------- Bälle v2: Seltenheit, Aufwertung, Belohnungskarten ---------- */
.ol .bx {display: grid; justify-items: center; gap: 6px; padding: 4px 0 2px; --bc: #F6F1E4;}
.ol .bx-stage {position: relative; width: 100%; height: 290px; display: grid; place-items: center; overflow: hidden; border-radius: 22px; background: radial-gradient(70% 60% at 50% 45%, color-mix(in srgb, var(--bc) 22%, #0C1B2A), #070F18 80%); transition: background .4s;}
.ol .bx-rays {position: absolute; left: 50%; top: 45%; width: 620px; height: 620px; margin: -310px 0 0 -310px; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--bc) 45%, transparent) 0 8deg, transparent 8deg 22deg); border-radius: 50%; opacity: .18; animation: ol-rays 14s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); transition: opacity .4s;}
.ol .bx-glow {position: absolute; left: 50%; top: 45%; width: 230px; height: 230px; margin: -115px 0 0 -115px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--bc) 70%, transparent), transparent 70%); opacity: .5; animation: ol-bpulse 1.8s ease-in-out infinite;}
.ol .bx-ring {position: absolute; left: 50%; top: 45%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 6px solid var(--bc); opacity: 0; pointer-events: none;}
.ol .bx-ball {position: relative; z-index: 2; width: 150px; height: 150px; margin-top: -30px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; filter: drop-shadow(0 18px 18px rgba(0,0,0,.55)) drop-shadow(0 0 22px color-mix(in srgb, var(--bc) 60%, transparent)); animation: ol-bfloat 2.4s ease-in-out infinite;}
.ol .bx-ball svg, .ol .bsvg {width: 100%; height: 100%; display: block;}
.ol .bx-ball.hop {animation: ol-bhop 1.4s ease-in-out infinite;}
.ol .bx-tier {position: absolute; z-index: 3; bottom: 22px; left: 0; right: 0; text-align: center; font: 400 26px var(--f-big); letter-spacing: .06em; color: var(--bc); text-shadow: 0 3px 0 rgba(0,0,0,.4), 0 0 18px color-mix(in srgb, var(--bc) 60%, transparent);}
.ol .bx-tier.pop {animation: ol-tierpop .5s var(--bounce);}
.ol .bx.shake .bx-ball {animation: ol-bshake2 .5s ease-in-out infinite;}
.ol .bx.shake .bx-rays {opacity: .35; animation-duration: 5s;}
.ol .bx.up .bx-ring {animation: ol-bring .55s ease-out;}
.ol .bx.up .bx-stage {animation: ol-flash .45s ease-out;}
.ol .bx.open .bx-ball {animation: ol-bburst .35s ease-out forwards; pointer-events: none;}
.ol .bx.open .bx-ring {animation: ol-bring .7s ease-out forwards;}
.ol .bx.open .bx-rays {opacity: .45; animation-duration: 9s;}
.ol .bx.open .bx-tier {bottom: auto; top: 30px; font-size: 34px; animation: ol-tierpop .55s var(--bounce);}
.ol .bx.open .bx-stage {height: 120px;}
.ol .bx-stage {transition: height .45s cubic-bezier(.3,.7,.3,1), background .4s;}
.ol .bx-items {display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 8px; width: 100%; margin-top: -4px; perspective: 900px;}
.ol .bx-items:empty {display: none;}
.ol .bx-card {position: relative; aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; transform: translateY(-120px) scale(.3) rotate(-20deg); animation: ol-deal .5s var(--d) cubic-bezier(.2,.9,.3,1.2) forwards;}
.ol .bx-in {position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.4,.5,1);}
.ol .bx-card.flip .bx-in {transform: rotateY(180deg);}
.ol .bx-back, .ol .bx-front {position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; justify-items: center; align-content: center; gap: 3px; overflow: hidden;}
.ol .bx-back {background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 6px, transparent 6px 12px), linear-gradient(160deg, color-mix(in srgb, var(--bc) 55%, #16304A), #0C1B2A); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--bc) 70%, transparent), 0 10px 18px -8px rgba(0,0,0,.7);}
.ol .bx-back i {width: 46%; display: block;}
.ol .bx-back em {font: 400 11px var(--f-big); letter-spacing: .14em; font-style: normal; color: rgba(255,255,255,.75);}
.ol .bx-front {transform: rotateY(180deg); background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--bc) 60%, #fff 10%), color-mix(in srgb, var(--bc) 25%, #0C1B2A) 60%, #0A1522); box-shadow: inset 0 0 0 3px var(--bc), 0 0 22px -4px var(--bc), 0 12px 20px -8px rgba(0,0,0,.7); padding: 6px 2px;}
.ol .bx-r {position: absolute; top: 6px; left: 0; right: 0; text-align: center; font: 900 8px var(--f-body) !important; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.85) !important;}
.ol .bx-ic {font-size: 34px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0,0,0,.45)); margin-top: 8px;}
.ol .bx-card.flip .bx-ic {animation: ol-icpop .5s .3s var(--bounce) both;}
.ol .bx-front b {font: 400 21px var(--f-big); color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0,0,0,.35);}
.ol .bx-front small {font-size: 9.5px; font-weight: 800; color: #E6EDF4; text-align: center; line-height: 1.15;}
.ol .bx-shine {position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%); transform: translateX(-100%); pointer-events: none;}
.ol .bx-card.done .bx-shine {animation: ol-shine 1s ease-out;}
.ol .bx.t3 .bx-front, .ol .bx.t4 .bx-front {background: conic-gradient(from 0deg, rgba(255,255,255,.12), transparent 25%, rgba(255,255,255,.12) 50%, transparent 75%, rgba(255,255,255,.12)), radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--bc) 70%, #fff 15%), color-mix(in srgb, var(--bc) 30%, #0C1B2A) 60%, #0A1522);}
.ol .bx.t4 .bx-card.done .bx-front {animation: ol-holo 2.4s linear infinite;}
@keyframes ol-deal {0% {opacity: 0; transform: translateY(-120px) scale(.3) rotate(-20deg);} 100% {opacity: 1; transform: none;}}
@keyframes ol-icpop {0% {transform: scale(.2) rotate(-30deg);} 100% {transform: none;}}
@keyframes ol-shine {to {transform: translateX(100%);}}
@keyframes ol-holo {0%, 100% {filter: hue-rotate(0deg) brightness(1);} 50% {filter: hue-rotate(25deg) brightness(1.15);}}
.ol .bx-hint {margin: 2px 0 0; min-height: 18px; color: #9FB3C8; font-size: 13px; font-weight: 800;}
.ol .bx-btns {display: grid; gap: 8px; width: 100%;}
@keyframes ol-rays {to {transform: rotate(360deg);}}
@keyframes ol-bshake2 {0%, 100% {transform: rotate(0) scale(1.06);} 25% {transform: rotate(-12deg) scale(1.1);} 75% {transform: rotate(12deg) scale(1.1);}}
@keyframes ol-tierpop {0% {transform: scale(.4); opacity: 0;} 60% {transform: scale(1.25); opacity: 1;} 100% {transform: none;}}
@keyframes ol-flash {0% {box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--bc) 45%, transparent);} 100% {box-shadow: inset 0 0 0 999px transparent;}}
@keyframes ol-cardin {to {opacity: 1; transform: none;}}
/* Bälle auf der Startseite */
.ol .pslot .pball {width: 34px; height: 34px; display: block;}
.ol .pslot b {font-size: 12px !important; font-weight: 900;}
.ol .pslot.ready {background: linear-gradient(160deg, rgba(155,92,240,.55), rgba(63,167,245,.35)); animation: ol-wiggle 1.6s ease-in-out infinite;}
.ol .pslot.ready b, .ol .pslot.ready small {color: #fff;}
.ol .pslot:not(.ready) .pball {filter: grayscale(.7) brightness(.7);}
.ol .ballrow .bstack {display: flex; width: 44px; height: 30px; animation: ol-wiggle 1.6s ease-in-out infinite;}
.ol .ballrow .bstack svg {width: 26px; height: 26px; flex: none; margin-right: -12px;}
.ol .ballrow {grid-template-columns: 44px 1fr auto;}
.ol .cc-tags .sulk {background: rgba(240,72,78,.2); color: #FF9A9E;}
/* ---------- Online-Duell ---------- */
.ol .pvptile {width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; border: 0; text-align: left; padding: 14px; border-radius: 18px; margin-bottom: 12px; color: #fff; background: linear-gradient(120deg, #F0484E, #9B5CF0 60%, #3FA7F5); box-shadow: 0 12px 26px -12px rgba(155,92,240,.8), inset 0 0 0 2px rgba(255,255,255,.18);}
.ol .pvptile > span {font-size: 32px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4));}
.ol .pvptile b {display: block; font: 400 22px var(--f-big);}
.ol .pvptile small {font-size: 12px; font-weight: 800; opacity: .9;}
.ol .pvptile em {font-style: normal; background: #fff; color: #3A1475; padding: 6px 12px; border-radius: 12px; font-weight: 900; font-size: 13px;}
.ol .pvphead {padding: 18px 16px; border-radius: 22px; margin-bottom: 12px; background: radial-gradient(120% 90% at 50% 0%, #6E2BD9, #2A0F55 60%, #0C1B2A); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);}
.ol .pvphead h1 {font: 400 34px var(--f-big); margin: 2px 0 6px;}
.ol .pvphead p {margin: 0 0 12px; font-size: 13px; color: #DCCBFF;}
.ol .pvpme {display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;}
.ol .pvpme div {background: rgba(24,33,27,.06); border-radius: 14px; padding: 8px; text-align: center;}
.ol .pvpme b {display: block; font: 400 26px var(--f-big);}
.ol .pvpme small {font-size: 11px; color: #DCCBFF; font-weight: 800;}
.ol .pvpgo {width: 100%; margin-bottom: 12px;}
.ol .pvpsearch {text-align: center;}
.ol .pvpradar {position: relative; width: 120px; height: 120px; margin: 6px auto 8px; display: grid; place-items: center;}
.ol .pvpradar i {position: absolute; inset: 0; border-radius: 50%; border: 3px solid #9B5CF0; animation: ol-radar 1.8s ease-out infinite;}
.ol .pvpradar i + i {animation-delay: .9s;}
.ol .pvpradar span {font-size: 44px; animation: ol-wiggle 1.6s ease-in-out infinite;}
@keyframes ol-radar {0% {transform: scale(.3); opacity: 1;} 100% {transform: scale(1.2); opacity: 0;}}
.ol .pvpcode {font: 400 54px var(--f-big); letter-spacing: .2em; color: var(--hi); margin: 6px 0;}
.ol .pvpbar {display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(24,33,27,.06); margin-bottom: 8px;}
.ol .pvpbar div:last-child {text-align: right;}
.ol .pvpbar b {display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.ol .pvpbar small {font-size: 12px; color: #9FB3C8; font-weight: 800;}
.ol .pvpbar .me b {color: var(--hi);}
.ol .pvpbar em {font: 400 20px var(--f-big); font-style: normal; color: #B98BFF;}
.ol .pvpdots {display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 12px;}
.ol .pvpdots i {height: 6px; border-radius: 3px; background: rgba(24,33,27,.05);}
.ol .pvpdots i.cur {background: var(--flood); animation: ol-pulse 1.2s infinite;}
.ol .pvpdots i.w {background: #6EE7A0;} .ol .pvpdots i.l {background: #FF6B6B;} .ol .pvpdots i.n {background: #5C7A99;}
.ol .pvplot {padding: 14px; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, #1F3F63, #0C1B2A 70%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);}
.ol .pl-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;}
.ol .pl-cd {font: 400 30px var(--f-big); color: #fff; font-variant-numeric: tabular-nums;}
.ol .pl-cd.soon, .ol .pl-cd[data-cd].soon {color: #FF6B6B;}
.ol .pl-card {display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; margin-bottom: 12px;}
.ol .pl-card .cc-face {width: 96px; height: 96px; border-radius: 20px; overflow: hidden; background: rgba(24,33,27,.05);}
.ol .pl-card h2 {font: 400 22px/1.1 var(--f-big); margin: 0 0 2px;}
.ol .pl-card > div > small {font-size: 12px; color: #9FB3C8;}
.ol .pl-st {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px;}
.ol .pl-st span {background: rgba(24,33,27,.06); border-radius: 10px; padding: 5px 4px; text-align: center;}
.ol .pl-st b {display: block; font: 400 16px var(--f-big);}
.ol .pl-st small {font-size: 9.5px; color: #9FB3C8; font-weight: 800;}
.ol .pl-tr {display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px;}
.ol .pl-tr span {font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 8px; background: rgba(110,231,160,.15); color: #9FF0C2;}
.ol .pl-tr span.bad {background: rgba(255,107,107,.15); color: #FFA3A3;}
.ol .pl-amt {display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; text-align: center; margin-bottom: 8px;}
.ol .pl-amt b {font: 400 34px var(--f-big); color: var(--hi);}
.ol .pl-quick {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px;}
.ol .pl-quick .chip2 {text-align: center; justify-content: center;}
.ol .pl-sent {text-align: center; padding: 14px; border-radius: 14px; background: rgba(255,204,51,.1);}
.ol .pl-sent b {display: block; font: 400 30px var(--f-big); color: var(--hi);}
.ol .pl-sent small {color: #9FB3C8; font-weight: 800;}
.ol .pvpreveal {display: grid; justify-items: center; gap: 8px; text-align: center; padding: 20px 14px; border-radius: 22px; background: radial-gradient(120% 80% at 50% 0%, #1F3F63, #0C1B2A 70%);}
.ol .pvpreveal.w {background: radial-gradient(120% 80% at 50% 0%, #1F8A4C, #0C1B2A 75%);}
.ol .pvpreveal.l {background: radial-gradient(120% 80% at 50% 0%, #8A1F26, #0C1B2A 75%);}
.ol .pvpreveal .cc-face {width: 84px; height: 84px; border-radius: 50%; overflow: hidden; animation: ol-tierpop .5s var(--bounce);}
.ol .pvpreveal h2 {font: 400 24px/1.2 var(--f-big); margin: 0;}
.ol .pvpreveal h2 small {font-size: 14px; color: #9FB3C8;}
.ol .pvpreveal h3 {font: 400 20px var(--f-big); margin: 4px 0 0;}
.ol .pvpbids {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%;}
.ol .pvpbids div {background: rgba(24,33,27,.06); border-radius: 14px; padding: 10px;}
.ol .pvpbids div.top {box-shadow: inset 0 0 0 2px var(--flood);}
.ol .pvpbids small {font-size: 11px; color: #9FB3C8; font-weight: 800;}
.ol .pvpbids b {display: block; font: 400 26px var(--f-big);}
.ol .pvpres {text-align: center; padding: 20px 14px; border-radius: 22px; margin-bottom: 12px; background: radial-gradient(120% 80% at 50% 0%, #2A3F5F, #0C1B2A 75%);}
.ol .pvpres.w {background: radial-gradient(120% 80% at 50% 0%, #C99A10, #3A2A00 55%, #0C1B2A);}
.ol .pvpres.l {background: radial-gradient(120% 80% at 50% 0%, #6E0F14, #0C1B2A 75%);}
.ol .pvpres h1 {font: 400 40px var(--f-big); margin: 4px 0 10px;}
.ol .pvpsc {display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.ol .pvpsc div {background: rgba(24,33,27,.06); border-radius: 14px; padding: 10px;}
.ol .pvpsc small {font-size: 11px; color: #CFD9E3; font-weight: 800;}
.ol .pvpsc b {display: block; font: 400 24px var(--f-big);}
.ol .pvpdp {font: 400 22px var(--f-big); margin: 10px 0 0;}
.ol .pvpdp.up {color: #6EE7A0;} .ol .pvpdp.down {color: #FF8A8F;}
.ol .wheelpanel .wpeak {display: block; font-size: 12px; color: #9FB3C8;}
.ol .wheelpanel .wpeak b {color: var(--hi); font-size: 14px;}
.ol .hofdel {display: block; margin: 10px auto 0; color: #FF8A8F;}
.ol .hofdel.sure {color: #fff; background: rgba(240,72,78,.35); padding: 8px 12px; border-radius: 12px; text-decoration: none;}