/* Grandis Legacy Season 0 v1.52 — one shared modal design for both UI styles.
   Card Review follows the approved Style 1 composition; Deck View follows
   Style 2; Confirmation and Starter follow Style 2. Main-page layouts remain
   intentionally independent. Last stylesheet in both entrypoints. */

/* Bare close symbol (no stroke, box, or filled tile) on every modal. */
.app-dialog .dialog-close,
#mainDeckViewDialog #mainDeckViewClose,
#cardReviewDialog .review-header .review-close{
  display:grid!important;
  place-items:center!important;
  box-sizing:border-box!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  flex:0 0 34px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  outline:0!important;
  color:#ececf0!important;
  font-family:"Noto Sans",sans-serif!important;
  font-size:25px!important;
  font-weight:400!important;
  line-height:1!important;
  cursor:pointer!important;
  text-decoration:none!important;
}
.app-dialog .dialog-close:hover,
#mainDeckViewDialog #mainDeckViewClose:hover,
#cardReviewDialog .review-header .review-close:hover{
  background:none!important;
  color:#f1ce87!important;
  border:0!important;
}
.app-dialog .dialog-close:focus-visible{color:#f1ce87!important;text-decoration:none!important}
/* The X sits at the exact vertical middle of the review and Deck View headers. */
#cardReviewDialog .review-header .review-close,
#mainDeckViewDialog #mainDeckViewClose{
  position:static!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  align-self:center!important;
}
#mainDeckViewDialog #mainDeckViewClose{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;flex:0 0 38px!important}
@media(max-width:520px){
 #mainDeckViewDialog #mainDeckViewClose{width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;flex:0 0 30px!important}
}

/* Card Review: exact same header/popup geometry and typography in both modes. */
#cardReviewDialog .review-card{border-color:#484a56!important;background:#242630!important}
#cardReviewDialog[data-review-kind] .review-header{
  box-sizing:border-box!important;
  height:84px!important;
  min-height:84px!important;
  max-height:84px!important;
  padding:17px 23px 15px!important;
  display:flex!important;
  flex:0 0 84px!important;
  align-items:center!important;
  justify-content:space-between!important;
  border-bottom:1px solid #484a56!important;
}
#cardReviewDialog[data-review-kind] .review-header h2{font-family:"Noto Sans",sans-serif!important;font-size:20px!important}
#cardReviewDialog .review-summary-item strong{font-family:"Noto Sans",sans-serif!important}

/* Confirmation: identical Style-2-derived body, typography, actions and rows. */
#confirmDialog{
  box-sizing:border-box!important;
  position:fixed!important;
  margin:auto!important;
  padding:0!important;
  width:min(560px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 24px)!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}
#confirmDialog .confirm-card{
  box-sizing:border-box!important;
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-height:calc(100dvh - 24px)!important;
  padding:24px!important;
  overflow-y:auto!important;
  border:1px solid #555865!important;
  border-radius:10px!important;
  background:#22242d!important;
  color:#f5f3ed!important;
}
#confirmDialog .dialog-eyebrow{display:block!important;color:#e5be73!important;font-size:11px!important;font-weight:800!important;letter-spacing:.06em!important}
#confirmDialog .confirm-card h2{margin:6px 36px 10px 0!important;color:#f5f3ed!important;font-size:24px!important;font-weight:700!important;line-height:1.25!important}
#confirmDialog .dialog-message{margin-top:12px!important;color:#d7d9df!important;font-size:13px!important;line-height:1.55!important;overflow-wrap:anywhere!important}
#confirmDialog .confirm-list{margin-top:12px!important;max-height:min(230px,40dvh)!important;overflow:auto!important;border:1px solid #555865!important;border-radius:7px!important}
#confirmDialog .confirm-item{display:flex!important;justify-content:space-between!important;gap:10px!important;padding:8px 10px!important;border-bottom:1px solid #555865!important;font-size:11px!important}
#confirmDialog .confirm-item:last-child{border-bottom:0!important}
#confirmDialog .dialog-actions{display:flex!important;justify-content:flex-end!important;gap:8px!important;margin-top:18px!important}
#confirmDialog .dialog-actions>button{
  box-sizing:border-box!important;min-height:36px!important;padding:0 16px!important;
  border:1px solid #555865!important;border-radius:6px!important;
  background:#30343e!important;color:#f5f3ed!important;
  font:700 11px/1 "Noto Sans",sans-serif!important;cursor:pointer!important;
}
#confirmDialog .dialog-actions>button.primary{background:#346a93!important;border-color:#467ea8!important;color:#fff!important}
#confirmDialog .dialog-actions>button.danger{background:#7e333a!important;border-color:#a34c55!important;color:#fff!important}
#confirmDialog .dialog-actions>button:hover{filter:brightness(1.15)}
#confirmDialog #confirmClose{position:absolute!important;top:18px!important;right:18px!important}

/* One dedicated Starter Deck popup; the Style 1 'Choose how to begin'
   workflow is kept, but the actual Starter list is this shared popup. */
#starterDialog{
  box-sizing:border-box!important;
  position:fixed!important;
  margin:auto!important;
  padding:0!important;
  width:min(820px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100dvh - 24px)!important;
  border:0!important;
  background:transparent!important;
  overflow:visible!important;
}
#starterDialog .starter-card{
  box-sizing:border-box!important;
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  max-height:calc(100dvh - 24px)!important;
  padding:24px!important;
  overflow:auto!important;
  border:1px solid #555865!important;
  border-radius:10px!important;
  background:#22242d!important;
  color:#f5f3ed!important;
}
#starterDialog .dialog-eyebrow{display:block!important;color:#e5be73!important;font-size:11px!important;font-weight:800!important;letter-spacing:.06em!important}
#starterDialog .starter-card h2{margin:6px 38px 10px 0!important;color:#f5f3ed!important;font:700 24px/1.25 "Noto Sans",sans-serif!important}
#starterDialog .starter-card p{margin:0 36px 18px 0!important;color:#d7d9df!important;font-size:13px!important;line-height:1.5!important}
#starterDialog .starter-list{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important;min-width:0!important}
#starterDialog .starter-option{
  display:flex!important;flex-direction:column!important;align-items:center!important;
  gap:6px!important;min-width:0!important;min-height:0!important;
  height:auto!important;padding:10px 7px!important;
  border:1px solid #555865!important;border-radius:7px!important;
  background:#30323d!important;color:#f5f3ed!important;cursor:pointer!important;
  font-family:"Noto Sans",sans-serif!important;
}
#starterDialog .starter-option:hover{border-color:#e5be73!important;background:#393c48!important}
#starterDialog .starter-option img{display:block!important;width:72px!important;max-width:100%!important;aspect-ratio:5/7!important;object-fit:contain!important}
#starterDialog .starter-option span{color:#e5be73!important;font-size:9px!important;font-weight:900!important}
#starterDialog .starter-option strong{font-size:11px!important;line-height:1.3!important;text-align:center!important}
#starterDialog .starter-option small{font-size:9px!important;line-height:1.4!important;color:#aeb6c7!important;text-align:center!important}
#starterDialog #starterClose{position:absolute!important;top:18px!important;right:18px!important}
@media(max-width:760px){#starterDialog .starter-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:380px){
 #starterDialog .starter-card,#confirmDialog .confirm-card{padding:16px!important}
 #starterDialog #starterClose,#confirmDialog #confirmClose{top:10px!important;right:10px!important}
 #starterDialog .starter-option img{width:62px!important}
}

/* Style 1: original two-option New Deck chooser with the five Starter cards
   embedded underneath. Keep v1.52's borderless close X and shared modal parity. */
/* Older Style 1 rules forced starter titles to 38px tall. That historical
   rule was the remaining cross-style height mismatch. */
#starterDialog .starter-option strong{min-height:0!important;height:auto!important;max-height:none!important}
#confirmDialog [hidden]{display:none!important}
/* Equalise the historical default button box height (Style 1 added 1px). */
#confirmDialog .dialog-actions>button{height:36px!important;min-height:36px!important;max-height:36px!important}
/* Hero Review — inherit the Style 1 content-scrolling and rank-thumbnail
   proportions instead of Style 2's previous internal-detail scroll. */
#cardReviewDialog[data-review-kind="hero"] .review-header{gap:20px!important}
#cardReviewDialog[data-review-kind="hero"] .review-layout{
  overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain!important;scrollbar-gutter:stable!important;
}
#cardReviewDialog[data-review-kind="hero"] .review-art-column{overflow:visible!important}
#cardReviewDialog[data-review-kind="hero"] .review-detail-column{
  overflow:visible!important;overflow-x:visible!important;overflow-y:visible!important;
  padding-right:0!important;scrollbar-gutter:auto!important;
}
#cardReviewDialog[data-review-kind="hero"] .review-rows{gap:10px!important}
#cardReviewDialog[data-review-kind="hero"] .review-hero-block,
#cardReviewDialog[data-review-kind="hero"] .review-generic-row{padding:13px 16px!important}
#cardReviewDialog[data-review-kind="hero"] .review-progression-card{
  box-sizing:border-box!important;width:58px!important;height:auto!important;
  padding:0!important;border:1px solid transparent!important;border-radius:5px!important;
  background:#15161b!important;overflow:hidden!important;
}
#cardReviewDialog[data-review-kind="hero"] .review-progression-card.active{border-color:#d9b56b!important}
#cardReviewDialog[data-review-kind="hero"] .review-progression-card img{
  display:block!important;box-sizing:content-box!important;width:100%!important;
  height:auto!important;max-height:none!important;aspect-ratio:5/7!important;
  object-fit:contain!important;outline:none!important;
}

/* Deck View empty-state parity: never show an invisible placeholder for an
   occupied deck, and allocate the same space in both styles when it is empty. */
#mainDeckViewDialog #mainDeckViewEmpty{
  box-sizing:border-box!important;display:grid!important;place-items:center!important;
  flex:0 0 180px!important;min-height:180px!important;max-height:180px!important;
  padding:28px 0!important;text-align:center!important;
  color:#a8abb7!important;font-size:12px!important;
}
#mainDeckViewDialog #mainDeckViewEmpty[hidden]{display:none!important;flex:0 0 0!important;min-height:0!important;max-height:0!important;padding:0!important}