.ar-view{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;
  height:100vh;height:100dvh;color:#fff;font-family:var(--font-gothic);}
.ar-stage{position:absolute;inset:0;overflow:hidden;}
.ar-stage video{object-fit:cover;}

.ar-top{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));z-index:2;}
.ar-badge{font-size:12px;letter-spacing:.12em;background:rgba(63,74,61,.85);padding:4px 10px;border-left:3px solid var(--c-ochre-500);}
.ar-close{font:inherit;font-size:14px;letter-spacing:.1em;color:#fff;background:rgba(43,38,32,.7);
  border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:6px 14px;cursor:pointer;}

.ar-guide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;pointer-events:none;z-index:1;transition:opacity .4s;}
.ar-guide.is-hidden{opacity:0;}
.ar-frame{position:relative;width:84vw;max-width:460px;aspect-ratio:3/2;}
.ar-frame i{position:absolute;width:28px;height:28px;border-color:rgba(255,253,247,.9);border-style:solid;border-width:0;}
.ar-frame i:nth-child(1){left:0;top:0;border-left-width:3px;border-top-width:3px;}
.ar-frame i:nth-child(2){right:0;top:0;border-right-width:3px;border-top-width:3px;}
.ar-frame i:nth-child(3){left:0;bottom:0;border-left-width:3px;border-bottom-width:3px;}
.ar-frame i:nth-child(4){right:0;bottom:0;border-right-width:3px;border-bottom-width:3px;}
.ar-guide p{font-size:14px;letter-spacing:.06em;text-align:center;background:rgba(43,38,32,.65);padding:6px 12px;max-width:86vw;}

.ar-status{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);
  font-size:12px;letter-spacing:.1em;background:rgba(43,38,32,.6);padding:4px 12px;z-index:2;white-space:nowrap;}

.ar-end{position:absolute;inset:0;display:none;}
.ar-end.ending{display:block;}
.ar-end canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.ending-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  font-family:var(--font-mincho, serif);font-size:20px;letter-spacing:.3em;white-space:nowrap;
  color:#f3efe6;text-shadow:0 0 12px rgba(0,0,0,.9);opacity:0;transition:opacity 1.2s;}
.ending-text.on{opacity:1;}
.ending-note{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 14px);transform:translateX(-50%);
  margin:0;font-size:11px;letter-spacing:.06em;white-space:nowrap;color:rgba(255,255,255,.75);
  background:rgba(0,0,0,.45);padding:3px 10px;}