/* Shared navigation and field guide. Financial amounts retain their existing colors. */
#topbar {
  background: linear-gradient(180deg, #11232f 0%, #08131c 100%);
  border-bottom-color: rgba(171, 205, 220, .18);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .18);
}
.brand .name { letter-spacing: .22em; font-weight: 750; }
.brand .mark { color: #9ce4eb; }
.top-right { gap: 12px; }
#wallet-btn { min-height: 40px; padding: 0 12px; gap: 18px; border-radius: 11px; }
.wallet-caption { color: #b8cdd7; font: 600 12px var(--ui); letter-spacing: .015em; }
body.watching #wallet-btn .wallet-caption { display: inline; }
body.watching #wallet-btn #play-purse { display: none; }
#wallet-btn .val { font-size: 14px; }
#menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: auto; min-width: 44px; height: 40px; padding: 0 13px;
  border: 1px solid rgba(158, 191, 208, .16); border-radius: 11px;
  background: rgba(146, 188, 207, .045); color: #c8dae2;
}
#menu-btn svg { width: 18px; height: 18px; }
.board-caption { font: 600 12px var(--ui); letter-spacing: .015em; }
#menu-btn:hover, #wallet-btn:hover { border-color: rgba(169, 224, 230, .45); background-color: rgba(148, 219, 227, .08); }
#menu-btn:active, #wallet-btn:active { box-shadow: inset 0 2px 5px rgba(0,0,0,.24); }

/* A contained instrument bezel makes the play window feel seated in the console. */
#game { border-color: rgba(169, 201, 218, .20); box-shadow: 0 16px 42px rgba(0,0,0,.17), inset 0 1px 0 rgba(227,243,251,.07); }
#watch-prompt {
  background: linear-gradient(110deg, rgba(29,55,66,.8), rgba(10,26,37,.96));
  border-color: rgba(152,195,209,.24);
}
#watch-signin {
  font: 650 13px var(--ui); letter-spacing: .025em;
  border: 1px solid rgba(204,245,255,.32); border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 5px 16px rgba(0,0,0,.14);
}
#toast { font: 550 13px/1.5 var(--ui); letter-spacing: .015em; border-radius: 12px; }

