/* Joe-AI: The Ascend — page styles (on top of ../shared/arcade.css) */
.asc { gap: 8px; padding-top: 10px; }
.asc > * { width: 100%; max-width: 960px; min-width: 0; }
@media (max-width: 640px) { .site-header h1 { font-size: .95rem; letter-spacing: .06em; } .panel { padding: 8px; } .buy { min-width: 74px; } ul.parts small { white-space: normal; } }
.asc-hud {
  display: grid; grid-template-columns: auto auto 1fr; gap: 10px 16px; align-items: center;
  font-family: var(--mono); background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px;
}
.asc-hud .lbl { display: block; font-size: .62rem; color: var(--muted); letter-spacing: .12em; }
.asc-hud .tok b { font-size: 1.35rem; color: var(--yellow); text-shadow: 0 0 10px rgba(255, 210, 63, .45); }
.asc-hud .inc { margin-left: 8px; color: var(--green); font-size: .85rem; }
.asc-hud .flr b { display: block; color: var(--cyan); letter-spacing: .08em; }
.asc-hud .chal { font-size: .75rem; color: var(--pink); cursor: help; }
.asc-hud .meter { display: flex; gap: 10px; align-items: center; min-width: 0; }
.asc-hud .bar { position: relative; flex: 1; height: 26px; background: #030312; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; min-width: 120px; }
.asc-hud .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #8a5cff, #ff3df2); transition: width .25s; }
.asc-hud .bar i.boss { background: linear-gradient(90deg, #ff4d6d, #ffd23f); }
.asc-hud .bar span { position: relative; display: block; text-align: center; font-size: .72rem; line-height: 26px; color: #fff; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.asc-hud .boss { white-space: nowrap; padding: 6px 12px; font-size: .78rem; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 18px rgba(255, 61, 242, .8); } }
@media (max-width: 640px) {
  .asc-hud { grid-template-columns: 1fr auto; }
  .asc-hud .meter { grid-column: 1 / -1; }
  .asc-hud .tok b { font-size: 1.15rem; }
}
.tip { display: flex; align-items: center; gap: 8px; font: .78rem var(--sans); color: var(--text); background: rgba(255, 179, 71, .08); border: 1px solid rgba(255, 179, 71, .35); border-radius: 10px; padding: 5px 8px; }
.tip .pip { width: 18px; height: 18px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 55%, #fff 0 22%, #ffb347 24% 100%); box-shadow: 0 0 8px rgba(255, 179, 71, .6); }
.tip #tip-txt { flex: 1; min-width: 0; }
.parts li.flash { animation: flashrow 1.6s; }
@keyframes flashrow { 0%, 60% { border-color: var(--yellow); box-shadow: 0 0 14px rgba(255, 210, 63, .5); } }
.menu .set { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; font: .8rem var(--mono); color: var(--muted); }
.menu .set input[type=range] { width: 100%; accent-color: var(--cyan); }
.menu select { font: .8rem var(--mono); color: var(--text); background: #05051a; border: 1px solid var(--line); border-radius: 7px; padding: 4px 6px; }
.abil { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.abil .ab {
  display: inline-flex; align-items: center; gap: 6px; font: 600 .74rem var(--mono); color: var(--text);
  background: var(--bg-2); border: 1px solid var(--c, var(--line)); border-radius: 8px; padding: 4px 9px; cursor: pointer;
  box-shadow: 0 0 10px color-mix(in srgb, var(--c, #000) 40%, transparent);
}
.abil .ab canvas { width: 20px; height: 20px; image-rendering: pixelated; }
.abil .ab.empty { opacity: .35; cursor: default; box-shadow: none; min-width: 34px; justify-content: center; }
.abil .ab.on { cursor: default; background: color-mix(in srgb, var(--c) 25%, var(--bg-2)); }
.stage { aspect-ratio: 16 / 10; }
.stage canvas { image-rendering: pixelated; cursor: pointer; }
.ticker {
  margin: 0; font: .78rem var(--mono); color: var(--muted); background: rgba(13, 13, 43, .6); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ticker.flash { animation: tick .6s; }
@keyframes tick { from { color: var(--yellow); } }
.tabs { display: flex; gap: 4px; position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 4px 0; }
.tabs button {
  flex: 1; position: relative; font: 600 .82rem var(--mono); letter-spacing: .06em; color: var(--muted); background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 10px 10px 4px 4px; padding: 9px 4px; cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 12px rgba(46, 242, 255, .2); }
.tabs button.badge::after { content: ''; position: absolute; top: 5px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.panel { text-align: left; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 14px; min-height: 260px; }
.panel .empty { color: var(--muted); font-style: italic; }
.ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin: 2px 0 8px; }
.ph b { font-family: var(--mono); color: var(--cyan); letter-spacing: .04em; }
.ph small, .panel small { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; }
.ph-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.statline { display: flex; flex-wrap: wrap; gap: 6px 14px; font: .76rem var(--mono); color: var(--muted); margin-bottom: 8px; }
.statline b { color: var(--text); }
.buymode { display: flex; gap: 4px; align-items: center; font: .76rem var(--mono); color: var(--muted); margin-bottom: 8px; }
.mini {
  font: 600 .74rem var(--mono); color: var(--text); background: #16163d; border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; cursor: pointer;
}
.mini:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan); }
.mini.on { border-color: var(--yellow); color: var(--yellow); }
.mini.alt { color: var(--muted); }
.mini:disabled { opacity: .45; cursor: default; }
ul.parts, ul.crew, ul.stats, ul.floors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
@media (min-width: 760px) { ul.parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
ul.parts li, ul.crew li, ul.stats li, ul.floors li {
  display: flex; align-items: center; gap: 10px; background: #0a0a24; border: 1px solid #1d1d4a; border-radius: 10px; padding: 7px 8px 7px 10px;
}
ul.parts .pi { flex: 1; min-width: 0; }
ul.parts .pi b { font-family: var(--mono); font-size: .84rem; }
ul.parts .model { font: .74rem var(--mono); color: var(--yellow); }
ul.parts small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvbar { position: relative; height: 12px; margin-top: 4px; background: #05051a; border-radius: 6px; overflow: hidden; border: 1px solid #1d1d4a; }
.lvbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #2643a8, #2ef2ff); }
.lvbar span { position: relative; display: block; font: 600 .62rem/12px var(--mono); text-align: center; color: #fff; text-shadow: 0 1px 1px #000; }
.buy {
  flex: none; min-width: 84px; font: .72rem/1.25 var(--mono); color: var(--text); background: linear-gradient(180deg, #1d2a6a, #141a48);
  border: 1px solid #3a4aa0; border-radius: 9px; padding: 5px 8px; cursor: pointer; text-align: center;
}
.buy b { color: var(--yellow); }
.buy:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 10px rgba(46, 242, 255, .3); }
.buy:disabled { opacity: .45; cursor: default; }
.buy.swap { background: linear-gradient(180deg, #5a1d6a, #3a1448); border-color: #ff3df2; }
.buy.blocked { background: #1a1a2a; border-color: #333; color: var(--muted); }
.buy.wide { min-width: 120px; }
ul.abil li canvas, ul.crew li canvas { width: 28px; height: 28px; image-rendering: pixelated; flex: none; }
ul.crew li { cursor: pointer; }
ul.crew li > div { flex: 1; min-width: 0; }
ul.crew li.sel, ul.floors li.sel { border-color: var(--cyan); }
ul.crew .cs { font: .72rem var(--mono); color: var(--muted); text-align: right; }
.gold { color: var(--yellow); }
.row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; font: .82rem var(--mono); }
ul.stats li > div, ul.floors li > div:first-child { flex: 1; min-width: 0; }
ul.stats li b, ul.floors li b { font-family: var(--mono); }
.beans { font: 600 .82rem var(--mono); color: var(--yellow); display: flex; align-items: center; gap: 6px; }
.beans canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.fbtns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.menu { display: grid; gap: 12px; }
@media (min-width: 760px) { .menu { grid-template-columns: 1fr 1fr; } }
.menu section { background: #0a0a24; border: 1px solid #1d1d4a; border-radius: 10px; padding: 10px 12px; }
.menu h4 { margin: 0 0 6px; font: 600 .86rem var(--mono); color: var(--cyan); }
.menu p { margin: 0 0 8px; font-size: .82rem; color: var(--muted); }
.menu form { display: flex; gap: 6px; margin-bottom: 8px; }
.menu input { flex: 1; min-width: 0; font: .86rem var(--mono); color: var(--text); background: #05051a; border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; }
.menu .life { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; font: .78rem var(--mono); color: var(--muted); }
.menu .life b { color: var(--text); }
.menu .danger h4 { color: var(--red); }

/* dialogs */
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(3, 3, 18, .78); backdrop-filter: blur(3px); }
.dlg {
  width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; background: var(--bg-2); border: 1px solid var(--cyan); border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 0 40px rgba(46, 242, 255, .25); color: var(--text);
}
.dlg.wide { max-width: 680px; }
.dlg h3 { margin: 0 0 10px; font: 700 1.05rem var(--mono); color: var(--cyan); letter-spacing: .04em; }
.dlg p, .dlg li { font-size: .9rem; line-height: 1.45; }
.dlg .note { color: var(--muted); font-size: .8rem; }
.dlg .btn-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.talk { display: flex; gap: 12px; align-items: flex-start; }
.talk canvas { width: 64px; height: 64px; image-rendering: pixelated; flex: none; background: #05051a; border: 1px solid var(--line); border-radius: 10px; }
.talk b { font-family: var(--mono); color: var(--yellow); }
.talk p { margin: 4px 0 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.choice {
  display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; font: .8rem var(--sans); color: var(--text);
  background: #0a0a24; border: 1px solid #2a2a6a; border-radius: 10px; padding: 10px 8px; cursor: pointer;
}
.choice:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 12px rgba(46, 242, 255, .25); }
.choice b { font-family: var(--mono); }
.choice small { color: var(--muted); font-size: .72rem; }
.choice canvas { width: 40px; height: 40px; image-rendering: pixelated; }
.win { text-align: center; }
.win canvas[data-boss] { width: 96px; height: 96px; image-rendering: pixelated; }
.win canvas[data-bean] { width: 14px; height: 14px; vertical-align: middle; }
.howto { padding-left: 18px; margin: 0; }
.howto li { margin-bottom: 6px; }
textarea.code { width: 100%; font: .72rem var(--mono); color: var(--text); background: #05051a; border: 1px solid var(--line); border-radius: 8px; padding: 8px; word-break: break-all; resize: vertical; }
.dlg .lb { margin-top: 4px; }

.buymode.aim { flex-wrap: wrap; }
.menu .wide { grid-column: 1 / -1; }
.menu .achc { color: var(--yellow); font-size: .78rem; margin-left: 6px; }
.menu ul.ach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.menu ul.ach li { background: #05051a; border: 1px solid #1d1d4a; border-radius: 8px; padding: 6px 8px; opacity: .6; }
.menu ul.ach li.got { opacity: 1; border-color: var(--yellow); }
.menu ul.ach li b { font: 600 .78rem var(--mono); }
.menu ul.ach li.got b { color: var(--yellow); }