:root {
  color-scheme: dark;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans", "Yu Gothic", sans-serif;
  --cream: #f6f0dd;
  --felt: #087548;
  --felt-dark: #05492f;
  --gold: #d9b45b;
}

* {
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html, body { margin: 0; min-height: 100%; background: #06271d; }

body {
  min-height: 100svh;
  overflow: hidden;
  color: var(--cream);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  user-select: none;
}

button { font: inherit; touch-action: manipulation; -webkit-touch-callout: none; }

.app {
  width: 100%;
  height: 100svh;
  max-width: 620px;
  margin: auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: max(16px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% -10%, #155e42 0, #073f2b 45%, #052c20 100%);
}

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 12px; }
.eyebrow { margin: 0 0 2px; color: #90b6a6; font-size: 10px; letter-spacing: .28em; font-weight: 700; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(22px, 7vw, 32px); letter-spacing: .06em; font-weight: 600; }

.sound-button {
  width: 42px; height: 42px; border: 1px solid rgba(246,240,221,.2); border-radius: 50%;
  background: rgba(0,0,0,.15); color: var(--cream); font-size: 21px;
}
.sound-button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }

.count-panel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px 14px; }
.count-panel p { flex: 0 0 auto; margin: 0; color: #bdd1c8; font-size: 12px; letter-spacing: .08em; white-space: nowrap; }
.count-options { display: flex; flex: 0 0 auto; gap: 6px; }
.count-options button {
  width: 36px; height: 36px; padding: 0; border: 1px solid rgba(246,240,221,.18); border-radius: 9px;
  background: rgba(0,0,0,.12); color: #bcd0c7; font-weight: 700;
}
.count-options button.selected { background: var(--cream); color: #073f2b; border-color: var(--cream); box-shadow: 0 3px 12px rgba(0,0,0,.22); }

.table-wrap {
  min-height: 250px; position: relative; padding: 14px; border-radius: 32px;
  background: linear-gradient(135deg, #6a381e, #3c1d10 52%, #744024);
  box-shadow: 0 16px 34px rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,255,255,.08);
  overflow: hidden;
}
.table-wrap.shaking { animation: table-shake .11s linear infinite alternate; }
.rail { position: absolute; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 25%, rgba(0,0,0,.26)); }
.rail-top,.rail-bottom { left: 12px; right: 12px; height: 13px; }
.rail-top { top: 0; } .rail-bottom { bottom: 0; transform: rotate(180deg); }
.rail-left,.rail-right { top: 12px; bottom: 12px; width: 13px; }
.rail-left { left: 0; } .rail-right { right: 0; transform: rotate(180deg); }

.felt {
  position: relative; width: 100%; height: 100%; border-radius: 21px; overflow: hidden;
  background-color: var(--felt);
  background-image: radial-gradient(rgba(255,255,255,.05) .7px, transparent .8px), radial-gradient(rgba(0,0,0,.06) .7px, transparent .8px);
  background-position: 0 0, 3px 3px; background-size: 6px 6px;
  box-shadow: inset 0 0 35px rgba(0,0,0,.28), inset 0 0 0 1px rgba(0,0,0,.25);
  perspective: 700px;
}
.felt::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0,40,24,.18)); }

.dice-field { position: absolute; inset: 28px; z-index: 1; }
.die-wrap { position: absolute; width: 66px; height: 66px; transform: translate(-50%,-50%); will-change: left, top; }
.die-shadow { position: absolute; width: 62px; height: 25px; left: 2px; top: 48px; border-radius: 50%; background: rgba(0,0,0,.31); filter: blur(7px); transform: scale(.8); }
.die { position: absolute; width: 56px; height: 56px; left: 5px; top: 2px; transform-style: preserve-3d; transform: rotateX(-18deg) rotateY(24deg); will-change: transform; }
.die-wrap.settling .die { transition: transform .28s cubic-bezier(.16,.72,.22,1); }

