#filz { position: absolute; inset: 0; background-size: cover; background-position: center; pointer-events: none; overflow: hidden; }
#filz::after { content: ""; position: absolute; inset: 0; border: 7px solid #5c2410; pointer-events: none;
  border-image: linear-gradient(135deg, #8a3e1c, #4a1a08 22%, #7a3418 46%, #3a1608 70%, #8a3e1c) 1;
  box-shadow: inset 0 0 0 1px rgba(214,176,106,.6), inset 0 0 22px rgba(0,0,0,.45); }
#feld.lack #filz::after { border-image: linear-gradient(135deg, #2a0806, #120302 40%, #2a0806 70%, #120302) 1;
  box-shadow: inset 0 0 0 2px rgba(226,180,90,.75), inset 0 0 0 5px rgba(226,180,90,.18), inset 0 0 26px rgba(0,0,0,.5); }
.orn { position: absolute; background-position: center; background-size: contain; background-repeat: no-repeat; opacity: .55; }
.orn.seite { top: 30%; height: 64%; aspect-ratio: 210 / 562; max-width: 16%; background-image: url(img/orn_seite.webp?v=1); }
.orn.seite.l { left: 7px; background-position: left center; }
.orn.seite.r { right: 7px; transform: scaleX(-1); background-position: left center; }
.orn.fluegel { bottom: 2%; height: 21%; aspect-ratio: 248 / 200; max-width: 26%; background-image: url(img/orn_fluegel.webp?v=1); }
.orn.fluegel.l { right: calc(50% + 7%); }
.orn.fluegel.r { left: calc(50% + 7%); transform: scaleX(-1); }
.orn.logo { bottom: 6%; left: 50%; height: 10%; aspect-ratio: 174 / 106; transform: translateX(-50%); background-image: url(img/orn_logo.webp?v=1); opacity: .7; }
#feld.lack .orn { opacity: .42; }
#logo, .titel h1, .mk h3, .karte-ov h2, .dlg h2 { font-style: italic; }
#logoBild svg, .titel-bild svg { overflow: visible; }

.platz.leer { display: flex; align-items: flex-end; justify-content: center; }
#feld.drache .platz.leer { background-color: rgba(255,255,255,.14); background-image: url(img/dragon.webp?v=1); background-size: 70% auto; background-position: 50% 22%; background-repeat: no-repeat;
  border: 1px solid rgba(255,255,255,.18); }
