* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  overflow: hidden;
}

.hidden {
  display: none !important;
}

/* =========================
   STARTSCREEN
========================= */

#startScreen {
  width: 100vw;
  height: 100vh;
  background: url("assets/startscreen.37606c0c400bc856.webp") center/cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
	transition: filter 0.6s ease;
}

#chatOverlay.active ~ #startScreen {

  filter: brightness(0.4) blur(2px);

}

#startBtn {
  font-size: 3rem;
  padding: 20px 50px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  background: gold;
  transition: 0.2s;
}

#startBtn:hover {
  transform: scale(1.05);
}

/* =========================
   CHAT OVERLAY
========================= */

#chatOverlay {


  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap: 12px;

  padding: 40px;

  box-sizing: border-box;
  position: fixed;

  inset: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  background: rgba(0,0,0,0.55);

  backdrop-filter: blur(3px);

}

#chatBox {

  width: 65%;

  height: 75%;
	
	position: relative;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  background: rgba(15, 15, 18, 0.88);

  border: 1px solid rgba(255,255,255,0.08);

  border-radius: 12px;

  box-shadow: 0 25px 80px rgba(0,0,0,0.7);

  z-index: 10;

}

#chatMessages {

  flex: 1;

  overflow-y: auto;

  display: flex;

  flex-direction: column;

  padding: 20px;

}

.message {

  display: flex;
	  background: transparent !important;

  align-items: flex-start;

  gap: 14px;

  margin-bottom: 22px;

  width: 100%;

}

.pauseMessage {

  align-self: center;

  margin: 25px 0;

  padding: 8px 20px;

  border-radius: 20px;

  background: rgba(255,255,255,0.0);

  color: #aaa;


  font-size: 1.2rem;

  letter-spacing: 1px;

}

.name {

  font-weight: bold;

  margin-bottom: 6px;

  font-size: 0.9rem;

  opacity: 0.7;

}

.text {

  font-size: 1rem;

}

#toRoomsBtn {

	background: #feca04;

  color: #213c8b;

}
#toRoomsBtn:hover {

	background: #213c8b;

  color: #feca04;

}

/* =========================
   ROOM SCREEN
========================= */

#roomScreen {
  width: 100vw;
  height: 100vh;
  background: url("assets/roomscreen.9d3d96acc9fe1d25.webp") center/cover no-repeat;
  color: white;
}

#topBar {
  display: flex;
  justify-content: flex-end;
  padding: 15px;
}

#restartBtn {
  padding: 10px 20px;
  cursor: pointer;
	background-color: #ffcb05;
	border-radius: 15px;
	border: none;

  outline: none;
}

#roomGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  padding: 30px;
}

.room {
  height: 190px;
  background-size: cover;
	background-color: #555555;
  background-position: center;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  transition: 0.2s;
  text-shadow: 0 0 10px black;
  color: #fff;
	overflow: hidden;
}

.room::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0);

  transition: 0.25s;

  border-radius: 15px;

}

.room:hover::before {

  background: rgba(0,0,0,0.55);

}

.roomTitle {

  position: absolute;

  color: #fff;

  z-index: 2;

  transition: 0.25s;

  text-align: center;

  padding: 10px;

}

.roomDescription {

  position: absolute;

  color: #fff;

  inset: 0;

  z-index: 2;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 20px;

  opacity: 0;

  transition: 0.25s;

  font-size: 1rem;

  line-height: 1.5;

}

.room:hover .roomTitle {

  opacity: 0;

}

.room:hover .roomDescription {

  opacity: 1;

}

.room:hover {
  transform: scale(1.03);
}

/* dunkle Überlagerung */

.room.solved::after {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.45);

}

/* Label */

.room.solved::before {

  content: none;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) rotate(-12deg);

  font-size: 1.2rem;

  font-weight: bold;

  color: #ffcb03;

  letter-spacing: 2px;

  text-shadow: 0 2px 10px rgba(0,0,0,0.8);

  z-index: 2;

}

#notepad {

  position: relative;
left: 50px;

  top: 40px;
  width: 260px;

  min-height: 260px;

  background: rgba(245,232,190,0.96);

  color: #3d3527;

  padding: 18px;

  border-radius: 3px;

  box-shadow:

    0 8px 24px rgba(0,0,0,0.35),

    inset 0 0 25px rgba(120,90,40,0.08);

  transform: rotate(+1.5deg);

  font-family: "Courier New", monospace;

  display: flex;

  flex-direction: column;

  border: 1px solid rgba(120,90,40,0.25);

}

#notepad h3 {

  margin-top: 0;

  margin-bottom: 12px;

  text-align: center;

  font-size: 1rem;

  letter-spacing: 1px;

  border-bottom: 1px dashed rgba(0,0,0,0.2);

  padding-bottom: 8px;

}

#notes {

  flex: 1;

  resize: none;

  border: none;

  outline: none;

  background: transparent;

  color: #2f2a20;

  font-size: 2.1rem;

  line-height: 1.8;

  font-family: inherit;
	
	text-transform: uppercase;

  letter-spacing: 1px;

  font-weight: bold;

  padding: 6px;

  min-height: 120px;

}

#notepad .letters {

  margin-top: 14px;

  padding-top: 10px;

  border-top: 1px dashed rgba(0,0,0,0.2);

  font-weight: bold;

  text-align: center;

  letter-spacing: 3px;

  font-size: 1.1rem;

}

#notepad::before {

  content: "";

  position: absolute;

  top: -10px;

  left: 50%;

  width: 90px;

  height: 24px;

  background: rgba(255,255,200,0.45);

  transform: translateX(-50%) rotate(-2deg);

}

