#player-inspector { box-sizing:border-box; width:min(660px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; overflow:hidden; border:3px solid var(--ink); border-radius:12px; background:var(--parchment); color:var(--ink); box-shadow:var(--bevel),var(--ledge); font:14px/1.45 var(--read); text-shadow:none; }
#player-inspector[open] { display:flex; flex-direction:column; }
#player-inspector::backdrop { background:rgb(20 35 28 / 65%); }
#player-inspector header { display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none; padding:12px 16px; border-bottom:1px solid #c9ad75; background:linear-gradient(#fff9e9,#efdaab); }
#player-inspector header > div { min-width:0; }
#player-inspector h2 { margin:0; font:22px/1.2 var(--read); font-weight:850; overflow-wrap:anywhere; }
#player-inspector .inspect-eyebrow { margin:0 0 2px; color:#74572e; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
#player-inspector .inspect-eyebrow.pioneer { color:#a86f0e; }   /* one of the first 1,000 (server/pioneers.js) */
#player-inspector .inspect-levels { margin:4px 0 0; font-size:12px; }
#player-inspector button { color:var(--ink); font:inherit; cursor:pointer; }
#player-inspector .inspect-close { flex:none; width:44px; height:44px; border:2px solid #9c7849; border-radius:8px; background:#fff8e8; font-size:28px; }
#player-inspector .inspect-scroll { min-height:0; padding:16px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
#player-inspector .inspect-layout { display:grid; grid-template-columns:168px minmax(0,1fr); align-items:center; gap:16px; }
#player-inspector .inspect-portrait { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid #d3bb87; border-radius:10px; background:radial-gradient(ellipse at 50% 45%,#fffbed,#e6d4ac); }
#player-inspector .inspect-portrait > canvas { width:150px; height:200px; max-width:100%; object-fit:contain; }
#player-inspector .inspect-turn { display:flex; gap:12px; padding:0 0 8px; }
#player-inspector .inspect-turn button { width:44px; height:44px; border:1px solid #b79865; background:#fff7e4; border-radius:8px; font-size:25px; }
#player-inspector [hidden] { display:none!important; }
#player-inspector .inspect-preview-note { padding:12px; text-align:center; color:#705b3f; }
#player-inspector .inspect-gear { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
#player-inspector .inspect-slot { display:flex; align-items:center; gap:8px; min-height:60px; min-width:0; padding:8px; border:1px solid #ba9b66; border-radius:8px; background:#fffaee; text-align:left; }
#player-inspector .inspect-slot:disabled { cursor:default; background:rgb(215 200 166 / 24%); color:#786b54; }
#player-inspector .inspect-slot[aria-pressed="true"] { border-color:#416b48; background:#e8efd7; box-shadow:inset 0 0 0 1px #416b48; }
#player-inspector button:hover:not(:disabled) { filter:brightness(1.035); }
#player-inspector button:focus-visible, #player-inspector summary:focus-visible { outline:3px solid #356b8c; outline-offset:2px; }
#player-inspector .inspect-slot > canvas,#player-inspector .inspect-slot > img { flex:none; width:36px; height:36px; image-rendering:pixelated; }
#player-inspector .inspect-slot .ghost { opacity:.55; }
#player-inspector .inspect-slot-copy { min-width:0; display:flex; flex-direction:column; font-size:12px; font-weight:800; overflow-wrap:anywhere; }
#player-inspector .inspect-slot-copy small { font-size:10px; font-weight:500; color:#78603a; }
#player-inspector .inspect-detail { border-top:1px solid #ccb17b; margin-top:16px; padding-top:12px; }
#player-inspector .inspect-detail h3 { margin:0; font-size:17px; }
#player-inspector .inspect-prompt { margin:0; text-align:center; color:#705b3f; }
#player-inspector .inspect-requires { margin:3px 0 10px; color:#705b3f; font-size:12px; }
#player-inspector table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
#player-inspector caption { text-align:left; font-size:12px; padding-bottom:8px; }
#player-inspector th,#player-inspector td { border-bottom:1px solid #dbc79f; padding:5px; text-align:right; }
#player-inspector th:first-child { text-align:left; }
#player-inspector tbody th { font-weight:500; }
#player-inspector thead { color:#74572e; font-size:11px; }
#player-inspector .better { color:#226438; font-weight:800; }
#player-inspector .worse { color:#9a342b; font-weight:800; }
#player-inspector .inspect-note,#player-inspector details { font-size:12px; }
#player-inspector summary { cursor:pointer; padding:10px 0; min-height:24px; }
#player-inspector details p { margin:0 0 8px; }
#player-inspector .inspect-status { margin:6px 0 0; min-height:16px; font-size:11px; color:#74572e; }
@media(max-width:540px) {
  #player-inspector header { padding:10px 12px; }
  #player-inspector .inspect-scroll { padding:12px; }
  #player-inspector .inspect-layout { grid-template-columns:1fr; gap:10px; }
  #player-inspector .inspect-portrait { flex-direction:row; min-height:144px; }
  #player-inspector .inspect-portrait > canvas { width:108px; height:144px; }
  #player-inspector .inspect-turn { flex-direction:column; padding:0 8px; gap:8px; }
  #player-inspector .inspect-slot { padding:6px; gap:5px; }
  #player-inspector .inspect-slot > canvas,#player-inspector .inspect-slot > img { width:30px; height:30px; }
}