/* chaipo Study -- header actions (help and account menus).
 *
 * Structure follows the reference the user supplied: a round "?" button and a round avatar
 * at the right edge of the header, each opening a panel. The reference product's own logo
 * and artwork are not reproduced; the marks here are drawn for chaipo.
 *
 * Type: the wordmark uses an Arial Unicode stack (referenced by name only -- the font ships
 * with Microsoft Office and is not licensed for embedding, so no file is served). All other
 * interface text is Noto Sans JP at weight 700.
 */

/* ---- type ---------------------------------------------------------------- */
body.study-page {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  font-weight: 700;
}

body.study-page .muted,
body.study-page .small,
body.study-page small,
body.study-page .perf-note,
body.study-page .perf-lead {
  font-weight: 700;
}

/* The wordmark: Arial Unicode first, then the closest widely available faces. */
.study-header .brand,
.study-header .brand * {
  font-family: "Arial Unicode MS", "Arial Unicode", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.study-header .brand small {
  font-weight: 700;
  letter-spacing: 1.2px;
}

.study-header .brand em {
  font-style: normal;
}

/* ---- logo ----------------------------------------------------------------
 * The mark is the supplied pineapple: a crown and an oval body, both monochrome in the
 * accent colour, cut by a lattice of tiles. The tiles are made by a mask inside the SVG,
 * so nothing here may set `stroke` on `.brand-mark path` -- doing that erases the mask's
 * diagonal strokes and the mark renders as a solid blob.
 *
 * The wordmark is white with a grey second line, as in the supplied artwork.
 * study-public.css paints `em` gold and sizes the mark at 30x40; these rules come later.
 */
.study-header .brand,
.study-header .brand span,
.study-header .brand em {
  color: #ffffff;
}

.study-header .brand small {
  color: #9a9a9a;
  font-weight: 700;
  letter-spacing: 1.6px;
}

.study-header .brand-mark {
  width: 36px;
  height: 50px;
  flex: 0 0 36px;
}

/* ---- header layout ------------------------------------------------------- */
.study-header {
  position: relative;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* The original language <select> stays in the DOM because the page script writes to it;
   the Languages submenu drives it instead of showing it. */
.header-actions .language,
.study-header > .language,
.header-menus-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- round buttons ------------------------------------------------------- */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #6d6d74;
  color: #d8d8de;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1;
}

.icon-button:hover,
.icon-button[aria-expanded="true"] {
  border-color: #f0cf6a;
  color: #f0cf6a;
}

.icon-button svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---- panels -------------------------------------------------------------- */
.menu {
  position: relative;
}

.menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 236px;
  padding: 6px;
  background: #1c1c1e;
  border: 1px solid #34343a;
  border-radius: 10px;
  box-shadow: 0 14px 34px #000a;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.menu-panel[hidden] {
  display: none;
}

.menu-panel a,
.menu-panel button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  /* study-public.css ships
     `.study-page button:not(.playing-card):not(.primary):not(#newPosition){color:#fdfdfd}`,
     whose :not(#id) makes it far more specific than any class-based selector here. The
     menu needs its own colour, so this property is declared important and the reason is
     recorded rather than left as a mystery. */
  color: #f0efec !important;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.menu-panel a:hover,
.menu-panel button:hover {
  background: #2a2a2e;
}

.menu-panel .menu-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #b3b3b8;
}

.menu-panel .menu-chevron {
  margin-left: auto;
  color: #8d8d94;
  font-size: 11px;
}

.menu-panel .menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: #34343a;
}

/* The language list opens beside its parent entry. */
.menu-sub {
  position: relative;
}

.menu-panel.sub {
  top: -6px;
  right: calc(100% + 6px);
  min-width: 190px;
  max-height: 60vh;
  overflow: auto;
}

.flag {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}

.flag svg {
  width: 18px;
  height: 18px;
  display: block;
}

.menu-panel button[aria-checked="true"] {
  color: #f0cf6a !important;
}

/* ---- account dialog ------------------------------------------------------ */
.account-dialog {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #000000bf;
}

.account-dialog[hidden] {
  display: none;
}

.account-card {
  width: min(420px, 100%);
  background: #1c1c1e;
  border: 1px solid #34343a;
  border-radius: 14px;
  padding: 22px 22px 18px;
  box-shadow: 0 20px 50px #000b;
}

.account-card h2 {
  margin: 0 0 12px;
  font-size: 16px;
}

.account-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #2a2a2e;
  font-size: 13px;
}

.account-row:last-of-type {
  border-bottom: 0;
}

.account-row span:first-child {
  color: #b3b3b8;
}

.account-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.account-actions button {
  flex: 1 1 auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  background: #242426;
  color: #f0efec;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.account-actions .primary {
  background: #f0cf6a;
  border-color: #f0cf6a;
  color: #121212;
}

.account-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: #8d8d94;
}

/* ---- support form -------------------------------------------------------- */
.support-card {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow: auto;
}

.support-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
}

.support-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.support-label {
  font-size: 12px;
  color: #b3b3b8;
}

