/* V3.10 – gemeinsamer Feinschliff: Notizen, Impressum, Timer bei Dialogen */
body.ui-dialog-open #room-timer,
body.ui-dialog-open #roomTimer{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#room-timer,#roomTimer{transition:opacity .16s ease,visibility .16s ease!important}

/* Einheitlicher, kompakter Notizzettel in allen Räumen */
#notes-box,#notesBox{
  position:fixed!important;
  z-index:9600!important;
  right:18px!important;
  bottom:50px!important;
  width:238px!important;
  height:auto!important;
  min-height:0!important;
  padding:12px 13px 11px!important;
  border:1px solid rgba(86,70,42,.24)!important;
  border-radius:4px!important;
  background:#fffbed!important;
  background-image:none!important;
  box-shadow:0 8px 24px rgba(0,0,0,.30)!important;
  transform:rotate(-.25deg)!important;
  color:#322d25!important;
  font-family:Arial,Helvetica,sans-serif!important;
}
#notes-box::before,#notesBox::before{display:none!important;content:none!important}
#notes-box h3,#notesBox h3{
  margin:0 0 2px!important;
  padding:0!important;
  border:0!important;
  text-align:center!important;
  font:800 1.12rem/1.15 Arial,Helvetica,sans-serif!important;
  letter-spacing:.04em!important;
  color:#2d2923!important;
}
#notes-box .notes-help,#notesBox .notes-help,#notesBox > p{
  margin:0 0 7px!important;
  text-align:center!important;
  font:400 .72rem/1.2 Arial,Helvetica,sans-serif!important;
  color:#6c665c!important;
}
#shared-notes,#sharedNotes,
#notes-box textarea,#notesBox textarea{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  height:88px!important;
  min-height:88px!important;
  margin:0!important;
  padding:8px 9px!important;
  border:1px solid #d0cdc4!important;
  border-radius:0!important;
  outline:none!important;
  resize:none!important;
  background:#fff!important;
  background-image:none!important;
  color:#322d25!important;
  font:400 .9rem/1.35 Arial,Helvetica,sans-serif!important;
}
#shared-notes::placeholder,#sharedNotes::placeholder,
#notes-box textarea::placeholder,#notesBox textarea::placeholder{color:#b2b2b2!important;opacity:1!important}
#notes-box .paper-button,#notesBox .paper-button,#clearNotesBtn,
#notes-box button,#notesBox button{
  box-sizing:border-box!important;
  width:100%!important;
  min-height:31px!important;
  height:31px!important;
  margin:7px 0 0!important;
  padding:4px 8px!important;
  border:1px solid #6d6658!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#322d25!important;
  font:700 .83rem/1 Arial,Helvetica,sans-serif!important;
  cursor:pointer!important;
}

/* Dezente Build-Kennung am unteren Rand, ohne Spielbedienung abzufangen. */
.resceu-build-badge{
  position:fixed;
  z-index:9500;
  left:50%;
  bottom:2px;
  transform:translateX(-50%);
  padding:1px 5px;
  border-radius:3px;
  background:rgba(8,15,26,.7);
  color:rgba(255,255,255,.75);
  font:400 9px/1 Arial,Helvetica,sans-serif;
  white-space:nowrap;
  pointer-events:none;
}