#modal .sheet { width: min(760px, 100%); padding: 32px; scroll-padding-top: 72px; }
#modal #modal-title { font: 750 26px/1.1 var(--ui); letter-spacing: .20em; margin: 0 54px 8px 0; }
#modal .guide-kicker { font-size: 10px; letter-spacing: .16em; color: #9ab9c7; margin: 0 0 22px; }
.guide-nav {
  display: flex; gap: 6px; overflow-x: auto;
  position: sticky; top: -32px; z-index: 2;
  padding: 12px 0; margin: 0 0 20px;
  background: #0c1c28; border-bottom: 1px solid rgba(162,197,214,.16);
  scrollbar-width: thin;
}
.guide-nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 13px; border: 1px solid rgba(156,195,213,.19);
  border-radius: 8px; color: #c8dee6; text-decoration: none;
  font: 600 12px var(--ui); transition: border-color .16s, background .16s;
}
.guide-nav a:hover, .guide-nav a:focus-visible { background: rgba(133,210,217,.12); border-color: rgba(148,224,229,.48); }
.guide-nav a:active { box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
#modal .lede { font-size: 17px; line-height: 1.65; color: #dbe9ed; margin: 0 0 28px; max-width: 62ch; }
.guide-section { padding: 24px 0 4px; border-top: 1px solid rgba(167,196,214,.14); margin-top: 22px; scroll-margin-top: 78px; transition: border-color .2s ease; }
.guide-section:has(> h3:target) { border-top-color: rgba(161,222,233,.46); }
#modal .guide-section > h3 {
  font: 650 19px/1.3 var(--ui); letter-spacing: -.015em; text-transform: none;
  color: #dbe8ec; margin: 0 0 16px; scroll-margin-top: 86px;
}
#modal .guide-section > p { max-width: 68ch; }
#modal .small { color: #a9bdc8; font-size: 12px; line-height: 1.7; }
#modal .guide-section > ul:not(.facts) { list-style: none; margin: 18px 0; padding: 0; counter-reset: guide; }
#modal .guide-section > ul:not(.facts) > li {
  position: relative; padding: 15px 16px 15px 52px; margin: 8px 0;
  border: 1px solid rgba(152,193,211,.13); border-radius: 10px;
  background: rgba(154,200,217,.035); color: #b8cdd8;
}
#modal .guide-section > ul:not(.facts) > li::before {
  counter-increment: guide; content: counter(guide, decimal-leading-zero);
  position: absolute; left: 16px; top: 17px; font: 600 11px var(--mono); color: #90c5cf;
}
#modal .facts { border: 1px solid rgba(157,194,211,.16); border-radius: 12px; overflow: hidden; margin: 20px 0; }
#modal .facts li { padding: 13px 16px; margin: 0; gap: 20px; border-bottom: 1px solid rgba(146,184,205,.12); background: rgba(151,192,214,.04); }
#modal .facts li:last-child { border-bottom: 0; }
#modal .facts b { color: #d3e3e8; font-size: 13px; }
#modal .fair { padding: 16px; border: 1px solid rgba(154,193,211,.14); border-radius: 12px; background: #081720; gap: 14px; margin-top: 12px; }
#modal .fair label { color: #a3bcc9; letter-spacing: .045em; font-size: 11px; }
#modal .fair input, #modal .fair .fair-val {
  border: 1px solid rgba(146,186,204,.2); border-radius: 8px;
  background: #0e222f; min-height: 42px; padding: 10px 11px; color: #d8e7ed;
}
#modal .fair input:focus { outline: 2px solid rgba(127,217,228,.58); outline-offset: 1px; }
#modal .fair input[readonly] { background: rgba(145,185,205,.025); }
#modal .fair-h { margin-top: 24px; margin-bottom: 10px; letter-spacing: .1em; line-height: 1.6; }
#modal .small-btn, #modal select {
  min-height: 42px; padding: 8px 13px; border-radius: 8px;
  font-family: var(--ui); font-size: 12px; letter-spacing: .01em;
}
#modal #l-save { background: #17424b; border-color: #39666c; color: #c8efeb; }
#modal .danger { background: rgba(133,63,58,.12); border-color: rgba(232,137,126,.36); }
#modal #l-panel { padding: 2px 0 14px; }
#modal #l-used, #modal #l-note, #modal #l-pending { color: #b8d2dc; }
#modal #support-line, #modal #complaints-line, #modal #terms-line { font-size: 12px; }
#modal kbd { display: inline-block; padding: 2px 6px; border-radius: 4px; box-shadow: 0 2px 0 #02090e; }

@media (max-width: 600px) {
  #topbar .top-right { gap: 6px; }
  .wallet-caption, .board-caption { display: none; }
  #wallet-btn { min-height: 44px; padding: 0 11px; }
  #menu-btn { width: 44px; height: 44px; padding: 0; }
  #modal .sheet { padding: 24px 18px; scroll-padding-top: 74px; }
  #modal #modal-title { font-size: 24px; }
  #modal .lede { font-size: 15px; }
  .guide-nav { top: -24px; gap: 5px; }
  .guide-nav a { min-height: 44px; padding: 0 11px; }
  .guide-section { padding-top: 20px; }
  #modal .guide-section > h3 { font-size: 18px; }
  #modal .fair { padding: 12px; gap: 10px; }
  #modal .fair input { font-size: 16px; min-height: 44px; }
  #modal .small-btn, #modal select { min-height: 44px; }
  #modal .facts li { padding: 12px; gap: 10px; }
  #modal .facts b { font-size: 11px; overflow-wrap: anywhere; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-nav a, .guide-section { transition: none; }
  #menu-btn:active, #wallet-btn:active { transform: none; }
}

