/* Phone play: two quiet controls above, thumbs below, the world in between. */
#mobileQuick { display:contents; }
#mobileQuick svg,#mobileMore,#mobileFullscreen,#mobileMorePanel,#mobileMenuScrim { display:none; }
#mobileFullscreen[hidden] { display:none !important; }
#mobileMorePanel[hidden],#mobileMenuScrim[hidden] { display:none !important; }
/* The same quiet menu is available with a mouse, without another photo hint. */
body:not(.touch-mode).mobile-playing #mobileMore { display:grid; place-items:center; position:fixed;
  right:max(14px,env(safe-area-inset-right)); bottom:calc(max(12px,env(safe-area-inset-bottom)) + 94px);
  width:40px; height:32px; z-index:36; border:1px solid #ead5b62a; border-radius:999px;
  background:#17131dcc; color:#f0dfc6; cursor:pointer; }
body:not(.touch-mode) #mobileMore svg { display:block; width:22px; height:22px; }
body:not(.touch-mode) #mobileMenuScrim { display:block; position:fixed; inset:0; z-index:34; background:#08070e61; }
body:not(.touch-mode) #mobileMorePanel { display:grid; grid-template-columns:1fr 1fr; gap:6px; position:fixed;
  right:14px; bottom:190px; z-index:35; width:min(264px,calc(100vw - 28px)); max-height:calc(100dvh - 205px);
  overflow:auto; padding:10px; border:1px solid #d4b99040; border-radius:17px; background:#211c25f5; direction:rtl; }
body:not(.touch-mode) #mobileMorePanel button { display:flex; align-items:center; gap:8px; min-height:46px;
  padding:8px 10px; border:0; border-radius:10px; color:#ead8bc; background:#ead5b610;
  font:500 12px Rubik,sans-serif; text-align:right; cursor:pointer; }
body:not(.touch-mode) #mobileMorePanel button[hidden] { display:none; }
body:not(.touch-mode) #mobileMorePanel svg { width:20px; height:20px; flex:none; }
#pushButton { position:fixed; right:18px; bottom:26px; z-index:27; display:flex; align-items:center; gap:8px;
  min-height:44px; padding:8px 12px; border:1px solid #d8bd935c; border-radius:12px; background:#211a27e8;
  color:#ecd7b6; font:500 12px Rubik,sans-serif; touch-action:manipulation; }
#pushButton[hidden] { display:none !important; }
#pushButton svg { width:22px; height:22px; pointer-events:none; }
#pushButton kbd { padding:3px 6px; border:1px solid #b99d7a; border-bottom-width:3px; border-radius:5px; }
#pushButton:disabled { opacity:.55; }
body.touch-mode #pushButton { right:var(--phone-edge-r); bottom:calc(var(--phone-edge-b) + 66px); width:56px; height:56px;
  padding:5px; gap:1px; flex-direction:column; font-size:9px; }
body.touch-mode #pushButton kbd { display:none; }
body.touch-mode:has(#pushButton:not([hidden])) #congaBtn { right:calc(var(--phone-edge-r) + 66px); width:56px; height:56px; padding:5px; font-size:9px; }
body.touch-mode { --phone-edge-l:max(14px,env(safe-area-inset-left)); --phone-edge-r:max(14px,env(safe-area-inset-right));
  --phone-edge-t:max(12px,env(safe-area-inset-top)); --phone-edge-b:max(14px,env(safe-area-inset-bottom)); }
body.touch-mode #mobileQuick { position:fixed; left:var(--phone-edge-l); top:var(--phone-edge-t); z-index:36;
  display:flex; align-items:center; gap:6px; direction:ltr; }
body.touch-mode:not(.mobile-playing) #mobileQuick { display:none; }
body.touch-mode #mobileQuick > button { position:static; inset:auto; width:44px; height:44px; min-width:44px;
  padding:10px; margin:0; display:grid; place-items:center; border:1px solid #ead5b62a; border-radius:13px;
  background:#17131dcc; color:#f0dfc6; box-shadow:none; opacity:1; touch-action:manipulation; }
body.touch-mode #mobileQuick #thirdBtn.on { background:#ddbb85; color:#211920; border-color:#ddbb85; }
body.touch-mode #mobileQuick svg { display:block; width:22px; height:22px; pointer-events:none; }
body.touch-mode .mobile-control-text { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
body.touch-mode #mobileMenuScrim { display:block; position:fixed; inset:0; z-index:34; background:#08070e61; }
body.touch-mode #mobileMorePanel { position:fixed; left:var(--phone-edge-l); top:calc(var(--phone-edge-t) + 54px);
  z-index:35; width:min(264px,calc(100vw - 28px)); display:grid; grid-template-columns:1fr 1fr; gap:6px;
  max-height:calc(100dvh - var(--phone-edge-t) - var(--phone-edge-b) - 60px); overflow-y:auto;
  padding:10px; border:1px solid #d4b99040; border-radius:17px; background:#211c25f5; direction:rtl; }
body.touch-mode #mobileMorePanel button { display:flex; gap:8px; align-items:center; text-align:right;
  min-height:46px; padding:8px 10px; border:0; border-radius:10px; color:#ead8bc; background:#ead5b610;
  font:500 11px Rubik,sans-serif; cursor:pointer; touch-action:manipulation; }
body.touch-mode #mobileMorePanel button[hidden] { display:none; }
body.touch-mode #mobileMorePanel svg { width:20px; height:20px; flex:none; }
.mobile-fullscreen-status { grid-column:1 / -1; font:400 11px/1.6 Rubik,sans-serif; color:#cbb99e; margin:4px; }
body.touch-mode #photoBtn,body.touch-mode #recsBtn,body.touch-mode .wardrobe-launcher,
body.touch-mode .world-quality-toggle,body.touch-mode .room-invite-toggle { display:none !important; }
body.touch-mode #meTag,body.touch-mode #where,body.touch-mode #found,body.touch-mode #card,body.touch-mode #log { display:none; }
body.touch-mode #jump { right:var(--phone-edge-r); bottom:var(--phone-edge-b); width:56px; height:56px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  font-size:9px; border:1px solid #ead5b63d; background:#17131dcc; box-shadow:none; }
body.touch-mode #jump svg { width:23px; height:23px; pointer-events:none; }
body.touch-mode #act { right:calc(var(--phone-edge-r) + 66px); left:auto; bottom:var(--phone-edge-b);
  width:56px; height:56px; padding:5px; font-size:10px; line-height:1.3; background:#ddbb85; color:#201822; box-shadow:none; }
body.touch-mode #stick { width:100px; height:100px; margin:-50px 0 0 -50px; opacity:.6;
  background:#ead5b608; box-shadow:inset 0 0 0 1px #ead5b652; }
body.touch-mode #stick:not(.hot) { left:var(--phone-edge-l) !important; top:auto !important;
  bottom:var(--phone-edge-b) !important; margin:0; }
body.touch-mode #knob { width:38px; height:38px; margin:0; background:#ead5b642; box-shadow:inset 0 0 0 1px #ead5b662; }
body.touch-mode #congaBtn,body.touch-mode #leaveBtn { right:var(--phone-edge-r); bottom:calc(var(--phone-edge-b) + 66px);
  width:122px; height:44px; font-size:11px; background:#17131dcc; }
body.touch-mode #pads { left:calc(var(--phone-edge-l) + 116px); right:calc(var(--phone-edge-r) + 138px);
  bottom:var(--phone-edge-b); height:auto; gap:5px; grid-template-columns:repeat(4,minmax(0,1fr)); }
body.touch-mode #pads.on { display:grid; }
body.touch-mode #pads[data-instrument="darbuka"] {
  left:50%; right:auto; width:152px; transform:translateX(-50%);
  bottom:calc(var(--phone-edge-b) + 116px); grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
}
body.touch-mode #pads[data-instrument="darbuka"] button { height:68px; }
body.touch-mode #pads[data-instrument="darbuka"] svg { width:100%; height:100%; pointer-events:none; }
body.touch-mode #pads:has(button:nth-child(5)):not(:has(button:nth-child(6))) { grid-template-columns:repeat(5,minmax(0,1fr)); }
body.touch-mode #pads button { min-height:44px; font-size:11px; background:#d8bf98e8; box-shadow:none; border-radius:9px; }
/* Scale degrees, dressed as instruments. Dark piano keys are only decoration. */
body.touch-mode #pads[data-instrument="piano"],
body.touch-mode #pads[data-instrument="guitar"],
body.touch-mode #pads[data-instrument="bass"] { direction:ltr; gap:3px; padding:6px;
  border:1px solid #a68b634d; border-radius:10px; background:#17131de8; touch-action:none; }
body.touch-mode #pads[data-instrument="piano"] button { position:relative; height:44px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:4px;
  color:#635749; border:1px solid #eadcc6; border-bottom:4px solid #b3a58e;
  border-radius:2px 2px 5px 5px; background:linear-gradient(#ede4d4,#f5efdf 70%,#d9cdb6);
  font-size:10px; touch-action:none; overflow:visible; }
