/* One connected toy: the native controls sit on its pieces, never in a toolbar. */
.marbles-scene { display:flex; align-items:center; justify-content:center; }
.marbles-board { position:relative; width:min(800px,100%); height:100%; max-height:670px; isolation:isolate; touch-action:manipulation; }
.marbles-art { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.marbles-launch,.marbles-piece { position:absolute; padding:0; border:0; color:var(--tf-muted); background:transparent; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.marbles-piece { min-width:44px; min-height:44px; border-radius:30px; }
.marbles-piece:focus-visible { outline:3px dashed var(--tf-accent-text); outline-offset:-2px; }
.marbles-change { position:absolute; right:8%; top:36%; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--tf-muted); font-size:29px; line-height:1; opacity:.8; pointer-events:none; }
.marbles-launch { min-width:44px; min-height:44px; border-radius:50%; z-index:2; }
.marbles-launch-ball { position:absolute; inset:9%; border-radius:50%; background:#dd9690; border:2px solid #ba7874; box-shadow:inset -7px -7px 0 #bc79732e,0 4px 0 #304b542e; }
.marbles-launch-ball::before { content:''; position:absolute; left:21%; top:16%; width:19%; height:25%; border-radius:50%; background:#ffe8d2; transform:rotate(25deg); }
.marbles-launch[aria-disabled="true"] .marbles-launch-ball { visibility:hidden; }
.marbles-launch[aria-disabled="true"] { cursor:default; }
.marbles-launch.marbles-hint { outline:3px dashed var(--tf-accent-text); outline-offset:6px; }
.marbles-parent-tools { margin:8px 0 14px; padding-bottom:16px; border-bottom:1px solid var(--tf-border); }
.marbles-parent-tools .tf-help { margin:8px 0 0; }
body[data-game="marbles"] .game-progress { flex-basis:0; margin-top:0; }
@media (hover:hover) { .marbles-piece:hover .marbles-change { color:var(--tf-accent-text); opacity:1; } .marbles-launch:not([aria-disabled="true"]):hover { background:var(--play-hover); } }
@media (min-aspect-ratio:8/5) { .marbles-board { width:min(1020px,100%); max-height:440px; } .marbles-change { top:8%; right:12%; } }
@media (max-height:520px) and (orientation:landscape) {
  body[data-game="marbles"] .play-topline { flex-basis:60px; }
  body[data-game="marbles"] .play-heading { left:172px; right:84px; top:10px; }
  body[data-game="marbles"] .play-heading h1 { font-size:18px; }
  body[data-game="marbles"] .play-heading p { font-size:11px; }
  body[data-game="marbles"] .game-content { margin-top:4px; }
  .marbles-change { width:26px; height:26px; font-size:25px; top:2%; right:8%; }
}
@media (max-width:360px) and (orientation:portrait) {
  body[data-game="marbles"] .play-heading { padding-bottom:9px; }
  body[data-game="marbles"] .play-heading h1 { font-size:19px; }
  body[data-game="marbles"] .play-heading p { font-size:11px; }
  .marbles-change { right:4%; width:26px; font-size:25px; }
}

.marbles-launch:focus-visible::after,.marbles-piece:focus-visible::after { content:attr(data-key); position:absolute; left:50%; bottom:2px; transform:translateX(-50%); min-width:20px; height:20px; padding:0 4px; border-radius:4px; font-size:12px; line-height:20px; text-align:center; background:var(--play-bg); color:var(--tf-text); border:1px solid var(--tf-muted); pointer-events:none; }

/* The same generous control follows the actual marble, above the part controls. */
.marbles-launch { touch-action:none; cursor:grab; }
.marbles-launch.is-moving .marbles-launch-ball { visibility:hidden; }
.marbles-launch.is-held { cursor:grabbing; outline:2px solid var(--tf-accent-text); outline-offset:1px; }
.marbles-launch.is-moving:hover { background:transparent; }