/* Version: 1.5.70 */
:root{
  --bg:#9fd4ea; --panel:#2d3b42; --panelText:#e8f1f5;
  --pill:#eeeeee; --pillText:#222; --accent:#2a7cff;
  --designHighlight:#ff0;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);font-family: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans TC", Arial, sans-serif;}
#layout{max-width:1080px;margin:20px auto;padding:0 12px}
#game-col{position:relative;width:960px;margin:0 auto}
#game-wrap{position:relative;width:960px;height:540px;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.2)}
#game{
  display:block;
  width:960px;
  height:540px;
  background-image:url("assets/Background/background1.jpeg");
  background-repeat:repeat-x;
  background-size:auto 100%;
  background-position:0 0;
}

#game.design-active{
  cursor:move;
  outline:2px dashed rgba(0,0,0,.5);
}

.pill{display:inline-flex;align-items:center;gap:.5rem;background:#eef2f3;color:var(--pillText);
  border-radius:999px;padding:.25rem .6rem;font-weight:600;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
#hud-top-center{position:absolute;top:10px;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:5}
#top-right{position:absolute;top:10px;right:10px;display:flex;align-items:flex-start;gap:.5rem;z-index:6}
#settings-toggle{cursor:pointer;border:0}
#settings-menu{position:absolute;top:100%;right:0;margin-top:.25rem;display:flex;flex-direction:column;gap:.25rem;opacity:0;transform:translateY(-5px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:7}
#settings-menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
#settings-menu .mini{margin-left:.25rem;font-size:.8rem;padding:.15rem .45rem;border-radius:10px;border:1px solid rgba(0,0,0,.1);background:white}

#design-enable.active{background:var(--accent);color:#fff;border-color:var(--accent)}

#debug-panel{position:absolute;left:12px;top:12px;z-index:6;width:130px;background:rgba(45,59,66,.9);color:var(--panelText);border-radius:10px;padding:6px 8px;font-size:12px}
.dbg-row{display:flex;justify-content:space-between;gap:.5rem}
.dbg-row>span:first-child{opacity:.8}

.touch-stack{position:absolute;z-index:7;display:flex;flex-direction:column;gap:10px}
#touch-left{left:20px;bottom:70px}
#touch-right{right:20px;bottom:70px}
.touch-btn{width:86px;height:64px;border:0;border-radius:14px;background:rgba(255,255,255,.8);box-shadow:0 6px 14px rgba(0,0,0,.18);font-size:22px}
.touch-btn.hold{transform:translateY(1px);opacity:.9}

#stage-clear{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);z-index:8}
#stage-clear[hidden]{display:none}
#stage-clear .title{font-size:44px;color:white;text-shadow:0 6px 18px rgba(0,0,0,.35);margin-bottom:14px;font-weight:900;letter-spacing:1px}
#stage-clear .primary{appearance:none;border:0;border-radius:999px;padding:10px 22px;background:var(--accent);color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(42,124,255,.35)}

#stage-fail{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:rgba(0,0,0,.25);z-index:8}
#stage-fail[hidden]{display:none}
#stage-fail .title{font-size:44px;color:white;text-shadow:0 6px 18px rgba(0,0,0,.35);margin:0 0 14px;font-weight:900;letter-spacing:1px}
#stage-fail .primary{appearance:none;border:0;border-radius:999px;padding:10px 22px;background:#e74c3c;color:#fff;font-weight:800;box-shadow:0 10px 20px rgba(231,76,60,.35)}

#doc-title{font-size:18px;margin:22px 0 6px}
.doc{margin:0;color:#19313a;opacity:.85}

/* Stage clear effect */
.clear-effect{
  position:absolute;
  width:80px;
  height:80px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  animation:clear-spin 1.5s ease-out forwards;
  pointer-events:none;
}
@keyframes clear-spin{
  from{transform:translate(-50%,-50%) scale(.5) rotate(0deg);opacity:1;}
  to{transform:translate(-50%,-50%) scale(1.5) rotate(720deg);opacity:0;}
}

.fail-effect{
  position:absolute;
  inset:0;
  background:rgba(255,0,0,.4);
  animation:fail-flash 1s ease-out forwards;
  pointer-events:none;
}
@keyframes fail-flash{
  from{opacity:1;}
  to{opacity:0;}
}

/* Slide effect */
.slide-effect{
  position:absolute;
  width:48px;
  height:24px;
  pointer-events:none;
  animation:slide-pop .5s ease-out forwards;
}
@keyframes slide-pop{
  from{opacity:.8;transform:translate(-50%,-50%) scaleX(var(--sx,1)) scale(1);}
  to{opacity:0;transform:translate(-50%,-50%) scaleX(var(--sx,1)) scale(.5);}
}

/* Start effect */
.start-effect{
  position:absolute;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:48px;
  font-weight:900;
  color:white;
  text-shadow:0 4px 8px rgba(0,0,0,.3);
  animation:start-pop 1s ease-out forwards;
  pointer-events:none;
}
@keyframes start-pop{
  from{opacity:0;transform:scale(.5);}
  50%{opacity:1;transform:scale(1);}
  to{opacity:0;transform:scale(1.5);}
}

#start-page{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:1rem;
  background:var(--bg);
  z-index:20;
}
#start-page[hidden]{display:none}
#start-page .title{font-size:2rem;font-weight:bold;}