#stonePanel {
	  display: grid;
	  grid-template-columns: repeat(3, auto);   /* 3 kolommen */
	  column-gap: 12px;                         /* ruimte tussen de kolommen */
	  row-gap: 5px;                             /* verticale padding tussen rows */
	  align-items: center;                      /* verticaal centreren van content */
	  padding-top: 10px;
	}

	.counterRow {
	  display: flex;
	  align-items: center;       /* canvas + x2 verticaal gecentreerd */
	  gap: 4px;                  /* ruimte tussen steen en x2 */
	}

	#levelTitle {
	  position: absolute;
	  top: 393px;          /* canvas top (±60) + hoogte (360) + marge */
	  left: 40px;          /* zelfde left als canvas */
	  width: 350px;        /* zelfde breedte als canvas */
	  text-align: center;
	  font-family: "Georgia", "Times New Roman", serif;
	  font-size: 12px;
	  color: #f4e9c0;
	  text-shadow:
	  1px 1px 0 #3a2f1f, 
	  -1px -1px 0 #000000;
	  opacity: 0.85 !important;
	  pointer-events: none;  /* voorkomt dat clicks worden geblokkeerd */
	}

	.intro-image {
	  /* origineel 320×200 → 2× = 640×400 */
	  width: 200px;
	  max-width: 90vw;
	  height: auto;
	  image-rendering: pixelated; /* lekker retro */
	  display: block;
	  margin-bottom: 16px;
	}

	.intro-ok {
	  padding: 8px 18px;
	  border-radius: 999px;
	  border: none;
	  cursor: pointer;
	  font-size: 14px;
	  font-weight: 600;
	  background: #f59e0b;
	  color: #111827;
	}

	.intro-ok:hover {
	  background: #fbbf24;
	}

	.intro-text {
	  max-width: 480px;
	  color: #e5e7eb;
	  font-size: 15px;
	  line-height: 1.45;
	  text-align: left;
	  margin-bottom: 20px;
	}

	.intro-text h2 {
	  margin-top: 0;
	  margin-bottom: 8px;
	  font-size: 20px;
	  color: #fbbf24;
	  text-align: center;
	}


	/* HUD rechts in het marmeren paneel */
	#sz-hud {
	  position: absolute;
	  right: 125px;
	  top: 91px;
	  width: 120px;
	  height: 310px;        /* vaste hoogte van het marmeren paneel */
	}

	.hud-row {
	  display: grid;
	  grid-template-columns: 1fr auto;
	  align-items: center;
	  font-size: 16px;
	  line-height: 1.5;
	  margin-bottom: 1px;
	}

	.hud-label {
	  justify-self: start;
	}

	.hud-value {
	  justify-self: end;
	  text-align: right;
	  min-width: 40px; /* zorgt dat 1 / 15 / 000000 netjes onder elkaar staan */
	}

	/* voorbeeldstijl per steen + count */
	.stone-count {
	  display: flex;
	  align-items: center;
	  gap: 2px;
	  line-height: 1;
	  white-space: nowrap;
	}

	.stone-count img {
	  width: 18px;
	  height: 18px;
	  flex-shrink: 0;
	}

	/* multiplier container */
	.stone-mult {
	  display: inline-flex;
	  align-items: baseline;
	  white-space: nowrap;
	}

	/* de x kleiner/subtieler */
	.stone-mult .mult-x {
	  font-size: 8px;
	  opacity: 0.75;
	}

	/* het getal groter */
	.stone-mult .mult-num {
	  font-size: 12px;
	}

	#hudTimeBox{
	  position: absolute !important;
	  right: 0;
	  bottom: 0;
	  margin: 0 !important;
	  padding: 0 !important;
	  top: 225px !important;
	  transform: none !important;
	/*  left: 55%;             midden van het paneel */
	  text-align: center;
	  pointer-events: none;
	}

	#hudTimeBox .time-value {
	  display: block;
	  font-size: 18px;
	  letter-spacing: 0.15em;
	  transform: translateY(-6px); 
	  color: #FEFEFE;
	  opacity: 0.72;
	}

	/* Hall of fame button linksonder op het canvas */
	#hofBtn {
	  position: absolute;
	  left: 5px;          /* gelijk aan canvas left + kleine marge */
	  top: 450px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 25px;
	  height: 25px;
	  background: url("/assets.php?type=gfx&file=lavahofbtn.png") no-repeat center center;
	  background-size: 100% 100%;
	  border: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  text-indent: -9999px;  /* tekst verbergen */
	  overflow: hidden;
	  outline: none;
	}


	/* Help button linksonder op het canvas */
	#helpBtn {
	  position: absolute;
	  left: 35px;          /* gelijk aan canvas left + kleine marge */
	  top: 450px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 25px;
	  height: 25px;
	  background: url("/assets.php?type=gfx&file=lavahelpbtn.png") no-repeat center center;
	  background-size: 100% 100%;
	  border: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  text-indent: -9999px;   /* tekst verbergen */
	  overflow: hidden;
	  outline: none;
	}


	/* reset button linksonder op het canvas */
	#resetBtn {
	  position: absolute;
	  left: 65px;          /* gelijk aan canvas left + kleine marge */
	  top: 450px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 25px;
	  height: 25px;
	  background: url("/assets.php?type=gfx&file=lavareset.png") no-repeat center center;
	  background-size: 100% 100%;
	  border: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  text-indent: -9999px;   /* tekst verbergen */
	  overflow: hidden;
	  outline: none;
	}


	/* music button linksonder op het canvas */
	#musicBtn {
	  position: absolute;
	  left: 95px;          /* gelijk aan canvas left + kleine marge */
	  top: 450px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 25px;
	  height: 25px;
	  background: url("/assets.php?type=gfx&file=lavamusic_on.png") no-repeat center center;
	  background-size: 100% 100%;
	  border: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  text-indent: -9999px;   /* tekst verbergen */
	  overflow: hidden;
	  outline: none;
	}

	/* music button linksonder op het canvas */
	#track1Btn {
	  position: absolute;
	  left: 115px;          /* gelijk aan canvas left + kleine marge */
	  top: 455px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 15px;
	  height: 15px;
	  background: url("/assets.php?type=gfx&file=1.png") no-repeat center center;
	  background-size: 100% 100%;
	  border: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  text-indent: -9999px;   /* tekst verbergen */
	  overflow: hidden;
	  outline: none;
	}

	/* music button linksonder op het canvas */
	#track2Btn {
	  position: absolute;
	  left: 130px;          /* gelijk aan canvas left + kleine marge */
	  top: 455px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 15px;
	  height: 15px;
	  background: url("/assets.php?type=gfx&file=2.png") no-repeat center center;
	  background-size: 100% 100%;
	  border: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  text-indent: -9999px;   /* tekst verbergen */
	  overflow: hidden;
	  outline: none;
	}

	/* music button linksonder op het canvas */
	#track3Btn {
	  position: absolute;
	  left: 145px;          /* gelijk aan canvas left + kleine marge */
	  top: 455px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 15px;
	  height: 15px;
	  background: url("/assets.php?type=gfx&file=3.png") no-repeat center center;
	  background-size: 100% 100%;
	  border: none;
	  padding: 0;
	  margin: 0;
	  cursor: pointer;
	  text-indent: -9999px;   /* tekst verbergen */
	  overflow: hidden;
	  outline: none;
	}

	/* bottom button level editor */
	.levedBtn {
	  position: absolute;
	  left: 560px;          /* gelijk aan canvas left + kleine marge */
	  top: 120px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 60px;
	  height: 20px;
	  margin: 0;
	  padding: 0 4px;
	  font-family: arial;
	  font-size: 7px;
	  border-radius: 8px;
	  border: 1px solid rgba(255,255,255,0.25);
	  background: rgba(0,0,0,0.35);
	  color: rgba(244,233,192,0.95);
	  cursor: pointer;
	}

	.levedBtn:hover{ background: rgba(0,0,0,0.5); }
	.levedBtn:active{
	  filter: brightness(0.9);
	}

	/* bottom button level editor */
	.pwdBtn {
	  position: absolute;
	  left: 560px;          /* gelijk aan canvas left + kleine marge */
	  top: 95px;          /* canvas top + hoogte - button hoogte (tweak) */
	  width: 60px;
	  height: 20px;
	  margin: 0;
	  padding: 0 4px;
	  font-family: arial;
	  font-size: 7px;
	  border-radius: 8px;
	  border: 1px solid rgba(255,255,255,0.25);
	  background: rgba(0,0,0,0.35);
	  color: rgba(244,233,192,0.95);
	  cursor: pointer;
	}

	.pwdBtn:hover{ background: rgba(0,0,0,0.5); }
	.pwdBtn:active{
	  filter: brightness(0.9);
	}


	.hofClose:active{ transform: scale(0.96); }


	.grid-toolbar { display:flex; flex-direction:column; gap:8px; margin:8px 0 10px; }
	.tool-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
	.tool-row label { font-size:12px; opacity:.85; min-width:52px; }
	.tool-row select, .tool-row button { font-size:12px; }
	.tinyhint { font-size:11px; opacity:.75; }

	.lev-grid{
	  display:grid;
	  grid-template-columns: repeat(8, 34px);
	  grid-template-rows: repeat(8, 34px);
	  gap:6px;
	  padding:10px;
	  border-radius:10px;
	  background: rgba(0,0,0,.15);
	  border: 1px solid rgba(255,255,255,.10);
	  user-select:none;
	}

	.lev-cell{
	  width:34px; height:34px;
	  border-radius:6px;
	  display:flex; align-items:center; justify-content:center;
	  font-size:12px;
	  background: rgba(255,255,255,.10);
	  border: 1px solid rgba(255,255,255,.14);
	  cursor:pointer;
	  transition: filter .08s ease, background-color .08s ease, border-color .08s ease;
	}

	/* Lege cellen lichter + duidelijke rand */
	.lev-cell.empty{
	  opacity: 1;                                /* niet faden */
	  background: rgba(255,255,255,.06);         /* lichter */
	  border: 1px dashed rgba(255,255,255,.22);  /* zichtbaar */
	}

	/* Hover: moet nu goed zichtbaar zijn */
	.lev-cell:hover{
	  filter: brightness(1.25);
	}

	/* Status (laat dit gewoon een rustige pill zijn) */
	.grid-status{
	  margin:6px 0 8px;
	  font-size:12px;
	  padding:6px 10px;
	  border-radius:999px;
	  background: rgba(0,0,0,.25);
	  border: 1px solid rgba(255,255,255,.10);
	}

	.grid-status.ok{ color:#b9f6c8; }
	.grid-status.err{ color:#ff9e9e; }

	/* Overlay mag scrollen als het geheel te hoog is */
	.level-editor-overlay{
	  overflow: auto;              /* <— belangrijk */
	  -webkit-overflow-scrolling: touch;
	  padding: 16px;
	}

	/* Panel max hoogte in viewport en interne scroll */
	.level-editor-panel{
	  max-height: calc(100vh - 32px);
	  overflow: auto;              /* <— belangrijk */
	}

	/* Maak buttons altijd zichtbaar onderin */
	.level-editor-panel .buttons{
	  position: sticky;
	  bottom: 0;
	  background: rgba(0,0,0,0.55);   /* match theme, evt. iets lichter/donkerder */
	  backdrop-filter: blur(6px);
	  padding: 10px 0 0;
	  margin-top: 10px;
	  border-top: 1px solid rgba(255,255,255,0.12);
	}

	#levGrid .lev-cell:hover{
	  filter: brightness(1.35) !important;
	  outline: 2px solid rgba(255,255,255,.20);
	}

	#levGrid .lev-cell:active{
	  filter: brightness(1.45) !important;
	  outline: 2px solid rgba(255,255,255,.28);
	}

	@media (max-width: 420px){
	  .lev-grid{
		grid-template-columns: repeat(8, 30px);
		grid-template-rows: repeat(8, 30px);
		gap: 5px;
	  }
	  .lev-cell{ width:30px; height:30px; font-size:12px; }
	}

	.editor-row{
	  display: flex;
	  gap: 12px;
	  align-items: flex-end;
	}

	.editor-row label{
	  display: flex;
	  flex-direction: column;
	}

	.editor-row label.small{
	  width: 110px;
	}

	.editor-row label.grow{
	  flex: 1;
	}

	.time-row.compact{
	  display: flex;
	  align-items: center;
	  gap: 4px;
	}

	.time-row.compact input{
	  width: 52px;
	  text-align: center;
	}

	.level-editor-overlay {
	  position: fixed;
	  inset: 0;
	  background: rgba(0,0,0,0.6);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 9999;
	}

	.level-editor-overlay.hidden {
	  display: none;
	}

	.level-editor-panel {
	  background: #111827;
	  color: #e5e7eb;
	  padding: 16px 20px 18px;
	  border-radius: 10px;
	  min-width: 320px;
	  max-width: 420px;
	  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
	  border: 1px solid #374151;
	  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	}

	.level-editor-panel h2 {
	  margin: 0 0 4px;
	  font-size: 18px;
	}

	.level-editor-panel .subtitle {
	  margin: 0 0 14px;
	  font-size: 12px;
	  color: #9ca3af;
	}

	.level-editor-panel label {
	  display: block;
	  font-size: 13px;
	  margin-bottom: 8px;
	}

	.level-editor-panel input {
	  width: 100%;
	  margin-top: 4px;
	  padding: 4px 6px;
	  border-radius: 4px;
	  border: 1px solid #4b5563;
	  background: #020617;
	  color: #e5e7eb;
	  font-size: 13px;
	  box-sizing: border-box;
	}

	.time-row {
	  display: flex;
	  align-items: center;
	  gap: 4px;
	}

	.time-row input {
	  width: 50%;
	}

	.time-row span {
	  color: #9ca3af;
	  font-size: 13px;
	}

	.level-editor-panel .buttons {
	  display: flex;
	  gap: 8px;
	  margin-top: 12px;
	  margin-bottom: 6px;
	}

	.level-editor-panel button {
	  flex: 1;
	  padding: 6px 10px;
	  border-radius: 6px;
	  border: none;
	  cursor: pointer;
	  font-size: 13px;
	}

	#levSaveBtn {
	  background: #22c55e;
	  color: #022c22;
	}

	#levCloseBtn {
	  background: #374151;
	  color: #e5e7eb;
	}

	.level-editor-panel .hint {
	  margin: 0;
	  font-size: 11px;
	  color: #9ca3af;
	}

	html, body {
	  margin: 0;
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	  background: #070a2a; /* donkerblauw */
	}

	#gameViewport{
	  position: fixed;
	  inset: 0;
	  width: 100vw;  
	  height: 100dvh; 
	  display: flex; 
	  align-items: center;
	  justify-content: center;
	}

	/* overlay die je alleen in portrait toont */
	#rotateOverlay{
	  position: fixed;
	  inset: 0;
	  display: none;
	  align-items: center;
	  justify-content: center;
	  background: rgba(0,0,0,0.9);
	  color: #fff;
	  z-index: 9999;
	  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
	  text-align: center;
	  padding: 24px;
	}

	@media (max-width: 600px) and (orientation: portrait) {
	  #rotateOverlay { display: flex; }
	  #gameViewport { display: none; }
	}

	#sz-frame {
	  position: relative;
	  width: 640px;
	  height: 480px;
	  font-family: "Georgia", "Times New Roman", serif;
	  color: #f4e9c0; /* goudachtig */
	  user-select: none;
      --sz-bg-image: url("/assets.php?type=gfx&file=board3.png");
      background-image: var(--sz-bg-image);
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  background-position: center;
	  transform-origin: center center;
	  transform: scale(var(--ui-scale, 1));
	}

	/* Canvas op de gele ‘blaar’ links */
	#gameCanvas {
	  position: absolute;
	  left: 78px;
	  top: 90px;
	  width: 400px;   /* deze is cruciaal voor de schaling van de stenen */
	  height: 360px;  /* deze is cruciaal voor de schaling van de stenen */
	  /* evt. background transparant laten; het geel komt uit de image */
	}

	#fxCanvas{
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 640px;
	  height: 480px;
	  pointer-events: none;   /* clicks gaan door naar de game */
	  z-index: 20;            /* boven background + canvas + hud */
	}

	.levpanel-toggle { position: absolute; top: 10px; left: 10px; z-index: 50; }

	.levpanel {
	  position: absolute;
	  top: 44px;
	  left: 10px;
	  width: 360px;
	  max-width: calc(100% - 20px);
	  max-height: 55vh;
	  z-index: 60;
	  overflow: hidden;
	  background: rgba(255,255,255,0.92);
	  border-radius: 10px;
	  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
	}

	#levelEditorOverlay { position: relative; }

	#levelListPanel.levpanel {
	  position: absolute;
	  top: 24px;
	  left: 24px;        /* verplaats weg van rand */
	  width: 420px;      /* mooier */
	  max-height: 78vh;

	  background: rgba(15, 23, 42, 0.92);
	  color: #e5e7eb;
	  border: 1px solid rgba(148,163,184,0.25);
	  border-radius: 14px;
	  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
	  z-index: 9999;
	  overflow: hidden;
	}

	.levpanel.hidden { display: none; }
	.levpanel-body { overflow-y: auto; max-height: calc(55vh - 44px); padding: 8px; }

	.levpanel-head {
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
	  gap: 10px;
	  padding: 10px 12px;
	  background: rgba(255,255,255,0.06);
	}

	.levpanel-title {
	  font-weight: 700;
	  font-size: 14px;
	}

	.levpanel-close {
	  flex: 0 0 auto !important;
	  width: 34px !important;
	  height: 30px !important;
	  padding: 0 !important;
	  display: grid !important;
	  place-items: center !important;

	  border-radius: 10px;
	  border: 1px solid rgba(148,163,184,0.35);
	  background: rgba(0,0,0,0.25);
	  color: #e5e7eb;
	  cursor: pointer;
	}

	.levpanel-close:hover { filter: brightness(1.15); }

	.levpanel-body {
	  padding: 8px;
	  overflow-y: auto;
	  max-height: calc(55vh - 44px);
	}

  
  /* =========================================================
   UI OVERLAYS (one system)
   - Use: <div class="uiOverlay open"> ... </div>
   - Default modal: marble PNG
   ========================================================= */

	/* base modal (marble) */
	.uiOverlay .modal{
	  position: relative;
	  width: 180px;

	  background: url("/assets.php?type=gfx&file=lavamodal.png&v=2") no-repeat center center;
	  background-size: 100% 100%;

	  padding: 50px 18px 60px; /* reserve space for bottom button */
	  user-select: none;
	  font-family: Georgia, "Times New Roman", serif;
 	  color: #f4e9c0;
	  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	  text-align: center;
	}

	.uiOverlay .modal h2{
 	  color: #f4e9c0;
	  margin: 0 0 8px;
	  font-size: 30px;
	}

	.uiOverlay .modal p{
	  margin: 0 0 10px;
 	  color: #f4e9c0;
	  font-size: 20px;
	  line-height: 1.55;
	  white-space: pre-line;
	}

	/* bottom centered primary button (old #uiOkBtn.modal-ok) */
	.uiOverlay .modal .modal-ok{
	  position: absolute;
	  width: 50px;
	  height: 20px;
	  left: 50%;
	  bottom: 60px;
	  transform: translateX(-50%);
	  margin: 0;
	  padding: 0 12px;

	  font-family: arial;
	  font-size: 14px;

	  border-radius: 8px;
	  border: 1px solid rgba(255,255,255,0.25);
	  background: rgba(0,0,0,0.35);
	  color: rgba(244,233,192,0.95);
	  cursor: pointer;
	}

	.uiOverlay .modal .modal-ok:hover{ background: rgba(0,0,0,0.5); }
	.uiOverlay .modal .modal-ok:active{
	  transform: translateX(-50%) translateY(1px);
	  filter: brightness(0.9);
	}

	/* row buttons (used in highscore entry) */
	.uiOverlay .row{
	  display: flex;
	  gap: 10px;
	  justify-content: center;
	  margin-top: 10px;
	}
	
	.uiOverlay .pwd{
	  justify-content: center;
	  font-size: 16px;
	  color: #ffa500;
	}
	
	.uiOverlay .row button{
	  min-width: 90px;
	  height: 28px;
	  border-radius: 8px;
	  border: 1px solid rgba(255,255,255,0.25);
	  background: rgba(0,0,0,0.35);
	  color: rgba(244,233,192,0.95);
	  cursor: pointer;
	}

/*	.uiOverlay.hof{ background: rgba(0,0,0,0.65); } */

	.uiOverlay.hof .hofPanel{
	  width: min(460px, 92vw);
	  height: min(520px, 86vh);
	  background: url("/assets.php?type=gfx&file=hoflavamodal.png&v=2") no-repeat center center;
	  background-size: 100% 100%;
	  position: relative;
	  overflow: visible;
	}

	.uiOverlay.hof .hofInner{
	  position: absolute;
	  left: 50px;
	  right: 70px;
	  top: 45px;
	  bottom: 30px;
	  display: flex;
	  flex-direction: column;
	  gap: 10px;

	  font-family: Georgia, "Times New Roman", serif;
	  color: rgba(244,233,192,0.95);
	  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	}

	/* bottom centered primary button (old #uiOkBtn.modal-ok) */
	.uiOverlay.hof .hof-ok{
	  position: absolute;
	  width: 50px;
	  height: 20px;
	  left: 50%;
	  bottom: 20px;
	  transform: translateX(-50%);
	  margin: 0;
	  padding: 0 12px;

	  font-family: Georgia, "Times New Roman", serif;
	  font-size: 14px;

	  border-radius: 8px;
	  border: 1px solid rgba(255,255,255,0.25);
	  background: rgba(0,0,0,0.35);
	  color: rgba(244,233,192,0.95);
	  cursor: pointer;
	}

	.uiOverlay.hof .hof-ok:hover{ background: rgba(0,0,0,0.5); }
	.uiOverlay.hof .hof-ok:active{
	  transform: translateX(-50%) translateY(1px);
	  filter: brightness(0.9);
	}


	.uiOverlay.hof .hofTitle{
	  margin: 0;
	  text-align: center;
	  font-size: 24px;
	}

	.uiOverlay.hof .hofList{
	  flex: 1;
	  overflow: auto;
	  padding: 0px 6px 6px 2px; /* top right bottom left */
	  display: flex;
	  flex-direction: column;
	  gap: 6px;
	}

	/* header + rows: exact dezelfde grid */
	.uiOverlay.hof .hofRow{
	  display: grid;
	  grid-template-columns: 40px 1fr 4ch 60px; /* rank, name, lvl, score */
	  align-items: center;
	  gap: 8px;
	  padding: 4px 0;  /* hoogte van iedere rij */
	  border-bottom: 1px solid rgba(255,255,255,0.12);
	  font-variant-numeric: tabular-nums;
	}

	.uiOverlay.hof .hofRow:last-child{ border-bottom: none; }

	/* header styling */
	.uiOverlay.hof .hofRow.hofHead{
	  font-size: 14px;
	  letter-spacing: 0.08em;
	  text-transform: uppercase;
	  opacity: 0.75;
	  border-bottom: 1px solid rgba(255,255,255,0.25);
	  padding: 4px 0 10px;
	}

	/* uitlijning per kolom */
	.uiOverlay.hof .hofRank{ text-align: right; opacity: 0.85; }
	.uiOverlay.hof .hofName{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.uiOverlay.hof .hofLevel,
	.uiOverlay.hof .hofScore{
	  text-align: right;
	  font-variant-numeric: tabular-nums;
	}

	body{
	  display: block !important;
	  padding: 0 !important;
	  margin: 0 !important;
	  gap: 0 !important;
	}

	/* hard guarantee: overlays are fullscreen */
	.uiOverlay{
	  position: fixed !important;
	  inset: 0 !important;
	  width: 100vw !important;
	  height: 100vh !important;
	  display: none;
	  align-items: center;
	  justify-content: center;
	  z-index: 99999 !important;
	  background: rgba(0,0,0,0.65);
	} 

	.uiOverlay.open{
	  display: flex !important;
	}
	  
	/* ========= Intro variant ========= */
	.uiOverlay.intro{
	  background: rgba(0,0,0,0.72);
	  user-select: none;
	}

	.uiOverlay.intro .introPanel{
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 14px;

	  background: rgba(17, 24, 39, 0.92);
	  border: 1px solid rgba(148,163,184,0.25);
	  border-radius: 14px;
	  padding: 18px 22px 20px;
	  box-shadow: 0 24px 80px rgba(0,0,0,0.85);
	  text-align: center;

	  max-width: min(92vw, 720px);
	}

	.uiOverlay.intro .intro-image{
	  display: block;
	  width: min(600px, 88vw);      /* DEZE gebruiken om intro-image te schalen */
	  height: auto;
	  margin: 0 auto;
	  border-radius: 8px;
	}

	.uiOverlay.intro .intro-text{
	  max-width: min(600px, 88vw);  /* DEZE gebruiken voor de intro en help tekst */
	  color: #f4e9c0;
	  font-family: arial;
	  font-size: 13px;
	  text-align: left;
	}

	.uiOverlay.intro .intro-text h2{
	  margin: 0 0 8px;
	  font-size: 20px;
	  color: #fbbf24;
	  text-align: center;
	}

	.uiOverlay.intro .intro-ok{
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  margin: 6px auto 0;
	  padding: 8px 18px;
	  border-radius: 999px;
	  border: none;
	  cursor: pointer;
	  font-size: 14px;
	  font-weight: 700;
	  background: #f59e0b;
	  color: #111827;
	}

	.uiOverlay.intro .intro-ok:hover{
	  background: #fbbf24;
	}



	/* Geen blauwe focusring bij mouse-click */
	.modal-ok:focus { outline: none; }

	/* Maar wél zichtbaar bij toetsenbord (tab) */
	.modal-ok:focus-visible {
	  outline: 2px solid rgba(255,255,255,0.35);
	  outline-offset: 2px;
	}

	@keyframes lifePulse {
	  0%   { transform: scale(1);   }
	  15%  { transform: scale(1.5); }
	  30%  { transform: scale(1);   }
	  45%  { transform: scale(1.35);}
	  60%  { transform: scale(1);   }
	  75%  { transform: scale(1.2); }
	  100% { transform: scale(1);   }
	}

	.life-pulse {
	  animation: lifePulse 0.9s ease-out;
	  text-shadow: 0 0 6px rgba(255,215,0,0.9);
	}


	.uiOverlay .modal.modal{ width: 260px; min-height: 160px; }   /* default */
	.uiOverlay .modal.modal-sm{ width: 180px; min-height: 150px; }
	.uiOverlay .modal.modal-lg{ width: 420px; min-height: 240px; }

	#musicVolume{
	  position: absolute;
	  left: 170px;        /* naast je music/track knoppen */
	  top: 460px;
	  width: 90px;
	  height: 5px;

	  appearance: none;
	  background: rgba(0,0,0,0.4);
	  border-radius: 999px;
	  outline: none;
	  cursor: pointer;
	}

	/* WebKit thumb */
	#musicVolume::-webkit-slider-thumb{
	  appearance: none;
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  background: #fbbf24;
	  border: 1px solid rgba(0,0,0,0.6);
	  box-shadow: 0 0 6px rgba(251,191,36,0.8);
	}

	/* Firefox thumb */
	#musicVolume::-moz-range-thumb{
	  width: 10px;
	  height: 10px;
	  border-radius: 50%;
	  background: #fbbf24;
	  border: none;
	}

/* ================================
   Level list styling (scoped)
   Container: #levelListPanel > #levelList
   Rows: .level-row (+ .selected)
   Buttons: .level-label, .btn-up, .btn-down
   ================================ */

#levelListPanel #levelList {
  display: flex;
  flex-direction: column;
  gap: 8px;               /* ✅ meer ruimte tussen rijen */
  padding: 10px;
}

/* rij layout */
#levelListPanel #levelList .level-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* basisstijl voor ALLE knoppen in de rij */
#levelListPanel #levelList .level-row button {
  border: 0;
  border-radius: 10px;
  padding: 8px 10px;
  font: inherit;
  line-height: 1;
  cursor: pointer;

  background: rgba(0,0,0,0.70);     /* ✅ donker */
  color: rgba(255,255,255,0.92);     /* ✅ wit */
}

/* label knop neemt alle ruimte */
#levelListPanel #levelList .level-label {
  flex: 1;
  min-width: 0;
  text-align: left;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Maak up/down knoppen compact ===== */
#levelListPanel #levelList .btn-up,
#levelListPanel #levelList .btn-down {
  width: 28px;          /* 🔧 veel smaller */
  min-width: 28px;
  max-width: 28px;

  padding: 6px 0;       /* geen horizontale padding */
  font-size: 14px;
  line-height: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* hover (subtiel) */
#levelListPanel #levelList .level-row button:hover:not(:disabled) {
  filter: brightness(1.10);
}

/* disabled knoppen duidelijk maar niet lelijk */
#levelListPanel #levelList .level-row button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ================================
   Selected row: ALLE knoppen wit + zwarte tekst
   ================================ */

#levelListPanel #levelList .level-row.selected button {
  background: rgba(255,255,255,0.92);  /* ✅ wit */
  color: rgba(15,15,15,0.95);          /* ✅ donker tekst */
  font-weight: 700;
}

/* geselecteerd maar disabled (bv up bij eerste level) */
#levelListPanel #levelList .level-row.selected button:disabled {
  opacity: 0.45;
}

#uiOverlay:not(.dead-warning-modal) .modal #uiText {
  transform: translateY(-28px);
  margin-top: 0;
  line-height: 1.45;
}

/* =========================================================
   DEAD WARNING - bord zichtbaar houden
   ========================================================= */

#uiOverlay.dead-warning-modal {
  background: transparent !important;

  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.langSwitch {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.langBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  padding: 6px 10px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);

  background: rgba(0,0,0,0.35);
  color: #f4e9c0;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;

  text-decoration: none;
  cursor: pointer;
}

.langBtn:hover {
  background: rgba(255,255,255,0.12);
}

.langBtn.active {
  background: #f59e0b;
  color: #111827;
}

.flagIcon {
  width: 18px;
  height: 12px;
  display: inline-flex;
  overflow: hidden;

  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20);
}

.flagIcon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================
   DEAD WARNING MODAL
   ========================================================= */

#uiOverlay.dead-warning-modal .modal {
  position: fixed;

  width: 230px;
  max-width: calc(100vw - 20px);
  min-height: 250px;

  margin: 0;
  box-sizing: border-box;

  transform: none;
}

/* ---------- icoon ---------- */

#uiOverlay.dead-warning-modal .dead-warning-icon {
  display: block;
  width: 78px;
  height: auto;

  margin: 0 auto 8px;

  position: relative;
  top: -16px;
}

#uiOverlay.dead-warning-modal .modal #uiText span {
  display: block;
}


/* ---------- tekst ---------- */
#uiOverlay.dead-warning-modal .modal #uiText {
  position: absolute;

  top: 28px;
  left: 50%;
  transform: translateX(-50%);

  width: 190px;
  max-width: 190px;

  margin: 0;

  display: flex;
  flex-direction: column;
  align-items: center;

  color: #f4e9c0;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 200;
  line-height: 1.22;

  text-align: center;
  white-space: normal;

  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}

#uiOverlay.dead-warning-modal .dead-warning-icon {
  position: static;

  display: block;

  width: 74px;
  height: auto;

  margin: 0 0 10px 0;

  transform: none;
}

#uiOverlay.dead-warning-modal .modal #uiText span {
  display: block;
  width: 100%;
}

/* ---------- buttons ---------- */
#uiOverlay.dead-warning-modal .modal-dead-buttons {
  position: absolute;

  left: 50%;
  bottom: 34px;

  transform: translateX(-50%);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 200px;
  margin: 0;
}

#uiOverlay.dead-warning-modal .modal-dead-buttons[hidden] {
  display: none;
}

#uiOverlay.dead-warning-modal .modal-dead-buttons button {
  min-width: 88px;
  height: 26px;

  margin: 0;
  padding: 0 10px;

  border: 1px solid rgba(244, 180, 90, 0.55);
  border-radius: 8px;

  background:
    linear-gradient(
      to bottom,
      rgba(110, 52, 22, 0.98),
      rgba(66, 27, 12, 0.98)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 5px rgba(0,0,0,0.45);

  color: #f4e9c0;

  font-family: arial;
  font-size: 12px;
  line-height: 24px;

  text-align: center;

  cursor: pointer;

  -webkit-appearance: none;
  appearance: none;
}

#uiOverlay.dead-warning-modal .modal-dead-buttons button:hover {
  background:
    linear-gradient(
      to bottom,
      rgba(135, 64, 27, 0.98),
      rgba(78, 31, 13, 0.98)
    );

  border-color:
    rgba(255, 199, 110, 0.75);
}

#uiOverlay.dead-warning-modal .modal-dead-buttons button:active {
  transform: translateY(1px);

  box-shadow:
    inset 0 1px 3px rgba(0,0,0,0.40);
}

#uiOverlay.dead-warning-modal .modal-dead-buttons button:focus {
  outline: none;
}

#uiOverlay.dead-warning-modal .modal-dead-buttons button:focus-visible {
  outline: 2px solid rgba(244, 180, 90, 0.45);
  outline-offset: 2px;
}

/* =========================================================
   BOTTOM BUTTON TOOLTIPS
   ========================================================= */

#hofBtn,
#helpBtn,
#resetBtn,
#musicBtn {
  overflow: visible;
}

#hofBtn::after,
#helpBtn::after,
#resetBtn::after,
#musicBtn::after {
  content: attr(data-tooltip);

  position: absolute;
  left: 50%;
  bottom: 31px;
  transform: translateX(-50%) translateY(3px);

  padding: 4px 7px;

  background: rgba(82, 34, 14, 0.96);
  border: 1px solid rgba(244, 180, 90, 0.55);
  color: #f4e9c0;

  border-radius: 5px;

  font-family: Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  white-space: nowrap;

  text-indent: 0;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  z-index: 100;

  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0.12s ease;
}

#hofBtn:hover::after,
#helpBtn:hover::after,
#resetBtn:hover::after,
#musicBtn:hover::after,
#hofBtn:focus-visible::after,
#helpBtn:focus-visible::after,
#resetBtn:focus-visible::after,
#musicBtn:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

#gameCanvas {
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

/* =========================================================
   DEAD WARNING - rechterpaneel
   ========================================================= */

#uiOverlay.dead-warning-modal {
  background: transparent !important;

  align-items: flex-start !important;
  justify-content: flex-start !important;
}

#uiOverlay.dead-warning-modal .modal {
  position: fixed;

  width: 230px;
  min-height: 250px;

  margin: 0;
  box-sizing: border-box;

  transform: none;
}

#uiOverlay.install-modal .modal h2 {
  font-size: 24px;
  margin-bottom: 18px;
}

#uiOverlay.install-modal .modal #uiText {
  transform: none;
  position: static;
  font-size: 15px;
  line-height: 1.45;
  max-width: 210px;
  margin: 0 auto 20px;
}

/* =========================================================
   STATIC HTML HELPERS
   Replaces former inline style attributes in stonezone.php
   ========================================================= */

.rotate-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.rotate-text {
  opacity: 0.85;
}

.editor-divider {
  margin: 14px 0;
  opacity: 0.35;
}

.editor-grid-title {
  margin: 6px 0 8px;
}

.tool-row.editor-tool-row {
  margin-bottom: 8px;
}


/* Mobiele knoppen blijven op desktop en tablet verborgen. */
#mobileControls { display: none; }
#mobileTimerBezel { display: none; }
#mobileMenu { display: none; }

/* =====================================================
   STONEZONE DEV — MOBILE PORTRAIT
   Alleen telefoons t/m 600px in portrait
   ===================================================== */

@media (max-width: 600px) and (orientation: portrait) {

  /* Rotatiemelding verbergen */
	  #rotateOverlay {
		display: none;
	  }

	  /* Spel weer zichtbaar maken */
	  #gameViewport {
		display: flex;
	  }

	  #sz-frame {
		--sz-bg-image: url("/assets.php?type=gfx&file=mobile_bg.png&v=2.4");
		--sz-mobile-board-left: 34px;
		--sz-mobile-board-top: 144px;
		--sz-mobile-board-width: 292px;
		--sz-mobile-board-height: 309px;
		--sz-mobile-footer-gap: 14px;

		width: 360px;
		height: 680px;

		background-image: var(--sz-bg-image);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center top;
		overflow: hidden;
	  }

	/* Speelcanvas uitlijnen op mobile_bg v2 */
	#gameCanvas {
	  left: 32px;
	  top: 93px;

	  width: 298px !important;
	  height: 317px !important;
	}

	  /* FX-canvas volgt het volledige mobiele frame */
	  #fxCanvas {
		left: 0;
		top: 0;
		width: 360px;
		height: 680px;
	  }

	  /* Desktop-HUD en desktopknoppen tijdelijk weg op mobiel */
	  #sz-hud,
	  #hofBtn,
	  #helpBtn,
	  #resetBtn,
	  #musicBtn,
	  #track1Btn,
	  #track2Btn,
	  #track3Btn,
	  #musicVolume,
	  #levedBtn,
	  #pwdBtn {
		display: none !important;
	  }

	  /* Leveltitel voorlopig onder het bord */
	  #levelTitle {
		left: 24px;
		top: 472px;
		width: 312px;
		font-size: 14px;
		line-height: 1.25;
		text-align: center;
	  }
  
  /* =====================================================
   MOBILE — FULL WIDTH BACKGROUND
   ===================================================== */

	#gameViewport {
	  align-items: flex-start;
	  justify-content: center;
	  overflow-x: hidden;
	  overflow-y: auto;
	}

	#sz-frame {
	  flex: 0 0 auto;
	  transform-origin: top center;
	}
	
	/* =====================================================
   MOBILE — LEVEL HINT LEESBAARHEID
   ===================================================== */

	#sz-frame .level-hint {
	  width: 180px;
	  padding: 10px 12px;
	  font-size: 13px;
	  line-height: 1.4;
	  border-radius: 8px;
	}

	#sz-frame .level-hint-image {
	  max-width: 110px;
	  max-height: 78px;
	}

	#sz-frame .level-hint-ok {
	  min-width: 45px;
	  padding: 6px 10px;
	  font-size: 12px;
	  margin-top: 10px;
	}
	
	/* =====================================================
   STONEZONE DEV — MOBILE HUD
   ===================================================== */

	/* Bestaande HUD boven het speelveld plaatsen */
	#sz-hud {
	  display: grid !important;
	  grid-template-columns: repeat(4, minmax(0, 1fr));
	  gap: 5px;

	  position: absolute;
	  left: 32px;
	  top: 16px;
	  right: auto;

	  width: 298px;
	  height: auto;

	  padding: 0;
	  margin: 0;
	  z-index: 25;
	}

	/* Vier compacte informatievakjes */
	#sz-hud .hud-row {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;

	  min-width: 0;
	  min-height: 43px;
	  margin: 0;
	  padding: 4px 2px;
	  box-sizing: border-box;

	  background: rgba(20, 11, 14, 0.45);
	  border: 2px solid rgba(219, 131, 65, 0.65);
	  border-radius: 7px;

	  line-height: 1.2;
	}

	/* Labels boven de cijfers */
	#sz-hud .hud-row::before {
	  display: block;
	  margin-bottom: 4px;

	  font-family: Arial, sans-serif;
	  font-size: 9px;
	  font-weight: 600;
	  letter-spacing: 0.5px;
	  color: #dda66d;
	}

	#sz-hud .hud-row:nth-child(1)::before {
	  content: "LEVEL";
	}

	#sz-hud .hud-row:nth-child(2)::before {
	  content: "LIVES";
	}

	#sz-hud .hud-row:nth-child(3)::before {
	  content: "MOVES";
	}

	#sz-hud .hud-row:nth-child(4)::before {
	  content: "SCORE";
	}

	/* Actuele spelwaarden */
	#sz-hud .hud-value {
	  display: block;

	  min-width: 0;
	  width: 100%;

	  text-align: center;
	  font-size: 14px;
	  font-weight: bold;
	  font-variant-numeric: tabular-nums;
	  white-space: nowrap;

	  color: #ffe3ad;
	  text-shadow: 0 1px 3px #000;
	}

	/* Score kan uit zes of meer cijfers bestaan */
	#statsLine4 {
	  font-size: 12px;
	}

	/* Stonepanel verplaatsen we later naar de footer */
	#sz-hud #stonePanel {
	  display: none !important;
	}
	
	/* =====================================================
   MOBILE — LEVEL TITLE
   ===================================================== */

	#levelTitle {
	  position: absolute;
	  left: 20px;
	  top: 425px;
	  width: 320px;

	  font-family: Georgia, "Times New Roman", serif;
	  font-size: 15px;
	  line-height: 1.3;
	  text-align: center;

	  color: #f4d5a0;
	  text-shadow: 1px 2px 3px #000;

	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;

	  pointer-events: none;
	}
	
	/* MOBILE — leveltitel in donkere chip */
	#levelTitle {
	  left: 20px;
	  top: 425px;
	  width: 320px;
	  height: 26px;
	  box-sizing: border-box;

	  display: block;
	  padding: 3px 6px;

	  background: rgba(18, 10, 12, 0.82);
	  border: 1px solid rgba(208, 115, 55, 0.55);
	  border-radius: 14px;

	  color: #ffe0ab;
	  font-size: 13px;
	  line-height: 18px;
	  font-weight: bold;
	  text-align: center;
	  text-shadow: 0 1px 2px #000;

	  opacity: 1 !important;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;

	  z-index: 25;
	  pointer-events: none;
	}
	
	/* =====================================================
   MOBILE — RESTERENDE STENEN IN FOOTER
   ===================================================== */

	#sz-hud #stonePanel {
	  display: flex !important;
	  position: absolute;

	  /* Relatief aan #sz-hud: left 32px, top 16px */
	  left: -16px;
	  top: 502px;

	  width: 328px;
	  height: auto;

	  flex-wrap: nowrap;
	  justify-content: center;
	  align-items: flex-start;
	  gap: 2px;

	  padding: 4px 0;
	  box-sizing: border-box;
	}

	/* Maximaal 9 steenindicatoren naast elkaar */
	#stonePanel .counterRow {
	  flex: 0 0 34px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: flex-start;
	  gap: 2px;
	  min-width: 0;
	}

	/* Bestaande mini-steencanvassen */
	#stonePanel .counterRow canvas {
	  display: block;
	  width: 22px;
	  height: 24px;
	}

	/* Aantal onder iedere steen */
	#stonePanel .stone-mult {
	  font-size: 11px;
	  line-height: 1;
	  color: #ffe2b0;
	}
  /* =====================================================
     MOBILE — COMPACTE BEDIENINGSBALK (DEV)
     ===================================================== */
  #mobileControls {
    position: absolute;
    z-index: 35;
    left: 32px;
    top: 566px;
    width: 298px;
    display: grid;
    gap: 8px;
    font-family: Arial, Helvetica, sans-serif;
  }

  #mobileControls button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #ffe1b0;
    border: 1px solid rgba(223, 126, 62, 0.68);
    background: rgba(25, 13, 13, 0.76);
    border-radius: 7px;
    cursor: pointer;
    touch-action: manipulation;
  }

  #mobileControls button:disabled {
    opacity: 0.43;
    cursor: default;
  }

  #mobileControls button:focus-visible {
    outline: 2px solid #ffd28e;
    outline-offset: 1px;
  }

  #mobileControls .mobile-action-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    height: 42px;
  }

  #mobileControls .mobile-action-row button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    font-size: 11px;
    font-weight: bold;
  }

  #mobileControls .mobile-control-icon {
    font-size: 18px;
    line-height: 19px;
  }

  #mobileControls .mobile-track-row {
    display: grid;
    grid-template-columns: 43px repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 4px;
    height: 32px;
  }

  #mobileControls .mobile-track-label {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: .6px;
    color: #ffcb91;
  }

  #mobileControls .mobile-track-row button {
    width: 100%;
    height: 32px;
    font-size: 13px;
    font-weight: bold;
  }

  #mobileControls .mobile-track-row button[aria-pressed="true"] {
    background: rgba(161, 77, 25, 0.95);
    border-color: #ffe0a0;
    box-shadow: 0 0 6px rgba(250, 122, 45, .5);
  }

  #mobileControls #mobileMusicBtn[aria-pressed="false"],
  #mobileControls #mobileSfxBtn[aria-pressed="false"] {
    opacity: 0.6;
  }

  #mobileControls #mobilePauseBtn[aria-pressed="true"] {
    background: rgba(148, 62, 22, 0.95);
    border-color: #ffd398;
    box-shadow: 0 0 7px rgba(244, 118, 44, 0.5);
  }

  /* Duidelijk dat het bord bevroren is; bediening blijft bereikbaar. */
  #sz-frame.manual-paused #gameCanvas {
    filter: brightness(0.25);
  }



  /* =====================================================
     STONEZONE MOBILE DEV — FOOTER REDESIGN 6A
     Gebaseerd op conceptbeeld; desktop/tablet blijven intact.
     ===================================================== */

  /* Geen extra paneel dat het levelbord kleiner maakt. */
  #mobileTimerBezel {
    display: block;
    position: absolute;
    pointer-events: none;
    left: 40px;
    top: 465px;
    width: 132px;
    height: 72px;
    z-index: 22; /* FX-cijfers z=20, bezel zit erboven */
    background: url("../assets.php?type=gfx&file=sz-timer-bezel.png") center / 100% 100% no-repeat;
  }

  /* Klok links, dynamisch getelde stenen in twee rijen rechts. */
  #sz-hud #stonePanel {
    left: 155px;             /* tov HUD left=32 => frame x=183 */
    top: 445px;              /* tov HUD top=16 => frame y=461 */
    width: 163px;
    min-height: 91px;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: 40px;
    justify-items: center;
    align-content: center;
    gap: 3px 1px;
    padding: 5px 3px;
    border: 1px solid rgba(166, 93, 47, 0.56);
    border-radius: 10px;
    background: linear-gradient(140deg, rgba(12, 8, 7, .90), rgba(45, 23, 16, .67));
    box-shadow: inset 0 1px 5px #090403, 0 0 9px rgba(243, 93, 22, .24);
  }

  #sz-hud #stonePanel .counterRow {
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 29px;
    min-width: 0;
    line-height: 1;
  }

  #sz-hud #stonePanel .counterRow canvas {
    display: block;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
  }

  #sz-hud #stonePanel .stone-mult {
    display: block;
    text-align: center;
    margin-top: 1px;
    font: bold 11px/12px Georgia, serif;
    color: #ffe5b4;
    text-shadow: 0 1px 2px #000;
  }

  #sz-hud #stonePanel .mult-x {font-size: 8px;}
  #sz-hud #stonePanel .mult-num {font-size: 11px;}

  /* De vier bestaande, functionele knoppen krijgen echte fantasie-game graphics. */
  #mobileControls {
    left: 20px;
    top: 558px;
    width: 320px;
    gap: 8px;
    z-index: 35;
  }

  #mobileControls .mobile-action-row {
    gap: 4px;
    height: 62px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #mobileControls .mobile-action-row button {
    border: none;
    border-radius: 0;
    padding: 0;
    color: #ffe9bf;
    background: transparent !important;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 11px;
    font-weight: bold;
    gap: 0;
    justify-content: flex-start;
    line-height: 1.05;
    text-shadow: 0 1px 2px #000;
    box-shadow: none;
  }

  #mobileControls .mobile-action-row .mobile-control-icon {
    display: block;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 0;
    line-height: 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 3px rgba(255,96,19,.55));
  }

  #mobileControls #mobileResetBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-reset.png');
  }
  #mobileControls #mobilePauseBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-pause.png');
  }
  #mobileControls #mobilePauseBtn[aria-pressed="true"] .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-play-v2.png');
  }
  #mobileControls #mobileMusicBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-music.png');
  }
  #mobileControls #mobileSfxBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-sfx.png');
  }

  #mobileControls .mobile-action-row button > span:last-child {
    display: block;
    min-width: 64px;
    margin-top: -2px;
    box-sizing: border-box;
    background: linear-gradient(160deg, rgba(19,11,10,.90), rgba(73,37,22,.91));
    border: 1px solid rgba(207,114,57,.65);
    border-radius: 9px;
    padding: 3px 4px 2px;
    text-align: center;
  }

  #mobileControls #mobileMusicBtn[aria-pressed="false"] .mobile-control-icon,
  #mobileControls #mobileSfxBtn[aria-pressed="false"] .mobile-control-icon {
    filter: grayscale(1) brightness(.64);
  }

  #mobileControls #mobilePauseBtn[aria-pressed="true"] .mobile-control-icon {
    filter: drop-shadow(0 0 7px rgba(255,184,50,.8));
  }

  #mobileControls .mobile-track-row {
    gap: 4px;
    height: 29px;
    grid-template-columns: 44px repeat(6, minmax(0, 1fr));
    padding: 3px 4px;
    background: linear-gradient(120deg, rgba(16,7,5,.8), rgba(60,29,14,.84));
    border-radius: 9px;
    border: 1px solid rgba(179,88,39,.55);
    box-shadow: inset 0 1px 4px #160704;
  }

  #mobileControls .mobile-track-label {
    color: #ffcf91;
    letter-spacing: .45px;
    font: bold 10px Georgia, serif;
  }

  #mobileControls .mobile-track-row button {
    height: 29px;
    border: 1px solid rgba(156,87,50,.85);
    border-radius: 6px;
    font: bold 14px Georgia,serif;
    color: #ffebc9;
    background: linear-gradient(145deg,#6b3821,#24120f 62%,#100909);
    box-shadow: inset 1px 1px 2px rgba(255,191,98,.20), 0 2px 3px rgba(0,0,0,.45);
  }

  #mobileControls .mobile-track-row button[aria-pressed="true"] {
    background: linear-gradient(140deg,#b7581c,#6e2f14);
    box-shadow: 0 0 9px rgba(255,105,26,.75),inset 0 0 5px #ff9d45;
    border-color: #ffd08a;
  }

	/* Lavasteeniconen 4px omhoog */
	#mobileControls .mobile-action-row .mobile-control-icon {
	  transform: translateY(-4px);
	}

	/* Play-icoon stond al hoger: positie behouden */
	#mobileControls #mobilePauseBtn[aria-pressed="true"] .mobile-control-icon {
	  transform: translateY(-4px);
	}



  /* STONEZONE — MOBILE MENU, uit de gameplay-zone gehouden zolang gesloten */
  #mobileMenu {
    display: block;
    position: absolute;
    top: 61px;
    right: 19px;
    width: 42px;
    z-index: 95;
    font-family: Georgia, 'Times New Roman', serif;
  }

  #mobileMenuToggle {
    width: 42px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(241,154,81,.85);
    background: linear-gradient(155deg, #542717, #170d0a 76%);
    box-shadow: 0 1px 5px #180a06, inset 0 0 5px rgba(251,111,35,.23);
    cursor: pointer;
    touch-action: manipulation;
  }

  #mobileMenuToggle[aria-expanded="true"] {
    border-color: #ffe0a0;
    box-shadow: 0 0 9px rgba(255,125,35,.75);
  }

  #mobileMenu .mobile-menu-bars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  #mobileMenu .mobile-menu-bars i {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #ffe4b3;
    box-shadow: 0 0 3px rgba(255,130,45,.65);
  }

  #mobileMenu .mobile-menu-panel[hidden] { display: none !important; }
  #mobileMenu .mobile-menu-panel {
    position: absolute;
    right: 0;
    top: 36px;
    width: 176px;
    box-sizing: border-box;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(245,155,80,.78);
    border-radius: 11px;
    background: linear-gradient(145deg, rgba(60,28,16,.98), rgba(18,10,9,.98));
    box-shadow: 0 8px 24px rgba(0,0,0,.83), inset 0 1px 3px rgba(250,125,47,.27);
  }

  #mobileMenu .mobile-menu-panel button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 36px;
    box-sizing: border-box;
    border: 1px solid rgba(170,93,48,.48);
    border-radius: 7px;
    padding: 6px 9px;
    color: #ffe6bb;
    background: rgba(25,14,12,.68);
    font: bold 12px Georgia, serif;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }
  #mobileMenu .mobile-menu-panel button:active {
    background: rgba(166,75,25,.66);
  }
  #mobileMenu .mobile-menu-panel button span {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(99,48,23,.88);
    color: #ffd398;
    font-size: 15px;
  }
  #mobileMenu :focus-visible {
    outline: 2px solid #ffdc98;
    outline-offset: 2px;
  }

  /* Alleen de mobiele HELP-popup scrollbaar. OK blijft steeds zichtbaar. */
  #helpOverlay.uiOverlay.intro .introPanel {
    box-sizing: border-box;
    width: min(340px, calc(100vw - 24px));
    height: min(78dvh, 560px);
    max-height: calc(100dvh - 24px);
    padding: 14px 15px 12px;
    gap: 8px;
    overflow: hidden;
    align-items: stretch;
  }
  #helpOverlay.uiOverlay.intro #helpText.intro-text {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0 5px 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    line-height: 1.45;
    touch-action: pan-y;
  }
  #helpOverlay.uiOverlay.intro #helpOkBtn {
    flex: 0 0 auto;
    align-self: center;
    margin: 0;
    min-width: 100px;
  }
  
    /* MOBILE — Hall of Fame: namen en scores volledig zichtbaar */

	  .uiOverlay.hof .hofInner {
		left: 32px;
		right: 32px;
	  }

	  .uiOverlay.hof .hofList {
		padding-left: 2px;
		padding-right: 2px;
	  }

	  .uiOverlay.hof .hofRow {
		grid-template-columns: 28px minmax(0, 1fr) 28px 60px;
		gap: 5px;
		font-size: 13px;
	  }

	  .uiOverlay.hof .hofRow.hofHead {
		font-size: 11px;
		letter-spacing: 0.02em;
	  }

	  .uiOverlay.hof .hofName {
		min-width: 0;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
		overflow-wrap: anywhere;
	  }

	  .uiOverlay.hof .hofScore {
		white-space: nowrap;
	  }
	  
}



/* ============================================================
   STONEZONE 7D — Uniform Game Modals
   Alleen #uiOverlay.game-message-modal (geen Help/HOF/password input)
   ============================================================ */
#uiOverlay.game-message-modal {
  background: transparent !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
#uiOverlay.game-message-modal .modal,
#uiOverlay.game-message-modal .modal.modal-lg {
  position: fixed;
  width: 230px;
  max-width: calc(100vw - 20px);
  min-height: 250px;
  max-height: calc(100dvh - 16px);
  box-sizing: border-box;
  margin: 0;
  padding: 34px 19px 26px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background: url("/assets.php?type=gfx&file=lavamodal.png&v=2") no-repeat center center;
  background-size: 100% 100%;
}
#uiOverlay.game-message-modal .modal #uiTitle {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
#uiOverlay.game-message-modal .modal #uiTitle:empty { display: none; }
#uiOverlay.game-message-modal .modal #uiText {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  padding: 0;
  transform: none;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #f4e9c0;
  font: 13px/1.28 Georgia, "Times New Roman", serif;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
#uiOverlay.game-message-modal .modal #uiText img,
#uiOverlay.game-message-modal .dead-warning-icon {
  display: block;
  position: static;
  width: auto !important;
  max-width: 72px !important;
  height: auto !important;
  max-height: 76px;
  object-fit: contain;
  margin: 0 auto 8px !important;
  top: auto;
  transform: none;
}
#uiOverlay.game-message-modal .modal #uiText .game-message-row {
  display: block;
  margin-top: 5px;
  overflow-wrap: anywhere;
}
#uiOverlay.game-message-modal .modal #uiText .game-message-level {
  display: block;
  margin: 3px 0 6px;
  font-weight: bold;
  overflow-wrap: anywhere;
  word-break: normal;
}
#uiOverlay.game-message-modal .modal .modal-ok,
#uiOverlay.game-message-modal .modal-dead-buttons {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  flex: 0 0 auto;
  margin: 10px auto 0;
}
#uiOverlay.game-message-modal .modal .modal-ok {
  display: block;
  width: auto;
  min-width: 88px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid rgba(244,180,90,.55);
  border-radius: 8px;
  background: linear-gradient(to bottom, rgba(110,52,22,.98), rgba(66,27,12,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10),0 2px 5px rgba(0,0,0,.45);
  color: #f4e9c0;
  font: 12px Arial, sans-serif;
  line-height: 24px;
}
#uiOverlay.game-message-modal .modal .modal-ok[hidden],
#uiOverlay.game-message-modal .modal-dead-buttons[hidden] { display: none !important; }
#uiOverlay.game-message-modal .modal-dead-buttons {
  width: 100%;
  justify-content: center;
  gap: 7px;
}
#uiOverlay.game-message-modal .modal-dead-buttons button {
  min-width: 0;
  flex: 1 1 auto;
  padding: 0 5px;
  white-space: nowrap;
}
#uiOverlay.game-message-modal .modal .modal-ok:active { transform: translateY(1px); }


/* ==============================================================
   STONEZONE 7D.1 — Game OK-knop en uniforme highscore-invoer
   ============================================================= */
/* Reserveer de sierlijst: de actieknop ligt verder van de onderrand. */
#uiOverlay.game-message-modal .modal,
#uiOverlay.game-message-modal .modal.modal-lg {
  padding-bottom: 42px;
}
#uiOverlay.game-message-modal .modal .modal-ok {
  min-width: 76px;
  width: 76px;
  height: 22px;
  padding: 0 9px;
  font-size: 11px;
  line-height: 20px;
  margin-top: 6px;
}

/* Highscore is een invoer-modal: uitsluitend deze overlay aanpassen. */
#hsOverlay.uiOverlay {
  background: transparent !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
#hsOverlay.uiOverlay .modal {
  position: fixed;
  width: 230px;
  max-width: calc(100vw - 20px);
  min-height: 250px;
  max-height: calc(100dvh - 16px);
  box-sizing: border-box;
  margin: 0;
  padding: 38px 20px 38px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background: url("/assets.php?type=gfx&file=lavamodal.png&v=2") no-repeat center center;
  background-size: 100% 100%;
}
#hsOverlay.uiOverlay .modal h2 {
  width: 100%;
  margin: 0 0 9px;
  font: bold 17px/1.16 Georgia, "Times New Roman", serif;
  overflow-wrap: anywhere;
}
#hsOverlay.uiOverlay .modal p {
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  font: 13px/1.28 Georgia, "Times New Roman", serif;
  white-space: normal;
  overflow-wrap: anywhere;
}
#hsOverlay.uiOverlay #hsName {
  display: block;
  width: 100%;
  min-width: 0;
  height: 29px;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid #b97840;
  border-radius: 7px;
  outline: none;
  background: linear-gradient(#26150f, #3a1c11);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,213,143,.12);
  color: #ffebc4;
  caret-color: #ffd18c;
  font: 13px Arial, sans-serif;
  text-align: left;
}
#hsOverlay.uiOverlay #hsName::placeholder { color: #c49a72; opacity: 1; }
#hsOverlay.uiOverlay #hsName:focus-visible {
  border-color: #ffcb82;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 0 0 2px rgba(230,149,75,.3);
}
#hsOverlay.uiOverlay .modal .row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 7px;
  margin: auto 0 0;
}
#hsOverlay.uiOverlay .modal .row button {
  flex: 1 1 0;
  min-width: 0;
  height: 25px;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid rgba(244,180,90,.55);
  border-radius: 8px;
  background: linear-gradient(to bottom,rgba(110,52,22,.98),rgba(66,27,12,.98));
  color: #f4e9c0;
  font: 11px Arial, sans-serif;
  white-space: nowrap;
}
#hsOverlay.uiOverlay .modal .row button:hover {
  background: linear-gradient(to bottom,rgba(135,64,27,.98),rgba(78,31,13,.98));
}


/* ============================================================
   STONEZONE 7D.2 — invoermodals en virtueel toetsenbord
   ============================================================ */
#pwdOverlay.uiOverlay {
  background: transparent !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}
/* Highscore en wachtwoord delen exact dezelfde compacte Lava-vorm. */
#pwdOverlay.uiOverlay .modal,
#pwdOverlay.uiOverlay .modal.modal-lg {
  position: fixed;
  width: 230px;
  max-width: calc(100vw - 20px);
  min-height: 250px;
  max-height: calc(100dvh - 16px);
  box-sizing: border-box;
  margin: 0;
  padding: 38px 20px 38px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  background: url("/assets.php?type=gfx&file=lavamodal.png&v=2") no-repeat center center;
  background-size: 100% 100%;
}
#pwdOverlay.uiOverlay .modal h2 {
  width: 100%;
  margin: 0 0 9px;
  font: bold 17px/1.16 Georgia, "Times New Roman", serif;
  overflow-wrap: anywhere;
}
#pwdOverlay.uiOverlay .modal p {
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  font: 13px/1.28 Georgia, "Times New Roman", serif;
  white-space: normal;
  overflow-wrap: anywhere;
}
#pwdOverlay.uiOverlay #pwdNameInput {
  display: block;
  width: 100%;
  min-width: 0;
  height: 29px;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 9px;
  border: 1px solid #b97840;
  border-radius: 7px;
  outline: none;
  background: linear-gradient(#26150f, #3a1c11);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 1px 0 rgba(255,213,143,.12);
  color: #ffebc4;
  caret-color: #ffd18c;
  font: 13px Arial, sans-serif;
  text-align: left;
}
#pwdOverlay.uiOverlay #pwdNameInput::placeholder { color: #c49a72; opacity: 1; }
#pwdOverlay.uiOverlay #pwdNameInput:focus-visible {
  border-color: #ffcb82;
  box-shadow: inset 0 2px 5px rgba(0,0,0,.65), 0 0 0 2px rgba(230,149,75,.3);
}
#pwdOverlay.uiOverlay #pwdStatus {
  width: 100%;
  min-height: 14px;
  margin: 3px 0;
  font: 11px/1.2 Arial, sans-serif;
  color: #ffbf85;
  overflow-wrap: anywhere;
}
#pwdOverlay.uiOverlay .modal .row:empty { display: none; }
#pwdOverlay.uiOverlay .modal .row:last-child {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 7px;
  margin: auto 0 0;
}
#pwdOverlay.uiOverlay .modal .row:last-child button {
  flex: 1 1 0;
  min-width: 0;
  height: 25px;
  box-sizing: border-box;
  padding: 0 6px;
  border: 1px solid rgba(244,180,90,.55);
  border-radius: 8px;
  background: linear-gradient(to bottom,rgba(110,52,22,.98),rgba(66,27,12,.98));
  color: #f4e9c0;
  font: 11px Arial, sans-serif;
  white-space: nowrap;
}
#pwdOverlay.uiOverlay .modal .row:last-child button:hover {
  background: linear-gradient(to bottom,rgba(135,64,27,.98),rgba(78,31,13,.98));
}
/* Invoer zichtbaar houden als het toetsenbord de viewport verkleint. */
#hsOverlay.uiOverlay .modal,
#pwdOverlay.uiOverlay .modal {
  overflow-y: auto;
  overscroll-behavior: contain;
}


/* 7D.4 — Levelhintvoorkeuren; geen aanpassing aan bestaande game-controls. */
#desktopHintSetting {
  position: absolute;
  left: 552px;
  top: 150px;
  width: 76px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  z-index: 40;
  font: 8px Arial, sans-serif;
  color: #f4e9c0;
  text-shadow: 0 1px 2px #000;
}
#desktopHintPreference,
#mobileHintPreference {
  box-sizing: border-box;
  border: 1px solid rgba(244,180,90,.65);
  border-radius: 6px;
  background: #382017;
  color: #ffe4b3;
  font: 11px Arial, sans-serif;
  cursor: pointer;
}
#desktopHintPreference {
  width: 76px;
  height: 20px;
  padding: 0 2px;
  font: 8px Arial, sans-serif;
  border-radius: 8px;
}
/* Browser-native optiemenu kan eigen systeemtypografie gebruiken. */
#desktopHintPreference option { font: 10px Arial, sans-serif; }
#mobileHintPreference { width: 96px; padding: 5px 3px; }
.mobile-hint-setting { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  #desktopHintSetting { display: none !important; }
  #mobileMenu .mobile-hint-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid rgba(170,93,48,.48);
    border-radius: 7px;
    background: rgba(25,14,12,.68);
    color: #ffe6bb;
    font: bold 12px Georgia, serif;
  }
}


/* ============================================================
   STONEZONE DEV — LEVEL EDITOR WIDER PANEL (Pi solver UI)
   Alleen de level-editor; geen wijzigingen aan game/HUD/modals.
   ============================================================ */

/* De oorspronkelijke max-width:420px is te smal voor de knoppen. */
#levelEditorOverlay .level-editor-panel {
  width: min(820px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-width: 0;
  box-sizing: border-box;
}

/* Alle editoracties blijven bereikbaar, ook bij kleinere vensters. */
#levelEditorOverlay .level-editor-panel .buttons {
  flex-wrap: wrap;
  align-items: stretch;
}
#levelEditorOverlay .level-editor-panel .buttons > button {
  flex: 1 1 100px;
  min-width: 95px;
  white-space: normal;
}

/* Het 8x8-bord staat in de bredere editor netjes in het midden. */
#levelEditorOverlay .lev-grid {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

/* Bij smalle schermen blijven ook alle acht kolommen zichtbaar. */
@media (max-width: 450px) {
  #levelEditorOverlay .lev-grid {
    width: 100%;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, auto);
    gap: 3px;
    padding: 6px;
  }
  #levelEditorOverlay .lev-cell {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    min-width: 0;
    box-sizing: border-box;
  }
}


/* ============================================================
   Stonezone DEV v6.5.2ab — gedeeld hamburgermenu desktop / iPad
   De telefoon-portrait UI hierboven blijft ongewijzigd.
   Bottom-control modernisering volgt afzonderlijk in v6.5.2ac.
   ============================================================ */
@media (min-width: 601px), (orientation: landscape) {
  #mobileMenu {
    display: block;
    position: absolute;
    top: 8px;
    right: 13px;
    width: 42px;
    z-index: 1100;
    font-family: Georgia, 'Times New Roman', serif;
  }
  #mobileMenuToggle {
    width: 42px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    border: 1px solid rgba(241,154,81,.85);
    border-radius: 8px;
    background: linear-gradient(155deg,#542717,#170d0a 76%);
    box-shadow: 0 1px 5px #180a06, inset 0 0 5px rgba(251,111,35,.23);
    cursor: pointer;
    touch-action: manipulation;
  }
  #mobileMenuToggle[aria-expanded="true"] {
    border-color: #ffe0a0;
    box-shadow: 0 0 9px rgba(255,125,35,.75);
  }
  #mobileMenu .mobile-menu-bars {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  #mobileMenu .mobile-menu-bars i {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #ffe4b3;
    box-shadow: 0 0 3px rgba(255,130,45,.65);
  }
  #mobileMenu .mobile-menu-panel[hidden] { display: none !important; }
  #mobileMenu .mobile-menu-panel {
    position: absolute;
    top: 37px;
    right: 0;
    box-sizing: border-box;
    width: 202px;
    max-height: 405px;
    overflow-y: auto;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1px solid rgba(245,155,80,.78);
    border-radius: 11px;
    background: linear-gradient(145deg,rgba(60,28,16,.98),rgba(18,10,9,.98));
    box-shadow: 0 8px 24px rgba(0,0,0,.83), inset 0 1px 3px rgba(250,125,47,.27);
  }
  #mobileMenu .mobile-menu-panel button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 33px;
    box-sizing: border-box;
    padding: 6px 9px;
    border: 1px solid rgba(170,93,48,.48);
    border-radius: 7px;
    background: rgba(25,14,12,.68);
    color: #ffe6bb;
    font: bold 12px Georgia, serif;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
  }
  #mobileMenu .mobile-menu-panel button span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(99,48,23,.88);
    color: #ffd398;
    font-size: 15px;
  }
  #mobileMenu .mobile-menu-panel button:hover { background: rgba(124,58,26,.75); }
  #mobileMenu :focus-visible { outline: 2px solid #ffdc98; outline-offset: 2px; }
  #mobileMenu .sz-hint-choice-mobile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 7px 8px;
    margin: 0;
    border: 1px solid rgba(170,93,48,.48);
    border-radius: 7px;
    background: rgba(25,14,12,.68);
    color: #ffe6bb;
    font: bold 11px Georgia,serif;
  }
  #mobileMenu .sz-hint-choice-mobile select {
    min-width: 0;
    width: 100%;
    font: 11px Arial,sans-serif;
  }
  /* Oude snelkoppelingen vervangen door één menu, maar DOM-knoppen behouden
     voor alle bestaande JS-eventhandlers. Reset/muziek/tracks volgen in ac. */
  #hofBtn, #helpBtn, #pwdBtn, #levedBtn { display: none !important; }
}
/* Ook op de telefoon de losse level-editor-knop nooit tonen. */
@media (max-width: 600px) and (pointer: coarse) {
  #levedBtn { display: none !important; }
}


/* ============================================================
   Stonezone v6.5.2ab2: compact, uniform desktop/iPad menu.
   Mobiele portretweergave en gameplay blijven ongewijzigd.
   ============================================================ */
@media (min-width: 601px), (orientation: landscape) {
  #mobileMenu { font-family: Arial, Helvetica, sans-serif; }
  #mobileMenu .mobile-menu-panel {
    width: 190px;
    max-height: min(420px, calc(100dvh - 22px));
    padding: 5px;
    gap: 4px;
    overflow-y: auto; /* vangnet voor uitzonderlijk kleine vensters */
    font: 600 11px/1.2 Arial, Helvetica, sans-serif;
  }
  #mobileMenu .mobile-menu-panel > button {
    min-height: 29px;
    padding: 4px 7px;
    gap: 7px;
    font: 600 11px/1.2 Arial, Helvetica, sans-serif;
  }
  #mobileMenu .mobile-menu-panel > button > span {
    flex-basis: 19px;
    height: 19px;
    font-size: 12px;
  }
  #mobileMenu .sz-hint-choice-mobile,
  #mobileMenu .mobile-menu-panel label:has([data-sz-theme-choice]),
  #mobileMenu .mobile-menu-panel label {
    font: 600 11px/1.2 Arial, Helvetica, sans-serif !important;
  }
  #mobileMenu .sz-hint-choice-mobile {
    padding: 5px 7px;
    gap: 4px;
  }
  #mobileMenu .sz-hint-choice-mobile select,
  #mobileMenu .mobile-menu-panel select {
    width: 100%;
    min-width: 0;
    height: 27px;
    box-sizing: border-box;
    margin: 0;
    padding: 3px 6px;
    font: 600 11px/1.2 Arial, Helvetica, sans-serif !important;
  }
  #mobileMenu .mobile-menu-panel label:has([data-sz-theme-choice]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    padding: 5px 7px !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    border: 1px solid rgba(170,93,48,.48);
    border-radius: 7px;
    background: rgba(25,14,12,.68);
  }
}
/* Compacte adminnavigatie (ook op telefoon indien ingelogd). */
#mobileMenu .sz-menu-level-nav {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 3px 5px;
  box-sizing: border-box;
  border: 1px solid rgba(170,93,48,.48);
  border-radius: 7px;
  background: rgba(25,14,12,.68);
  color: #ffe6bb;
  font: 700 11px Arial, Helvetica, sans-serif;
}
#mobileMenu .sz-menu-level-nav button {
  display: grid;
  place-items: center;
  width: 30px;
  min-height: 26px;
  height: 26px;
  padding: 0;
  margin: 0;
  border-radius: 5px;
  border: 1px solid rgba(191,110,55,.65);
  background: rgba(83,38,20,.9);
  color: #ffe6bb;
  font: 700 12px Arial, Helvetica, sans-serif;
}
#mobileMenu .sz-menu-level-nav button:disabled { opacity: .35; cursor: default; }
#mobileMenu .sz-menu-level-indicator {
  text-align: center;
  white-space: nowrap;
  font: 700 11px Arial, Helvetica, sans-serif;
}


/* ============================================================
   Stonezone DEV v6.5.2ab3 — iPad mini / kleine tablet-viewport
   Alleen startoverlay, level-editor en menu-dropdowns.
   Geen wijzigingen aan het spelcanvas of touch-input.
   ============================================================ */

/* Safari's dynamische browserbalken mogen de startknoppen niet afsnijden. */
#startOverlay.uiOverlay.intro {
  box-sizing: border-box;
  height: 100dvh !important;
  padding: 10px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#startOverlay.uiOverlay.intro .introPanel {
  box-sizing: border-box;
  max-height: calc(100dvh - 20px);
  max-width: min(92vw, 720px);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* De editor scrolt binnen de zichtbare Safari-viewport.
   De actiebalk blijft daarbij bereikbaar, ook met de tabbladen in beeld. */
#levelEditorOverlay.level-editor-overlay {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  height: 100dvh;
  padding: 10px;
  overflow: hidden;
}
#levelEditorOverlay .level-editor-panel {
  max-height: calc(100dvh - 20px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#levelEditorOverlay .level-editor-panel .buttons {
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* Dropdowns: de huidige waarde en de opties dezelfde leesbare typografie.
   iPadOS kan de systeem-fontgrootte in de native opties zelf bepalen. */
#mobileMenu .mobile-menu-panel select,
#mobileMenu .mobile-menu-panel select option {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
@media (min-width: 601px), (orientation: landscape) {
  #mobileMenu .sz-hint-choice-mobile select,
  #mobileMenu .mobile-menu-panel select {
    height: 31px;
    font: 600 13px/1.3 Arial, Helvetica, sans-serif !important;
  }
}

/* Op tablet mag het introbeeld minder ruimte innemen dan op desktop. */
@media (pointer: coarse) and (min-width: 601px) and (max-width: 1200px) {
  #startOverlay.uiOverlay.intro .introPanel {
    gap: 8px;
    padding: 12px 16px 14px;
  }
  #startOverlay.uiOverlay.intro .intro-image {
    display: block;
    width: auto;
    max-width: min(78vw, 500px);
    max-height: 38dvh;
    object-fit: contain;
  }
  #startOverlay #szStartThemePicker {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
    gap: 5px !important;
  }
  #startOverlay #szStartThemePicker [data-sz-start-theme] {
    padding: 4px !important;
  }
  #startOverlay #szStartThemePicker [data-sz-start-theme] img {
    width: 40px !important;
    height: 40px !important;
  }
  #levelEditorOverlay .level-editor-panel {
    padding: 12px 16px;
  }
}


/* ================================================================
   Stonezone DEV v6.5.2ab5 — levende lava: klok beter leesbaar
   Alleen desktop/iPad/landscape. De overlay blijft buiten het
   speelveld zichtbaar; rond de FX-klok vervaagt uitsluitend de gloed.
   Geen verandering aan gameCanvas, fxCanvas, klok of spelstatus.
   De lava-overlay wordt dynamisch toegevoegd door stonezone.js.
   ================================================================ */
@media (min-width: 601px), (orientation: landscape) {
  #sz-frame > #szLivingLavaOverlay {
    -webkit-mask-image: radial-gradient(
      ellipse 95px 72px at 488px 330px,
      transparent 0%,
      transparent 47%,
      rgba(0, 0, 0, .24) 65%,
      #000 100%
    );
    mask-image: radial-gradient(
      ellipse 95px 72px at 488px 330px,
      transparent 0%,
      transparent 47%,
      rgba(0, 0, 0, .24) 65%,
      #000 100%
    );
  }
}

/* ================================================================
   Stonezone DEV v6.5.2ab6 – Balanced Living Lava (desktop / iPad)
   De vier bestaande lichtbronnen bestrijken links, boven, onder en rechts.
   De bestaande polygon(evenodd)-uitsparing beschermt het speelveld.
   De v6.5.2ab5-maskering rond de timer blijft ongewijzigd.
   Telefoon-portrait behoudt de originele animatie.
   ================================================================ */
@media (min-width: 601px) {
  #sz-frame > #szLivingLavaOverlay .sz-lava-ember-1 {
    left: -17%; top: 12%; right: auto; bottom: auto;
    width: 36%; height: 47%;
    
  }
  #sz-frame > #szLivingLavaOverlay .sz-lava-ember-2 {
    left: 13%; top: -19%; right: auto; bottom: auto;
    width: 49%; height: 39%;
    
  }
  #sz-frame > #szLivingLavaOverlay .sz-lava-ember-3 {
    left: 9%; bottom: -19%; top: auto; right: auto;
    width: 57%; height: 44%;
    
  }
  #sz-frame > #szLivingLavaOverlay .sz-lava-ember-4 {
    right: -19%; top: 16%; left: auto; bottom: auto;
    width: 43%; height: 53%;
    
  }
  #sz-frame > #szLivingLavaOverlay.sz-lava-active .sz-lava-ember-1 { animation: szBalancedLavaLeft 53s ease-in-out infinite -21s; }
  #sz-frame > #szLivingLavaOverlay.sz-lava-active .sz-lava-ember-2 { animation: szBalancedLavaTop 61s ease-in-out infinite -35s; }
  #sz-frame > #szLivingLavaOverlay.sz-lava-active .sz-lava-ember-3 { animation: szBalancedLavaBottom 73s ease-in-out infinite -14s; }
  #sz-frame > #szLivingLavaOverlay.sz-lava-active .sz-lava-ember-4 { animation: szBalancedLavaRight 79s ease-in-out infinite -42s; }

  @keyframes szBalancedLavaLeft {
    0%,100% {opacity:.32;transform:translate(0%,0%) scale(.92)}
    23% {opacity:.55;transform:translate(12%,39%) scale(1.08)}
    51% {opacity:.66;transform:translate(3%,109%) scale(.95)}
    76% {opacity:.46;transform:translate(23%,61%) scale(1.10)}
  }
  @keyframes szBalancedLavaTop {
    0%,100% {opacity:.30;transform:translate(0%,0%) scale(.91)}
    24% {opacity:.60;transform:translate(37%,10%) scale(1.10)}
    53% {opacity:.54;transform:translate(63%,17%) scale(.94)}
    77% {opacity:.65;transform:translate(20%,6%) scale(1.07)}
  }
  @keyframes szBalancedLavaBottom {
    0%,100% {opacity:.29;transform:translate(0%,0%) scale(.95)}
    24% {opacity:.59;transform:translate(18%,-14%) scale(1.06)}
    50% {opacity:.48;transform:translate(47%,-4%) scale(.93)}
    77% {opacity:.64;transform:translate(24%,-17%) scale(1.09)}
  }
  @keyframes szBalancedLavaRight {
    0%,100% {opacity:.28;transform:translate(0%,0%) scale(.92)}
    22% {opacity:.61;transform:translate(-18%,25%) scale(1.08)}
    50% {opacity:.50;transform:translate(-7%,79%) scale(.96)}
    77% {opacity:.60;transform:translate(-23%,42%) scale(1.06)}
  }
  @media (prefers-reduced-motion: reduce) {
    #sz-frame > #szLivingLavaOverlay .sz-lava-ember { animation: none !important; }
  }
}


/* ========================================================================
   Stonezone DEV v6.5.2ac – gedeelde bediening desktop / iPad
   De bestaande #mobileControls wordt HERGEBRUIKT (geen dubbele controls).
   Telefoon portrait behoudt exact de bestaande mobiele opmaak.
   De speelcellen / canvas / timer / spelstatus worden niet gewijzigd.
   ======================================================================== */
@media (min-width: 601px) {
  /* De oude bediening blijft voor de JS-clickkoppeling in de DOM, maar is
     visueel verborgen. Het hamburgermenu beheert HOF, Help en Password. */
  #sz-frame #hofBtn,
  #sz-frame #helpBtn,
  #sz-frame #resetBtn,
  #sz-frame #musicBtn,
  #sz-frame #track1Btn,
  #sz-frame #track2Btn,
  #sz-frame #track3Btn {
    display: none !important;
  }

  /* De toolbar past in de onderste 64 pixels van het originele 640x480-frame,
     onder de leveltitel. Geen extra hoogte nodig op de iPad mini. */
  #sz-frame #mobileControls {
    display: grid;
    position: absolute;
    z-index: 38;
    left: 17px;
    right: 17px;
    top: 413px;
    width: auto;
    height: 64px;
    gap: 3px;
    box-sizing: border-box;
    padding: 4px 7px;
    border: 1px solid rgba(210, 128, 65, .67);
    border-radius: 10px;
    background: linear-gradient(150deg, rgba(28,14,11,.94), rgba(65,29,17,.90));
    box-shadow: inset 0 1px 3px rgba(255,198,112,.18), 0 2px 9px rgba(0,0,0,.5);
    font-family: Arial, Helvetica, sans-serif;
  }
  #sz-frame #mobileControls .mobile-action-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    height: 27px;
  }
  #sz-frame #mobileControls .mobile-action-row button {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    gap: 7px;
    min-width: 0;
    height: 27px;
    padding: 2px 5px;
    border: 1px solid rgba(205,123,65,.68);
    border-radius: 6px;
    background: rgba(32,17,14,.72);
    color: #ffe5bf;
    font: 700 11px/1 Arial, Helvetica, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
  }
  #sz-frame #mobileControls .mobile-action-row button:hover {
    border-color: #ffce8c;
    background: rgba(121,58,25,.8);
  }
  #sz-frame #mobileControls .mobile-action-row button:focus-visible,
  #sz-frame #mobileControls .mobile-track-row button:focus-visible {
    outline: 2px solid #ffe0a4;
    outline-offset: 1px;
  }
  #sz-frame #mobileControls .mobile-action-row button[aria-pressed="true"] {
    background: rgba(123,54,20,.8);
    border-color: #ffce87;
  }
  #sz-frame #mobileControls .mobile-action-row button[aria-pressed="false"]:is(#mobileMusicBtn, #mobileSfxBtn) {
    opacity: .63;
  }
  #sz-frame #mobileControls .mobile-control-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    font-size: 17px;
    line-height: 19px;
    color: #ffcb83;
  }
  #sz-frame #mobileControls .mobile-action-row button > span:last-child {
    display: inline;
    margin: 0;
    padding: 0;
    min-width: 0;
    font: inherit;
    white-space: nowrap;
  }
  #sz-frame #mobileControls .mobile-track-row {
    display: grid;
    grid-template-columns: 43px repeat(6,minmax(0,1fr));
    align-items: center;
    gap: 4px;
    height: 25px;
    width: 435px;
    box-sizing: border-box;
  }
  #sz-frame #mobileControls .mobile-track-label {
    color: #ffd199;
    font: 700 10px Arial, Helvetica, sans-serif;
    letter-spacing: .5px;
  }
  #sz-frame #mobileControls .mobile-track-row button {
    height: 24px;
    padding: 0;
    border: 1px solid rgba(186,107,55,.7);
    border-radius: 5px;
    background: rgba(28,15,12,.84);
    color: #ffe5bf;
    font: 700 12px Arial, Helvetica, sans-serif;
    cursor: pointer;
    touch-action: manipulation;
  }
  #sz-frame #mobileControls .mobile-track-row button[aria-pressed="true"] {
    background: #a04f21;
    border-color: #ffcf87;
    box-shadow: 0 0 5px rgba(255,135,50,.55);
  }
  /* Bestaande volumeslider; rechts van de zes trackkeuzes. */
  #sz-frame #musicVolume {
    display: block;
    z-index: 41;
    position: absolute;
    left: 485px;
    top: 459px;
    width: 115px;
    height: 5px;
  }
  #sz-frame.manual-paused #gameCanvas { filter: brightness(.40); }
}


/* ========================================================================
   Stonezone DEV v6.5.2ac2 – extra compacte lava-controls (desktop / iPad)
   Hergebruikt de werkende mobiele buttons én dezelfde private PNG-iconen.
   Geen wijzigingen in touch, levelmechaniek, pauze- of audiofuncties.
   Telefoon portrait krijgt deze regels NIET.
   ======================================================================== */
@media (min-width: 601px) {
  #sz-frame #mobileControls {
    left: 31px;
    right: auto;
    top: 431px;
    width: 458px;
    height: 47px;
    display: grid;
    grid-template-columns: 188px 238px;
    align-items: end;
    column-gap: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: Georgia, 'Times New Roman', serif;
    overflow: visible;
  }

  /* Vier compacte, ronde lava-iconen links. Labels op eigen plaatje. */
  #sz-frame #mobileControls .mobile-action-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 3px;
    width: 188px;
    height: 47px;
  }
  #sz-frame #mobileControls .mobile-action-row button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    width: 100%;
    height: 47px;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0 0 1px;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    color: #ffe7bd;
    font: bold 8px/1.05 Georgia, 'Times New Roman', serif;
    text-shadow: 0 1px 3px #1d0803;
    touch-action: manipulation;
    cursor: pointer;
  }
  #sz-frame #mobileControls .mobile-action-row button:hover {
    background: none !important;
    filter: brightness(1.13);
  }
  #sz-frame #mobileControls .mobile-action-row .mobile-control-icon {
    display: block;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    margin: 0 auto -1px;
    padding: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    border: none;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 4px rgba(255, 92, 21, .70));
    transform: none;
    pointer-events: none;
  }
  #sz-frame #mobileControls #mobileResetBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-reset.png');
  }
  #sz-frame #mobileControls #mobilePauseBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-pause.png');
  }
  #sz-frame #mobileControls #mobilePauseBtn[aria-pressed="true"] .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-play-v2.png');
    transform: none;
    filter: drop-shadow(0 0 7px rgba(255,190,69,.8));
  }
  #sz-frame #mobileControls #mobileMusicBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-music.png');
  }
  #sz-frame #mobileControls #mobileSfxBtn .mobile-control-icon {
    background-image: url('../assets.php?type=gfx&file=sz-control-sfx.png');
  }
  /* Zelfde toestand als mobiel: uitgesloten audio is zichtbaar gedimd. */
  #sz-frame #mobileControls #mobileMusicBtn[aria-pressed="false"],
  #sz-frame #mobileControls #mobileSfxBtn[aria-pressed="false"] {
    opacity: 1;
  }
  #sz-frame #mobileControls #mobileMusicBtn[aria-pressed="false"] .mobile-control-icon,
  #sz-frame #mobileControls #mobileSfxBtn[aria-pressed="false"] .mobile-control-icon {
    filter: grayscale(1) brightness(.60);
  }
  #sz-frame #mobileControls .mobile-action-row button > span:last-child {
    display: block;
    width: 43px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 1px 1px 2px;
    box-sizing: border-box;
    border: 1px solid rgba(194, 105, 47, .73);
    border-radius: 6px;
    background: linear-gradient(150deg,rgba(16,7,6,.94),rgba(78,34,18,.93)) !important;
    box-shadow: inset 0 1px 3px rgba(255,146,62,.16), 0 1px 3px rgba(0,0,0,.7);
    color: #ffe6be;
    font: bold 8px/1.05 Georgia, 'Times New Roman', serif;
    white-space: nowrap;
    text-align: center;
  }

  /* Tracks op één lijn rechts, zonder dominante tweede toolbar. */
  #sz-frame #mobileControls .mobile-track-row {
    display: grid;
    grid-template-columns: 34px repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 2px;
    width: 238px;
    height: 22px;
    margin: 0 0 3px;
    padding: 2px 3px;
    box-sizing: border-box;
    border: 1px solid rgba(182,91,40,.62);
    border-radius: 7px;
    background: linear-gradient(135deg,rgba(24,10,7,.95),rgba(61,26,13,.92));
    box-shadow: inset 0 1px 4px #160704,0 1px 5px rgba(0,0,0,.5);
  }
  #sz-frame #mobileControls .mobile-track-label {
    color: #ffdbab;
    font: bold 8px/1 Georgia, 'Times New Roman', serif;
    letter-spacing: 0;
    text-align: center;
  }
  #sz-frame #mobileControls .mobile-track-row button {
    display: grid;
    place-items: center;
    min-width: 0;
    width: 100%;
    height: 17px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(173,87,39,.85);
    border-radius: 4px;
    background: linear-gradient(145deg,#6b3821,#24120f 62%,#100909);
    box-shadow: inset 1px 1px 2px rgba(255,191,98,.2),0 1px 3px rgba(0,0,0,.4);
    color: #ffebc9;
    font: bold 9px/1 Georgia, 'Times New Roman', serif;
    touch-action: manipulation;
  }
  #sz-frame #mobileControls .mobile-track-row button[aria-pressed="true"] {
    background: linear-gradient(140deg,#b7581c,#6e2f14);
    border-color: #ffd08a;
    box-shadow: 0 0 8px rgba(255,105,26,.72),inset 0 0 5px #ff9d45;
  }
  /* Bestaande volumeslider blijft bereikbaar, klein en niet dominant. */
  #sz-frame #musicVolume {
    display: block;
    left: 505px;
    top: 456px;
    width: 67px;
    height: 3px;
    z-index: 43;
    opacity: .55;
  }
  #sz-frame #musicVolume:hover,
  #sz-frame #musicVolume:focus-visible { opacity: 1; }
}


/* ========================================================================
   Stonezone DEV v6.5.2ac3 – subtiele paneeltypografie desktop / iPad
   Alleen cosmetisch: dezelfde Georgia-achtige klassieke schreef als de HUD,
   normale dikte, warm/gedempt goud, en verticaal gecentreerde naamplaatjes.
   Mobiele portrait-weergave niet aangepast.
   ======================================================================== */
@media (min-width: 601px) {
  #sz-frame #mobileControls .mobile-action-row button {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    color: #d5b184;
    text-shadow: 0 1px 1px rgba(25, 9, 5, .65);
  }
  #sz-frame #mobileControls .mobile-action-row button > span:last-child {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 13px;
    min-height: 13px;
    padding: 0 2px;
    margin: 0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1;
    color: #d5b184;
    text-shadow: 0 1px 1px rgba(25, 9, 5, .55);
  }
  #sz-frame #mobileControls .mobile-track-label,
  #sz-frame #mobileControls .mobile-track-row button {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 8px;
    font-weight: 400;
    line-height: 1;
    color: #d5b184;
    text-shadow: 0 1px 1px rgba(25, 9, 5, .55);
  }
  #sz-frame #mobileControls .mobile-track-row button[aria-pressed="true"] {
    color: #ead1aa;
  }
}


/* ========================================================================
   Stonezone DEV v6.5.2ac4 – slanke trackselector desktop / iPad
   Tracks zijn secundaire bediening; geen veranderingen aan mobiel of gameplay.
   ======================================================================== */
@media (min-width: 601px) {
  #sz-frame #mobileControls {
    width: 372px;
    grid-template-columns: 188px 170px;
    column-gap: 14px;
  }
  #sz-frame #mobileControls .mobile-track-row {
    width: 170px;
    grid-template-columns: 29px repeat(6, minmax(0, 1fr));
    gap: 2px;
    padding-inline: 3px;
  }
  #sz-frame #mobileControls .mobile-track-row button {
    border-radius: 3px;
  }
  /* De bestaande volume-slider staat los van de versmalde trackselector. */
  #sz-frame #musicVolume {
    left: 436px;
    width: 55px;
  }
}


/* ========================================================================
   Stonezone DEV v6.5.2ac5 — Hall of Fame compacter in lava-PNG.
   Alleen desktop/iPad; mobiele portrait-regels blijven onaangetast.
   De volledige top-10 en de OK-knop houden hun eigen ruimte.
   ======================================================================== */
@media (min-width: 601px) {
  .uiOverlay.hof .hofPanel {
    width: min(440px, calc(100vw - 24px)); /* -20px */
    height: min(550px, calc(100dvh - 24px)); /* +30px */
  }
  .uiOverlay.hof .hofInner {
    left: 40px;
    right: 50px;
    top: 43px;
    bottom: 28px;
    gap: 6px;
    min-height: 0;
  }
  .uiOverlay.hof .hofTitle {
    font-size: 23px;
    line-height: 1.15;
  }
  .uiOverlay.hof .hofList {
    min-height: 0;
    gap: 4px;
    padding: 0 3px 3px 1px;
  }
  .uiOverlay.hof .hofRow {
    grid-template-columns: 40px minmax(0, 1fr) 4ch 60px;
    gap: 6px;
    padding: 4px 0;
    line-height: 1.16;
  }
  .uiOverlay.hof .hofRow.hofHead {
    padding: 3px 0 7px;
    font-size: 13px;
    letter-spacing: .055em;
  }
  .uiOverlay.hof .hof-ok {
    bottom: 32px;
  }
}

/* v6.5.2ac6: iets meer verticale lucht in de top-10; OK 14px hoger. */

/* Release Center - appended without replacing existing Stonezone styles */
/* Stonezone Release Center v1. Standalone; no changes to game layout. */
.sz-release-modal[hidden] {display:none!important}
.sz-release-modal {position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:16px;box-sizing:border-box;font-family:Verdana,Arial,sans-serif;color:#ffedce;}
.sz-release-backdrop {position:absolute;inset:0;background:rgba(4,3,11,.87);backdrop-filter:blur(8px)}
.sz-release-card {position:relative;display:flex;flex-direction:column;width:min(690px,100%);max-height:min(780px,calc(100dvh - 28px));min-height:0;overflow:hidden;border:1px solid #a9653c;border-radius:20px;background:linear-gradient(155deg,#2f1a17,#110f1e 70%);box-shadow:0 24px 90px #000b,0 0 35px #a53d1938;transform:translateY(16px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease;outline:none;}
.sz-release-modal.is-visible .sz-release-card{transform:none;opacity:1}
.sz-release-head{display:flex;justify-content:space-between;gap:12px;padding:21px 60px 14px 24px;align-items:center;flex-wrap:wrap}
.sz-release-eyebrow{font-weight:800;letter-spacing:.08em;color:#f7bf78;font-size:16px;text-transform:uppercase}
.sz-release-version{font-size:11px;color:#d9bfa8}
.sz-release-close{position:absolute;right:14px;top:12px;z-index:2;border:1px solid #b48062;border-radius:50%;width:35px;height:35px;background:#271b1b;color:#ffe6c4;font-size:25px;cursor:pointer;line-height:1}
.sz-release-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#b66d40 #1c1415}
.sz-release-hero{margin:0 23px;border:1px solid #764630;border-radius:13px;overflow:hidden;background:radial-gradient(circle,#853c19,#20131b)}
.sz-release-hero img{width:100%;height:clamp(155px,34vh,305px);object-fit:contain;display:block}
.sz-release-body{padding:16px 26px 8px}
.sz-release-body h2{color:#ffce89;font-family:Georgia,serif;font-size:clamp(22px,4vw,30px);margin:4px 0 12px}
.sz-release-body>p{font-size:14px;line-height:1.6;margin:0 0 16px}
.sz-release-feature{display:flex;gap:13px;align-items:start;padding:12px 0;border-top:1px solid #ffffff24}
.sz-release-feature-icon{font-size:25px;flex:0 0 36px;text-align:center}
.sz-release-feature strong{color:#ffe0ad;font-size:14px}
.sz-release-feature p{font-size:13px;line-height:1.5;color:#dec8ba;margin:5px 0 0}
.sz-release-footer{padding:12px 24px 18px;display:flex;justify-content:flex-end;border-top:1px solid #ffffff22;background:#1b1418}
#szReleaseDone{background:linear-gradient(#ffc67c,#e68b35);color:#23120b;border:0;border-radius:999px;padding:10px 25px;font-weight:800;cursor:pointer;font-size:14px}
.sz-release-info{border:1px solid #a7724b;border-radius:999px;padding:6px 13px;background:#24191c;color:#ffdd9f;font:600 12px Verdana,Arial,sans-serif;cursor:pointer;margin:0 auto}
.sz-release-info:hover,.sz-release-mobile-action:hover{filter:brightness(1.15)}
#mobileMenuPanel .sz-release-mobile-action{display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;padding:10px 12px;background:transparent;color:#f4e9c0;border:0;text-align:left;font-size:13px;cursor:pointer}
@media(max-width:600px){.sz-release-modal{padding:9px}.sz-release-card{max-height:calc(100dvh - 18px);border-radius:14px}.sz-release-head{padding:18px 50px 11px 16px}.sz-release-hero{margin:0 12px}.sz-release-body{padding:12px 16px 4px}.sz-release-feature{gap:8px}.sz-release-footer{padding:10px 15px 13px}.sz-release-body>p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.sz-release-card{transition:none}}



/* Release Center v1.1 — drie gelijkwaardige startknoppen op één rij. */
#startOverlay .introButtons {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#startOverlay .introButtons > button {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  font: 700 13px/1.2 Verdana, Arial, sans-serif;
  padding: 9px 14px;
  border-radius: 999px;
  box-sizing: border-box;
}
#startOverlay .introButtons > .sz-release-info {
  background: #f59e0b;
  border: none;
  color: #111827;
}
#startOverlay .introButtons > .sz-release-info:hover {
  background: #fbbf24;
}
@media (max-width: 480px) {
  #startOverlay .introButtons {gap: 5px;}
  #startOverlay .introButtons > button {
    font-size: 11px;
    padding: 8px 9px;
  }
}
@media (max-width: 350px) {
  #startOverlay .introButtons > button {
    font-size: 10px;
    padding: 8px 6px;
  }
}
/* Updatekaart: beperkte viewporthoogte, interne scroll; ook voor iPad portrait. */
@media (max-width: 850px) {
  .sz-release-card {max-height: calc(100dvh - 24px);}
  .sz-release-hero img {height: clamp(135px, 28dvh, 290px);}
}

/* Release Center v1.3 — portrait screenshot beside its introduction, landscape above. */
.sz-release-primary.sz-release-portrait {display:grid;grid-template-columns:minmax(0, 42%) minmax(0, 1fr);align-items:center;gap:15px;padding:0 23px;}
.sz-release-primary.sz-release-portrait .sz-release-hero {margin:0;}
.sz-release-primary.sz-release-portrait .sz-release-hero img {width:100%;height:auto;max-height:min(390px,48dvh);object-fit:contain;}
.sz-release-primary.sz-release-portrait .sz-release-body {padding:0 5px 0 0;}
.sz-release-primary.sz-release-portrait .sz-release-body h2 {font-size:clamp(20px,3vw,27px);}
.sz-release-features {padding:0 26px 8px;}
.sz-release-hero[hidden] {display:none!important;}
@media(max-width:600px) {
  .sz-release-primary.sz-release-portrait {display:block;padding:0;}
  .sz-release-primary.sz-release-portrait .sz-release-hero {margin:0 12px;}
  .sz-release-primary.sz-release-portrait .sz-release-hero img {max-height: min(280px,36dvh);width:100%;}
  .sz-release-primary.sz-release-portrait .sz-release-body {padding:12px 16px 4px;}
  .sz-release-features {padding:0 16px 5px;}
}

/* =====================================================================
   Hint Economy v3 — gedeelde lava-chipstijl, desktop / iPad / telefoon.
   Sluit rechtstreeks aan op de bestaande #mobileMenuToggle-regels.
   De JavaScript zet de wallet BINNEN hetzelfde geschaalde #sz-frame.
   Daardoor schalen rand, hoeken en schaduw gelijk aan de hamburger.
   ===================================================================== */
#mobileMenuToggle,
#szHintWalletChip {
  box-sizing: border-box;
  border: 1px solid rgba(241,154,81,.85);
  border-radius: 8px;
  background: linear-gradient(155deg,#542717,#170d0a 76%);
  box-shadow: 0 1px 5px #180a06, inset 0 0 5px rgba(251,111,35,.23);
}
#szHintWalletChip {
  padding: 0;
  text-align: center;
}
#szHintWalletChip .sz-hint-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  line-height: 1;
}
#szHintWalletChip .sz-hint-bulb,
#szHintWalletChip #szHintWalletCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#szHintWalletChip #szHintWalletCount {
  font-variant-numeric: tabular-nums;
}

/* Hint Economy v4: de wallet blijft ook bij nul hints volledig zichtbaar.
   Zelfde randkleur en afronding als de bestaande menuknop. */
#szHintWalletChip.sz-wallet-empty { opacity: 1 !important; }
#szHintWalletChip .sz-hint-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 6px;
}

/* Hint Economy v5 — dezelfde afronding op beide chips, in alle layouts.
   De JS kopieert de berekende menu-stijl, inclusief deze gedeelde radius. */
#mobileMenuToggle,
#szHintWalletChip {
  border-radius: 13px !important;
}

/* Hint Economy v6: gezamenlijke fysieke chipvorm binnen geschaald spelframe.
   Voorkomt dat een fixed wallet buiten het frame hoekiger lijkt. */
#sz-frame #mobileMenuToggle,
#sz-frame #szHintWalletChip {
  border: 1px solid rgba(241,154,81,.85) !important;
  border-radius: 13px !important;
  background: linear-gradient(155deg,#542717,#170d0a 76%) !important;
  box-shadow: 0 1px 5px #180a06, inset 0 0 5px rgba(251,111,35,.23) !important;
}
#sz-frame #szHintWalletChip {
  padding: 0 !important;
  opacity: 1 !important;
}
#sz-frame #szHintWalletChip .sz-hint-content {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; width: 100%; height: 100%;
}
#sz-frame #szHintWalletChip.sz-hint-busy {
  box-shadow:0 0 14px #ffad47, inset 0 0 9px #ffad473f !important;
}

/* Hint Economy v7: klein pictogram + teller binnen de 42px menu-chip.
   De vorige 20px iconen werden door de frame-schaal te groot. */
#sz-frame #szHintWalletChip .sz-hint-content {
  gap: 3px !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 2px;
}
#sz-frame #szHintWalletChip .sz-hint-bulb {
  font-size: 12px !important;
  line-height: 1 !important;
}
#sz-frame #szHintWalletChip #szHintWalletCount {
  font-size: 13px !important;
  min-width: 9px;
  line-height: 1 !important;
}

/* Stone Legend v0.4 — alleen level editor; oorspronkelijke gridcodes blijven intact. */
#levelEditorOverlay .sz-editor-workspace {
  display: flex;
  align-items: stretch;
  gap: 12px;
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  min-width: 0;
}
#levelEditorOverlay .sz-editor-workspace > .level-editor-panel {
  flex: 1 1 820px;
  width: min(820px, calc(100vw - 460px));
  min-width: 0;
}
#levelEditorOverlay .sz-editor-stone-legend {
  flex: 0 0 400px;
  min-width: 0;
  box-sizing: border-box;
  max-height: calc(100dvh - 20px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 12px;
  color: #e5e7eb;
  background: #111827;
  border: 1px solid #374151;
  border-radius: 10px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#levelEditorOverlay .sz-editor-stone-legend h3 { margin: 0 0 3px; font-size: 16px; }
#levelEditorOverlay .sz-editor-stone-legend p { margin: 0 0 10px; font-size: 11px; color: #9ca3af; }
#levelEditorOverlay .sz-editor-legend-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 3px 22px;
  align-items: start;
  /* Visual separation between Stones 0–9 and special tiles. */
  background: linear-gradient(to right,
    transparent calc(50% - .5px),
    rgba(148,163,184,.35) calc(50% - .5px),
    rgba(148,163,184,.35) calc(50% + .5px),
    transparent calc(50% + .5px));
}
#levelEditorOverlay .sz-editor-legend-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 34px;
  min-width: 0;
  gap: 6px;
  padding: 2px 4px;
  border-bottom: 1px solid rgba(148,163,184,.12);
}
#levelEditorOverlay .sz-editor-legend-name { font-size: 11px; line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
#levelEditorOverlay .sz-editor-legend-tile { flex: 0 0 30px; width: 30px; height: 30px; object-fit: contain; }
/* Keep two columns on tablets when possible; collapse only on truly narrow layouts. */
@media (max-width: 1100px) {
  #levelEditorOverlay.level-editor-overlay { overflow-y: auto; align-items: flex-start; }
  #levelEditorOverlay .sz-editor-workspace {
    flex-direction: column;
    width: min(820px, calc(100vw - 20px));
    max-height: none;
    margin: auto;
  }
  #levelEditorOverlay .sz-editor-workspace > .level-editor-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
  }
  #levelEditorOverlay .sz-editor-stone-legend {
    flex: 0 0 auto;
    width: 100%;
    max-height: 260px;
  }
}