/* Match controls use the existing Glyphsmith board, palette and right desk. */
/* Display controls belong to the match even when its palette is empty. Keep
   sandbox mutation controls out of this presentation-only board. */
body.glyphmatch-live #boardSize{display:inline-flex;}
body.glyphmatch-live :is(#connectBtn,#clearBtn){display:none;}
/* Match glyphs are authored scenes, so canonical font and overlay knobs do not
   apply. Only expose controls that change this scene. */
body.glyphmatch-live :is(#locusGroup,#blendRange,#canonSizeReadout),
body.glyphmatch-live #boardSize [data-bt]{display:none !important;}
/* The phone authoring drawer used to hide the entire view selector. A match
   keeps it in normal flow, including while the navigation drawer is open. */
@media(max-width:640px), ((max-height:640px) and (pointer:coarse)){
  body.glyphsmith-live.glyphmatch-live .top-bar,
  body.glyphsmith-live.glyphmatch-live.m-chrome .top-bar{
    display:flex !important;position:relative;left:auto;right:auto;top:auto;
    width:calc(100% - 60px);margin-left:60px;box-sizing:border-box;
    max-height:none;z-index:20;flex-wrap:nowrap;overflow-x:auto;
    overflow-y:hidden;padding:6px 8px;gap:8px;border-radius:0;
    background:var(--ui-topbar);box-shadow:none;
  }
  body.glyphsmith-live.glyphmatch-live .top-bar > *{order:0;zoom:1;}
  body.glyphsmith-live.glyphmatch-live .top-bar > .bar-group:has(#viewSeg){order:-1;}
  body.glyphmatch-live:not(.m-chrome) .top-bar > .tbtn{display:none;}
  body.glyphsmith-live.glyphmatch-live .top-bar .bar-group{flex-wrap:nowrap;}
  body.glyphmatch-live #viewSeg{flex-shrink:0;}
}
body.glyphmatch-live .glyphmatch-panel{width:396px;max-width:calc(100% - 16px);}
body.glyphmatch-live .gm-actions{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0;}
body.glyphmatch-live .gm-actions > .gp-go{flex:1 1 100%;}
body.glyphmatch-live .glyphmatch-panel :is(button,.gm-link,summary){min-height:44px;box-sizing:border-box;}
body.glyphmatch-live .gm-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
body.glyphmatch-live .glyphmatch-panel :is(input,textarea,select),body.glyphmatch-live .gm-clausebar input{font-size:16px;box-sizing:border-box;}
body.glyphmatch-live .gm-clausebar{max-width:min(860px,calc(100vw - 440px));}
body.glyphmatch-live .gm-clausebar :is(input,button,.gm-link){min-height:44px;}
body.glyphmatch-live .gm-clausebar input{flex:1 1 240px;}
body.glyphmatch-live .gm-clausebar .gs-reading{flex-basis:100%;overflow-wrap:anywhere;}
/* Predictions sit below the input in the bottom-anchored bar. Growing the bar
   upward keeps the list visible instead of opening it below the viewport. */
body.glyphmatch-live .gm-predictions{flex:1 0 100%;min-width:0;grid-column:1 / -1;max-height:180px;overflow-y:auto;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-panel);box-sizing:border-box;}
body.glyphmatch-live .gm-predictions[hidden]{display:none;}
body.glyphmatch-live .gm-predictions button{display:block;width:100%;margin:0;padding:10px 12px;text-align:left;font:16px/1.4 Georgia,serif;letter-spacing:normal;text-transform:none;white-space:normal;overflow-wrap:anywhere;border:0;border-radius:0;background:transparent;color:var(--ui-text);cursor:pointer;}
body.glyphmatch-live .gm-predictions button:is(:hover,[aria-selected="true"]){background:color-mix(in srgb,var(--gold) 16%,var(--ui-panel));box-shadow:inset 3px 0 var(--gold);}
body.glyphmatch-live .gm-claim-tools{display:flex;justify-content:flex-end;gap:6px;}
body.glyphmatch-live .gs-rec:has(.gm-claim-tools){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;}
body.glyphmatch-live .gs-rec:has(.gm-claim-tools)>small{grid-column:1 / -1;}
body.glyphmatch-live .gm-claim-tools .gs-claimx{float:none;margin:0;min-width:44px;opacity:.75;}
body.glyphmatch-live .gm-claim-text{overflow-wrap:anywhere;}
/* A restored claim that fails validation reads as a problem, not a priced claim. */
body.glyphmatch-live .gs-rec.gm-invalid{border-color:#cf8373;border-style:dashed;}
body.day.glyphmatch-live .gs-rec.gm-invalid{border-color:#a13728;}
body.glyphmatch-live .gm-claim-warn{display:block;margin-top:3px;font:13px/1.4 Georgia,serif;font-style:normal;}
body.glyphmatch-live .gs-rec:has(.gm-claim-tools)>.gm-claim-warn{grid-column:1 / -1;}
/* board.css dims only .gs-draft-primary .gs-hang:disabled; the match desk places
   Hang after that wrapper, so the disabled state needs its own rule here. */
body.glyphmatch-live .gs-hang:disabled{opacity:.42;cursor:not-allowed;box-shadow:none;}
/* A full Patron picker used to leave Start looking active even when invalid.
   Show disabled controls honestly, and mark selections beyond color alone. */
body.glyphmatch-live .glyphmatch-panel :is(.gp-go,.gs-seatpick button):disabled{opacity:.42;cursor:not-allowed;box-shadow:none;}
body.glyphmatch-live .glyphmatch-panel .gs-seatpick button:disabled:hover{border-color:var(--ui-border);}
body.glyphmatch-live .gm-roster{font-style:normal;}
/* Atlas artwork exists beyond the admitted alphabet. Label membership beside
   the artwork and claims without changing the glyph's domain colors or shape. */
body.glyphmatch-live .gm-membership-key{font-size:12px;line-height:1.5;font-style:normal;color:var(--ui-text2);}
body.glyphmatch-live :is(.gm-membership,.gs-membership-tag){display:inline-block;padding:3px 7px;border:1px solid var(--ui-border);border-radius:5px;background:var(--ui-panel);color:var(--ui-text2);font:11px/1.4 system-ui,sans-serif;font-style:normal;letter-spacing:0;text-transform:none;text-shadow:none;}
body.glyphmatch-live :is(.gm-membership,.gs-membership-tag)[data-membership="alphabet"]{border-color:var(--gold);color:var(--gold);}
body.day.glyphmatch-live :is(.gm-membership,.gs-membership-tag)[data-membership="alphabet"]{color:#6a5716;}
body.glyphmatch-live .hand-card .gs-membership-tag{position:absolute;left:6px;bottom:6px;z-index:4;max-width:calc(100% - 12px);box-sizing:border-box;}
body.glyphmatch-live .hand:is(.view-list,.view-node) .gs-membership-tag{position:static;flex-shrink:0;max-width:100%;}
/* Secret-article values remain readable before selection in every palette view. */
body.glyphmatch-live .gs-target-value{display:inline-block;padding:3px 7px;border:1px solid var(--gold);border-radius:5px;background:var(--ui-panel);color:var(--ui-text);font:12px/1.4 system-ui,sans-serif;letter-spacing:0;text-shadow:none;text-transform:none;}
body.glyphmatch-live .hand-card .gs-target-value{position:absolute;left:6px;bottom:6px;z-index:4;max-width:calc(100% - 12px);box-sizing:border-box;}
body.glyphmatch-live .hand:is(.view-list,.view-node) .gs-target-value{position:static;flex-shrink:0;max-width:100%;}
body.glyphmatch-live .gm-component-label::after{display:block;margin-top:3px;font:11px/1.4 system-ui,sans-serif;letter-spacing:0;text-shadow:none;color:var(--ui-text2);}
body.glyphmatch-live .gm-component-label[data-membership="alphabet"]::after{content:'Alphabet';color:var(--gold);}
body.day.glyphmatch-live .gm-component-label[data-membership="alphabet"]::after{color:#6a5716;}
body.glyphmatch-live .gm-component-label[data-membership="universe"]::after{content:'Universe';}
body.glyphmatch-live .gm-component-label[data-membership="unknown"]::after{content:'Alphabet status unavailable';}
body.glyphmatch-live .glyphmatch-panel details{margin:10px 0;font:13px/1.5 Georgia,serif;}
body.glyphmatch-live .glyphmatch-panel summary{cursor:pointer;display:flex;align-items:center;color:var(--ui-text2);}
body.glyphmatch-live .glyphmatch-panel summary::before{content:'▸';margin-right:7px;}
body.glyphmatch-live .glyphmatch-panel details[open]>summary::before{content:'▾';}
body.glyphmatch-live .gm-challenge :is(label,textarea,select){display:block;width:100%;max-width:100%;margin:5px 0;}
body.glyphmatch-live .gm-challenge :is(textarea,select){color:var(--ui-text);background:var(--ui-input);border:1px solid var(--ui-border);border-radius:7px;min-height:44px;padding:7px;}
body.glyphmatch-live .gm-error{color:#cf8373;}
body.day.glyphmatch-live .gm-error{color:#a13728;}
body.glyphmatch-live .gm-pending{border-left:2px solid var(--gold);padding-left:9px;}
body.glyphmatch-live .gm-usage{margin-top:16px;}
body.glyphmatch-live .gm-search-slot:empty{display:none;}
body.glyphmatch-live:not(.gm-has-palette) .hand.gs-hand .hand-box{display:none;}
/* This palette scrolls and crops its cards. The normal hand's lift/zoom moves
   selected and hovered titles above that clip; keep the card in its row and
   mark selection/focus inside the visible card instead. */
body.glyphmatch-live .hand.gs-hand .hand-card:is(:hover,.sel,:focus-visible){transform:none;}
body.glyphmatch-live .hand.gs-hand .hand-card:is(.sel,:focus-visible){outline:2px solid var(--gold);outline-offset:-2px;}
body.glyphmatch-live .hand.gs-hand .hand-card.sel .nx{outline:none;box-shadow:none;}
/* app.css centres the hand in the space left of a 340px panel; the 396px match
   desk overlapped it, and at the card-size floor a centred box wider than its cap
   spilled off the left edge. Pin both edges instead: 12px from the left, 16px
   short of the desk. Card widths, zoom and the clause bar can no longer move it;
   a row wider than the space scrolls. */
@media(min-width:641px){
  body.glyphmatch-live:has(.game-panel.open) .hand{left:12px;right:calc(396px + 12px + 16px);width:auto;transform:none;}
  body.glyphmatch-live:has(.game-panel.open) .hand .hand-box{width:100%;box-sizing:border-box;}
  body.glyphmatch-live:has(.game-panel.open) .hand.gs-hand .hand-cards{max-width:100%;}
  body.glyphmatch-live:has(.game-panel.open) .gm-clausebar{max-width:100%;box-sizing:border-box;}
}
/* A 375px phone keeps the same palette and scrollable Glyphsmith desk. */
@media(max-width:640px){
  body.glyphmatch-live .glyphmatch-panel{width:auto;}
  body.glyphmatch-live.gm-has-palette .glyphmatch-panel{bottom:calc(var(--gm-palette-room,228px) + env(safe-area-inset-bottom,0px));max-height:44dvh;}
  body.glyphmatch-live .hand.gs-hand{bottom:calc(8px + env(safe-area-inset-bottom,0px));max-height:24dvh;}
  /* The generic game hand reserves a full card above a cropped face. Match
     palettes use the existing Glyphsmith crop, so reserve its actual height. */
  body.glyphmatch-live:has(.game-panel.open) .hand.game-hand.gs-hand:not(.view-list):not(.view-node):not(.view-locus):not(.dock-wide) .hand-cards{
    height:calc(392px * var(--hc) * var(--hc-crop,1) + 10px);max-height:none;
  }
  body.glyphsmith-live.glyphmatch-live .gm-clausebar{max-width:100%;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;}
  body.glyphmatch-live .gm-clausebar input{width:100%;min-width:0;}
  body.glyphmatch-live .gm-clausebar .gm-link{width:auto;}
  body.glyphmatch-live .gm-clausebar .gs-reading{grid-column:1 / -1;}
  body.glyphmatch-live .gm-claim-tools{margin-top:4px;}
  body.glyphmatch-live .glyphmatch-panel .gs-seatpick{flex-wrap:wrap;overflow:visible;}
  body.glyphmatch-live .glyphmatch-panel .gs-seatpick button{max-width:100%;white-space:normal;}
}
/* The phone title plate covers bottom badges. Keep the target value inside
   that plate so both the article name and its value remain visible. */
@media(max-width:640px), ((max-height:640px) and (pointer:coarse)){
  body.glyphmatch-live .hand:not(.view-list):not(.view-node) .gs-target-value{display:none;}
  body.glyphmatch-live .hc-mobile-title .gs-target-mobile-value{font:11px/1.3 system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#f5fbff;}
}