/* The Character sheet (C).

   z-index 205 puts it above the Spellbook (200) and below Inventory (210), which
   is the order those two already sit in; the four panel z-indexes are spread
   across four stylesheets, so anything picked without checking them renders under
   a dimmer. Sizing follows the Inventory shell so the two feel like one family. */

.characterSheetPanel { position:fixed; inset:0; z-index:205; display:grid; place-items:center; }
.characterSheetDimmer { position:absolute; inset:0; background:rgba(6,5,12,.72); backdrop-filter:blur(2px); }

.characterSheetShell {
  position:relative;
  width:min(1080px, calc(100vw - 32px));
  height:min(760px, calc(100dvh - 32px));
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:14px;
  padding:20px 22px 16px;
  border:1px solid var(--ui-border, rgba(217,176,91,.3));
  border-radius:16px;
  background:linear-gradient(160deg, rgba(26,22,40,.98), rgba(12,10,20,.99));
  box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  color:var(--ui-text, #e8e1ed);
}

.characterSheetClose {
  position:absolute; top:12px; right:12px; z-index:2;
  width:34px; height:34px; padding:0;
  border:1px solid var(--ui-divider, rgba(140,128,168,.35)); border-radius:9px;
  background:rgba(20,17,32,.9); color:#e6dcff; font-size:15px; cursor:pointer;
}
.characterSheetClose:hover { border-color:var(--ui-gold, #d9b05b); }

.characterSheetHeader { padding-right:44px; }
.characterSheetHeader strong { font:700 17px var(--ui-font, system-ui); letter-spacing:.2px; color:#f2e8d1; }

/* Portrait on the left, everything you can read or spend on the right. */
.characterSheetBody { display:grid; grid-template-columns:minmax(220px, 320px) minmax(0,1fr); gap:20px; min-height:0; }

.characterSheetPortrait { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:10px; min-height:0; }
#characterSheetPreview {
  width:100%; height:100%; min-height:0;
  aspect-ratio:420/500; object-fit:contain;
  border-radius:12px;
  background:radial-gradient(circle at 50% 58%, rgba(112,83,181,.18), rgba(12,10,20,0) 70%);
}
.characterSheetIdentity { display:grid; gap:2px; text-align:center; }
.characterSheetIdentity strong { font:700 18px Georgia, "Times New Roman", serif; color:#f5dfad; }
.characterSheetIdentity span { color:#c2b6d8; font:600 12px var(--ui-font, system-ui); letter-spacing:.06em; text-transform:uppercase; }
.characterSheetIdentity small { color:var(--ui-muted, #8d8397); font-size:11px; }

.characterSheetColumns { display:grid; grid-template-rows:auto minmax(0,1fr); gap:14px; min-height:0; }

/* --- attribute points --- */
.characterSheetPoints { display:grid; gap:8px; align-content:start; }
.characterSheetPointsHead { display:flex; align-items:baseline; gap:10px; }
.characterSheetPointsHead span { color:#9c8dac; font:900 9px var(--ui-font, system-ui); letter-spacing:.16em; }
.characterSheetPointsHead strong { font:700 20px Georgia, serif; color:#f0ce82; }
.characterSheetPointsHead small { color:var(--ui-muted, #8d8397); font-size:11px; }

.characterSheetAttribute {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px;
  padding:9px 12px;
  border:1px solid var(--ui-divider, rgba(140,128,168,.28)); border-radius:11px;
  background:rgba(22,19,36,.72);
}
.characterSheetAttributeCopy { display:grid; gap:1px; min-width:0; }
.characterSheetAttributeCopy strong { font:700 13px var(--ui-font, system-ui); color:#e8e1ed; }
.characterSheetAttributeCopy small { color:var(--ui-muted, #8d8397); font-size:11px; }
/* The honest label for an attribute nothing reads yet. It is dimmer than the rest
   rather than hidden, because a point you can spend on it is still spendable. */
.characterSheetAttributeEffect { color:#a9b8e8 !important; font-size:10px !important; }
.characterSheetAttributeEffect.pending { color:#7d7590 !important; font-style:italic; }

.characterSheetAttributeValue { font:700 20px Georgia, serif; color:#f5dfad; font-variant-numeric:tabular-nums; min-width:28px; text-align:right; }

.characterSheetAttributeSpend {
  width:30px; height:30px; padding:0;
  border:1px solid var(--ui-gold, #d9b05b); border-radius:8px;
  background:rgba(60,46,20,.55); color:#f5dfad; font:700 16px var(--ui-font, system-ui); cursor:pointer;
}
.characterSheetAttributeSpend:hover:not(:disabled) { background:rgba(96,74,32,.7); }
.characterSheetAttributeSpend:disabled { opacity:.32; cursor:default; border-color:var(--ui-divider, rgba(140,128,168,.28)); }

.characterSheetEmpty { color:var(--ui-muted, #8d8397); font-size:12px; margin:0; }

/* The stats block migrated out of Inventory. It kept its .characterStats class, so
   public/css/character-stats.css still styles the rows; only the frame is new.

   It scrolls when the window is short -- at a 680px viewport it has about 64px more
   than it can show -- but it does not wear the platform scrollbar to do it. The
   default is a wide opaque track that reads as chrome bolted onto a dark panel. This
   is a thin translucent thumb on no track at all, in the panel's own divider colour,
   warming to the gold token on hover. scrollbar-width/-color cover Firefox and
   Chromium 121+; the ::-webkit- rules cover older Chromium and Safari, and the two
   are kept in step deliberately. The gutter is held open with padding-right so the
   rows do not shift sideways when the bar appears. */
.characterSheetShell #characterSheetStats {
  min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:rgba(140,128,168,.32) transparent;
  scrollbar-gutter:stable;
}
.characterSheetShell #characterSheetStats:hover { scrollbar-color:rgba(217,176,91,.45) transparent; }
.characterSheetShell #characterSheetStats::-webkit-scrollbar { width:6px; }
.characterSheetShell #characterSheetStats::-webkit-scrollbar-track { background:transparent; }
.characterSheetShell #characterSheetStats::-webkit-scrollbar-thumb {
  background:rgba(140,128,168,.32); border-radius:999px;
}
.characterSheetShell #characterSheetStats:hover::-webkit-scrollbar-thumb { background:rgba(217,176,91,.45); }
.characterSheetShell #characterSheetStats::-webkit-scrollbar-thumb:hover { background:rgba(217,176,91,.7); }

.characterSheetFooterHint { display:flex; align-items:center; gap:6px; justify-content:flex-end; color:var(--ui-muted, #8d8397); font-size:10px; }
.characterSheetFooterHint kbd {
  padding:1px 6px; border:1px solid var(--ui-divider, rgba(140,128,168,.35)); border-radius:5px;
  background:rgba(20,17,32,.8); font:700 10px var(--ui-font, system-ui);
}

@media (max-width:860px) {
  .characterSheetShell { padding:16px 14px 12px; gap:10px; }
  .characterSheetBody { grid-template-columns:1fr; grid-template-rows:minmax(160px,34%) minmax(0,1fr); }
  .characterSheetPortrait { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); align-items:center; }
  .characterSheetIdentity { text-align:left; }
  .characterSheetFooterHint { display:none; }
}

/* Reset sits beside the close, not under it: both are corner actions and the close
   must stay the rightmost thing a player reaches for. */
.characterSheetReset {
  position:absolute; top:12px; right:54px; z-index:2;
  padding:0 10px; height:34px;
  border:1px solid var(--ui-divider, rgba(140,128,168,.35)); border-radius:9px;
  background:rgba(20,17,32,.9); color:#c2b6d8;
  font:600 11px var(--ui-font, system-ui); cursor:pointer;
}
.characterSheetReset:hover:not(:disabled) { border-color:var(--ui-gold, #d9b05b); color:#f5dfad; }
.characterSheetReset:disabled { opacity:.35; cursor:default; }
.characterSheetHeader { padding-right:150px; }

@media (max-width:860px){
  .characterSheetReset { font-size:10px; padding:0 8px; right:48px; }
  .characterSheetHeader { padding-right:140px; }
}