/* A shared grove, using the existing cream, leaf and warm wood controls. */
.app-shell .view#together-view.has-shared-room { position: fixed; z-index: 25; inset: 154px 0 0; width: 100%; max-width: none; margin: 0; overflow: auto; padding: 12px 22px 20px; background: #edf0e6; overscroll-behavior: contain; }
#together-view.has-shared-room > .play-window { max-width: min(1100px,calc((100dvh - 365px) * 900 / 520)); min-width: min(100%,300px); margin: 0 auto; }
#together-view.has-shared-room .together-stage { width: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; aspect-ratio: 900 / 520; box-sizing: border-box; }
.together-buddy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.together-buddy small { display: block; margin-top: 4px; color: #889475; font-size: 10px; }
.together-setup { position: absolute; z-index: 14; inset: 0; overflow-y: auto; padding: 16px; background: #f8f7eafc; overscroll-behavior: contain; }
.together-setup > header { position: sticky; z-index: 1; top: -16px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding: 6px 0; background: #f8f7ea; }
.together-setup > header h2 { margin: 0; font-size: 24px; letter-spacing: -.035em; }
.together-setup > header button { min-width: 44px; background: transparent !important; border-color: transparent !important; }
.together-setup .together-lobby { margin-top: 8px; gap: 12px; }
.together-setup :is(.together-players,.together-games) { padding: 15px; }
#together-view.has-shared-room .together-notice { border: 0; border-radius: 0; background: transparent; }
#together-view.has-shared-room .together-match-controls { flex-wrap: wrap; gap: 5px; }
#together-view.has-shared-room .together-match-controls button { padding-inline: 12px; }
#together-view.has-shared-room .together-connection { font-size: 11px; }
@media (max-width: 700px) {
  .app-shell .view#together-view.has-shared-room { inset: 151px 0 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  #together-view.has-shared-room > .play-window { max-width: 100%; }
  #together-view.has-shared-room .together-connection { font-size: 9px; }
  #together-view.has-shared-room .together-match-controls button { padding-inline: 8px; font-size: 10px; }
  .together-setup { padding: 10px; }
  .together-setup > header { top: -10px; }
  .together-setup .together-lobby { grid-template-columns: 1fr; }
  .together-buddy strong { font-size: 10px; }
  .together-buddy small { font-size: 8px; }
}
.app-shell .view#together-view { width: min(1140px, calc(100% - 40px)); padding: 104px 0 40px; margin: 0 auto; color: #385343; }
.together-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.together-heading h1 { margin: 0; font-size: clamp(28px,4vw,37px); letter-spacing: -.045em; line-height: 1.15; }
.together-heading p { margin: 7px 0 0; font-size: 14px; color: #77856f; }
#together-view :is(button,input,select) { font: inherit; }
#together-view :is(input,select) { min-width: 0; min-height: 44px; border: 1px solid #c4cfb8; border-radius: 12px; padding: 9px 12px; background: #fffef8; color: #43634c; font-size: 14px; width: 100%; }
#together-view label { display: grid; gap: 7px; font-size: 12px; color: #718065; }
#together-view button { min-height: 44px; border-radius: 12px; font-size: 13px; font-weight: 800; cursor: pointer; }
#together-view button:disabled { opacity: .46; cursor: default; }
.together-primary { padding: 11px 17px; border: 1px solid #507557; color: #fffdf1; background: #4b795b; box-shadow: 0 2px 0 #345d44; }
.together-primary:hover:not(:disabled) { background: #3e684d; }
.together-secondary { padding: 9px 15px; border: 1px solid #cad4bc; background: #fffdf3; color: #58714e; }
.together-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.together-card { display: grid; align-content: start; gap: 17px; padding: 27px; background: #fffdf3; border: 1px solid #cbd5bc; border-radius: 23px; box-shadow: 0 4px 0 #d7dfc7; }
.together-card h2 { margin: 0 0 2px; font-size: 23px; letter-spacing: -.03em; }
.together-card p { margin: 0; color: #7f8b72; font-size: 14px; }
.together-card small { color: #8a927b; font-size: 12px; line-height: 1.65; }
.together-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
#together-view .together-code-input { text-transform: uppercase; letter-spacing: .09em; font-size: 18px; min-height: 55px; }
.together-notice { margin: 0 0 16px; padding: 11px 14px; border: 1px solid #d7dfc8; border-radius: 13px; background: #edf4e2; color: #58744e; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.together-notice.is-error { background: #fff0e5; border-color: #eed2b6; color: #9b5f53; }
.together-discovery { margin-top: 34px; }
.together-discovery > header, .together-players > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.together-discovery h2, .together-players h2, .together-games h2 { font-size: 22px; letter-spacing: -.025em; margin: 0; }
.together-discovery > header button { border: 1px solid #c7d2bb; background: #fffdf1; color: #607957; padding: 8px 15px; }
.together-room-list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.together-room-list article { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px; border: 1px solid #d3dcc6; border-radius: 17px; background: #fffdf3; }
.together-room-list strong { font-size: 16px; }
.together-room-list p { margin: 6px 0 0; font-size: 12px; color: #819075; }
.together-room-list button { border: 0; padding: 8px 13px; color: #4e754e; background: #eaf1df; white-space: nowrap; }
.together-no-rooms { color: #7a8970; font-size: 14px; }
.together-room-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.together-invite { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.together-invite > span { font-size: 11px; color: #839177; }
.together-invite strong { font-size: 18px; letter-spacing: .08em; font-family: ui-monospace,SFMono-Regular,monospace; color: #526e4e; }
.together-invite button { border: 1px solid #c9d5ba; background: #fffdf2; color: #627b56; padding: 7px 12px; }
.together-connection { white-space: nowrap; font-size: 12px; color: #ab8861; }
.together-connection[data-status="connected"] { color: #558363; }
.together-stage { width: min(calc(100% - 4px),900px,calc((100dvh - 290px)*900/520)); margin-inline: auto; aspect-ratio: 900 / 520; box-sizing: content-box; position: relative; overflow: hidden; border: 2px solid #aebfa0; border-radius: 23px; background: #d6e3c6; box-shadow: 0 4px 0 #c9d5b8; }
.together-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; outline-offset: -5px !important; }
.together-stage canvas:active { cursor: grabbing; }
.together-play-help { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 1px; }
.together-play-help p { font-size: 12px; color: #7d8a70; margin: 0; line-height: 1.6; }
.together-match-controls { display: flex; gap: 7px; flex-shrink: 0; }
.together-match-controls button { border: 1px solid #bbc9ac; color: #54714e; background: #fffdf0; padding: 8px 14px; }
.together-match-controls button[data-together-action="shoot"] { background: #4e7b5c; color: #fffdf0; touch-action: none; }
.together-game-score { display: flex; align-items: center; justify-content: center; gap: 33px; padding: 11px 18px; margin-bottom: 12px; border: 1px solid #d1d9c2; background: #fffdf3; border-radius: 15px; }
.together-game-score > span { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.together-game-score b { font-size: 27px; }
.together-game-score > div { text-align: center; }
.together-game-score strong { display: block; font-size: 16px; }
.together-game-score small { display: block; color: #849176; font-size: 11px; margin-top: 4px; }
.together-game-score .mint { color: #61967b; }
.together-game-score .peach { color: #bf8774; }
.together-lobby { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); align-items: start; gap: 21px; margin-top: 13px; }
.together-players, .together-games { border: 1px solid #d0d9c0; border-radius: 20px; background: #fffdf3; padding: 21px; }
.together-players > header > span { color: #879577; font-size: 13px; }
[data-together-roster] { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.together-team { min-width: 0; }
.together-team > strong { display: block; padding: 0 0 9px; font-size: 12px; color: #69977d; }
.together-team.team-1 > strong { color: #bd8674; }
.together-player { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid #e6eadb; min-width: 0; }
.together-player > i { width: 7px; height: 7px; border-radius: 50%; background: #d0d5c6; flex-shrink: 0; }
.together-player > i.online { background: #7ba87b; }
.together-player > span { min-width: 0; flex: 1; }
.together-player b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.together-player small { display: block; margin-top: 4px; font-size: 11px; color: #8c977d; }
.together-player > em { font-size: 10px; font-style: normal; color: #709768; white-space: nowrap; }
.together-seat { border-top: 1px dashed #dbe2cd; padding-top: 13px; font-size: 11px; color: #a0a88e; }
.together-own-kit { display: grid; grid-template-columns: minmax(0,1fr) 100px auto; gap: 11px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e0e7d4; align-items: end; }
.together-games > p { font-size: 12px; color: #869478; line-height: 1.6; margin: 7px 0 14px; }
.together-game-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; border: 1px solid #d5dec8; background: #f5f7ec; padding: 14px; margin-bottom: 10px; }
.together-game-card > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: #997349; background: #f1e5c7; font-size: 26px; }
.together-game-card > div { flex: 1; }
.together-game-card strong { font-size: 16px; }
.together-game-card small { margin-left: 6px; font-size: 11px; color: #8b9478; }
.together-game-card p { font-size: 11px; margin: 5px 0 0; font-weight: 500; color: #869478; }
.together-game-card > b { color: #8da27d; font-size: 20px; }
.together-host-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-top: 1px solid #e2e7d7; margin-top: 17px; padding-top: 15px; }
.together-host-tools button { grid-column: 1/-1; border: 0; background: transparent; color: #a38c75; text-align: left; padding: 6px 0; font-size: 11px !important; }
.app-shell .main-nav { width: min(910px,calc(100vw - 24px)); }
@media(max-width:760px) {
  .app-shell .view#together-view { width: calc(100% - 28px); padding-top: 100px; }
  .together-heading { gap: 10px; margin-bottom: 19px; align-items: start; }
  .together-heading h1 { font-size: 28px; }
  .together-heading p { font-size: 12px; }
  .together-entry, .together-room-list, .together-lobby { grid-template-columns: 1fr; }
  .together-card { padding: 21px; }
  .together-room-top { align-items: start; flex-direction: column; gap: 9px; }
  .together-invite { gap: 7px; }
  .together-invite > span { width: 100%; }
  .together-invite strong { font-size: 16px; }
  .together-invite button { font-size: 11px !important; padding: 7px; }
  .together-stage { border-radius: 16px; }
  .together-play-help { align-items: stretch; flex-direction: column; gap: 10px; }
  .together-match-controls button { flex: 1; padding: 9px 8px; }
  .together-players, .together-games { padding: 16px; }
  .together-own-kit { grid-template-columns: minmax(0,1fr) 85px; }
  .together-own-kit > button { grid-column: 1/-1; }
  .together-game-score { gap: 14px; padding: 10px; }
  .together-game-score > span { gap: 6px; font-size: 12px; }
  .together-game-score strong { font-size: 13px; }
  .together-game-score b { font-size: 22px; }
}