/* ==========================================================
   D&D Home Page: frame safety + 3-wide cards
   ========================================================== */

body:not(.hank-workspace) .hank-blue-page,
body:not(.hank-workspace) #tiles{
    min-height:100vh !important;
    height:auto !important;
    overflow:visible !important;
}

body:not(.hank-workspace) #tiles{
    padding-bottom:150px !important;
}

.home-split{
    width:min(1500px,96vw) !important;
    grid-template-columns:1fr 1fr !important;
    gap:42px !important;
    align-items:start !important;
}

.home-split .home-parties{
    width:100% !important;
}

.home-split .home-party-row{
    display:grid !important;
    grid-template-columns:repeat(3, 210px) !important;
    gap:22px !important;
    justify-content:center !important;
    align-items:start !important;
}

@media (max-width:1350px){
    .home-split .home-party-row{
        grid-template-columns:repeat(2, 210px) !important;
    }
}

@media (max-width:900px){
    .home-split{
        grid-template-columns:1fr !important;
    }

    .home-split .home-party-row{
        grid-template-columns:repeat(3, 210px) !important;
    }
}

@media (max-width:720px){
    .home-split .home-party-row{
        grid-template-columns:repeat(2, 210px) !important;
    }
}

@media (max-width:500px){
    .home-split .home-party-row{
        grid-template-columns:1fr !important;
    }
}

/* Party page final layout */
.party-side-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.party-planet-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 8px 0 18px;
}

#partyNotes {
  min-height: 160px;
  height: auto;
  overflow-y: hidden;
  resize: none;
  box-sizing: border-box;
}

.party-page-v2 {
  align-items: start;
  height: auto !important;
  min-height: 100%;
  padding-bottom: 140px;
}

.character-page-v5 {
  background: var(--char-theme);
}

.character-theme-title {
  background: var(--char-theme-dark) !important;
  color: var(--char-theme-text) !important;
}

/* Visual dice tray */

.visual-dice-tray {
  min-height: 150px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  align-content: center;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.12);
}

.visual-die {
  width: 82px;
  height: 82px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid currentColor;
  background: rgba(255,255,255,.08);
  clip-path: polygon(
    50% 0%,
    92% 22%,
    100% 68%,
    70% 100%,
    30% 100%,
    0% 68%,
    8% 22%
  );
}

.visual-die-type {
  font-size: 12px;
  opacity: .8;
}

.visual-die-value {
  font-size: 28px;
  line-height: 1;
}

.dice-rolling {
  animation: hankDiceRoll .65s ease-in-out;
}

@keyframes hankDiceRoll {
  0%   { transform: rotate(0deg) scale(1); }
  20%  { transform: rotate(-18deg) scale(1.12); }
  40%  { transform: rotate(20deg) scale(.94); }
  60%  { transform: rotate(-14deg) scale(1.08); }
  80%  { transform: rotate(10deg) scale(.98); }
  100% { transform: rotate(0deg) scale(1); }
}

.dice-total {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.dice-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.dice-breakdown span {
  padding: 6px 10px;
  border: 1px solid currentColor;
}

/* D&D home cards */
.dnd-home-split{
  width:min(1600px,96vw) !important;
  grid-template-columns:1fr 1fr !important;
  gap:56px !important;
}

.dnd-home-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 250px) !important;
  gap:28px !important;
  justify-content:center !important;
}

.dnd-home-card{
  width:250px !important;
  min-height:245px !important;
  box-sizing:border-box !important;
}

.dnd-card-image{
  width:100%;
  height:105px;
  margin:10px 0 12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.16);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:10px;
}

.dnd-card-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

@media(max-width:1500px){
  .dnd-home-grid{ grid-template-columns:repeat(2, 250px) !important; }
}

@media(max-width:950px){
  .dnd-home-split{ grid-template-columns:1fr !important; }
  .dnd-home-grid{ grid-template-columns:repeat(3, 250px) !important; }
}

/* Correct character theme target */
.character-page-v5{
  background:transparent !important;
}

.character-title-bar,
.character-theme-title{
  background:var(--char-theme-dark) !important;
  color:var(--char-theme-text) !important;
}

.character-sheet-main,
.character-sheet,
.character-sheet-v5{
  background:var(--char-theme) !important;
}

/* Dice readability + shape differentiation */
.visual-die{
  background:#d9d9d9 !important;
  color:#111 !important;
  border-color:#f4f4f4 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

.visual-die-d4{
  clip-path:polygon(50% 4%, 96% 92%, 4% 92%) !important;
}

.visual-die-d6,
.visual-die-d100{
  clip-path:polygon(8% 8%, 92% 8%, 92% 92%, 8% 92%) !important;
}

.visual-die-d8{
  clip-path:polygon(50% 0%, 96% 50%, 50% 100%, 4% 50%) !important;
}

.visual-die-d10{
  clip-path:polygon(50% 0%, 92% 28%, 82% 86%, 50% 100%, 18% 86%, 8% 28%) !important;
}

.visual-die-d12{
  clip-path:polygon(50% 0%, 82% 12%, 100% 42%, 94% 74%, 68% 100%, 32% 100%, 6% 74%, 0% 42%, 18% 12%) !important;
}

.visual-die-d20{
  clip-path:polygon(50% 0%, 90% 18%, 100% 55%, 75% 92%, 25% 92%, 0% 55%, 10% 18%) !important;
}

/* Home card spacing refinement */
.dnd-home-split{
  width:min(1680px,98vw) !important;
  gap:72px !important;
}

.dnd-home-grid{
  grid-template-columns:repeat(3, 230px) !important;
  gap:34px !important;
}

.dnd-home-card{
  width:230px !important;
  min-height:250px !important;
}

@media(max-width:1500px){
  .dnd-home-grid{ grid-template-columns:repeat(2, 230px) !important; }
}

/* Dice 3D face detail */
.visual-die{
  background:
    linear-gradient(145deg, #f2f2f2 0%, #d5d5d5 45%, #b9b9b9 100%) !important;
  color:#111 !important;
  border:2px solid #ffffff !important;
  box-shadow:
    inset -10px -10px 18px rgba(0,0,0,.18),
    inset 8px 8px 14px rgba(255,255,255,.85),
    0 10px 22px rgba(0,0,0,.38) !important;
}

.visual-die::before{
  content:"";
  position:absolute;
  inset:10px;
  border-top:2px solid rgba(255,255,255,.8);
  border-left:2px solid rgba(255,255,255,.55);
  border-right:2px solid rgba(0,0,0,.18);
  border-bottom:2px solid rgba(0,0,0,.22);
  clip-path:inherit;
  pointer-events:none;
}

.visual-die-type,
.visual-die-value{
  position:relative;
  z-index:2;
}

/* Character theme refinement: less extreme header/body contrast */
.character-title-bar,
.character-theme-title{
  background: var(--char-theme) !important;
  color: var(--char-theme-text) !important;
}

.character-sheet-main,
.character-sheet,
.character-sheet-v5,
.character-sheet-body-v5{
  background: color-mix(in srgb, var(--char-theme) 62%, white 38%) !important;
}

/* Dice stronger 3D effect + remove affordance */
.visual-die{
  cursor:pointer;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(145deg, #ffffff 0%, #d8d8d8 42%, #9f9f9f 100%) !important;
  box-shadow:
    inset 10px 10px 14px rgba(255,255,255,.75),
    inset -14px -14px 20px rgba(0,0,0,.28),
    0 10px 22px rgba(0,0,0,.42) !important;
}

.visual-die:hover{
  transform:translateY(-3px) scale(1.04);
}

.wizard-mini-dice-tray{
  min-height:90px;
  padding:12px;
  margin:10px 0 14px;
  gap:12px;
}

.wizard-mini-dice-tray .visual-die{
  width:62px;
  height:62px;
}

.wizard-mini-dice-tray .visual-die-value{
  font-size:22px;
}

.wizard-ability-rolls{
  display:grid;
  gap:12px;
}

.wizard-ability-roll-row{
  display:grid;
  grid-template-columns:72px auto 64px minmax(180px,1fr);
  align-items:center;
  gap:12px;
  padding:12px;
  border:1px solid var(--border-color, rgba(255,255,255,.24));
  border-radius:10px;
}

.wizard-ability-dice-box{
  min-height:48px;
  margin:0;
  display:grid;
  place-items:center;
}

.wizard-ability-output{
  font-size:1.5rem;
  font-weight:800;
  text-align:center;
}

.wizard-ability-dice-results{
  grid-column:1 / -1;
  display:flex;
  gap:8px;
  min-height:42px;
}

.wizard-ability-dice-results .visual-die{
  width:42px;
  height:42px;
  cursor:default;
}

.wizard-ability-dice-results .visual-die-value{
  font-size:16px;
}

.wizard-die-dropped{
  opacity:.48;
  text-decoration:line-through;
  filter:grayscale(1);
}

@media (max-width:680px){
  .wizard-ability-roll-row{
    grid-template-columns:64px auto 54px;
  }
  .wizard-ability-roll-row select{
    grid-column:1 / -1;
  }
}

.wizard-method-grid,
.wizard-class-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

.wizard-method-tile,
.wizard-class-tile{
  width:100%;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:16px;
  cursor:pointer;
  color:var(--hank-text-on-dark, #f7f9ff) !important;
}

.wizard-method-tile strong,
.wizard-class-tile strong{
  font-size:1.08rem;
  text-transform:uppercase;
  color:#fff !important;
  font-weight:800;
}

.wizard-method-tile span,
.wizard-class-tile span{
  color:#f3f6ff !important;
  font-size:1rem;
  line-height:1.45;
}

.wizard-class-tile small,
.wizard-class-tile small b{
  color:#eef2ff !important;
  font-size:.92rem;
}

.wizard-method-tile.is-selected,
.wizard-class-tile.is-selected,
.wizard-option-tile.is-selected{
  outline:3px solid var(--char-theme-accent, #d7b85b);
  box-shadow:0 0 0 2px rgba(0,0,0,.3);
}

.wizard-option-tile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.wizard-option-tile{display:flex;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;color:#fff!important}
.wizard-option-tile strong{font-size:1.08rem;color:#fff!important}
.wizard-option-tile small,.wizard-option-tile span{color:#f3f6ff!important;line-height:1.35}
.character-power-card-grid{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.character-power-card-grid .option-canonical-card{width:100%;min-width:0}
.power-grid,.power-box,.character-maneuver-cards{width:100%;min-width:0}
.character-maneuver-cards{background:transparent;padding:0}
.class-benefits-full{background:transparent;padding:0}
.character-power-card{border:1px solid rgba(0,0,0,.25);border-radius:10px;padding:12px;background:#fff;display:flex;flex-direction:column;gap:6px}
.character-power-title{font-size:1.08rem;font-weight:800}
.character-power-card p{margin:4px 0 0}
.character-class-benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.character-class-benefit-grid .character-proficiency-link{padding:10px;border:1px solid rgba(0,0,0,.2);border-radius:8px;font-size:1.05rem;font-weight:700}

.wizard-class-tile span{
  flex:1;
}

.wizard-ability-simple-row{
  grid-template-columns:minmax(120px,180px) minmax(180px,1fr);
}

.wizard-checkbox-list{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.wizard-checkbox-list label,
.wizard-checkbox-row{
  display:grid !important;
  grid-template-columns:18px minmax(0,auto) !important;
  justify-content:start !important;
  align-items:center !important;
  column-gap:8px !important;
  width:100% !important;
  cursor:pointer;
}

.wizard-checkbox-list input[type="checkbox"]{
  width:18px !important;
  height:18px !important;
  margin:0 !important;
}

.character-right-lower-grid{
  grid-template-rows:auto auto !important;
  align-content:start !important;
  flex:0 0 auto !important;
}
.character-right-lower-grid .prof-box,
.character-right-lower-grid .equipment-box{height:auto !important;overflow:visible !important;align-self:start !important}

.species-wizard-navigation{width:100% !important;max-width:none !important;margin-left:auto !important;margin-right:auto !important}

.wizard-equipment-choice-group{
  display:grid;
  gap:7px;
  padding:10px 0;
}

.prof-box,
.other-proficiencies-box{
  height:auto !important;
  min-height:0 !important;
  align-self:start !important;
}

.character-proficiency-link{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  font:inherit;
  text-align:left;
  text-decoration:underline;
  cursor:pointer;
}

@media (max-width:900px){
  .wizard-method-grid,
  .wizard-class-grid,.wizard-option-tile-grid,.character-power-card-grid,.character-class-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:600px){
  .wizard-method-grid,
  .wizard-class-grid,.wizard-option-tile-grid,.character-power-card-grid,.character-class-benefit-grid{grid-template-columns:1fr}
  .wizard-ability-simple-row{grid-template-columns:1fr}
}

/* Character theme: closer shade + all character blocks */
.character-sheet-main,
.character-sheet,
.character-sheet-v5,
.character-sheet-body-v5,
.character-block-three,
.character-block-four,
.character-section,
.character-extra-block,
.character-right-column-v4,
.character-flex-block,
.class-benefits-block,
.powers-block,
.tech-powers-block{
  background: color-mix(in srgb, var(--char-theme) 82%, white 18%) !important;
}

.character-title-bar,
.character-theme-title{
  background: var(--char-theme) !important;
}

/* Dice: stronger visible bevel/highlight */
.visual-die{
  outline:1px solid rgba(255,255,255,.85);
  filter:drop-shadow(0 8px 6px rgba(0,0,0,.35));
  background:
    linear-gradient(135deg, rgba(255,255,255,.95) 0 16%, transparent 17% 100%),
    linear-gradient(315deg, rgba(0,0,0,.26) 0 18%, transparent 19% 100%),
    linear-gradient(145deg, #f7f7f7 0%, #d9d9d9 47%, #a6a6a6 100%) !important;
}

.visual-die::after{
  content:"";
  position:absolute;
  inset:8px;
  border-top:2px solid rgba(255,255,255,.9);
  border-left:2px solid rgba(255,255,255,.65);
  border-right:2px solid rgba(0,0,0,.25);
  border-bottom:2px solid rgba(0,0,0,.28);
  opacity:.85;
  pointer-events:none;
}

/* FINAL: colour only the character block shells, not inner panels */
.character-page-v5{
  --char-block-bg: color-mix(in srgb, var(--char-theme) 88%, white 12%);
}

/* Block 1 shell */
.character-sheet-body-v5{
  background: var(--char-block-bg) !important;
}

/* Blocks 2, 3, 4 shells */
.character-sheet-block-two,
.character-sheet-block-three,
.character-sheet-block-four{
  background: var(--char-block-bg) !important;
  border-color: color-mix(in srgb, var(--char-theme) 75%, black) !important;
}

/* Keep inner content panels readable */
.character-sheet-block-two > *,
.character-sheet-block-three > *,
.character-sheet-block-four > *,
.class-benefits-full,
.routine-top-row > *,
.power-grid > *,
.two-wide-boxes > *,
.other-things-top,
.other-things-grid > *{
  background-color: #f4f7f2 !important;
  color: #111 !important;
}

/* Undo earlier bad broad colour targets */
.character-section,
.character-extra-block,
.character-right-column-v4,
.character-flex-block,
.class-benefits-block,
.powers-block,
.tech-powers-block{
  background: unset !important;
}

/* FINAL OVERRIDE: character theme layer discipline */

/* The four block shells get the theme colour */
.character-sheet-body-v5,
.character-sheet-block-two,
.character-sheet-block-three,
.character-sheet-block-four{
  background: var(--char-block-bg) !important;
}

/* Layout wrappers/gaps must stay transparent so the shell colour shows through */
.character-sheet-body-v5 > *,
.character-sheet-block-two > *,
.character-sheet-block-three > *,
.character-sheet-block-four > *,
.routine-top-row,
.power-grid,
.two-wide-boxes,
.other-things-grid{
  background: transparent !important;
}

/* Actual readable white panels */
.character-portrait,
.saving-skills-table,
.combat-stat-box,
.hit-points-box,
.temp-hit-points-box,
.hit-dice-box,
.death-saves-box,
.class-benefits-full,
.routine-top-row > *,
.power-grid > *,
.power-table,
.two-wide-boxes > *,
.other-things-grid > *{
  background: #f4f7f2 !important;
  color: #111 !important;
}

/* The larger free-text trait/proficiency/equipment/language panels should stay themed, not white */
.other-proficiencies-box,
.equipment-box,
.traits-box,
.languages-box,
.skills-traits-box,
.character-traits-box,
.character-text-box,
.full-width-section{
  background: transparent !important;
  color: #111 !important;
}

/* Keep text readable inside themed text panels */
.other-proficiencies-box *,
.equipment-box *,
.traits-box *,
.languages-box *,
.skills-traits-box *,
.character-traits-box *,
.character-text-box *,
.full-width-section *{
  color: #111 !important;
}

/* FINAL PATCH: remaining inner text boxes must be readable panels */

/* Block 1 remaining boxes */
.other-proficiencies-box,
.equipment-box,
.skills-traits-box,
.traits-box,
.languages-box{
  background:#f4f7f2 !important;
  color:#111 !important;
}

/* Block 4 remaining top text panel */
.other-things-top,
.character-sheet-block-four .other-things-top,
.character-sheet-block-four .full-width-section,
.character-sheet-block-four .character-text-box{
  background:#f4f7f2 !important;
  color:#111 !important;
}

/* Preserve coloured outer block shell */
.character-sheet-body-v5,
.character-sheet-block-two,
.character-sheet-block-three,
.character-sheet-block-four{
  background:var(--char-block-bg) !important;
}

/* Text inside readable panels */
.other-proficiencies-box *,
.equipment-box *,
.skills-traits-box *,
.traits-box *,
.languages-box *,
.other-things-top *,
.character-sheet-block-four .full-width-section *,
.character-sheet-block-four .character-text-box *{
  color:#111 !important;
}

/* ---------- Language selection ---------- */

.language-selection-panel {
  width: min(1100px, 92vw);
}

.language-selection-panel h3 {
  margin: 22px 0 12px;
}

.language-known-list,
.language-unavailable-list {
  display: grid;
  gap: 8px;
}

.language-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 18px;
}

.language-choice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  line-height: 1.35;
}

.language-choice input {
  margin-top: 3px;
  flex: 0 0 auto;
}

.language-known {
  border-color: rgba(126,210,126,.55);
}

.language-unavailable {
  opacity: .55;
}

.language-state {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  font-weight: 800;
}

@media (max-width: 900px) {
  .language-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .language-choice-grid {
    grid-template-columns: 1fr;
  }
}



/* ---------- Armour catalogue ---------- */

.equipment-section-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}

.armor-catalogue {
  width: min(1500px, 94vw);
  margin: 0 auto;
  padding-bottom: 120px;
}

.armor-catalogue-tools {
  width: 100%;
  margin-bottom: 32px;
}

.armor-search {
  margin-bottom: 18px;
}

.armor-filter-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.armor-filter-button.is-active {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.65);
}

.armor-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 260px);
  justify-content: center;
  gap: 30px;
}

.armor-card-summary p {
  margin: 0;
}

.armor-card-ac {
  font-size: 20px;
}

.armor-card-image {
  text-align: center;
}

.armor-card .hank-flip-card-back {
  color: #f4f7f2;
}

.armor-card .hank-flip-card-back h2,
.armor-card .hank-flip-card-back strong {
  color: #f4f7f2;
}

.armor-card .hank-flip-card-detail p {
  margin: 0 0 10px;
}

.armor-card .hank-flip-card-detail ul {
  margin: 6px 0 14px;
  padding-left: 20px;
}

.armor-flip-hint {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
  opacity: .7;
}

.armor-empty-message {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 18px;
}

/* ---------- D&D armour card front refinement ---------- */

.armor-card .hank-flip-card-front {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.armor-card .hank-flip-card-back {
  overflow: auto;
}

.armor-card .armor-card-image {
  height: 225px;
  flex: 0 0 225px;
  margin-bottom: 16px;
}

.armor-card .hank-flip-card-title {
  margin-bottom: 10px;
}

.armor-card .armor-card-summary {
  display: block;
}

.armor-card .armor-card-ac {
  margin: 0;
  text-align: center;
  font-size: 22px;
}

.armor-card .armor-flip-hint {
  margin-top: auto;
  padding-top: 12px;
}

/* ---------- Shared equipment catalogues ---------- */

.equipment-catalogue {
  width: min(1500px, 94vw);
  margin: 0 auto;
  padding-bottom: 120px;
}

.equipment-catalogue-tools {
  width: 100%;
  margin-bottom: 32px;
}

.equipment-search {
  margin-bottom: 18px;
}

.equipment-filter-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.equipment-filter-button.is-active {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.65);
}

.equipment-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 260px);
  justify-content: center;
  gap: 30px;
}

.equipment-card .hank-flip-card-front {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.equipment-card .hank-flip-card-back {
  overflow: auto;
}

.equipment-card .equipment-card-image {
  height: 225px;
  flex: 0 0 225px;
  margin-bottom: 16px;
}

.equipment-card .hank-flip-card-title {
  margin-bottom: 10px;
}

.equipment-card-primary-stat {
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
}

.equipment-card .hank-flip-card-back,
.equipment-card .hank-flip-card-back h2,
.equipment-card .hank-flip-card-back strong {
  color: #f4f7f2;
}

.equipment-card .hank-flip-card-detail p {
  margin: 0 0 10px;
}

.equipment-card .hank-flip-card-detail ul {
  margin: 6px 0 14px;
  padding-left: 20px;
}

.equipment-flip-hint {
  margin-top: auto;
  padding-top: 12px;
  text-align: center;
  font-size: 13px;
  opacity: .7;
}

.equipment-empty-message {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 18px;
}

/* ---------- D&D equipment category cards ---------- */

.equipment-section-grid {
  width: min(1040px, 92vw);
  margin: 26px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 280px);
  justify-content: center;
  gap: 34px;
}

.equipment-category-card {
  width: 280px;
  min-height: 320px;
  padding: 20px;
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,.3);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.equipment-category-card:hover,
.equipment-category-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.72);
  box-shadow: 0 22px 46px rgba(0,0,0,.32);
  outline: none;
}

.equipment-category-grey {
  background: #58606a;
}

.equipment-category-cyan {
  background: #075f69;
}

.equipment-category-charcoal {
  background: #292d33;
}

.equipment-category-image {
  min-height: 225px;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.equipment-category-initial {
  font-size: 104px;
  line-height: 1;
  font-weight: 800;
  color: #f4f7f2;
  text-shadow: 0 5px 14px rgba(0,0,0,.35);
}

.equipment-category-name {
  margin-top: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: #f4f7f2;
}

.wizard-instrument-grid {
  width: 100%;
  margin: 24px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 260px);
  justify-content: center;
  gap: 30px;
}

.wizard-instrument-grid .equipment-card.is-selected
.hank-flip-card-face {
  border-color: #7fc9ff;
  box-shadow:
    0 0 0 3px rgba(127,201,255,.55),
    0 18px 40px rgba(0,0,0,.28);
}

.character-powers-direct,
.character-subsystem-direct,
.character-maneuver-cards {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
}

.equipment-select-button {
  width: 100%;
  margin: 12px 0 4px;
}

@media (max-width: 980px) {
  .equipment-section-grid {
    grid-template-columns: repeat(2, 280px);
  }
}

@media (max-width: 650px) {
  .equipment-section-grid {
    grid-template-columns: 280px;
  }
}