/* Kleine Produktionsnotiz unter dem Notizzettel */
.ui-credit{
  position:fixed;
  z-index:9590;
  right:16px;
  bottom:10px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  max-width:370px;
  color:rgba(255,255,255,.78);
  font:400 10px/1.2 Arial,Helvetica,sans-serif;
  text-align:right;
  text-shadow:0 1px 5px rgba(0,0,0,.8);
}
.ui-credit button{
  flex:0 0 auto;
  min-height:25px;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:6px;
  background:rgba(8,15,26,.76);
  color:#fff;
  font:700 10px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
}
.ui-credit button:hover,.ui-credit button:focus-visible{border-color:#ffcb05;color:#ffcb05;outline:none}

.ui-imprint-modal{
  position:fixed;
  inset:0;
  z-index:30000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(3px);
}
.ui-imprint-modal.hidden{display:none!important}
.ui-imprint-card{
  position:relative;
  width:min(90vw,420px);
  padding:28px 26px 24px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:17px;
  background:#101827;
  color:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  font-family:Arial,Helvetica,sans-serif;
}
.ui-imprint-card h2{margin:0 42px 18px;color:#ffcb05;text-align:center;font-size:1.35rem}
.ui-imprint-card p{margin:0;text-align:center}
.ui-imprint-close{
  position:absolute;
  right:11px;
  top:10px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#ffcb05;
  color:#183781;
  font-size:1.45rem;
  font-weight:900;
  cursor:pointer;
}

@media(max-width:700px){
  #notes-box,#notesBox{right:10px!important;bottom:48px!important;width:205px!important;padding:10px!important}
  #shared-notes,#sharedNotes,#notes-box textarea,#notesBox textarea{height:76px!important;min-height:76px!important}
  .ui-credit{right:9px;max-width:300px;font-size:9px}
}

/* V3.11 – Produktionshinweis robust gegen raumspezifische Button-Regeln */
.ui-credit{
  width:390px!important;
  max-width:calc(100vw - 32px)!important;
  min-width:0!important;
  flex-wrap:nowrap!important;
}
.ui-credit span{
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  white-space:normal!important;
}
.ui-credit button{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:25px!important;
  min-height:25px!important;
  margin:0!important;
  padding:3px 8px!important;
}
/* Im Museum besonders sauber unter dem kompakten Notizzettel ausrichten. */
body:has(#museum-room) .ui-credit,
body:has(#paintings-modal) .ui-credit{
  right:18px!important;
  bottom:10px!important;
}

/* V3.16 – einheitliches Hinweissystem */
.resc-hint-overlay{position:fixed;inset:0;z-index:40000;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(3,10,24,.76);backdrop-filter:blur(4px)}
.resc-hint-overlay.hidden{display:none!important}.resc-hint-card{position:relative;width:min(92vw,920px);max-height:88vh;overflow:auto;padding:30px 32px 26px;border:1px solid rgba(255,255,255,.38);border-radius:20px;background:#101c32;color:#fff;box-shadow:0 28px 90px rgba(0,0,0,.62);font-family:Arial,sans-serif}.resc-hint-card h2{margin:0 52px 24px;color:#ffcb05;font-size:clamp(1.6rem,3vw,2.15rem)}.resc-hint-close{position:absolute;right:15px;top:14px;width:48px;height:48px;border:0;border-radius:50%;background:#ffcb05;color:#183781;font-size:2rem;font-weight:900;cursor:pointer}.resc-hint-question{font-size:1.2rem;line-height:1.5;margin:10px 0 24px}.resc-hint-item{padding:14px 16px;margin:0 0 12px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(255,255,255,.055)}.resc-hint-item strong{color:#ffcb05}.resc-hint-item p{margin:6px 0 0;line-height:1.45}.resc-hint-actions{display:grid;gap:10px;margin-top:18px}.resc-hint-actions button{width:100%;min-height:48px;border-radius:10px;font-weight:900;font-size:1rem;cursor:pointer}.resc-hint-primary{border:0;background:#ffcb05;color:#183781}.resc-hint-secondary{border:1px solid rgba(255,255,255,.45);background:#293b58;color:#fff}.resc-hint-wait{margin:2px 0 0;color:#cfd7e4;text-align:center;font-size:.9rem}


/* V3.25 – Gesammeltes Basecap als kleiner Zusatzgimmick */
.ui-cap-collectible{
  position:fixed;
  z-index:9650;
  right:78px;
  bottom:236px;
  width:112px;
  height:82px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:auto;
}
.ui-cap-collectible.hidden{display:none!important}
.ui-cap-collectible img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 7px 9px rgba(0,0,0,.42));
  transform:rotate(-4deg);
  transition:transform .18s ease,filter .18s ease;
}
.ui-cap-collectible:hover img,
.ui-cap-collectible:focus-within img{
  transform:rotate(-1deg) translateY(-2px);
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));
}
.ui-cap-tooltip{
  position:absolute;
  right:0;
  bottom:calc(100% + 7px);
  width:230px;
  padding:7px 9px;
  border-radius:8px;
  background:rgba(8,15,26,.92);
  color:#fff;
  font:600 11px/1.3 Arial,Helvetica,sans-serif;
  text-align:left;
  box-shadow:0 5px 18px rgba(0,0,0,.35);
  opacity:0;
  visibility:hidden;
  transform:translateY(5px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
  pointer-events:none;
}
.ui-cap-collectible:hover .ui-cap-tooltip,
.ui-cap-collectible:focus-within .ui-cap-tooltip{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

@media(max-width:700px){
  .ui-cap-collectible{
    right:56px;
    bottom:212px;
    width:86px;
    height:64px;
  }
  .ui-cap-tooltip{width:195px;font-size:10px}
}


/* V3.26 – Basecap näher an den Notizzettel */
.ui-cap-collectible{
  bottom:190px !important;
}
@media(max-width:700px){
  .ui-cap-collectible{bottom:176px !important}
}


/* V3.27 – Basecap hängt links an der oberen Ecke des Notizzettels */
.ui-cap-collectible{
  right:238px !important;
  bottom:177px !important;
  transform:rotate(-12deg) !important;
  transform-origin:70% 75% !important;
}
.ui-cap-collectible:hover{
  transform:rotate(-9deg) scale(1.04) !important;
}
@media(max-width:700px){
  .ui-cap-collectible{
    right:205px !important;
    bottom:166px !important;
  }
}


/* V3.28 – Basecap: in Räumen an die linke obere Ecke des Notizzettels */
body:not(.overview-page) .ui-cap-collectible{
  right:196px !important;
  bottom:176px !important;
  transform:rotate(-12deg) !important;
  z-index:43 !important;
}

/* Auf der Raumübersicht hängt das Basecap an der linken oberen Ecke
   des Feldes „Gesammelte Lösungen“. */
body.overview-page .ui-cap-collectible{
  right:auto !important;
  left:calc(var(--solutions-left, 50%) - 34px) !important;
  bottom:auto !important;
  top:calc(var(--solutions-top, 62%) - 34px) !important;
  transform:rotate(-12deg) !important;
  z-index:43 !important;
}


/* V3.29 – Basecap wirklich AUF der linken oberen Zettelecke */
.ui-cap-collectible{
  z-index:9999 !important;
  pointer-events:auto !important;
}

/* Räume: Notizzettel rechts unten. Das Cap sitzt auf seiner linken oberen Ecke,
   etwas außerhalb, aber sichtbar vor dem Zettel. */
body:not(.overview-page) .ui-cap-collectible{
  left:auto !important;
  right:178px !important;
  top:auto !important;
  bottom:245px !important;
  transform:rotate(-12deg) !important;
  transform-origin:72% 72% !important;
}

/* Raumübersicht: Lösungszettel ist deutlich größer und weiter links.
   Cap an dessen linker oberer Ecke, VOR dem Papier. */
body.overview-page .ui-cap-collectible{
  right:auto !important;
  left:38px !important;
  top:52px !important;
  bottom:auto !important;
  transform:rotate(-12deg) !important;
  transform-origin:72% 72% !important;
}

/* Falls der Lösungszettel einen eigenen Stacking Context erzeugt:
   Cap immer darüber halten. */
body.overview-page .solutions-note,
body.overview-page [class*="solution"],
body.overview-page [id*="solution"]{
  z-index:20;
}
body.overview-page .ui-cap-collectible{
  z-index:9999 !important;
}

.ui-cap-collectible:hover{
  transform:rotate(-9deg) scale(1.04) !important;
}


/* V3.30 – Basecap um ungefähr eine halbe Cap-Höhe nach unten */
body:not(.overview-page) .ui-cap-collectible{
  bottom:205px !important;
}
body.overview-page .ui-cap-collectible{
  top:92px !important;
}


/* V3.31 – Basecap minimal tiefer und garantiert oberste Ebene */
.ui-cap-collectible{
  z-index:2147483647 !important;
  isolation:isolate !important;
}

/* Räume: nur noch eine kleine Korrektur nach unten */
body:not(.overview-page) .ui-cap-collectible{
  bottom:197px !important;
}

/* Raumübersicht entsprechend ebenfalls minimal tiefer */
body.overview-page .ui-cap-collectible{
  top:100px !important;
}


/* V3.32 – echter Overlay-Fix: Basecap ist jetzt Kind des jeweiligen Zettels */
#notes-box,#notesBox,#notepad{
  overflow:visible !important;
}

/* Innerhalb des Notizzettels: linke obere Ecke, etwa halb auf dem Papier */
#notes-box .ui-cap-collectible,
#notesBox .ui-cap-collectible{
  position:absolute !important;
  left:-52px !important;
  right:auto !important;
  top:-39px !important;
  bottom:auto !important;
  z-index:999999 !important;
  width:112px !important;
  height:82px !important;
  transform:rotate(-12deg) !important;
}

