.social-dialog {
  --sg-ink:#384c43;
  --sg-leaf:#587b60;
  width:min(94vw,680px);
  max-width:100%;
  max-height:92dvh;
  margin:auto;
  padding:20px;
  overflow-y:auto;
  color:var(--sg-ink);
  font-family:Nunito,'Segoe UI',system-ui,sans-serif;
  text-align:center;
  background:#fffaf0;
  border:2px solid #efe5ce;
  border-radius:25px;
  box-shadow:0 16px 58px #3c59443a;
}
.social-dialog::backdrop {background:#344a3b73;backdrop-filter:blur(4px)}
.social-dialog button {touch-action:manipulation;min-height:46px}
.social-title {padding:0 45px;margin:4px 0 14px;color:#405948;font:750 clamp(22px,4.8vw,30px)/1.15 Nunito,'Segoe UI',system-ui,sans-serif}
.social-close {
  position:absolute;right:9px;top:8px;display:grid;place-items:center;width:46px;height:46px;
  border:0;border-radius:50%;padding:0;font:26px/1 system-ui;background:#f2ecd9;color:#586954;
}
#socialdialog>.pet-picker{margin-bottom:10px}
.social-cards {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 14px}
.play-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.social-round-actions{display:flex;justify-content:center;gap:7px;margin:7px auto}
.social-round-actions[hidden]{display:none}
.social-stage.is-result{cursor:default}
.social-card {
  display:grid;grid-template-rows:auto 1fr auto;align-items:center;justify-items:center;gap:4px;
  padding:6px 6px 10px;border-radius:19px;border:1px solid #d9dfcd;
  background:#f0f2df;box-shadow:0 3px 0 #cdd6bf;cursor:pointer;
}
.social-card:nth-child(2) {background:#f5e9dc;border-color:#e8dbce;box-shadow:0 3px 0 #dfcdbf}
.social-card:nth-child(3) {background:#ece8f3;border-color:#dbd6e7;box-shadow:0 3px 0 #d7cfe1}
.social-card.social-featured {outline:3px solid #86a883;outline-offset:2px}
.social-card canvas {width:100%;height:auto;display:block;margin:0 auto}
.social-card strong {color:#344e40;font-size:clamp(13px,2.6vw,17px);overflow-wrap:anywhere}
.social-card-action {border-radius:50px;background:#fffff0c9;color:#4e624b;font-size:13px;font-weight:750;padding:4px 10px}
.social-dialog .social-card:disabled {opacity:.64}
.social-visit,.social-button {
  border:1px solid #d6dccb;border-radius:15px;background:#f1f1e0;font-weight:700;padding:8px 16px;color:#485f4b;
}
.social-visit {display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:4px auto 0}
.social-button.social-primary {background:#55775b;color:#fff;border-color:#55775b}
.social-purchase {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px;margin:10px auto 0;border-radius:14px;background:#f2e9cc}
.social-purse {color:#677851;font-weight:750;margin:0 0 7px}
.social-roster {display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(390px,100%);margin:0 auto 10px}
.social-seat {position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding:4px 10px;border:2px solid transparent;border-radius:16px;font-weight:750;font-size:14px}
.social-seat.seat-0 {color:#81515c;background:#f7e0df}
.social-seat:only-child {grid-column:1 / -1;justify-self:center;min-width:45%}
.social-seat.seat-1 {color:#416c66;background:#daeae2}
.social-seat.next,.social-seat.pushed {border-color:#83a56c;box-shadow:0 0 0 2px #dbe7c8}
.social-seat.pushed::after {content:' ✓';font-weight:800}
.social-stage {
  position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:760/340;
  border:3px solid #dbe1c7;border-radius:20px;background:#e6ecd8;padding:0;
  transition:border-color .12s,box-shadow .12s;touch-action:manipulation;
}
.social-stage:hover {transform:none}
.social-stage canvas {display:block;width:100%;height:100%}
.social-stage[data-cue="go"] {border-color:#8cb381;box-shadow:inset 0 0 0 2px #b4d39b}
.social-stage[data-cue="miss"] {border-color:#c48b8e;box-shadow:0 0 0 2px #f0d7d0}
.practice-badge {position:absolute;top:9px;left:10px;padding:3px 11px;border-radius:16px;color:#466350;background:#fff9e4e8;font:750 14px/1.4 Nunito,'Segoe UI',system-ui,sans-serif;pointer-events:none}
.social-dialog .drum-sound {position:absolute;right:5px;top:5px;min-height:48px;min-width:48px;padding:5px 9px;border-radius:14px;border:1px solid #c7d5bc;background:#fff9e9ed;color:#4b624e;font-size:13px;font-weight:750}
.drum-sound[aria-pressed="true"] {outline:2px solid #87a47d;outline-offset:-2px}
.drum-sound svg{display:block;width:24px;height:24px;margin:auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.drum-sound .speaker{fill:currentColor;stroke-width:1}
.drum-sound[aria-pressed=true] .off,.drum-sound[aria-pressed=false] .on{display:none}
.social-stage[data-cue="practice"] {border-color:#b4c9aa}
.social-score-panel {display:flex;justify-content:center;align-items:center;gap:8px;margin:9px auto 1px}
.social-score-panel[hidden] {display:none}
.social-stat {display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;padding:4px 11px;border:1px solid #d7dfc8;border-radius:13px;background:#eef3e4;text-align:left;color:#3f604c}
.social-stat-icon {grid-row:span 2;font-size:22px;color:#b78732}
.social-stat small {font-size:11px;font-weight:700;line-height:1.2}
.social-stat strong {font-size:21px;font-variant-numeric:tabular-nums;line-height:1.05}
.social-stat.record {background:#fff0cc;border-color:#d4b477}
.social-instruction {min-height:1.4em;color:#475e4e;margin:6px auto 8px;font-size:clamp(15px,2.8vw,19px);font-weight:750;line-height:1.3}
.social-controls {display:flex;justify-content:center;gap:8px}
.social-push {min-width:58%;min-height:55px!important;border-radius:19px;background:#e9ebd9;color:#4c664d;border:2px solid #c9d2bb;font-weight:750;font-size:18px}
.social-push.good-beat {background:#dcecc6;border-color:#7c9f72;box-shadow:0 3px 0 #92ae7e}
.drum-pads {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(420px,100%);margin:auto;gap:8px}
.drum-key {
  position:relative;display:grid;place-content:center;justify-items:center;gap:1px;min-width:0;
  min-height:64px!important;padding:5px;background:linear-gradient(#fff8dd 0 14%,var(--drum) 16% 100%);
  border:2px solid #b09b8a;border-radius:18px 18px 12px 12px;box-shadow:0 3px 0 #a79581;
}
.drum-icon {font-size:clamp(23px,4vh,36px);line-height:1.05}
.drum-mark {color:#5f514b;font-size:12px;line-height:12px}
.drum-key.good-beat {outline:3px solid #748d59;outline-offset:2px;box-shadow:0 4px 0 #82976d;filter:saturate(1.18)}
.drum-key.next-note:not(.good-beat) {outline:2px dashed #96a58c;outline-offset:1px}
.drum-key.drum-struck {animation:social-drum-bounce .26s ease-out}
@keyframes social-drum-bounce {0%{transform:scale(1.04,.92)}60%{transform:scale(.98,1.04)}100%{transform:scale(1)}}
@media(max-width:520px) {
  .social-dialog {padding:15px 12px 16px;border-radius:21px}
  .social-title {margin-bottom:13px}
  .social-cards {gap:6px}
  .social-card {padding:5px 4px 8px}
  .social-card-action {font-size:12px;padding:4px 6px}
  .social-roster {margin-bottom:6px}
}
/* The equipment has its own stage. Menus and building dialogs keep their compact layout. */
#socialdialog[data-arena][open]{
 --rim:#76957b;--paper:#faf4df;--ink:#384e3f;--floor:#d8e5bc;
 position:fixed;inset:0;margin:auto;isolation:isolate;width:min(1080px,96vw);height:min(680px,93dvh);
 max-height:96dvh;padding:10px;box-sizing:border-box;overflow:auto;
 border:3px solid var(--rim);border-radius:26px;background:var(--floor);color:var(--ink);
 display:grid;grid-template-columns:minmax(0,1fr) auto 46px;
 grid-template-rows:auto auto minmax(128px,1fr) auto auto;
 grid-template-areas:"title score exit" "seats seats seats" "stage stage stage" "controls controls controls" "tools tools tools";
 gap:5px;align-items:center;box-shadow:0 22px 65px #21372865;
}
#socialdialog[data-arena=seesaw][open]{--rim:#6e9690;--floor:#d0e3db;--ink:#36565a}
#socialdialog[data-arena=drums][open]{--rim:#9484a1;--floor:#49475e;--paper:#fff0d9;--ink:#fff1d8}
#socialdialog[data-arena] button{-webkit-tap-highlight-color:transparent}
#socialdialog[data-arena] .social-title{grid-area:title;min-width:0;margin:0;padding:0 3px;text-align:left;color:var(--ink);font-size:clamp(16px,3.5vw,28px)}
#socialdialog[data-arena] .social-close{grid-area:exit;position:static;width:44px;height:44px;background:var(--paper);color:#535544}
#socialdialog[data-arena] .social-roster{grid-area:seats;width:auto;max-width:100%;display:flex;justify-content:center;gap:7px;margin:0}
#socialdialog[data-arena] .social-seat{min-width:50px;max-width:46%;padding:1px 10px;display:inline-flex;align-items:center;justify-content:center;gap:4px;font-size:13px;min-height:28px}
#socialdialog[data-arena] .social-seat canvas{width:32px!important;height:26px!important}
#socialdialog[data-arena] .social-seat.next::before{content:'▶';font-size:10px}
#socialdialog[data-arena] .social-stage{grid-area:stage;align-self:stretch;width:100%;height:100%;min-height:0;box-sizing:border-box;aspect-ratio:auto;border:2px solid var(--rim);border-radius:18px;box-shadow:inset 0 0 0 1px #fff5}
#socialdialog[data-arena] .social-stage canvas{position:absolute;inset:0}
#socialdialog[data-arena] .rhythm-surface{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;box-shadow:none;background:transparent;transform:none;touch-action:manipulation}
#socialdialog[data-arena] .rhythm-surface:focus-visible{outline:3px solid #435c7a;outline-offset:-5px}
#socialdialog[data-arena] .rhythm-feedback{
 position:absolute;top:9px;left:50%;transform:translateX(-50%);max-width:calc(100% - 130px);
 display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border:2px solid #956e39;border-radius:18px;
 background:#fff2d5;color:#543e24;box-shadow:0 2px 0 #493d342e;
 font:800 clamp(13px,2.4vw,17px)/1.2 Nunito,'Segoe UI',system-ui,sans-serif;text-align:center;pointer-events:none;
}
#socialdialog[data-arena] .rhythm-feedback span{min-width:0;overflow-wrap:anywhere}
#socialdialog[data-arena] .rhythm-feedback b{font:900 1.15em/1 system-ui}
#socialdialog[data-arena] .rhythm-feedback[data-state=idle]{visibility:hidden}
#socialdialog[data-arena] .rhythm-feedback[data-state=hit]{color:#254f3d;background:#effbd6;border-color:#517d54}
#socialdialog[data-arena] .rhythm-feedback[data-state=waiting]{color:#264f60;background:#e4f4f7;border-color:#63949f}
#socialdialog[data-arena] .rhythm-feedback:is([data-state=miss],[data-state=error]){color:#713343;background:#fff0e7;border-color:#b27073}
#socialdialog[data-arena] .social-stage[data-cue=go]{border-color:#4e8a58;outline:2px solid #b9df95;outline-offset:-3px}
#socialdialog[data-arena] .social-stage[data-cue=miss]{border-color:#b88382}
#socialdialog[data-arena] .tempo-badge{position:absolute;left:9px;top:9px;padding:5px 10px;border-radius:12px;background:#fff7e2e8;color:#465748;font-weight:800;font-variant-numeric:tabular-nums;pointer-events:none}
#socialdialog[data-arena] .social-score-panel{grid-area:score;margin:0;gap:5px}
#socialdialog[data-arena] .social-stat{grid-template-columns:auto auto;padding:4px 8px;border-radius:20px;background:var(--paper);gap:4px}
#socialdialog[data-arena] .social-stat strong{font-size:17px}
#socialdialog[data-arena] .social-stat-icon{font-size:17px}
#socialdialog[data-arena] .social-stat small,#socialdialog[data-arena] .social-instruction{position:absolute;width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#socialdialog[data-arena] .social-controls{grid-area:controls;justify-self:center;width:min(460px,100%);min-height:0}
#socialdialog[data-arena][data-phase=result] .social-controls{display:none}
#socialdialog[data-arena] .social-push{width:min(240px,100%);min-height:48px!important;font:800 26px/1 system-ui;box-shadow:0 3px 0 var(--rim)}
#socialdialog[data-arena] :is(.social-push,.drum-key){touch-action:manipulation}
#socialdialog[data-arena] :is(.social-push,.drum-key).beat-pressed{box-shadow:inset 0 0 0 3px #fffae8,0 0 0 2px #694e35;background-color:#f7d583;transform:translateY(2px)}
#socialdialog[data-arena] .social-round-actions{grid-area:tools;flex-wrap:wrap;align-items:center;margin:0;gap:7px}
#socialdialog[data-arena] .social-round-actions>*{margin:0;min-width:46px;min-height:44px;font-size:18px}
#socialdialog[data-arena] .social-primary{font-size:16px;min-width:108px}
#socialdialog[data-arena] .social-error{position:absolute;z-index:2;bottom:12%;justify-self:center;background:#fff3e3;color:#784638;padding:9px 15px;border-radius:14px}
#socialdialog[data-arena] [hidden]{display:none!important}
@media(max-width:520px){
 #socialdialog[data-arena][open]{width:98vw;height:94dvh;padding:7px;border-radius:20px}
 #socialdialog[data-arena] .social-roster{min-height:28px}
}
@media(max-height:490px) and (orientation:landscape){
 #socialdialog[data-arena][open]{width:98vw;height:96dvh;padding:5px 8px;gap:4px;grid-template-columns:minmax(0,1fr) minmax(174px,25%) 44px;
  grid-template-rows:44px minmax(0,1fr) auto auto;
  grid-template-areas:"title score exit" "stage seats seats" "stage controls controls" "stage tools tools"}
 #socialdialog[data-arena] .social-roster{flex-wrap:wrap}
 #socialdialog[data-arena] .social-seat{max-width:100%}
 #socialdialog[data-arena] .social-round-actions{gap:3px}
 #socialdialog[data-arena] .drum-pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 #socialdialog[data-arena] .drum-key{min-height:44px!important}
 #socialdialog[data-arena] .social-title{margin:0}
}
@media(prefers-reduced-motion:reduce) {
  .social-dialog * {animation:none!important;transition:none!important}
  #socialdialog[data-arena] :is(.social-push,.drum-key).beat-pressed{transform:none}
}