.ev-subtabs { display: inline-flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; }
.ev-subtabs button { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: 0 .85rem; border-radius: .6rem; border: 1px solid rgba(255, 255, 255, .1); background: none; color: var(--text-2); font-size: .92rem; }
.ev-subtabs button:hover { background: rgba(255, 255, 255, .05); color: var(--text-1); }
.ev-subtabs button.is-on { background: rgba(242, 198, 106, .15); border-color: rgba(242, 198, 106, .5); color: var(--gold-1); }

.board-page .win-caps { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem .6rem; margin: 0; font: 400 .79rem var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-3); }
.board-page .win-caps small { font-size: .84rem; letter-spacing: .01em; text-transform: none; color: var(--text-3); }
.bd-body { display: grid; gap: 1rem; align-content: start; grid-auto-rows: max-content; }
.is-hud .stage .board-page.win-page > .bd-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: .3rem; }
.bd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bd-card { display: grid; gap: .7rem; align-content: start; min-width: 0; padding: 1rem 1.15rem; border-color: color-mix(in srgb, var(--skill, #f2c66a) 30%, transparent) !important; }
.bd-card.is-taken { background: linear-gradient(180deg, color-mix(in srgb, var(--skill, #f2c66a) 9%, transparent), transparent 60%); }
.bd-head { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.bd-head .medal { --size: 3.3rem; flex: none; }
.bd-title { display: grid; gap: .2rem; min-width: 0; }
.bd-title h3 { margin: 0; font: 400 1.4rem/1.2 var(--font-display); color: var(--gold-0); text-wrap: balance; }
.bd-title p { margin: 0; font-size: .92rem; color: var(--text-3); }
.bd-pay { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .96rem; color: var(--text-1); }
.bd-pay .ia-glyph { flex: none; width: 1rem; height: 1rem; color: var(--gold-2); }
.bd-progress { display: grid; gap: .25rem; }
.bd-progress .bar { height: .65rem; }
.bd-progress small { font-size: .84rem; color: var(--text-3); }
.bd-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.bd-actions.is-small { gap: .35rem; margin-top: -.15rem; }
.bd-why { margin: -.2rem 0 0; font-size: .86rem; line-height: 1.35; color: var(--text-3); }
.bd-actions .btn small { margin-left: .3rem; font-size: .76rem; color: var(--text-3); }
.bd-none { margin: 0; color: var(--text-3); }
.bd-empty { place-items: center; text-align: center; min-height: 8rem; color: var(--text-2); }
.bd-empty .ia-emblem { width: 3rem; height: 3rem; }

.bd-claims { gap: .6rem; border-color: rgba(242, 198, 106, .45) !important; }
.bd-claim-list { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.bd-claim { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem .6rem; border-radius: .6rem; background: rgba(242, 198, 106, .07); border: 1px solid rgba(242, 198, 106, .22); }
.bd-claim-copy { display: grid; gap: .1rem; min-width: 0; }
.bd-claim-copy b { font-weight: 400; font-size: 1rem; color: var(--text-1); }
.bd-claim-copy small { font-size: .84rem; color: var(--gold-2); }
.bd-last { gap: .5rem; }
.bd-gap { margin: 0; font-size: .92rem; color: var(--text-2); }
.bd-chest { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 0; padding: 0; list-style: none; }
.bd-chest li { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; color: var(--text-1); }
.bd-chest .ia-emblem, .bd-chest .item-img, .bd-chest .ia-glyph { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.bd-chest .ia-glyph { color: var(--gold-1); }
.bd-done { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .1rem .2rem; font-size: 1rem; color: var(--emerald); }
.bd-done .ia-glyph { width: 1.1rem; height: 1.1rem; }
.bd-foot { display: flex; flex-wrap: wrap; gap: .8rem 2rem; padding: .8rem 1.1rem; border-radius: .9rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.bd-foot > span { display: grid; gap: .15rem; }
.bd-foot small { font-size: .72rem; letter-spacing: .1em; color: var(--gold-3); }
.bd-foot b { font: 400 1.05rem var(--font-ui); color: var(--text-1); }
.bd-foot b.t-num { font: 400 1.25rem var(--font-num); color: var(--gold-0); }
.bd-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.bd-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 1.9rem; padding: 0 .6rem; font-size: .9rem; text-transform: capitalize; }
.bd-chip .ia-glyph { width: .8rem; height: .8rem; }

.bd-help { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .95rem; color: var(--text-2); }
.bd-help .ia-glyph { flex: none; width: 1.05rem; height: 1.05rem; color: var(--gold-3); }
.bd-shop-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.bd-shop-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.bd-shop-row { display: flex; align-items: center; gap: .8rem; padding: .5rem .6rem; border-radius: .7rem; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.bd-shop-row.is-owned { opacity: .7; }
.bd-shop-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .6rem; background: rgba(242, 198, 106, .08); box-shadow: inset 0 0 0 1px rgba(242, 198, 106, .22); color: var(--gold-1); }
.bd-shop-icon .ia-emblem, .bd-shop-icon .item-img { width: 1.9rem; height: 1.9rem; object-fit: contain; }
.bd-shop-icon .ia-glyph { width: 1.2rem; height: 1.2rem; }
.bd-shop-copy { flex: 1; display: grid; gap: .1rem; min-width: 0; }
.bd-shop-copy b { font-weight: 400; font-size: 1rem; color: var(--text-1); }
.bd-shop-copy small { font-size: .84rem; color: var(--text-3); }
.bd-shop-row .btn { flex: none; min-width: 5rem; }
.bd-shop-row .btn .ia-emblem { width: 1.2rem; height: 1.2rem; }

@media (max-width: 1100px) {
  .bd-cards, .bd-shop-cols { grid-template-columns: minmax(0, 1fr); }
}
.bd-phone { display: grid; gap: .8rem; padding: .8rem; align-content: start; }
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .bd-actions .btn { min-height: 2.9rem; }
  .bd-claim .btn, .bd-shop-row .btn { min-height: 2.7rem; }
  .board-page { font-size: .9rem; }
  .board-page .btn, .board-page .ev-ph-tab { min-height: 3.3rem; }
  .board-page :is(.t-caps, .btn, .btn-sm, .win-caps, .chip, small, .bd-actions .btn small) { font-size: .9rem; }
  .bd-phone .ev-ph-head { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; }
  .bd-phone .ev-ph-head > div:not(.ev-ph-tokens) { flex: 1; display: grid; min-width: 0; }
  .bd-phone .ev-ph-head .t-caps { font-size: .9rem; letter-spacing: .08em; color: var(--gold-3); }
  .bd-phone .ev-ph-head h1 { margin: 0; font: 400 1.6rem var(--font-display); color: var(--gold-0); }
}

.bd-confirm { display: grid; gap: .5rem; padding: .6rem .75rem; border-radius: .7rem; background: rgba(255, 255, 255, .04); border: 1px solid color-mix(in srgb, var(--skill, #f2c66a) 40%, transparent); }
.bd-confirm p { margin: 0; font-size: .92rem; line-height: 1.35; color: var(--text-1); }
.bd-confirm .bd-actions.is-small { margin-top: 0; }

.tk-row { position: relative; display: flex; align-items: center; min-width: 0; }
.tk-row .ia-emblem { flex: none; color: var(--skill); }
.tk-title { flex: 1; min-width: 0; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-count { flex: none; font-family: var(--font-num); color: var(--text-2); white-space: nowrap; }
.tk-bar { position: absolute; right: 0; bottom: 0; overflow: hidden; border-radius: .2rem; background: rgba(255, 255, 255, .1); pointer-events: none; }
.tk-bar > i { display: block; height: 100%; border-radius: inherit; background: var(--skill); }
.tk-row.is-done .ia-glyph { flex: none; color: var(--emerald); }
.tk-row.is-done .tk-title { color: var(--emerald); }
@media (min-width: 761px) and (min-height: 501px), (min-width: 761px) and (pointer: fine), (min-width: 761px) and (pointer: none) {
  .is-hud .cb-tasks { display: grid; gap: .1rem; min-width: 0; padding: .3rem 1.2rem .38rem; border-top: 1px solid rgba(242, 198, 106, .16); color: var(--text-2); text-align: left; transition: background .15s; }
  .is-hud .cb-tasks:hover { background: rgba(242, 198, 106, .06); }
  .is-hud .cb-tasks:last-child { border-radius: 0 0 1.3rem 1.3rem; }
  .is-hud .cb-tasks .tk-row { gap: .55rem; padding: .2rem 0 .34rem; }
  .is-hud .cb-tasks .tk-row .ia-emblem { width: 1.3rem; height: 1.3rem; }
  .is-hud .cb-tasks .tk-row.is-done { padding-bottom: .2rem; }
  .is-hud .cb-tasks .tk-row.is-done .ia-glyph { width: 1.1rem; height: 1.1rem; margin-left: .1rem; }
  .is-hud .cb-tasks .tk-title { font-size: .94rem; }
  .is-hud .cb-tasks .tk-count { font-size: .88rem; }
  .is-hud .cb-tasks .tk-bar { left: 1.85rem; height: .2rem; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  :root:has(#ia-top > .tk-strip) { --top: 6.9rem; }
  :root:has(#ia-top > .np-level):has(#ia-top > .tk-strip) { --top: 8.45rem; }
  .region-top:has(> .tk-strip) { display: flex; flex-direction: column; }
  .region-top:has(> .tk-strip) > .topbar { flex: 1 1 auto; height: auto; min-height: 0; }
  .tk-strip { flex: none; display: grid; gap: .05rem; width: 100%; box-sizing: border-box; padding: .22rem .6rem .28rem; border: 0; border-bottom: 1px solid rgba(242, 198, 106, .35); background: rgba(8, 12, 20, .97); color: var(--text-2); text-align: left; }
  .tk-strip .tk-row { gap: .45rem; padding: .17rem 0 .26rem; }
  .tk-strip .tk-row .ia-emblem { width: 1.2rem; height: 1.2rem; }
  .tk-strip .tk-row.is-done { padding-bottom: .17rem; }
  .tk-strip .tk-row.is-done .ia-glyph { width: 1rem; height: 1rem; margin-left: .1rem; }
  .tk-strip .tk-title { font-size: .84rem; }
  .tk-strip .tk-count { font-size: .8rem; }
  .tk-strip .tk-bar { left: 1.65rem; height: .18rem; }
  .tk-strip { min-height: 3.3rem; align-content: center; }
  .tk-strip :is(.tk-title, .tk-count) { font-size: .9rem; }
  .world-first .region-top > .tk-strip { width: auto; }
}