#feld.drache .platz.leer::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }
.platz.leer span { margin-bottom: 14%; padding: 0 3px; font: italic 700 max(11px, calc(var(--cw) * .19)) / 1.1 var(--zier); color: var(--text); opacity: .75; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#feld.drache .platz.leer { opacity: .9; }
#feld.drache .platz.leer:not(.park) { filter: none; }
.platz.park span { color: var(--akzent2); opacity: .9; }
.platz.vorratplatz { cursor: pointer; }
.platz.vorratplatz span { display: flex; flex-direction: column; align-items: center; gap: 2px; font: italic 700 max(11px, calc(var(--cw) * .16)) var(--zier); color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.platz.vorratplatz.mischen { box-shadow: 0 0 0 2px var(--akzent), 0 0 14px var(--glanz); animation: mischBereit 1.6s ease-in-out infinite; }
.platz.vorratplatz.mischen i { width: calc(var(--cw) * .42); height: calc(var(--cw) * .42); background: url(img/chip1.webp?v=1) center / contain no-repeat; }
@keyframes mischBereit { 50% { box-shadow: 0 0 0 2px var(--akzent), 0 0 22px var(--glanz); } }
.k.stapel { box-shadow: none; }
.platz.wplatz { border: 1px dashed rgba(240,226,190,.28); background: rgba(0,0,0,.08); }

#feld.drache .platz.ablage { background-color: transparent; background-size: 100% 100%; }
#feld.drache .platz.ablage.h0 { background-image: url(img/holz0.webp?v=1); }
#feld.drache .platz.ablage.h1 { background-image: url(img/holz1.webp?v=1); }
#feld.drache .platz.ablage.h2 { background-image: url(img/holz2.webp?v=1); }
#feld.drache .platz.ablage.h3 { background-image: url(img/holz3.webp?v=1); }

.anzahl { position: absolute; z-index: 150; transform: translate(-50%, -50%); min-width: 22px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--leiste); border: 1px solid var(--akzent);
  font-size: 12px; line-height: 18px; text-align: center; color: var(--akzent2); font-variant-numeric: tabular-nums; pointer-events: none; }

.gem { position: absolute; width: var(--pr); height: var(--pr); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.gem::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(0,0,0,.25), transparent 70%); }
.gem i { position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.schwebe { position: absolute; z-index: 1200; transform: translate(-50%, 0); font: italic 700 20px var(--zier); color: var(--akzent2); text-shadow: 0 2px 4px #000; pointer-events: none; animation: schwebe 1.3s ease-out forwards; }
.bonusflug { position: absolute; z-index: 1250; width: max(22px, calc(var(--cw) * .36)); aspect-ratio: 1; margin: calc(max(22px, calc(var(--cw) * .36)) / -2) 0 0 calc(max(22px, calc(var(--cw) * .36)) / -2);
  background: center / contain no-repeat; pointer-events: none; filter: drop-shadow(0 0 8px var(--glanz)); animation: bonusflug .95s cubic-bezier(.3,.1,.4,1) forwards; }
.bonusflug.rot { background-image: url(img/gem1.webp?v=1); }
.bonusflug.blau { background-image: url(img/lamp1.webp?v=1); }
@keyframes bonusflug { 0% { transform: scale(1); opacity: 1; } 35% { transform: translateY(-30px) scale(1.5); opacity: 1; } 100% { transform: translateY(-260px) scale(.5); opacity: 0; } }
@keyframes schwebe { from { opacity: 0; margin-top: 0; } 15% { opacity: 1; } to { opacity: 0; margin-top: -60px; } }

.bank { position: absolute; width: var(--cw); display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px; box-sizing: border-box; border-radius: 10px;
  background: var(--leiste); border: 1px solid var(--leiste-rand); pointer-events: none; }
.bank .bz { display: flex; align-items: center; justify-content: center; gap: 4px; }
.bank .bz i { width: max(16px, calc(var(--cw) * .3)); height: max(16px, calc(var(--cw) * .3)); background-size: contain; background-repeat: no-repeat; background-position: center; flex: none; }
.bank .bz i.blau { background-image: url(img/lamp1.webp?v=1); }
.bank .bz i.rot { background-image: url(img/gem1.webp?v=1); }
.bank .bz b { font: 700 max(12px, calc(var(--cw) * .22)) var(--schrift); color: var(--text); font-variant-numeric: tabular-nums; }
.bank .bz.alle { opacity: .45; }

#drachenflug { position: absolute; left: 50%; top: 45%; width: min(70%, 520px); aspect-ratio: 1173 / 1114; background: url(img/dragon.webp?v=1) center / contain no-repeat; pointer-events: none; z-index: 1500; opacity: 0;
  transform: translate(-50%, -50%); }
#drachenflug.fliegt { animation: drachenflug .9s ease-in forwards; }
@keyframes drachenflug { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } 20% { opacity: .7; } 100% { opacity: 0; transform: translate(-150%, -120%) scale(.25); } }