.support-form input,
.support-form select,
.support-form textarea {
  width: 100%;
  box-sizing: border-box;
  background: #121214;
  color: #fdfdfd;
  border: 1px solid #3a3a40;
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  font-weight: 700;
  font-size: 13px;
}

.support-form textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.7;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  outline: 2px solid #f0cf6a;
  outline-offset: 1px;
}

/* Honeypot: kept out of the layout and out of the tab order. */
.support-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.support-note {
  margin: 0 0 12px;
  font-size: 12px;
  color: #f0cf6a;
}

.support-privacy {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #8d8d94;
}

.support-status {
  margin: 10px 0 0;
  font-size: 12.5px;
  min-height: 18px;
}

.support-status.ok {
  color: #8ac356;
}

.support-status.error {
  color: #e46b62;
}

.support-mailto {
  color: #f0cf6a;
}

/* ---- mobile tier ----------------------------------------------------------
 * Keyed on available space and pointer type, never on the user agent. The one-screen shell
 * only engages from 1280x1100, so a phone gets the scrolling layout; this is that layout,
 * arranged for a hand.
 */

/* Notch and home-indicator insets. The viewport meta opts in with viewport-fit=cover. */
.study-header,
.study-nav,
.study-main {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

.study-main {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

@media (max-width: 1099px) {
  /* Comfortable touch targets for the controls, not for the card tiles. */
  .study-page button,
  .study-page select,
  .study-page input[type="number"] {
    min-height: 44px;
  }

  .study-page .slot {
    min-width: 40px;
    min-height: 52px;
  }

  .study-page .hand-zone .playing-card,
  .study-page .table-board-row .playing-card {
    --card-w: 34px;
    --card-h: 46px;
    --rank: 26px;
  }

  /* The header actions are already 34px; make them thumb-sized here. */
  .icon-button {
    width: 40px;
    height: 40px;
  }

  .study-page .study-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- mobile board, hand and picker -----------------------------------------
 * The reference on a phone (measured from a screenshot of app.gtowizard.com at 414 CSS px
 * wide) shows all thirteen ranks across the screen at roughly 20px a card with no sideways
 * scrolling, and the picker sits at the bottom of the viewport with the board above it.
 *
 * chai-po before this: the picker tiles were 40px wide so the rows scrolled sideways
 * (593px of content in a 292px box), and the picker rendered ABOVE the board because
 * study-table.css sets `.table-board-area{order:1}` on that flex column.
 *
 * The order is now board (13 cards), then the hand (5), then the picker (52 + 2 jokers),
 * with the picker riding the bottom of the viewport so the three are reachable together.
 */
@media (max-width: 1099px) {
  .study-page .table-workspace {
    display: flex;
    flex-direction: column;
  }

  .study-page .table-board-area {
    order: 1;
  }

  .study-page #deckPanel {
    order: 2;
    display: flex;
    flex-direction: column;
    position: sticky;
    bottom: 0;
    z-index: 6;
    width: auto;
    background: #131313;
    border-top: 1px solid #2a2a2a;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    margin: 0;
  }

  .study-page #deckPanel #deckTitle,
  .study-page #deckPanel #deckInstruction {
    order: 0;
  }

  .study-page #deckPanel .picker-tray {
    order: 1;
  }

  .study-page #deckPanel #cardPicker {
    order: 2;
  }

  .study-page #deckPanel #returnToDeck {
    order: 3;
  }

  .study-page #deckPanel > p {
    order: 4;
  }

  /* Thirteen ranks across the width: no sideways scrolling. */
  .study-page .card-picker {
    overflow-x: visible;
    margin: 4px 0 0;
  }

  .study-page .table-deck-row {
    grid-template-columns: 16px repeat(13, minmax(0, 1fr));
    gap: 1px;
    min-width: 0;
    margin-bottom: 2px;
  }

  .study-page .table-deck-row .playing-card {
    width: 100%;
    min-width: 0;
    height: 34px;
    min-height: 34px;
    border-radius: 3px;
  }

  .study-page .table-deck-row .playing-card .card-rank {
    font-size: 17px;
    letter-spacing: -.04em;
  }

  /* The tray stays compact so the board keeps the space. */
  .study-page #deckPanel .hand-zone {
    min-height: 44px;
    margin-top: 3px;
    padding: 3px 2px;
  }

  .study-page #deckPanel .hand-zone .playing-card {
    --card-w: 30px;
    --card-h: 40px;
    --rank: 22px;
  }

  .study-page #deckPanel .hand-heading {
    margin-top: 2px;
  }

  .study-page #deckPanel .hand-heading strong {
    font-size: 13px;
  }
}

/* Touch devices have no hover: anything that only appears on hover must not be relied on. */
@media (hover: none) {
  .study-page .playing-card:hover,
  .study-page .slot:hover {
    transform: none;
  }

  .menu-panel a:hover,
  .menu-panel button:hover {
    background: transparent;
  }
}

/* Respect the system setting for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .study-page * {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- narrow screens ------------------------------------------------------ */
@media (max-width: 700px) {
  .menu-panel {
    min-width: 200px;
  }

  .menu-panel.sub {
    top: calc(100% + 4px);
    right: 0;
  }
}