/* หน่วยซีล summary panel on the Overview (display only), light comic theme like the other cards. Also lays the four chooser cards out as 4 / 2x2 / 1 column. */
#overview .overview-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { #overview .overview-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { #overview .overview-pick { grid-template-columns: minmax(0, 1fr); } }
#overview #overviewSeal[hidden] { display: none; }
#overview #overviewSeal .os-box { border: 3px solid var(--ink, #141414); border-radius: 6px; background: var(--surface, #fffdf5); color: var(--ink, #141414); padding: 14px; box-shadow: 3px 3px 0 var(--ink, #141414); display: grid; gap: 12px; min-width: 0; }
#overview #overviewSeal .os-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
#overview #overviewSeal .os-head img { flex: none; width: 96px; height: auto; max-width: 28vw; }
#overview #overviewSeal .os-say { margin: 0; padding: 10px 14px; border: 3px solid var(--ink, #141414); border-radius: 14px; background: #fff; font-family: 'Itim', 'Noto Sans Thai', sans-serif !important; font-variant-numeric: normal; font-size: 1.15rem; line-height: 1.35; overflow-wrap: anywhere; min-width: 0; }
#overview #overviewSeal .os-row { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
#overview #overviewSeal .os-badge { display: inline-block; padding: 4px 12px; border: 2px solid var(--ink, #141414); border-radius: 999px; background: #fff; font-size: .9rem; font-weight: 600; overflow-wrap: anywhere; }
#overview #overviewSeal .os-badge.os-real { background: #d7263d; color: #fff; }
#overview #overviewSeal .os-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0; }
#overview #overviewSeal .os-stats > div { border: 2px solid var(--ink, #141414); border-radius: 6px; background: #fff; padding: 10px 12px; min-width: 0; }
#overview #overviewSeal dt { font-size: .9rem; color: var(--muted, #4f4a3c); margin: 0 0 8px; }
#overview #overviewSeal dd { margin: 0; font-size: 1.5rem; font-weight: 700; overflow-wrap: anywhere; }
#overview #overviewSeal .os-box small { font-size: .85rem; font-weight: 400; color: var(--muted, #4f4a3c); }
#overview #overviewSeal .os-up { color: #0b7a3a; }
#overview #overviewSeal .os-down { color: #c0182f; }
#overview #overviewSeal .os-na { color: var(--muted, #4f4a3c); font-weight: 400; font-size: 1rem; }
#overview #overviewSeal .os-coins { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
#overview #overviewSeal .os-coins li { display: grid; gap: 8px; border: 2px solid var(--ink, #141414); border-radius: 6px; background: #fff; padding: 10px 12px; font-size: .95rem; min-width: 0; overflow-wrap: anywhere; }
#overview #overviewSeal .os-coins b { font-size: 1.15rem; }
#overview #overviewSeal .os-dir { color: var(--muted, #4f4a3c); }
#overview #overviewSeal .os-msg, #overview #overviewSeal .os-note { margin: 0; font-size: .9rem; color: var(--muted, #4f4a3c); overflow-wrap: anywhere; }
#overview #overviewSeal .os-go { justify-self: start; min-height: 44px; padding: 8px 16px; border: 3px solid var(--ink, #141414); border-radius: 6px; background: var(--cyan-fill, #2ee6d0); color: var(--ink, #141414); font-weight: 700; cursor: pointer; box-shadow: 3px 3px 0 var(--ink, #141414); }
#overview #overviewSeal .os-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink, #141414); }
#overview #overviewSeal .os-real { border-top: 3px dashed var(--ink, #141414); padding-top: 12px; display: grid; gap: 12px; }
#overview #overviewSeal .os-real h3 { margin: 0; font-size: 1.15rem; }
#overview #overviewSeal .os-badge.os-real-b { background: #d7263d; color: #fff; }
@media (max-width: 480px) { #overview #overviewSeal .os-head img { width: 72px; } #overview #overviewSeal .os-go { justify-self: stretch; } }