#timer {
  position: fixed;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  font-weight: bold;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.roomPage {

  min-height: 100vh;

  background: #111;

  color: white;

  padding: 40px;

}

.roomPage h1 {

  margin-bottom: 30px;

}

.riddle {

  background: #222;

  padding: 20px;

  border-radius: 15px;

  margin-bottom: 30px;

}

.riddle input {

  width: 300px;

  padding: 10px;

  margin-top: 10px;

}

.riddle button {

  margin-left: 10px;

  padding: 10px 20px;

  cursor: pointer;

}

#backBtn {

  padding: 15px 30px;

  cursor: pointer;

}

.skipButton {

  margin-top: 10px;

  padding: 10px;

  font-size: 0.9rem;

  cursor: pointer;

  background: #feca04;

  border: 0px solid #999;

  color: #213c8b;

  border-radius: 8px;

}

.skipButton:hover {

  background: #213c8b;
	color: #feca04;

}

.finalCode {

  margin-top: 18px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}

.finalCode input {

  padding: 10px;

  border: none;

  border-radius: 6px;

  font-size: 1rem;

  background: rgba(255,255,255,0.7);

}

.finalCode button {

  padding: 10px;

  border: none;

  border-radius: 6px;

  cursor: pointer;

  background: #222;

  color: white;

  transition: 0.2s;

}

.finalCode button:hover {

  background: #444;

}

#finalCodeResult {

  text-align: center;

  font-weight: bold;

  margin-top: 5px;

}

.message {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 20px;

  width: 100%;

}

.message.right {

  flex-direction: row-reverse;

}

.avatar {

  width: 70px;

  height: 70px;

  border-radius: 50%;

  overflow: hidden;

  flex-shrink: 0;

  background: #c7c7c7;

  border: none;

}

.avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}

.bubble {

  display: inline-block;

  max-width: 70%;

  width: fit-content;

  padding: 14px 18px;

  position: relative;

  box-shadow: 0 3px 10px rgba(0,0,0,0.0);

}



.message.left .bubble {

  background: #e5e5e5;

  border-radius: 2px 18px 18px 18px;

}

.message.right .bubble {

  background: #ffcb05;

  border-radius: 18px 2px 18px 18px;

}

.text.typing::after {

  content: "|";

  animation: blink 1s infinite;

  margin-left: 2px;

}

@keyframes blink {

  50% {

    opacity: 0;

  }

}

.pauseText {

  text-align: center;

  color: rgba(255,255,255,1);

  background: transparent;

  padding: 10px 0;

  margin: 20px 0;

  width: 100%;

  font-style: normal;

  letter-spacing: 1px;

}

#skipChatBtn,#toRoomsBtn {

  width: 260px;

  padding: 14px;

  font-size: 1rem;

  border: none;

  border-radius: 10px;

  cursor: pointer;


  transition: 0.2s;

}

#skipChatBtn:hover{
background: #213c8b;

  color: #feca04;

}

#chatControls {

  display: flex;

  justify-content: center;

  gap: 12px;

  padding-top: 15px;

  margin-top: 10px;
	margin-bottom: 15px;

  border-top: 1px solid rgba(255,255,255,0.08);

}

#finalCodeBox {

  position: fixed;

  right: 25px;

  bottom: 25px;

  width: 280px;

  padding: 18px;

  background: rgba(255, 203, 3, 0.95);

  border-radius: 10px;

  color: #213c8b;

  border: 1px solid rgba(120,160,255,0.25);

  display: flex;
  z-index: 500;

  flex-direction: column;

  gap: 10px;

}

#finalCodeBox input {

  padding: 10px;

  border-radius: 6px;

  border: none;

}

#finalCodeBox button {

  padding: 10px;

  border-radius: 6px;

  border: none;

  cursor: pointer;

  background: #213c8b;

  color: #feca04;

}
#finalCodeBox button:hover {

  background: #2d52c0;

}

#finalCodeResult {

  text-align: center;

  font-weight: bold;

  min-height: 24px;

}
.room.locked {
  filter: grayscale(.75) brightness(.55);
  cursor: not-allowed;
}

.room.locked::after {
  content: "🔒";
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 1.8rem;
  z-index: 4;
}

.room.notImplemented:not(.locked)::after {
  content: "IN VORBEREITUNG";
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  font-size: .72rem;
  letter-spacing: 1px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,.72);
}

#finalCodeBox {
  width: 260px;
  min-height: 220px;
  padding: 18px;
  border-radius: 12px;
  background: rgba(254,202,4,.94);
  color: #213c8b;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#finalCodeBox input,
#finalCodeBox button {
  padding: 10px;
  border-radius: 7px;
  border: 0;
}

#finalCodeBox button {
  cursor: pointer;
  background: #213c8b;
  color: white;
}

#roomMessage {
  position: fixed;
  left: 50%;
  bottom: 70px;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(620px, 90vw);
  padding: 14px 20px;
  border-radius: 10px;
  background: rgba(15,15,18,.92);
  color: white;
  box-shadow: 0 10px 35px rgba(0,0,0,.4);
  text-align: center;
}


/* V2.18 – Hauptscreen: gesammelte Lösungen */
#notepad .letters{font-size:1.45rem;font-weight:900;letter-spacing:.18em;color:#173471;text-align:center;margin:8px 0 14px;padding:10px;border:2px dashed rgba(23,52,113,.35);border-radius:8px;background:rgba(255,255,255,.2)}

