/* Author: goodjava@qq.com */
.card-slot { --card-width: 156px; --card-height: 248px; position: relative; flex: 0 0 var(--card-width); width: var(--card-width); height: var(--card-height); isolation: isolate; text-align: left; }
.face { --card-ink: #2e574d; position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; padding: 10px 12px 8px; box-sizing: border-box; overflow: hidden; border: 1px solid #b5a481; border-radius: 10px 10px 8px 8px; color: #302e25; background: linear-gradient(145deg,#fcf8ec,#e8dfc8); box-shadow: inset 0 0 0 3px #f6f0df,inset 0 0 0 4px #cfc0a0,0 5px 12px #08171140; transition: border-color .15s,box-shadow .15s; text-align: left; }
.face[data-tone="attack"] { --card-ink: #8b4c37; }
.face[data-tone="forbidden"] { --card-ink: #6b4f79; }
.face[data-tone="curse"] { --card-ink: #625958; background: linear-gradient(145deg,#e6ded5,#c5bbae); }
.face .card-top { display: flex; align-items: center; justify-content: space-between; height: 26px; flex-shrink: 0; position: relative; z-index: 2; }
.face .cost { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--card-ink); border: 1px solid #c5b17f; color: #fff8e6; font: 600 18px/1 Georgia,serif; box-shadow: 0 0 0 2px #f7efd9; }
.face .card-type { font-size: 10px; letter-spacing: .15em; color: var(--card-ink); }
.face .card-picture { flex-shrink: 0; height: 68px; margin: 7px 0 0; overflow: hidden; border: 1px solid #c5b797; border-radius: 3px; background: #e1d7b9; }
.face .art { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.face .name { display: block; margin: 8px 0 5px; padding-bottom: 6px; border-bottom: 1px solid #c6b795; color: #283b33; font-size: 17px; font-weight: 600; text-align: center; line-height: 1.25; letter-spacing: .03em; }
.face .desc { display: block; flex: 1; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.face .card-foot { display: block; margin-top: 4px; color: #897b62; font-size: 9px; letter-spacing: .08em; line-height: 16px; }
.face.dim { filter: none; background: linear-gradient(145deg,#e7e3d7,#cfcbbd); box-shadow: inset 0 0 0 3px #e2ddcf,inset 0 0 0 4px #bcb49e; }
.face.dim .cost { background: #747970; }
.face.dim .art { opacity: .55; }
.face:disabled { cursor: default; }
.card-slot:has(.face:not(:disabled)):hover .face, .face:focus-visible { border-color: #a78136; box-shadow: inset 0 0 0 3px #fbf6e5,inset 0 0 0 4px #bd9b56,0 8px 22px #071b1760; }
.card-inspect { position: absolute; bottom: 5px; right: 6px; z-index: 3; width: 30px; height: 26px; border-radius: 5px; border: 1px solid #b9aa87; background: #f4eddc; color: #5b6555; font-size: 11px; }
.card-inspect:hover { background: #ddcfaa; color: #293d31; }
.card-inspect[hidden] { display: none; }
.hand .card-slot { transition: transform .18s; transform-origin: bottom center; }
@media (hover:hover) { .hand .card-slot:hover, .hand .card-slot:focus-within { transform: translateY(-12px); z-index: 4; } }
.bag-grid { grid-template-columns: repeat(auto-fill,minmax(156px,1fr)); gap: 24px 14px; }
.bag-card { display: flex; align-items: center; flex-direction: column; gap: 8px; }
.bag-card small { font-size: 11px; color: #69715e; margin: 0; line-height: 1.5; }
.loot { gap: 18px; margin: 24px 0; align-items: start; }
.loot > div { text-align: center; }
.loot p { font-size: 13px; color: #6c5937; }
.card-detail { box-sizing: border-box; width: min(430px,calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 32px; border: 1px solid #b29a6b; border-radius: 12px; box-shadow: 0 24px 100px #0008; background: #f4ecda; color: #273d33; font-family: "Songti SC",serif; }
.card-detail::backdrop { background: #071a17b8; backdrop-filter: blur(4px); }
.card-detail h2 { font-size: 28px; margin: 12px 0; }
.detail-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; font: 26px/1 sans-serif; color: #676c5e; }
.detail-cost { font-size: 13px; color: #876b3a; }
.detail-description { border-block: 1px solid #d2c4a6; padding: 24px 0; font-size: 18px; line-height: 1.9; overflow-wrap: anywhere; }
.card-detail .muted { font-size: 12px; line-height: 1.7; }
.detail-return { width: 100%; margin-top: 18px; }
@media (max-width:700px) {
  .card-slot { --card-width: 144px; --card-height: 236px; }
  .face { padding: 9px 11px 7px; }
  .face .card-picture { height: 58px; }
  .face .name { font-size: 16px; }
  .face .desc { font-size: 12px; }
  .card-inspect { width: 36px; height: 30px; bottom: 3px; right: 3px; }
  .bag-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 10px; }
  .bag-grid .card-slot { --card-width: min(144px,100%); }
  .loot { gap: 16px 10px; }
}
@media (prefers-reduced-motion:reduce) { .hand .card-slot { transition: none; } }
.bag-card > .card-slot { flex: none; }