@font-face { font-family: 'SKArialB'; src: url('fonts/arialb.ttf') format('truetype'); }
@font-face { font-family: 'SKArialBI'; src: url('fonts/arialbi.ttf') format('truetype'); }
@font-face { font-family: 'SKNiamey'; src: url('fonts/niamey.ttf') format('truetype'); }
@font-face { font-family: 'SKVerdanaBI'; src: url('fonts/verdanabi.ttf') format('truetype'); }
@font-face { font-family: 'SKSwisBI'; src: url('fonts/swisbi.ttf') format('truetype'); }
:where(html, html *) { scrollbar-width:thin; scrollbar-color:#c9a227 rgba(18,48,13,.35); }
:where(html) ::-webkit-scrollbar { width:9px; height:9px; }
:where(html) ::-webkit-scrollbar-track { background:rgba(18,48,13,.35); border-radius:5px; }
:where(html) ::-webkit-scrollbar-thumb { background:#c9a227; border-radius:5px; border:2px solid transparent; background-clip:padding-box; }
:root { --lw-scroll:#c9a227; }

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: 800px; height: 600px; 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: 800px; height: 600px; 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 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; }
.it { height: 18px; line-height: 18px; padding: 0 4px; font: 12px Arial, sans-serif; color: #000; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.it.me { font-weight: bold; }

#chatwin, #rchatwin, #gchatwin { overflow-y: auto; overflow-x: hidden; font: 11px Arial, sans-serif; line-height: 1.25;
  word-wrap: break-word; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#chatwin, #rchatwin { color: #000; }
#gchatwin { color: #fff; }
#gchatwin .nm { color: #ffcc66; }
#chatwin .nm, #rchatwin .nm { color: #975322; }

#helptext { overflow-y: auto; overflow-x: hidden; padding: 2px 4px 2px 2px; font: 10px Arial, sans-serif; color: #000;
  line-height: 1.2; -webkit-user-select: text; user-select: text; scrollbar-width: thin; }
#helptext p { margin: 0 0 6px; }

#note { position: absolute; left: 150px; top: 280px; width: 500px; text-align: center; font: 14px Arial, sans-serif; color: #ddd; }

#sk-kopf { position: absolute; left: 50%; top: 120px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: 3px 4px 3px 10px; border-radius: 3px; background: linear-gradient(#3d7f34, #26591f); border: 2px solid #12300d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .35), 0 2px 5px rgba(0, 0, 0, .55);
  color: #eef6e8; font: 700 10px/1.2 Verdana, Arial, sans-serif; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; pointer-events: none; }
#sk-kopf .skk-liste b { color: #fff; font-size: 12px; letter-spacing: 0; }
#sk-kopf .skk-zeit { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; border-left: 1px solid rgba(0, 0, 0, .45); box-shadow: -1px 0 0 rgba(255, 255, 255, .18); }
#sk-kopf .skk-zeit[hidden] { display: none; }
#sk-kopf .skk-zeit i { font-style: normal; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
#sk-kopf .skk-zeit b { min-width: 30px; padding: 1px 6px; background: #050505; border: 1px solid #000; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9);
  color: #fff; font: 700 14px/1.15 Verdana, Arial, sans-serif; letter-spacing: 0; text-align: center; }
#sk-kopf .skk-zeit.knapp b { color: #fca5a5; animation: skUhr 1s steps(2) infinite; }
@keyframes skUhr { 50% { color: #fff; background: #7f1d1d; } }
#sk-aus { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); z-index: 19; display: flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 4px; border-radius: 12px; background: rgba(20, 20, 24, .86); border: 1px dashed rgba(253, 230, 138, .7);
  color: #f5f5f4; font: 12px/1.25 'Segoe UI', Arial, sans-serif; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
#sk-aus .ska-ic { font-size: 18px; }
#sk-aus b { color: #fde68a; }
#sk-aus small { color: #d6d3d1; }
#sk-aus.ich { border-style: solid; border-color: #facc15; background: rgba(60, 46, 8, .9); }
#sk-aus .ska-blase { position: absolute; left: 50%; top: 100%; margin-top: 4px; transform: translateX(-50%); padding: 3px 8px; border-radius: 8px;
  background: #fff; color: #111; font: 600 12px/1.25 'Segoe UI', Arial, sans-serif; white-space: nowrap; }
#sk-beenden, #sk-listeknopf { position: absolute; z-index: 22; padding: 3px 10px; border-radius: 8px; cursor: pointer;
  font: 600 12px/1.3 'Segoe UI', Arial, sans-serif; color: #1c1402; background: linear-gradient(135deg, #fde047, #f59e0b); border: 1px solid #fef3c7; }
#sk-beenden { left: 50%; bottom: 6px; transform: translateX(-50%); }
#sk-beenden.an { background: #3f3f46; color: #e4e4e7; border-color: #71717a; cursor: default; }
#sk-listeknopf { right: 100px; top: 121px; padding: 1px 8px; font-size: 11px; }
#sk-liste, #sk-ende { position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .55); }
.skl-box, .ske-box { min-width: 420px; max-width: 560px; max-height: 520px; display: flex; flex-direction: column; padding: 12px 16px 14px; border-radius: 12px;
  background: linear-gradient(180deg, #1f4d31, #123321); border: 2px solid #c8a24a; box-shadow: 0 10px 34px rgba(0, 0, 0, .65);
  color: #f1f5ef; font: 13px/1.35 'Segoe UI', Arial, sans-serif; }
.skl-titel, .ske-titel { display: flex; align-items: center; justify-content: space-between; font: 700 18px/1.2 'Segoe UI', Arial, sans-serif; color: #fde68a; margin-bottom: 8px; }
.skl-titel button { background: none; border: 0; color: #fde68a; font-size: 16px; cursor: pointer; }
.skl-tab { overflow: auto; }
.skl-tab table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.skl-tab th, .skl-tab td { padding: 2px 6px; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, .1); white-space: nowrap; }
.skl-tab th { position: sticky; top: 0; background: #1a412a; color: #fde68a; font-weight: 700; }
.skl-tab td.sp, .skl-tab th.sp { text-align: left; }
.skl-tab td.aus { color: #78716c; text-align: center; }
.skl-tab tr.summe td { font-weight: 700; color: #fff; border-top: 2px solid #c8a24a; }
#ske-rang { display: flex; flex-direction: column; gap: 4px; }
.ske-z { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 8px; background: rgba(255, 255, 255, .06); font-size: 14px; }
.ske-z.p1 { background: rgba(250, 204, 21, .18); }
.ske-z.ich .ske-n { text-decoration: underline; text-underline-offset: 3px; }
.ske-z .ske-pl { width: 26px; font-size: 16px; text-align: center; }
.ske-z .ske-n { flex: 1; font-weight: 700; }
.ske-z .ske-p { font-weight: 700; color: #fde68a; min-width: 60px; text-align: right; }
.ske-z small { color: #bcc8bd; }
#ske-info { margin: 8px 0 10px; color: #dce7dc; font-size: 13px; }
#ske-weiter { align-self: center; padding: 6px 18px; border-radius: 9px; cursor: pointer; font: 700 14px/1.3 'Segoe UI', Arial, sans-serif;
  color: #1c1402; background: linear-gradient(135deg, #fde047, #f59e0b); border: 1px solid #fef3c7; }
#ske-weiter:disabled { opacity: .6; cursor: default; }
#gchatwin .sys { color: #a7f3c0; font-style: italic; }