/* miniGram public play surface — uses the site shell tokens so light and dark
   stay consistent with the rest of Project Dynasty. */

#minigram.view { max-width: var(--pd-content-max, 1240px); margin: 0 auto; padding: 0 18px 64px; }

.mg-shell { display: grid; gap: 22px; }

.mg-hero { padding: 26px 2px 6px; }
.mg-hero h2 { margin: 4px 0 8px; font: 950 clamp(32px, 5vw, 52px)/1 var(--pd-font-display, sans-serif); letter-spacing: -.03em; color: var(--pd-text-primary); }
.mg-hero p { max-width: 62ch; margin: 0; color: var(--pd-text-secondary); font-size: 13.5px; line-height: 1.6; }

.mg-eyebrow { margin: 0; color: #c92232; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
:root[data-theme="dark"] .mg-eyebrow { color: #ff8f9b; }

.mg-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, .85fr); gap: 18px; align-items: start; }

.mg-card { border: 1px solid var(--pd-border); border-radius: 18px; background: var(--pd-surface-base); box-shadow: var(--pd-shadow-sm); }

.mg-play { padding: 20px; display: grid; gap: 14px; }

.mg-play-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mg-play-head h3 { margin: 3px 0 0; font: 950 30px/1 var(--pd-font-display, sans-serif); letter-spacing: -.02em; color: var(--pd-text-primary); }
.mg-play-meta { margin: 0; color: var(--pd-text-secondary); font-size: 12px; font-weight: 700; letter-spacing: .04em; }

.mg-pill { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--pd-status-selected-bg); color: var(--pd-status-selected-text); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.mg-pill.is-closed { background: var(--pd-status-final-bg); color: var(--pd-status-final-text); }

