/* 장판교를 지켜라: the game's own look (dark lacquer and parchment), the same inside the portal and on its own page */
.bg-app {
  --bg-ink: #f3e9d2; --bg-dim: #b9a888; --bg-panel: #2a211b; --bg-panel2: #33281f; --bg-line: #4d3d2f; --bg-accent: #d9a441; --bg-red: #c0392b;
  color: var(--bg-ink); background: #1e1813; border-radius: 10px; padding: 12px; font-variant-numeric: tabular-nums;
}
.bg-app * { box-sizing: border-box; }
.bg-app.standalone { max-width: 980px; margin: 0 auto; border-radius: 0; min-height: 100dvh; padding: 12px 16px 32px; }
.bg-dim { color: var(--bg-dim); font-size: 12.5px; }
.bg-title { font-size: 17px; margin: 0 8px 0 0; letter-spacing: .02em; color: var(--bg-accent); }

.bg-hud { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.bg-wave b { font-size: 18px; }
.bg-wave small, .bg-cur small { color: var(--bg-dim); font-size: 12.5px; }
.bg-stat { font-size: 13px; color: var(--bg-dim); }
.bg-stat b { color: var(--bg-ink); }
.bg-grow { flex: 1; }
.bg-cur b { font-size: 17px; color: #ffe2a6; }

.bg-stage { position: relative; border-radius: 8px; overflow: hidden; border: 2px solid #4a3626; background: #2b1d14; }
.bg-stage canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.bg-closed { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; background: rgba(20, 14, 10, .85); color: var(--bg-dim); }
.bg-banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); padding: 6px 18px; border-radius: 6px; background: rgba(20, 12, 6, .8);
  color: #ffe08a; font-weight: 700; font-size: 20px; white-space: nowrap; pointer-events: none; border: 1px solid #6b4a2a; }
.bg-banner.on { animation: bg-banner 1.8s ease-out forwards; }
@keyframes bg-banner { 0% { opacity: 0; transform: translate(-50%, -20%); } 15% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; } 100% { opacity: 0; } }
.bg-power { display: flex; gap: 14px; flex-wrap: wrap; margin: 8px 0 12px; font-size: 13px; }

.bg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bg-line); margin-bottom: 12px; overflow-x: auto; }
.bg-tabs button { padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--bg-dim); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.bg-tabs button[aria-selected="true"] { color: var(--bg-ink); border-bottom-color: var(--bg-accent); font-weight: 600; }
.bg-tabs button:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: -2px; }

.bg-btn { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; min-height: 30px; border: 1px solid var(--bg-line); border-radius: 6px; background: var(--bg-panel2);
  color: var(--bg-ink); font: inherit; font-size: 13px; cursor: pointer; }
.bg-btn:hover:not(:disabled) { border-color: var(--bg-accent); }
.bg-btn:disabled { opacity: .45; cursor: default; }
.bg-btn.hot { background: #7a2e1f; border-color: #a5432b; }
.bg-btn small { opacity: .8; font-size: 11.5px; }
.bg-btn:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 1px; }

