/* Dosa Tycoon — guide.css (GUIDE50, 5.0): the "?" marks, their card, and the in-game guide (js/guide.js).
 * The card lives on <body>, outside the scaled stage, so its sizes are real pixels at every screen size (12 px floor).
 * The in-game guide sits in a screen modal, inside the stage: there its small sizes read max(size, var(--fl)) like the rest. */

/* ---------------------------------------------------------------- the "?" */
.gd-q {
  --gd-q: 26px;
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--gd-q);
  height: var(--gd-q);
  padding: 0;
  border: 2.5px solid #3A1F12;
  border-radius: 50%;
  background: #FFFDF5;
  color: #3A1F12;
  font: 800 15px/1 'Baloo 2', system-ui, sans-serif;
  box-shadow: 0 2px 0 #3A1F12;
  cursor: help;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.gd-q:hover { background: #FFF1C9; }
.gd-q:focus-visible { outline: 3px solid #F5B301; outline-offset: 2px; }
.gd-q[aria-expanded="true"] { background: #F5B301; }
/* a larger finger target than the mark itself */
.gd-q { position: relative; }
.gd-q::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; }

/* in a window's title bar, beside close */
.gd-q--head { --gd-q: 34px; margin: 0 8px 0 auto; font-size: 19px; border-width: 3px; box-shadow: inset 0 -3px 0 #D6BD8B, 0 3px 0 #3A1F12; background: linear-gradient(180deg, #FFFDF5, #F6E6C3); }
.dtw-head.gd-has-q > .dtw-head__meta { margin-right: 0; }
.is-compact .gd-q--head { --gd-q: 44px; margin-top: 2px; font-size: 21px; }          /* (FIX50: a 44 px finger target, as every phone control) */
.is-compact:not(.is-two) .dtw-head.gd-has-q { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "icon title gd close" "icon scope gd close"; }
.is-compact:not(.is-two) .dtw-head.gd-has-q > .gd-q--head { grid-area: gd; margin: 0 2px 0 0; }
/* (TRI50) beside the "?" a long title takes a second line rather than a "…" (f50b j26 android-360: "Goals, Awards & Land", 211 px of words in 190) */
.is-compact:not(.is-two) .dtw-head.gd-has-q > .dtw-head__title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.06; }

/* (FIX50) the drawn glyph, centred in the circle (js/guide.js GLYPH) */
.gd-q__g { display: block; width: 62%; height: 62%; pointer-events: none; }
/* (FIX50, the owner) no "?" on the menus' tiles or the locked cards any more (js/guide.js SLOTS): their corner marks are gone */

/* ---------------------------------------------------------------- the card */
.gd-card {
  position: fixed;
  z-index: 2147483000;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: max-content;
  max-width: 320px;
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 12px;
  background: #FFFDF5;
  color: #3A1F12;
  border: 3px solid #3A1F12;
  border-radius: 14px;
  box-shadow: 0 5px 0 rgba(58, 31, 18, .35), 0 14px 30px rgba(27, 7, 11, .35);
  font: 600 14px/1.38 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-align: left;
  overflow-wrap: break-word;
  animation: gd-in .12s ease-out;
}
@keyframes gd-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gd-card { animation: none; } }
.gd-card p { margin: 0 0 6px; }
.gd-card__t { margin: 0 0 6px; font: 400 18px/1.15 'Lilita One', 'Baloo 2', sans-serif; letter-spacing: .2px; color: #8E1B2D; padding-right: 4px; }
.gd-card__lock { padding: 5px 8px; border-radius: 9px; background: #F6EEDC; border: 2px solid #D3C3A2; font-weight: 700; color: #5A3A24; }
.gd-card__where { font-size: 13px; color: #6B4A2E; }
.gd-card__where > span, .gd-where__k { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 6px; background: #3A1F12; color: #FFFDF5; font-size: 12px; font-weight: 800; line-height: 18px; letter-spacing: .3px; text-transform: uppercase; vertical-align: 1px; }
.gd-card__more {
  display: inline-flex; align-items: center; min-height: 36px; margin-top: 2px; padding: 4px 12px;
  border: 2.5px solid #3A1F12; border-radius: 999px; background: #F5B301; color: #3A1F12;
  font: 800 14px/1.1 'Baloo 2', system-ui, sans-serif; box-shadow: 0 2px 0 #3A1F12; cursor: pointer;
}
.gd-card__more:hover { filter: brightness(1.05); }
.gd-card__more:focus-visible { outline: 3px solid #8E1B2D; outline-offset: 2px; }

/* ---------------------------------------------------------------- the in-game guide (a screen modal: DT.screens.guide) */
/* the guide's own floor: 12.2 real px at any stage scale (a tablet in portrait shrinks the stage to 0.64, past --fl's cap) */
html:not(.dt-compact) .dts-guide { --gd-fl: calc(12.2px / var(--stage-scale, 1)); }
.dts-guide { width: 1180px; max-height: 860px; padding: 62px 26px 20px; display: flex; flex-direction: column; text-align: left; }
.dts-guide > .dts-scroll { display: block; flex: 1 1 auto; min-height: 0; align-self: stretch; margin: 0 -10px; padding: 0 10px 8px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.dts-guide__foot { display: flex; justify-content: center; margin-top: 14px; }
.gd-view { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; color: #3A1F12; font: 600 max(19px, var(--gd-fl, 0px))/1.45 'Baloo 2', system-ui, sans-serif; }
.gd-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 6px; }
.gd-nav__b { text-align: left; padding: 7px 12px; min-height: 44px; border: 2.5px solid #3A1F12; border-radius: 12px; background: #FFFDF5; color: #3A1F12; font: 700 max(17px, var(--gd-fl, 0px))/1.15 'Baloo 2', system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 0 #3A1F12; }
.gd-nav__b.is-on { background: #F5B301; }
.gd-nav__b:focus-visible { outline: 3px solid #8E1B2D; outline-offset: 2px; }
.gd-page__t { margin: 0 0 2px; font: 400 34px/1.1 'Lilita One', 'Baloo 2', sans-serif; color: #8E1B2D; }
.gd-page__blurb { margin: 0 0 12px; color: #6B4A2E; }
.gd-page__web { margin: 18px 0 6px; }
.gd-page__web a { color: #C8102E; font-weight: 800; }
.gd-view .gd-entry { margin: 0 0 14px; padding: 14px 16px; background: #FFFDF5; border: 2.5px solid rgba(58, 31, 18, .35); border-radius: 14px; scroll-margin-top: 8px; }
.gd-view .gd-entry.is-target { border-color: #F5B301; box-shadow: 0 0 0 3px rgba(245, 179, 1, .45); }
.gd-view .gd-entry__t { margin: 0 0 6px; font: 400 25px/1.15 'Lilita One', 'Baloo 2', sans-serif; color: #8E1B2D; }
.gd-view .gd-entry p { margin: 0 0 8px; }
.gd-view .gd-lede { font-weight: 700; }
.gd-view .gd-where, .gd-view .gd-opens { font-size: max(16px, var(--gd-fl, 0px)); color: #6B4A2E; }
.gd-view .gd-where__k { font-size: max(13px, var(--gd-fl, 0px)); line-height: 1.5; }
.gd-view .gd-note { font-size: max(15px, var(--gd-fl, 0px)); color: #6B4A2E; }
.gd-view .gd-table { overflow-x: auto; margin: 6px 0 8px; border: 2px solid rgba(58, 31, 18, .25); border-radius: 10px; }
.gd-view table { border-collapse: collapse; width: 100%; font-size: max(16px, var(--gd-fl, 0px)); line-height: 1.3; }
.gd-view th, .gd-view td { padding: 6px 9px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(58, 31, 18, .15); }
.gd-view thead th { background: #F6E6C3; font-weight: 800; white-space: nowrap; }
.gd-view tbody th { font-weight: 800; }
.gd-view .gd-shot { margin: 8px 0 2px; }
.gd-view .gd-shot img { display: block; max-width: 100%; height: auto; border: 2.5px solid #3A1F12; border-radius: 10px; }

/* phones: the modal is real pixels; the sections become a row of chips that scrolls sideways */
html.dt-compact .dts-guide { max-width: 1180px; max-height: none; padding: 58px 12px 12px; }
html.dt-compact .dts-guide.has-scroll > .dts-scroll { display: block; padding-top: 0; }          /* (FIX50: the strip sticks at the very top, no band above it for the words to show in) */
/* (FIX50) the guide is drawn into .dts-guide__view, a box inside the scroller: on a computer the sections are a side list that
 * stays in view while the words scroll beside it; on a phone (below) a row of chips on a solid strip that stays at the top */
.dts-guide .dts-guide__view { width: 100%; min-width: 0; }
/* (FIX50, the owner) nothing under the ribbon: the shared ribbon keeps its own room below it (css/screens.css .dts-ribbon) */
html:not(.dt-compact) .dts-guide .gd-nav { z-index: 1; }
html.dt-compact .gd-view { display: block; font-size: 15px; }
html.dt-compact .gd-nav { position: sticky; top: 0; z-index: 2; flex-direction: row; overflow-x: auto; padding: 4px 12px 8px; margin: 0 -12px 6px; background: #FFF4DC; box-shadow: 0 2px 0 rgba(58, 31, 18, .18); scrollbar-width: none; }
html.dt-compact .gd-nav::-webkit-scrollbar { display: none; }
html.dt-compact .gd-nav__b { flex: none; min-height: 40px; font-size: 14px; white-space: nowrap; }
html.dt-compact .gd-page__t { font-size: 24px; }
html.dt-compact .gd-view .gd-entry { padding: 10px 12px; }
html.dt-compact .gd-view .gd-entry__t { font-size: 19px; }
html.dt-compact .gd-view .gd-where, html.dt-compact .gd-view .gd-opens, html.dt-compact .gd-view .gd-note { font-size: 13px; }
html.dt-compact .gd-view .gd-where__k { font-size: 12px; }
html.dt-compact .gd-view table { font-size: 13px; }