.mg-rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.mg-rail i { height: 5px; border-radius: 999px; background: var(--pd-surface-interactive); }
.mg-rail i.is-open { background: linear-gradient(90deg, #c92232, #e05252); }

.mg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 1px solid var(--pd-border); border-radius: 999px; background: var(--pd-surface-elevated); color: var(--pd-text-secondary); font-size: 11px; font-weight: 800; }
.mg-chip-strong { border-color: transparent; background: var(--pd-status-upcoming-bg); color: var(--pd-status-upcoming-text); }
.mg-chip-rating { border-color: transparent; background: var(--pd-status-selected-bg); color: var(--pd-status-selected-text); }
.mg-chip-quiet { background: transparent; font-weight: 700; }
.mg-chip-exact { border-color: transparent; background: var(--pd-status-selected-bg); color: var(--pd-status-selected-text); }
.mg-chip-near { border-color: transparent; background: var(--pd-status-upcoming-bg); color: var(--pd-status-upcoming-text); }
.mg-chip-direction { background: var(--pd-surface-interactive); }

.mg-clues { display: grid; gap: 10px; }
.mg-clue { border: 1px solid var(--pd-border); border-radius: 14px; background: var(--pd-surface-elevated); padding: 13px 14px; display: grid; gap: 9px; }
.mg-clue header { display: flex; align-items: center; gap: 9px; }
.mg-clue header strong { font-size: 11.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-text-primary); }
.mg-clue-index { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 7px; background: #c92232; color: #fff; font-size: 11px; font-weight: 900; }
.mg-clue-value { margin: 0; color: var(--pd-text-primary); font-size: 15px; font-weight: 800; }
.mg-clue-detail { margin: 0; color: var(--pd-text-secondary); font-size: 11.5px; line-height: 1.5; }

.mg-curve { display: flex; align-items: flex-end; gap: 4px; height: 74px; padding: 8px 10px; border-radius: 10px; background: var(--pd-surface-interactive); }
.mg-curve i { flex: 1; min-height: 6px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #e05252, #c92232); }

.mg-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.mg-total { padding: 9px 11px; border-radius: 10px; background: var(--pd-surface-interactive); }
.mg-total small { display: block; color: var(--pd-text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mg-total strong { display: block; margin-top: 3px; color: var(--pd-text-primary); font: 900 17px/1.1 var(--pd-font-mono, monospace); }

.mg-board { border: 1px dashed var(--pd-border-strong); border-radius: 14px; padding: 13px; display: grid; gap: 9px; }
.mg-board-label { margin: 0; color: var(--pd-text-primary); font-size: 12.5px; font-weight: 900; letter-spacing: .05em; }
.mg-board-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.mg-board-choice { min-height: 56px; padding: 9px 11px; border: 1px solid var(--pd-border); border-radius: 12px; background: var(--pd-surface-elevated); color: var(--pd-text-primary); text-align: left; cursor: pointer; }
.mg-board-choice:hover { border-color: #c92232; }
.mg-board-choice strong { display: block; font-size: 13px; }
.mg-board-choice small { color: var(--pd-text-secondary); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.mg-compare { display: grid; gap: 6px; }
.mg-compare small, .mg-guessed small { color: var(--pd-text-secondary); font-size: 10.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mg-guessed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.mg-guess { display: grid; gap: 7px; }
.mg-guess-label { color: var(--pd-text-secondary); font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mg-guess-row { display: flex; gap: 8px; align-items: flex-start; }
.mg-guess-field { position: relative; flex: 1; min-width: 0; }

.mg-guess-field input {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--pd-border-strong); border-radius: 12px;
  background: var(--pd-surface-elevated); color: var(--pd-text-primary); font-size: 15px; font-weight: 700;
}
.mg-guess-field input:focus { outline: 3px solid var(--pd-focus, #9bc0ff); outline-offset: 1px; border-color: transparent; }
.mg-guess-field input::placeholder { color: var(--pd-text-secondary); font-weight: 600; }

.mg-suggest { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; overflow: hidden; border: 1px solid var(--pd-border); border-radius: 12px; background: var(--pd-surface-elevated); box-shadow: var(--pd-shadow-md); }
.mg-suggest-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 9px 13px; border: 0; border-bottom: 1px solid var(--pd-border); background: transparent; color: var(--pd-text-primary); text-align: left; cursor: pointer; }
.mg-suggest-row:last-child { border-bottom: 0; }
.mg-suggest-row.is-active, .mg-suggest-row:hover { background: var(--pd-surface-interactive); }
.mg-suggest-row strong { font-size: 13.5px; }
.mg-suggest-row small { flex: none; color: var(--pd-text-secondary); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.mg-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 1px solid var(--pd-border-strong); border-radius: 12px; background: var(--pd-surface-elevated); color: var(--pd-text-primary); font-size: 13.5px; font-weight: 900; letter-spacing: .03em; text-decoration: none; cursor: pointer; }
.mg-btn-primary { border-color: transparent; background: linear-gradient(135deg, #c92232, #9e1a27); color: #fff; }
.mg-btn-primary:disabled, .mg-btn:disabled { opacity: .6; cursor: progress; }
.mg-guess-note { margin: 0; color: var(--pd-text-secondary); font-size: 11px; line-height: 1.5; }

.mg-message { min-height: 20px; margin: 0; color: var(--pd-text-primary); font-size: 13px; }
.mg-message strong { color: #c92232; }
:root[data-theme="dark"] .mg-message strong { color: #ff8f9b; }

.mg-answer { border-radius: 14px; padding: 15px 16px; background: var(--pd-status-selected-bg); color: var(--pd-status-selected-text); display: grid; gap: 4px; }
.mg-answer h3 { margin: 0; font: 950 26px/1 var(--pd-font-display, sans-serif); color: inherit; }
.mg-answer p { margin: 0; font-size: 12.5px; font-weight: 700; }
.mg-answer .mg-eyebrow { color: inherit; opacity: .8; }
.mg-answer-score { margin-top: 6px !important; font: 900 20px/1 var(--pd-font-mono, monospace); }
.mg-answer.is-closed { background: var(--pd-status-unavailable-bg); color: var(--pd-status-unavailable-text); }

.mg-signin { text-align: center; justify-items: center; padding: 34px 20px; }
.mg-signin h3 { margin: 4px 0; font: 950 26px/1.05 var(--pd-font-display, sans-serif); color: var(--pd-text-primary); }
.mg-signin p { max-width: 46ch; margin: 0; color: var(--pd-text-secondary); font-size: 13px; line-height: 1.6; }

.mg-state { display: grid; justify-items: center; gap: 10px; padding: 34px 16px; color: var(--pd-text-secondary); text-align: center; }
.mg-state-error strong { color: var(--pd-error-text); }
.mg-state p { margin: 0; font-size: 13px; }
.mg-loader { width: 26px; height: 26px; border: 3px solid var(--pd-border); border-top-color: #c92232; border-radius: 50%; animation: mg-spin .9s linear infinite; }
@keyframes mg-spin { to { transform: rotate(360deg); } }

.mg-side { padding: 18px; display: grid; gap: 14px; position: sticky; top: 86px; }
.mg-side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.mg-side-head h4 { margin: 3px 0 0; font: 950 20px/1 var(--pd-font-display, sans-serif); color: var(--pd-text-primary); }
.mg-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mg-stat { padding: 9px 8px; border-radius: 11px; background: var(--pd-surface-interactive); text-align: center; }
.mg-stat small { display: block; color: var(--pd-text-secondary); font-size: 9.5px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.mg-stat strong { display: block; margin-top: 3px; color: var(--pd-text-primary); font: 900 18px/1 var(--pd-font-mono, monospace); }
.mg-how h4 { margin: 0 0 7px; font-size: 11.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--pd-text-primary); }
.mg-how ul { margin: 0; padding-left: 17px; display: grid; gap: 6px; color: var(--pd-text-secondary); font-size: 12px; line-height: 1.55; }

.mg-history { display: grid; gap: 14px; }
.mg-history > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mg-history h3 { margin: 4px 0 4px; font: 950 clamp(22px, 3vw, 30px)/1 var(--pd-font-display, sans-serif); color: var(--pd-text-primary); }
.mg-history header p { max-width: 60ch; margin: 0; color: var(--pd-text-secondary); font-size: 12.5px; line-height: 1.55; }
.mg-history-viewer { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-history-viewer span { padding: 5px 10px; border: 1px solid var(--pd-border); border-radius: 999px; background: var(--pd-surface-elevated); color: var(--pd-text-secondary); font-size: 11px; font-weight: 800; }

.mg-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.mg-case { border: 1px solid var(--pd-border); border-radius: 15px; background: var(--pd-surface-base); box-shadow: var(--pd-shadow-sm); padding: 14px; display: grid; gap: 10px; }
.mg-case > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mg-case-label { display: block; color: #c92232; font-size: 12.5px; font-weight: 900; letter-spacing: .08em; }
:root[data-theme="dark"] .mg-case-label { color: #ff8f9b; }
.mg-case header small { color: var(--pd-text-secondary); font-size: 11px; font-weight: 700; }
.mg-your-score { padding: 5px 9px; border-radius: 999px; background: var(--pd-status-upcoming-bg); color: var(--pd-status-upcoming-text); font-size: 10.5px; font-weight: 900; }
.mg-your-score.is-solved { background: var(--pd-status-selected-bg); color: var(--pd-status-selected-text); }
.mg-your-score-none { background: var(--pd-surface-interactive); color: var(--pd-text-secondary); }
.mg-case-answer { display: grid; gap: 2px; padding: 10px 12px; border-radius: 11px; background: var(--pd-surface-elevated); }
.mg-case-answer small { color: var(--pd-text-secondary); font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mg-case-answer strong { color: var(--pd-text-primary); font-size: 16px; font-weight: 900; }
.mg-case-answer span { color: var(--pd-text-secondary); font-size: 11.5px; font-weight: 700; }
.mg-case-stats { display: flex; flex-wrap: wrap; gap: 9px; color: var(--pd-text-secondary); font-size: 11.5px; font-weight: 700; }
.mg-perfects { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.mg-perfects small { color: var(--pd-text-secondary); font-size: 9.5px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mg-chip-perfect { border-color: transparent; background: linear-gradient(135deg, #f3d27a, #d8a63c); color: #3a2a05; }
.mg-perfects-none span { color: var(--pd-text-secondary); font-size: 11px; font-weight: 700; }

@media (max-width: 900px) {
  .mg-grid { grid-template-columns: 1fr; }
  .mg-side { position: static; }
}

@media (max-width: 560px) {
  #minigram.view { padding: 0 12px 54px; }
  .mg-play { padding: 15px; }
  .mg-play-head h3 { font-size: 24px; }
  .mg-guess-row { flex-direction: column; align-items: stretch; }
  .mg-guess-row .mg-btn { width: 100%; }
  .mg-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .mg-cases { grid-template-columns: 1fr; }
}