.bg-slots { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bg-slot { width: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border: 1px dashed var(--bg-line);
  border-radius: 8px; background: var(--bg-panel); color: var(--bg-ink); cursor: pointer; font: inherit; text-align: center; }
.bg-slot.front { border-style: solid; border-color: #8a3a28; }
.bg-slot.picking { outline: 2px solid var(--bg-accent); outline-offset: 1px; }
.bg-slotname { font-size: 11.5px; color: var(--bg-dim); }
.bg-empty { margin: auto; font-size: 12.5px; color: var(--bg-dim); }
@media (max-width: 640px) { .bg-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.bg-face { width: 64px; height: 64px; flex: none; border-radius: 6px; background: radial-gradient(circle at 50% 60%, #4a3a2c, #2a1f17); display: grid; place-items: center; overflow: hidden; }
.bg-face canvas { width: 64px; height: 64px; image-rendering: pixelated; }
.bg-face.unknown { font-weight: 700; color: var(--bg-dim); }
.bg-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bg-who b { font-size: 14px; }
.bg-who small, .bg-nums { font-size: 12px; color: var(--bg-dim); }
.bg-skill { font-size: 12px; margin-top: 2px; }
.bg-star { font-size: 11px; letter-spacing: -1px; }
.bg-star.s1 { color: #9aa0a6; } .bg-star.s2 { color: #5aa9f0; } .bg-star.s3 { color: #b77cf6; } .bg-star.s4 { color: #f2b51c; }

.bg-recruit { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.bg-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.bg-card { display: grid; grid-template-columns: 64px 1fr; gap: 4px 10px; padding: 10px; border: 1px solid var(--bg-line); border-radius: 8px; background: var(--bg-panel); }
.bg-card.s4 { border-color: #8a6a1c; background: linear-gradient(160deg, #3a2d18, var(--bg-panel) 60%); }
.bg-card.s3 { border-color: #5d3f80; }
.bg-card.inline { box-shadow: inset 3px 0 0 var(--bg-accent); }
.bg-card.pickable { cursor: pointer; }
.bg-card.pickable:hover, .bg-card.pickable:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 1px; }
.bg-card.locked { opacity: .45; }
.bg-lv { grid-column: 1 / -1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.bg-tag { font-size: 11.5px; color: var(--bg-accent); margin-left: auto; }

.bg-log { list-style: none; margin: 0; padding: 0; font-size: 13px; max-height: 260px; overflow: auto; }
.bg-log li { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--bg-line); }
.bg-log time { color: var(--bg-dim); flex: none; }
.bg-rules p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; }

.bg-pulls { width: min(640px, calc(100vw - 32px)); padding: 14px 16px 18px; border: 1px solid #6b4a2a; border-radius: 12px; background: #241b15; color: var(--bg-ink); }
.bg-pulls::backdrop { background: rgba(0, 0, 0, .6); }
.bg-pullhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 16px; }
.bg-pullgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.bg-pull { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border: 1px solid var(--bg-line); border-radius: 8px; text-align: center; font-size: 13px; animation: bg-pop .35s ease-out both; background: var(--bg-panel); }
.bg-pull small { color: var(--bg-dim); font-size: 11.5px; }
.bg-pull.s4 { border-color: #f2b51c; box-shadow: 0 0 0 2px rgba(242, 181, 28, .35), 0 0 22px rgba(242, 181, 28, .45); }
.bg-pull.s3 { border-color: #b77cf6; }
@keyframes bg-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

.bg-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 50; padding: 9px 16px; border-radius: 8px;
  background: #120d09; color: #ffe2a6; border: 1px solid #6b4a2a; font-size: 14px; transition: opacity .2s, transform .2s; }
.bg-toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .bg-pull, .bg-banner.on { animation: none; } .bg-toast { transition: none; } }
.bg-app [hidden] { display: none !important; }

/* equipment */
.bg-tabs small { font-size: 11px; color: var(--bg-accent); }
.bg-gear { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.bg-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--bg-line); border-radius: 8px; background: var(--bg-panel); }
.bg-iname { display: flex; flex-direction: column; min-width: 0; }
.bg-iname small { font-size: 12px; color: var(--bg-dim); }
.bg-iname .bg-on { color: var(--bg-accent); }
.bg-iact { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bg-sel { height: 30px; max-width: 150px; padding: 0 6px; border: 1px solid var(--bg-line); border-radius: 6px; background: var(--bg-panel2); color: var(--bg-ink); font: inherit; font-size: 13px; }
.bg-chip { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: #1a1410; border: 1px solid #4d3d2f; overflow: hidden; }
.bg-chip.big { width: 40px; height: 40px; }
.bg-chip canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.bg-chip.r1 { border-color: #62c46b; } .bg-chip.r2 { border-color: #4c9be8; } .bg-chip.r3 { border-color: #b77cf6; }
.bg-chip.r4 { border-color: #f2b51c; box-shadow: 0 0 8px rgba(242, 181, 28, .5); }
.bg-item.r4 { border-color: #8a6a1c; } .bg-item.r3 { border-color: #5d3f80; }
.bg-item.r1 b { color: #8fdc96; } .bg-item.r2 b { color: #7fbaf2; } .bg-item.r3 b { color: #cfa6fa; } .bg-item.r4 b { color: #ffd166; }
.bg-worn { display: flex; gap: 4px; margin-top: 4px; }
@media (max-width: 560px) { .bg-item { grid-template-columns: 40px 1fr; } .bg-iact { grid-column: 1 / -1; justify-content: flex-start; } }

/* 필살기 buttons and the cut-in */
.bg-ults { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.bg-ults:empty { display: none; }
.bg-ult { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 64px; padding: 4px; border: 1px solid var(--bg-line); border-radius: 8px;
  background: conic-gradient(rgba(217, 164, 65, .45) var(--g, 0%), var(--bg-panel) 0); color: var(--bg-dim); font: inherit; font-size: 11px; cursor: default; }
.bg-ult-auto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; border: 1px solid var(--bg-line); border-radius: 8px; background: var(--bg-panel); color: inherit; font: inherit; font-size: 11px; cursor: pointer; }
.bg-ult-auto b { font-size: 13px; color: var(--bg-dim, #9a8a74); }
.bg-ult-auto.on { border-color: #ffd166; }
.bg-ult-auto.on b { color: #ffd166; }
.bg-ult-auto:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 1px; }
.bg-sig { color: #8fc8ff; }
.bg-ult canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.bg-ult.ready { cursor: pointer; color: #ffe08a; border-color: #ffd166; background: radial-gradient(circle, rgba(255, 209, 102, .5), var(--bg-panel)); animation: bg-ult-pulse 1s ease-in-out infinite; }
.bg-ult:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 1px; }
@keyframes bg-ult-pulse { 50% { box-shadow: 0 0 14px rgba(255, 209, 102, .8); } }
.bg-cutin { position: absolute; left: 0; right: 0; top: 34%; display: flex; align-items: center; gap: 14px; padding: 6px 20px; background: linear-gradient(90deg, rgba(120, 20, 10, .0), rgba(120, 20, 10, .88) 20%, rgba(120, 20, 10, .88) 80%, rgba(120, 20, 10, 0)); pointer-events: none; }
.bg-cutin.on { animation: bg-cut 1.3s ease-out forwards; }
.bg-cutface canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.bg-cutin b { display: block; font-size: 22px; color: #fff; text-shadow: 0 2px 0 #000; }
.bg-cutin em { display: block; font-style: normal; font-size: 16px; color: #ffd166; text-shadow: 0 2px 0 #000; }
@keyframes bg-cut { 0% { transform: translateX(-60%); opacity: 0; } 18% { transform: translateX(0); opacity: 1; } 75% { transform: translateX(4%); opacity: 1; } 100% { transform: translateX(60%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bg-ult.ready, .bg-cutin.on { animation: none; } }

/* 조합 */
.bg-combos { margin-top: 10px; display: grid; gap: 6px; }
.bg-combos summary { cursor: pointer; font-size: 13px; color: var(--bg-dim); }
.bg-combolist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.bg-combo { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--bg-line); border-radius: 8px; background: var(--bg-panel2); font-size: 12.5px; }
.bg-combo.on { border-color: #ffd166; background: linear-gradient(135deg, rgba(255, 209, 102, .18), var(--bg-panel2)); }
.bg-combo.on b { color: #ffd166; }
.bg-combo small { color: var(--bg-dim); }
.bg-cmembers { display: flex; flex-wrap: wrap; gap: 3px; }
.bg-cm { padding: 0 5px; border-radius: 4px; font-size: 11.5px; border: 1px solid var(--bg-line); }
.bg-cm.in { background: var(--bg-accent); color: #1e1813; border-color: var(--bg-accent); }
.bg-cm.own { color: var(--bg-ink); }
.bg-cm.no { color: var(--bg-dim); opacity: .6; border-style: dashed; }
.bg-ctag { color: var(--bg-dim); }
.bg-ctag .on { color: #ffd166; }
.bg-cutin i { display: block; font-style: normal; font-size: 12px; color: #ffd166; }
/* 업적 */
.bg-achs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.bg-achs li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--bg-line); border-radius: 8px; background: var(--bg-panel); opacity: .55; }
.bg-achs li.got { opacity: 1; border-color: var(--bg-accent); background: linear-gradient(135deg, rgba(217, 164, 65, .18), var(--bg-panel)); }
.bg-achs b { font-size: 13.5px; }
.bg-achs small { color: var(--bg-dim); font-size: 12px; }