*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;background:#10223f;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
body{min-height:100dvh;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));overflow:hidden}
.rotate-gate{display:none}
.shell{width:min(1180px,100%);display:grid;gap:8px}
.hud{min-height:80px;display:grid;grid-template-columns:1.15fr 2fr 2fr 1fr;align-items:center;gap:14px;padding:10px 14px;background:#172b4d;border:3px solid #fff;border-radius:16px;box-shadow:0 6px 0 #09172d}
.brand strong{display:block;font-size:21px;letter-spacing:.02em}
.brand span,.pad{font-size:11px;font-weight:800;color:#b8d9f2}
.hp-label,.copy-label{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:900;margin-bottom:5px}
.meter{height:13px;border:2px solid #fff;border-radius:999px;background:#07162b;overflow:hidden}
.meter i{display:block;width:100%;height:100%;background:#53dc78;transition:width .15s}
.copybox{min-width:0}
.copy-label strong{color:#ffe05c}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.stat{padding:4px 6px;border-radius:6px;background:#0b1b34;font-size:10px;font-weight:900;text-align:center}
.pad{text-align:right}
.pad.on{color:#72f1a4}
.stage{position:relative;overflow:hidden;border:4px solid #fff;border-radius:18px;box-shadow:0 8px 0 #07162b;background:#84d7f5;aspect-ratio:16/9}
canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:auto}
.overlay{position:absolute;inset:0;display:none;place-items:center;padding:20px;background:rgba(6,20,43,.64);backdrop-filter:blur(7px)}
.overlay.on{display:grid}
.panel{width:min(560px,94%);padding:26px;background:#fff;color:#16263f;border:4px solid #16263f;border-radius:22px;box-shadow:0 9px 0 #0b1729;text-align:center}
.panel h1,.panel h2{margin:4px 0 10px;font-size:clamp(28px,5vw,48px);line-height:1.02;letter-spacing:-.05em}
.panel p{margin:0 auto 16px;max-width:46ch;line-height:1.45}
.eyebrow{font-weight:950!important;font-size:12px;letter-spacing:.08em;color:#5d47d6}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:18px 0;text-align:left}
.controls span{background:#eaf4fb;border:2px solid #bddff0;border-radius:10px;padding:8px 10px;font-size:12px;font-weight:800}
.controls b{float:right;color:#5d47d6}
button{border:3px solid #16263f;border-radius:12px;background:#ffe05c;color:#16263f;padding:12px 28px;font:900 16px inherit;box-shadow:0 5px 0 #16263f;cursor:pointer}
button:active{transform:translateY(3px);box-shadow:0 2px 0 #16263f}
.toast,.copyPrompt{position:absolute;left:50%;transform:translateX(-50%);pointer-events:none;font-weight:950;text-shadow:0 2px 0 #10223f}
.toast{top:18%;padding:8px 14px;border-radius:10px;background:rgba(16,34,63,.82);opacity:0;transition:opacity .15s}
.toast.on{opacity:1}
.copyPrompt{bottom:18%;font-size:14px;color:#ffe05c;opacity:0}
.copyPrompt.on{opacity:1}
footer{display:flex;justify-content:space-between;gap:12px;padding:3px 7px;color:#aac7df;font-size:11px;font-weight:700}

@media(max-width:900px) and (orientation:portrait){
  body{padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))}
  .shell{display:none}
  .rotate-gate{display:grid;place-items:center;width:100%;height:100%;text-align:center}
  .rotate-card{display:grid;justify-items:center;gap:16px;width:min(360px,92vw);padding:28px 24px;border:3px solid #fff;border-radius:24px;background:#172b4d;box-shadow:0 8px 0 #09172d}
  .rotate-card strong{font-size:25px;letter-spacing:-.04em}
  .rotate-card span{color:#c6dcee;font-size:14px;line-height:1.55;font-weight:700}
  .rotate-phone{width:42px;height:70px;border:4px solid #fff;border-radius:10px;position:relative;transform:rotate(90deg)}
  .rotate-phone:after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;border-radius:50%;background:#ffe05c;transform:translateX(-50%)}
}

@media(max-width:900px) and (orientation:landscape), (max-height:600px) and (orientation:landscape){
  body{padding:max(2px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(2px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left))}
  .rotate-gate{display:none}
  .shell{position:relative;width:100%;height:100%;display:grid;grid-template:1fr/1fr;gap:0;place-items:stretch}
  .stage,.hud{grid-area:1/1}
  .stage{width:100%;height:100%;aspect-ratio:auto;border-width:2px;border-radius:12px;box-shadow:none}
  canvas{object-fit:contain;background:#84d7f5}
  .hud{z-index:10;align-self:start;justify-self:stretch;min-height:46px;grid-template-columns:.9fr 2.15fr 1.8fr 1.15fr;gap:7px;margin:4px 6px 0;padding:5px 8px;background:rgba(23,43,77,.93);border-width:2px;border-radius:11px;box-shadow:none;backdrop-filter:blur(8px)}
  .brand strong{font-size:13px}
  .brand span{display:none}
  .hp-label,.copy-label{font-size:9px;margin-bottom:3px}
  .meter{height:9px;border-width:1.5px}
  .stats{gap:3px}
  .stat{padding:2px 3px;border-radius:5px;font-size:8px}
  .pad{display:block;font-size:8px;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .overlay{padding:52px 10px 6px}
  .panel{width:min(700px,94%);max-height:100%;overflow:auto;padding:11px 15px 12px;border-width:3px;border-radius:15px;box-shadow:0 5px 0 #0b1729}
  .panel h1,.panel h2{margin:2px 0 5px;font-size:clamp(22px,7vh,32px);line-height:1}
  .panel p{margin:0 auto 7px;font-size:11px;line-height:1.28}
  .eyebrow{font-size:9px!important;margin-bottom:3px!important}
  .controls{grid-template-columns:repeat(4,1fr);gap:4px;margin:7px 0 9px}
  .controls span{padding:5px 6px;border-width:1.5px;border-radius:7px;font-size:9px;white-space:nowrap}
  .controls b{float:none;display:block;margin-top:2px;font-size:9px}
  button{border-width:2px;border-radius:9px;padding:7px 18px;font-size:12px;box-shadow:0 3px 0 #16263f}
  .toast{top:17%;font-size:11px;padding:5px 9px}
  .copyPrompt{bottom:8%;font-size:11px}
  footer{display:none}
}

@media(max-width:760px) and (orientation:landscape){
  .brand{display:none}
  .hud{grid-template-columns:2.4fr 2fr 1.1fr}
  .pad{text-align:right}
}