.game-page-intro {
  margin: 0 auto 14px;
  border: 1px solid rgba(124, 219, 255, 0.46);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 20%, rgba(128, 233, 255, 0.16), transparent 50%),
    linear-gradient(180deg, rgba(9, 36, 62, 0.92), rgba(6, 20, 38, 0.9));
  box-shadow: 0 16px 34px rgba(2, 12, 27, 0.45);
  padding: 16px 18px;
}

.game-page-intro h1 {
  margin: 0 0 8px;
  font-size: clamp(1.55rem, 3.1vw, 2.25rem);
}

.game-page-intro p {
  margin: 0;
  color: #c3e1f2;
}

.game-intro-tags {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.game-intro-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(132, 218, 248, 0.45);
  background: rgba(9, 41, 70, 0.78);
  color: #e3f5ff;
  font-size: .72rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.game-blog-section {
  border: 1px solid rgba(123, 221, 255, 0.36);
  border-radius: 20px;
  padding: clamp(16px, 2.5vw, 26px);
  background:
    radial-gradient(circle at 12% 14%, rgba(125, 231, 255, 0.14), transparent 42%),
    radial-gradient(circle at 86% 78%, rgba(196, 150, 255, 0.14), transparent 46%),
    linear-gradient(180deg, rgba(8, 30, 52, 0.92), rgba(5, 20, 38, 0.92));
  box-shadow: 0 16px 36px rgba(2, 10, 24, 0.45);
}

.game-blog-grid {
  margin-top: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.game-blog-grid .glass-card {
  height: 100%;
  padding: 18px 16px;
  border: 1px solid rgba(127, 219, 255, 0.32);
  border-radius: 16px;
  background:
    linear-gradient(160deg, rgba(9, 42, 71, 0.78), rgba(8, 24, 42, 0.78)),
    rgba(8, 24, 42, 0.7);
}

.game-blog-grid h3 {
  margin: 0 0 10px;
  color: #ecf8ff;
  font-size: 1.08rem;
}

.game-blog-grid p {
  margin: 0 0 10px;
  color: #c9e8f7;
}

.game-blog-grid p:last-child {
  margin-bottom: 0;
}

.game-blog-grid .dot-list {
  margin: 0;
  padding-left: 18px;
}

.game-blog-grid .dot-list li {
  margin-bottom: 7px;
  color: #d4effc;
}

.game-blog-grid .dot-list li:last-child {
  margin-bottom: 0;
}

.game-blog-grid .link-chip {
  margin-top: 4px;
}

.comments-card {
  position: relative;
  overflow: hidden;
}

.comments-card::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 238, 255, 0.22), transparent 65%);
  pointer-events: none;
}

.player-comments {
  display: grid;
  gap: 10px;
}

.player-comment {
  border: 1px solid rgba(125, 217, 250, 0.34);
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(170deg, rgba(10, 50, 84, 0.72), rgba(8, 28, 50, 0.72));
}

.player-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .86rem;
  color: #e9fbff;
  border: 1px solid rgba(157, 237, 255, 0.72);
  background: radial-gradient(circle at 30% 28%, #76dfff, #1b5c88 68%);
}

.player-head strong {
  display: block;
  line-height: 1.1;
}

.player-role {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(167, 239, 255, 0.45);
  color: #b9ebff;
  font-size: .63rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.player-tag {
  font-size: .67rem;
  color: #9fcce0;
  letter-spacing: .03em;
  white-space: nowrap;
}

.player-comment p {
  margin: 0 0 8px;
  color: #d9effb;
}

.player-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: .68rem;
  color: #a8d7ea;
}

.slots-stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(2, 12, 24, 0.65);
  border: 2px solid rgba(123, 229, 255, 0.72);
  background: radial-gradient(circle at 50% 12%, #12395f, #071524 70%);
}

#slotsCanvas {
  display: block;
  width: 100%;
  height: auto;
}

.slots-overlay {
  position: absolute;
  right: 18px;
  top: 48%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}

.slots-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(176, 244, 255, 0.82);
  background: radial-gradient(circle at 30% 25%, #3eb5de, #154b73 68%);
  color: #ecfdff;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 10px 22px rgba(0, 16, 30, 0.5);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.slots-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 26px rgba(0, 18, 34, 0.58), 0 0 14px rgba(130, 237, 255, 0.56);
}

