@font-face { font-family: 'BGArial'; src: url('fonts/arial.ttf') format('truetype'); }
@font-face { font-family: 'BGArialB'; src: url('fonts/arialb.ttf') format('truetype'); }
@font-face { font-family: 'BGVerd'; src: url('fonts/verdana.ttf') format('truetype'); }
@font-face { font-family: 'BGVerdB'; src: url('fonts/verdanab.ttf') format('truetype'); }
@font-face { font-family: 'BGNiamey'; src: url('fonts/niamey.ttf') format('truetype'); }

:where(html, html *) { scrollbar-width:thin; scrollbar-color:#8a5a2b rgba(216,176,122,.35); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(216,176,122,.35); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#8a5a2b; border-radius:5px; border:2px solid transparent; background-clip:padding-box; }

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; touch-action: manipulation; }
#wrap { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 792px; height: 590px; flex: none; transform-origin: 50% 50%; overflow: hidden;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#c { position: absolute; left: 0; top: 0; width: 792px; height: 590px; display: block; }
[hidden] { display: none !important; }

.ov { position: absolute; left: 0; top: 0; transform-origin: 0 0; box-sizing: border-box; margin: 0; }
.tf { background: transparent; border: 0; outline: none; padding: 2px; }
input.tf { font: 12px BGArial, Arial, sans-serif; color: #000; caret-color: #000; -webkit-user-select: text; user-select: text; }

#ulist { background: #fff; border: 1px solid #919999; overflow-y: auto; overflow-x: hidden; }
#ulist.dis .it { color: #999; cursor: default; }
#ulist.dis .it:hover { background: none; }
.it { height: 20px; line-height: 20px; padding: 0 4px; font: 12px BGArial, Arial, sans-serif; color: #000; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer; }
.it:hover { background: #cce8cc; }
.it.me { cursor: default; }
.it.me:hover { background: none; }

#chatwin, #gchatwin { overflow-y: auto; overflow-x: hidden; font: 11px BGVerd, Verdana, sans-serif; line-height: 1.25; color: #000;
  word-wrap: break-word; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#chatwin .nm { color: #975322; cursor: pointer; }
#chatwin .nm:hover { text-decoration: underline; }

#helptext, #anltext { overflow-y: scroll; overflow-x: hidden; padding: 2px 4px 2px 2px; font: 10px BGArial, Arial, sans-serif; color: #000;
  line-height: 1.2; white-space: pre-wrap; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#helptext { white-space: normal; }
#helptext p { margin: 0; }

#note { position: absolute; left: 196px; top: 270px; width: 400px; text-align: center; font: 14px BGArial, Arial, sans-serif; color: #ddd; }
canvas { touch-action: none; }

#kipanel { position: absolute; left: 456px; top: 318px; width: 112px; display: flex; flex-direction: column; gap: 6px;
  padding: 8px; border-radius: 10px; background: rgba(60, 34, 14, .9); border: 1px solid #b88a4a; box-shadow: 0 4px 10px rgba(0,0,0,.5);
  font: 11px BGArial, Arial, sans-serif; color: #fff; text-align: center; z-index: 5; }
#kipanel span { font-weight: bold; color: #ffd36b; line-height: 1.2; }
#kipanel button { font: bold 12px BGArial, Arial, sans-serif; color: #fff; cursor: pointer; padding: 6px 4px; border-radius: 6px;
  border: 1px solid #d8b07a; background: linear-gradient(#8a5a2b, #5a3816); }
#kipanel button:hover { background: linear-gradient(#a06b36, #6b431c); }
#kipanel button.an { border-color: #ffd36b; box-shadow: 0 0 0 1px #ffd36b inset; }

#fxwuerfel { position: absolute; inset: 0; pointer-events: none; z-index: 6; perspective: 700px; transition: opacity .5s; }
#fxwuerfel.weg { opacity: 0; }
.w3d { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; transform-style: preserve-3d; filter: drop-shadow(4px 7px 4px rgba(0,0,0,.55)); }
.w3k { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.w3f { position: absolute; inset: 0; box-sizing: border-box; padding: 4px; border-radius: 6px; background: linear-gradient(145deg, #fffdf6, #efe4cc);
  box-shadow: inset 0 0 0 1px #cdbb98; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); backface-visibility: hidden; }
.w3f i { display: block; }
.w3f i.p { width: 7px; height: 7px; border-radius: 50%; place-self: center; background: radial-gradient(circle at 35% 35%, #5a3a24, #1d1008); }
.w3f.f1 { transform: translateZ(17px); } .w3f.f6 { transform: rotateY(180deg) translateZ(17px); }
.w3f.f3 { transform: rotateY(90deg) translateZ(17px); } .w3f.f4 { transform: rotateY(-90deg) translateZ(17px); }
.w3f.f5 { transform: rotateX(90deg) translateZ(17px); } .w3f.f2 { transform: rotateX(-90deg) translateZ(17px); }
#fxdoppel { position: absolute; left: 397px; top: 214px; z-index: 7; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translate(-50%, -50%) scale(.3); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .35s; }
#fxdoppel.an { transform: translate(-50%, -50%) scale(1); opacity: 1; }
#fxdoppel small { font: bold 12px BGArialB, Arial, sans-serif; color: #fff3d6; background: rgba(40, 18, 6, .88); padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
.dw { width: 76px; height: 76px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #fffdf6, #e8d9b6);
  box-shadow: 0 0 0 3px #b8873f, 0 0 26px rgba(255, 211, 107, .85), 0 10px 18px rgba(0, 0, 0, .6); }
#fxdoppel.an .dw { animation: dwdreh .9s cubic-bezier(.2, .8, .3, 1); }
.dw b { font: bold 38px BGArialB, Arial, sans-serif; color: #5a2a0c; }
.dw.klein { width: 54px; height: 54px; } .dw.klein b { font-size: 26px; }
@keyframes dwdreh { from { transform: rotateY(-540deg) rotateX(40deg) scale(.6); } to { transform: none; } }
.fxbanner { position: absolute; left: 397px; top: 150px; z-index: 8; pointer-events: none; transform: translate(-50%, -50%) scale(.4); opacity: 0;
  transition: transform .4s cubic-bezier(.2, 1.6, .4, 1), opacity .35s; text-align: center; padding: 12px 30px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #5a3416, #2e1607); border: 3px solid #e2b469; box-shadow: 0 14px 34px rgba(0, 0, 0, .7); }
.fxbanner.an { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.fxbanner b { display: block; font: bold 40px BGArialB, Arial, sans-serif; letter-spacing: 2px; color: #ffe7a8; text-shadow: 0 3px 0 #3a1d08, 0 0 18px rgba(255, 211, 107, .6); white-space: nowrap; }
.fxbanner small { display: block; margin-top: 4px; font: bold 14px BGArial, Arial, sans-serif; color: #f6e2bb; white-space: nowrap; }
.fxbanner.gold { background: linear-gradient(180deg, #f6d27a, #b8762a); border-color: #fff1c6; } .fxbanner.gold b { color: #3a1d08; text-shadow: 0 2px 0 #fff2c8; } .fxbanner.gold small { color: #3a1d08; }
.fxbanner.rot { background: linear-gradient(180deg, #7a2a1a, #3a0e06); border-color: #d77a5a; }
#doppelfrage { position: absolute; left: 70px; top: 10px; width: 650px; height: 418px; z-index: 9; display: flex; align-items: center; justify-content: center; background: rgba(20, 8, 2, .55); }
.df-box { width: 360px; padding: 16px 20px 14px; border-radius: 14px; text-align: center; background: linear-gradient(180deg, #5a3416, #2e1607); border: 2px solid #e2b469;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .75); font: 13px BGArial, Arial, sans-serif; color: #fbeccd; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.df-box p { margin: 0; line-height: 1.4; } .df-box p b { color: #ffd36b; } .df-klein { font-size: 11.5px; color: #e4cfa6; }
.df-knoepfe { display: flex; gap: 10px; margin-top: 6px; }
.df-knoepfe button, #zurueck { font: bold 13px BGArialB, Arial, sans-serif; color: #fff; cursor: pointer; padding: 7px 16px; border-radius: 8px; border: 1px solid #d8b07a; background: linear-gradient(#8a5a2b, #5a3816); }
.df-knoepfe button:hover, #zurueck:hover { background: linear-gradient(#a06b36, #6b431c); }
#df-ja { background: linear-gradient(#4f8a3a, #2d5a1c); border-color: #a7d68a; } #df-nein { background: linear-gradient(#9a3a22, #5a1a0c); border-color: #e09a7a; }
#zurueck { position: absolute; left: 522px; top: 548px; z-index: 6; padding: 4px 10px; font-size: 12px; }
.w3d.alt { opacity: .35; }