@font-face { font-family: 'Andika'; src: url(andika-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Andika'; src: url(andika-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root { --goud: #f6c234; --goud-d: #b8860b; --blauw: #2f6fd6; --rood: #ff4a3d; --groen: #3ad06b; --hout: #6b3f1d; --tekst: #fffaf0; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0e1420; overflow: hidden; }
body { font-family: 'Andika', 'Trebuchet MS', Arial, sans-serif; color: var(--tekst); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
#buiten { position: fixed; inset: 0; }
#stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden; background: #3d6fb0; }
#stage.beef { animation: beef .4s; }
@keyframes beef { 20% { margin-left: -14px; margin-top: 6px; } 40% { margin-left: 12px; margin-top: -6px; } 60% { margin-left: -8px; } 80% { margin-left: 5px; } }
#draai { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  #draai { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; padding: 10px 14px; border-radius: 12px; background: #fff; color: #222; font-size: 15px; text-align: center; z-index: 99; }
}
button { font-family: inherit; cursor: pointer; color: inherit; border: 0; }
.verborgen { display: none !important; }

.decor { position: absolute; inset: 0; background: linear-gradient(#7cc3ff 0 55%, #e9c27a 55%); background-size: cover; background-position: center bottom; }
.scherm { position: absolute; inset: 0; }

/* bovenbalk */
.balk { position: absolute; left: 0; right: 0; top: 0; height: 84px; display: flex; align-items: center; gap: 18px; padding: 0 26px; z-index: 30; background: linear-gradient(rgba(10,14,24,.55), rgba(10,14,24,0)); }
.balk .titel { font-size: 32px; font-weight: 700; text-shadow: 0 2px 0 #000, 0 0 10px #000; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knopje { height: 56px; min-width: 56px; padding: 0 18px; border-radius: 14px; background: linear-gradient(#8a5a32, #5c3517); border: 3px solid #3a200b; box-shadow: 0 4px 0 #2a1607, inset 0 2px 0 rgba(255,255,255,.25); font-size: 22px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff4dc; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.knopje:active { transform: translateY(3px); box-shadow: 0 1px 0 #2a1607; }
.muntteller { height: 56px; padding: 0 20px 0 10px; border-radius: 30px; background: rgba(0,0,0,.6); border: 3px solid var(--goud-d); display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 700; color: var(--goud); }
.muntteller.pop { animation: pop .3s; }
@keyframes pop { 50% { transform: scale(1.18); } }
.munticoon { display: inline-block; vertical-align: middle; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c0, #f6c234 35%, #b8860b 75%); box-shadow: inset 0 0 0 3px #9a6f05, inset 0 0 0 6px #f7d65a; position: relative; }
.munticoon::after { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #9a6f05; font-size: 26px; font-weight: 700; }

/* knoppen en panelen */
.paneel { position: absolute; background: linear-gradient(#fff8e6, #f1dfb8); color: #3a2410; border: 6px solid #7a4a22; border-radius: 26px; box-shadow: 0 0 0 4px #c99a4d inset, 0 20px 50px rgba(0,0,0,.5); }
.grote-knop { height: 92px; padding: 0 44px; border-radius: 22px; font-size: 38px; font-weight: 700; background: linear-gradient(#ffe27a, #f6c234 50%, #c9930a); color: #3a2a05; box-shadow: 0 7px 0 #7a5800, 0 0 30px rgba(246,194,52,.35); }
.grote-knop:active { transform: translateY(4px); box-shadow: 0 3px 0 #7a5800; }
.kleine-knoppen { display: flex; gap: 12px; margin-top: 18px; }
.kleine-knoppen .knopje { font-size: 20px; height: 52px; }
.klein { font-size: 20px; color: #7a5a3a; }

/* startscherm */
.logo { position: absolute; left: 640px; top: 70px; width: 920px; text-align: center; z-index: 5; }
.logo h1 { margin: 0; font-size: 124px; line-height: 1; letter-spacing: 4px; font-weight: 700; color: #ffe27a; -webkit-text-stroke: 4px #5c3517; text-shadow: 0 8px 0 #5c3517, 0 14px 24px rgba(0,0,0,.5); transform: rotate(-2deg); }
.logo p { margin: 10px 0 0; font-size: 30px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 #000, 0 0 12px #000; }
.startpaneel { left: 720px; top: 300px; width: 780px; padding: 26px 34px; }
.label { font-size: 25px; font-weight: 700; }
.rij { display: flex; gap: 14px; margin: 10px 0 18px; }
.soortknop { flex: 1; height: 110px; border-radius: 18px; background: linear-gradient(#fff, #e9d6ad); border: 4px solid #b48a4c; box-shadow: 0 5px 0 #8a6530; font-size: 22px; font-weight: 700; color: #5c3517; line-height: 1.1; }
.soortknop b { display: block; font-size: 40px; color: var(--blauw); margin-bottom: 4px; }
.soortknop.aan { background: linear-gradient(#ffe27a, #f6c234); border-color: #9a6f05; box-shadow: 0 5px 0 #7a5800, 0 0 20px rgba(246,194,52,.7); }
.schakel { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(122,74,34,.12); font-size: 22px; text-align: left; width: 100%; color: #3a2410; }
.schakel .bol { width: 86px; height: 46px; border-radius: 30px; background: #b9a888; position: relative; flex: none; transition: background .2s; }
.schakel .bol::after { content: ''; position: absolute; left: 5px; top: 5px; width: 36px; height: 36px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 2px 4px rgba(0,0,0,.4); }
.schakel.aan .bol { background: var(--rood); }
.schakel.aan .bol::after { left: 45px; }
.schakel b { font-size: 24px; }
.schakel small { display: block; color: #7a5a3a; font-size: 18px; }

/* figuren */
.figuur { position: absolute; background-size: contain; background-repeat: no-repeat; background-position: bottom center; pointer-events: none; z-index: 6; }
.figuur svg { width: 100%; height: 100%; }
.bas { filter: drop-shadow(0 14px 12px rgba(0,0,0,.45)); animation: adem 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes adem { 50% { transform: scaleY(1.015) translateY(-2px); } }
.bas.val { animation: val .7s cubic-bezier(.3,.7,.4,1); }
@keyframes val { 35% { transform: translateX(420px) scale(1.05); } 55% { transform: translateX(400px); } 100% { transform: none; } }
.bas.gloed { filter: drop-shadow(0 0 22px rgba(120,210,255,.95)) drop-shadow(0 14px 12px rgba(0,0,0,.45)); }
.bas.vlucht { animation: vlucht 1s ease-in forwards; }
@keyframes vlucht { to { transform: translateX(-700px) rotate(-8deg); } }
.monster { z-index: 5; }
.monster .lijf { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: bottom center; filter: drop-shadow(0 16px 12px rgba(0,0,0,.45)); animation: zweef 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes zweef { 50% { transform: translateY(-10px) scale(1.02, .98); } }
.monster.variant .lijf { filter: hue-rotate(120deg) saturate(1.2) drop-shadow(0 16px 12px rgba(0,0,0,.45)); }
.monster.komt { animation: komt .8s cubic-bezier(.2,.8,.3,1.2); }
@keyframes komt { from { transform: translateX(600px); } }
.monster.baas.komt { animation: baaskomt 1.1s cubic-bezier(.3,1.4,.5,1); }
@keyframes baaskomt { 0% { transform: translateY(-900px); } 70% { transform: translateY(0) scale(1.1, .85); } 100% { transform: none; } }
.monster.laadt .lijf { animation: laadt .15s infinite; filter: drop-shadow(0 0 22px rgba(255,60,40,.9)); }
@keyframes laadt { 50% { transform: translateX(5px) rotate(1deg); } }
.monster.geraakt .lijf { animation: geraakt .45s; }
@keyframes geraakt { 0% { filter: brightness(3) saturate(0); transform: translateX(30px) rotate(6deg); } 40% { filter: brightness(1.6) sepia(1) hue-rotate(-40deg) saturate(4); transform: translateX(-10px); } 100% { filter: none; } }
.monster.valtaan { animation: valtaan .8s cubic-bezier(.4,0,.3,1); }
@keyframes valtaan { 35% { transform: translateX(-520px) scale(1.08); } 55% { transform: translateX(-500px); } 100% { transform: none; } }
.monster.weg { animation: weg .7s ease-in forwards; }
@keyframes weg { 30% { transform: scale(1.15) rotate(-10deg); filter: brightness(2.5); } 100% { transform: scale(0) rotate(200deg); opacity: 0; } }

.ballon { position: absolute; z-index: 25; max-width: 470px; padding: 16px 22px; border-radius: 22px; background: #fffdf3; color: #1a2233; font-size: 26px; line-height: 1.25; font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,.45); border: 3px solid #7a4a22; }
.ballon::after { content: ''; position: absolute; left: 34px; bottom: -20px; border: 12px solid transparent; border-top: 16px solid #7a4a22; }
.ballon.onder::after { display: none; }
.ballon.leeg { display: none; }

/* kaart */
.padlaag { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.padlaag svg { width: 100%; height: 100%; }
.padlaag path { fill: none; stroke: #fff3cf; stroke-width: 14; stroke-dasharray: 2 30; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.arenaknop { position: absolute; width: 210px; text-align: center; z-index: 4; background: none; padding: 0; }
.arenaknop .rond { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--kl) 70%); background-size: 120%; background-position: center 30%; border: 7px solid #fff3cf; box-shadow: 0 0 0 5px #5c3517, 0 10px 18px rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; color: #3a2410; transition: transform .15s; }
.arenaknop .rond[style*="url"] { background-color: var(--kl); background-size: 130%; background-repeat: no-repeat; }
.arenaknop:hover .rond { transform: scale(1.07); }
.arenaknop .naam { margin-top: 8px; display: inline-block; padding: 4px 14px; border-radius: 12px; background: #5c3517; color: #fff3cf; font-size: 22px; font-weight: 700; box-shadow: 0 3px 0 #2a1607; }
.arenaknop .tafels { font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 2px 0 #000, 0 0 8px #000; margin-top: 3px; }
.arenaknop .sterren { font-size: 30px; color: rgba(0,0,0,.35); letter-spacing: 2px; line-height: 1; }
.arenaknop .sterren .s { color: var(--goud); text-shadow: 0 0 8px rgba(246,194,52,.8), 0 2px 0 #7a5800; }
.arenaknop.dicht { filter: grayscale(.85) brightness(.75); }
.arenaknop.dicht .rond::after { content: '🔒'; position: absolute; font-size: 46px; }
.arenaknop.gewonnen .rond { border-color: var(--goud); box-shadow: 0 0 0 5px #7a5800, 0 0 30px rgba(246,194,52,.8); }
.arenaknop.finale .rond { width: 170px; height: 170px; }
.arenaknop.uitdaging .naam { background: #5b3d9a; }
.kaartknoppen { position: absolute; right: 30px; bottom: 26px; display: flex; gap: 12px; z-index: 6; }
.kaartknoppen .knopje { height: 64px; font-size: 24px; }

/* vrij en tafelkaart */
.vrijpaneel { left: 520px; top: 130px; width: 1000px; padding: 26px 40px; text-align: center; }
.vrijpaneel h2 { margin: 0 0 18px; font-size: 40px; }
.tafelgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 14px; }
.tafelknop { height: 96px; border-radius: 18px; font-size: 46px; font-weight: 700; background: linear-gradient(#fff, #e9d6ad); border: 4px solid #b48a4c; box-shadow: 0 5px 0 #8a6530; color: #5c3517; }
.tafelknop.groot { color: #5b3d9a; }
.tafelknop.aan { background: linear-gradient(#ffe27a, #f6c234); border-color: #9a6f05; box-shadow: 0 5px 0 #7a5800, 0 0 18px rgba(246,194,52,.7); }
.kaartpaneel { left: 220px; top: 100px; width: 1160px; padding: 20px 30px; }
.tk { width: 100%; border-collapse: separate; border-spacing: 5px; font-size: 22px; font-weight: 700; }
.tk th { color: #7a4a22; font-size: 20px; }
.tk .rijkop { text-align: right; padding-right: 10px; cursor: pointer; white-space: nowrap; text-decoration: underline dotted; }
.tk td { height: 50px; border-radius: 10px; text-align: center; }
.st0 { background: #e2d6bd; color: #a8957a; }
.st1 { background: #ff8a7a; color: #6e140e; }
.st2 { background: #ffe27a; color: #6a4a00; }
.st3 { background: #6fdc8c; color: #0d5a26; }
.legenda { display: flex; gap: 12px; align-items: center; margin-top: 12px; font-size: 20px; flex-wrap: wrap; }
.legenda span { padding: 6px 14px; border-radius: 10px; font-weight: 700; }
.legenda b { margin-left: auto; font-size: 24px; }

/* gevecht */
.veld { position: absolute; inset: 0; z-index: 4; }
.schilden { position: absolute; left: 110px; top: 160px; display: flex; gap: 10px; z-index: 12; }
.schilden .sch { width: 58px; height: 66px; background: radial-gradient(circle at 50% 35%, #8ec5ff, #2f6fd6 60%, #1b3f80); clip-path: path('M29 0 L58 10 L54 40 Q48 58 29 66 Q10 58 4 40 L0 10 Z'); position: relative; transition: all .3s; filter: drop-shadow(0 3px 0 #0b1d40); }
.schilden .sch::after { content: '×'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 700; color: #f6c234; }
.schilden .sch.kapot { background: #555c66; opacity: .45; transform: rotate(-12deg) scale(.85); }
.schilden .rustig { padding: 8px 16px; border-radius: 14px; background: rgba(0,0,0,.5); font-size: 22px; font-weight: 700; color: #b8ffcb; }
.rondes { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); display: flex; gap: 10px; z-index: 31; }
.rondes span { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,.5); border: 3px solid rgba(255,255,255,.5); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; }
.rondes .nu { background: var(--goud); color: #3a2a05; border-color: #fff; box-shadow: 0 0 14px rgba(246,194,52,.9); }
.rondes .af { background: var(--groen); border-color: #fff; }
.rondes .b { font-size: 26px; }
.combo { position: absolute; left: 110px; top: 234px; font-size: 28px; font-weight: 700; color: #ffd27a; text-shadow: 0 2px 0 #000, 0 0 10px #ff6a00; opacity: 0; transition: opacity .3s; z-index: 12; }
.combo.aan { opacity: 1; }
.combo.heet { color: #fff; font-size: 34px; animation: pop .5s infinite; }

.bord { position: absolute; left: 540px; top: 100px; width: 520px; padding: 18px 20px 22px; border-radius: 24px; background: linear-gradient(#8a5a32, #5c3517); border: 6px solid #3a200b; box-shadow: inset 0 3px 0 rgba(255,255,255,.25), 0 14px 30px rgba(0,0,0,.5); text-align: center; z-index: 10; }
.bord::before, .bord::after { content: ''; position: absolute; top: -60px; width: 10px; height: 60px; background: #3a200b; }
.bord::before { left: 70px; } .bord::after { right: 70px; }
.som { font-size: 92px; font-weight: 700; line-height: 1.05; color: #fff8e0; text-shadow: 0 4px 0 #2a1607; white-space: nowrap; }
.som.nieuw { animation: somIn .35s cubic-bezier(.3,1.6,.5,1); }
@keyframes somIn { from { transform: scale(.4); opacity: 0; } }
.invoer { margin: 6px auto 0; width: 230px; height: 104px; border-radius: 18px; background: #fffdf3; color: #2a1607; border: 5px solid #f6c234; font-size: 84px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 4px 8px rgba(0,0,0,.2); }
.invoer .cursor { color: #d6c7a6; animation: knip 1s infinite; }
@keyframes knip { 50% { opacity: .3; } }
.invoer .goed { color: #1b9a43; }
.invoer .fout { color: #d02a1e; text-decoration: line-through; }

.hpbalk { position: absolute; width: 400px; z-index: 11; text-align: center; }
.hpbalk .mnaam { display: inline-block; padding: 2px 14px; border-radius: 10px; background: rgba(0,0,0,.6); font-size: 22px; font-weight: 700; }
.hpbalk .harten { font-size: 34px; color: #ff4a6e; text-shadow: 0 2px 0 #6e0e22; letter-spacing: 2px; line-height: 1.1; }
.hpbalk .harten .leeg { color: rgba(0,0,0,.35); text-shadow: none; }
.hpbalk .meter { position: relative; margin: 4px auto 0; width: 300px; height: 22px; border-radius: 12px; background: rgba(0,0,0,.55); border: 3px solid #fff3cf; overflow: hidden; }
.hpbalk .meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #ffd23a, #ff8a00, #ff2a1a); }
.hpbalk .meter span { position: absolute; right: 6px; top: -4px; font-size: 20px; }

.toetsen { position: absolute; left: 290px; top: 770px; width: 1020px; display: flex; gap: 8px; justify-content: center; z-index: 12; padding: 12px; border-radius: 22px; background: rgba(40,22,8,.72); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.toets { width: 70px; height: 86px; border-radius: 14px; font-size: 44px; font-weight: 700; background: linear-gradient(#fffaf0, #e9d6ad); color: #3a2410; box-shadow: 0 6px 0 #8a6530; }
.toets:active, .toets.druk { transform: translateY(4px); box-shadow: 0 2px 0 #8a6530; }
.toets.terug { width: 86px; font-size: 36px; background: linear-gradient(#ffd9c9, #e9a98d); box-shadow: 0 6px 0 #9a4a2a; }
.toets.ok { width: 190px; font-size: 32px; background: linear-gradient(#8ec5ff, #2f6fd6); color: #fff; box-shadow: 0 6px 0 #173e80; text-shadow: 0 2px 0 rgba(0,0,0,.3); }

.uitlegpaneel { left: 500px; top: 320px; width: 600px; padding: 20px 28px 24px; text-align: center; z-index: 14; animation: somIn .3s; }
.uitlegpaneel .kop { font-size: 26px; font-weight: 700; color: #a0461e; }
.uitlegpaneel .goedsom { font-size: 64px; font-weight: 700; line-height: 1.1; }
.uitlegpaneel .goedsom b { color: #1b9a43; }
.uitlegpaneel .tip { font-size: 25px; margin: 8px 0 10px; line-height: 1.3; }
.uitlegpaneel .tip b { color: #1b9a43; }
.uitlegpaneel .grote-knop { height: 74px; font-size: 32px; margin-top: 10px; }
.stippen { display: inline-flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-radius: 12px; background: rgba(122,74,34,.12); }
.srij { display: flex; gap: 4px; }
.srij:nth-child(5n) { margin-bottom: 6px; }
.stippen.klein i { width: 11px; height: 11px; }
.stippen.klein .srij { gap: 3px; }
.stippen i { width: 16px; height: 16px; border-radius: 50%; background: #2f6fd6; }
.srij i:nth-child(5n) { margin-right: 6px; }
.srij:nth-child(odd) i { background: #ff7a3d; }
.stiptekst { font-size: 18px; color: #7a5a3a; }

.slash { position: absolute; width: 360px; height: 360px; z-index: 13; pointer-events: none; background: radial-gradient(ellipse 50% 12% at 50% 50%, #fff 0 40%, rgba(140,220,255,.9) 60%, rgba(140,220,255,0) 100%); transform: rotate(-35deg) scaleX(.1); animation: slash .45s ease-out forwards; }
.slash.goud { background: radial-gradient(ellipse 50% 14% at 50% 50%, #fff 0 40%, rgba(255,210,60,.95) 60%, rgba(255,160,0,0) 100%); }
@keyframes slash { 30% { transform: rotate(-35deg) scaleX(1.2); opacity: 1; } 100% { transform: rotate(-35deg) scaleX(1.4); opacity: 0; } }
.schade { position: absolute; width: 240px; text-align: center; z-index: 14; font-size: 70px; font-weight: 700; color: #fff; -webkit-text-stroke: 3px #b3190e; text-shadow: 0 4px 0 #6e0e0e; animation: schade 1.1s ease-out forwards; pointer-events: none; }
.schade.kritiek { font-size: 64px; color: #ffe27a; -webkit-text-stroke: 3px #7a5800; }
@keyframes schade { 0% { transform: translateY(20px) scale(.4); opacity: 0; } 25% { transform: translateY(-20px) scale(1.2); opacity: 1; } 100% { transform: translateY(-120px) scale(1); opacity: 0; } }
.poef { position: absolute; width: 400px; height: 400px; z-index: 13; pointer-events: none; }
.poef i { position: absolute; left: 150px; top: 150px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff, #d9dce6 60%, rgba(200,200,210,0) 72%); animation: wolk 1.1s ease-out forwards; transform: rotate(var(--h)); }
@keyframes wolk { from { transform: rotate(var(--h)) translateX(0) scale(.3); opacity: 1; } to { transform: rotate(var(--h)) translateX(170px) scale(1.6); opacity: 0; } }

.laag { position: absolute; inset: 0; z-index: 50; background: rgba(10,14,24,.55); display: flex; align-items: center; justify-content: center; }
.uitslag { position: relative; width: 820px; padding: 34px 40px; text-align: center; animation: somIn .4s; }
.uitslag h2 { margin: 0; font-size: 58px; color: #7a4a22; }
.uitslag p { font-size: 27px; margin: 12px 0; }
.uitslag .sterren { font-size: 96px; color: rgba(0,0,0,.18); letter-spacing: 10px; line-height: 1.1; }
.uitslag .sterren .s { color: var(--goud); display: inline-block; animation: ster .6s backwards cubic-bezier(.3,1.8,.5,1); text-shadow: 0 0 18px rgba(246,194,52,.8), 0 4px 0 #7a5800; }
@keyframes ster { from { transform: scale(0) rotate(-180deg); } }
.uitslag .knoppen { display: flex; gap: 14px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; }

.muntlaag { position: absolute; inset: 0; z-index: 60; pointer-events: none; perspective: 900px; transform-style: preserve-3d; }
.vliegmunt { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c0, #f6c234 35%, #b8860b 75%); box-shadow: inset 0 0 0 4px #9a6f05, inset 0 0 0 8px #f7d65a, 0 0 14px rgba(246,194,52,.6); }

.film { position: absolute; inset: 0; z-index: 80; background: #000; }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film .ondertitel { position: absolute; left: 160px; right: 160px; bottom: 50px; text-align: center; font-size: 34px; font-weight: 700; text-shadow: 0 2px 0 #000, 0 0 12px #000, 0 0 4px #000; }
.film .sla { position: absolute; right: 30px; top: 26px; }