/* ============================================================
   ARCANE GATE — HUD / shell styling
   ============================================================ */

:root{
  --gold:      #f2c879;
  --gold-dim:  #b98f4d;
  --amber:     #ff9c3c;
  --ink:       #05060a;
  --panel:     rgba(12, 11, 14, .58);
  --line:      rgba(242, 200, 121, .22);
  --line-soft: rgba(242, 200, 121, .10);
  --text:      #e8dfd0;
  --text-dim:  #8d8577;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --sans: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

canvas#gl{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#cam{ position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -10px; top: -10px; }

/* ---------------- camera preview ---------------- */
#preview-wrap{
  position: fixed;
  right: 26px;
  bottom: 118px;
  width: 214px;
  padding: 7px 7px 0;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 30px rgba(255,170,70,.05);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
  z-index: 12;
}
#preview-wrap.on{ opacity: 1; transform: none; }

#preview{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 7px;
  background: #07070b;
  transform: scaleX(-1);      /* mirror: matches what the user expects */
}

.preview-foot{
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.preview-foot .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #6b5a3a;
  box-shadow: 0 0 0 0 rgba(255,160,60,.5);
}
.preview-foot .dot.live{
  background: #ffb257;
  box-shadow: 0 0 10px rgba(255,160,60,.9);
  animation: pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow: 0 0 8px rgba(255,160,60,.55); }
  50%    { box-shadow: 0 0 16px rgba(255,160,60,.95); }
}

/* ---------------- HUD ---------------- */
#hud{
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 30px 24px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity .8s ease;
}
#hud.on{ opacity: 1; }

#hud-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }

.brand{ display: flex; align-items: center; gap: 13px; }
.brand-mark{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 15px;
  color: var(--gold);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,180,80,.16), transparent 70%);
  text-shadow: 0 0 14px rgba(255,170,60,.8);
}
.brand h1{
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .34em;
  color: #f6ead2;
  text-shadow: 0 0 24px rgba(255,170,70,.35);
}
.brand .sub{
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--text-dim);
  text-transform: uppercase;
}
.brand .sep{ opacity: .5; margin: 0 4px; }

.hud-actions{ display: flex; gap: 9px; pointer-events: auto; }

.btn{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .1em;
  color: #f0e2c8;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,205,130,.14), rgba(255,180,90,.05));
  cursor: pointer;
  transition: border-color .25s, background .25s, transform .15s, color .25s;
  backdrop-filter: blur(8px);
}
.btn:hover{ border-color: rgba(255,200,120,.5); background: rgba(255,190,100,.16); color: #fff4e0; }
.btn:active{ transform: translateY(1px); }
.btn.ghost{ background: rgba(255,255,255,.03); color: var(--text-dim); }
.btn.ghost:hover{ color: #f0e2c8; }
.btn.icon{ width: 34px; height: 34px; padding: 0; display: grid; place-items: center; font-family: var(--mono); }
.btn.primary{
  background: linear-gradient(180deg, #ffcf82, #e09b3f);
  color: #241703;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 8px 30px rgba(224,155,63,.32), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.primary:hover{ background: linear-gradient(180deg, #ffdc9f, #f0aa4c); }
.btn.close{ margin-top: 16px; }

/* ---------------- bottom telemetry ---------------- */
#hud-bottom{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.telemetry{
  display: grid;
  grid-template-columns: auto auto;
  gap: 2px 26px;
  padding: 12px 16px;
  border-left: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(10,9,12,.55), transparent);
}
.tel{ display: flex; align-items: baseline; gap: 10px; font-size: 11px; }
.tel .k{
  font-family: var(--mono);
  letter-spacing: .18em;
  color: var(--text-dim);
  min-width: 30px;
}
.tel .v{ font-family: var(--mono); color: #f4e6cc; letter-spacing: .04em; }
.tel .v b{ font-weight: 500; }
.tel .v i{ font-style: normal; font-size: 9px; color: var(--text-dim); margin-left: 4px; }

.energy{ width: 268px; }
.energy-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--text-dim);
  margin-bottom: 7px;
}
.energy-head b{ font-size: 13px; font-weight: 500; color: var(--gold); letter-spacing: .06em; }
.energy-head b i{ font-style: normal; font-size: 9px; opacity: .6; margin-left: 1px; }

.energy-bar{
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}
.energy-bar #energy-fill{
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 2px;
  background: linear-gradient(90deg, #a8641f, var(--amber) 55%, #ffe3b0);
  box-shadow: 0 0 16px rgba(255,160,60,.75);
  transition: width .12s linear;
}
.energy-ticks{
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0 11px, rgba(0,0,0,.55) 11px 12px);
  opacity: .55;
}
.energy-hint{
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: rgba(255,190,110,.5);
  text-transform: uppercase;
  min-height: 12px;
}

