.g-page.wide { max-width: 860px; }
.setup { display: grid; gap: 10px; margin-bottom: 14px; }
.opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.lbl { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.opt .lbl { width: 84px; }
.bigemoji { font-size: 3.4rem; }

.play { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; justify-items: center; }
.side { display: grid; gap: 10px; width: 100%; max-width: 150px; }
.side.left { justify-self: end; }
.side.right { justify-self: start; }
.box {
  display: grid;
  gap: 6px;
  padding: 10px;
  justify-items: center;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.box canvas { width: 100%; max-width: 110px; height: auto; display: block; }
.side .g-stat { text-align: center; }

.field {
  position: relative;
  width: min(320px, 70vw, calc((100vh - 260px) / 2));
  min-width: 200px;
  border-radius: 16px;
  padding: 6px;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lg), 0 8px 0 color-mix(in srgb, var(--line-strong) 100%, transparent);
}
#board { display: block; width: 100%; aspect-ratio: 1 / 2; border-radius: 10px; touch-action: none; }

.veil {
  position: absolute;
  inset: 6px;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  border-radius: 10px;
  background: rgba(8, 12, 28, 0.72);
  color: #eef1fa;
  z-index: 3;
}
.veil[hidden] { display: none; }
.veil-card { display: grid; gap: 10px; justify-items: center; }
.veil h2 { margin: 0; font-size: 1.8rem; }
.veil p { margin: 0; color: #c5cce6; }
.veil .keys { margin-top: 6px; font-size: 0.74rem; line-height: 1.7; color: #98a1bb; }
.toast {
  position: absolute;
  left: 50%;
  top: 22%;
  z-index: 4;
  transform: translateX(-50%);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 18px var(--gold);
  pointer-events: none;
  opacity: 0;
  white-space: nowrap;
  text-align: center;
}
.toast.show { animation: toast 1.1s ease forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }

.pad { display: none; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; margin: 16px auto 0; }
.pad button {
  min-height: 58px;
  font: 800 1.3rem var(--font);
  color: var(--ink);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--line-strong);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.pad button:active, .pad button.down { transform: translateY(3px); box-shadow: 0 1px 0 var(--line-strong); }
.pad [data-act="rotate"], .pad [data-act="drop"] { background: linear-gradient(180deg, #ffd25a, var(--gold)); color: var(--on-gold); border-color: var(--gold-deep); box-shadow: 0 4px 0 var(--gold-deep); }

@media (pointer: coarse), (max-width: 760px) { .pad { display: grid; } }
@media (max-width: 760px) {
  .g-page.wide { display: flex; flex-direction: column; }
  .g-head p { display: none; }
  .g-head { margin-bottom: 10px; }
  .play { order: 2; }
  .pad { order: 3; }
  .setup { order: 4; margin: 18px 0 0; }
}
@media (max-width: 640px) {
  .play { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; width: 100%; gap: 8px 10px; justify-items: stretch; }
  .side { display: contents; }
  .field { min-width: 0; grid-column: 1 / 4; grid-row: 2 / 4; justify-self: center; width: min(100%, calc((100dvh - 330px) / 2)); }
  .side.left .g-stat:nth-child(2) { grid-column: 1; grid-row: 1; }
  .side.left .g-stat:nth-child(3) { grid-column: 2; grid-row: 1; }
  .side.left .g-stat:nth-child(4) { grid-column: 3; grid-row: 1; }
  .side.right .g-stat:nth-child(2) { grid-column: 4; grid-row: 1; }
  .side.right .g-stat:nth-child(3) { display: none; }
  .side.left .box { grid-column: 4; grid-row: 2; align-self: start; }
  .side.right .box { grid-column: 4; grid-row: 3; align-self: start; }
  .box { padding: 8px 4px; }
  .box canvas { max-width: 64px; }
  .side .g-stat { padding-left: 4px; padding-right: 4px; }
}