* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  background: #fff;
  color: #000;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
a {
  color: inherit;
}
main {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}
.gallery {
  display: block;
}
.card {
  display: block;
  text-decoration: none;
  text-align: center;
  margin-bottom: 55px;
}
.card img {
  width: 100%;
  height: auto;
  display: block;
}
.card-bottom {
  text-align: center;
  margin-top: 12px;
}
.label,
.tap,
.back,
.status,
button,
.character-nav {
  font-family: Courier, 'Courier New', monospace;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.label {
  display: block;
  font-size: 14px;
}
.tap {
  display: block;
  font-size: 12px;
  margin-top: 6px;
  color: #777;
}
.logo {
  display: block;
  width: 120px;
  height: auto;
  margin: 70px auto 20px;
}
footer {
  padding: 0 20px 20px;
}
footer a {
  display: block;
  width: 120px;
  margin: auto;
}
.detail {
  padding-top: 12px;
}
.back {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 12px 0;
  color: #666;
}
.character-art {
  position: relative;
  aspect-ratio: 1;
}
.character-art > img,
model-viewer {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.character-info {
  text-align: center;
  margin-top: 12px;
}
.character-info h1 {
  font:
    400 14px Courier,
    'Courier New',
    monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0 0 22px;
}
button {
  font-size: 12px;
  letter-spacing: 2px;
  border: 0;
  background: none;
  color: #000;
  min-height: 44px;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
button:disabled {
  color: #777;
  cursor: default;
  text-decoration: none;
}
.status {
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.6;
  color: #666;
  margin: 8px auto 0;
  max-width: 320px;
}
.status:empty {
  display: none;
}
.character-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  letter-spacing: 0;
  margin-top: 35px;
}
.character-nav a {
  text-decoration: none;
  color: #666;
  padding: 12px 0;
}
.error {
  font-size: 16px;
  line-height: 1.5;
}
a:focus-visible,
button:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}
.site-header {
  width: 100%;
  border-bottom: 1px solid #000;
  padding: 28px 20px 24px;
  text-align: center;
}
.site-header a {
  display: inline-block;
}
.site-header .logo {
  width: 120px;
  height: auto;
  margin: 0;
  display: block;
}
[hidden] {
  display: none !important;
}
.build {
  display: none;
  text-align: center;
  font:
    10px Courier,
    monospace;
  letter-spacing: 1px;
  color: #666;
  margin: 30px 0 12px;
}
.character-art canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}
/* One centred row, so the AR button and TRY AGAIN line up whatever mix is
   showing (they sat on different baselines on iPad before). */
#launch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 22px;
}
#launch > [hidden] {
  display: none;
}
/* The AR call-to-action: the logo's orange, black type and border, and a hard
   offset shadow in the spirit of the drawings. The same VIEW IN AR button on
   Apple (a Quick Look link) and Android (starts WebXR), and PLACE & PLAY
   inside AR, so it reads the same everywhere. */
:root {
  --imabox-orange: #f26122;
}
.cta,
#xr-ui #place {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 28px;
  background: var(--imabox-orange);
  color: #000;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
  font:
    700 14px Courier,
    'Courier New',
    monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.08s ease,
    box-shadow 0.08s ease;
}
.cta:hover {
  background: #ff7536;
}
.cta:active,
#xr-ui #place:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #000;
}
.cta:disabled,
#xr-ui #place:disabled {
  background: #f7b393;
  color: #555;
  border-color: #555;
  box-shadow: 4px 4px 0 #555;
  cursor: default;
  transform: none;
}
/* Safari only hands the link to Quick Look when it wraps an <img>, so the
   AR icon is that image; the label comes from CSS. */
.cta img {
  width: 24px;
  height: 24px;
  display: block;
}
a.cta::after {
  content: 'View in AR';
}
/* While the 3D model downloads: the poster gently bobs, as if about to hop
   out, and a thin orange bar shows real download progress. Both vanish when
   the draggable model replaces the poster. */
.character-art.loading #poster {
  animation: imabox-bob 1.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes imabox-bob {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3%) rotate(-1.5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-3%) rotate(1.5deg);
  }
}
.loadbar {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 4%;
  height: 6px;
  border: 2px solid #000;
  background: #fff;
  overflow: hidden;
}
.loadbar span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--imabox-orange);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.2s linear;
}
/* Size unknown: a short block slides back and forth instead of a percentage. */
.loadbar.indeterminate span {
  width: 30%;
  transform: none;
  animation: imabox-slide 1.2s ease-in-out infinite alternate;
}
@keyframes imabox-slide {
  from {
    margin-left: 0;
  }
  to {
    margin-left: 70%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .character-art.loading #poster,
  .loadbar.indeterminate span {
    animation: none;
  }
}
#share {
  margin: 24px auto 0;
}
#qr {
  display: block;
  margin: auto;
}
#xr-ui {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  transition: padding-bottom 0.4s ease;
}
/* Chrome shows its own "to exit full screen…" notice along the bottom of the
   screen for a few seconds when AR starts. A page can't hide it, so the
   buttons sit above it until it fades, then settle back down. */
#xr-ui.clear-notice {
  padding-bottom: calc(env(safe-area-inset-bottom) + 104px);
}
#xr-ui .xr-panel {
  pointer-events: auto;
  background: #fffffff2;
  color: #000;
  border: 2px solid #000;
  padding: 12px 16px;
  max-width: 440px;
  width: 100%;
  margin: 0 auto;
}
/* While the character plays there is nothing to read: hide the empty panel. */
#xr-ui .xr-panel:has(#xr-status:empty) {
  visibility: hidden;
}
#xr-ui p {
  font:
    14px/1.5 Courier,
    monospace;
  margin: 0;
}
/* Secondary buttons (PLAY AGAIN, PLACE AGAIN, EXIT AR) share the panel's
   off-white instead of sitting on it as brighter white patches. */
#xr-ui button {
  background: transparent;
}
#xr-ui .xr-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}
body.in-ar #art canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  z-index: 5;
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
  }
}