/* The field guide opens with a short, visual explanation before the full rules. */
#modal .sheet {
  width: min(820px, 100%); padding: 38px;
  background: linear-gradient(140deg, #142a36, #0a1b26 65%);
  border: 1px solid #4c667475; border-radius: 10px;
}
#modal .guide-kicker { color: #b3c9c5; font: 10px/1.4 var(--mono); letter-spacing: .13em; margin: 0 58px 14px 0; }
#modal #modal-title { font: 600 44px/1.04 var(--ui); color: var(--ink-hi); letter-spacing: -.05em; margin-bottom: 24px; }
#modal .guide-nav { top: -38px; background: #102430; border-color: #627e8840; margin-bottom: 25px; }
#modal .guide-nav a { border: 0; border-radius: 4px; min-height: 44px; color: #b9cdd3; font-size: 13px; }
#modal .guide-nav a:first-child { background: #c0e5d610; color: #c8e7d9; }
#modal .guide-nav a:hover { background: #c0e5d617; color: #ecf3ed; }
#modal .lede { font-size: 17px; line-height: 1.65; color: #c4d3d8; }
.briefing-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.briefing-steps article {
  position: relative; min-width: 0; padding: 20px 18px 18px;
  border: 1px solid #718c9750; border-radius: 7px; background: #04131b55;
}
.briefing-steps .briefing-number { position: absolute; right: 16px; top: 19px; font: 10px var(--mono); color: #90aab5; }
.briefing-steps svg { width: 32px; height: 32px; stroke: #b4dfcf; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; fill: none; margin-bottom: 22px; }
#modal .briefing-steps h3 { margin: 0 0 10px; text-transform: none; font: 600 16px/1.3 var(--ui); letter-spacing: -.025em; color: #f0f0e7; }
.briefing-steps p { margin: 0; font: 12px/1.7 var(--ui); color: #adc1cb; }
.briefing-note { border-left: 2px solid #769caa; margin: 20px 0 30px; padding: 3px 0 3px 14px; color: #b0c6d0; font: 12px/1.65 var(--ui); }
#modal .guide-section { border-color: #7794a32b; padding-top: 27px; }
#modal .guide-section > h3 { font-size: 24px; color: #eeeFE7; letter-spacing: -.04em; }
#modal .facts { border-color: #708b9740; border-radius: 7px; }
#modal .facts li { background: #05131c55; padding-block: 15px; }
#modal .fair { background: #06151e; border-radius: 7px; }
#modal .small { font-size: 13px; }
#modal .guide-section > ul:not(.facts) > li { background: #d7eae504; border-radius: 6px; }
#modal #l-save { background: #bfe7d5; border-color: #c7ecdd; color: #102e26; font-weight: 650; }
@media (max-width: 600px) {
  #modal .sheet { padding: 26px 18px; }
  #modal #modal-title { font-size: 34px; margin-bottom: 18px; }
  #modal .guide-nav { top: -26px; }
  #modal .guide-nav a { padding-inline: 10px; font-size: 12px; }
  #modal .lede { font-size: 15px; }
  .briefing-steps { grid-template-columns: 1fr; gap: 9px; }
  .briefing-steps article { padding: 16px 17px 16px 65px; }
  .briefing-steps .briefing-number { left: 21px; right: auto; top: 17px; }
  .briefing-steps svg { position: absolute; left: 16px; top: 39px; width: 29px; height: 29px; }
  #modal .briefing-steps h3 { font-size: 17px; margin-bottom: 5px; }
  .briefing-steps p { font-size: 12px; line-height: 1.6; }
  #modal .guide-section > h3 { font-size: 22px; }
}

/* Official token artwork retains Circle's proportions and colors. */
.purse-bal .coin.official-usdc, .asset-menu .coin.official-usdc {
  --token-size: 20px;
  width: var(--token-size); height: var(--token-size);
  background: transparent !important; flex: 0 0 var(--token-size);
}
#wallet-modal .asset-row .purse-bal .coin.official-usdc {
  --token-size: 24px;
  width: var(--token-size); height: var(--token-size);
}
.coin.official-usdc img { display: block; width: 100%; height: 100%; }