/* SHIGE pocket arcade: controls, score, board, pieces. */
#arcade-menu-open,
#quick-pause { display: none; }

.menu-label { display: none; }

.immersive .tiny-mark svg { width: 24px; height: 24px; }
.immersive .stage.celebrate { animation: none; }
.arcade-clear-wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.arcade-clear-wash::before,
.arcade-clear-wash::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.stage.clear-single .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #ffffff88, #afcffc14 65%, transparent 82%);
  animation: arcade-flash .36s ease-out;
}
.stage.clear-multi .arcade-clear-wash::before,
.stage.clear-streak .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #fff4bc70, #fff6d324 52%, transparent 85%);
  animation: arcade-flash .62s ease-out;
}
.stage.clear-multi .arcade-clear-wash::after,
.stage.clear-streak .arcade-clear-wash::after {
  inset: 15%;
  border-radius: 50%;
  border: 3px solid #fff6c2;
  box-shadow: 0 0 20px #f4c65270, inset 0 0 20px #ffffff66;
  animation: arcade-ring .66s cubic-bezier(.18,.68,.25,1) both;
}
.stage.clear-streak .arcade-clear-wash::after {
  border-width: calc(2px + var(--clear-power, 1) * .6px);
  box-shadow: 0 0 32px #f5bd4e99, inset 0 0 24px #fff9d977;
  animation-duration: .82s;
}
.stage[data-cheer-tier="1"] { --cheer-ink: #428fa1; --cheer-glow: #94e4f899; --cheer-burst: 1.05; }
.stage[data-cheer-tier="2"] { --cheer-ink: #7662ce; --cheer-glow: #c4b9ff99; --cheer-burst: 1.12; }
.stage[data-cheer-tier="3"] { --cheer-ink: #ce811f; --cheer-glow: #ffd872aa; --cheer-burst: 1.2; }
.stage[data-cheer-tier="4"] { --cheer-ink: #c96583; --cheer-glow: #ffa9c2aa; --cheer-burst: 1.27; }
.stage[data-cheer-tier="5"] { --cheer-ink: #ad7314; --cheer-glow: #ffe59acc; --cheer-burst: 1.34; }
.stage[data-cheer-tier="2"].clear-streak .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #ebe2ff73, #d4c5ff20 58%, transparent 85%);
}
.stage[data-cheer-tier="4"].clear-streak .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #ffe1e47a, #ffd0e026 54%, transparent 85%);
}
.stage[data-cheer-tier="5"].clear-streak .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #fff8cc8a, #ffd8783a 58%, transparent 88%);
}
.stage.cheer-active .arcade-clear-wash::after {
  border-color: var(--cheer-glow, #fff6c2);
  box-shadow: 0 0 30px var(--cheer-glow, #f4c65270), inset 0 0 22px #fff9d95c;
}
.stage.clear-streak .clear-toast { color: #b17b20; }
.stage.clear-multi .clear-toast small,
.stage.clear-streak .clear-toast small { color: #a96c12; }

/* The callout shares the board overlay and never changes the drag surface. */
#cheer-callout {
  position: absolute;
  z-index: 7;
  top: 25%;
  left: 50%;
  width: 94%;
  max-width: 420px;
  padding: 0 8px;
  direction: ltr;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  --cheer-ink: #428fa1;
  --cheer-glow: #94e4f899;
  --cheer-burst: 1.05;
}
#cheer-callout[data-tier="2"] { --cheer-ink: #7662ce; --cheer-glow: #c4b9ff99; --cheer-burst: 1.12; }
#cheer-callout[data-tier="3"] { --cheer-ink: #ce811f; --cheer-glow: #ffd872aa; --cheer-burst: 1.2; }
#cheer-callout[data-tier="4"] { --cheer-ink: #c96583; --cheer-glow: #ffa9c2aa; --cheer-burst: 1.27; }
#cheer-callout[data-tier="5"] { --cheer-ink: #ad7314; --cheer-glow: #ffe59acc; --cheer-burst: 1.34; }
.cheer-word {
  position: relative;
  display: block;
  color: var(--cheer-ink);
  font: 900 clamp(23px, calc(var(--board-size, 430px) * .09), 43px)/1.06 var(--sans);
  letter-spacing: -.045em;
  text-transform: uppercase;
  text-wrap: balance;
  -webkit-text-stroke: 1px #fff7e6;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #fff, 0 4px 0 #74512324, 0 6px 20px var(--cheer-glow);
}
.cheer-count {
  position: relative;
  display: block;
  margin-top: 7px;
  color: #657390;
  font: 800 clamp(11px, 2.5vw, 15px)/1.25 var(--mono);
  letter-spacing: .08em;
  text-shadow: 0 1px 4px #fff, 0 0 12px #fff;
}
#cheer-callout::before,
#cheer-callout::after {
  content: '';
  position: absolute;
  top: -6px;
  left: calc(50% - 28px);
  width: 56px;
  height: 56px;
  background: var(--cheer-glow);
  clip-path: polygon(50% 0, 57% 33%, 85% 15%, 67% 43%, 100% 50%, 67% 57%, 85% 85%, 57% 67%, 50% 100%, 43% 67%, 15% 85%, 33% 57%, 0 50%, 33% 43%, 15% 15%, 43% 33%);
  opacity: 0;
}
#cheer-callout::after { transform: rotate(22.5deg); }
#cheer-callout.show { animation: cheer-arrive var(--cheer-duration, 1.1s) cubic-bezier(.2,.7,.28,1) both; }
#cheer-callout.show::before { animation: cheer-rays .7s ease-out both; }
#cheer-callout.show[data-tier="4"]::after,
#cheer-callout.show[data-tier="5"]::after { animation: cheer-rays .82s .08s ease-out both; }
.stage[data-cheer-tier="6"], #cheer-callout[data-tier="6"] { --cheer-ink:#0c958e; --cheer-glow:#9cfff0b3; --cheer-burst:1.36; }
.stage[data-cheer-tier="7"], #cheer-callout[data-tier="7"] { --cheer-ink:#c2512f; --cheer-glow:#ffb297bd; --cheer-burst:1.38; }
.stage[data-cheer-tier="8"], #cheer-callout[data-tier="8"] { --cheer-ink:#7851b5; --cheer-glow:#d9b7ffd1; --cheer-burst:1.4; }
.stage[data-cheer-tier="9"], #cheer-callout[data-tier="9"] { --cheer-ink:#bb6c08; --cheer-glow:#fff29be0; --cheer-burst:1.42; }
#cheer-callout.show:is([data-tier="6"],[data-tier="7"],[data-tier="8"],[data-tier="9"])::after { animation:cheer-rays .9s .12s ease-out both; }
.immersive .clear-toast.with-cheer { top: 47%; font-size: 0; }
.immersive .clear-toast.with-cheer small { font-size: clamp(24px, 7vw, 35px); margin-top: 0; color: #80622f; }
.immersive.game-live.bonus-mode .stage { animation: starlight-stage 1.68s ease-in-out infinite; }
.immersive.game-live.bonus-mode .reward-badge { background: #fffae6e6; border-color: #eccd7f; }
.immersive.game-live.bonus-mode .rush-track > span { background: linear-gradient(90deg, #e9a838, #ffdb72, #ffc457); }
.immersive.game-live.combo-hot:not(.bonus-mode) .stage { border-color: #b6b4e5; box-shadow: 0 3px 0 #c4c9e7, 0 0 18px #b2bdf43b; }

/* Three reward rooms retain one board and one drag geometry. */
.immersive.bonus-mode { --reward-accent: #bf8b28; --reward-soft: #ffe5a75c; --reward-border: #edc96d; --reward-surface: #fff4d6e0; }
.immersive.bonus-mode[data-reward-kind="express"] {
  --reward-accent: #397ea4;
  --reward-soft: #8fdef45c;
  --reward-border: #8dcddd;
  --reward-surface: #e5f8fde0;
  background: radial-gradient(ellipse at 50% 42%, #effbff, #f6fbfd 65%, #f8faf5);
}
.immersive.bonus-mode[data-reward-kind="crossfire"] {
  --reward-accent: #b57844;
  --reward-soft: #ffc69c63;
  --reward-border: #e9ae94;
  --reward-surface: #fff0dfe0;
  background: radial-gradient(ellipse at 50% 42%, #fff1e5, #fff8f6 65%, #f8faf5);
}
.immersive.bonus-mode .reward-badge {
  max-width: calc(100% - 18px);
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--reward-accent);
}
.immersive.bonus-mode[data-reward-kind="express"] .stage {
  background: #dfeef4;
  border-color: #8dc5dd;
  box-shadow: 0 3px 0 #b1d3e3, 0 8px 30px #65afd11f, 0 0 0 4px #95dff31a;
}
.immersive.bonus-mode[data-reward-kind="crossfire"] .stage {
  background: #f0e2dd;
  border-color: #d8ae95;
  box-shadow: 0 3px 0 #dfc2aa, 0 8px 30px #d595751f, 0 0 0 4px #efb6a01a;
}
.immersive.game-live.bonus-mode[data-reward-kind="express"] .stage { animation: express-stage 1.15s ease-in-out infinite; }
.immersive.game-live.bonus-mode[data-reward-kind="crossfire"] .stage { animation: crossfire-stage 1.5s ease-in-out infinite; }
.immersive.bonus-mode[data-reward-kind="express"] .reward-banner { background: #eafaffd6; }
.immersive.bonus-mode[data-reward-kind="crossfire"] .reward-banner { background: #fff0dfd6; }
.immersive.bonus-mode .reward-banner strong,
.immersive.bonus-mode .reward-emblem { color: var(--reward-accent); }
.immersive.bonus-mode .reward-emblem { text-shadow: 0 3px 0 #fff7e7, 0 0 35px var(--reward-soft); }
.immersive.bonus-mode[data-reward-kind="express"] .reward-banner > span:last-child { color: #6796a7; }
.immersive.bonus-mode[data-reward-kind="crossfire"] .reward-banner > span:last-child { color: #ac876f; }
.immersive.game-live.bonus-mode .reward-badge { background: var(--reward-surface); border-color: var(--reward-border); }
.immersive.bonus-mode[data-reward-kind="express"] .rush-track { background: #cce5ed; }
.immersive.bonus-mode[data-reward-kind="crossfire"] .rush-track { background: #ead7c7; }
.immersive.bonus-mode[data-reward-kind="express"] #charge-count { color: #397ea4; }
.immersive.bonus-mode[data-reward-kind="crossfire"] #charge-count { color: #b57844; }
.immersive.game-live.bonus-mode[data-reward-kind="express"] .rush-track > span { background: linear-gradient(90deg, #50bdd2, #b7f0ff, #88c7ff); box-shadow: 0 0 8px #79dcef80; }
.immersive.game-live.bonus-mode[data-reward-kind="crossfire"] .rush-track > span { background: linear-gradient(90deg, #e9a058, #ffe094, #f6a6aa); }
.immersive.bonus-mode[data-reward-kind="express"] .tray-piece[aria-pressed=true] { background: radial-gradient(ellipse at 50% 40%, #bdeaf580, transparent 68%); }
.immersive.bonus-mode[data-reward-kind="crossfire"] .tray-piece[aria-pressed=true] { background: radial-gradient(ellipse at 50% 40%, #fad29d80, transparent 68%); }
.immersive.bonus-mode[data-reward-kind="express"] .stage.clear-single .arcade-clear-wash::before,
.immersive.bonus-mode[data-reward-kind="express"] .stage.clear-multi .arcade-clear-wash::before,
.immersive.bonus-mode[data-reward-kind="express"] .stage.clear-streak .arcade-clear-wash::before { background: radial-gradient(ellipse at center, #d5faff7d, #a8eafa28 52%, transparent 85%); }
.immersive.bonus-mode[data-reward-kind="crossfire"] .stage.clear-single .arcade-clear-wash::before,
.immersive.bonus-mode[data-reward-kind="crossfire"] .stage.clear-multi .arcade-clear-wash::before,
.immersive.bonus-mode[data-reward-kind="crossfire"] .stage.clear-streak .arcade-clear-wash::before { background: radial-gradient(ellipse at center, #fff0c780, #ffb9a32b 52%, transparent 85%); }
.immersive.bonus-mode[data-reward-kind="express"] .arcade-clear-wash::after { border-color: #b8f4ff; box-shadow: 0 0 30px #86daec99, inset 0 0 20px #effcff70; }
.immersive.bonus-mode[data-reward-kind="crossfire"] .arcade-clear-wash::after { border-color: #ffe6ad; box-shadow: 0 0 30px #ffbba099, inset 0 0 20px #fff4c670; }
.immersive .stage.reward-enter { animation: none; }
.immersive.game-live.bonus-mode.reward-intro .stage,
.immersive.game-live.bonus-mode .stage.reward-intro { animation: reward-intro-glow .8s ease-out both; }
.immersive:not(.game-live) .stage.reward-enter,
.immersive:not(.game-live) .stage.reward-intro { animation: none; }
.immersive.reward-intro .reward-banner,
.immersive .stage.reward-intro .reward-banner { transition-duration: .12s; backdrop-filter: blur(2px); }

.immersive.bonus-mode .puzzle-cell.reward-target {
  position: relative;
  background: var(--reward-soft);
  border-color: transparent;
}
.immersive.bonus-mode .puzzle-cell.reward-target-corner::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  width: 100px;
  height: 100px;
  z-index: 1;
  border: 3px solid var(--reward-border);
  border-radius: 7px;
  box-shadow: inset 0 0 12px #ffffff7d, 0 0 9px var(--reward-soft);
  pointer-events: none;
}
.immersive.bonus-mode .puzzle-cell.reward-target-corner::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 7px;
  width: 10px;
  height: 10px;
  z-index: 1;
  background: var(--reward-accent);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  opacity: .75;
  pointer-events: none;
}
.immersive.game-live.bonus-mode .puzzle-cell.reward-target-corner::before { animation: reward-target-glow 1.15s ease-in-out infinite; }
.immersive.bonus-mode .puzzle-cell.reward-target.will-clear { background: #fff4b98a; }
.immersive.bonus-mode[data-reward-kind="express"] .puzzle-cell.will-clear { background: #b6edfc70; border-color: #defaff70; }
.immersive.bonus-mode.time-low #charge-count { color: #bc643a; }

/* Line topology is separate from the announcer's combo tier. The strongest
   sweep stays in the 3D grid; this light frame never covers the next move. */
.stage[data-clear-topology][data-clear-axis] .arcade-clear-wash::before {
  animation: arcade-flash calc(.28s + var(--clear-strength, .2) * .24s) ease-out;
}
.stage[data-clear-topology="single"][data-clear-axis] .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #dcf7ff38, #b6e1fb0a 60%, transparent 80%);
}
.stage[data-clear-topology="single"][data-clear-axis] .arcade-clear-wash::after {
  inset: 0;
  border-radius: inherit;
  border: 1px solid #b4e7f799;
  box-shadow: inset 0 0 8px #b3dfff22;
  animation: arcade-flash .3s ease-out;
}
.stage[data-clear-topology="single"][data-clear-axis="row"] .arcade-clear-wash::after { border-top-color: transparent; border-bottom-color: transparent; }
.stage[data-clear-topology="single"][data-clear-axis="column"] .arcade-clear-wash::after { border-left-color: transparent; border-right-color: transparent; }
.stage[data-clear-topology="multi"][data-clear-axis] .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #fff2b954, #ffe6b31a 54%, transparent 82%);
}
.stage[data-clear-topology="multi"][data-clear-axis] .arcade-clear-wash::after {
  inset: 13%;
  border-radius: 50%;
  border: calc(1px + var(--clear-strength, .4) * 3px) solid #fff1ba;
  box-shadow: 0 0 calc(10px + var(--clear-strength, .4) * 18px) #edc55b66, inset 0 0 12px #fff9df55;
  animation: arcade-ring calc(.38s + var(--clear-strength, .4) * .35s) cubic-bezier(.18,.68,.25,1) both;
}
.stage[data-clear-topology="cross"][data-clear-axis] .arcade-clear-wash::before {
  background: radial-gradient(ellipse at center, #fff3bc65, #ffc5a524 50%, transparent 82%);
}
.stage[data-clear-topology="cross"][data-clear-axis] .arcade-clear-wash::after {
  inset: 8%;
  border-radius: 28%;
  border: calc(1px + var(--clear-strength, .4) * 3px) solid #ffe7b2;
  box-shadow: 0 0 calc(10px + var(--clear-strength, .4) * 18px) #ffc3a766, inset 0 0 12px #fff4c055;
  animation: arcade-cross-ring calc(.38s + var(--clear-strength, .4) * .35s) cubic-bezier(.18,.68,.25,1) both;
}
.stage[data-clear-topology="cross"] .clear-toast { color: #bd7442; }
.stage[data-clear-topology="cross"] .clear-toast small { color: #a96438; }

@keyframes arcade-flash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes arcade-ring {
  0% { opacity: 0; transform: scale(.35); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.65); }
}
@keyframes arcade-cross-ring {
  0% { opacity: 0; transform: scale(.38) rotate(-4deg); }
  20% { opacity: .8; }
  100% { opacity: 0; transform: scale(1.42) rotate(4deg); }
}
@keyframes cheer-arrive {
  0% { opacity: 0; transform: translate(-50%, 10px) scale(.68) rotate(-4deg); }
  18% { opacity: 1; transform: translate(-50%, -2px) scale(var(--cheer-burst)) rotate(1deg); }
  34% { transform: translate(-50%, 0) scale(1) rotate(0); }
  73% { opacity: 1; transform: translate(-50%, -3px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -18px) scale(.98); }
}
@keyframes cheer-rays {
  0% { opacity: 0; scale: .6; }
  25% { opacity: .4; }
  100% { opacity: 0; scale: calc(2.3 * var(--cheer-burst)); }
}
@keyframes starlight-stage {
  0%,100% { box-shadow: 0 3px 0 #ddc783, 0 8px 30px #c7a6461e, 0 0 0 3px #efcf6b20; }
  50% { box-shadow: 0 3px 0 #ddc783, 0 8px 32px #efbe5540, 0 0 0 5px #efcf6b30; }
}
@keyframes express-stage {
  0%,100% { box-shadow: 0 3px 0 #b1d3e3, 0 8px 30px #65afd11f, 0 0 0 3px #95dff326; }
  50% { box-shadow: 0 3px 0 #b1d3e3, 0 8px 32px #70cce942, 0 0 0 5px #95dff32e; }
}
@keyframes crossfire-stage {
  0%,100% { box-shadow: 0 3px 0 #dfc2aa, 0 8px 30px #d595751f, 0 0 0 3px #efb6a024; }
  50% { box-shadow: 0 3px 0 #dfc2aa, 0 8px 32px #eeb17c40, 0 0 0 5px #efb6a032; }
}
@keyframes reward-intro-glow {
  0% { box-shadow: 0 3px 0 var(--reward-border), 0 0 0 2px var(--reward-soft); }
  35% { box-shadow: 0 3px 0 var(--reward-border), 0 0 36px 7px var(--reward-soft); }
  100% { box-shadow: 0 3px 0 var(--reward-border), 0 0 0 3px var(--reward-soft); }
}
@keyframes reward-target-glow {
  0%,100% { opacity: .8; box-shadow: inset 0 0 10px #ffffff66, 0 0 6px var(--reward-soft); }
  50% { opacity: 1; box-shadow: inset 0 0 13px #ffffff99, 0 0 12px var(--reward-soft); }
}

.immersive #arcade-menu-dialog {
  width: min(380px, calc(100vw - 24px));
  padding: 24px;
  border: 1px solid #e5e6df;
  border-radius: 26px;
  background: #fbfcf8;
  color: #344168;
  box-shadow: 0 28px 90px #2534572e;
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overscroll-behavior: contain;
}
.immersive #arcade-menu-dialog::backdrop {
  background: #26365245;
  backdrop-filter: blur(3px);
}
#arcade-menu-dialog .dialog-top { margin-bottom: 10px; }
#arcade-menu-dialog .dialog-top .eyebrow { color: #8590a4; }
#arcade-menu-dialog .dialog-top .icon-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  background: #edf0e9;
  border-radius: 50%;
}
#arcade-menu-title { font-size: 27px; letter-spacing: -.02em; margin: 0 0 18px; }
.arcade-menu-content { display: grid; gap: 18px; }
.arcade-menu-content > section:empty { display: none; }
.arcade-menu-content > section { min-width: 0; }
.immersive .arcade-menu-content .player-card {
  position: static;
  inset: auto;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #e7e9df;
  border-radius: 16px;
  background: #fff;
}
.immersive .arcade-menu-content .player-card > .eyebrow { display: none; }
.immersive .arcade-menu-content .player-card > button {
  width: 100%;
  min-height: 44px;
  max-width: none;
  padding: 0;
  justify-content: space-between;
  color: #435473;
  font-size: 15px;
}
.arcade-menu-content #player-name {
  max-width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}
.immersive .arcade-menu-content .player-card svg { width: 17px; height: 17px; }
.immersive .arcade-menu-content .connection {
  position: static;
  min-height: 20px;
  max-width: 100%;
  margin: 0;
  font-size: 10px;
  white-space: normal;
  color: #8993a4;
}
.immersive .arcade-menu-content .mode-bar {
  display: block;
  position: static;
  inset: auto;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
  transform: none;
  z-index: auto;
}
.immersive .arcade-menu-content .game-modes {
  width: 100%;
  border-radius: 16px;
  padding: 4px;
  background: #e9ede4;
}
.immersive .arcade-menu-content .game-modes button {
  min-height: 46px;
  flex: 1;
  padding: 8px;
  font-size: 12px;
  white-space: normal;
  border-radius: 13px;
}
.immersive .arcade-menu-content .game-modes [aria-pressed=true] { color: #4862c4; }
.arcade-menu-content .language-label { display: block; margin: 0; }
.arcade-menu-content .language-label select {
  width: 100%;
  max-width: none;
  height: 48px;
  padding: 0 13px;
  font-size: 14px;
  color: #50607b;
  background: #fff;
  border: 1px solid #e0e5da;
  border-radius: 13px;
}
#menu-actions-slot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.immersive .arcade-menu-content #menu-actions-slot > button,
.immersive .arcade-menu-content #view-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: auto;
  min-height: 48px;
  border: 1px solid #e5e9df;
  border-radius: 13px;
  padding: 10px 12px;
  background: #fff;
  box-shadow: none;
  color: #576780;
  font-size: 12px;
  text-align: start;
}
.arcade-menu-content #menu-actions-slot svg { width: 19px; height: 19px; flex-shrink: 0; }
.arcade-menu-content #menu-actions-slot .menu-label,
.arcade-menu-content #share-button > span { display: inline; min-width: 0; }
.arcade-menu-content #share-button { flex-direction: row-reverse; justify-content: flex-end !important; }
.arcade-menu-content #view-toggle .view-cube { margin-inline-start: auto; font-size: 22px; }
.immersive #menu-resume { width: 100%; margin-top: 22px; min-height: 48px; font-size: 14px; }
.arcade-menu-content #reward-demo { width:100%; min-height:48px; margin:0; padding:10px 12px; border:1px solid #ead8a5; border-radius:13px; background:#fff8e5; color:#a47721; font-size:12px; text-align:start; }
.arcade-menu-content #tilt-controls[hidden] { display:none; }
.arcade-menu-content #tilt-toggle { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:10px 12px; border:1px solid #e0e7f0; border-radius:13px; color:#576780; background:#fff; text-align:start; font-size:12px; }
#tilt-toggle svg { width:19px; height:22px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
#tilt-toggle-state { margin-inline-start:auto; color:#657de8; font-size:11px; font-weight:600; }
#tilt-toggle>span { min-width:0; flex:1; }
#tilt-toggle[aria-pressed=true] { border-color:#c7d4ff; background:#f3f6ff; }
#tilt-status { margin:9px 3px 0; font-size:11px; line-height:1.6; color:#7a89a2; }
#tilt-calibrate { margin-top:8px; min-height:40px; width:100%; border-radius:10px; border:1px solid #e8edf4; font-size:11px; color:#6b7fac; }

@media (max-width: 700px), (max-width: 1000px) and (orientation: landscape) and (max-height: 560px) {
  .immersive {
    --mobile-gap: 12px;
    --mobile-tray: 124px;
    --mobile-hud: 82px;
    --board-size: min(calc(100vw - 20px), calc(100dvh - 308px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    --fall-height: calc(100dvh - 252px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    --paper: #f8faf5;
    --ink: #314063;
    height: 100dvh;
    background: radial-gradient(ellipse at 50% 29%, #ffffff, #f8faf5 70%);
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .immersive .ambient-world { display: none; }
  .immersive.bonus-mode { background: radial-gradient(ellipse at 50% 42%, #fff6d8, #fffaf0 65%, #f8faf5); }
  .immersive .page {
    height: 100dvh;
    padding: 0 10px env(safe-area-inset-bottom);
  }
  .immersive .topbar {
    height: calc(56px + env(safe-area-inset-top));
    min-height: calc(56px + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 2px 0;
    align-items: center;
    gap: 6px;
  }
  .immersive .brand { font-size: 17px; gap: 7px; letter-spacing: .12em; }
  .immersive .brand small { display: none; }
  .immersive .shige-mark { font-size: 26px; color: #5a77da; filter: none; }
  .immersive .top-actions { gap: 1px; margin-inline-start: auto; }
  .immersive .topbar .player-card,
  .immersive .top-actions .language-label,
  .immersive .top-actions #sound-toggle,
  .immersive .top-actions #help-open,
  .immersive .top-actions #share-button,
  .immersive .page .mode-bar { display: none; }
  .immersive .top-actions #arcade-menu-open,
  .immersive .top-actions #quick-pause,
  .immersive .top-actions #leaderboard-open {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: #718094;
  }
  .immersive .top-actions #leaderboard-open { color: #b9994e; }
  .immersive .top-actions .icon-button svg { width: 21px; height: 21px; }
  .immersive .top-actions .icon-button:active { background: #e8ede3; transform: scale(.94); }
  .immersive #quick-pause:disabled { opacity: .3; }
  .immersive main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(0px, calc((100dvh - 680px) * .08), 20px) 0 0;
    min-height: 0;
  }
  .immersive.drag-mode .arena {
    width: var(--board-size);
    max-width: calc(100vw - 20px);
    gap: var(--mobile-gap);
    transform: none;
  }
  .immersive.drag-mode .left-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: var(--mobile-hud);
    height: var(--mobile-hud);
    gap: 10px;
  }
  .immersive.drag-mode .score-panel {
    position: relative;
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .immersive .score-panel > .eyebrow { display: none; }
  .immersive.drag-mode .score-number {
    display: block;
    font-size: clamp(48px, 15vw, 66px);
    line-height: 1;
    font-weight: 600;
    margin: 0;
    color: #35476d;
    letter-spacing: -.015em;
    text-shadow: 0 2px 0 #fff;
    font-variant-numeric: tabular-nums;
  }
  .immersive.drag-mode .best-line {
    position: absolute;
    top: -11px;
    inset-inline-start: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    margin: 0;
    color: #a48a50;
    font-size: 9px;
  }
  .immersive.drag-mode .best-line > span { display: none; }
  .immersive.drag-mode .best-line::before {
    content: '';
    width: 12px;
    height: 10px;
    background: #c3a45e;
    clip-path: polygon(0 15%, 27% 46%, 50% 0, 73% 46%, 100% 15%, 90% 100%, 10% 100%);
  }
  .immersive.drag-mode .best-line strong { font: 600 14px/1 var(--mono); color: #a38a50; }
  .immersive .charge-hud {
    position: relative;
    width: 124px;
    max-width: none;
    height: 10px;
    margin: 0;
  }
  .immersive .charge-heading,
  .immersive #charge-hint { display: none; }
  .immersive .charge-track { margin: 0; gap: 6px; }
  .immersive .charge-track i { height: 5px; background: #e0e6df; border-radius: 5px; }
  .immersive .charge-track i.lit { background: #91a3eb; box-shadow: 0 0 10px #7898f147; }
  .immersive.rush-mode .charge-hud { height: 28px; width: 148px; margin-top: -5px; }
  .immersive.rush-mode .charge-heading { display: flex; justify-content: center; height: 19px; }
  .immersive.rush-mode #charge-label { display: none; }
  .immersive.rush-mode #charge-count { font: 600 18px/1 var(--mono); color: #a67421; }
  .immersive .rush-track { height: 4px; margin: 5px 0 0; background: #eadfb9; }
  .immersive.time-low #charge-count { color: #ba6b30; }
  .immersive .stage-top,
  .immersive .stage-tools,
  .immersive .stage-full,
  .immersive .puzzle-tray-section > p,
  .immersive .piece-slot-index { display: none; }
  .immersive .play-column { display: flex; gap: 0; width: 100%; }
  .immersive.drag-mode .stage {
    width: var(--board-size);
    height: var(--board-size);
    aspect-ratio: 1;
    border-radius: 13px;
    border: 1px solid #c5d0dd;
    background: #dce4ed;
    box-shadow: 0 3px 0 #cad4df, 0 12px 24px #40567511, inset 0 1px 0 #fff;
    flex-shrink: 0;
    isolation: isolate;
  }
  .immersive.drag-mode #game-canvas { border-radius: 12px; }
  .immersive.bonus-mode .stage {
    background: #efe7cd;
    border-color: #ddc16f;
    box-shadow: 0 3px 0 #ddc783, 0 8px 30px #c7a6461e, 0 0 0 4px #efcf6b17;
  }
  .immersive .puzzle-cell.will-clear { background: #f3d16661; border-color: #ffe9a066; }
  .immersive .puzzle-tray-section { margin: 14px 0 0; }
  .immersive .puzzle-tray {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    gap: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .immersive .tray-piece {
    height: var(--mobile-tray);
    min-height: var(--mobile-tray);
    border-radius: 18px;
    padding: 16px 4px 28px;
    --piece-size: clamp(19px, 5.5vw, 25px);
    background: transparent;
    touch-action: none;
  }
  .immersive .tray-piece:hover:not(:disabled) { background: transparent; }
  .immersive .tray-piece[aria-pressed=true] {
    background: radial-gradient(ellipse at 50% 40%, #e2e9fc8c, transparent 68%);
    box-shadow: none;
  }
  .immersive.bonus-mode .tray-piece[aria-pressed=true] {
    background: radial-gradient(ellipse at 50% 40%, #f7db8a78, transparent 68%);
    box-shadow: none;
  }
  .immersive .tray-shape { filter: drop-shadow(0 5px 1px #3a517326); }
  .immersive .tray-shape i {
    margin: .6px;
    border-radius: 4px;
    box-shadow: inset 2px 3px 0 #ffffff82, inset -2px -4px 0 #18233726;
  }
  .immersive .used-piece { font-size: 20px; color: #ccd6c8; opacity: .5; }
  .immersive .tray-piece:disabled { opacity: .5; }
  .immersive .tray-piece.drag-source { opacity: .14; }
  .immersive .overlay {
    padding: 22px;
    border-radius: 12px;
    background: #f6f8f0e6;
    backdrop-filter: blur(1.5px);
  }
  .immersive .overlay-inner { max-width: 270px; }
  .immersive .overlay h2 { font-size: 28px !important; line-height: 1.25 !important; letter-spacing: -.035em; }
  .immersive .overlay p {
    display: block;
    font-size: 11px;
    line-height: 1.65;
    margin: 12px auto 18px;
    max-width: 225px;
    color: #7b8ba0;
  }
  .immersive .tiny-mark {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin-bottom: 15px;
    background: #fff0bf;
    border: 1px solid #efdc9b;
    box-shadow: 0 4px 0 #efe0b6;
  }
  .immersive .overlay .primary-button {
    min-height: 49px;
    min-width: 166px;
    font-size: 14px;
    border-radius: 16px;
  }
  .immersive .overlay small { display: none; }
  .immersive .reward-demo { min-height: 44px; margin-top: 8px; font-size: 10px; }
  .immersive .reward-banner { border-radius: 12px; backdrop-filter: blur(2px); gap: 9px; }
  .immersive .reward-emblem { font-size: 54px; }
  .immersive .reward-banner strong { font-size: 26px; }
  .immersive .reward-banner > span:last-child { font-size: 10px; max-width: 230px; line-height: 1.65; }
  .immersive .reward-badge { top: 6px; font-size: 8px; padding: 5px 10px; opacity: .85; }
  .immersive .clear-toast { top: 31%; font-size: 27px; font-weight: 700; }
  .immersive .clear-toast small { font-size: 46px; margin-top: 5px; }
  .immersive .time-toast { bottom: 17%; font-size: 16px; padding: 8px 16px; }
  .immersive.touch-dragging .reward-badge { opacity: .3; }
  .immersive dialog { border-radius: 23px; background: #fbfcf8; max-height: calc(100dvh - 28px); }
  .immersive dialog::backdrop { backdrop-filter: blur(3px); background: #3a4e6647; }
  .immersive dialog .icon-button { width: 44px; height: 44px; min-height: 44px; }
  .immersive .toast { bottom: max(16px, env(safe-area-inset-bottom)); }
  .immersive:not(.drag-mode) .arena {
    width: min(290px, calc(var(--fall-height) * .58), calc(100vw - 110px));
    min-width: 160px;
    transform: translateX(-32px);
    gap: 8px;
  }
  .immersive:not(.drag-mode) .left-panel { min-height: 53px; height: 53px; gap: 8px; }
  .immersive:not(.drag-mode) .score-number { font-size: 35px; }
  .immersive:not(.drag-mode) .score-panel { gap: 8px; }
  .immersive:not(.drag-mode) .best-line { display: none; }
  .immersive:not(.drag-mode) .stage { height: var(--fall-height); border-radius: 13px; }
  .immersive:not(.drag-mode) .overlay { padding: 14px; }
  .immersive:not(.drag-mode) .overlay h2 { font-size: 24px !important; }
  .immersive:not(.drag-mode) .overlay .primary-button { min-width: 135px; font-size: 12px; }
  .immersive:not(.drag-mode) .mobile-pieces {
    top: 95px;
    left: calc(100% + 10px);
    width: 77px;
    background: transparent;
    padding: 5px;
    gap: 20px;
  }
  .immersive:not(.drag-mode) .touch-controls { grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }
  .immersive:not(.drag-mode) .touch-controls button { min-height: 44px; border-radius: 12px; background: #fff; }
  .immersive:not(.drag-mode) .touch-controls button:last-child { background: #657ed9; }
}

@media (max-width: 700px) and (max-height: 670px), (max-width: 1000px) and (orientation: landscape) and (max-height: 560px) {
  .immersive { --board-size: min(calc(100vw - 20px), calc(100dvh - 252px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
  .immersive { --mobile-tray: 108px; --mobile-hud: 70px; --mobile-gap: 8px; }
  .immersive .topbar { height: calc(52px + env(safe-area-inset-top)); min-height: calc(52px + env(safe-area-inset-top)); }
  .immersive.drag-mode .score-number { font-size: 48px; }
  .immersive.drag-mode .score-panel { min-height: 48px; }
  .immersive.drag-mode .best-line { top: -4px; }
  .immersive .puzzle-tray-section { margin-top: 10px; }
  .immersive .tray-piece { padding: 12px 4px 20px; --piece-size: clamp(18px, 5.5vw, 23px); }
  .immersive .overlay { padding: 14px; }
  .immersive .overlay h2 { font-size: 24px !important; }
  .immersive .overlay p { margin: 8px auto 13px; font-size: 10px; line-height: 1.5; }
  .immersive .tiny-mark { display: none; }
  .immersive .overlay .primary-button { min-height: 45px; }
  .immersive .reward-demo { margin-top: 3px; min-height: 40px; }
  .immersive .reward-banner strong { font-size: 22px; }
  .immersive .reward-emblem { font-size: 40px; }
  .immersive .clear-toast { font-size: 23px; }
  .immersive .clear-toast small { font-size: 38px; }
}

@media (max-width: 1000px) and (orientation: landscape) and (max-height: 560px) {
  .immersive { --board-size: min(350px, calc(100dvh - 84px - env(safe-area-inset-top) - env(safe-area-inset-bottom))); --mobile-hud: 45px; }
  .immersive main { padding-top: 0; justify-content: center; }
  .immersive.drag-mode .arena { width: calc(var(--board-size) + 118px); max-width: calc(100vw - 20px); gap: 5px; }
  .immersive.drag-mode .left-panel { position: absolute; left: auto; inset-inline-start: calc(var(--board-size) + 10px); top: -9px; width: 108px; height: 52px; min-height: 52px; gap: 5px; }
  .immersive.drag-mode .score-panel { min-height: 30px; }
  .immersive.drag-mode .score-number { font-size: 32px; }
  .immersive.drag-mode .best-line { display: none; }
  .immersive .charge-hud { width: 86px; }
  .immersive.rush-mode .charge-hud { width: 100px; height: 18px; }
  .immersive.rush-mode .charge-heading { height: 15px; }
  .immersive.rush-mode #charge-count { font-size: 14px; }
  .immersive .rush-track { margin-top: 2px; height: 3px; }
  .immersive.drag-mode .play-column { display: grid; grid-template-columns: var(--board-size) 108px; gap: 10px; }
  .immersive.drag-mode .stage { grid-column: 1; grid-row: 1; }
  .immersive .puzzle-tray-section { grid-column: 2; grid-row: 1; margin-top: 51px; }
  .immersive .puzzle-tray { grid-template-columns: 1fr; gap: 0; }
  .immersive .tray-piece { min-height: calc((var(--board-size) - 51px) / 3); height: calc((var(--board-size) - 51px) / 3); padding: 5px; --piece-size: 16px; }
  .immersive:not(.drag-mode) .arena { width: min(420px, calc(100vw - 30px)); transform: none; }
  .immersive:not(.drag-mode) .left-panel { height: 40px; min-height: 40px; }
  .immersive:not(.drag-mode) .play-column { display: grid; grid-template-columns: minmax(130px, 1fr) 150px; gap: 8px 14px; }
  .immersive:not(.drag-mode) .stage { height: calc(100dvh - 106px); grid-column: 1; grid-row: 1 / 3; }
  .immersive:not(.drag-mode) .mobile-pieces { position: static; grid-column: 2; width: auto; flex-direction: row; }
  .immersive:not(.drag-mode) .touch-controls { grid-column: 2; margin-top: 2px; }
}

@media (min-width: 1001px) and (orientation: landscape) and (max-height: 560px) {
  .immersive { --board-size: min(360px, calc(100dvh - 114px)); --fall-height: calc(100dvh - 116px); }
  .immersive .ambient-world { opacity: .35; }
  .immersive .topbar { height: 52px; min-height: 52px; padding-top: 3px; gap: 10px; align-items: center; }
  .immersive .brand { font-size: 16px; gap: 6px; }
  .immersive .brand small { display: none; }
  .immersive .shige-mark { font-size: 26px; }
  .immersive .topbar .player-card { position: relative; top: auto; inset-inline-start: auto; max-width: 120px; height: 42px; border-inline-start: 1px solid #dce4f2; padding-inline-start: 8px; }
  .immersive .topbar .player-card > button { min-height: 42px; max-width: 110px; font-size: 9px; }
  .immersive .topbar .connection { inset-inline-start: 8px; font-size: 7px; }
  .immersive .top-actions { gap: 0; }
  .immersive .top-actions .icon-button, .immersive .top-actions .share-button { width: 44px; height: 44px; }
  .immersive .language-label select { width: 72px; font-size: 9px; }
  .immersive .mode-bar { top: 8px; width: 162px; }
  .immersive .game-modes { width: 100%; padding: 3px; }
  .immersive .game-modes button { min-height: 31px; font-size: 9px; padding-inline: 8px; flex: 1; }
  .immersive .arena { width: calc(var(--board-size) + 142px); gap: 4px; }
  .immersive .left-panel { min-height: 42px; }
  .immersive .score-number { font-size: 31px; }
  .immersive .play-column { display: grid; grid-template-columns: var(--board-size) 130px; gap: 10px 12px; }
  .immersive .stage-top { display: none; }
  .immersive .stage { grid-column: 1; grid-row: 1 / 4; border-radius: 14px; }
  .immersive .puzzle-tray-section { grid-column: 2; grid-row: 1; margin: 0; }
  .immersive .puzzle-tray { grid-template-columns: 1fr; background: transparent; box-shadow: none; }
  .immersive .tray-piece { height: calc((var(--board-size) - 54px) / 3); min-height: calc((var(--board-size) - 54px) / 3); background: #ffffff65; --piece-size: 14px; }
  .immersive .puzzle-tray-section > p { display: none; }
  .immersive .stage-tools { grid-column: 2; grid-row: 2; min-height: 44px; flex-wrap: wrap; gap: 6px; }
  .immersive .stage-tools button { min-height: 44px; }
  .immersive .stage-full { display: none; }
}

@media (max-width:700px) and (max-height:480px) and (orientation:portrait) {
  .immersive .overlay h2,.immersive .overlay p,.immersive .tiny-mark { display:none; }
  .immersive .overlay .primary-button { min-height:44px; margin:0; }
}
@media (prefers-reduced-motion: reduce) {
  .arcade-clear-wash::before,
  .arcade-clear-wash::after { animation: none !important; opacity: 0 !important; }
  .immersive .stage.reward-enter { animation: none !important; }
  .immersive.game-live.bonus-mode .stage { animation: none !important; }
  .immersive.game-live .stage.reward-intro,
  .immersive.game-live.bonus-mode .puzzle-cell.reward-target-corner::before { animation: none !important; }
  #cheer-callout.show { animation: none !important; opacity: 1; transform: translateX(-50%) !important; }
  #cheer-callout::before,
  #cheer-callout::after { display: none !important; }
  .immersive .tray-piece,
  .immersive .top-actions .icon-button { transition: none !important; }
}