.slots-btn:active {
  transform: scale(0.97);
}

.slots-btn.active {
  filter: saturate(1.2);
  box-shadow: 0 0 0 2px rgba(144, 240, 255, 0.54), 0 0 16px rgba(132, 234, 255, 0.68);
}

.slots-btn.spin {
  position: absolute;
  right: 128px;
    bottom: 79px;
  width: 212px;
  height: 178px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  z-index: 3;
  transition: transform 0.12s ease, background-color 0.14s ease, box-shadow 0.18s ease;
}

.slots-btn.spin::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(135, 236, 255, 0);
  transition: box-shadow 0.18s ease, opacity 0.18s ease;
  opacity: 0.72;
  pointer-events: none;
}

.slots-btn.spin:hover::after {
  box-shadow: 0 0 0 3px rgba(135, 236, 255, 0.24);
}

.slots-btn.spin:active {
  transform: scale(0.96);
  background: rgba(3, 20, 36, 0.2);
}

.slots-btn.spin:active::after {
  box-shadow: 0 0 0 6px rgba(138, 233, 255, 0.3);
}

.slots-status {
  margin-top: 14px;
  border: 1px solid #72cde9;
  border-radius: 14px;
  background: linear-gradient(180deg, #0d2c45, #071626);
  color: #d7f7ff;
  padding: 12px 14px;
  font-weight: 700;
}

.slots-hud {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.slots-hud-item {
  border: 1px solid #76cde8;
  border-radius: 12px;
  background: linear-gradient(180deg, #10324f, #0a1e31);
  color: #d8f9ff;
  padding: 10px;
}

.slots-hud-item span {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  opacity: 0.88;
}

.slots-hud-item strong {
  font-size: 1.1rem;
}

.slots-btn.sound {
  position: absolute;
  right: 419px;
    bottom: 68px;
  width: 70px;
  height: 70px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: transparent;
  font-size: 0;
  z-index: 3;
  transition: transform 0.12s ease, background-color 0.14s ease, box-shadow 0.18s ease;
}

.slots-btn.sound::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(134, 235, 255, 0);
  transition: box-shadow 0.18s ease, opacity 0.18s ease;
  opacity: 0.72;
  pointer-events: none;
}

.slots-btn.sound:hover::after {
  box-shadow: 0 0 0 3px rgba(132, 236, 255, 0.25);
}

.slots-btn.sound:active {
  transform: scale(0.94);
  background: rgba(5, 20, 35, 0.2);
}

.slots-btn.sound:active::after {
  box-shadow: 0 0 0 5px rgba(129, 234, 255, 0.28);
}

.win-popup {
  position: fixed;
  inset: 0;
  background: rgba(2, 10, 20, 0.74);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 60;
}

.win-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.win-popup-card {
  width: min(92vw, 440px);
  border-radius: 20px;
  border: 2px solid #86e7ff;
  background: radial-gradient(circle at 30% 20%, #1f5e86, #081b2b 68%);
  color: #dbf8ff;
  padding: 22px 18px 18px;
  text-align: center;
  position: relative;
  box-shadow: 0 26px 50px rgba(0, 5, 12, 0.66), 0 0 26px rgba(128, 232, 255, 0.36);
  transform: scale(0.9) translateY(12px);
}

.win-popup.open .win-popup-card {
  animation: winPopIn 0.35s ease forwards;
}

.win-popup-kicker {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9feeff;
}

.win-popup h3 {
  margin: 6px 0 8px;
  font-size: 2rem;
  line-height: 1.04;
  color: #e8fbff;
}

.win-popup-text {
  margin: 0 0 16px;
  font-size: 1.05rem;
}

.win-popup-text strong {
  color: #8fe7ff;
  font-size: 1.28em;
}

.win-popup-btn {
  min-width: 140px;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #072033;
  background: linear-gradient(180deg, #b4f4ff, #66d8f1);
  box-shadow: 0 10px 20px rgba(0, 8, 16, 0.44);
  cursor: pointer;
}

.win-popup-burst {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}

.win-popup-burst span {
  position: absolute;
  width: 8px;
  height: 22px;
  border-radius: 99px;
  background: linear-gradient(180deg, #dbfbff, #7fe8ff);
  animation: confettiDrop 0.85s ease-out infinite;
}

.win-popup-burst span:nth-child(1) { left: 10%; top: 8%; transform: rotate(-20deg); animation-delay: 0.05s; }
.win-popup-burst span:nth-child(2) { left: 24%; top: -2%; transform: rotate(14deg); animation-delay: 0.15s; }
.win-popup-burst span:nth-child(3) { left: 39%; top: 4%; transform: rotate(28deg); animation-delay: 0.22s; }
.win-popup-burst span:nth-child(4) { right: 36%; top: 0%; transform: rotate(-20deg); animation-delay: 0.1s; }
.win-popup-burst span:nth-child(5) { right: 20%; top: 6%; transform: rotate(16deg); animation-delay: 0.18s; }
.win-popup-burst span:nth-child(6) { right: 8%; top: -4%; transform: rotate(-30deg); animation-delay: 0.28s; }

@keyframes winPopIn {
  from { transform: scale(0.9) translateY(12px); opacity: 0.2; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes confettiDrop {
  0% { opacity: 0.3; transform: translateY(-8px) rotate(0deg); }
  100% { opacity: 0.95; transform: translateY(18px) rotate(35deg); }
}

/* Crystal game shell + transparent hit boxes */
.canvas-shell {
  position: relative;
  width: min(100%, 1220px);
  margin: 0 auto;
  aspect-ratio: 1536 / 864;
  min-height: 520px;
  max-height: min(86vh, 940px);
  background: #1a1030;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid rgba(116, 205, 255, 0.45);
  box-shadow: 0 24px 60px rgba(4, 16, 42, 0.55);
}

.canvas-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 223, 138, 0.52), transparent 46%),
    radial-gradient(circle at 70% 70%, rgba(255, 188, 84, 0.36), transparent 44%),
    linear-gradient(135deg, rgba(255, 216, 120, 0.16), rgba(255, 168, 73, 0.12));
  mix-blend-mode: screen;
}

.canvas-shell.special-flash::before {
  animation: specialFlash .62s ease;
}

.canvas-shell canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 520px;
  background: #1a1030;
}

.overlay-hit {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hit-btn {
  position: absolute;
  pointer-events: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, box-shadow .16s ease;
  border-radius: 999px;
}

.hit-btn:hover { box-shadow: 0 0 0 2px rgba(160, 229, 255, 0.22), 0 0 16px rgba(101, 205, 255, 0.25); }
.hit-btn:active, .hit-btn.pressed { transform: scale(.94); }
.hit-btn.active { box-shadow: 0 0 0 3px rgba(110, 216, 255, 0.35); }

.crystal-hit .hit-btn.cast {
    left: 42.9%;
    bottom: 10%;
    width: 14.6%;
    height: 10%;
    border-radius: 60%;
}
.crystal-hit .hit-btn.focus {
    right: 7.5%;
    bottom: 9%;
    width: 6.4%;
    height: 10%;
    border-radius: 50%;
}
.crystal-hit .hit-btn.shuffle {
    left: 76.5%;
    bottom: 9%;
    width: 9%;
    height: 13%;
    border-radius: 50%;
}
.crystal-hit .hit-btn.sound {
    left: 4.2%;
    bottom: 5%;
    width: 20px;
    height: 20px;
}
.crystal-hit .hit-btn.menu {
    left: 8.5%;
    bottom: 9.8%;
    width: 6%;
    height: 8.4%;
    border-radius: 50%;
}
.crystal-hit .hit-btn.menu-alt {
    left: 1.3%;
    bottom: 5.5%;
    width: 20px;
    height: 16px;
    border-radius: 0;
}

.hud-strip {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.hud-strip div {
  border: 1px solid #3d77a0;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(14, 40, 68, 0.88), rgba(8, 24, 45, 0.88));
  color: #ddf7ff;
  padding: 10px;
}
.hud-strip span {
  display: block;
  font-size: .72rem;
  color: #8ec4e1;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.hud-strip strong { font-size: 1.08rem; }

.crystal-popup {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 25% 18%, rgba(255, 209, 115, 0.24), transparent 40%),
    radial-gradient(circle at 78% 76%, rgba(255, 179, 92, 0.18), transparent 42%),
    rgba(12, 8, 30, 0.76);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 80;
}

.crystal-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.crystal-popup-card {
  width: min(92vw, 430px);
  border-radius: 22px;
  border: 2px solid rgba(255, 216, 145, 0.95);
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 226, 150, 0.42), rgba(95, 40, 116, 0.9) 52%),
    linear-gradient(180deg, rgba(67, 24, 87, 0.96), rgba(24, 13, 47, 0.96));
  color: #fff4dc;
  padding: 22px 18px 18px;
  text-align: center;
  position: relative;
  box-shadow:
    0 30px 64px rgba(0, 7, 20, 0.66),
    0 0 34px rgba(255, 196, 98, 0.45),
    inset 0 0 22px rgba(255, 210, 126, 0.24);
  transform: scale(.9) translateY(12px);
}

.crystal-popup.open .crystal-popup-card { animation: crystalPopIn .34s ease forwards; }
.crystal-popup-kicker { margin: 0; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #ffdca1; text-shadow: 0 0 10px rgba(255, 200, 111, 0.4); }
.crystal-popup h3 { margin: 6px 0 8px; font-size: 2.1rem; line-height: 1.04; color: #fff0cc; text-shadow: 0 0 14px rgba(255, 190, 92, 0.5); }
.crystal-popup-text { margin: 0 0 16px; font-size: 1.02rem; }
.crystal-popup-text strong { color: #ffd788; font-size: 1.34em; text-shadow: 0 0 10px rgba(255, 200, 100, 0.46); }
.crystal-popup-btn {
  min-width: 140px;
  border: 0;
  border-radius: 999px;
  padding: 11px 20px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #3f2300;
  background: linear-gradient(180deg, #ffe4a5, #f0b85f);
  box-shadow: 0 10px 20px rgba(40, 15, 0, 0.42), 0 0 14px rgba(255, 208, 118, 0.5);
  cursor: pointer;
}

.crystal-popup-burst {
  position: absolute;
  inset: -12px;
  pointer-events: none;
}
.crystal-popup-burst span {
  position: absolute;
  width: 8px;
  height: 22px;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffe8b8, #ffc96f);
  animation: confettiDrop .85s ease-out infinite;
}
.crystal-popup-burst span:nth-child(1) { left: 10%; top: 8%; transform: rotate(-20deg); animation-delay: 0.05s; }
.crystal-popup-burst span:nth-child(2) { left: 24%; top: -2%; transform: rotate(14deg); animation-delay: 0.15s; }
.crystal-popup-burst span:nth-child(3) { left: 39%; top: 4%; transform: rotate(28deg); animation-delay: 0.22s; }
.crystal-popup-burst span:nth-child(4) { right: 36%; top: 0%; transform: rotate(-20deg); animation-delay: 0.1s; }
.crystal-popup-burst span:nth-child(5) { right: 20%; top: 6%; transform: rotate(16deg); animation-delay: 0.18s; }
.crystal-popup-burst span:nth-child(6) { right: 8%; top: -4%; transform: rotate(-30deg); animation-delay: 0.28s; }

@keyframes crystalPopIn {
  from { transform: scale(.9) translateY(12px); opacity: .2; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes specialFlash {
  0% { opacity: 0; }
  38% { opacity: 1; }
  100% { opacity: 0; }
}

.game-menu-popup {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(182, 122, 255, 0.22), transparent 38%),
    radial-gradient(circle at 80% 78%, rgba(121, 230, 255, 0.14), transparent 42%),
    rgba(14, 8, 30, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 90;
}
.game-menu-popup.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.game-menu-card {
  width: min(92vw, 390px);
  border-radius: 18px;
  border: 2px solid rgba(206, 155, 255, 0.82);
  background:
    radial-gradient(circle at 30% 18%, rgba(171, 91, 243, 0.72), rgba(35, 16, 66, 0.92) 56%),
    linear-gradient(180deg, rgba(56, 24, 86, 0.95), rgba(14, 10, 36, 0.95));
  color: #f4e9ff;
  padding: 20px 18px 18px;
  box-shadow: 0 24px 52px rgba(8, 2, 18, 0.68), 0 0 26px rgba(175, 113, 255, 0.35);
  text-align: center;
}
.game-menu-kicker {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ddb3ff;
}
.game-menu-card h3 {
  margin: 6px 0 14px;
  font-size: 1.7rem;
  color: #f8eaff;
}
.game-menu-actions {
  display: grid;
  gap: 10px;
}
.game-menu-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: .74rem;
  color: #290d43;
  background: linear-gradient(180deg, #f0cbff, #c992ff);
  box-shadow: 0 10px 20px rgba(24, 5, 42, 0.5), 0 0 14px rgba(210, 156, 255, 0.46);
  cursor: pointer;
}
.game-menu-btn.ghost {
  color: #edd9ff;
  border: 1px solid rgba(209, 156, 255, 0.62);
  background: rgba(42, 18, 72, 0.68);
  box-shadow: none;
}

.mage-figure {
  position: absolute;
  bottom: 7%;
  width: min(24vh, 24vw, 300px);
  opacity: 0;
  pointer-events: none;
  z-index: 86;
  filter: drop-shadow(0 16px 22px rgba(15, 5, 34, 0.58)) drop-shadow(0 0 18px rgba(188, 134, 255, 0.42));
}
.mage-figure.left {
  left: 0;
  transform: translateX(-88%) translateY(0) scale(.94);
}
.mage-figure.right {
  right: 0;
  transform: translateX(88%) translateY(0) scale(.94);
}
.mage-figure.intro.left {
  opacity: 1;
  transform: translateX(-2%) scale(1);
}
.mage-figure.intro.right {
  opacity: 1;
  transform: translateX(2%) scale(1);
}

.mage-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.mage-figure.show {
  animation: mageSlideInOutLeft 3.9s cubic-bezier(.23, .88, .25, 1) forwards;
}
.mage-figure.right.show {
  animation: mageSlideInOutRight 3.9s cubic-bezier(.23, .88, .25, 1) forwards;
}

@keyframes mageSlideInOutLeft {
  0% { opacity: 0; transform: translateX(-88%) scale(.94); }
  18% { opacity: 1; transform: translateX(-8%) scale(1); }
  66% { opacity: 1; transform: translateX(-2%) scale(1.02); }
  100% { opacity: 0; transform: translateX(-88%) scale(.95); }
}
@keyframes mageSlideInOutRight {
  0% { opacity: 0; transform: translateX(88%) scale(.94); }
  18% { opacity: 1; transform: translateX(8%) scale(1); }
  66% { opacity: 1; transform: translateX(2%) scale(1.02); }
  100% { opacity: 0; transform: translateX(88%) scale(.95); }
}

@media (max-width: 980px) {
  .game-page-intro {
    padding: 14px;
    margin-bottom: 10px;
  }

  .game-blog-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .game-blog-grid .glass-card {
    padding: 14px 13px;
  }

  .player-head {
    grid-template-columns: auto 1fr;
    gap: 8px;
  }

  .player-tag {
    grid-column: 1 / -1;
    margin-top: -2px;
  }

  .canvas-shell {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-height: none;
    height: 80vh;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .canvas-shell canvas { height: 100%; min-height: 0; }

  .slots-overlay {
    right: 8px;
    top: 46%;
    gap: 8px;
  }

  .slots-btn {
    width: 58px;
    height: 58px;
    font-size: 0.88rem;
  }

  .slots-btn.spin {
            right: 30px;
        bottom: 4px;
    width: 96px;
    height: 94px;
  }

  .slots-btn.sound {
    right: 133px;
        bottom: 14px;
    width: 36px;
    height: 36px;
  }

  .slots-hud {
    grid-template-columns: 1fr 1fr;
  }

  .win-popup h3 {
    font-size: 1.65rem;
  }

  .crystal-hit .hit-btn.cast { left: 41.2%; bottom: 6.1%; width: 19%; height: 8.9%; }
  .crystal-hit .hit-btn.focus { left: 31%; bottom: 8.3%; width: 10%; height: 8.1%; }
  .crystal-hit .hit-btn.shuffle { left: 18%; bottom: 8.3%; width: 10%; height: 8.1%; }
  .crystal-hit .hit-btn.sound { right: 10%; bottom: 8%; width: 9%; height: 11%; }
  .crystal-hit .hit-btn.menu { right: 3%; top: 3%; width: 14%; height: 10%; }
  .crystal-hit .hit-btn.menu-alt { left: 3%; top: 3%; width: 14%; height: 10%; }
  .mage-figure { width: clamp(117px, 27vw, 195px); bottom: 8%; }
  .mage-figure.intro.left { transform: translateX(-50%) scale(1); }
  .mage-figure.intro.right { transform: translateX(50%) scale(1); }
  .hud-strip { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .canvas-shell {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-height: none;
    height: 80vh;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .canvas-shell canvas { height: 100%; min-height: 0; transform: none; }

  .hud-strip {
    gap: 8px;
  }

  .hud-strip div {
    padding: 8px;
  }

  .hud-strip strong {
    font-size: 1rem;
  }

  .crystal-popup-card,
  .game-menu-card {
    width: min(94vw, 360px);
    padding: 18px 14px 14px;
  }

  .crystal-popup h3 {
    font-size: 1.7rem;
  }

      .crystal-hit .hit-btn.cast {
        left: 38.2%;
        bottom: 8.8%;
        width: 24%;
        height: 12%;
    }
  .crystal-hit .hit-btn.focus { left: 28.6%; bottom: 7.5%; width: 12%; height: 10%; }
  .crystal-hit .hit-btn.shuffle { left: 15%; bottom: 7.5%; width: 12%; height: 10%; }
  .crystal-hit .hit-btn.sound { right: 8.6%; bottom: 7.4%; width: 11%; height: 12%; }
  .crystal-hit .hit-btn.menu { right: 2%; top: 2.5%; width: 16%; height: 12%; }
  .crystal-hit .hit-btn.menu-alt { left: 2%; top: 2.5%; width: 16%; height: 12%; }

  .mage-figure {
    width: clamp(108px, 28.5vw, 177px);
    bottom: 7%;
  }
  .mage-figure.intro.left { transform: translateX(-50%) scale(1); }
  .mage-figure.intro.right { transform: translateX(50%) scale(1); }
}

@media (max-width: 560px) {
  .canvas-shell {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    border-width: 1px;
    border-radius: 0;
    height: 80vh;
    aspect-ratio: auto;
  }

  .canvas-shell canvas { height: 100%; min-height: 0; transform: none; }

  .slots-btn {
    width: 52px;
    height: 52px;
    font-size: 0.8rem;
  }

  .slots-hud {
    grid-template-columns: 1fr;
  }

  .hud-strip {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hud-strip span {
    font-size: .66rem;
  }

  .hud-strip strong {
    font-size: .95rem;
  }

  .crystal-popup h3 {
    font-size: 1.45rem;
  }

  .crystal-popup-text {
    font-size: .92rem;
  }

  .crystal-popup-btn {
    min-width: 120px;
    padding: 10px 16px;
    font-size: .68rem;
  }

  .game-menu-card h3 {
    font-size: 1.35rem;
  }

  .game-menu-btn {
    min-height: 40px;
    font-size: .68rem;
    padding: 9px 14px;
  }

   .crystal-hit .hit-btn.cast {
        left: 38.2%;
        bottom: 8.8%;
        width: 24%;
        height: 12%;
    }
  .crystal-hit .hit-btn.focus { left: 27.8%; bottom: 7.1%; width: 13%; height: 10.8%; }
  .crystal-hit .hit-btn.shuffle { left: 14%; bottom: 7.1%; width: 13%; height: 10.8%; }
  .crystal-hit .hit-btn.sound { right: 8%; bottom: 7%; width: 12%; height: 12.8%; }
  .crystal-hit .hit-btn.menu { right: 1.6%; top: 2%; width: 17%; height: 12.6%; }
  .crystal-hit .hit-btn.menu-alt { left: 1.6%; top: 2%; width: 17%; height: 12.6%; }

  .mage-figure {
    width: clamp(96px, 30vw, 144px);
    bottom: 5%;
  }
  .mage-figure.intro.left { transform: translateX(-50%) scale(1); }
  .mage-figure.intro.right { transform: translateX(50%) scale(1); }
}