/* Магічна спіраль — original marble-chain game, mobile-first */
.ms-root,.ms-root *{box-sizing:border-box}
.ms-root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.35;color:#f2fbff;background:radial-gradient(ellipse at 50% 0,#314b72 0,#182a47 48%,#121829 100%);border:3px solid #6b8db4;border-bottom:7px solid #294268;border-radius:22px;padding:12px;margin:14px auto 24px;max-width:1100px;box-shadow:0 13px 27px #08142660;overflow:visible}
.ms-root h2,.ms-root h3{color:#fff1b3!important;margin:0 0 5px;font-weight:900;line-height:1.1}
.ms-root p{color:#c9e4f3;margin:0}
.ms-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 3px 8px;flex-wrap:wrap}
.ms-head strong{font-size:clamp(19px,3vw,29px);color:#fff1b3}
.ms-head em{font-size:12px;font-style:normal;font-weight:800;color:#b3ddfa}
.ms-scorebar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:8px}
.ms-tile{padding:6px 5px;border:1px solid #7aa3c6;border-radius:11px;background:linear-gradient(150deg,#385a79,#233b60);text-align:center;min-width:0}
.ms-tile small{display:block;color:#b9d7ee;font-size:11px;font-weight:800;white-space:nowrap}
.ms-tile b{display:block;font-size:clamp(13px,2vw,19px);color:#fff4b9;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.ms-board{width:100%;height:clamp(400px,57vw,670px);position:relative;background:#0d1c35;overflow:hidden;border:4px solid #9dceeb;border-bottom:7px solid #3f668d;border-radius:19px;box-shadow:0 7px 18px #010c2066}
.ms-board canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none}
.ms-note{position:absolute;top:15px;left:50%;width:max-content;max-width:90%;transform:translate(-50%,-16px);opacity:0;pointer-events:none;color:#243c4d;background:#fff0a5;border:2px solid #fff9d3;padding:8px 14px;border-radius:11px;box-shadow:0 5px 0 #a77d5e;font-weight:900;text-align:center;font-size:14px;transition:opacity .2s,transform .2s}
.ms-note.visible{opacity:1;transform:translate(-50%,0)}
.ms-controls{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:9px}
.ms-btn{grid-column:span 2;appearance:none;-webkit-appearance:none;border:2px solid #8bbaD1;border-bottom:5px solid #152e49;border-radius:12px;background:linear-gradient(#487497,#2d4f73);color:#fff;font:800 13px/1.1 system-ui;min-height:43px;padding:8px 5px;text-align:center;cursor:pointer;touch-action:manipulation;white-space:normal}
.ms-btn.main{grid-column:span 4;background:linear-gradient(#fff2ad,#8eddac);color:#253e3e;border-color:#faffdb;border-bottom-color:#44875f;font-size:17px}
.ms-btn.swap{grid-column:span 4;background:linear-gradient(#8bd9ed,#569cc5);color:#163149;border-color:#c6f4ff;border-bottom-color:#2a648d;font-size:15px}
.ms-btn.power{grid-column:span 4;background:linear-gradient(#c3a3ff,#7c6bbc);border-color:#ddc9ff;font-size:14px}
.ms-btn.power.armed{background:linear-gradient(#ffd994,#ed8c62);color:#453322;border-color:#fff1ba}
.ms-btn:disabled{opacity:.54;cursor:default}
.ms-btn:focus-visible{outline:3px solid #fff1a4;outline-offset:2px}
.ms-btn:active:not(:disabled){transform:translateY(2px)}
.ms-smallbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:7px;align-items:center;padding:9px 3px 2px}
.ms-status{color:#d7f5dd;font-weight:900;font-size:13px}
.ms-legend{font-size:12px;color:#a9cce0;font-weight:650}
.ms-levelbar{display:flex;align-items:center;justify-content:center;gap:6px}
.ms-levelbar .ms-btn{min-width:36px;padding:5px 10px;min-height:35px;font-size:16px}
.ms-levelbar span{font-weight:900;font-size:13px}
.ms-footer{padding:6px 3px 2px;color:#b5d6ee;font-size:11px;text-align:center}
#ms-frame:fullscreen{width:100vw;height:100dvh;max-width:none;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;overflow:hidden;padding:7px}
#ms-frame:fullscreen .ms-board{flex:1 1 auto;height:0;min-height:0;max-height:none}
#ms-frame:fullscreen .ms-scorebar,#ms-frame:fullscreen .ms-head,#ms-frame:fullscreen .ms-controls,#ms-frame:fullscreen .ms-smallbar{flex-shrink:0}
@media(max-width:720px){
 .ms-root{width:calc(100vw - 8px);max-width:none;margin:10px 0 18px;position:relative;left:50%;transform:translateX(-50%);padding:6px;border-radius:13px;border-width:2px;border-bottom-width:5px}
 .ms-head{padding:4px 4px 7px}
 .ms-head strong{font-size:20px}
 .ms-scorebar{gap:3px;margin-bottom:5px}
 .ms-tile{padding:4px 2px;border-radius:7px}
 .ms-tile small{font-size:10px}
 .ms-tile b{font-size:12px}
 .ms-board{height:min(66svh,640px);min-height:395px;border-width:2px;border-bottom-width:5px;border-radius:12px}
 .ms-controls{gap:4px;margin-top:6px}
 .ms-btn{min-height:39px;padding:7px 2px;border-bottom-width:3px;border-radius:8px;font-size:11px}
 .ms-btn.main{font-size:15px}
 .ms-btn.swap{font-size:13px}
 .ms-btn.power{font-size:12px}
 .ms-smallbar{padding:6px 2px 0;gap:4px}
 .ms-status{font-size:12px}
 .ms-legend{font-size:10px}
 .ms-footer{font-size:10px}
}
@media(max-width:390px){
 .ms-board{height:min(63svh,580px);min-height:350px}
 .ms-tile small{font-size:9px}
 .ms-btn{font-size:10px}
}
@media(orientation:landscape) and (max-height:580px){
 .ms-root{margin:3px auto;padding:4px}
 #ms-frame:fullscreen{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,31vw,290px);grid-template-rows:auto minmax(0,1fr) auto;gap:3px 6px;align-items:stretch}
 #ms-frame:fullscreen .ms-head{grid-column:1/-1;grid-row:1;display:none}
 #ms-frame:fullscreen .ms-scorebar{grid-column:2;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;align-self:start}
 #ms-frame:fullscreen .ms-board{grid-column:1;grid-row:1/4;width:100%;height:100%;min-height:0}
 #ms-frame:fullscreen .ms-controls{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:auto;align-content:start;margin:0;gap:4px}
 #ms-frame:fullscreen .ms-controls .ms-btn{grid-column:span 1;min-height:33px;padding:3px;font-size:11px}
 #ms-frame:fullscreen .ms-controls .ms-btn.main{grid-column:span 2;font-size:14px}
 #ms-frame:fullscreen .ms-controls .ms-btn.swap,#ms-frame:fullscreen .ms-controls .ms-btn.power{grid-column:span 1}
 #ms-frame:fullscreen .ms-smallbar{grid-column:2;grid-row:3;font-size:10px;padding:0}
 #ms-frame:fullscreen .ms-footer{display:none}
}
/* Keep the level selector inside the mobile button grid, not beyond the viewport. */
.ms-root .ms-levelbar{
 grid-column:1/-1!important;width:100%!important;min-width:0!important;
 display:flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;
 margin:2px auto 0!important;padding:5px 6px!important;
 border:1px solid #7399b8!important;border-radius:10px!important;background:#1c3554!important;
}
.ms-root .ms-levelbar span{
 color:#ffedb3!important;white-space:nowrap!important;text-align:center!important;
 font:900 15px/1.1 system-ui!important;flex:0 0 90px!important;
}
.ms-root .ms-levelbar .ms-btn{
 display:inline-flex!important;align-items:center!important;justify-content:center!important;
 flex:0 0 48px!important;width:48px!important;max-width:48px!important;min-width:0!important;
 height:36px!important;min-height:36px!important;padding:2px 5px!important;
 color:#f5f9ff!important;box-sizing:border-box!important;
}
@media(max-width:720px){
 .ms-root .ms-controls{width:100%!important;max-width:100%!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:4px!important}
 .ms-root #ms-pause,.ms-root #ms-sound,.ms-root #ms-music,.ms-root #ms-full{grid-column:span 3!important;min-width:0!important}
 .ms-root .ms-levelbar{grid-column:1/-1!important;max-width:100%!important;gap:10px!important}
 .ms-root .ms-levelbar span{flex:0 0 75px!important;font-size:14px!important}
 .ms-root .ms-levelbar .ms-btn{flex:0 0 44px!important;width:44px!important;max-width:44px!important}
}
@media(orientation:landscape) and (max-height:580px){
 #ms-frame:fullscreen .ms-levelbar{grid-column:1/-1!important;gap:3px!important;margin:0!important}
 #ms-frame:fullscreen .ms-levelbar .ms-btn{flex:0 0 33px!important;width:33px!important;height:29px!important;min-height:29px!important}
}
/* Zuma-style bonus: no separate charged bomb button; keep controls aligned. */
.ms-root .ms-controls .ms-btn.main,
.ms-root .ms-controls .ms-btn.swap{grid-column:span 6!important}
.ms-root .ms-controls #ms-pause,
.ms-root .ms-controls #ms-sound,
.ms-root .ms-controls #ms-music,
.ms-root .ms-controls #ms-full{grid-column:span 3!important}
.ms-root .ms-controls .ms-levelbar{grid-column:1/-1!important}
@media(orientation:landscape) and (max-height:580px){
  #ms-frame:fullscreen .ms-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #ms-frame:fullscreen .ms-controls .ms-btn.main,
  #ms-frame:fullscreen .ms-controls .ms-btn.swap{grid-column:1/-1!important}
  #ms-frame:fullscreen .ms-controls #ms-pause,
  #ms-frame:fullscreen .ms-controls #ms-sound,
  #ms-frame:fullscreen .ms-controls #ms-music,
  #ms-frame:fullscreen .ms-controls #ms-full{grid-column:span 1!important}
  #ms-frame:fullscreen .ms-controls .ms-levelbar{grid-column:1/-1!important}
}
@media(prefers-reduced-motion:reduce){.ms-note{transition:none}}