/* GTO helper panel (approximate advice: equity, pot odds, suggested action). */
/* gto-ui.js: the slim panel above the dock, the tags on the dock buttons, the host's setting, the sticker. */
.gto-panel { --fold: var(--red); --pass: var(--teal); --aggro: var(--yellow); --jam: var(--pink);
  position: fixed; z-index: 6; left: 10px; right: 10px; margin: 0 auto; width: max-content; max-width: min(440px, calc(100vw - 20px));
  bottom: calc(var(--dock-h, 190px) + 32px); /* clear of the timer fuse riding on top of the dock */
  padding: 4px 9px 5px 5px; background: rgba(251, 241, 217, .95); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 14px;
  box-shadow: 0 3px 0 var(--ink); font-weight: 900; cursor: pointer; overflow: hidden; -webkit-user-select: none; user-select: none; }
.gto-panel:not(.turn) { opacity: .88; padding: 2px 9px 2px 4px; }
.gto-panel:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }
/* opened (tapped): the reasons card lies over the signs, plates and pills (they keep to its folded
   height, gto-ui.js) until a tap anywhere folds it */
.gto-panel[aria-expanded="true"] { z-index: 11; }
.gto-panel .gp-main { display: flex; align-items: center; gap: 9px; min-height: 34px; }
.gto-panel:not(.turn) .gp-main { min-height: 26px; }
.gp-tag { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; flex: none; font: 900 10px/1 var(--font); color: var(--ink2); }
.gp-tag .ic { width: 20px; height: 20px; }
.gto-panel:not(.turn) .gp-tag { flex-direction: row; gap: 3px; }
.gto-panel:not(.turn) .gp-tag .ic { width: 16px; height: 16px; }
.gp-cell { display: flex; flex-direction: column; align-items: center; flex: none; min-width: 36px; line-height: 1; }
.gp-cell b { font: 900 18px/1 var(--display); }
.gp-cell small { margin-top: 2px; font-size: 10px; font-weight: 800; color: var(--muted); white-space: nowrap; }
.gto-panel:not(.turn) .gp-cell { flex-direction: row; align-items: baseline; gap: 4px; }
.gto-panel:not(.turn) .gp-cell b { font-size: 15px; }
.gp-cell.up b { color: #1d8a62; } .gp-cell.down b { color: var(--red); }
.gp-adv { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-left: 9px; border-left: 2px dashed rgba(var(--ink-rgb), .3); line-height: 1.1; }
/* the pick; at the panel's widest (phones: clear of the sticker column) a long one drops its share under it, never past the edge */
.gp-adv b { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; font-size: 15px; white-space: nowrap; }
.gp-adv b::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink); background: var(--c, var(--grey)); }
.gp-adv b i { font-style: normal; font-size: 12px; padding: 1px 5px; border-radius: 7px; background: var(--ink); color: var(--paper); }
.gp-adv small { font-size: 11.5px; font-weight: 800; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-adv.idle { border-left: 0; padding-left: 0; }
.gp-adv.idle small { color: var(--muted); }
.k-fold { --c: var(--fold); } .k-pass { --c: var(--pass); } .k-aggro { --c: var(--aggro); } .k-jam { --c: var(--jam); }
/* the mix as one thin bar under the row */
.gp-mix { display: flex; height: 5px; margin: 4px 1px 0 3px; border: 1.5px solid var(--ink); border-radius: 3px; overflow: hidden; }
.gp-mix i { display: block; background: var(--c); }
.gp-mix i + i { border-left: 1.5px solid var(--ink); }
/* tap: the reasons */
.gp-more { display: flex; flex-direction: column; gap: 3px; max-width: 330px; margin: 6px 0 1px 3px; padding-top: 6px; border-top: 2px dashed rgba(var(--ink-rgb), .3); font-size: 12.5px; font-weight: 800; line-height: 1.3; white-space: normal; }
.gp-more b { font-size: 13.5px; }
.gp-more small { margin-top: 2px; font-size: 10.5px; font-weight: 700; color: var(--muted); }
.gp-title { font: 900 11px/1.2 var(--display); letter-spacing: .3px; color: var(--ink2); }

/* the suggested dock button (and the raise preset nearest the suggested size) */
.gto-pick, .gto-alt { position: relative; }
.gto-pick { outline: 3px dashed var(--ink); outline-offset: 2px; }
.gto-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); z-index: 1; padding: 2px 6px; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: 900 10px/1 var(--display); font-style: normal; letter-spacing: .2px; white-space: nowrap; pointer-events: none;
  animation: gtotag .28s cubic-bezier(.3, 1.8, .5, 1) both; }
