/* ==========================================================================
   §20 THE PLATE THEME — PREVIEW
   The rest of the screen in the header's language: slanted tags for panel
   titles, a cut corner on every panel, bars that lean, big italic numbers,
   and buttons shaped like the chips. Loaded last, so it only overrides.
   ========================================================================== */
:root{
  --pl-font:"Impact","Haettenschweiler","Arial Narrow Bold","Oswald",sans-serif;
  --pl-edge:#0e4e78;
  --pl-skew:-14deg;
  --pl-cut:14px;
}

/* ---- panels: a cut top-right corner and a lit top edge ---- */
.card{border:1px solid var(--pl-edge);border-top:2px solid #155d8c;
  background:linear-gradient(170deg,#0a2a41 0%,var(--navy-2) 38%,#001d2f 100%);
  clip-path:polygon(0 0,calc(100% - var(--pl-cut)) 0,100% var(--pl-cut),100% 100%,0 100%)}

/* ---- panel titles: a slanted tag with the yellow bar in front ---- */
.card h2{position:relative;display:flex;align-items:center;gap:8px;
  font-family:var(--pl-font) !important;font-weight:400;font-style:italic;
  font-size:17px;letter-spacing:.06em;color:var(--blue-lit);
  border:0;border-bottom:1px solid var(--pl-edge);padding:0 0 6px 16px;margin-bottom:10px}
.card h2::before{content:"";position:absolute;left:2px;top:2px;width:6px;height:15px;
  background:var(--yellow);transform:skewX(var(--pl-skew));box-shadow:0 0 6px rgba(255,214,74,.45)}
.card h2 .fold{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.14em;
  color:var(--blue-dim);margin-left:auto;padding:2px 7px;border:1px solid var(--pl-edge);
  transform:skewX(var(--pl-skew))}

/* ---- the stat bars: italic labels, a big number, a leaning segmented track ---- */
.bar{margin-bottom:9px}
.bar .r{align-items:baseline;margin-bottom:3px}
.bar .r > span:first-child{font-family:var(--pl-font);font-style:italic;font-size:14px;
  letter-spacing:.08em;color:var(--blue-lit)}
.bar .r > span:last-child{font-family:var(--pl-font);font-style:italic;font-size:19px;color:#fff;
  text-shadow:2px 2px 0 #041a2a}
.bar .t{height:9px;transform:skewX(var(--pl-skew));border:1px solid var(--pl-edge);
  background:repeating-linear-gradient(90deg,#03192a 0 9px,#021420 9px 10px)}
.bar .t span{border-radius:0;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 10px);
          mask:repeating-linear-gradient(90deg,#000 0 9px,transparent 9px 10px)}
.bar.low .r > span:first-child, .bar.low .r > span:last-child{color:var(--alarm)}

/* the six headings under your face, as a plate of their own */
#sheet{transform:skewX(var(--pl-skew));border-left:4px solid var(--yellow) !important}
#sheet > span{display:inline-block;transform:skewX(14deg)}
#purse{font-family:var(--pl-font);font-style:italic;font-size:22px}
#face{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}

/* ---- the people list: slanted status dots, names a touch bigger ---- */
#cast li .rdot{border-radius:0;width:7px;height:9px;transform:skewX(var(--pl-skew))}
#cast li{border-bottom:1px solid rgba(14,78,120,.45)}
#cast li:hover{background:linear-gradient(90deg,rgba(255,214,74,.10),transparent 70%)}

/* ---- the room caption under the picture, as a tag ---- */
#sceneCap, #viewCaption{font-family:var(--pl-font) !important;font-style:italic;letter-spacing:.1em}

/* ---- the scene box: yellow edge, cut corner, the portrait framed like the plate ---- */
#sitBox{border:1px solid var(--pl-edge);border-left:4px solid var(--yellow) !important;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%)}
#portrait{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
#probes .hint, #choices .hint{font-family:var(--pl-font);font-style:italic;font-size:13px;
  letter-spacing:.12em;color:var(--blue-lit)}

/* ---- buttons: parallelograms, cut with clip-path so the text stays upright ---- */
#choices button{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
  border-radius:0 !important;padding-left:24px}
#choices button::before{transform:skewX(var(--pl-skew));left:10px;width:5px}
#choices button .chk{font-family:var(--pl-font);font-style:italic;font-size:12px}
#probes button, #acts button{clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);
  border-radius:0 !important;padding-left:14px;padding-right:14px}
#probes button.cat{padding-left:26px;font-family:var(--pl-font) !important;font-style:italic;
  font-size:14px;letter-spacing:.08em}
#acts button.grp{font-family:var(--pl-font);font-style:italic;font-size:14px;letter-spacing:.05em}
#acts button .cost, #probes button .cost{font-family:var(--mono);font-style:normal}

/* ---- the three buttons under the talk list ---- */
#tools button{clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);border-radius:0;
  font-family:var(--pl-font);font-style:italic;font-size:14px;letter-spacing:.08em}

/* the tips card's two buttons */
#trNext, #trStop{clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);border-radius:0;
  padding-left:14px;padding-right:14px;font-family:var(--pl-font);font-style:italic;font-size:14px;letter-spacing:.08em}