/* Raumübersicht: entsprechend an der linken oberen Ecke des Lösungszettels */
#notepad .ui-cap-collectible{
  position:absolute !important;
  left:-48px !important;
  right:auto !important;
  top:-35px !important;
  bottom:auto !important;
  z-index:999999 !important;
  width:112px !important;
  height:82px !important;
  transform:rotate(-12deg) !important;
}

#notes-box .ui-cap-collectible:hover,
#notesBox .ui-cap-collectible:hover,
#notepad .ui-cap-collectible:hover{
  transform:rotate(-9deg) scale(1.04) !important;
}


/* V3.33 – Raumübersicht: Basecap links oben am Zettel "Gesammelte Lösungen" */
#notepad .ui-cap-collectible{
  position:absolute !important;
  left:-48px !important;
  right:auto !important;
  top:-35px !important;
  bottom:auto !important;
  z-index:9999999 !important;
  width:112px !important;
  height:82px !important;
  transform:rotate(-12deg) !important;
}
#notepad .ui-cap-collectible:hover{
  transform:rotate(-9deg) scale(1.04) !important;
}

/* V3.34 – Raumübersicht: Cap wird nach dem Rendern wirklich in #notepad verschoben. */
body.overview-page #notepad{position:relative !important;overflow:visible !important;}
body.overview-page #notepad > .ui-cap-collectible{
  position:absolute !important;
  left:-45px !important;
  right:auto !important;
  top:-28px !important;
  bottom:auto !important;
  z-index:2147483647 !important;
  width:112px !important;
  height:82px !important;
  transform:rotate(-12deg) !important;
}

