:root {
  --bg: #0f1115;
  --fg: #e8e8ea;
  --accent: #6ea8fe;
  --pane-size: 50vmin;
  --perspective: 1000px;
  --front-image: url("img/image01.gif");
  --back-image:  url("img/image02.gif");
}
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  background: radial-gradient(1200px 800px at 50% 40%, #141824, #0d0f14 60%, #0a0c10 100%);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
#stage {
  height: 100%;
  display: grid;
  place-items: center;
  perspective: var(--perspective);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  position: relative;
  overflow: hidden;
}
.pane {
  width: var(--pane-size);
  height: var(--pane-size);
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: grab;
  outline: none;
}
.pane.dragging { cursor: grabbing; }
.face {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border-radius: 16px;
  border: 1px solid #1e2230;
  backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset,
              0 20px 60px rgba(0,0,0,0.45),
              0 8px 24px rgba(0,0,0,0.3);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.front { background-image: var(--front-image); }
.back  { transform: rotateY(180deg); background-image: var(--back-image); }
.face::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events:none;
  background:
    radial-gradient(160% 120% at 20% 15%, rgba(255,255,255,0.12), transparent 40%),
    linear-gradient(180deg, rgba(27,34,51,0.28), rgba(21,26,39,0.28));
}
.back::after {
  background:
    radial-gradient(160% 120% at 80% 85%, rgba(255,255,255,0.10), transparent 40%),
    linear-gradient(180deg, rgba(32,38,47,0.26), rgba(20,26,33,0.26));
}
.hint {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  font-size: 12px; opacity: .75; background: rgba(0,0,0,.35);
  padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
  white-space: nowrap;
}
.hud { position: absolute; right:16px; bottom:16px; display:grid; gap:12px; z-index:10; }
.hud.idle .ui-btn, .hud.idle .axis-panel { opacity:.1; transition: opacity 240ms ease; }
.hud.hidden { opacity:0; pointer-events:none; transform: translateY(8px); transition: opacity 180ms ease, transform 180ms ease; }
.axis-panel {
  background: rgba(0,0,0,0.45); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px; padding: 10px 12px;
  display: grid; gap: 8px; min-width: 280px;
}
.axis-row { display:grid; grid-template-columns:18px 1fr 46px; align-items:center; gap:10px; }
.axis-row label { font-size:12px; color:#cfd3dd; text-align:center; }
.axis-row output { font-variant-numeric: tabular-nums; font-size:12px; text-align:right; opacity:.9; }
.axis-panel input[type="range"]{ -webkit-appearance:none; width:100%; height:24px; background:transparent; cursor:pointer; }
.axis-panel input[type="range"]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;background:
  linear-gradient(#ffffff80,#ffffff80) 0% 50%/2px 100% no-repeat,
  linear-gradient(#ffffff80,#ffffff80) 50% 50%/2px 100% no-repeat,
  linear-gradient(#ffffff80,#ffffff80) 100% 50%/2px 100% no-repeat,
  linear-gradient(90deg,#2a3145,#1b2233);
}
.axis-panel input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;margin-top:-5px;border-radius:50%;
  background:#e8e8ea;border:1px solid #000;box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.axis-panel input[type="range"]::-moz-range-track{
  height:6px;border-radius:999px;background:
  linear-gradient(#ffffff80,#ffffff80) 0% 50%/2px 100% no-repeat,
  linear-gradient(#ffffff80,#ffffff80) 50% 50%/2px 100% no-repeat,
  linear-gradient(#ffffff80,#ffffff80) 100% 50%/2px 100% no-repeat,
  linear-gradient(90deg,#2a3145,#1b2233);
}
.axis-panel input[type="range"]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#e8e8ea;border:1px solid #000;box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.spin-axes{ display:grid; grid-template-columns:repeat(3, auto) 1fr; align-items:center; gap:12px; margin-top:-4px; }
.spin-axes label{ font-size:12px; color:#cfd3dd; display:inline-flex; align-items:center; gap:6px; }
.spin-axes input[type="checkbox"]{ width:16px; height:16px; accent-color:#6ea8fe; }
.hud-buttons{ display:grid; grid-auto-flow:column; gap:10px; }
.ui-btn{ width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px); display:grid; place-items:center;
  font-size:20px; color:#e8e8ea; cursor:pointer; user-select:none; transition: transform 120ms ease, background 120ms ease, opacity 240ms ease; opacity:.9;}
.ui-btn:hover,.ui-btn:focus-visible{ background: rgba(0,0,0,.6); transform: translateY(-1px); outline:none; }
.ui-btn:active{ transform: translateY(0); }
.ui-btn b{ position:absolute; right:7px; bottom:6px; font-size:10px; font-weight:800; opacity:.9; pointer-events:none; }
.ui-btn-sm{ justify-self:end; width:34px; height:34px; font-size:16px; }
.hud-toggle{ position:absolute; top:calc(12px + env(safe-area-inset-top,0px)); right:calc(12px + env(safe-area-inset-right,0px)); z-index:20; width:44px; height:44px; }
@media (max-width:820px), (pointer:coarse){ .hud{ transform-origin: bottom right; } }
@media (prefers-reduced-motion: reduce){ .pane,.ui-btn,.axis-panel{ transition:none!important; } }