.pagode { position: relative; width: 100%; aspect-ratio: 4 / 3; margin: -4px 0 12px; border-radius: 10px; background: #000 url(img/ende.jpg?v=1) center / cover; box-shadow: 0 4px 14px rgba(0,0,0,.5); overflow: hidden; }
.pagode span { position: absolute; display: flex; align-items: center; justify-content: flex-end; font: italic 700 clamp(11px, 3.4vw, 16px) var(--zier); color: #e9c46a; text-shadow: 1px 1px 0 #000; font-variant-numeric: tabular-nums; }
.pagode .total { left: 47.5%; top: 81.7%; width: 13.4%; height: 5.7%; font-size: clamp(13px, 4.2vw, 20px); color: #fff; }

.modus .seg button { padding: 0 2px; font-size: 13.5px; white-space: nowrap; }
.modus .haken { display: none; }

.dlg .vg-top { margin-top: 16px; }
.dlg .vg-top .mk { margin-bottom: 8px; }
.dlg .vg-top .mk h3 { margin: 0; }
.vg-top .kr { display: inline-block; width: 26px; height: 26px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.t1 { position: relative; border-radius: 10px; background: #160b06; border: 1px solid #b8863e; box-shadow: inset 0 0 12px rgba(0,0,0,.8); padding: 6px 4px 6px 8px; }
.t1 ol { height: 154px; margin: 0; padding: 0 4px 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; font: 13px/22px Arial, Helvetica, sans-serif; color: #e8d38a; }
.t1 li { display: flex; gap: 8px; padding: 0 4px; white-space: nowrap; }
.t1 li b { font-weight: normal; opacity: .7; font-variant-numeric: tabular-nums; }
.t1 li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.t1 li em { font-style: normal; font-variant-numeric: tabular-nums; }
.t1 li.me { background: rgba(255, 204, 51, .25); color: #ffe68a; border-radius: 3px; }
.t1 li.t1-gap { justify-content: center; opacity: .5; }
.t1 li.t1-msg { display: block; white-space: normal; text-align: center; opacity: .8; padding-top: 8px; line-height: 1.4; }
.t1-knoepfe { display: flex; align-items: center; gap: 6px; margin-top: 6px; border-top: 1px solid rgba(184,134,62,.4); padding-top: 6px; }
.t1-knoepfe button { flex: none; width: 42px; height: 38px; border: 0; border-radius: 6px; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #c9a227; }
.t1-knoepfe button:hover, .t1-knoepfe button:focus-visible { background-color: rgba(255,255,255,.12); outline: none; }
.t1-knoepfe .t1-reload .sgzi, .t1-knoepfe .t1-reload svg { width: 22px; height: 22px; }
.t1-knoepfe .t1-up { margin-left: auto; }
.t1-knoepfe .t1-up::before, .t1-knoepfe .t1-down::before { content: ""; border-left: 10px solid transparent; border-right: 10px solid transparent; filter: drop-shadow(1px 1px 0 #000); }
.t1-knoepfe .t1-up::before { border-bottom: 16px solid #c9a227; }
.t1-knoepfe .t1-down::before { border-top: 16px solid #c9a227; }
.t1-knoepfe .t1-per { width: auto; flex: 0 1 auto; padding: 0 12px; background: #1c1210; border: 1px solid #b8863e; font: italic 700 14px "Times New Roman", Times, serif; color: #e8d38a; }
.t1-knoepfe .t1-per::after { content: " \21C4"; opacity: .6; }

@media (max-width: 760px) {
  #knoepfe button { height: 38px; min-width: 42px; justify-content: center; }
}
@media (max-height: 500px) and (min-width: 600px) {
  #leiste { flex-wrap: nowrap; gap: 8px; padding: 4px 10px; }
  #logo { font-size: 17px; letter-spacing: 1px; }
  #logoBild { width: 24px; height: 24px; }
  #anzeige { flex-wrap: nowrap; gap: 5px; }
  .wert { min-width: 64px; padding: 1px 8px; }
  .wert b { font-size: 15px; }
  #wModus b { font-size: 12.5px; }
  #knoepfe button { height: 38px; min-width: 42px; padding: 0 9px; justify-content: center; }
  #knoepfe button span { display: none; }
}
.bgbild { position: absolute; left: 0; top: 0; width: 800px; height: 600px; transform-origin: 0 0; background: center / 100% 100% no-repeat; display: none; }
#feld.orig .bgbild { display: block; }
#feld.lack .bgbild { filter: hue-rotate(-34deg) saturate(1.7) brightness(.86); }
#feld.orig .orn, #feld.orig #filz::after { display: none; }
#orig { position: absolute; left: 0; top: 0; width: 800px; height: 600px; transform-origin: 0 0; pointer-events: none; display: none;
  font-family: "Times New Roman", Times, serif; }
#feld.orig #orig { display: block; }
.platz.unsicht { background: none; border: 0; }
.k.weg { opacity: 0; }
#orig .dyn i { position: absolute; background: center / 100% 100% no-repeat; pointer-events: none; }
#orig .olamp.gone { animation: lampeWeg .66s ease-out forwards; }
@keyframes lampeWeg { 15% { filter: brightness(3) saturate(0); transform: scale(1.15); } 100% { opacity: 0; filter: brightness(3) saturate(0); transform: scale(.4); } }
#orig .ochip.fliegt { transition: left .9s ease-in, top .9s ease-in, opacity .3s .9s; }
#orig .lcd { position: absolute; white-space: nowrap; font-variant-numeric: tabular-nums; }
#orig .lcd span { position: absolute; inset: 0; }
#orig .lcd .sh { color: #000; }
#orig .lcd .fg { color: #92805f; }
#orig .lcd.zeit { left: 346px; top: 370px; width: 105px; height: 50px; font-size: 35px; line-height: 44px; text-align: center; }
#orig .lcd.zeit .sh { transform: translate(.7px, .7px); }
#orig .lcd.punkte { left: 336px; top: 440px; width: 124px; height: 32px; font-size: 21.6px; line-height: 30px; text-align: center; }
#orig .lcd.punkte .sh { transform: translate(1.2px, 1px); }
#orig .ostapel { left: 16px; top: 442px; width: 29px; height: 15px; padding-right: 3px; font-size: 14px; line-height: 15px; text-align: right; color: #abac95;
  background: linear-gradient(#1a1814, #050403); border-radius: 1px; z-index: 1; pointer-events: auto; cursor: pointer; }
#orig .ostapelbild { position: absolute; left: 5px; top: 433px; width: 17px; height: 24px; background: url(img/cards/back.webp?v=1) center / 100% 100% no-repeat;
  border-radius: 2px; box-shadow: 1px 1px 3px rgba(0,0,0,.6); transform: rotate(-14deg); pointer-events: auto; cursor: pointer; }
#orig .oinfo { position: absolute; left: 52px; top: 442px; height: 15px; padding: 0 7px; font-size: 12px; line-height: 15px; color: #abac95; letter-spacing: .04em;
  background: linear-gradient(#1a1814, #050403); border-radius: 1px; white-space: nowrap; }
#orig .obtn { position: absolute; padding: 0; border: 0; background: none; pointer-events: auto; cursor: pointer; border-radius: 3px; }
#orig .obtn i { position: absolute; background: center / 100% 100% no-repeat; pointer-events: none; }
#orig .obtn:hover, #orig .obtn:focus-visible { background: rgba(255, 230, 160, .12); outline: none; }
#orig .oneu { left: 8px; top: 574px; width: 108px; height: 24px; }
#orig .omisch { left: 116px; top: 574px; width: 118px; height: 24px; }
#orig .oneu i, #orig .omisch i { left: 13.67px; top: 8.67px; width: 21px; height: 2.67px; }
#orig .omisch i { left: 13.33px; }
#orig .oneu.an i { background-image: url(img/btn_draw1.webp?v=1); }
#orig .oneu.an:hover i { background-image: url(img/btn_draw2.webp?v=1); }
#orig .omisch.an i { background-image: url(img/btn_mix1.webp?v=1); }
#orig .omisch.an:hover i { background-image: url(img/btn_mix2.webp?v=1); }
#orig .oneu.hw, #orig .omisch.hw { box-shadow: 0 0 0 2px var(--glanz), 0 0 14px var(--glanz); }
#orig .ogive { left: 718px; top: 483px; width: 58px; height: 25px; }
#orig .ogive i { left: 6px; top: 8.67px; width: 46px; height: 11.67px; background-image: url(img/btn_give1.webp?v=1); }
#orig .ogive:hover i { background-image: url(img/btn_give2.webp?v=1); }
#orig .opause { left: 718px; top: 509px; width: 58px; height: 25px; }
#orig .opause i { left: 21px; top: 7.67px; width: 16.33px; height: 16px; background-image: url(img/btn_pause1.webp?v=1); }
#orig .opause:hover i { background-image: url(img/btn_pause2.webp?v=1); }
#orig .oton { left: 718px; top: 535px; width: 58px; height: 26px; }
#orig .oton i { left: 23.33px; top: 7px; width: 12px; height: 17.33px; }
#orig .otafel { position: absolute; left: 567px; top: 472px; width: 134px; height: 128px; background: url(img/tafel.webp?v=1) 0 0 / 128.5px 128px no-repeat; pointer-events: auto; }
#orig .otafel ol { position: absolute; left: 4px; top: 3px; width: 126px; height: 86px; margin: 0; padding: 0 2px 0 0; list-style: none; overflow-y: auto; overscroll-behavior: contain;
  font: 11px/12.5px Arial, Helvetica, sans-serif; color: #e8d38a; scrollbar-width: thin; }
#orig .otafel li { display: flex; gap: 4px; height: 12.5px; padding: 0 2px; white-space: nowrap; }
#orig .otafel li b { font-weight: normal; opacity: .75; font-variant-numeric: tabular-nums; }
#orig .otafel li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#orig .otafel li em { font-style: normal; font-variant-numeric: tabular-nums; }
#orig .otafel li.me { background: rgba(255, 204, 51, .28); color: #ffe68a; border-radius: 2px; }
#orig .otafel li.t1-gap { justify-content: center; opacity: .5; }
#orig .otafel li.t1-msg { display: block; height: auto; padding-top: 6px; white-space: normal; text-align: center; opacity: .8; }
#orig .otafel button { position: absolute; padding: 0; border: 0; background: none; border-radius: 3px; cursor: pointer; }
#orig .otafel button:hover, #orig .otafel button:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
#orig .otafel .t1-reload { left: 6px; top: 101px; width: 22px; height: 20px; }
#orig .otafel .t1-per { left: 30px; top: 102px; width: 58px; height: 16px; font: 11px Arial, Helvetica, sans-serif; color: #abac95; letter-spacing: .02em; }
#orig .otafel .t1-per::after { content: " \21C4"; opacity: .6; }
#orig .otafel .t1-up { left: 92px; top: 103px; width: 17px; height: 16px; }
#orig .otafel .t1-down { left: 112px; top: 103px; width: 17px; height: 16px; }
#orig .obonus { position: absolute; left: 688.67px; top: 55.67px; width: 90.33px; height: 40px; background: url(img/bonusbox.webp?v=1) center / 100% 100% no-repeat; display: none; }
#orig .obonus.an { display: block; }
#orig .obonus span { position: absolute; left: 22px; right: 2px; top: 17px; height: 23px; line-height: 23px; text-align: center; font-weight: bold; font-size: 19px; color: #cbc0a7; }