/* =========
   Clean layout: header (logo left, button right),
   stage contains canvas + controls footer inside the frame
   ========= */
:root{
  --bg:#0b0f1d; --bg-1:#0d132a; --bg-2:#11172c;
  --ink:#e8ecf3; --ink-dim:#9aa3b2;
  --line:#1b2240; --line-2:#22305f;
  --accent:#8bd3ff; --accent-2:#8aa2ff;
  --r-lg:14px; --r-md:10px; --shadow:0 20px 60px rgba(0,0,0,.5);
}

*,:before,:after{ box-sizing:border-box; }
html,body{ height:100%; overflow-x:hiddenl;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:grid; grid-template-rows:auto 1fr auto;
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Prevent any horizontal page scrolling / chaining */
html, body { 
  overflow-x: hidden;
  overscroll-behavior-x: contain; /* modern Safari/Chrome */
}

/* Don’t let children overflow the frame width */
.stage, .stage * { max-width: 100%; }

/* Let our JS controls handle touch inside the canvas */
canvas { touch-action: none; }  /* supported on modern Safari/Chrome */


/* Header */
header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 16px; border-bottom:1px solid var(--line);
}
header .logo{ height:52px; width:auto; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--bg-2); color:var(--ink); cursor:pointer; user-select:none;
  transition:transform .05s ease,border-color .2s ease,background .2s ease;
  font:500 14px/1.1 inherit;
}
.btn:hover{ border-color:#2a3562; }
.btn:active{ transform:translateY(1px); }

/* Stage (frame) */
.stage{
  position:relative;
  display:grid; place-items:stretch;
  margin:16px; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
  min-height:min(74vh,820px);
}
@media (max-height:560px){ .stage{ min-height:64vh; } }
canvas{ display:block; width:100%; height:100%; }

/* Controls footer INSIDE the frame */
.stage-controls{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:
    linear-gradient(to top, rgba(11,15,29,0.96), rgba(11,15,29,0.6)),
    var(--bg-1);
  border-top:1px solid var(--line);
  padding:10px 14px;
}
.stage-controls .speed{ display:inline-flex; gap:8px; align-items:center; }
.hint{ color:var(--ink-dim); font-size:12px; }
input[type="range"]{ accent-color:var(--accent); height:28px; min-width:180px; }

/* Footer */
footer{ padding:10px 16px; color:var(--ink-dim); font-size:12px; text-align:left; }

/* Modal */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center; z-index:50; padding:16px; overscroll-behavior:contain;
}
.modal-backdrop[aria-hidden="false"]{ display:flex; }
@supports selector(body:has(*)){
  body:has(.modal-backdrop[aria-hidden="false"]){ overflow:hidden; }
}
.modal{
  background:var(--bg-1); border:1px solid var(--line-2); border-radius:var(--r-lg);
  width:min(940px,100%); box-shadow:var(--shadow); padding:16px;
  max-height:min(92vh,980px); overflow:auto; -webkit-overflow-scrolling:touch;
}
.modal h2{ margin:0 0 12px 0; font-size:16px; }
.grid{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:520px){ .grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:900px){ .grid{ grid-template-columns:repeat(3,1fr); } }

.face-card{
  border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:10px; background:#0b1030; display:grid; gap:10px;
}
.face-card label{ font-size:12px; color:#cfe2ff; display:flex; justify-content:space-between; gap:8px; align-items:center; }
.face-card input[type="file"]{ display:none; }
.face-card .file-btn{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--bg-2); color:var(--ink); cursor:pointer; justify-self:start;
}
.thumb{
  width:100%; aspect-ratio:1/1; border-radius:10px; background:#0a0f28;
  border:1px dashed var(--line-2); display:grid; place-items:center;
  color:var(--accent-2); font-size:12px; overflow:hidden;
}
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.rotator{ display:flex; gap:6px; align-items:center; justify-content:space-between; }
.rotator .controls{ display:flex; gap:6px; }
.pill{ padding:4px 8px; border:1px solid var(--line-2); border-radius:999px; font-size:12px; background:var(--bg-2); color:#cfe2ff; }
.rot-btn{
  padding:8px 10px; border:1px solid var(--line-2); border-radius:8px;
  background:#0f1630; color:var(--ink); cursor:pointer;
}
.rot-btn:active{ transform:translateY(1px); }

.modal-actions{
  position:sticky; bottom:-1px;
  background:
    linear-gradient(to top, rgba(11,15,29,0.98), rgba(11,15,29,0.7)),
    var(--bg-1);
  padding:12px 0 0; margin-top:8px; display:flex; gap:10px; justify-content:flex-end;
  backdrop-filter:blur(2px);
}
@media (hover:none) and (pointer:coarse){
  .modal .btn{ padding:12px 16px; }
}

/* Small-screen header tweak */
@media (max-width:420px){
  header .logo{ height:46px; }
  .btn{ padding:9px 12px; }
  input[type="range"]{ min-width:140px; }
}