/* V2.19: Hauptscreen ohne Raumnummern; ein einziges GELÖST-Label */
.room.solved .roomTitle { top: 56%; transform: translateY(-50%); }
.solvedLabel {
  position: absolute;
  left: 50%;
  top: 31%;
  transform: translate(-50%, -50%);
  z-index: 4;
  color: #ffcb03;
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 3px 12px rgba(0,0,0,.9);
  pointer-events: none;
}
.room.solved:hover .solvedLabel { opacity: 0; }


/* V2.24 – temporärer Entwicklungsmodus auf der Raumübersicht */
#notepad {
  width: min(330px, 30vw);
  min-height: 300px;
}
#notepad .dev-solutions {
  margin: 8px 0 12px;
  padding-top: 8px;
  border-top: 1px dashed rgba(61,53,39,.28);
  font-family: Arial, sans-serif;
  text-transform: none;
}
#notepad .dev-solutions summary {
  cursor: pointer;
  font-size: .78rem;
  line-height: 1.25;
  font-weight: 900;
  color: #173471;
}
#notepad .dev-solutions p {
  margin: 7px 0 9px;
  font-size: .67rem;
  line-height: 1.3;
  font-weight: 600;
  color: #514a3c;
}
#notepad .dev-solution-list { display: grid; gap: 6px; }
#notepad .dev-solution-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}
#notepad .dev-solution-row span {
  font-size: .62rem;
  line-height: 1.15;
  font-weight: 800;
}
#notepad .dev-solution-row input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(23,52,113,.35);
  border-radius: 6px;
  padding: 6px 7px;
  background: rgba(255,255,255,.48);
  color: #252018;
  font-size: .78rem;
  font-weight: 700;
  outline: none;
}
#notepad .dev-solution-row input:focus {
  border-color: #173471;
  box-shadow: 0 0 0 2px rgba(23,52,113,.12);
}
#notepad .dev-solution-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px;
}
#notepad .dev-solution-actions button {
  border: 0;
  border-radius: 6px;
  padding: 7px 5px;
  cursor: pointer;
  font-size: .62rem;
  line-height: 1.15;
  font-weight: 900;
}
#applyTestSolutions { background: #173471; color: white; }
#clearTestSolutions { background: rgba(255,255,255,.58); color: #3d3527; border: 1px solid rgba(61,53,39,.25)!important; }
#notepad #notes {
  min-height: 70px;
  font-size: 1rem;
  line-height: 1.35;
}
@media (max-width: 1050px) {
  #notepad { width: 270px; }
}

/* V2.33 – einheitliche systemweite Standardschrift für Notizzettel */
#notepad, #notepad *, #notes { font-family: Arial, Helvetica, sans-serif !important; }

/* =========================================================
   V3.00 – Finale: TravelPass, Abschlussdialog und Stimmzettel
========================================================= */
#topBar{
  position:fixed;
  top:18px;
  right:18px;
  z-index:900;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px;
}
#restartBtn,#finalHintBtn{
  box-sizing:border-box;
  width:auto;
  min-width:142px;
  height:42px;
  margin:0;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  background:#ffcb05;
  color:#183781;
  font-family:Arial,sans-serif;
  font-size:.92rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
  transition:.18s ease;
}
#restartBtn:hover,#finalHintBtn:hover,#restartBtn:focus-visible,#finalHintBtn:focus-visible{
  background:#183781;
  color:#ffcb05;
  border-color:#ffcb05;
  outline:none;
}
#notepad.final-ready .letters{
  cursor:pointer;
  border-radius:8px;
  padding:11px 8px;
  transition:.2s ease;
  box-shadow:0 0 0 2px rgba(255,203,5,.0);
}
#notepad.final-ready .letters:hover,#notepad.final-ready .letters:focus-visible{
  background:rgba(255,203,5,.18);
  box-shadow:0 0 0 2px rgba(255,203,5,.78),0 0 20px rgba(255,203,5,.34);
  outline:none;
}
#finalCodeBox{display:none!important}

