#saga { position: fixed; inset: 0; z-index: 84; display: none; background: #020814; color: #eef6ff; font-family: "DIN Condensed", "Arial Narrow", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif; user-select: none; touch-action: none; }
#saga.on { display: block; }
#sg-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#saga small { display: block; font-size: 9px; letter-spacing: .22em; color: #9fd8ff; }
.sg-hud { position: absolute; inset: 0; pointer-events: none; }
.sg-brand { position: absolute; left: max(14px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; gap: 10px; align-items: center; }
.sg-brand .flame { width: 26px; height: 36px; background: radial-gradient(circle at 50% 65%, #fff, #7ff4ff 35%, #7a4dff 75%); clip-path: path("M13 0 C26 16 26 27 13 36 C0 27 0 16 13 0 Z"); filter: drop-shadow(0 0 10px #8ad8ff); }
.sg-brand b { display: block; font-size: 18px; letter-spacing: .34em; color: #fff; text-shadow: 0 0 14px rgba(130,200,255,.9); }
.sg-obj { position: absolute; left: max(12px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 48px); width: min(360px, 58vw); padding: 10px 13px;
  background: linear-gradient(150deg, rgba(10,40,80,.84), rgba(6,14,40,.78)); border: 1px solid rgba(127,244,255,.4); box-shadow: 0 0 24px rgba(80,180,255,.22);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.sg-obj .h { display: flex; gap: 6px; align-items: center; } .sg-obj .h i { color: #ffd28a; font-style: normal; }
.sg-obj .h small { color: #ffd28a !important; }
.sg-obj b.g { display: block; margin-top: 4px; font-size: 15px; letter-spacing: .04em; color: #fff7e6; text-shadow: 0 0 10px rgba(140,220,255,.6); }
.sg-obj .d { font-size: 11px; color: #ffd28a; letter-spacing: .1em; }
.sg-list { margin-top: 6px; max-height: 32vh; overflow: hidden; }
.sg-list div { display: flex; align-items: center; gap: 7px; padding: 3px 0; font-size: 11.5px; color: #d8ecff; letter-spacing: .03em; border-top: 1px solid rgba(127,244,255,.12); }
.sg-list span { flex: none; width: 13px; height: 13px; display: grid; place-items: center; font-size: 9px; border: 1px solid rgba(127,244,255,.6); color: #021022; }
.sg-list .done span { background: #7dffc8; border-color: #7dffc8; } .sg-list .done { color: #9fffd8; }
.sg-list em { margin-left: auto; font-style: normal; font-size: 11px; color: #7ff4ff; white-space: nowrap; }
.sg-right { position: absolute; right: max(12px, env(safe-area-inset-right)); top: max(12px, env(safe-area-inset-top)); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 60vw; pointer-events: auto; }
.sg-tok { padding: 7px 10px; font-size: 14px; color: #ffd28a; background: rgba(4,14,36,.8); border: 1px solid rgba(255,210,138,.5); text-shadow: 0 0 10px rgba(255,200,120,.7); white-space: nowrap; }
.sg-chip, .sg-btn { cursor: pointer; padding: 9px 12px; font-family: inherit; font-weight: 700; font-size: 11px; letter-spacing: .14em; color: #eef6ff; background: rgba(4,16,40,.86); border: 1px solid rgba(127,220,255,.45);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.sg-btn { color: #021022; background: linear-gradient(150deg, #e6fbff, #7ff4ff); border-color: #e6fbff; box-shadow: 0 0 18px rgba(127,244,255,.45); padding: 12px 16px; font-size: 12px; }
.sg-btn.ghost { color: #eef6ff; background: rgba(4,16,40,.86); border-color: rgba(127,220,255,.45); box-shadow: none; }
.sg-btn.pink { background: linear-gradient(150deg, #ffe0f2, #ff8ac8); border-color: #ffe0f2; }
.sg-btn[disabled] { opacity: .4; pointer-events: none; }
.sg-arrow { position: absolute; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 62px)); font-size: 22px; color: #ffd28a; text-shadow: 0 0 12px #ffb04a; transform-origin: 50% 50%; }
.sg-depth { position: absolute; right: max(12px, env(safe-area-inset-right)); top: 34%; width: 44px; text-align: center; font-size: 10px; letter-spacing: .1em; color: #9fd8ff; }
.sg-depth .bar { position: relative; height: 150px; width: 6px; margin: 6px auto; background: linear-gradient(#7ff4ff, #0a3a7a 60%, #02081a); border-radius: 3px; }
.sg-depth .me, .sg-depth .tg { position: absolute; left: -7px; width: 20px; height: 3px; background: #fff; box-shadow: 0 0 8px #fff; }
.sg-depth .tg { background: #ffd28a; box-shadow: 0 0 8px #ffb04a; }
.sg-depth b { display: block; font-size: 13px; color: #fff; }
.sg-hp { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; gap: 12px; padding: 7px 12px; background: rgba(4,14,36,.78); border: 1px solid rgba(127,244,255,.4); font-size: 12px; letter-spacing: .12em; white-space: nowrap; }
.sg-hp b { color: #7ff4ff; font-size: 14px; } .sg-hp .h { color: #ff7aa8; } .sg-hp i { font-style: normal; opacity: .25; }
.sg-card { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: min(360px, calc(100vw - 24px)); max-height: 44vh; overflow-y: auto; padding: 11px 13px; pointer-events: auto;
  background: linear-gradient(160deg, rgba(10,36,76,.93), rgba(4,10,30,.93)); border: 1px solid rgba(127,244,255,.45); box-shadow: 0 0 30px rgba(80,160,255,.3); display: none;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); }
.sg-card.on { display: block; }
.sg-card b.t { font-size: 17px; letter-spacing: .05em; color: #fff; } .sg-card span.z { margin-left: 8px; font-size: 13px; color: #b8f0ff; }
.sg-card p { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: #d8ecff; font-family: "Helvetica Neue", "PingFang TC", sans-serif; }
.sg-card .sg-btn { margin-top: 9px; width: 100%; }
.sg-keys { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 10px; max-width: calc(100vw - 400px); padding: 7px 11px; background: rgba(4,14,36,.74); border: 1px solid rgba(127,220,255,.3); font-size: 10px; letter-spacing: .1em; color: #a8d0f0; pointer-events: auto; }
.sg-keys b { display: inline-block; padding: 2px 5px; margin-right: 3px; color: #fff; border: 1px solid rgba(127,244,255,.5); }
#saga.touch .sg-keys { display: none; }
.sg-call { position: absolute; left: 50%; top: 26%; transform: translateX(-50%); font-size: clamp(18px, 4vw, 36px); font-weight: 700; letter-spacing: .1em; color: #fff7e6; text-shadow: 0 0 14px #3ad0ff, 0 0 40px #2a8aff; white-space: nowrap; pointer-events: none; text-align: center; }
.sg-toast { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); padding: 8px 14px; font-size: 13px; letter-spacing: .08em; color: #fff; background: rgba(4,20,50,.86); border: 1px solid rgba(255,210,138,.6); opacity: 0; transition: opacity .25s; pointer-events: none; white-space: nowrap; }
.sg-toast.on { opacity: 1; }
.sg-modal { position: absolute; inset: 0; display: none; place-items: center; padding: 14px; background: rgba(2,6,18,.55); backdrop-filter: blur(3px); z-index: 5; overflow-y: auto; pointer-events: auto; }
.sg-modal.on { display: grid; }
.sg-mcard { width: min(560px, 100%); padding: 16px 18px; background: linear-gradient(160deg, rgba(12,40,90,.96), rgba(4,10,32,.97)); border: 1px solid rgba(127,244,255,.55); box-shadow: 0 0 44px rgba(80,160,255,.45);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.sg-mcard.wide { width: min(820px, 100%); }
.sg-mcard h3 { margin: 6px 0; font-size: 21px; letter-spacing: .06em; color: #fff; text-shadow: 0 0 16px rgba(127,220,255,.7); }
.sg-mcard p, .sg-mcard li { font-size: 13.5px; line-height: 1.55; color: #d8ecff; font-family: "Helvetica Neue", "PingFang TC", sans-serif; }
.sg-mcard p b { color: #ffd28a; } .sg-mcard .dim { font-size: 11.5px; opacity: .72; }
.sg-mbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.sg-opt { cursor: pointer; padding: 9px 10px; background: rgba(6,24,56,.8); border: 1px solid rgba(127,220,255,.3); font-family: "Helvetica Neue", "PingFang TC", sans-serif; font-size: 12px; color: #d8ecff; text-align: left; line-height: 1.4; }
.sg-opt b { display: block; font-family: "DIN Condensed", "Arial Narrow", sans-serif; font-size: 14px; letter-spacing: .06em; color: #fff; }
.sg-opt.sel { border-color: #ffd28a; box-shadow: 0 0 14px rgba(255,200,120,.45); background: rgba(40,30,20,.6); }
.sg-opt.bad { animation: sgshake .35s; border-color: #ff6a8a; }
.sg-opt[disabled] { opacity: .35; pointer-events: none; }
@keyframes sgshake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.sg-tbl { width: 100%; border-collapse: collapse; font-size: 12px; font-family: "Helvetica Neue", "PingFang TC", sans-serif; margin: 6px 0; }
.sg-tbl td, .sg-tbl th { padding: 4px 6px; border-bottom: 1px solid rgba(127,220,255,.15); text-align: left; color: #d8ecff; }
.sg-tbl th { font-size: 10px; letter-spacing: .14em; color: #9fd8ff; font-weight: 600; }
.sg-tbl td.n { text-align: right; font-variant-numeric: tabular-nums; }
.sg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.sg-row > small { width: 100%; }
.sg-pill { cursor: pointer; padding: 6px 9px; font-family: inherit; font-size: 12px; letter-spacing: .06em; color: #d8ecff; background: rgba(6,24,56,.8); border: 1px solid rgba(127,220,255,.3); }
.sg-pill.sel { border-color: #ffd28a; color: #fff; background: rgba(60,44,20,.7); }
.sg-craft { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
.sg-prev { width: 220px; height: 220px; background: radial-gradient(circle, #10305e, #020814 70%); border: 1px solid rgba(127,220,255,.3); }
.sg-bar { position: relative; height: 22px; background: rgba(6,24,56,.9); border: 1px solid rgba(127,220,255,.35); margin: 8px 0; overflow: hidden; }
.sg-bar .z { position: absolute; top: 0; bottom: 0; background: rgba(255,210,138,.45); }
.sg-bar .n { position: absolute; top: -2px; bottom: -2px; width: 4px; background: #fff; box-shadow: 0 0 8px #fff; }
.sg-meter { height: 6px; background: rgba(255,255,255,.1); margin-top: 3px; } .sg-meter u { display: block; height: 100%; background: linear-gradient(90deg, #7ff4ff, #ffd28a); }
.sg-lanes { position: absolute; left: 50%; bottom: max(90px, calc(env(safe-area-inset-bottom) + 84px)); transform: translateX(-50%); display: none; gap: 14px; }
.sg-lanes.on { display: flex; }
.sg-lanes div { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(127,244,255,.6); display: grid; place-items: center; font-size: 22px; color: #fff; background: rgba(4,20,50,.5); }
.sg-lanes div.hit { background: rgba(127,244,255,.55); box-shadow: 0 0 26px #7ff4ff; }
.sg-touch { position: absolute; inset: 0; pointer-events: none; display: none; }
#saga.touch .sg-touch { display: block; }
.sg-stick { position: absolute; left: 0; bottom: 0; width: 50%; height: 48%; pointer-events: auto; }
.sg-stick .base { position: absolute; display: none; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 1px solid rgba(127,244,255,.4); background: rgba(6,30,70,.3); }
.sg-stick .knob { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(220,250,255,.75), rgba(127,244,255,.35)); }
.sg-tb { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 64px 64px; gap: 10px; pointer-events: none; }
.sg-tb button { pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; font-family: inherit; font-weight: 700; font-size: 11px; letter-spacing: .08em; color: #fff; background: rgba(6,30,70,.6); border: 1px solid rgba(127,244,255,.55); }
.sg-tb button.main { background: linear-gradient(150deg, rgba(230,251,255,.9), rgba(127,244,255,.8)); color: #021022; }
.sg-tb button[hidden] { display: none; }
#saga.touch .sg-card { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 150px); max-height: 30vh; }
.sg-skip { position: absolute; right: max(14px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: none; pointer-events: auto; z-index: 4; }
.sg-skip.on { display: block; }
.sg-sub { position: absolute; left: 50%; bottom: 16%; transform: translateX(-50%); width: min(720px, 92vw); text-align: center; font-family: "Helvetica Neue", "PingFang TC", sans-serif; font-size: clamp(14px, 2.2vw, 19px); line-height: 1.5; color: #fff; text-shadow: 0 0 10px #000, 0 0 20px #0a2a5a; pointer-events: none; }
#saga.hitfx #sg-canvas { animation: sghit .35s ease; }
@keyframes sghit { 30% { filter: saturate(2) hue-rotate(-40deg) brightness(1.4); transform: translateX(6px); } 60% { transform: translateX(-4px); } }
#saga.cine .sg-obj, #saga.cine .sg-right, #saga.cine .sg-depth, #saga.cine .sg-arrow, #saga.cine .sg-keys, #saga.cine .sg-card, #saga.cine .sg-touch, #saga.cine .sg-hp { display: none !important; }
#saga.play .sg-obj, #saga.play .sg-depth, #saga.play .sg-arrow, #saga.play .sg-card { display: none !important; }
.sg-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .6s; }
.sg-flash.on { opacity: .85; transition: opacity .12s; }
@media (max-width: 640px) {
  .sg-obj { width: calc(100vw - 24px); top: calc(max(10px, env(safe-area-inset-top)) + 96px); padding: 7px 10px; }
  .sg-obj b.g { font-size: 13px; } .sg-list div { font-size: 10.5px; padding: 2px 0; }
  .sg-brand small { display: none !important; }
  .sg-list { max-height: 13vh; overflow-y: auto; }
  .sg-right { max-width: 50vw; } .sg-brand b { font-size: 14px; }
  .sg-craft { grid-template-columns: 1fr; } .sg-prev { width: 100%; height: 170px; }
  .sg-depth { top: 46%; }
  .sg-arrow { top: 40%; }
  .sg-hp { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 150px); font-size: 11px; gap: 8px; }
  .sg-lanes div { width: 56px; height: 56px; }
}
@media (max-height: 480px) { .sg-list { display: none; } .sg-obj { width: min(300px, 46vw); } }