/* バランススケール スタイル。プラットフォームと同じダーク(シンセウェイブ・ネオン)で自己完結。 */
:root {
  --aqua: #2de2ff; --aqua-deep: #7ef0ff; --yellow: #ff3caf;
  --ink: #e9ecff; --mut: #9a9ed6; --line: #2c2a55; --bg: #08060f; --panel: #151129;
  --wood: #c98f52; --metal: #9aa7ad;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", sans-serif;
  color: var(--ink); line-height: 1.5;
  padding: .7rem; max-width: 640px; margin: 0 auto; min-height: 100vh;
  background: var(--bg);
}
/* 背景演出をトップページ(サイト)に統一:夕焼けグロー + ネオングリッド床 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 85% at 50% -25%, rgba(255,60,175,.38), transparent 55%),
    radial-gradient(90% 60% at 8% 0%, rgba(45,226,255,.26), transparent 60%),
    radial-gradient(90% 60% at 100% 8%, rgba(124,77,255,.26), transparent 60%),
    var(--bg);
  animation: skyPulse 5s ease-in-out infinite;
}
@keyframes skyPulse { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
body::after {
  content: ""; position: fixed; left: -25%; right: -25%; bottom: 0; height: 48vh; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(45,226,255,.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,60,175,.5) 2px, transparent 2px);
  background-size: 44px 44px;
  transform: perspective(300px) rotateX(66deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 84%);
          mask-image: linear-gradient(to top, #000 6%, transparent 84%);
  opacity: .85; filter: drop-shadow(0 0 6px rgba(45,226,255,.5));
  animation: gridScroll 2.4s linear infinite;
}
@keyframes gridScroll { from { background-position: 0 0, 0 0; } to { background-position: 0 44px, 0 44px; } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none; } }
h1 { font-size: 1.15rem; margin: 0; }
.screen[hidden] { display: none; }

/* 難易度選択 */
#screen-select { text-align: center; padding-top: .5rem; }
#screen-select .lead { color: var(--mut); font-size: .88rem; max-width: 44ch; margin: .5rem auto 1rem; }
.guest { color: var(--aqua-deep); font-size: .82rem; background: rgba(45,226,255,.1); border: 1px solid rgba(45,226,255,.3); border-radius: 8px; padding: .4rem .7rem; display: inline-block; }
.diffs { display: flex; flex-direction: column; gap: .7rem; max-width: 320px; margin: 1rem auto 0; }
.diff-btn {
  font: inherit; cursor: pointer; text-align: left; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  display: flex; flex-direction: column; gap: .1rem; transition: border-color .15s, transform .1s;
}
.diff-btn:hover { border-color: var(--aqua); transform: translateY(-2px); }
.diff-btn b { font-size: 1.05rem; }
.diff-btn span { color: var(--mut); font-size: .8rem; }

