#mauer { position: absolute; inset: 0; background: url(img/mauer.jpg?v=1) repeat center top; pointer-events: none; }
#mauer::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, transparent 40%, rgba(0,0,0,.35)); }
#schloss { position: absolute; left: 0; right: 0; top: 0; background-size: cover; background-position: center bottom; pointer-events: none;
  box-shadow: 0 6px 10px -4px rgba(0,0,0,.55); }
#schloss::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(#8f8a80, #5d5951); }
#mauer[hidden], #schloss[hidden] { display: none; }
#logo, .titel h1, .mk h3, .karte-ov h2, .dlg h2 { font-style: italic; }
#logoBild svg, .titel-bild svg { overflow: visible; }

.seil { position: absolute; bottom: 0; width: max(3px, calc(var(--cw) * .055)); transform: translateX(-50%); pointer-events: none; display: none;
  background: repeating-linear-gradient(155deg, #d8c99b 0 2px, #a08c5b 2px 4px, #6f6040 4px 5px); border-radius: 3px; box-shadow: 1px 0 2px rgba(0,0,0,.45); }
#feld.burg .seil { display: block; }
#feld.burg.seile .seil { animation: seilAb .55s ease-out both; transform-origin: 50% 0; }
@keyframes seilAb { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.platz.leer { display: flex; align-items: flex-start; justify-content: center; }
.platz.leer span { margin-top: 18%; padding: 0 3px; font: italic 700 max(11px, calc(var(--cw) * .17)) / 1.15 var(--zier); color: var(--text); opacity: .7; text-align: center; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#feld.burg .platz.leer { background-color: rgba(40,36,30,.45); }
.platz.vorratplatz { cursor: pointer; }
.platz.vorratplatz span { font-size: 12px; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.k.stapel { box-shadow: none; }

#feld.burg .platz.ablage { background-color: transparent; background-size: 100% 100%; border-radius: calc(var(--cw) * .5) calc(var(--cw) * .5) 4px 4px; }
#feld.burg .platz.ablage.n0 { background-image: url(img/nische0.webp?v=1); }
#feld.burg .platz.ablage.n1 { background-image: url(img/nische1.webp?v=1); }
#feld.burg .platz.ablage.n2 { background-image: url(img/nische2.webp?v=1); }
#feld.burg .platz.ablage.n3 { background-image: url(img/nische3.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; }

.krone-knopf { position: absolute; z-index: 120; width: var(--cw); height: var(--ch); padding: 0; border: 0; background: none; cursor: pointer; }
.krone-knopf i { position: absolute; left: 4%; right: 4%; top: 6%; height: 72%; background: url(img/redeal.webp?v=1) center / contain no-repeat; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
.krone-knopf b { position: absolute; right: 4%; bottom: 8%; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 99px; background: var(--leiste); border: 1px solid var(--akzent);
  font: 700 15px/24px var(--schrift); color: var(--akzent2); text-align: center; }
.schild { position: absolute; display: flex; align-items: flex-start; justify-content: center; padding-top: .1em; font: 700 16px/1 'Times New Roman', Georgia, serif; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255,255,255,.35); pointer-events: none; white-space: nowrap; }
.durchgang { position: absolute; z-index: 150; transform: translate(-50%, 0); padding: 2px 8px; border-radius: 99px; background: var(--leiste); border: 1px solid var(--akzent);
  color: var(--text, #fff); font: 600 12px/16px system-ui, sans-serif; white-space: nowrap; pointer-events: none; }
.krone-knopf.alle i { filter: grayscale(1) brightness(.6); opacity: .55; }
.krone-knopf.bereit i { animation: kroneBereit 1.4s ease-in-out infinite; }
@keyframes kroneBereit { 50% { filter: drop-shadow(0 0 12px var(--glanz)) brightness(1.15); } }
.krone-knopf.hw i { filter: drop-shadow(0 0 14px var(--glanz)); }

.krone { position: absolute; width: calc(var(--pr) * 1.3); height: var(--pr); transform: translateX(-50%); background-size: contain; background-repeat: no-repeat; background-position: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); pointer-events: none; }
.krone.neu { animation: kroneNeu .9s cubic-bezier(.3,1.5,.5,1); }
@keyframes kroneNeu { from { transform: translateX(-50%) translateY(-40px) scale(1.8); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.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; }
@keyframes schwebe { from { opacity: 0; margin-top: 0; } 15% { opacity: 1; } to { opacity: 0; margin-top: -60px; } }

.burgbild { position: relative; width: 100%; margin: -4px 0 12px; border-radius: 10px; background-size: cover; background-position: center bottom; box-shadow: 0 4px 14px rgba(0,0,0,.5); overflow: hidden;
  aspect-ratio: 1600 / 356; display: flex; align-items: flex-end; justify-content: center; }
.burgbild span { margin-bottom: 6px; padding: 2px 12px; border-radius: 99px; background: rgba(0,0,0,.55); font: italic 700 15px var(--zier); color: var(--akzent2); }
.burgbild.ende { aspect-ratio: 4 / 3; display: block; }
.burgbild.ende .total { position: absolute; left: 47.7%; top: 57.3%; width: 9.4%; height: 4.3%; margin: 0; padding: 0; transform: translateX(-12%); display: flex; align-items: center; justify-content: center;
  background: none; font-size: clamp(13px, 4.2vw, 19px); color: #f3cf4a; text-shadow: 1px 1px 0 #000; white-space: nowrap; }

.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: 30px; height: 24px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.t1 { position: relative; border-radius: 10px; background: #12100c; border: 1px solid #b8963e; 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,150,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: #1c1a18; border: 1px solid #b8963e; 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; }
  .krone-knopf b { min-width: 22px; height: 22px; font-size: 13px; line-height: 20px; padding: 0 4px; }
}
@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; }
}