.face {
  position: absolute; width: 57px; height: 57px; margin: -.5px; border-radius: 1px;
  background: radial-gradient(circle at 44% 38%, #fffef9 0 58%, #f7f3e8 82%, #e5dfd1 100%);
  box-shadow: inset 0 0 0 1px #d7d3c7, inset -5px -6px 12px rgba(89,76,52,.12);
  display: grid; grid-template: repeat(3,1fr) / repeat(3,1fr); padding: 8px;
  backface-visibility: hidden;
}
.table-wrap.shaking .face {
  box-shadow: inset 0 0 0 1px #ddd8ca;
}
.table-wrap.shaking .die-shadow { filter: none; opacity: .32; }
.front { transform: translateZ(28px); }
.back { transform: rotateY(180deg) translateZ(28px); }
.right { transform: rotateY(90deg) translateZ(28px); }
.left { transform: rotateY(-90deg) translateZ(28px); }
.top { transform: rotateX(90deg) translateZ(28px); }
.bottom { transform: rotateX(-90deg) translateZ(28px); }
.pip { width: 9px; height: 9px; place-self: center; border-radius: 50%; background: #15211d; box-shadow: inset 1px 1px 2px rgba(0,0,0,.4); }
.pip.red { background: #c53b32; }

@keyframes table-shake {
  from { transform: translate3d(-5px, 1px, 0) rotate(-.45deg); }
  to { transform: translate3d(5px, -1px, 0) rotate(.45deg); }
}

.result { position: absolute; right: 14px; bottom: 12px; z-index: 2; min-width: 42px; text-align: center; color: rgba(255,255,255,.78); font: 600 12px/1.2 Georgia, serif; letter-spacing: .1em; opacity: 0; transition: opacity .3s; }
.result.show { opacity: 1; }

.controls { padding-top: 16px; }
.roll-button {
  width: 100%; min-height: 66px; border: 0; border-radius: 18px; color: #173326; background: var(--cream);
  display: flex; align-items: center; justify-content: center; gap: 13px; box-shadow: 0 7px 0 #b8ac88, 0 12px 24px rgba(0,0,0,.24);
  touch-action: none;
}
.roll-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #b8ac88, 0 6px 14px rgba(0,0,0,.22); }
.roll-button.holding { transform: translateY(4px); background: #e7dcc0; box-shadow: 0 3px 0 #a99d7d, 0 6px 14px rgba(0,0,0,.22); }
.roll-button strong,.roll-button small { display: block; }
.roll-button strong { font-size: 16px; letter-spacing: .05em; }
.roll-button small { margin-top: 2px; color: #678074; font-size: 10px; }
.phone-mark { width: 32px; height: 42px; display: grid; place-items: center; border: 2px solid #173326; border-radius: 8px; font-size: 21px; font-weight: 900; }
.status { min-height: 15px; margin: 13px 0 0; text-align: center; color: #8db0a0; font-size: 10px; letter-spacing: .06em; }

.sensor-gate {
  position: fixed; inset: 0; z-index: 20; padding: 24px;
  display: grid; place-items: center;
  background: rgba(2, 25, 18, .88);
  backdrop-filter: blur(8px);
}
.sensor-gate[hidden] { display: none; }
.sensor-card {
  width: min(100%, 360px); padding: 30px 24px 24px; border: 1px solid rgba(246,240,221,.18);
  border-radius: 24px; text-align: center; background: #0a4934;
  box-shadow: 0 22px 55px rgba(0,0,0,.42);
}
.sensor-icon {
  width: 58px; height: 58px; margin: 0 auto 15px; display: grid; place-items: center;
  border: 2px solid var(--cream); border-radius: 15px; color: var(--cream); font-size: 34px;
}
.sensor-card h2 { margin: 0 0 10px; font-size: 21px; }
.sensor-card p { min-height: 44px; margin: 0 0 20px; color: #bdd1c8; font-size: 13px; line-height: 1.7; }
.sensor-enable, .sensor-skip { width: 100%; border-radius: 13px; }
.sensor-enable { min-height: 54px; border: 0; color: #173326; background: var(--cream); font-weight: 700; }
.sensor-skip { min-height: 42px; margin-top: 9px; border: 1px solid rgba(246,240,221,.22); color: #d6e2dc; background: transparent; font-size: 12px; }

@media (min-width: 621px) {
  body::before { content: "スマートフォン用アプリ"; position: fixed; top: 12px; left: 16px; color: rgba(255,255,255,.35); font-size: 11px; }
  .app { box-shadow: 0 0 60px rgba(0,0,0,.45); }
}

@media (max-height: 590px) {
  .app { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .topbar { padding-bottom: 6px; } .count-panel { padding-bottom: 8px; }
  .controls { padding-top: 10px; } .roll-button { min-height: 56px; } .status { margin-top: 9px; }
}

@media (max-width: 360px) {
  .app { padding-left: 12px; padding-right: 12px; }
  .count-options { gap: 4px; }
  .count-options button { width: 32px; height: 34px; }
}

@media (max-width: 620px) {
  .die-wrap { transform: translate(-50%,-50%) scale(.78); }
  .table-wrap.shaking .die-wrap { transform: translate(-50%,-50%) scale(.69); }
  .die-shadow { filter: blur(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .table-wrap.shaking { animation-duration: .28s; }
}