.final-overlay{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(3,9,22,.84);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-family:Arial,sans-serif;
}
.final-card{
  position:relative;
  width:min(94vw,1180px);
  max-height:94vh;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.34);
  border-radius:20px;
  background:#0d1a31;
  color:#fff;
  box-shadow:0 28px 90px rgba(0,0,0,.62);
}
.final-card h2{
  margin:0;
  color:#ffcb05;
  text-align:center;
  font-size:clamp(1.55rem,3vw,2.25rem);
}
.final-close{
  position:absolute;
  top:14px;
  right:14px;
  z-index:30;
  width:46px!important;
  height:46px!important;
  margin:0!important;
  padding:0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0!important;
  border-radius:50%!important;
  background:#ffcb05!important;
  color:#183781!important;
  font-size:2rem!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer;
}
.final-close:hover{background:#183781!important;color:#ffcb05!important;outline:2px solid #ffcb05!important}
.hint-card{
  width:min(90vw,620px);
  padding:34px 74px 34px 34px;
}
.hint-card p{margin:22px 0 0;font-size:1.08rem;line-height:1.55;text-align:center}

.final-puzzle-card{
  height:min(88vh,760px);
  padding:24px 24px 18px;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:14px;
}
#finalPuzzleBoard{
  position:relative;
  min-height:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  border-radius:16px;
  background:
    radial-gradient(circle at 20% 20%,rgba(61,102,170,.28),transparent 34%),
    radial-gradient(circle at 78% 62%,rgba(40,71,127,.24),transparent 34%),
    #081328;
}
#finalSlots{
  position:absolute;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(10,clamp(48px,6vw,72px));
  gap:clamp(5px,.8vw,10px);
  z-index:3;
}
.final-letter-slot{
  aspect-ratio:1/1.05;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed rgba(255,203,5,.72);
  border-radius:12px;
  color:#ffcb05;
  font-size:clamp(1.6rem,3.5vw,2.75rem);
  font-weight:900;
  background:rgba(255,255,255,.04);
  transition:.2s ease;
}
.final-letter-slot.fixed{
  border-style:solid;
  background:#ffcb05;
  color:#183781;
  box-shadow:0 0 22px rgba(255,203,5,.28);
}
.final-letter-slot.filled{
  border-style:solid;
  background:rgba(255,203,5,.15);
  box-shadow:0 0 18px rgba(255,203,5,.22);
}
#finalLooseLetters{position:absolute;inset:0;z-index:6}
.final-letter-token{
  position:absolute;
  width:clamp(48px,6vw,72px);
  aspect-ratio:1/1.05;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#ffcb05;
  color:#183781;
  font-size:clamp(1.6rem,3.5vw,2.75rem);
  font-weight:900;
  box-shadow:0 7px 22px rgba(0,0,0,.38),0 0 18px rgba(255,203,5,.18);
  user-select:none;
  touch-action:none;
  cursor:grab;
  transition:box-shadow .16s ease,opacity .2s ease;
}
.final-letter-token.dragging{
  cursor:grabbing;
  z-index:20;
  box-shadow:0 12px 30px rgba(0,0,0,.5),0 0 25px rgba(255,203,5,.45);
}
#finalPuzzleFeedback{
  min-height:40px;
  text-align:center;
  color:#ffcb05;
  font-size:clamp(1rem,1.8vw,1.35rem);
  font-weight:700;
  letter-spacing:0;
}
.final-time-message{line-height:1.45}
.final-time-message strong{font-size:1.12em}
.final-continue-btn{
  display:block;
  margin:14px auto 0!important;
  min-width:150px;
  padding:11px 24px!important;
  border:0!important;
  border-radius:12px!important;
  background:#ffcb05!important;
  color:#183781!important;
  font-size:1.05rem!important;
  font-weight:900!important;
  cursor:pointer;
}
.final-continue-btn:hover{filter:brightness(1.06)}
#finalPuzzleFeedback.success{animation:finalSuccess .75s ease both}
@keyframes finalSuccess{0%{opacity:0;transform:scale(.8)}70%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}

