/* Phone table: full-width felt, compact opponents and a thumb-friendly hand. */
@media (max-width:700px) {
  body:has(#game[style*="block"])>.topbar {display:none}
  body:has(#game[style*="block"]) footer {display:none}
  body:has(#game[style*="block"])>.topbar .brand small {display:none}
  #game {padding-bottom:env(safe-area-inset-bottom,0px)}
  #game .room-header {margin:12px 0 8px;align-items:center;display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left}
  #game .room-header h1 {font-size:20px;letter-spacing:-.6px}
  #game .room-header .muted {font-size:11px;margin:4px 0}
  #game .room-tools {gap:6px;align-items:center;width:auto;justify-content:flex-end}
  #game .room-tools #copy {max-width:90px;white-space:normal}
  #game .room-tools .connection:empty {display:none}
  #game .connection {flex:1;font-size:10px}
  #game .room-tools button {flex:0 0 auto;font-size:11px;padding:8px 10px}
  #game .match-top,#game #admissions-status {display:none}
  #game .host-actions {gap:6px}
  #game .host-actions button {font-size:12px;min-height:44px}
  #game .table-arena {grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:'west north east' 'felt felt felt' 'south south south';gap:8px;margin:10px auto;max-width:100%}
  #game .table-arena .player {min-width:0;border-radius:12px!important;outline-offset:0;gap:5px!important}
  #game .table-arena .arena-seat-top,#game .table-arena .arena-seat-left,#game .table-arena .arena-seat-right {display:flex!important;flex-direction:row;align-items:center;justify-content:flex-start;text-align:left!important;width:100%;padding:9px 6px!important;align-self:stretch}
  #game .table-arena .player .player-avatar {min-width:0;width:auto;height:auto;margin:0;flex-wrap:wrap}
  #game .table-arena .player .avatar {width:26px;height:30px;font-size:14px;border-radius:8px}
  #game .table-arena .player-copy {min-width:0;width:auto}
  #game .table-arena .player .player-name {font-size:10px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #game .table-arena .player-team-badge {font-size:7px!important;padding:2px 3px;white-space:nowrap}
  #game .table-arena .player-detail {display:none}
  #game .table-arena .player:not(.arena-seat-bottom) .player-clock-slot:not(:empty) {position:absolute;left:0;right:0;top:100%;z-index:4}
  #game .table-arena .player-clock-slot .turn-clock {flex-direction:row;padding:3px 5px;background:#102e28;gap:3px}
  #game .table-arena .player-clock-slot .turn-clock span {font-size:8px}
  #game .table-arena .player-clock-slot .turn-clock strong {font-size:13px}
  #game .table-arena>.game-surface {padding:10px 8px!important;border-radius:18px;box-shadow:0 8px 28px #0003}
  #game .table-top-tools {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;width:100%}
  #game .table-top .sound-toggle {min-height:44px;font-size:10px;padding:7px 3px;letter-spacing:0}
  #game #notice {font-size:12px;line-height:1.4;margin:8px 2px}
  #game #notice:empty,#game .round-stakes:empty {display:none}
  #game .play-zone {grid-template-columns:minmax(0,1fr);gap:0}
  #game .opponent-side {display:none}
  #game .opponent-top {min-height:24px;margin:2px 0}
  #game .table-controls {padding-top:8px!important;gap:8px;min-height:0}
  #game .hand-panel {grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;background:#071e184d;border-radius:14px;padding:12px 8px 8px!important}
  #game .hand-heading {grid-column:1;grid-row:1}
  #game .hand-heading h2 {font-size:14px;letter-spacing:-.3px}
  #game #hand-count {display:inline-block;color:#e9c17a;font-size:12px;margin-left:4px}
  #game .hand-clock {grid-column:2;grid-row:1;margin:0}
  #game .hand-clock .turn-clock {min-width:0;padding:5px 8px;width:auto}
  #game .hand-clock .turn-clock span {font-size:9px}
  #game .hand {grid-column:1/-1;display:flex;flex-wrap:nowrap;justify-content:safe center;gap:4px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#e9c17a66 transparent;padding:12px 2px 8px!important;margin:0!important;touch-action:pan-x pan-y}
  #game .hand button {flex:0 0 auto;width:44px;height:88px;min-height:44px;padding:0;touch-action:none;cursor:pointer}
  #game .hand .tile {width:42px;height:80px}
  #game .hand button.selected {transform:translateY(-7px)}
  #game .hand button.selected .tile {outline:2px solid #f6ce7f;outline-offset:2px}
  #game .hand-panel:after {content:'Toque em uma pedra e depois na ponta iluminada';font-size:10px;text-align:center;grid-column:1/-1;color:#bfd2c2}
  #game .turn-info {grid-column:1/-1;grid-row:auto;font-size:11px;text-align:center;margin:3px 0}
  #game .turn-info.your-turn {color:#f7d38b;font-weight:700}
  #game .action-row {grid-column:1/-1;grid-row:auto}
  #game .action-row button {min-height:44px;width:100%}
  #game .table-pass {min-height:44px;min-width:140px;justify-self:end}
  #game .table-pass:disabled {display:none}
  #game .table-arena .arena-seat-bottom {width:100%;grid-template-columns:64px minmax(0,1fr);padding:10px 12px!important;min-height:0}
  #game .arena-seat-bottom .voice-panel {margin-top:4px;padding-top:6px}
  #game .arena-seat-bottom .voice-actions button {min-height:44px;font-size:11px}
  #game .board-zoom button {min-height:44px;min-width:44px}
  body.table-fullscreen #game {padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
}
/* Explicit turn ownership, independent of team colors. */
#turn-banner{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:2px 10px;margin:10px 0;padding:12px 16px;background:#102a24;border:1px solid #9ab8aa66;border-radius:12px;color:#f0f5ef;text-align:left;letter-spacing:0}
#turn-banner .turn-banner-icon{grid-row:1/3;font-size:27px;text-align:center;color:#c5d8cf}
#turn-banner strong{font-size:17px;line-height:1.3;overflow-wrap:anywhere}
#turn-banner .turn-banner-hint{font-size:12px;color:#c2d4c8}
#turn-banner.is-your-turn{background:#f2ce88;border-color:#ffe4af;color:#183b2d;box-shadow:0 0 0 3px #f2ce8820}
#turn-banner.is-your-turn .turn-banner-icon,#turn-banner.is-your-turn .turn-banner-hint{color:#254b37}
.table-arena .player.active{outline:3px solid #ffda85!important;box-shadow:0 0 0 5px #ffda8526!important}
.player-turn-label{display:block;width:fit-content;background:#f2ce88;color:#17392b;font-size:10px;line-height:1.3;letter-spacing:.5px;padding:4px 6px;border-radius:5px;margin-bottom:5px}
@media(max-width:700px){#turn-banner{padding:10px 12px;margin:8px 0}#turn-banner strong{font-size:16px}#turn-banner .turn-banner-hint{font-size:11px}#game .player-turn-label{font-size:8px;letter-spacing:0;padding:3px 4px;white-space:normal}}
.phone-options{display:none}
@media(max-width:700px){
 #game .phone-options{display:block;position:relative;width:100%;z-index:8}
 #game .phone-options summary{min-height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid #ffffff25;border-radius:9px;color:#e8dcbd;font-size:11px;letter-spacing:0}
 #game .phone-options .table-top-tools{position:absolute;top:100%;right:0;width:min(300px,calc(100vw - 32px));display:grid;grid-template-columns:1fr;padding:8px;background:#102e28;border:1px solid #e9c17a66;border-radius:12px;box-shadow:0 12px 30px #0008}
 #game .phone-options button{width:100%;min-height:44px;font-size:11px}
 #game .host-actions:empty{display:none}
}
@media(max-width:700px) and (max-height:700px){
 #game .hand-clock .turn-clock span{display:none}
 #game #turn-banner .turn-banner-hint{display:none}
 #game #turn-banner .turn-banner-icon{grid-row:1}
 #game #turn-banner{min-height:36px}
}
#participant-management{position:relative;letter-spacing:0}
#participant-management summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:center;padding:7px 10px;border:1px solid #c9d6b844;border-radius:8px;font-size:11px;color:#e8dcbd}
#participant-management .participant-list{position:absolute;right:0;top:100%;z-index:20;width:240px;max-width:calc(100vw - 40px);padding:10px;background:#102e28;border:1px solid #e9c17a66;border-radius:12px;box-shadow:0 10px 30px #0007;display:grid;gap:8px}
#participant-management .participant-list button{font-size:12px;min-height:44px;white-space:normal;overflow-wrap:anywhere}
#participant-management .participant-list p{font-size:12px;line-height:1.5}
@media(max-width:700px){#game #participant-management .participant-list{position:static;width:100%;max-width:none;box-shadow:none;margin-top:5px}#game #participant-management summary{font-size:11px}}