/* Bioforge — medical instrumentation, ceramic units and living tissue. */
:root { --ink: #071219; --panel: #10202b; --line: #89bfd325; --text: #e9f3f6; --muted: #93aab5; --mint: #a0f5de; --cyan: #74daef; }
body { color: var(--text); background: var(--ink); }
button, input, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.overlay { background: #07121aec; backdrop-filter: blur(12px); gap: 14px; }
.overlay h1 { font-size: clamp(28px, 4vw, 46px); letter-spacing: 2px; text-shadow: none; }
.overlay button { min-width: min(280px, 85vw); border: 1px solid #739fb344; border-radius: 6px; background: #132631; font-family: 'Do Hyeon', system-ui, sans-serif; transition: background .18s, border-color .18s; }
.overlay button:hover { border-color: var(--mint); background: #1b3440; box-shadow: none; }
.overlay button:active { transform: translateY(1px); }
.sub { color: var(--muted); }
#start { display: block; padding: 24px max(24px, calc((100vw - 1120px) / 2)); background: linear-gradient(110deg,#07141af5,#0b1822ea); }
#start > :first-child, #start > :last-child { margin-top: 0; margin-bottom: 0; }
.deployment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 20px; }
.brand-lockup { text-decoration: none; }
#start h1 { font-size: clamp(28px, 3.5vw, 45px); color: #ecf8f8; background: none; filter: none; animation: none; letter-spacing: 3px; }
#start h1 span { color: var(--mint); }
#start .tagline { margin-top: 5px; font: 10px 'Share Tech Mono', monospace; letter-spacing: 3.5px; color: var(--muted); }
.patient-status { display: flex; align-items: center; gap: 12px; font: 12px 'Share Tech Mono', monospace; color: var(--muted); }
.patient-status i { width: 7px; height: 7px; background: #ffa07b; box-shadow: 0 0 12px #ff9c6f55; border-radius: 50%; }
.patient-status strong { color: #ffc4a5; font-weight: 400; }
.deploy-shell { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(340px,1fr); gap: 24px; align-items: stretch; }
.unit-panel, .mission-panel { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #0c1b2580; min-width: 0; }
.panel-label { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.panel-label span { color: var(--cyan); font: 10px 'Share Tech Mono', monospace; letter-spacing: 1.5px; }
#shiprow { width: 100%; gap: 9px; }
#shiprow button { position: relative; padding: 8px 7px 12px; gap: 3px; background: #132530; border-color: #638fa52b; border-radius: 7px; overflow: hidden; }
#shiprow button.sel { background: linear-gradient(160deg,#20404d,#132934); border-color: var(--c); box-shadow: inset 0 2px var(--c); }
#shiprow button.sel::after { content: '선택됨'; position: absolute; top: 9px; right: 8px; font: 10px 'Do Hyeon'; color: var(--c); }
#shiprow button::before { content: attr(data-unit); position: absolute; top: 10px; left: 9px; font: 10px 'Share Tech Mono'; letter-spacing: 1px; color: #819ea9; }
#shiprow button.locked { filter: none; background: #101e28; }
#shiprow button.locked canvas { opacity: .7; filter: saturate(.6); }
#shiprow button.locked::after { content: '잠금'; position: absolute; top: 9px; right: 9px; color: #8ca2ad; font-size: 10px; }
#shiprow canvas.sprev { width: min(150px,100%); height: 91px; background: radial-gradient(ellipse at center,#45677930,transparent 70%); filter: none; border-radius: 0; }
#shiprow .sname { font-size: 16px; letter-spacing: 1px; opacity: 1 !important; }
#shiprow .sstat { display: flex; gap: 7px; font-size: 10px; opacity: .8 !important; color: #bdd1da; margin-top: 5px; }
.stat-pair { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-pair i { font-style: normal; font-size: 8px; color: var(--c); letter-spacing: -1px; }
#shiprow .sweap, #shiprow .sskill { display: none; }
.unit-detail { display: flex; flex-direction: column; gap: 5px; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--line); min-height: 40px; }
.unit-detail b { color: var(--mint); font-size: 16px; font-weight: 400; }
.unit-detail span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.mission-panel { display: flex; flex-direction: column; }
.mission-title { font-size: 28px; font-weight: 400; margin: 0 0 7px; }
.mission-copy { margin: 0 0 18px; color: var(--muted); line-height: 1.6; font-size: 14px; }
#setup { width: 100%; margin: 0; gap: 13px; padding: 0; border: 0; background: none; }
#setup .setrow { display: block; }
#setup .setlabel { display: block; width: auto; font-size: 11px; color: #abc0ca; letter-spacing: 1px; margin-bottom: 6px; text-align: left; }
#moderow, #sectorrow, #diffrow { display: flex; gap: 5px; flex-wrap: wrap; }
#setup button { flex: 1; min-width: 0; white-space: nowrap; padding: 8px 9px; font-size: 13px; border-radius: 4px; border-color: #7794a32b; background: #12232e; }
#setup button.sel { color: var(--mint); background: #21423f; border-color: #94edd882; box-shadow: none; }
#setup button.locked { opacity: .55; filter: none; }
#setup .sethint { display: flex; flex-direction: column; font-size: 12px; line-height: 1.5; color: var(--muted); margin: 10px 0 14px; gap: 2px; }
#modehint, #sectorhint, #diffhint { font: 12px/1.5 'Do Hyeon', system-ui; color: var(--muted); letter-spacing: 0; }
#dailyinfo { text-align: left; }
#startbtn { width: 100%; min-width: 0; margin-top: auto; padding: 15px; border: 0; border-radius: 5px; background: var(--mint); color: #0c2e2d; font-size: 18px; animation: none; letter-spacing: 1px; }
#startbtn:hover { background: #c0ffed; box-shadow: 0 4px 26px #9df5de20; }
#dailycard { width: 100%; padding: 12px 0 0; margin: 11px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; gap: 10px; }
#dailycard .btitle2 { font: 13px 'Do Hyeon'; color: #c7dbde; letter-spacing: 0; }
#dailycard .sub, #loginbonus { font-size: 11px; color: var(--muted); line-height: 1.5; }
#dailybtn { padding: 8px 14px !important; }
.deployment-footer { padding-top: 15px; }
#pilotrow { width: 100%; justify-content: flex-start; gap: 8px; }
#nameinput { width: 180px; padding: 9px 12px; font: 12px 'Do Hyeon'; text-align: left; border-color: var(--line); background: #11232e; border-radius: 4px; color: var(--text); }
#pilotrow button { padding: 9px 12px !important; background: transparent; border-color: var(--line); font-size: 12px !important; border-radius: 4px; }
#ctrlhint { max-width: none; width: 100%; text-align: left; font-size: 11px; line-height: 1.7; color: #88a1ae; margin: 10px 0 !important; }
#best { font: 11px 'Share Tech Mono'; color: #d6bd8f; letter-spacing: 0; }
.records { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.records summary { cursor: pointer; color: var(--muted); font-size: 12px; }
#titleboard { position: static; transform: none; width: 100%; max-height: 300px; margin-top: 15px; }
#titleboard .btitle { font-size: 11px; }
#hud { position: fixed; inset: 0; z-index: 3; font-family: 'Do Hyeon', system-ui; pointer-events: none; }
.vitals-panel, .mission-clock, .combat-score { position: absolute; top: max(22px, env(safe-area-inset-top)); background: #07151bda; border: 1px solid #8bbaca35; border-radius: 7px; backdrop-filter: blur(10px); }
.vitals-panel { left: 22px; padding: 14px 16px; width: 220px; }
.vital-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 9px; }
.vital-label b { font-weight: 400; color: #dcf4fa; }
#hpvalue { font: 12px 'Share Tech Mono',monospace; color: #b0dacc; }
#hud .bar { width: 100%; height: 6px; margin: 5px 0 9px; border-radius: 2px; background: #30404a; }
#hpfill { background: linear-gradient(90deg,#57bba9,#bcffe1); }
#hud.critical #hpfill { background: #ff946f; }
#hud.critical .vitals-panel { border-color: #ff8968; }
.xp-label { display: flex; justify-content: space-between; font: 10px 'Share Tech Mono'; color: var(--muted); margin-top: 11px; }
#hud .xpbar { height: 3px; margin-bottom: 0; }
#xpfill { background: #7cc5f4; }
.mission-clock { left: 50%; transform: translateX(-50%); padding: 12px 22px; text-align: center; width: 232px; }
#hudsector { font: 9px 'Share Tech Mono'; color: var(--biome-color); letter-spacing: 2px; }
#hudtime { font: 32px/1.3 'Share Tech Mono', monospace; color: #effbff; letter-spacing: 3px; font-variant-numeric: tabular-nums; }
#hudphase { font-size: 11px; color: #abc5ce; }
.mission-track { height: 2px; background: #44606b; margin: 10px 0 0; position: relative; }
#missionfill { height: 100%; background: var(--mint); width: 0; }
.mission-track i { position: absolute; width: 4px; height: 4px; border: 1px solid #b2c2c7; background: #14313c; top: -2px; transform: rotate(45deg); }
.mission-track i:nth-of-type(1) { left: 33.33%; }.mission-track i:nth-of-type(2) { left: 66.66%; }.mission-track i:nth-of-type(3) { right: 0; }
#hudobjective { position: absolute; width: 300px; left: 50%; top: 125px; transform: translateX(-50%); text-align: center; font-size: 11px; color: #d2dfe4; text-shadow: 0 1px 5px #000; }
.combat-score { right: 78px; display: flex; padding: 13px 17px; gap: 24px; }
.combat-score div { display: flex; flex-direction: column; gap: 6px; }
.combat-score small { font: 9px 'Share Tech Mono'; letter-spacing: 1px; color: var(--muted); }
.combat-score b { font: 20px 'Share Tech Mono'; color: #edfafc; }
.combat-score div:last-child b { color: #eed1a0; }
#hudcombo { position: absolute; right: 30px; top: 112px; font: 19px 'Share Tech Mono'; color: #ffe0ac; text-shadow: 0 2px 12px #000; }
.combat-bottom { position: absolute; bottom: max(22px,env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; gap: 12px; }
#loadout { display: flex; padding: 7px; gap: 5px; background: #07151be8; border: 1px solid #83b8c332; border-radius: 8px; }
.weapon-slot { display: flex; gap: 9px; align-items: center; min-width: 92px; padding: 5px 9px; border-right: 1px solid var(--line); color: var(--weapon-color,#9ee6e4); }
.weapon-slot:last-child { border: 0; }
.weapon-symbol { font: 28px/1 system-ui; min-width: 24px; text-align: center; }
.weapon-slot b { display: block; font-size: 12px; font-weight: 400; color: #dfeef2; white-space: nowrap; }
.weapon-slot small { display: block; font-size: 9px; margin-top: 5px; }
.weapon-slot.empty { min-width: 58px; flex-direction: column; gap: 0; color: #68828e; }
.weapon-slot.empty .weapon-symbol { font-size: 21px; }
.primary-slot { min-width: 132px; }
.primary-slot small { color: var(--muted); }
#dashbtn { pointer-events: auto; touch-action: manipulation; position: relative; overflow: hidden; min-width: 100px; padding: 10px 16px; border: 1px solid #6b8b9555; background: #102b34eb; color: #9fb6bf; border-radius: 8px; cursor: pointer; }
#dashbtn::after { content:''; position:absolute; bottom:0; left:0; width:var(--charge); height:3px; background:var(--mint); }
#dashbtn.ready { border-color: #9eeed9a0; color: var(--mint); }
#dashstatus { display: block; font: 14px 'Do Hyeon'; white-space: nowrap; }
#dashbtn small { font: 9px 'Share Tech Mono'; letter-spacing: 2px; display: block; margin-top: 5px; }
#pausebtn { z-index: 5; top: max(22px,env(safe-area-inset-top)); right: 22px; height: 38px; width: 38px; border-radius: 6px; background: #07151bda; border-color: #8bbaca35; font-size: 15px; }
#bossbar { z-index: 3; top: 167px; width: min(440px,60vw); height: 8px; border-radius: 2px; background: #21151d; }
#bosslabel { z-index: 3; top: 148px; font: 12px 'Do Hyeon'; color: #ffb3a7; letter-spacing: .5px; text-align: center; white-space: nowrap; }
#toasts { top: 25%; max-width: 90vw; width: max-content; }
.toast, .toast.gold { font: 16px/1.6 'Do Hyeon'; text-align: center; letter-spacing: .5px; color: #e4f6f5; background: #112833e8; border: 1px solid #84aab44d; border-radius: 5px; padding: 8px 18px; text-shadow: none; white-space: normal; }
.toast.gold { color: #ffe0a3; border-color: #cfb78066; }
#dmglayer span { font: 13px 'Share Tech Mono'; color: #f2fff9; text-shadow: 0 1px 3px #051114; }
#dmglayer span.crit { font-size: 19px; color: #ffe0a3; text-shadow: 0 2px 3px #051114; }
#lvltitle { background: none; color: var(--mint); filter: none; font-size: clamp(28px,5vw,44px); }
#choices { width: min(700px,92vw); gap: 8px !important; }
#choices button { width: 100%; align-items: flex-start; text-align: left; padding: 16px 22px 16px 64px; position: relative; background: #132631; border-color: #739fb344; border-radius: 5px; box-shadow: none; }
#choices button::before { content: attr(data-key); position: absolute; left: 20px; top: 22px; color: var(--mint); font: 21px 'Share Tech Mono'; }
#choices .uname { font: 17px 'Do Hyeon'; color: #edf9fa; text-shadow: none !important; }
#choices .udesc { font-size: 13px; opacity: 1; color: #a9c2cc; }
#choices button.new-weapon { border-left: 3px solid #86dec9; }
#choices button.new-module { border-left: 3px solid #bcb0f0; }
#choices button.special { border-left: 3px solid #f2cf8b; background: #30291d; }
#choices .pip { height: 3px; width: 20px; border-radius: 0; }
#choices .pip.on { background: var(--mint); box-shadow: none; }
#choices .pip.next { background: #f2cf8b; box-shadow: none; }
.upgrade-kicker { font: 11px 'Share Tech Mono'; color: var(--muted); letter-spacing: 3px; }
.upgrade-help { color: var(--muted); font-size: 12px; }
#deploybtn, #tutok, #resumebtn { background: var(--mint); color: #0b2e2b; border-color: var(--mint); animation: none; }
#brieftext { color: #bce6dc; text-shadow: none; }
#tutorial { background: #07141aef; }
.tutrow { background: #10232e; border-color: var(--line); }
.tutrow b { color: var(--mint); }
@media (min-width: 1500px) { #start { padding-top: max(28px,calc((100vh - 750px)/2)); } }
@media (max-width: 960px) {
  #start { padding: 20px; }.deploy-shell { grid-template-columns: 1fr; max-width: 650px; margin: auto; }.deployment-header,.deployment-footer { max-width: 650px; margin-inline: auto; }
  .patient-status { display: none; }.mission-panel { padding: 20px; }.mission-title { font-size: 25px; }
  #shiprow canvas.sprev { height: 98px; }.unit-detail { min-height: 0; }#startbtn { margin-top: 6px; }
  .weapon-slot { min-width: 0; padding: 5px 8px; }.weapon-slot b { display: none; }.weapon-slot.empty { min-width: 20px; }.weapon-slot.empty small { display: none; }.primary-slot { min-width: 0; }.primary-slot small { display: none; }
}
@media (max-width: 600px) {
  #start { padding: 20px 12px; }.deployment-header { margin-bottom: 18px; }#start h1 { font-size: 29px; }#start .tagline { letter-spacing: 2px; font-size: 9px; }
  .unit-panel,.mission-panel { padding: 14px; }.deploy-shell { gap: 14px; }#shiprow { gap: 6px; }#shiprow button { padding: 8px 4px 10px; }#shiprow canvas.sprev { height: 77px; }
  #shiprow .sname { font-size: 14px; }#shiprow .sstat { gap: 4px; font-size: 9px; }.stat-pair i { font-size: 7px; }#shiprow button::before { font-size: 8px; left: 6px; }#shiprow button.sel::after,#shiprow button.locked::after { font-size: 9px; right: 6px; }
  #nameinput { width: 145px; }#pilotrow button { font-size: 11px !important; }#ctrlhint { font-size: 10px; }
  .vitals-panel { top: 12px; left: 10px; width: 125px; padding: 10px; }.vital-label { font-size: 11px; margin-bottom: 5px; }#hpvalue { font-size: 10px; }.xp-label { margin-top: 7px; font-size: 9px; }
  .mission-clock { top: 12px; left: auto; right: 53px; transform: none; width: 118px; padding: 9px 10px; }#hudtime { font-size: 25px; }#hudsector { font-size: 7px; letter-spacing: .6px; }#hudphase { font-size: 9px; }.mission-track { margin-top: 7px; }
  .combat-score { top: 106px; left: 10px; right: auto; padding: 6px 10px; gap: 18px; background: #07151bb0; }.combat-score div { flex-direction: row; align-items: center; gap: 8px; }.combat-score small { font-size: 8px; }.combat-score b { font-size: 13px; }
  #pausebtn { top: 12px; right: 10px; width: 33px; height: 33px; }#hudobjective { top: 104px; left: auto; right: 10px; width: 175px; transform: none; text-align: right; font-size: 9px; }
  #hudcombo { top: 132px; right: 12px; font-size: 15px; }#bossbar { top: 166px; width: 75vw; }#bosslabel { top: 148px; font-size: 11px; }
  .combat-bottom { left: 10px; right: 10px; transform: none; bottom: max(12px,env(safe-area-inset-bottom)); justify-content: space-between; gap: 7px; }#loadout { padding: 5px; gap: 0; }.weapon-symbol { font-size: 22px; min-width: 16px; }.weapon-slot { padding: 4px 7px; flex-direction: column; gap: 0; }.weapon-slot small { font-size: 7px; }.weapon-slot.empty { padding-inline: 5px; }
  #dashbtn { min-width: 76px; padding: 10px; }#dashstatus { font-size: 13px; }#dashbtn small { font-size: 8px; }
  #toasts { top: 28%; }.toast,.toast.gold { font-size: 13px; padding: 6px 12px; }
  #choices button { padding: 13px 14px 13px 48px; }#choices button::before { left: 16px; top: 17px; }#choices .uname { font-size: 15px; }#choices .udesc { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (max-width:360px) { .vitals-panel { width:110px; }.mission-clock { width:99px; right:50px; }#hudunit { font-size:10px; }#hpvalue { font-size:9px; }#hudobjective { width:145px; font-size:8px; } }