.finale-dialog-card{
  width:min(94vw,980px);
  height:min(88vh,720px);
  padding:24px 24px 18px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:14px;
}
#finaleChat{
  min-height:0;
  overflow:auto;
  padding:48px 10px 10px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.finale-message{
  display:flex;
  align-items:flex-start;
  gap:14px;
  max-width:92%;
}
.finale-message.left{align-self:flex-start}
.finale-message.right{align-self:flex-end;flex-direction:row-reverse}
.finale-avatar{
  flex:0 0 92px;
  width:92px;
  height:92px;
  border-radius:50%;
  overflow:hidden;
  background:#e7edf8;
  box-shadow:0 5px 18px rgba(0,0,0,.35);
}
.finale-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.finale-bubble{
  position:relative;
  padding:16px 18px;
  border-radius:18px;
  background:#fff;
  color:#17243d;
  font-size:1.02rem;
  line-height:1.55;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.finale-message.left .finale-bubble::before{
  content:"";position:absolute;left:-10px;top:25px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:12px solid #fff;
}
.finale-name{font-weight:900;color:#183781;margin-bottom:5px}
.finale-bubble a{color:#183781;font-weight:800;text-decoration:underline}
#finaleControls{display:flex;justify-content:center;padding:6px 10px 4px}
.final-next-btn,.final-player-bubble{
  width:auto!important;
  margin:0!important;
  border:0!important;
  border-radius:11px!important;
  background:#ffcb05!important;
  color:#183781!important;
  font-weight:900!important;
  cursor:pointer;
}
.final-next-btn{padding:12px 22px!important}
.final-next-btn:hover,.final-player-bubble:hover{background:#183781!important;color:#ffcb05!important;outline:2px solid #ffcb05}
.final-player-choice{
  width:100%;display:flex;align-items:flex-start;justify-content:flex-end;gap:14px;
}
.final-player-choice .finale-avatar{order:2}
.final-player-bubble{
  position:relative;
  max-width:660px;
  padding:16px 18px!important;
  font-size:1rem!important;
  line-height:1.45;
  text-align:left;
}
.final-player-bubble::after{
  content:"";position:absolute;right:-10px;top:25px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:12px solid #ffcb05;
}

.ballot-card{
  height:min(94vh,820px);
  width:min(94vw,1100px);
  padding:18px;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  gap:10px;
}
.ballot-wrap{
  position:relative;
  min-height:0;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius:14px;
  background:#213c8b;
}
.ballot-wrap img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
}
.ballot-choice{
  position:absolute!important;
  z-index:8!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:50%!important;
  cursor:pointer;
  outline:none!important;
}
.ballot-choice:hover,.ballot-choice:focus-visible{box-shadow:0 0 0 4px rgba(255,203,5,.0)!important;background:rgba(255,203,5,.05)!important}
.ballot-yes{left:26.7%;top:54.7%;width:13.3%;height:20.5%}
.ballot-no{left:48.8%;top:54.7%;width:13.3%;height:20.5%}
.ballot-mark{
  position:absolute;z-index:9;display:none;pointer-events:none;
  object-fit:contain;
}
.ballot-mark-yes{left:29.2%;top:55.5%;width:8%;height:18%}
.ballot-mark-no{left:51.3%;top:55.5%;width:8%;height:18%}
.voted-yes .ballot-mark-yes,.voted-no .ballot-mark-no{display:block}
#voteResult{
  min-height:48px;
  text-align:center;
  color:#fff;
  font-size:1rem;
  line-height:1.45;
}
#voteResult strong{color:#ffcb05;font-size:1.12rem}

@media (max-width:850px){
  #finalSlots{grid-template-columns:repeat(10,42px);gap:4px}
  .final-letter-token{width:42px;font-size:1.55rem}
  .final-letter-slot{font-size:1.55rem}
  .finale-avatar{flex-basis:70px;width:70px;height:70px}
}

/* V3.03 – Finale: ruhigere Abschlusszeit, entwickelte Sprechblasen, korrekter Stimmzettel */
#finalPuzzleFeedback{
  font-size:clamp(.9rem,1.25vw,1.08rem)!important;
}
.final-time-message{
  line-height:1.42!important;
  max-width:620px;
  margin:0 auto;
}
.final-time-message strong{font-size:1.05em!important}
.final-continue-btn{
  opacity:1;
  transform:translateY(0);
  transition:opacity .45s ease,transform .45s ease,filter .16s ease;
}
.final-continue-btn.is-waiting{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}

/* Die Abschluss-Sprechblasen wachsen wie die übrigen Dialogblasen auf. */
.finale-message.is-developing .finale-bubble{
  transform:scale(.72,.3);
  transform-origin:left top;
  opacity:.2;
}
.finale-message.is-developing.right .finale-bubble{transform-origin:right top}
.finale-message .finale-bubble{
  transition:transform .72s cubic-bezier(.2,.75,.25,1),opacity .45s ease;
}
.finale-message.is-open .finale-bubble{
  transform:scale(1)!important;
  opacity:1!important;
}
.finale-message.is-developing .finale-bubble > *{
  opacity:0;
  transition:opacity 1.15s ease;
}
.finale-message.is-developing .finale-bubble.text-visible > *{opacity:1}
.finale-control-in{animation:finalControlIn .55s ease both}
@keyframes finalControlIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Die Spieler-Sprechblase bleibt immer gelb – auch bei Hover, Fokus und Klick. */
.final-player-bubble,
.final-player-bubble:hover,
.final-player-bubble:focus,
.final-player-bubble:focus-visible,
.final-player-bubble:active{
  background:#ffcb05!important;
  color:#183781!important;
  outline:none!important;
  filter:none!important;
  box-shadow:none!important;
}

/* Stimmzettel: Kreuze sind anfangs sicher unsichtbar und sitzen exakt in den Kreisen. */
.ballot-wrap > img.ballot-mark{
  display:none!important;
  position:absolute!important;
  z-index:9!important;
  pointer-events:none!important;
  width:9.4%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
}
.voted-yes .ballot-wrap > img.ballot-mark-yes{display:block!important}
.voted-no .ballot-wrap > img.ballot-mark-no{display:block!important}
.ballot-mark-yes{left:33.55%!important;top:51.9%!important}
.ballot-mark-no{left:61.45%!important;top:51.9%!important}
.ballot-choice{width:11.6%!important;height:16.5%!important;top:53.3%!important}
.ballot-yes{left:32.45%!important}
.ballot-no{left:60.35%!important}


/* V3.04 INTERIM – Direkt-Lösen-Buttons auf der Raumübersicht */
.room-dev-wrap{
  position:relative;
  min-width:0;
  height:190px;
}
.room-dev-wrap .room{
  width:100%;
  height:100%;
}
.dev-solve-room-btn{
  position:absolute;
  z-index:12;
  right:10px;
  bottom:10px;
  min-width:92px;
  min-height:38px;
  padding:8px 14px;
  border:0;
  border-radius:10px;
  background:#ffcb05;
  color:#173471;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.92rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.34);
}
.dev-solve-room-btn:hover,.dev-solve-room-btn:focus-visible{
  background:#fff;
  color:#173471;
  outline:2px solid #ffcb05;
  outline-offset:2px;
}
.dev-solve-room-btn:disabled{
  background:rgba(255,203,5,.82);
  color:#173471;
  cursor:default;
  opacity:.9;
}
.room-dev-wrap:has(.dev-solve-room-btn:disabled) .room{
  pointer-events:auto;
}
@media(max-width:900px){
  .room-dev-wrap{height:180px}
  .dev-solve-room-btn{right:8px;bottom:8px;min-width:82px;font-size:.82rem}
}


/* V3.05 – Finale wie Raumdialoge: Typewriter + automatisch folgende Sprechblasen */
.finale-message.is-developing .finale-bubble > *{opacity:1!important}
.finale-message.is-developing .finale-text{min-height:1.55em}
.finale-text{white-space:normal}
/* Kreuz exakt und klein innerhalb der Wahlkreise */
.ballot-wrap > img.ballot-mark{width:6.6%!important;height:auto!important;transform:none!important}
.ballot-mark-yes{left:35.95%!important;top:56.0%!important}
.ballot-mark-no{left:63.85%!important;top:56.0%!important}


/* V3.06 – Stimmzettel: eigenes CSS-Kreuz exakt im gedruckten Kreis */
.ballot-wrap > .ballot-mark{
  display:none !important;
  position:absolute !important;
  z-index:9 !important;
  pointer-events:none !important;
  width:7.4% !important;
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  transform:none !important;
}
.voted-yes .ballot-wrap > .ballot-mark-yes,
.voted-no .ballot-wrap > .ballot-mark-no{
  display:block !important;
}
.ballot-wrap > .ballot-mark::before,
.ballot-wrap > .ballot-mark::after{
  content:"";
  position:absolute;
  left:47%;
  top:2%;
  width:8%;
  height:96%;
  border-radius:999px;
  background:#fff;
  transform-origin:center;
}
.ballot-wrap > .ballot-mark::before{transform:rotate(45deg)}
.ballot-wrap > .ballot-mark::after{transform:rotate(-45deg)}

/* Mittelpunkte der beiden auf dem JPG gedruckten Wahlkreise */
.ballot-mark-yes{
  left:28.15% !important;
  top:54.85% !important;
}
.ballot-mark-no{
  left:50.78% !important;
  top:54.85% !important;
}

/* Klickflächen ebenfalls exakt auf die gedruckten Kreise legen. */
.ballot-choice{
  top:53.25% !important;
  width:9.2% !important;
  height:14.7% !important;
}
.ballot-yes{left:27.25% !important}
.ballot-no{left:49.88% !important}


/* V3.07 – Original-Kreuz-PNG, anhand des Stimmzettel-JPG neu vermessen */
.ballot-wrap > img.ballot-mark{
  display:none !important;
  position:absolute !important;
  z-index:9 !important;
  pointer-events:none !important;
  width:7.15% !important;
  height:auto !important;
  object-fit:contain !important;
  transform:translate(-50%,-50%) !important;
}
.voted-yes .ballot-wrap > img.ballot-mark-yes,
.voted-no .ballot-wrap > img.ballot-mark-no{
  display:block !important;
}
/* Mittelpunkt der gedruckten Kreise im 2000×1419-Stimmzettel */
.ballot-wrap > img.ballot-mark-yes{
  left:32.95% !important;
  top:61.95% !important;
}
.ballot-wrap > img.ballot-mark-no{
  left:55.80% !important;
  top:61.95% !important;
}

/* Klickbereiche passend auf dieselben Kreise */
.ballot-choice{
  top:55.8% !important;
  width:9.0% !important;
  height:12.5% !important;
}
.ballot-yes{left:28.45% !important}
.ballot-no{left:51.30% !important}


/* V3.08 – Kreuz minimal nach rechts; finale Zeit bleibt im Timer stehen */
.ballot-wrap > img.ballot-mark-yes{left:33.65% !important;}
.ballot-wrap > img.ballot-mark-no{left:56.50% !important;}

/* V3.09 – Raumübersicht: größere, konturlose Raumkacheln */
.room-dev-wrap{
  height:209px!important; /* +10 % gegenüber 190 px */
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
.room-dev-wrap .room,.room{
  height:100%!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}
@media(max-width:900px){
  .room-dev-wrap{height:198px!important;}
}

/* V3.10 – Gesammelte Lösungen etwas tiefer; Produktionshinweis unten rechts */
#notepad{top:92px!important;}
#roomScreen .ui-credit{bottom:10px;right:16px;}
@media(max-width:900px){#notepad{top:68px!important;}}

/* V3.11 – Gesammelte Lösungen noch etwas weiter nach unten */
#notepad{top:122px!important;}
@media(max-width:900px){#notepad{top:92px!important;}}


/* V3.12 – Startdialog optisch und zeitlich an den Finaldialog angeglichen */
#chatBox{width:min(94vw,980px)!important;height:min(88vh,720px)!important;border-radius:20px!important;background:rgba(12,20,35,.96)!important;border:1px solid rgba(255,255,255,.28)!important}
#chatMessages{padding:48px 24px 12px!important;gap:18px!important}
#chatMessages .message{display:flex!important;align-items:flex-start!important;gap:14px!important;width:100%!important;max-width:92%!important;margin:0!important;align-self:flex-start!important}
#chatMessages .message.right{align-self:flex-end!important;flex-direction:row-reverse!important}
#chatMessages .avatar{flex:0 0 92px!important;width:92px!important;height:92px!important;border-radius:50%!important;overflow:hidden!important;background:#e7edf8!important;box-shadow:0 5px 18px rgba(0,0,0,.35)!important}
#chatMessages .bubble{position:relative!important;padding:16px 18px!important;border-radius:18px!important;background:#fff!important;color:#17243d!important;font-size:1.02rem!important;line-height:1.55!important;box-shadow:0 6px 18px rgba(0,0,0,.2)!important;max-width:min(78vw,760px)!important;transform:scale(1);opacity:1;transition:transform .72s cubic-bezier(.2,.75,.25,1),opacity .45s ease}
#chatMessages .message.left .bubble::before{content:"";position:absolute;left:-10px;top:25px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-right:12px solid #fff}
#chatMessages .message.right .bubble{background:#ffcb05!important;color:#17243d!important}
#chatMessages .message.right .bubble::after{content:"";position:absolute;right:-10px;top:25px;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:12px solid #ffcb05}
#chatMessages .name{font-weight:900!important;color:#183781!important;margin:0 0 5px!important;padding:0!important;width:auto!important;font-size:1rem!important;letter-spacing:0!important}
#chatMessages .message.is-developing .bubble{transform:scale(.72,.3)!important;transform-origin:left top!important;opacity:.2!important}
#chatMessages .message.is-developing.right .bubble{transform-origin:right top!important}
#chatMessages .message.is-open .bubble{transform:scale(1)!important;opacity:1!important}
#chatMessages .pauseMessage{align-self:center;margin:8px 0;padding:8px 18px;color:#c7cfdd;font-size:1rem;line-height:1.45;text-align:center;letter-spacing:0;background:transparent}
#chatControls{padding:10px 16px 14px!important;border-top:1px solid rgba(255,255,255,.13)}
@media(max-width:650px){#chatBox{height:min(90vh,720px)!important}#chatMessages{padding:24px 12px 10px!important}#chatMessages .avatar{width:62px!important;height:62px!important;flex-basis:62px!important}#chatMessages .bubble{font-size:.92rem!important;padding:12px 14px!important}#chatMessages .message{gap:10px!important;max-width:100%!important}}

/* V3.13 – Startdialog: Abschluss- und Überspringen-Button über volle Dialogbreite */
#chatControls{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  box-sizing:border-box!important;
}
#skipChatBtn,
#toRoomsBtn{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  box-sizing:border-box!important;
}
#skipChatBtn.hidden,
#toRoomsBtn.hidden{display:none!important}

/* V3.15 – nach Spielende verschwindet der finale Hinweisbutton; Neustart bleibt oben */
#topBar.game-finished #restartBtn{margin-top:0!important;}

/* V3.50 – ein zentraler Entwicklermodus-Button unter den Raumkacheln
   (nur sichtbar, wenn der Entwicklermodus per index.html?dev=1 eingeschaltet ist) */
.dev-solve-all-wrap{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:-8px 0 0;padding:0 10px;}
.dev-solve-all-btn{min-height:44px;padding:11px 20px;border:0;border-radius:11px;background:#ffcb05;color:#173471;font-family:Arial,Helvetica,sans-serif;font-size:.96rem;font-weight:900;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);}
.dev-solve-all-btn:hover,.dev-solve-all-btn:focus-visible{background:#fff;outline:2px solid #ffcb05;outline-offset:2px;}
.dev-solve-all-btn:disabled{background:rgba(255,203,5,.78);color:#173471;cursor:default;opacity:.9;}
.dev-mode-off-btn{background:transparent;color:#ffcb05;border:2px solid #ffcb05;box-shadow:none;}
.dev-mode-off-btn:hover,.dev-mode-off-btn:focus-visible{background:#fff;color:#173471;}
@media(max-width:700px){.dev-solve-all-btn{width:100%;font-size:.9rem;}}


/* V3.69 – Raumübersicht: sichtbarer Fokus auf den tatsächlich geladenen Kachel-Styles */
#roomGrid .room:focus,
#roomGrid .room:focus-visible{
  outline:5px solid #ffcb05!important;
  outline-offset:5px!important;
  box-shadow:
    0 0 0 3px #183781,
    0 0 0 9px #ffcb05,
    0 0 30px 12px rgba(255,203,5,.55)!important;
  filter:brightness(1.16)!important;
  transform:scale(1.025)!important;
  position:relative!important;
  z-index:20!important;
}
#roomGrid .room-dev-wrap:focus-within{
  position:relative!important;
  z-index:20!important;
}

/* V3.71 – Timer ist reine Anzeige, niemals interaktiv */
#timer,#roomTimer,#room-timer{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
  cursor:default!important;
}
#timer:focus,#roomTimer:focus,#room-timer:focus{
  outline:none!important;
  box-shadow:none!important;
}


/* V3.89 – Erfolgs-/„Geschafft!“-Meldungen wieder im Spiel-Gelb.
   Fehlermeldungen/Warnungen bleiben rot. */
.toast.success,
.toast--success,
.notification.success,
.notification--success,
.message.success,
.message--success,
.feedback.success,
.feedback--success,
.status-message.success,
.status-message--success,
[role="status"].success,
[data-type="success"],
[data-status="success"]{
  background:#ffc800!important;
  background-color:#ffc800!important;
  color:#123b82!important;
}


/* V4.24 – Feedback nach der abschließenden EU-Abstimmung */
.feedback-button-wrap{grid-column:2;display:flex;justify-content:center;align-items:flex-start;margin-top:-14px}
.feedback-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 22px;border-radius:7px;background:#000;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:1rem;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.feedback-button:hover,.feedback-button:focus-visible{background:#222;outline:2px solid #ffcb05;outline-offset:2px}
@media(max-width:700px){.feedback-button-wrap{grid-column:1 / -1;margin-top:-10px}.feedback-button{width:100%;max-width:320px}}

/* V4.25 – Feedback rechts neben der Parlament-Kachel */
#roomGrid{position:relative}
.feedback-button-wrap{
  position:absolute;
  grid-column:auto;
  right:-190px;
  bottom:55px;
  width:170px;
  margin:0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.feedback-button{
  background:#ffcb05;
  color:#000;
  border-radius:7px;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}
.feedback-button:hover,.feedback-button:focus-visible{background:#ffd633;color:#000}
@media(max-width:1100px){
  .feedback-button-wrap{position:static;grid-column:1 / -1;width:auto;margin-top:-10px}
}


/* V4.29 – Feedback wieder mittig unter der Parlament-Kachel, mit mehr Abstand */
.feedback-button-wrap{
  position:static;
  grid-column:2;
  width:auto;
  margin:18px 0 0;
  display:flex;
  justify-content:center;
  align-items:center;
}
.feedback-button{
  background:#ffcb05;
  color:#000;
  border-radius:7px;
}
.feedback-button:hover,.feedback-button:focus-visible{
  background:#ffd633;
  color:#000;
}
@media(max-width:700px){
  .feedback-button-wrap{
    grid-column:1 / -1;
    margin-top:18px;
  }
}

/* V4.31 – exaktes Gelb für Feedback-Button */
.feedback-button,.feedback-button:hover,.feedback-button:focus-visible{background:#ffcb03;color:#000}

/* V4.32 – Soundschalter Raumübersicht */
.shared-sound-toggle{position:fixed;top:72px;right:18px;z-index:1200;min-width:150px;min-height:40px;padding:8px 14px;border:0;border-radius:7px;background:#000;color:#fff;font-weight:700;cursor:pointer}
.shared-sound-toggle:hover,.shared-sound-toggle:focus-visible{background:#222;outline:2px solid #ffcb03;outline-offset:2px}

/* V4.33 – Soundschalter Übersicht typografisch wie in den Räumen */
.shared-sound-toggle{
  font-size:1.25rem;
  line-height:1.2;
  font-weight:800;
}


/* V4.34 – Feedback ohne Einfluss auf das Grid */
.room-dev-wrap{position:relative}
.room-dev-wrap .feedback-button-wrap{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:calc(100% + 26px)!important;
  bottom:auto!important;
  transform:translateX(-50%);
  width:max-content!important;
  margin:0!important;
  z-index:8;
}
.room-dev-wrap .feedback-button{background:#ffcb03!important;color:#000!important}

/* Freischaltung des nächsten Raums: zunächst grau, dann synchron zum Sound farbig. */
.room.unlock-pending{
  filter:grayscale(1) brightness(.62);
  transition:filter .72s ease, transform .72s ease, box-shadow .72s ease;
  pointer-events:none;
}
.room.unlock-pending.unlock-active{
  filter:grayscale(0) brightness(1);
  transform:scale(1.025);
  box-shadow:0 0 0 3px #ffcb03,0 10px 28px rgba(0,0,0,.38);
}

/* Zusatzangaben im Impressum */
.ui-imprint-content .ui-imprint-plain{
  color:#fff!important;
  font-weight:400!important;
}

/* V4.35 – Soundschalter erst auf der Kachelübersicht und unter „Spiel neu starten“ */
#roomScreen .shared-sound-toggle,
.shared-sound-toggle{
  top:190px;
  right:18px;
}

/* V4.36 – deutlich sichtbare Freischaltung */
.room.unlock-pending{filter:grayscale(1) brightness(.48)!important;transition:filter 1.35s ease,transform 1.35s ease,box-shadow 1.35s ease!important}
.room.unlock-pending.unlock-active{filter:grayscale(0) brightness(1)!important;transform:scale(1.035);box-shadow:0 0 0 4px #ffcb03,0 12px 32px rgba(0,0,0,.45)}

/* V4.37 – Ton-Button als Teil der Buttonleiste auf der Kachelübersicht */
#topBar .shared-sound-toggle{
  position:static!important;
  top:auto!important;
  right:auto!important;
  width:auto;
  min-width:142px;
  height:42px;
  min-height:42px;
  margin:0;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:10px;
  font-family:Arial,sans-serif;
  font-size:.92rem;
  font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.24);
}

/* V4.42 – kompakter Ton-Button, rechtsbündig zur Buttonleiste */
#topBar .shared-sound-toggle{
  width:max-content!important;
  min-width:0!important;
  align-self:flex-end!important;
  padding-left:12px!important;
  padding-right:12px!important;
}

/* V4.45 – mehr Abstand zwischen den Bereichen im Impressum */
.ui-imprint-content h3:not(:first-child){
  margin-top:38px!important;
}

/* V4.48 – Dialoge und Rätsel auf Tablets immer über allen Spiel-Elementen */
[role="dialog"],
dialog,
.modal,
.modal-overlay,
.dialog,
.dialog-overlay,
[id$="Modal"],
[id$="modal"],
[id*="Dialog"],
[id*="dialog"],
#roomIntroOverlay,
#chatOverlay,
.ui-dialog-overlay,
.ui-imprint-overlay{
  z-index:2147483000!important;
}
[role="dialog"] *,
dialog *,
.modal *,
.dialog *{
  position:relative;
  z-index:auto;
}


/* V4.63 – Texte in Lösungs-/Eingabefeldern grundsätzlich größer */
input[type="text"],
input:not([type]),
textarea{
  font-size:clamp(20px,1.55vw,28px)!important;
}
input[type="text"]::placeholder,
input:not([type])::placeholder,
textarea::placeholder{
  font-size:.82em!important;
}


/* V4.68 – Hinweisdialog: Schließen-X in allen Räumen rechts oben */
#hintModal .close,
.hint-card > .close,
.ui-hint-dialog .close,
.ui-hint-dialog [data-close]{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  margin:0!important;
}


/* V4.72 – TravelPass-Puzzle: absolute Positionierung gegen globale Dialogregel absichern */
#finaleOverlay .final-puzzle-card{
  position:relative!important;
}
#finaleOverlay .final-close{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  left:auto!important;
}
#finaleOverlay #finalPuzzleBoard{
  position:relative!important;
}
#finaleOverlay #finalSlots{
  position:absolute!important;
  left:50%!important;
  top:18%!important;
  transform:translateX(-50%)!important;
  z-index:3!important;
}
#finaleOverlay #finalLooseLetters{
  position:absolute!important;
  inset:0!important;
  z-index:6!important;
}
#finaleOverlay .final-letter-token{
  position:absolute!important;
  transform:translate(-50%,-50%)!important;
}


/* V4.73 – Abschluss-Abstimmung: Schließen-X oberhalb des Stimmzettels */
#finaleOverlay .ballot-card{
  position:relative!important;
  overflow:visible!important;
}
#finaleOverlay .ballot-card > .final-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  z-index:2147483646!important;
}
#finaleOverlay .ballot-wrap{
  position:relative!important;
  z-index:1!important;
}


/* V4.85 – Finale-X immer anklickbar: über Chat, Puzzle und sonstigen Dialoginhalten */
#finaleOverlay .final-card{
  position:relative!important;
}
#finaleOverlay .final-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  bottom:auto!important;
  z-index:2147483647!important;
  pointer-events:auto!important;
  cursor:pointer!important;
  transform:none!important;
}
#finaleOverlay #finaleChat,
#finaleOverlay #finaleControls,
#finaleOverlay #finalPuzzleBoard,
#finaleOverlay .ballot-wrap{
  z-index:1!important;
}