/* V3.81 – vollständiges Impressum */
.ui-imprint-card{max-height:min(84vh,820px)!important;overflow-y:auto!important;text-align:left!important;}
.ui-imprint-content{font-size:1rem;line-height:1.45;}
.ui-imprint-content p{margin:.65em 0;}
.ui-imprint-content h3{color:#ffcb05;margin:1.15em 0 .35em;font-size:1.12rem;}
.ui-imprint-content a{color:#ffcb05;overflow-wrap:anywhere;}

/* V3.82 – Impressum breiter und durchgehend linksbündig */
.ui-imprint-card{
  width:min(1120px,92vw)!important;
  max-width:1120px!important;
  text-align:left!important;
}
.ui-imprint-card h2,
.ui-imprint-card h3,
.ui-imprint-card p,
.ui-imprint-card .ui-imprint-content,
.ui-imprint-card .ui-imprint-content *{
  text-align:left!important;
}

/* V3.96 – youngprojects-Absender */
.ui-youngprojects-brand{
  position:fixed;
  right:18px;
  z-index:19990;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  pointer-events:auto;
  transition:filter .6s ease, opacity .6s ease;
}
.ui-youngprojects-brand a{display:block;line-height:0;}
.ui-youngprojects-brand a:focus-visible{outline:2px solid #ffcb05;outline-offset:5px;border-radius:5px;}
.ui-youngprojects-brand img{
  display:block;
  width:231px; /* 10 % größer als zuvor auf der Startseite */
  height:auto;
  max-width:100%;
  max-height:102px;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.28));
}
.ui-youngprojects-brand.on-start{
  bottom:36px; /* etwas weiter nach oben */
}
.ui-youngprojects-brand.on-rooms{
  bottom:66px; /* auf der Raumübersicht etwas weiter nach oben */
}
.ui-youngprojects-brand.intro-dimmed{
  filter:brightness(.4) blur(2px);
}

@media(max-width:700px){
  .ui-youngprojects-brand{right:12px;}
  .ui-youngprojects-brand img{width:182px;}
  .ui-youngprojects-brand.on-start{bottom:28px;}
  .ui-youngprojects-brand.on-rooms{bottom:60px;}
}

/* V4.00 – Impressum/Datenschutz: nur Abschnittsüberschriften, weiß */
.ui-imprint-content h3{
  color:#fff!important;
}
.ui-imprint-content a{
  color:#ffcb05!important;
}

.ui-imprint-content .ui-imprint-plain{color:#fff!important;font-weight:400!important;}

/* V4.44 – Raum-Buttonleiste vereinheitlicht */
#restartBtn{
  background:#ffcb03!important;
  color:#183781!important;
  border-color:rgba(255,255,255,.28)!important;
}
#restartBtn:hover,#restartBtn:focus-visible{
  background:#183781!important;
  color:#ffcb03!important;
  border-color:#ffcb03!important;
}
#soundToggle,.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.73 – Impressum: Schließen-X sicher rechts oben */
.ui-imprint-modal .ui-imprint-card{
  position:relative!important;
}
.ui-imprint-modal .ui-imprint-card > .ui-imprint-close{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  bottom:auto!important;
  margin:0!important;
  transform:none!important;
  z-index:2147483646!important;
}


/* V4.74 – Impressum kompakter: etwa halb so breit */
.ui-imprint-modal .ui-imprint-card{
  width:min(560px,92vw)!important;
  max-width:560px!important;
}


/* V4.80 – Notizzettel in den Räumen verschiebbar: Titel oder Papierrand greifen.
   touch-action:none, damit Finger auf Tablets ziehen statt scrollen; das
   Textfeld bleibt davon ausgenommen. */
#notes-box,#notesBox{
  cursor:grab;
  touch-action:none;
}
#notes-box textarea,#notesBox textarea{
  cursor:text;
  touch-action:auto;
}
#notes-box.ui-notes-dragging,#notesBox.ui-notes-dragging{
  cursor:grabbing;
  box-shadow:0 16px 38px rgba(0,0,0,.42)!important;
}