:root { --ink: #2b1a0c; --ink2: #5a3a1a; --gold: #c99a3a; --gold2: #f0d488; --blue: #3c63b8; --red: #a8323a; --font: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120c14; color: var(--ink); font-family: var(--font); }
#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.hidden { display: none !important; }
button { font-family: var(--font); font-size: 15px; color: #fff4d8; background: linear-gradient(#7a4a22, #4a2a10); border: 2px solid #2a1606; box-shadow: inset 0 0 0 1px var(--gold), 0 2px 0 #1a0c02; padding: 7px 14px; border-radius: 3px; cursor: pointer; letter-spacing: .5px; text-shadow: 0 1px 0 #000; }
button:hover:not(:disabled) { background: linear-gradient(#9a5e2c, #5e3614); color: #fff; }
button:disabled { opacity: .45; cursor: default; }
button.big { font-size: 18px; padding: 10px 22px; background: linear-gradient(#a0302a, #5a1410); }
button.big:hover:not(:disabled) { background: linear-gradient(#c03a30, #701a14); }
.panel { background: url(../assets/ui/parchment.png) repeat, #e8d7ae; border: 3px solid #4a2c10; border-radius: 4px; box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 18px rgba(90, 50, 10, .45), 0 4px 14px rgba(0, 0, 0, .55); padding: 10px 12px; }
.panel h2 { margin: 0 0 8px; font-size: 17px; color: var(--ink2); border-bottom: 1px solid rgba(90, 58, 26, .45); padding-bottom: 4px; font-variant: small-caps; letter-spacing: 1px; }
.panel h2 small { font-size: 12px; color: #7a5a3a; }

/* loading */
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--gold2); background: #120c14; z-index: 50; }
#loading .lt { font-size: 40px; letter-spacing: 4px; font-variant: small-caps; }
#loading .lb { width: 280px; height: 8px; border: 1px solid var(--gold); margin: 14px; }
#loading .lb i { display: block; height: 100%; width: 0; background: var(--gold); }

/* title */
#title { position: absolute; inset: 0; background: url(../assets/ui/title_bg.png) center / cover no-repeat; image-rendering: pixelated; }
.title-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; image-rendering: auto; }
.logo { display: flex; flex-direction: column; align-items: center; color: #ffe7a8; text-shadow: 0 0 12px rgba(255, 160, 60, .55), 0 3px 0 #3a1a08, 0 6px 14px #000; }
.logo .l1 { font-size: 34px; letter-spacing: 14px; font-variant: small-caps; color: #f0c870; }
.logo .l2 { font-size: 84px; letter-spacing: 6px; font-variant: small-caps; line-height: .9; }
.logo .l3 { font-size: 18px; font-style: italic; color: #f5dcb0; margin-top: 10px; letter-spacing: 3px; }
.title-menu { display: flex; flex-direction: column; gap: 10px; min-width: 240px; }
#howto { max-width: 640px; font-size: 14px; line-height: 1.45; }
#howto h3 { margin: 0 0 6px; color: var(--ink2); }
#howto ul { margin: 0; padding-left: 18px; }
.credits { position: absolute; bottom: 10px; color: #e0c8a0; font-size: 12px; opacity: .75; }

/* draft */
#draft { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, #3a2a3a, #120c14 75%); overflow: auto; }
.draft-wrap { max-width: 1400px; margin: 0 auto; padding: 14px 18px; }
.draft-wrap header { display: flex; align-items: baseline; justify-content: space-between; color: #f0d488; }
.draft-wrap h1 { margin: 0 0 10px; font-variant: small-caps; letter-spacing: 3px; text-shadow: 0 2px 0 #000; font-size: 32px; }
#draft-budget { color: #f5e2b8; font-size: 16px; }
#draft-budget b { color: #ffd060; }
.draft-cols { display: grid; grid-template-columns: minmax(430px, 1.3fr) minmax(300px, 1fr) minmax(280px, .9fr); gap: 14px; align-items: start; }
#draft-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 7px; }
.card { position: relative; display: flex; gap: 7px; padding: 5px; border: 2px solid #8a6a3a; background: rgba(255, 248, 225, .55); border-radius: 3px; cursor: pointer; transition: transform .08s; }
.card:hover { transform: translateY(-1px); border-color: #4a2c10; background: rgba(255, 252, 235, .8); }
.card.focus { box-shadow: 0 0 0 2px #c08a2a; }
.card.picked { background: rgba(170, 200, 255, .55); border-color: var(--blue); }
.card.disabled { opacity: .45; }
.card .pt { width: 52px; height: 52px; image-rendering: pixelated; background: linear-gradient(#a8c0d8, #6880a0); border: 1px solid #3a2410; }
.card .nm { font-weight: bold; font-size: 15px; }
.card .jb { font-size: 12px; color: #7a3a1a; font-variant: small-caps; letter-spacing: 1px; }
.card .mini { font-size: 11px; color: #3a2a1a; line-height: 1.3; }
.card .cost { position: absolute; right: 6px; top: 4px; font-weight: bold; color: #7a4a00; }
.card .cost small { font-size: 10px; margin-left: 1px; }
.card .tick { position: absolute; right: 6px; bottom: 3px; color: var(--blue); font-size: 18px; font-weight: bold; }
.row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.row.go { justify-content: space-between; }
#draft-detail .dh { display: flex; gap: 10px; }
.bigpt { width: 96px; height: 96px; image-rendering: pixelated; background: linear-gradient(#a8c0d8, #6880a0); border: 2px solid #3a2410; flex: none; }
#draft-detail .nm { font-size: 22px; font-weight: bold; }
#draft-detail .jb { color: #7a3a1a; font-variant: small-caps; letter-spacing: 1px; }
#draft-detail .desc { font-size: 13px; margin-top: 4px; font-style: italic; }
.foe-tag { background: var(--red); color: #fff; font-size: 11px; padding: 1px 5px; border-radius: 2px; }
.stats { margin: 10px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 12px; }
.sb { position: relative; display: flex; justify-content: space-between; font-size: 13px; padding: 1px 4px; border-bottom: 1px solid rgba(90, 58, 26, .25); }
.sb i { position: absolute; left: 0; bottom: -1px; height: 3px; background: #a07030; opacity: .7; }
.sb.hp i { background: #3a9a3a; } .sb.mp i { background: #3a6ac0; } .sb.br i { background: #c04a2a; } .sb.fa i { background: #9a5ac0; }
.gear { font-size: 13px; margin-bottom: 8px; }
.skills > div { font-size: 13px; padding: 4px 0; border-top: 1px dashed rgba(90, 58, 26, .3); }
.skills small { color: #4a3a2a; }
.mpc { background: #3a6ac0; color: #fff; font-size: 10px; padding: 0 4px; border-radius: 2px; }
.ctc { background: #b07a20; color: #fff; font-size: 10px; padding: 0 4px; border-radius: 2px; }
.col-side { display: flex; flex-direction: column; gap: 12px; }
.slot { display: flex; align-items: center; gap: 8px; padding: 3px; margin-bottom: 4px; border: 1px solid rgba(90, 58, 26, .4); background: rgba(255, 250, 230, .5); cursor: pointer; min-height: 44px; font-size: 14px; }
.slot img { width: 38px; height: 38px; image-rendering: pixelated; background: linear-gradient(#a8c0d8, #6880a0); }
.slot.foe { cursor: default; } .slot.foe img { background: linear-gradient(#d8a8a0, #a06058); }
.slot.reserve { opacity: .45; } .slot.reserve small::after { content: ' · reserve'; color: #8a1a1a; }
.slot.empty { justify-content: center; color: #8a6a4a; font-style: italic; cursor: default; }
#flash { position: fixed; left: 50%; top: 20px; transform: translateX(-50%); background: #5a1410; color: #fff; padding: 8px 18px; border: 2px solid var(--gold); opacity: 0; transition: opacity .2s; pointer-events: none; }
#flash.on { opacity: 1; }

/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
#atlist { position: absolute; left: 10px; top: 10px; width: 190px; padding: 6px 8px; }
.ath { font-variant: small-caps; font-weight: bold; color: var(--ink2); border-bottom: 1px solid rgba(90, 58, 26, .4); margin-bottom: 4px; letter-spacing: 1px; }
.ate { display: flex; align-items: center; gap: 5px; font-size: 13px; padding: 1px 3px; border-left: 4px solid transparent; margin-bottom: 1px; }
.ate img { width: 24px; height: 24px; image-rendering: pixelated; }
.ate span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ate em { font-size: 11px; font-style: normal; color: #5a4a3a; }
.ate.player { border-left-color: var(--blue); } .ate.enemy { border-left-color: var(--red); }
.ate.now { background: rgba(255, 220, 120, .6); font-weight: bold; }
.ate.ko { opacity: .5; }
.ate.charge { background: rgba(255, 240, 200, .5); font-style: italic; color: #7a4a00; }
.ate.charge img { width: 16px; height: 16px; }
.ate.hyp { background: rgba(255, 200, 90, .8); outline: 1px dashed #7a4a00; }
#banner { position: absolute; left: 50%; top: 14px; transform: translateX(-50%) scale(.9); opacity: 0; transition: opacity .2s, transform .2s; padding: 8px 34px; font-size: 24px; font-variant: small-caps; letter-spacing: 2px; color: #fff4d8; background: linear-gradient(90deg, transparent, rgba(40, 20, 10, .9) 15%, rgba(40, 20, 10, .9) 85%, transparent); border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold); text-shadow: 0 2px 0 #000; pointer-events: none; white-space: nowrap; }
#banner.show { opacity: 1; transform: translateX(-50%) scale(1); }
#banner.player { border-color: #8ab0ff; } #banner.enemy { border-color: #ff8a7a; }
#unitpanel, #targetpanel { position: absolute; bottom: 12px; width: 300px; font-size: 13px; display: none; }
#unitpanel { left: 10px; } #targetpanel { right: 10px; }
.uh { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.uh img { width: 48px; height: 48px; image-rendering: pixelated; border: 2px solid #3a2410; background: linear-gradient(#a8c0d8, #6880a0); }
.uh.enemy img { background: linear-gradient(#d8a8a0, #a06058); }
.uh .nm { font-size: 17px; font-weight: bold; }
.uh .jb { font-size: 12px; color: #7a3a1a; font-variant: small-caps; letter-spacing: 1px; }
.bars { display: grid; grid-template-columns: 24px 1fr; gap: 2px 6px; align-items: center; }
.bars label { font-size: 11px; font-weight: bold; color: var(--ink2); }
.bar { position: relative; height: 13px; background: #3a2a20; border: 1px solid #1a0c04; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; }
.bar.hp i { background: linear-gradient(#8af07a, #3a9a2a); } .bar.mp i { background: linear-gradient(#8ab8ff, #2a5ac0); } .bar.ct i { background: linear-gradient(#ffe08a, #c08a1a); }
.bar span { position: absolute; right: 4px; top: -1px; font-size: 11px; color: #fff; text-shadow: 0 1px 0 #000; font-family: Verdana, sans-serif; }
.ust { display: flex; flex-wrap: wrap; gap: 2px 9px; margin-top: 5px; font-size: 12px; }
.ust b { color: #7a2a0a; }
.sts { margin-top: 4px; }
.st { display: inline-block; font-size: 11px; padding: 0 5px; border-radius: 2px; color: #fff; margin: 1px; }
.st.ko { background: #8a1a1a; } .st.pr { background: #2a7ab0; } .st.sl { background: #7a4ab0; } .st.ch { background: #b07a20; }
#menu { position: absolute; left: 320px; bottom: 12px; min-width: 190px; padding: 6px; display: none; }
#menu .mt { font-variant: small-caps; font-weight: bold; color: var(--ink2); padding: 0 6px 4px; border-bottom: 1px solid rgba(90, 58, 26, .4); margin-bottom: 3px; }
.mi { padding: 5px 10px 5px 22px; font-size: 16px; cursor: pointer; position: relative; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mi small { font-size: 11px; color: #6a4a2a; }
.mi.sel { background: rgba(160, 100, 30, .25); }
.mi.sel::before { content: '▶'; position: absolute; left: 6px; color: #a0301a; font-size: 12px; }
.mi.dis { color: #9a8a7a; cursor: default; }
#confirm { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); text-align: center; display: flex; gap: 10px; align-items: center; }
#hint { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); max-width: 640px; padding: 6px 14px; background: rgba(20, 12, 8, .78); color: #f5e6c8; font-size: 14px; border: 1px solid rgba(201, 154, 58, .6); border-radius: 3px; display: none; text-align: center; }
.k { display: inline-block; padding: 0 4px; border: 1px solid #c99a3a; border-radius: 2px; font-size: 12px; color: var(--gold2); }
#log { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(460px, 34vw); background: rgba(16,10,8,.55); border-radius: 4px; padding: 4px 8px; font-size: 12px; color: #f0e2c8; text-shadow: 0 1px 0 #000; pointer-events: none; text-align: center; }
#log:empty { display: none; } #log div { opacity: .8; } #log div:last-child { opacity: 1; font-weight: bold; }
#toolbar { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; }
#toolbar button { padding: 4px 9px; font-size: 13px; }
#howto-battle { position: absolute; right: 10px; top: 50px; width: 340px; font-size: 13px; line-height: 1.4; }
.pv { margin-top: 6px; border-top: 1px solid rgba(90, 58, 26, .4); padding-top: 4px; }
.pvh { font-weight: bold; color: #7a2a0a; font-variant: small-caps; letter-spacing: 1px; }
.pvh small { font-weight: normal; color: #6a4a2a; letter-spacing: 0; }
.pvr { font-size: 13px; padding: 2px 0; }
.pvr.none { font-style: italic; color: #6a5a4a; }
.pvr.enemy b { color: var(--red); } .pvr.player b { color: var(--blue); }
.pvr .hit { background: #3a2410; color: #ffe08a; padding: 0 5px; border-radius: 2px; font-weight: bold; }
.pvr .dmg { color: #a01a0a; font-weight: bold; } .pvr .heal { color: #1a7a1a; font-weight: bold; } .pvr .stx { color: #6a3aa0; font-weight: bold; }
.pvr .kill { background: #a01a0a; color: #fff; padding: 0 4px; font-size: 11px; }
.pvr .side { background: #2a6a2a; color: #fff; padding: 0 4px; font-size: 11px; }
.pvr .risk { background: #b07a20; color: #fff; padding: 0 4px; font-size: 11px; }

/* result */
#result { position: absolute; inset: 0; background: rgba(10, 6, 10, .6); display: flex; align-items: center; justify-content: center; }
.res-panel { min-width: 480px; max-width: 720px; text-align: center; padding: 20px 28px; }
#res-title { font-size: 54px; margin: 0; font-variant: small-caps; letter-spacing: 4px; }
#res-title.victory { color: #a07010; text-shadow: 0 2px 0 #fff4c0; } #res-title.defeat { color: #7a1a1a; }
.rs { font-size: 14px; margin: 8px 0; }
.rteam { display: flex; justify-content: center; gap: 10px; margin: 12px 0; }
.rteam > div { display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.rteam img { width: 52px; height: 52px; image-rendering: pixelated; background: linear-gradient(#a8c0d8, #6880a0); border: 2px solid #3a2410; }
.rteam .ko img, .rteam .cr img { filter: grayscale(1) brightness(.7); }
.res-panel .row { justify-content: center; }

@media (max-width: 1100px) { .draft-cols { grid-template-columns: 1fr 1fr; } .col-side { grid-column: span 2; } #menu { left: 10px; bottom: 210px; } }
/* ---- v2: battlefield picker, loadouts, status icons ---- */
#draft-map { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mapbtn { text-align: left; padding: 6px 8px; font-size: 13px; line-height: 1.25; }
.mapbtn small { display: block; font-size: 11px; opacity: .8; font-weight: normal; }
.mapbtn.on { outline: 2px solid #ffd060; background: linear-gradient(#7a4a1a, #4a2a10); color: #fff3c8; }
.loadout { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 6px 0 10px; padding: 6px 8px; background: rgba(90,58,26,.12); border: 1px solid rgba(90,58,26,.35); border-radius: 3px; }
.loadout .lh { grid-column: span 2; font-weight: bold; font-variant: small-caps; letter-spacing: 1px; }
.loadout .lh small { font-weight: normal; letter-spacing: 0; }
.loadout label { display: flex; flex-direction: column; font-size: 11px; color: #5a3a1a; }
.loadout select { font: inherit; font-size: 13px; padding: 2px; background: #fff8e4; border: 1px solid #8a6a3a; color: #2a1a10; }
.loadout .ltips { grid-column: span 2; font-size: 11px; color: #4a3a2a; }
.loadout .ltips small { display: block; }
.ucost { font-size: 13px; color: #8a5a10; font-weight: normal; margin-left: 6px; }
.ueq { font-size: 11px; margin-top: 3px; color: #3a2a1a; }
.ueq .rsm { color: #6a3a6a; }
.tinfo { font-size: 12px; padding: 4px 2px; }
.si { display: inline-block; width: 8px; height: 8px; background: url(../assets/ui/status.png) no-repeat; image-rendering: pixelated; transform: scale(1.5); margin: 0 5px 0 2px; vertical-align: middle; }
.atd { font-size: 12px; font-style: italic; padding: 4px 6px; }