:root{
  --bg:#12142a; --card:#1c1f3d; --card2:#242851; --ink:#f3f4ff; --mute:#a9aed6;
  --tier:#8fa4d8; --tier2:#5b74c4;
  --ok:#37d67a; --bad:#ff5d6c; --warn:#ffb020; --gold:#ffd54a; --acc:#7c6cff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 50% -200px,#2a2670,transparent),var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR",sans-serif;line-height:1.45}
.wrap{max-width:560px;margin:0 auto;padding:12px 12px calc(40px + env(safe-area-inset-bottom))}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:8px 2px}
h1{margin:0;font-size:1.5rem;letter-spacing:-.02em}
h2{margin:0 0 10px;font-size:1.05rem}
.sub{margin:2px 0 0;color:var(--mute);font-size:.92rem}
.card{background:var(--card);border-radius:18px;padding:14px;margin:12px 0;box-shadow:0 6px 24px #0005}
button{font:inherit;color:inherit;border:0;border-radius:12px;padding:10px 14px;cursor:pointer;background:var(--card2);min-height:44px}
button:disabled{opacity:.5;cursor:not-allowed}
button.primary{background:var(--acc);font-weight:700}
button.ghost{background:transparent;border:1px solid #4b4f86}
button.small{min-height:34px;padding:6px 10px;font-size:.85rem}
.row{display:flex;gap:8px;margin-top:10px;align-items:center}
.row.wrapbtn{flex-wrap:wrap}
.sharebtns{display:grid;gap:8px;margin-top:10px}
.sharebtns button{width:100%;border-radius:14px;font-weight:800;line-height:1.25}
.sharebtns small,.spshare small,.spimg small{word-break:keep-all;display:block;font-size:.72rem;font-weight:600;opacity:.85;margin-top:2px;line-height:1.25}
.bigshare{min-height:62px;font-size:1.1rem;font-weight:900!important;box-shadow:0 4px 0 #4a3dc4}
.bigshare:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #4a3dc4}
.sharealt{min-height:52px}
.sharealt small{color:var(--mute);opacity:1}
.sharecopy{min-height:44px}
input,select{font:inherit;color:var(--ink);background:#10122a;border:1px solid #3d4180;border-radius:10px;padding:8px 10px;width:100%;min-height:40px}
label{display:block;font-size:.85rem;color:var(--mute)}
label input,label select{margin-top:4px;color:var(--ink)}
label.check{display:flex;gap:8px;align-items:center;color:var(--ink);margin-top:8px}
label.check input{width:auto;min-height:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
fieldset{border:1px solid #3d4180;border-radius:12px;margin:10px 0;padding:8px 10px}
legend{padding:0 6px;color:var(--mute);font-size:.82rem}
summary{cursor:pointer;color:var(--mute);margin:6px 0}
.help{margin:0 0 8px;color:var(--mute);font-size:.85rem}

/* 무대 */
.stage{text-align:center}
.presetbar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.presetbar button{min-height:34px;padding:5px 10px;font-size:.82rem;border:1px solid #3d4180;background:transparent}
.presetbar button.on{background:var(--acc);border-color:var(--acc);font-weight:700}
.stage[data-tier="0"]{--tier:#9fb2e6;--tier2:#5b74c4}   /* +0~+4  회색/파랑 */
.stage[data-tier="1"]{--tier:#5ee0a0;--tier2:#b78cff}   /* +5~+9  초록/보라 */
.stage[data-tier="2"]{--tier:#ff7a45;--tier2:#ff3d55}   /* +10~+12 빨강/주황 */
.stage[data-tier="3"]{--tier:#ffd54a;--tier2:#ff9f1a}   /* +13~+15 금색 */
.weaponwrap{position:relative;width:min(78vw,300px);margin:30px auto 8px}
.weaponbox{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:24px;
  background:radial-gradient(circle at 50% 50%,#10285c 0%,#07143a 85%);border:2px solid var(--tier);box-shadow:0 0 0 1px #0007,0 0 22px color-mix(in srgb,var(--tier) 45%,transparent),inset 0 0 28px #0008;transition:border-color .25s,box-shadow .25s}
.weaponbox img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2;user-select:none;-webkit-user-drag:none}
.lvl{position:absolute;left:50%;top:-18px;transform:translateX(-50%);z-index:3;min-width:4.2em;text-align:center;background:#0d0f22;border:3px solid var(--tier);border-radius:999px;padding:2px 16px;font-weight:900;font-size:1.5rem;line-height:1.35;color:var(--tier);
  box-shadow:0 0 14px color-mix(in srgb,var(--tier) 55%,transparent);transition:color .25s,border-color .25s}
.stage[data-tier="3"] .lvl{background:linear-gradient(180deg,#2a2208,#0d0f22)}
.burst{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none}
.result{min-height:1.8em;line-height:1.8em;font-size:1.25rem;font-weight:800}
.result.success{color:var(--ok)} .result.keep{color:var(--mute)} .result.drop{color:var(--warn)} .result.destroy{color:var(--bad)}
.odds{color:var(--mute);font-size:.9rem;margin:2px 0 10px;min-height:2.9em;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0 .4em}
.odds b{color:var(--ink)}
.bigbtn{width:100%;min-height:72px;font-size:1.7rem;font-weight:900;background:linear-gradient(180deg,#ffd54a,#ff9f1a);color:#2a1a00;box-shadow:0 6px 0 #b86a00,0 10px 20px #0006;border-radius:18px;letter-spacing:.1em;touch-action:manipulation}
.bigbtn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 #b86a00}
.warn{margin-top:10px;background:#3a2a10;border:1px solid var(--warn);color:#ffd9a0;border-radius:12px;padding:8px 10px;font-size:.88rem}

/* 애니메이션 (CSS만) */
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.18) rotate(-3deg)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px) rotate(-3deg)}40%{transform:translateX(9px) rotate(3deg)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes sink{0%{transform:translateY(0)}40%{transform:translateY(14px) scale(.94)}100%{transform:translateY(0)}}
@keyframes shatter{0%{transform:scale(1);filter:none;opacity:1}30%{transform:scale(1.15) rotate(6deg);filter:brightness(2.2) saturate(0)}100%{transform:scale(.2) rotate(40deg);filter:brightness(.4);opacity:0}}
@keyframes rebirth{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes flash{0%{opacity:.95;transform:scale(.6)}100%{opacity:0;transform:scale(1.15)}}
.weaponbox.success img{animation:pop .5s ease-out}
.weaponbox.success .burst{background:radial-gradient(circle,#ffffffcc,color-mix(in srgb,var(--tier) 60%,transparent) 45%,transparent 72%);animation:flash .6s ease-out}
.weaponbox.keep img{animation:shake .35s}
.weaponbox.drop img{animation:sink .5s}
.weaponbox.drop .burst{background:radial-gradient(circle,#ffb020aa,transparent 68%);animation:flash .5s ease-out}
.weaponbox.destroy img{animation:shatter .6s ease-in forwards}
.weaponbox.destroy .burst{background:radial-gradient(circle,#ff5d6cbb,transparent 68%);animation:flash .7s ease-out}
.weaponbox.rebirth img{animation:rebirth .4s ease-out}
.weaponbox.max img{animation:pop .8s ease-out 2}
@media (prefers-reduced-motion:reduce){.weaponbox img,.weaponbox .burst{animation:none!important} *{transition:none!important;scroll-behavior:auto!important}}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.stats div{background:var(--card2);border-radius:12px;padding:8px 4px}
.stats span{display:block;font-size:.72rem;color:var(--mute)}
.stats b{font-size:1.15rem}

.log{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto;font-size:.88rem;font-variant-numeric:tabular-nums}
.log li{padding:4px 2px;border-bottom:1px solid #2c3068;display:flex;gap:8px}
.log .n{color:var(--mute);min-width:3.2em}
.log .success{color:var(--ok)} .log .drop{color:var(--warn)} .log .destroy{color:var(--bad)} .log .keep{color:var(--mute)}

.msg{min-height:1.2em;color:var(--ok);font-size:.88rem;margin-top:6px}
.cta{margin-top:10px;border:1px dashed #5a5fa8;border-radius:14px;padding:12px;background:#171a38}
.cta h3{margin:0 0 4px;font-size:1rem}
.cta p{margin:4px 0;color:var(--mute);font-size:.88rem}
.cta a.btn{display:inline-block;margin:6px 6px 0 0;padding:8px 12px;background:var(--acc);border-radius:10px;color:#fff;text-decoration:none;font-weight:700}
.cta .disc{font-size:.75rem;color:#8e93c5}

/* 표 */
.tablewrap{overflow-x:auto;margin:8px -4px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.84rem;font-variant-numeric:tabular-nums}
th,td{padding:4px 4px;text-align:center;border-bottom:1px solid #2c3068;white-space:nowrap}
th{color:var(--mute);font-weight:600;position:sticky;top:0;background:var(--card)}
td input{width:5.4em;min-height:34px;padding:4px 6px;text-align:right}
td input.cost{width:5em}
tr.cur td{background:#2b2f66}
td.sum.bad{color:var(--bad);font-weight:800}
td.sum.ok{color:var(--ok)}
.tag{font-size:.7rem;padding:1px 6px;border-radius:999px;border:1px solid #4b4f86}
.tag.secondary{color:#7fd0ff;border-color:#7fd0ff} .tag.real{color:var(--ok);border-color:var(--ok)} .tag.unverified{color:var(--warn);border-color:var(--warn)} .tag.adapted{color:var(--mute)} .tag.custom{color:var(--gold);border-color:var(--gold)}

/* 시뮬 */
#simOut{margin-top:10px}
.bars{display:flex;align-items:flex-end;gap:3px;height:150px;margin:8px 0 2px}
.bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.bars .bar{width:100%;background:linear-gradient(180deg,var(--gold),#ff9f1a);border-radius:4px 4px 0 0;min-height:1px}
.bars .pct{font-size:.66rem;color:var(--mute);height:1.2em}
.axis{display:flex;gap:3px;font-size:.7rem;color:var(--mute);text-align:center}
.axis span{flex:1}
.simstats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;font-size:.82rem;text-align:center}
.simstats div{background:var(--card2);border-radius:10px;padding:6px 2px}
.simstats b{display:block;font-size:1rem}

.foot{color:var(--mute);font-size:.8rem;padding:4px 6px}
.foot .mini{font-size:.72rem}
.foot a{color:#b7bcff}
[hidden]{display:none!important}

.note{background:#171a38;border:1px solid #3d4180;border-radius:12px;padding:8px 10px;margin:0 0 8px;font-size:.84rem;color:var(--mute)}
.note b{color:var(--ink)} .note p{margin:4px 0 0}
.legend ul{list-style:none;margin:6px 0;padding:0;font-size:.82rem;color:var(--mute)}
.legend li{margin:5px 0}
.sharepreview{display:block;margin:10px auto 0;max-width:100%;height:auto;border-radius:14px;border:1px solid #3d4180}

/* 포커스 (키보드) */
:focus-visible{outline:3px solid #ffd54a;outline-offset:2px}
button:focus-visible,summary:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffd54a;outline-offset:2px}

/* JS 없음 / 불러오기 실패 안내 */
.nojs{margin:12px;padding:12px 14px;border:1px solid var(--warn);background:#3a2a10;color:#ffe2b0;border-radius:12px;font-size:.92rem}
.nojs code{background:#0007;padding:1px 5px;border-radius:6px}

/* 첫 방문 힌트 */
.hint{margin-top:10px;display:flex;gap:10px;align-items:center;justify-content:space-between;text-align:left;background:#171a38;border:1px solid var(--tier);border-radius:12px;padding:8px 10px;font-size:.86rem;color:var(--ink)}
.hint button{flex:none}

/* 확률표 보기 */
.oddscard>summary{font-size:1.05rem;font-weight:700;color:var(--ink);margin:0;list-style:none;min-height:32px;display:flex;align-items:center;gap:8px}
.oddscard>summary::-webkit-details-marker{display:none}
.oddscard>summary::before{content:'▸';color:var(--gold);transition:transform .15s}
.oddscard[open]>summary::before{transform:rotate(90deg)}
.oddscard[open]>summary{margin-bottom:10px}
.outcomes{list-style:none;margin:0 0 10px;padding:0;font-size:.86rem;color:var(--mute)}
.outcomes li{padding:4px 0 4px 10px;border-left:4px solid #4b4f86;margin:4px 0}
.outcomes .success{border-color:var(--ok)} .outcomes .keep{border-color:var(--mute)} .outcomes .drop{border-color:var(--warn)} .outcomes .destroy{border-color:var(--bad)}
#oddsTable{min-width:0;font-size:.82rem}
#oddsTable td.lv{font-weight:700;color:var(--ink)}

/* 내 운 점수 */
.luckout{margin-top:8px;min-height:1.4em;color:var(--mute);font-size:.9rem}
.luckscore{font-size:2rem;font-weight:900;color:var(--gold);line-height:1.2}
.luckverdict{font-weight:800;color:var(--ink);margin-bottom:6px}
.luckout p{margin:4px 0}

.footlinks{margin:6px 0 0}
.foot p{margin:6px 0}

/* 내 기록 */
.records h2{font-size:.95rem;color:var(--mute);margin-bottom:8px}
.recgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.recgrid div{background:var(--card2);border-radius:12px;padding:8px 2px;min-width:0}
.recgrid span{display:block;font-size:.66rem;color:var(--mute);line-height:1.25;min-height:2.5em}
.recgrid b{font-size:1.05rem;font-variant-numeric:tabular-nums}

/* 도전 링크 배너 + 목표 표시 */
.challenge{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 0;padding:10px 12px;border-radius:14px;
  background:linear-gradient(90deg,#3a1630,#2a1f4a);border:1px solid #ff5d6c;color:#ffe3e6;font-weight:700;font-size:.95rem}
.challenge button{flex:none}
.goal{min-height:2.6em;display:flex;align-items:center;justify-content:center;margin:2px 0 0;padding:4px 10px;border-radius:12px;
  background:#171a38;border:1px dashed var(--tier);color:var(--ink);font-size:.88rem;font-weight:700;line-height:1.3}
.goal.reached{border-style:solid;color:var(--ok);border-color:var(--ok)}
.goal.passed{border-style:solid;color:var(--gold);border-color:var(--gold)}

/* 공유 패널: 화면 한가운데(큰 화면) / 아래에서 올라오는 시트(작은 화면) 모달. position:fixed 라서 페이지를 어디까지 내렸든 지금 보이는 화면 안에 뜬다. */
@keyframes spslide{0%{transform:translateY(28px);opacity:0}100%{transform:translateY(0);opacity:1}}
@keyframes spfade{0%{opacity:0}100%{opacity:1}}
.spback{position:fixed;inset:0;z-index:49;background:rgba(5,7,20,.78);animation:spfade .2s ease-out}
.spanel{position:fixed;z-index:50;left:0;right:0;top:0;bottom:0;margin:auto;height:fit-content;
  width:min(540px,calc(100% - 16px));max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,#2a1d3f,#1c1f3d 60%);border:2px solid var(--bad);border-radius:20px;padding:14px 14px 12px;
  box-shadow:0 10px 50px #000c,0 0 30px #ff5d6c40;animation:spslide .25s ease-out}
@media (max-width:599px){
  .spanel{top:auto;bottom:0;width:100%;max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px - env(safe-area-inset-top));
    border-radius:22px 22px 0 0;border-bottom-width:0;padding:14px 14px calc(12px + env(safe-area-inset-bottom))}
}
@media (max-height:700px){ .spcard{width:84px;height:105px} .spjoke{margin-bottom:6px} .spluck{margin-top:6px} }
.spanel:focus{outline:none}
.spclose{position:absolute;top:6px;right:6px;min-height:40px;min-width:40px;padding:0;background:#0006;border-radius:999px;font-size:1.05rem}
.sphead{margin:0 44px 4px 0;font-size:1.25rem;line-height:1.3;color:#ffd3d8;letter-spacing:-.01em}
.spjoke{margin:0 0 10px;color:var(--mute);font-size:.9rem}
.spbody{display:flex;gap:12px;align-items:center}
.spcard{flex:none;width:108px;height:135px;border-radius:10px;border:1px solid #4b4f86;box-shadow:0 4px 14px #0008}
.spstats{flex:1;display:grid;gap:6px;min-width:0}
.spstats div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;background:#0003;border-radius:10px;padding:6px 10px}
.spstats span{font-size:.8rem;color:var(--mute)}
.spstats b{font-size:1.1rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.spstats div:first-child b{color:var(--bad);font-size:1.3rem}
.spluck{margin:10px 0 0;font-size:.95rem;font-weight:800;color:var(--gold)}
.spluck small{display:block;color:var(--mute);font-weight:600;font-size:.8rem}
.spodds{margin:4px 0 10px;font-size:.78rem;color:var(--mute)}
.spshare{width:100%;min-height:58px;line-height:1.25;font-weight:900;font-size:1.05rem;background:var(--acc);border-radius:14px;box-shadow:0 4px 0 #4a3dc4}
.spimg{width:100%;min-height:52px;margin-top:8px;padding:6px 10px;border-radius:14px;font-weight:800;line-height:1.25}
.spimg small{color:var(--mute);opacity:1}
.sphint{word-break:keep-all;margin:8px 0 0;font-size:.76rem;line-height:1.35;color:var(--mute);text-align:center}
.spshare:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #4a3dc4}
.sprow{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:10px}
.sprow2{grid-template-columns:1fr 1fr}
.sprow1{grid-template-columns:1fr}
.sprow button{min-height:52px;border-radius:14px;font-weight:800}
.spretry{background:linear-gradient(180deg,#ffd54a,#ff9f1a);color:#2a1a00;font-size:1.1rem;font-weight:900;box-shadow:0 4px 0 #b86a00}
.spretry:active{transform:translateY(3px);box-shadow:0 1px 0 #b86a00}
.spanel.arming .spshare,.spanel.arming .spimg,.spanel.arming #spCopy,.spanel.arming #spLink{pointer-events:none} /* 연타하던 손가락이 실수로 공유를 누르지 않게 잠깐 잠금 */
.spanel .msg{min-height:1.3em;margin-top:6px}
@media (prefers-reduced-motion:reduce){.spanel,.spback{animation:none!important}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:min(92vw,420px);z-index:1000;background:#1a1d4a;color:#fff;border:1px solid var(--acc);border-radius:999px;padding:10px 18px;font-size:.92rem;font-weight:700;text-align:center;box-shadow:0 6px 20px #0008;pointer-events:none}
.toast[hidden]{display:none}
body.sheet-open .toast{bottom:auto;top:calc(12px + env(safe-area-inset-top,0px))}   /* 시트가 떠 있으면 버튼을 가리지 않게 위쪽에 */