/* ヘッダー */
.head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .3rem; }
.stats { margin-left: auto; display: flex; align-items: baseline; gap: .8rem; font-variant-numeric: tabular-nums; }
.chip { background: var(--aqua); color: #08252d; font-weight: 700; font-size: .78rem; padding: .2rem .6rem; border-radius: 999px; }
.stat .lbl { color: var(--mut); font-size: .72rem; margin-right: .2rem; }
.stat b { font-size: 1rem; }

/* 天秤(傾いてもヘッダー/ボタンと被らないよう、控えめな角度 + 上下に余白) */
.scale { position: relative; height: 224px; margin: 16px 0 20px; overflow: hidden; }
.beam {
  position: absolute; top: 38px; left: 50%; width: 300px; height: 10px; margin-left: -150px;
  background: var(--metal); border-radius: 6px; transform-origin: 50% 50%;
  transition: transform .6s cubic-bezier(.34, 1.35, .5, 1);
}
.hang { position: absolute; top: 5px; width: 0; }
.hang.left { left: 6px; } .hang.right { right: 6px; }
.wire { position: absolute; top: 0; left: 0; width: 2px; height: 38px; margin-left: -1px; background: var(--metal); }
.pan {
  position: absolute; top: 38px; left: 0; width: 124px; min-height: 52px; max-height: 96px; margin-left: -62px;
  overflow-y: auto;
  background: linear-gradient(180deg, #eef4f6, #dbe6ea); border: 1px solid var(--metal);
  border-radius: 6px 6px 30px 30px; display: flex; flex-wrap: wrap; align-content: flex-start;
  justify-content: center; gap: 3px; padding: 5px; transform-origin: 50% 0;
  transition: transform .6s cubic-bezier(.34, 1.35, .5, 1);
}
.pan[data-count="0"] { align-content: center; }
.pan[data-count="0"]::after { content: "空"; color: var(--mut); font-size: .78rem; }
.pillar { position: absolute; top: 42px; left: 50%; width: 12px; height: 156px; margin-left: -6px;
  background: linear-gradient(90deg, #b97f45, var(--wood), #b97f45); border-radius: 4px; z-index: -1; }
.base { position: absolute; bottom: 4px; left: 50%; width: 150px; height: 14px; margin-left: -75px;
  background: var(--wood); border-radius: 7px; }

/* おもり */
.omori {
  font: 700 .98rem/1 inherit; color: #fff; width: 25px; height: 25px; border: 0; border-radius: 7px;
  cursor: grab; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); text-shadow: 0 1px 1px rgba(0,0,0,.3);
  touch-action: none; /* タッチでドラッグ中にページがスクロールしないように */
}
.omori.sel { outline: 3px solid var(--yellow); outline-offset: 1px; transform: translateY(-2px); }
.omori.dragging { opacity: .3; }
.omori:active { cursor: grabbing; }
.drag-clone {
  position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%);
  width: 30px; height: 30px; font-size: 1.1rem; box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.zone-hot { outline: 2px dashed var(--aqua); outline-offset: 2px; background: rgba(45,226,255,.14); }

.move-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 .5rem; }
.move-lbl { color: var(--mut); font-size: .8rem; }

.tray-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tray-lbl { color: var(--mut); font-size: .8rem; }
.tray {
  flex: 1; min-height: 46px; min-width: 180px; display: flex; flex-wrap: wrap; gap: 5px; align-content: center;
  padding: 6px; border: 1px dashed var(--line); border-radius: 10px; background: var(--panel);
}

.btn { font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); padding: .45rem 1rem; border-radius: 999px; }
.btn:hover { border-color: var(--aqua); color: var(--aqua-deep); }
.btn.primary { background: var(--aqua); color: #08252d; border-color: var(--aqua); }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: var(--panel); }
.btn.link { border: 0; background: none; color: var(--mut); padding: .3rem 0; margin-top: .4rem; }

.play-msg { min-height: 1.2rem; margin: .5rem 0; font-size: .88rem; color: var(--mut); }
.play-msg.clear { color: var(--aqua-deep); font-weight: 700; animation: msg-pop .45s ease; transform-origin: left center; }
@keyframes msg-pop { 0% { transform: scale(.7); opacity: .2; } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* クリア演出: 紙吹雪 */
.confetti {
  position: fixed; top: 0; width: 9px; height: 14px; border-radius: 2px;
  z-index: 3000; pointer-events: none; will-change: transform, opacity;
  animation: confetti-fly 1.2s cubic-bezier(.2, .6, .3, 1) forwards;
}
@keyframes confetti-fly {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
  .play-msg.clear { animation: none; }
}

.log-wrap { margin-top: .3rem; }
.log-lbl { color: var(--mut); font-size: .76rem; }
.history { list-style: none; margin: .25rem 0 0; padding: .4rem .6rem; max-height: 92px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; font-size: .82rem;
  font-variant-numeric: tabular-nums; display: flex; flex-direction: column; gap: .15rem; }
.history li { color: var(--ink); }

/* リザルト */
#screen-result { text-align: center; padding-top: 1rem; }
.result-score { font-size: 2.6rem; font-weight: 800; color: var(--aqua-deep); font-variant-numeric: tabular-nums; margin: .4rem 0; }
.result-detail { color: var(--mut); font-size: .88rem; }
.result-save { font-weight: 700; color: var(--aqua-deep); min-height: 1.2rem; }
.result-actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }