:root {
  color-scheme: dark;
  --paper: rgba(255, 239, 196, 0.96);
  --ink: #2e1808;
  --wood-dark: #4f260b;
  --wood: #9a541e;
  --ok: #39d978;
  --bad: #ff725c;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; touch-action: none; overscroll-behavior: none; }
body { font-family: Arial, sans-serif; background: #050505 url('../images/fon.webp') center / cover no-repeat; color: #fff; }
button { font: inherit; }

.xr-page { position: fixed; inset: 0; width: 100vw; height: 100dvh; overflow: hidden; isolation: isolate; background: #050505 url('../images/fon.webp') center / cover no-repeat; }
.xr-canvas-host { position: absolute; inset: 0; z-index: 1; }
.xr-canvas-host canvas { display: block; width: 100%; height: 100%; }

.xr-start {
  position: absolute;
  inset: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  z-index: 20;
  display: grid;
  align-content: end;
  gap: 14px;
  pointer-events: auto;
}
.xr-start[hidden] { display: none; }
.xr-brand { width: min(280px, 72vw); align-self: start; filter: drop-shadow(0 8px 12px rgba(0,0,0,.45)); }
.xr-copy { width: min(540px, 100%); padding: 16px 18px; border: 3px solid var(--wood-dark); border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 26px rgba(0,0,0,.35); }
.xr-copy h1 { margin: 0 0 8px; font: 700 clamp(30px, 9vw, 46px)/1 Georgia, serif; }
.xr-copy p { margin: 0; font-size: clamp(17px, 4.6vw, 22px); line-height: 1.28; font-weight: 800; }
.xr-copy .small { margin-top: 7px; color: #67401b; font-size: clamp(14px, 3.8vw, 17px); }

.xr-button, .xr-reset, .xr-sound {
  min-height: 52px;
  border: 3px solid var(--wood-dark);
  border-radius: 8px;
  background: linear-gradient(#f0bb58, #884416);
  color: #2b1204;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(0,0,0,.38), inset 0 0 0 2px rgba(255,231,140,.35);
}
.xr-button { width: 100%; font-size: clamp(16px, 4.4vw, 21px); }
.xr-button:disabled { opacity: .55; }

.xr-hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.xr-status {
  position: absolute;
  left: max(10px, env(safe-area-inset-left));
  top: max(10px, env(safe-area-inset-top));
  padding: 8px 10px;
  border-radius: 7px;
  background: rgba(0,0,0,.62);
  color: #f5ffe9;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  white-space: pre-line;
}
.xr-status strong.ok { color: var(--ok); }
.xr-status strong.bad { color: var(--bad); }
.xr-message {
  position: absolute;
  left: 50%;
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px));
  width: min(500px, calc(100vw - 30px));
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(0,0,0,.66);
  color: #e9ffe9;
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
}
.xr-message[hidden] { display: none; }
.xr-controls {
  position: absolute;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.xr-reset, .xr-sound { min-height: 46px; padding: 0 14px; font-size: 14px; }
.xr-reset[hidden], .xr-sound[hidden] { display: none; }

/* model-viewer is used only as native AR fallback (Scene Viewer / Quick Look). */
#native-ar-fallback { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -10px; top: -10px; }

@media (orientation: landscape) and (max-height: 560px) {
  .xr-start { grid-template-columns: minmax(170px, 30vw) 1fr minmax(260px, 36vw); grid-template-rows: auto 1fr auto; column-gap: 14px; }
  .xr-brand { grid-column: 1; grid-row: 1; width: min(220px, 30vw); }
  .xr-copy { grid-column: 3; grid-row: 2; }
  .xr-button { grid-column: 3; grid-row: 3; }
}

/* ar54: hide technical diagnostic panel only */
.xr-status { display: none !important; }


/* Back button inside AR */
.xr-back {
  min-height: 46px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #6e310e;
  border-radius: 10px;
  background: linear-gradient(#f4bc52, #b86a18);
  color: #2b160b;
  font: 700 14px/1 Arial, sans-serif;
  text-decoration: none;
  box-shadow: 0 3px 0 #4f240b, inset 0 1px 0 rgba(255,255,255,.45);
  white-space: nowrap;
}


/* Image Zurück button inside AR */
.xr-back.xr-back-image {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
}

.xr-back.xr-back-image img {
  display: block;
  width: auto;
  height: clamp(54px, 7vh, 78px);
  max-width: 46vw;
  object-fit: contain;
}


/* v11: bare image button inside AR, without any plate/background */
.xr-back.xr-back-image,
.xr-back.xr-back-image:link,
.xr-back.xr-back-image:visited,
.xr-back.xr-back-image:hover,
.xr-back.xr-back-image:focus,
.xr-back.xr-back-image:active {
  display: inline-block;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none;
  line-height: 0;
  text-decoration: none;
}

.xr-back.xr-back-image img {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.xr-ios-options {
  width: min(540px, 100%);
  display: grid;
  gap: 10px;
  color: #f7ecd2;
  font: 700 13px/1.35 Arial, sans-serif;
  text-align: center;
}

.xr-ios-options[hidden] {
  display: none;
}

.xr-ios-options p {
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.xr-ios-link {
  display: block;
  padding: 12px 14px;
  border: 2px solid rgba(247, 236, 210, .72);
  border-radius: 8px;
  color: #f7ecd2;
  text-decoration: none;
  background: rgba(38, 22, 10, .72);
}

/* The Apple handoff contains instructions and remains scrollable on small screens. */
.is-ios-appclip .xr-start { overflow-y:auto; touch-action:pan-y; display:flex; flex-direction:column; align-items:flex-start; padding-bottom:80px; }
.is-ios-appclip .xr-brand { width:min(170px,45vw); }
.is-ios-appclip .xr-copy, .is-ios-appclip .xr-button { width:min(540px,100%); }
.xr-app-link { display:block; text-align:center; padding:14px; text-decoration:none; }
.xr-ios-link img { vertical-align:middle; object-fit:contain; }
.xr-app-link:focus-visible, .xr-ios-link:focus-visible { outline:3px solid white; outline-offset:3px; }