/* Both modes share the larger cards and compact layout. The opt-in adds
   readable Spanish indices; the partner outline is present in both modes. */
.spanish-card-identity,.game-tressette .trick-player-role,.game-tressette .trick-card-name{display:none}
.visibility-mode-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;min-height:48px}
.visibility-mode-state{font-size:11px;border:1px solid #d6b36b66;border-radius:20px;padding:3px 8px;color:var(--gold)}
.visibility-personal-note{display:block;font-size:11px;color:var(--muted);line-height:15px;margin-top:3px}
html body #app .toolbar-buttons>#visibility-shortcut{display:inline-flex!important;flex-direction:column;align-items:center;justify-content:center;gap:0;flex:0 0 54px;width:54px;height:44px;min-width:54px;min-height:44px;padding:2px!important}
.visibility-button-icon{font-size:18px;font-weight:700;line-height:21px}
.visibility-button-caption{font-size:9px;line-height:12px;white-space:nowrap}
#visibility-shortcut[aria-pressed=true]{color:#ffe6a8;border-color:#d6b36b;background:#d6b36b1a}
/* A compact invitation temporarily owns the title space. Its sender/game keep
   the same width as before; personal visibility remains in the Mesa menu. */
html body.in-game #app .table-toolbar:has(>#invite-alert:not([hidden]))>.toolbar-buttons>button#visibility-shortcut{display:none!important}
/* Traditional Spanish faces stay intact. Independent, vector-sharp indices
   identify value and suit even when the printed artwork must fit a phone. */
body.enhanced-visibility .card.spanish{container-type:inline-size;container-name:spanish-card}
body.enhanced-visibility .card.spanish>.spanish-card-identity{display:block;position:absolute;z-index:2;inset:2px;pointer-events:none;color:#172c24;user-select:none}
body.enhanced-visibility .spanish-card-identity-rank{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;min-width:18px;height:1.15em;padding:0 2px;background:#fff;border-radius:2px;font:800 clamp(16px,32cqw,24px)/1.15 Arial,Helvetica,sans-serif;letter-spacing:-1px;box-shadow:0 1px 2px #0002}
body.enhanced-visibility .spanish-card-identity-suit{position:absolute;right:0;top:0;width:clamp(14px,30cqw,24px);height:clamp(18px,33cqw,26px);object-fit:contain;background:#fff;border-radius:2px;padding:1px}
body.enhanced-visibility .spanish-card-identity-name{position:absolute;left:0;right:0;bottom:0;display:block;background:#fff;color:#172c24;font:700 clamp(9px,15cqw,12px)/1.2 Arial,Helvetica,sans-serif;text-align:center;border-radius:2px;white-space:nowrap}
body.enhanced-visibility .card.spanish.selected:after{top:auto;bottom:14px;right:3px}
body.enhanced-visibility .game-tressette .partner-seat{border-radius:6px;background:#d6b36b10}
body.enhanced-visibility .game-tressette .partner-seat .team-tag{color:#ffe6a8;font-weight:700}
body .game-tressette .trick-play{position:relative}
body.enhanced-visibility .game-tressette .trick-player-role{display:none}
body.enhanced-visibility .game-tressette .trick-card-name{display:block;color:#f8f3e5;font-size:12px;line-height:16px;font-weight:700;white-space:nowrap}
.game-tressette .trick-play.is-partner>.card{outline:2px solid #f2cf7d;outline-offset:2px;box-shadow:0 0 0 5px #d6b36b25}
body.enhanced-visibility .game-tressette .trick-play.is-partner>.trick-player-role{display:block;position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:10px;line-height:14px;font-weight:700;white-space:nowrap;color:#ffe6a8}
body.enhanced-visibility .game-tressette .trick-play.is-partner>.trick-card-name{color:#ffe6a8}
body .game-tressette .signal-badge{z-index:3}

@media(max-width:650px){
 html body.playing.game-tressette-active #app .table-toolbar{min-height:44px;flex-basis:44px;padding-block:0}
 /* The public trick keeps its readable size throughout the hand. Its width
    comes from the screen, never from the height left by one or two hand rows. */
 html body.playing #app .game-tressette{--tressette-table-card:min(78px,calc((var(--safe-width) - 66px)/4));--tressette-hand-card:min(clamp(44px,calc((var(--safe-height) - 380px)/5),74px),calc((var(--safe-width) - 46px)/5))}
 html body.playing #app .game-tressette .hand>.card{width:var(--tressette-hand-card);max-width:100%;min-width:44px}
 html body.playing #app .game-tressette .side-felt{min-height:calc(var(--tressette-table-card)*1.533654 + 126px);padding:4px 6px}
 html body.playing #app .game-tressette .trick-board{container-type:size;container-name:tressette-trick;min-height:calc(var(--tressette-table-card)*1.533654 + 72px)}
 html body.playing #app .game-tressette .trick-cards{padding:4px 0;gap:8px;align-items:flex-start}
 html body.playing #app .game-tressette .trick-play{gap:2px;flex:0 1 var(--tressette-table-card);width:var(--tressette-table-card);max-width:calc((100% - 24px)/4)}
 html body.playing #app .game-tressette .trick-play>.card{width:var(--tressette-table-card);max-width:100%;height:auto;aspect-ratio:208/319}
 html body.playing #app .game-tressette .trick-play>small{font-size:9px;line-height:11px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 html body.enhanced-visibility.playing #app .game-tressette .trick-card-name{font-size:11px;line-height:14px}
 html body.enhanced-visibility.playing #app .game-tressette .trick-play.is-partner>.trick-card-name{font-size:12px}
 html body.playing #app .game-tressette .signal-badge{position:static;transform:none;max-width:90px;font-size:9px;line-height:11px;padding:2px 3px}
 html body.playing #app .game-tressette .trick-play:has(.signal-badge){gap:2px}
 body.enhanced-visibility .card.spanish>.spanish-card-identity{inset:2px}
}
@container spanish-card (max-width:42px){
 body.enhanced-visibility .spanish-card-identity-rank{font-size:15px;height:18px;min-width:15px;padding:0 1px}
 body.enhanced-visibility .spanish-card-identity-suit{width:12px;height:18px;padding:0}
 body.enhanced-visibility .spanish-card-identity-name{display:none}
}
@container spanish-card (max-width:32px){
 body.enhanced-visibility .spanish-card-identity-rank{font-size:13px;height:16px;min-width:13px}
 body.enhanced-visibility .spanish-card-identity-suit{top:auto;bottom:0;width:12px;height:14px}
}
@media(min-width:651px){
 body #app .game-tressette>.table-profile-strip{display:none}
 body #app .game-tressette .trick-board{container-type:size;container-name:tressette-trick}
 body #app .game-tressette .trick-cards{padding-top:18px;gap:22px}
 body #app .game-tressette .trick-play>.card{width:clamp(44px,calc((100cqh - 92px)*.652),112px)}
 body #app .game-tressette .trick-play>small{font-size:11px;line-height:14px}
 body #app .game-tressette .signal-badge{position:static;transform:none;max-width:140px;font-size:11px;line-height:14px;padding:3px 5px}
 body #app .game-tressette .hand>.card{width:clamp(48px,10dvh,90px)}
}
@container play-viewport (max-height:620px){
 @media(max-width:650px){
  html body.playing #app .game-tressette .opponents{display:none}
  html body.playing #app .game-tressette>.turn-note{display:none}
  html body.playing #app .game-tressette .board-heading{font-size:0;line-height:11px;min-height:11px}
  html body.playing #app .game-tressette .board-heading:before{content:attr(data-turn-label);font-size:10px;line-height:11px;color:#f8f3e5;font-weight:700;letter-spacing:0}
  html body.playing #app .game-tressette .board-heading>span{font-size:9px;line-height:11px}
  html body.playing #app .game-tressette .hand{grid-template-rows:auto;row-gap:0;align-items:start}
  html body.playing #app .game-tressette .hand:has(>.card:nth-child(6)){grid-template-rows:44px auto}
  html body.playing #app .game-tressette .hand>.card{width:44px;align-self:start}
  html body.playing #app .game-tressette .hand>.card:nth-child(n+6){z-index:1}
  html body.playing #app .game-tressette .hand>.card.selected{z-index:0}
  html body.playing #app .game-tressette .hand>.card:nth-child(n+6).selected{z-index:2}
  html body.playing #app .game-tressette .hand>.card.selected:after{top:24px;bottom:auto;right:1px;width:16px;height:16px;line-height:16px;font-size:12px}
  html body.playing #app .game-tressette .side-felt{min-height:calc(var(--tressette-table-card)*1.533654 + 68px);flex-basis:96px;padding:3px 5px}
  html body.playing #app .game-tressette .trick-cards{padding-top:12px;padding-bottom:0;gap:8px}
  html body.playing #app .game-tressette{--tressette-table-card:56px}
  html body.playing #app .game-tressette .trick-board{min-height:calc(var(--tressette-table-card)*1.533654 + 52px)}
  html body.playing #app .game-tressette .trick-play>.card{width:var(--tressette-table-card)}
  html body.playing #app .game-tressette .trick-play>small{display:block;font-size:9px;line-height:11px;font-weight:700;color:#f8f3e5}
  html body.enhanced-visibility.playing #app .game-tressette .trick-card-name{display:none;font-size:10px;line-height:12px}
  html body.enhanced-visibility.playing #app .game-tressette .trick-play.is-partner>.trick-card-name{font-size:11px}
  html body.enhanced-visibility.playing #app .game-tressette .trick-play.is-partner>.trick-player-role{top:-14px;font-size:9px;line-height:12px}
  html body.playing #app .game-tressette .signal-badge{font-size:8px;line-height:10px;max-width:none;white-space:nowrap}
  html body.enhanced-visibility.playing #app .game-tressette .hand .spanish-card-identity-rank{font-size:17px;min-width:16px;height:20px;line-height:20px}
  html body.enhanced-visibility.playing #app .game-tressette .hand .spanish-card-identity-suit{width:16px;height:20px}
  html body.enhanced-visibility.playing #app .game-tressette .hand .spanish-card-identity-name{display:none}
 }
}

/* One contextual prompt replaces the repeated selection/turn messages. The
   signal description stays available to assistive technology on every action. */
html body #app .game-tressette .signal-action-status{display:block;position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
html body.playing #app .game-tressette .selected-play-card{display:block;font-size:13px;line-height:18px;min-height:18px}
html body.playing #app .game-tressette .trick-play>small{font-size:12px;line-height:15px}
html body.playing #app .game-tressette .signal-badge{font-size:12px;line-height:15px;max-width:100%;white-space:normal;text-align:center}
@media(max-width:650px){
 html body.playing #app .game-tressette .opponents .seat{font-size:12px;line-height:14px}
 html body.playing #app .game-tressette .opponents .seat small{font-size:10px;line-height:12px}
 html body.playing #app .game-tressette .team-tag{font-size:9px;line-height:11px;letter-spacing:0}
 html body.playing #app .game-tressette .tressette-live-score{font-size:12px;line-height:15px}
 html body.playing #app .game-tressette .tressette-live-score .live-hand-points{font-size:12px;line-height:15px}
 html body.playing #app .game-tressette .tressette-live-score small{font-size:10px;line-height:12px}
 html body.playing #app .game-tressette .tressette-accuso-history>summary{font-size:12px;line-height:15px}
 html body.playing #app .game-tressette .tressette-accuso-history>summary>small{font-size:10px}
 html body.playing #app .game-tressette .trick-play>small{font-size:11px;line-height:14px}
 html body.playing #app .game-tressette .signal-badge{font-size:11px;line-height:14px}
}
@container play-viewport (max-height:620px){
 @media(max-width:650px){
  html body.playing #app .game-tressette .selected-play-card{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html body.playing #app .game-tressette .board-heading{font-size:0;line-height:12px}
  html body.playing #app .game-tressette .board-heading:before{display:inline;content:attr(data-turn-label);font-size:11px;line-height:12px}
  html body.playing #app .game-tressette .trick-cards{align-items:flex-start}
  html body.playing #app .game-tressette .signal-badge{max-width:100%;white-space:normal}
  html body.playing #app .game-tressette .signal-badge{font-size:10px;line-height:12px}
 }
}

.wizard-settings .config-explanation{margin-block:10px;border-top:1px solid #d6b36b33}.wizard-settings .config-explanation>summary{min-height:44px;padding:12px 0;font-size:13px;color:var(--gold);cursor:pointer}

/* Tight tricks retain the readable face indices, author and signal. Avoid
   duplicating the same value/suit/partner captions outside those cards. */
@container tressette-trick (max-height:150px){
 html body.playing #app .game-tressette .trick-cards{padding-top:4px}
 html body.enhanced-visibility.playing #app .game-tressette :is(.trick-card-name,.trick-player-role){display:none}
}
@media(max-width:650px){
 @container tressette-trick (max-height:210px){
  html body.playing #app .game-tressette .trick-cards{padding-top:4px}
  html body.enhanced-visibility.playing #app .game-tressette :is(.trick-card-name,.trick-player-role){display:none}
 }
}

/* In the middle phone heights, overlap only the lower edge of the first hand
   row. Both card faces retain their size and each exposed target stays >44px.
   Short phones already have their own two-row layout; tall ones need no overlap. */
@container play-viewport (min-height:621px) and (max-height:820px){
 @media(max-width:650px){
  html body.playing #app .game-tressette .hand:has(>.card:nth-child(6)){grid-template-rows:calc(var(--tressette-hand-card)*1.533654 - 24px) auto;align-items:start}
  html body.playing #app .game-tressette .hand>.card:nth-child(n+6){z-index:1}
  html body.playing #app .game-tressette .hand>.card.selected{z-index:0}
  html body.playing #app .game-tressette .hand>.card:nth-child(n+6).selected{z-index:2}
  html body.playing #app .game-tressette .hand>.card.selected:after{top:24px;bottom:auto}
 }
}

/* The branding row yields before the playable surface on medium phone heights.
   The game title, score, names and all actions remain in the table itself. */
@container play-viewport (min-height:621px) and (max-height:750px){
 @media(max-width:390px){html body.playing.game-tressette-active>.masthead{display:none!important}}
}
@container play-viewport (min-height:621px) and (max-height:780px){
 @media(min-width:391px) and (max-width:650px){html body.playing.game-tressette-active>.masthead{display:none!important}}
}