body.touch-mode #pads[data-instrument="piano"] button:is(:nth-child(1),:nth-child(2),:nth-child(5),:nth-child(6))::after {
  content:""; position:absolute; z-index:1; top:-1px; right:-8px; width:15px; height:22px;
  pointer-events:none; border:1px solid #0c0a0f; border-bottom:3px solid #100d14;
  border-radius:0 0 3px 3px; background:linear-gradient(90deg,#17131d,#443d45 40%,#211b26); }
body.touch-mode #pads[data-instrument="piano"] button.hit { transform:translateY(2px);
  border-bottom-width:2px; background:linear-gradient(#d7e7c5,#edf5da); }
body.touch-mode #pads:is([data-instrument="guitar"],[data-instrument="bass"]) {
  gap:0; border:2px solid #926c43; padding:3px; border-radius:14px;
  background:repeating-linear-gradient(0deg,transparent 0 11px,#d2b9858c 12px,transparent 13px 18px),
    repeating-linear-gradient(3deg,#42251c 0 6px,#482a1e 7px,#42251c 10px); }
body.touch-mode #pads:is([data-instrument="guitar"],[data-instrument="bass"]) button {
  position:relative; isolation:isolate; display:grid; place-items:center; height:46px; border:0;
  border-right:2px solid #b2a58d; border-radius:0; background:transparent; color:#2b2019; font-size:11px; touch-action:none; }
body.touch-mode #pads:is([data-instrument="guitar"],[data-instrument="bass"]) button::before {
  content:""; position:absolute; z-index:-1; width:23px; height:23px; border-radius:50%; background:#ead7b6;
  box-shadow:0 0 0 2px #27170e80; }
body.touch-mode #pads:is([data-instrument="guitar"],[data-instrument="bass"]) button.hit {
  transform:none; background:#dac69126; color:#132010; }
body.touch-mode #pads:is([data-instrument="guitar"],[data-instrument="bass"]) button.hit::before {
  background:#c5dda9; box-shadow:0 0 12px #c5dda977; }
@media (min-width:700px) and (orientation:landscape) {
  body.touch-mode #pads:is([data-instrument="piano"],[data-instrument="guitar"],[data-instrument="bass"]) {
    grid-template-columns:repeat(8,minmax(0,1fr)); }
}
@media (max-width:699px) and (orientation:landscape) {
  body.touch-mode:has(#pads.on) #contextKeys { bottom:calc(var(--phone-edge-b) + 116px); }
  body.touch-mode:has(#pads.on) #toast { bottom:calc(var(--phone-edge-b) + 151px); }
}
body.touch-mode #contextKeys { bottom:calc(var(--phone-edge-b) + 102px); padding:5px 10px; max-width:calc(100vw - 300px);
  border-radius:10px; box-shadow:none; background:#17131dcc; }
body.touch-mode #contextKeys .context-head { font-size:11px; margin:0; gap:6px; }
body.touch-mode #contextKeys p { display:none; }
body.touch-mode #contextKeys .context-row { gap:8px; margin-top:5px; }
body.touch-mode #contextKeys .context-label { font-size:10px; min-width:0; }
body.touch-mode #contextKeys .keycap { min-width:44px; height:44px; font-size:12px; }
body.touch-mode #prompt,body.touch-mode #toast { left:50%; max-width:calc(100vw - 300px); min-height:0;
  padding:6px 10px; border-radius:10px; font-size:11px; line-height:1.4; white-space:normal;
  text-align:center; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; background:#17131dc9; }
body.touch-mode #prompt { bottom:calc(var(--phone-edge-b) + 18px); }
body.touch-mode #toast { bottom:calc(var(--phone-edge-b) + 134px); }
body.touch-mode:has(#act.on) #prompt { display:none; }
body.touch-mode #nowplay { top:var(--phone-edge-t); right:var(--phone-edge-r); left:auto; bottom:auto;
  max-width:calc(100vw - 260px); padding:7px 10px; border-radius:10px; background:#17131db3; font-size:10px; }
body.touch-mode #nowplay b { font-size:12px; }
body.touch-mode #gameHud { top:calc(var(--phone-edge-t) + 54px); right:var(--phone-edge-r); left:auto; bottom:auto;
  max-width:calc(100vw - 220px); padding:6px 10px; font-size:10px; background:#17131dcc; }
body.touch-mode #gameHud b { font-size:12px; }
body.touch-mode #chat { top:calc(var(--phone-edge-t) + 54px); bottom:auto; left:50%; width:min(360px,calc(100vw - 180px)); }
body.touch-mode #chatIn { width:100%; min-height:44px; font-size:13px; padding:8px 78px 8px 12px; }
body.touch-mode #remote { bottom:calc(var(--phone-edge-b) + 116px); left:50%; right:auto; transform:translateX(-50%); gap:6px; }
body.touch-mode #remote button { min-height:44px; font-size:11px; padding:6px 12px; }
body.touch-mode .world-quality-panel,body.touch-mode .room-invite section { position:fixed; top:calc(var(--phone-edge-t) + 52px);
  left:50%; right:auto; inset-inline-start:auto; transform:translateX(-50%); max-height:calc(100dvh - var(--phone-edge-t) - var(--phone-edge-b) - 58px); overflow-y:auto; }
body.touch-mode.mobile-menu-open #contextKeys,body.touch-mode.mobile-menu-open #pads { visibility:hidden; pointer-events:none; }
/* Five generous, distinct hit regions arranged like a kit. No visible labels. */
body.touch-mode #pads[data-instrument="drums"] {
  height:96px; direction:ltr; touch-action:none; isolation:isolate;
  --kit-head:#f3e8d2; --kit-shell:#b87560; --kit-cymbal:#d9ae56;
}
body.touch-mode #pads[data-instrument="drums"]::before {
  content:""; position:absolute; inset:35% 0 -4px; z-index:-1; border-radius:50%;
  background:radial-gradient(ellipse,#15121bd9,transparent 70%); pointer-events:none;
}
body.touch-mode #pads[data-instrument="drums"] button {
  position:absolute; min-height:44px; min-width:44px; padding:0; border:0;
  background:transparent; box-shadow:none; border-radius:50%; overflow:visible; touch-action:none;
}
body.touch-mode #pads[data-instrument="drums"] button:nth-child(1) { left:36%; top:50%; width:28%; height:50%; }
body.touch-mode #pads[data-instrument="drums"] button:nth-child(2) { left:4%; top:52%; width:28%; height:48%; }
body.touch-mode #pads[data-instrument="drums"] button:nth-child(3) { left:0; top:0; width:28%; height:48%; }
body.touch-mode #pads[data-instrument="drums"] button:nth-child(4) { left:36%; top:0; width:28%; height:48%; }
body.touch-mode #pads[data-instrument="drums"] button:nth-child(5) { left:70%; top:4%; width:30%; height:48%; }
body.touch-mode #pads[data-instrument="drums"] svg { width:100%; height:100%; pointer-events:none; overflow:visible; }
body.touch-mode #pads[data-instrument="drums"] .kit-shell { fill:var(--kit-shell); stroke:#44343a; stroke-width:3; }
body.touch-mode #pads[data-instrument="drums"] .kit-head { fill:var(--kit-head); stroke:#a79a8c; stroke-width:4; }
body.touch-mode #pads[data-instrument="drums"] .kit-cymbal { fill:var(--kit-cymbal); stroke:#96703a; stroke-width:2; }
body.touch-mode #pads[data-instrument="drums"] .kit-metal { fill:none; stroke:#b8b4b6; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
body.touch-mode #pads[data-instrument="drums"] .kit-ring { fill:none; stroke:#766850; stroke-width:1; opacity:.45; }
body.touch-mode #pads[data-instrument="drums"] button.hit {
  --kit-head:#fff5cb; --kit-shell:#df987b; --kit-cymbal:#ffe09a;
  background:transparent; transform:translateY(2px) scale(.97);
}
body.touch-mode #pads[data-instrument="drums"] button:focus-visible { outline:2px solid #fff0c4; outline-offset:1px; }
@media(max-height:360px) {
  body.touch-mode #mobileQuick > button { height:44px; }
  body.touch-mode #nowplay span { display:none; }
}

/* Portrait: keep the centre clear and place contextual controls above the thumbs. */
@media (orientation:portrait) {
  body.touch-mode #nowplay { top:calc(var(--phone-edge-t) + 54px); max-width:calc(100vw - 28px); }
  body.touch-mode #gameHud { top:calc(var(--phone-edge-t) + 110px); max-width:calc(100vw - 28px); }
  body.touch-mode #pads { left:var(--phone-edge-l); right:var(--phone-edge-r);
    bottom:calc(var(--phone-edge-b) + 126px); }
  body.touch-mode #contextKeys { width:calc(100vw - 28px); max-width:calc(100vw - 28px);
    bottom:calc(var(--phone-edge-b) + 126px); }
  body.touch-mode:has(#pads.on) #contextKeys { bottom:calc(var(--phone-edge-b) + 240px); }
  body.touch-mode #contextKeys .context-row { flex-wrap:wrap; justify-content:center; }
  body.touch-mode #contextKeys .context-key-row { flex-wrap:wrap; }
  body.touch-mode #prompt { max-width:calc(100vw - 28px); bottom:calc(var(--phone-edge-b) + 126px); }
  body.touch-mode #toast { max-width:calc(100vw - 28px); bottom:calc(var(--phone-edge-b) + 184px); }
  body.touch-mode:has(#pads.on) #toast { bottom:calc(var(--phone-edge-b) + 286px); }
  body.touch-mode #remote { bottom:calc(var(--phone-edge-b) + 126px); max-width:calc(100vw - 28px); flex-wrap:wrap; justify-content:center; }
  body.touch-mode #chat { width:calc(100vw - 24px); }
}

/* A single speed readout while piloting, without a game scoreboard. */
body.flight-playing #gameHud { top:auto; bottom:calc(max(12px,env(safe-area-inset-bottom)) + 198px); font-size:16px; }
body.flight-playing.touch-mode #gameHud { bottom:calc(max(12px,env(safe-area-inset-bottom)) + 198px); }
@media(max-height:500px){body.flight-playing.touch-mode #gameHud { bottom:calc(max(8px,env(safe-area-inset-bottom)) + 156px); }}
.flight-speed small { font-size:11px; opacity:.72; }

/* Secondary flight action: smaller lettering, with a 44px touch target. */
body.flight-playing.touch-mode #contextKeys [data-code="KeyF"] {
  min-width:44px; height:44px; padding:0 6px;
}
body.flight-playing.touch-mode #contextKeys [data-code="KeyF"] kbd {
  font-size:12px; line-height:1.2; white-space:nowrap;
}