.gto-pick .gto-tag { background: var(--ink); color: var(--yellow); }
.raise .presets .gto-tag { top: -9px; padding: 1px 5px; }
@keyframes gtotag { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.rm .gto-tag { animation: none; }
@media (prefers-reduced-motion: reduce) { .gto-tag { animation: none; } }

/* host settings: 关 / 仅房主 / 全桌 */
.gtoset { margin: 10px 0 4px; }
.gtoset-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-weight: 800; font-size: 14px; }
.gtoset-h .ic { width: 22px; height: 22px; }
.gto-seg button { min-height: 40px; font-size: 14px; padding: 0 4px; }
.gto-hint { margin: 2px 0 6px !important; text-align: left !important; font-size: 12px; }

/* everyone at the table: a tiny sticker in the top bar, right after the room-code chip, while the helper is on */
.gto-on { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px;
  border: 2px solid var(--ink); border-radius: 999px; background: rgba(255, 250, 240, .85); color: var(--ink); font: 900 10px/1.3 var(--display);
  box-shadow: 0 2px 0 rgba(var(--ink-rgb), .6); transform: rotate(-3deg); white-space: nowrap; }
.gto-on .ic { width: 14px; height: 14px; }
#topbar[hidden] ~ .gto-panel, #dock[hidden] ~ .gto-panel { display: none !important; }
/* it steps aside while I size a raise (the dock grows under it; the presets carry the GTO tag) */
body.raise-open .gto-panel { display: none; }
body.raise-open { --gto-h: 0px; }

/* phones (main.js PHONE): one line until tapped (the gauge, my equity, the pick and its share), on the
   felt just above the fuse at the left, clear of the sticker column on the right. Signs, plates and
   my own stamps step up over it (gto-ui.js publishes its box). The sticker keeps only its gauge,
   stuck on the room-code chip's corner so the short top bar loses next to no room. */
@media (max-width: 480px), (max-height: 500px) {
  .gto-panel { left: calc(10px + var(--safe-l)); right: auto; margin: 0; max-width: min(400px, calc(100vw - 82px - var(--safe-l) - var(--safe-r))); }
  .gp-main { gap: 7px; }
  .gp-adv { padding-left: 7px; }
  .gp-adv b { font-size: 14px; }
  .gto-panel[aria-expanded="false"] { padding-block: 2px; }
  .gto-panel[aria-expanded="false"] .gp-main { min-height: 28px; } /* a 36px tap target */
  .gto-panel[aria-expanded="false"] :is(.gp-tag span, .gp-cell small, .gp-cell + .gp-cell, .gp-adv small, .gp-adv.idle, .gp-mix) { display: none; }
  .gto-panel[aria-expanded="false"] .gp-tag .ic { width: 18px; height: 18px; }
  .gto-panel[aria-expanded="false"] .gp-cell b { font-size: 16px; }
  .gp-more { max-height: calc(100dvh - var(--dock-h, 190px) - var(--hud-top, 60px) - 120px); overflow: auto; }
  .gto-on { position: relative; align-self: flex-start; margin: -2px -6px 0 -14px; padding: 1px; transform: rotate(-8deg); }
  .gto-on .ic { width: 18px; height: 18px; }
  .gto-on span { display: none; }
}
/* landscape phones: the fuse rides right on the actions' column with its seconds at the left end,
   over the first button's middle: the tags stand at the buttons' right corner instead */
@media (max-height: 500px) {
  #dockMain .acts .gto-tag { left: auto; right: 10px; transform: none; animation-name: gtotagr; }
}
@keyframes gtotagr { from { transform: scale(.4); opacity: 0; } }