/* UI fixes, loaded last. One file so each fix is easy to find and to remove. */

/* My RV: the player card is one column on phones and small tablets (a later rule had put the two columns back, which squeezed the module list) */
@media (max-width: 760px) {
  .mr-hero { grid-template-columns: 1fr !important; }
  .mr-hero-r { margin-top: 2px; }
}

/* Planner settings sheet on tablets: centred and never wider than the screen (it was shifted 47px to the right at about 850px) */
@media (min-width: 650px) and (max-width: 1180px) {
  html.aniiland-phone .planner-sidebar.mobile-settings-open {
    left: 0 !important; right: 0 !important;
    width: min(760px, 100%) !important; margin-inline: auto !important;
  }
}

/* My RV: fields and buttons in one row have one height */
.myrv-dialog .mr-field input, .myrv-dialog .mr-field select { min-height: 46px; box-sizing: border-box; }
.mr-form .mr-go { height: 46px; min-height: 46px; }

/* My RV question / review windows: buttons of one size, side by side, the same style family */
.mr-ask-btns { align-items: center; }
.mr-ask-btns .primary, .mr-ask-btns .secondary {
  height: 44px; min-height: 0; padding: 0 20px; flex: 0 0 auto; font-size: 14px; font-weight: 700; line-height: 1;
}
.mr-ask-btns .secondary { background: transparent; border: 1px solid #3b5166; color: #d6e4f0; box-shadow: none; }
.mr-ask-btns .secondary:hover { background: #1a2a38; }
@media (max-width: 520px) { .mr-ask-btns .primary, .mr-ask-btns .secondary { flex: 1 1 100%; } }

/* review window: five tiles fit in one row */
.mr-ask-tiles { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.mr-ask-tile { padding: 8px 10px; }

/* My RV and its question windows: every button has the same height, padding and shape; the primary one is filled, the others are outlined */
.mr-foot { justify-content: flex-end; }
.myrv-dialog button.primary, .myrv-dialog button.secondary, .myrv-ask button.primary, .myrv-ask button.secondary {
  box-sizing: border-box; height: 44px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; text-align: center; width: auto; flex: 0 0 auto; white-space: normal;
}
.myrv-dialog button.secondary, .myrv-ask button.secondary { background: transparent; border: 1px solid #3b5166; color: #d6e4f0; box-shadow: none; }
.myrv-dialog button.secondary:hover:not(:disabled), .myrv-ask button.secondary:hover:not(:disabled) { background: #1a2a38; }
.myrv-dialog button.danger-soft { border-color: #6a3a3a; color: #f0b4b4; }
.myrv-dialog button.danger-soft:hover:not(:disabled) { background: #2a1a1c; }
.myrv-dialog .mr-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.myrv-dialog .mr-cta-btn { flex: 0 0 auto; align-self: center; }
.myrv-dialog .mr-prof-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.myrv-dialog .mr-prof-btns button { height: 38px; min-height: 38px; padding: 0 14px; font-size: 13px; }
@media (max-width: 520px) { .myrv-dialog .mr-actions button { flex: 1 1 100%; } .myrv-dialog .mr-prof-btns button { flex: 1 1 calc(50% - 8px); } }

/* Header on a zoomed-in or small desktop window (just above the phone layout): the tabs used to spill to the left over the event and help buttons.
   The event name is hidden (its icon and counter stay, the name is in the tooltip), the tabs and buttons get tighter, and nothing is allowed to shrink below its content. */
@media (min-width: 1181px) and (max-width: 1480px) {
  html:not(.aniiland-phone) body > header { gap: 6px; }
  html:not(.aniiland-phone) body > header .event-center-btn > span { display: none; }
  html:not(.aniiland-phone) body > header nav { flex: 0 1 auto; min-width: 0; }
  html:not(.aniiland-phone) body > header nav > button { padding-inline: 10px; font-size: 13px; }
}
@media (min-width: 1481px) and (max-width: 1620px) {
  html:not(.aniiland-phone) body > header nav > button { padding-inline: 12px; }
}

/* Order Overrides: many orders used to squeeze the name, the seed note and the two buttons into one row, so they overlapped.
   Each card now has two rows (icon + name + note, then the buttons), the seed note is a normal box instead of a pill that bulges when its text wraps,
   and the cards wrap onto as many rows as needed. */
html:not(.aniiland-phone) .override-order-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: start;
  gap: 10px;
}
html:not(.aniiland-phone) .override-order-card {
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas: "icon info" "actions actions";
  align-items: start;
  gap: 8px 10px;
  min-width: 0;
}
html:not(.aniiland-phone) .override-order-card > img { grid-area: icon; align-self: center; }
html:not(.aniiland-phone) .override-order-card > div:not(.override-order-actions) { grid-area: info; min-width: 0; }
html:not(.aniiland-phone) .override-order-card .order-title-line {
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
html:not(.aniiland-phone) .override-order-card .order-title-line > b {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.3;
}
html:not(.aniiland-phone) .override-order-card .order-seed-summary {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.3;
}
html:not(.aniiland-phone) .override-order-card > .override-order-actions,
html:not(.aniiland-phone) .override-order-card > button {
  grid-area: actions;
  grid-column: 1 / -1;
}
html:not(.aniiland-phone) .override-order-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  width: 100%;
}
html:not(.aniiland-phone) .override-order-actions > button { min-width: 0; white-space: normal; line-height: 1.2; }

/* Order Solver panel with many orders: compact cards in as many columns as fit, instead of one tall column.
   The "Optional event reward" box is not used by any calculation, so it is not shown in the cards; the "Buy N x Seed" line repeats the seed note
   next to the name, so on a computer only the note is shown (a phone keeps both). */
html:not(.aniiland-phone) .order-panel .order-list {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  align-items: start;
  gap: 10px;
}
html:not(.aniiland-phone) .order-panel .order-card { padding: 10px 12px; }
html:not(.aniiland-phone) .order-panel .order-card-main { grid-template-columns: 44px minmax(0, 1fr) 66px; }
html:not(.aniiland-phone) .order-panel .order-card-main > img { width: 44px; height: 44px; }
html:not(.aniiland-phone) .order-panel .order-card .order-title-line { flex-direction: column; align-items: flex-start; gap: 4px; }
html:not(.aniiland-phone) .order-panel .order-card .order-seed-summary { display: block; border-radius: 8px; max-width: 100%; white-space: normal; overflow-wrap: break-word; line-height: 1.3; }
html:not(.aniiland-phone) .order-panel .order-card .order-card-reward,
html:not(.aniiland-phone) .order-panel .order-card .order-seed-warning { display: none; }
html:not(.aniiland-phone) .order-panel .order-card-actions { flex-wrap: wrap; gap: 6px; margin-top: 6px; }


/* Magical Night Event Center: proper icon sizing and a finished card layout */
.event-center-btn .magical-nav-label { display:flex; align-items:center; gap:10px; }
.event-center-btn .magical-nav-label > small { display:block; }
.magical-nav-currency, .magical-currency-icon {
  width: 22px; height: 22px; object-fit: contain; flex: 0 0 22px; vertical-align: middle;
}
.magical-dialog-head h2 .magical-currency-icon { width: 30px; height: 30px; flex-basis: 30px; }
.magical-center { background: linear-gradient(180deg, rgba(17,29,49,.94), rgba(21,38,60,.98)); }
.magical-dialog-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  padding: 24px 24px 18px; border-bottom: 1px solid rgba(132, 169, 214, .24);
}
.magical-head-copy { min-width:0; }
.magical-kicker {
  display:inline-block; margin-bottom:8px; letter-spacing:.18em; text-transform:uppercase;
  font-size:11px; color:#d0b4ff; font-weight:800;
}
.magical-head-copy h2 {
  margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size: clamp(28px, 3vw, 38px); line-height:1.08;
}
.magical-head-copy h2 small { font-size:.48em; color:#e4ebf4; opacity:.88; font-weight:700; }
.magical-head-copy p { margin:10px 0 0; max-width:720px; color:#c9d9e9; line-height:1.5; }
.magical-center-content { display:flex; flex-direction:column; gap:18px; padding:22px 24px 26px; }
.magical-toolbar { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.magical-toggle, .magical-guide button {
  min-height:44px; padding:0 18px; border-radius:12px; border:1px solid #5f76a6; background:#1b2f4b; color:#f4f7fb;
  font-weight:700; box-shadow:none;
}
.magical-toggle.on { background:linear-gradient(135deg, #7440c8, #9464e6); border-color:#a988f3; }
.magical-recipes-check {
  display:flex; align-items:flex-start; gap:10px; padding:10px 14px; min-height:44px;
  border:1px solid rgba(132,169,214,.28); border-radius:14px; background:rgba(20,33,53,.72);
}
.magical-recipes-check input { margin-top:4px; }
.magical-recipes-check span { display:flex; flex-direction:column; gap:2px; }
.magical-recipes-check small { color:#c4d6e8; }
.magical-overview {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;
}
.magical-overview > div, .magical-seed-panel, .magical-guide, .magical-reservations {
  border:1px solid rgba(132,169,214,.24); border-radius:18px; background:rgba(32,50,79,.74);
  box-shadow:0 12px 28px rgba(5,10,20,.18);
}
.magical-overview > div { padding:18px 18px 16px; display:flex; flex-direction:column; gap:6px; }
.magical-overview > div > span { color:#c7d8ea; font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.magical-overview > div > strong { font-size:28px; line-height:1; display:flex; align-items:flex-end; gap:4px; }
.magical-overview > div > strong small { font-size:.52em; color:#9fc1e6; }
.magical-overview > div > small { color:#b8cbdf; line-height:1.35; }
.magical-reservations, .magical-seed-panel, .magical-guide { padding:18px; }
.magical-section-heading { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.magical-section-heading h3, .magical-guide h3 { margin:0; font-size:22px; }
.magical-plan-period { color:#c1d8ed; font-size:13px; }
.magical-reserve-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.magical-reserve-card {
  border:1px solid rgba(148,189,233,.3); border-radius:16px; background:rgba(35,57,89,.72); padding:14px; display:flex; flex-direction:column; gap:14px;
}
.magical-reserve-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.magical-reserve-top { display:flex; gap:12px; align-items:center; min-width:0; }
.magical-reserve-top img, .magical-reserve-top .ico { width:38px; height:38px; object-fit:contain; flex:0 0 38px; }
.magical-reserve-top h3 { margin:0; font-size:20px; line-height:1.2; }
.magical-reserve-top small { display:block; color:#bad0e6; margin-top:2px; }
.magical-mini-label { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#d1b7ff; font-weight:800; margin-bottom:3px; }
.magical-reserve-badge {
  flex:0 0 auto; padding:6px 10px; border-radius:999px; background:rgba(183, 134, 255, .18); border:1px solid rgba(200, 169, 255, .35); color:#ecdfff; font-weight:800;
}
.magical-reserve-body { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:center; }
.magical-reserve-body > img, .magical-reserve-body .ico { width:52px; height:52px; object-fit:contain; }
.magical-reserve-body b { display:block; font-size:17px; margin-bottom:3px; }
.magical-reserve-body p { margin:0; color:#bdd1e5; line-height:1.4; }
.magical-reserve-input { display:grid; gap:8px; }
.magical-reserve-input > span { color:#d5e4f5; font-weight:700; }
.magical-reserve-input input {
  width:100%; max-width:180px; min-height:44px; border-radius:12px; border:1px solid #59759d; background:#203754; color:#f6fbff; padding:0 12px;
}
.magical-hint, .magical-guide p { margin:12px 0 0; color:#bfd1e3; line-height:1.45; }
.magical-seed-table { display:grid; gap:10px; }
.magical-seed-line, .magical-seed-total {
  display:grid; grid-template-columns:46px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 14px; border-radius:14px; background:rgba(25,40,64,.74); border:1px solid rgba(123,159,204,.2);
}
.magical-seed-line > img, .magical-seed-line .ico, .magical-seed-total > img, .magical-seed-total .ico { width:46px; height:46px; object-fit:contain; }
.magical-seed-line > span, .magical-seed-total > span { display:flex; flex-direction:column; min-width:0; }
.magical-seed-line > span > small { color:#bdd1e6; }
.magical-seed-line strong, .magical-seed-total strong, .metric-money.magical-money { display:inline-flex; align-items:center; gap:8px; }
.magical-seed-total { grid-template-columns:minmax(0,1fr) auto; }
.magical-seed-total > span { font-weight:800; }
.magical-guide button:hover, .magical-toggle:hover { filter:brightness(1.06); }
/* Event crop cards inside Production Planner */
.production-card.magical-production-card h3 { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; flex-wrap:wrap; }
.production-card.magical-production-card .facility-card-title { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.production-card.magical-production-card .facility-card-title .ico, .production-card.magical-production-card .facility-card-title img { width:28px; height:28px; object-fit:contain; }
/* Custom Setup: lift cards up so the modal feels less flat */
#advanced-setup-content .advanced-card-grid { align-items:start; }
#advanced-setup-content .advanced-facility-card {
  border:1px solid rgba(132,169,214,.24); border-radius:18px; background:linear-gradient(180deg, rgba(41,61,96,.9), rgba(31,49,77,.92));
  box-shadow:0 16px 28px rgba(8,14,28,.18); padding:16px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#advanced-setup-content .advanced-facility-card:hover { transform:translateY(-2px); box-shadow:0 20px 34px rgba(8,14,28,.24); border-color:rgba(171,198,233,.38); }
#advanced-setup-content .advanced-facility-card header { margin-bottom:12px; }
#advanced-setup-content .advanced-card-title { align-items:flex-start; gap:12px; }
#advanced-setup-content .advanced-card-title > .ico, #advanced-setup-content .advanced-card-title > img { width:42px; height:42px; object-fit:contain; flex:0 0 42px; }
#advanced-setup-content .advanced-card-title h3 { margin:0 0 2px; }
#advanced-setup-content .advanced-level-rows { display:grid; gap:10px; }
#advanced-setup-content .advanced-level-row {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px; align-items:end; padding:12px; border-radius:14px; background:rgba(20,33,53,.52);
}
#advanced-setup-content .advanced-level-row label { display:grid; gap:6px; }
#advanced-setup-content .advanced-level-row label > span, #advanced-setup-content .advanced-component-level > span { color:#cfe2f7; font-weight:700; }
#advanced-setup-content .advanced-level-row input, #advanced-setup-content .advanced-level-row select, #advanced-setup-content .advanced-component-level select {
  min-height:44px; border-radius:12px; border:1px solid #5a769c; background:#223855; color:#f4f8fc; padding:0 12px;
}
#advanced-setup-content .advanced-add-level, #advanced-setup-content .advanced-remove-row {
  min-height:40px; border-radius:12px; border:1px solid rgba(152,186,227,.3); background:rgba(24,39,61,.72); color:#f0f6fb; font-weight:700;
}
#advanced-setup-content .component-card .advanced-component-level { display:grid; gap:8px; }
@media (max-width: 900px) {
  .magical-overview, .magical-reserve-grid { grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .magical-dialog-head { padding:18px 16px 14px; }
  .magical-center-content { padding:16px 16px 20px; gap:14px; }
  .magical-head-copy h2 { font-size:28px; }
  .magical-seed-line, .magical-seed-total { grid-template-columns:40px minmax(0,1fr); }
  .magical-seed-line strong, .magical-seed-total strong { grid-column:2; justify-self:start; }
  .magical-reserve-card-head { flex-direction:column; }
  #advanced-setup-content .advanced-level-row { grid-template-columns:1fr; }
}