#ui { position: fixed; inset: 0; display: none; z-index: 10; font-family: Mitr, sans-serif; color: #e9e1cf; }
#ui.open { display: flex; align-items: center; justify-content: center; }
#ui .ui-backdrop { position: absolute; inset: 0; background: rgba(5, 3, 8, 0.72); }
#ui .ui-panel {
  position: relative; width: min(860px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  background: linear-gradient(#17101e, #0d0912); border: 1.5px solid #8a6d2f; border-radius: 14px;
  box-shadow: 0 10px 40px #000; padding: 14px 16px 16px; box-sizing: border-box;
}
#ui header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#ui h2 { margin: 0; font-family: Chonburi, serif; font-weight: 400; color: #f2d27a; font-size: 24px; }
#ui h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: #c9a24a; display: flex; align-items: center; gap: 8px; }
#ui h3 small, #ui small { color: #8f84a0; font-weight: 400; }
#ui .coins { margin-left: auto; display: flex; align-items: center; gap: 6px; color: #f2d27a; }
#ui button {
  font: inherit; font-size: 13px; color: #1a1006; background: #d4a537; border: 0; border-radius: 8px;
  padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
#ui button:hover:not(:disabled) { background: #f2c14e; }
#ui button:disabled { opacity: 0.4; cursor: default; }
#ui button.ghost { background: transparent; color: #e9e1cf; border: 1px solid #5a4a30; }
#ui button.small { padding: 3px 10px; font-size: 12px; margin-left: auto; }
#ui button.x { background: transparent; color: #cfc6db; font-size: 18px; padding: 2px 8px; }
#ui .msg { padding: 6px 10px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; }
#ui .msg.ok { background: #1d3a26; color: #9fe0b8; }
#ui .msg.bad { background: #3a1a1d; color: #ff9a9a; }

#ui .ui-body.bag { display: grid; grid-template-columns: 210px 1fr 230px; gap: 14px; }
#ui section { background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 10px; min-width: 0; }
#ui .slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
#ui .slot { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
#ui .grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
#ui .cell {
  position: relative; aspect-ratio: 1; min-width: 38px; border-radius: 8px; background: #0a070d;
  border: 2px solid #2a2233; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
#ui .cell.empty { cursor: default; border-style: dashed; }
#ui .cell img { width: 70%; image-rendering: pixelated; }
#ui .cell.sel { outline: 2px solid #fff3c4; outline-offset: 1px; }
#ui .r-common { border-color: #5d566a; }
#ui .r-rare { border-color: #4f86d9; box-shadow: inset 0 0 10px rgba(111, 168, 255, 0.35); }
#ui .r-legend { border-color: #e0a63a; box-shadow: inset 0 0 12px rgba(242, 184, 74, 0.5); }
#ui .cell .plus { position: absolute; right: 3px; bottom: 1px; font-size: 11px; color: #ffe08a; }
#ui .cell .new { position: absolute; left: 2px; top: 0; font-size: 9px; font-style: normal; color: #9fe0b8; }

#ui ul.stats { list-style: none; margin: 0; padding: 0; font-size: 13px; }
#ui ul.stats li { display: flex; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
#ui ul.stats li span { color: #a89cb5; flex: 1; }
#ui ul.stats em { font-style: normal; font-size: 11px; }
#ui em.up { color: #6dff8f; }
#ui em.down { color: #ff6b6b; }
#ui .detail-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
#ui .detail-head img { width: 44px; height: 44px; padding: 6px; border: 2px solid; border-radius: 8px; background: #0a070d; image-rendering: pixelated; }
#ui .detail-head h4 { margin: 0; font-size: 16px; font-weight: 500; }
#ui .actions { display: flex; gap: 8px; margin-top: 12px; }
#ui .hint { color: #8f84a0; font-size: 12px; margin: 8px 0 0; }

#ui .tabs { display: flex; gap: 6px; margin-bottom: 10px; }
#ui .tabs button { background: transparent; color: #cfc6db; border: 1px solid #3a2f45; }
#ui .tabs button.on { background: #3a1d14; color: #f2d27a; border-color: #8a6d2f; }
#ui .ui-body.shop { display: flex; flex-direction: column; gap: 8px; }
#ui .say { margin: 0 0 4px; color: #9fe0b8; font-size: 13px; }
#ui .row { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.03); border-radius: 10px; padding: 8px 10px; }
#ui .row > img { width: 32px; height: 32px; image-rendering: pixelated; }
#ui .row .cell { width: 40px; min-width: 40px; cursor: default; }
#ui .row.dim { opacity: 0.5; }
#ui .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }

#ui .ui-panel.narrow { width: min(520px, calc(100vw - 24px)); }
#ui form.name { display: flex; flex-direction: column; gap: 10px; }
#ui input[name=name] {
  font: inherit; font-size: 18px; color: #f2d27a; background: #0a070d; border: 1.5px solid #5a4a30;
  border-radius: 8px; padding: 10px 12px; outline: none;
}
#ui input[name=name]:focus { border-color: #d4a537; }
#ui .board-wrap { max-height: min(56vh, 420px); overflow: auto; }
#ui table.board { width: 100%; border-collapse: collapse; font-size: 13px; }
#ui table.board th { text-align: left; color: #8f84a0; font-weight: 400; padding: 4px 6px; position: sticky; top: 0; background: #130d18; }
#ui table.board td { padding: 6px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
#ui table.board td:first-child { color: #c9a24a; width: 28px; }
#ui table.board tr:nth-child(-n+3) td:first-child { color: #ffe08a; font-weight: 500; }
#ui table.board tr.me td { background: rgba(212, 165, 55, 0.14); color: #fff3c4; }

@media (max-width: 820px) {
  #ui .ui-body.bag { grid-template-columns: 1fr 1fr; }
  #ui .ui-body.bag .detail { grid-column: 1 / -1; }
  #ui .grid { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 560px) {
  #ui .ui-body.bag { grid-template-columns: 1fr; }
  #ui .grid { grid-template-columns: repeat(6, 1fr); }
}