/* Viewport-sized briefing: text stays readable independently of table scale. */
html.agent8ball-help-open, html.agent8ball-help-open body { touch-action: pan-y; }
html #howtoplay {
  display: none;
  position: fixed;
  inset: 0;
  width: auto;
  height: auto;
  padding: 18px;
  box-sizing: border-box;
  z-index: 40000;
  cursor: default;
  background: rgba(9, 7, 4, .82) !important;
  backdrop-filter: blur(5px);
  color: #f6e5c7;
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  letter-spacing: normal;
  text-align: left;
  touch-action: pan-y;
}
#howtoplay *, #howtoplay *::before, #howtoplay *::after { box-sizing: border-box; }
#howtoplay [hidden] { display: none !important; }
.a8-help-dialog {
  display: flex;
  flex-direction: column;
  width: min(920px, 100%);
  max-height: 100%;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #a47a40;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(ellipse at 0 0, #4e321c, transparent 58%), #21180f;
  box-shadow: 0 25px 80px #000a, inset 0 1px #ffe3ac30;
}
.a8-help-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 23px 28px 18px; flex-shrink: 0; }
.a8-help-eyebrow { font-size: 10px; font-weight: bold; letter-spacing: 2.6px; color: #cba771; }
#howtoplay h1 { margin: 5px 0 0; color: #fff0d4; font: 600 28px/1.2 Georgia, 'Times New Roman', serif; }
#howtoplay h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font: bold 17px/1.3 Arial, sans-serif; color: #ffe9bc; }
#howtoplay p { margin: 0; }
#howtoplay button { font-family: Arial, Helvetica, sans-serif; cursor: pointer; color: inherit; touch-action: manipulation; }
#howtoplay button:focus-visible, .a8-help-content:focus-visible { outline: 2px solid #ffcc7a; outline-offset: -4px; }
#help-close { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid #977245; border-radius: 50%; background: #0f0b0766; font-size: 28px; line-height: 1; }
#help-close:hover { background: #674322; }
.a8-help-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 28px 15px; flex-shrink: 0; }
.a8-help-tabs button { min-height: 44px; padding: 7px 10px; border: 1px solid #6b5033; border-radius: 8px; background: transparent; font-size: 14px; font-weight: bold; white-space: nowrap; }
.a8-help-tabs button[aria-selected="true"] { color: #21150a !important; background: #ebbc77; border-color: #ebbc77; box-shadow: 0 3px 12px #0004; }
.a8-help-tabs button:hover:not([aria-selected="true"]) { background: #ffffff0c; }
.a8-help-content { padding: 0 28px 22px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: thin; scrollbar-color: #9a784c #21180f; }
.a8-help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.a8-help-card { padding: 18px; border: 1px solid #a47a403e; border-radius: 12px; background: #100d0969; }
.a8-help-card p { color: #d6c8b3; font-size: 14px; line-height: 1.55; }
.a8-help-card h2 b { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: #b9833630; color: #eebf7c; font-size: 13px; }
.a8-help-diagram { display: block; width: 100%; height: 100px; margin-bottom: 17px; border-radius: 8px; background: radial-gradient(ellipse at center, #304a3b, #172c25); pointer-events: none; }
.help-cue { stroke: #e8b977; stroke-width: 5; stroke-linecap: round; }
.help-white { fill: #f9edd1; stroke: #d8c6a0; stroke-width: 1; }
.help-guide { fill: none; stroke: #d4d6b7; stroke-width: 2; stroke-dasharray: 4 5; }
.help-ball { fill: #e69830; stroke: #ffd590; stroke-width: 1.5; }
.help-target { fill: #101815; stroke: #718679; stroke-width: 3; }
.help-arrow { fill: none; stroke: #efba6c; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.help-power-track { fill: #0c1b15; }
.help-power { fill: #efba6c; }
.help-rail { stroke: #ad8e59; stroke-width: 5; fill: none; }
.a8-help-devices { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 19px; }
.a8-help-devices p { color: #d6c8b3; font-size: 14px; }
.a8-help-devices strong { display: block; font-size: 10px; letter-spacing: 1.5px; margin-bottom: 5px; color: #e8bc79; }
#howtoplay .a8-help-note { margin-top: 15px; color: #bba992; font-size: 12px; line-height: 1.5; }
.a8-help-stat { color: #efbf78; font-weight: bold; font-size: 38px; line-height: 1.2; margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.a8-help-stat small { display: block; margin-top: 5px; font-size: 10px; letter-spacing: 1.5px; color: #c7af8d; }
.a8-help-score-grid, .a8-help-tips-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.a8-help-bank { width: 100%; height: 75px; margin: 0 0 10px; pointer-events: none; }
.a8-help-bonuses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; text-align: center; font-size: 12px; }
.a8-help-bonuses b { display: block; color: #efbf78; font-size: 23px; }
.a8-help-example { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; padding: 13px 18px; background: #49614433; border: 1px solid #8caa6155; border-radius: 10px; font-size: 13px; }
.a8-help-example strong { flex-shrink: 0; color: #d9e6a4; font-size: 20px; }
.a8-help-symbol { display: inline-flex; align-items: center; justify-content: center; width: 29px; height: 29px; flex-shrink: 0; border: 1px solid #927348; border-radius: 50%; color: #e8bc79; }
.a8-help-footer { display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 14px 28px; border-top: 1px solid #a47a403e; background: #130f0a77; flex-shrink: 0; }
#howtoplay #help-done { flex-shrink: 0; min-height: 44px; padding: 10px 22px; border: 1px solid #e8bb79; border-radius: 8px; background: #ebbc77; color: #281a0b; font-size: 14px; font-weight: bold; }
#howtoplay #help-done:hover { background: #ffda9e; }
@media (max-height: 520px) {
  html #howtoplay { padding: 8px; }
  .a8-help-dialog { border-radius: 13px; }
  .a8-help-header { padding: 10px 18px 8px; }
  #howtoplay h1 { font-size: 22px; margin-top: 2px; }
  .a8-help-eyebrow { font-size: 9px; }
  .a8-help-tabs { padding: 0 18px 8px; }
  .a8-help-content { padding: 0 18px 15px; }
  .a8-help-footer { padding: 7px 18px; }
  .a8-help-card { padding: 13px; }
  .a8-help-diagram { height: 52px; margin-bottom: 9px; }
}
@media (max-width: 620px) {
  .a8-help-header { padding: 14px; }
  #howtoplay h1 { font-size: 22px; }
  .a8-help-tabs { padding-left: 14px; padding-right: 14px; gap: 4px; }
  .a8-help-tabs button { font-size: 12px; padding: 6px 3px; }
  .a8-help-content { padding-left: 14px; padding-right: 14px; }
  .a8-help-grid, .a8-help-score-grid, .a8-help-tips-grid, .a8-help-devices { grid-template-columns: 1fr; }
  .a8-help-diagram { height: 90px; }
  .a8-help-footer { padding: 10px 14px; gap: 10px; }
  #help-done { padding: 10px 14px; }
  .a8-help-example { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 620px) and (max-height: 520px) {
  .a8-help-header { padding: 6px 14px; }
  #howtoplay h1 { font-size: 20px; }
  .a8-help-footer { padding: 6px 14px; }
  #help-shot .a8-help-card { display: grid; grid-template-columns: 110px 1fr; column-gap: 14px; }
  #help-shot .a8-help-diagram { grid-row: 1 / 3; height: 85px; margin: 0; align-self: center; }
  #help-shot h2 { font-size: 15px; margin-bottom: 5px; }
  #help-shot .a8-help-card p { font-size: 13px; }
}