/* ---------------- start overlay ---------------- */
#overlay{
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(60% 60% at 50% 46%, rgba(60,32,6,.55), transparent 70%),
    rgba(3,3,6,.82);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}
#overlay.show{ opacity: 1; pointer-events: auto; }

.ov-card{
  width: min(560px, 100%);
  text-align: center;
  padding: 6px;
}
.ov-sigil svg{ width: 92px; height: 92px; overflow: visible; }
.ov-sigil .s1{ fill:none; stroke: rgba(242,200,121,.75); stroke-width: 1; }
.ov-sigil .s2{ fill:none; stroke: rgba(242,200,121,.28); stroke-width: 1; stroke-dasharray: 2 5; }
.ov-sigil .s3{ fill:none; stroke: rgba(255,180,90,.35); stroke-width: .9; }
.ov-sigil .s4{ fill: rgba(255,220,160,.9); filter: drop-shadow(0 0 8px rgba(255,170,60,.9)); }
.ov-sigil svg{ animation: slowspin 46s linear infinite; }
@keyframes slowspin{ to{ transform: rotate(360deg); } }

.ov-card h2{
  margin: 14px 0 10px;
  font-size: clamp(19px, 2.4vw, 25px);
  font-weight: 500;
  letter-spacing: .06em;
  color: #fbf0dc;
}
.ov-card .lead{
  margin: 0 auto 22px;
  max-width: 430px;
  font-size: 13px;
  line-height: 1.75;
  color: #a89e8e;
}

.hints{ list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 9px; }
.hints li{
  display: flex;
  gap: 13px;
  text-align: left;
  padding: 12px 15px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: rgba(255,255,255,.017);
}
.hints li em{
  font-style: normal;
  color: var(--gold-dim);
  font-size: 13px;
  line-height: 1.5;
}
.hints li b{
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: #efe2c9;
  margin-bottom: 3px;
}
.hints li span{ font-size: 11.5px; line-height: 1.65; color: #948b7d; }

.ov-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ov-actions .btn{ padding: 11px 20px; font-size: 12.5px; }
.tiny{ margin: 16px 0 0; font-size: 10px; letter-spacing: .1em; color: #5d564c; }

/* ---------------- loading ---------------- */
#loading{
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(3,3,6,.88);
  backdrop-filter: blur(4px);
  transition: opacity .4s ease;
}
#loading.hide{ opacity: 0; pointer-events: none; }
.ld-inner{ text-align: center; }
.ld-ring{ position: relative; width: 62px; height: 62px; margin: 0 auto 18px; }
.ld-ring i{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: rgba(255,190,110,.9);
  animation: spin 1.5s cubic-bezier(.5,.1,.5,.9) infinite;
}
.ld-ring i:nth-child(2){ inset: 8px; border-top-color: rgba(255,150,60,.6); animation-duration: 2.1s; animation-direction: reverse; }
.ld-ring i:nth-child(3){ inset: 16px; border-top-color: rgba(255,230,190,.4); animation-duration: 2.8s; }
@keyframes spin{ to{ transform: rotate(360deg); } }
#loading p{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--text-dim); text-transform: uppercase; }

/* ---------------- help ---------------- */
#help{
  position: fixed;
  inset: 0;
  z-index: 35;
  display: grid;
  place-items: center;
  background: rgba(3,3,6,.7);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
#help.show{ opacity: 1; pointer-events: auto; }
.help-card{
  width: min(520px, calc(100% - 40px));
  padding: 26px 28px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(18,16,20,.96), rgba(9,8,11,.96));
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.help-card h3{ margin: 0 0 16px; font-size: 14px; letter-spacing: .22em; font-weight: 500; color: var(--gold); }
.help-card dl{ margin: 0; }
.help-card dt{ font-size: 12.5px; font-weight: 600; color: #f0e4cd; margin-top: 14px; letter-spacing: .05em; }
.help-card dd{ margin: 5px 0 0; font-size: 12px; line-height: 1.7; color: #948b7d; }
kbd{
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.05);
  color: #e6d7bd;
}

/* ---------------- toast ---------------- */
#toast{
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translate(-50%, 14px);
  z-index: 45;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(14,12,16,.86);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: .08em;
  color: #f4e7cf;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  box-shadow: 0 14px 40px rgba(0,0,0,.5), 0 0 30px rgba(255,170,70,.12);
}
#toast.on{ opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px){
  #hud{ padding: 16px 16px 14px; }
  .brand h1{ font-size: 12px; letter-spacing: .22em; }
  .brand .sub{ display: none; }
  #preview-wrap{ width: 132px; right: 14px; bottom: 128px; }
  .telemetry{ grid-template-columns: auto; gap: 1px; padding: 8px 10px; }
  .energy{ width: 150px; }
  .btn{ padding: 8px 12px; font-size: 11px; }
}