@media (min-width:700px) and (max-height:850px) {
  .tg-app { padding-top:4px; }
  .tg-header { height:70px; }
  .tg-title { max-height:66px; }
  .tg-scene { margin-top:0; }
  .tg-cabinet { width:min(100%,500px); }
  .tg-status { width:min(100%,500px); margin-top:5px; }
  .tg-controls { margin-top:5px; }
  .tg-message { margin-bottom:2px; }
  .tg-multiplier-window { height:300px; }
  .tg-multiplier-strip { grid-auto-rows:100px; }
}

/* Keep game feedback accessible without placing text above the artwork. */
.tg-message {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}
.tg-scene { margin-top:42px; }

/* V2: use the delivered control artwork and keep the visual multiplier reel
   inside the cabinet. The server still settles three symbol reels only. */
.tg-cabinet {
  display:block;
  width:min(100%,590px);
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.tg-main-reels { aspect-ratio:1.18/1; }
.tg-reel-window {
  inset:8% 7.5%;
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  gap:5px;
  padding:3px;
  background:linear-gradient(180deg,#160c05,#050301);
  box-shadow:inset 0 0 24px #000;
}
.tg-symbol-grid {
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  overflow:hidden;
}
.tg-multiplier-panel {
  position:relative;
  min-width:0;
  padding-top:0;
  border-left:1px solid #d9a53d88;
  background:none;
  overflow:hidden;
}
.tg-multiplier-panel>strong {
  position:absolute;
  z-index:3;
  top:5px;
  left:0;
  right:0;
  margin:0;
  font-size:8px;
  text-shadow:0 1px 3px #000;
}
.tg-multiplier-window {
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
.tg-multiplier-strip { grid-auto-rows:33.333%; height:100%; }
.tg-medallion { overflow:hidden; background:none; }
.tg-medallion img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); }
.tg-medallion-glow {
  position:absolute;
  inset:0;
  opacity:0;
  mix-blend-mode:screen;
  transition:opacity .2s;
  pointer-events:none;
}
.tg-medallion.is-selected .tg-medallion-glow { opacity:.72; animation:tg-25-glow .7s ease-in-out infinite alternate; }
@keyframes tg-25-glow { to { opacity:1; filter:brightness(1.35) saturate(1.2); } }
.tg-win-fx { right:auto; width:64%; }
.tg-frame { inset:-3%; width:106%; height:106%; }

.tg-art-button {
  position:relative;
  border:0!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  box-shadow:none!important;
  filter:drop-shadow(0 5px 5px #000a);
  transition:transform .12s,filter .12s;
}
.tg-art-button:hover:not(:disabled) { filter:drop-shadow(0 5px 7px #000c) brightness(1.1); }
.tg-art-button:active:not(:disabled) { transform:translateY(2px) scale(.97); }
.tg-art-button span,.tg-art-button b { opacity:0; }
.tg-bet-minus { background-image:url('/assets/temple-gems/controls/Button_Set_BET_MINUS_button_transparent.png')!important; }
.tg-bet-plus { background-image:url('/assets/temple-gems/controls/Button_Set_BET_PLUS_button.png')!important; }
.tg-spin { background-image:url('/assets/temple-gems/controls/Button_Set_SPIN_button_transparent.png')!important; }

@media(max-width:560px) {
  .tg-scene { margin-top:34px; }
  .tg-cabinet { padding:0; }
  .tg-main-reels { aspect-ratio:1.12/1; }
  .tg-reel-window { grid-template-columns:minmax(0,3fr) minmax(0,1fr); gap:2px; }
  .tg-multiplier-panel { padding-top:0; }
  .tg-multiplier-panel>strong { font-size:6px; }
  .tg-multiplier-strip { grid-auto-rows:33.333%; height:100%; }
}

@media (min-width:700px) and (max-height:850px) {
  .tg-cabinet { width:min(100%,500px); }
  .tg-main-reels { aspect-ratio:1.2/1; }
  .tg-status { width:min(100%,500px); }
}

/* V4 simplified play controls. */
.tg-controls {
  grid-template-columns:minmax(0,1fr) 98px 74px;
  gap:6px;
  width:min(100%,500px);
  margin-top:4px;
}
.tg-bet-area {
  min-width:0;
  display:grid;
  grid-template-columns:52px minmax(72px,1fr) 52px;
  align-items:center;
  gap:7px;
  min-height:58px;
  padding:4px 6px;
  border:1px solid #9f742f;
  border-radius:14px;
  background:linear-gradient(180deg,#211407ee,#0d0803ee);
}
.tg-bet-area>button { width:52px; height:52px; padding:0; }
.tg-bet-area .tg-art-button span {
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:1;
  color:#3a1a00;
  font:900 24px/1 Georgia,serif;
  text-shadow:0 1px #fff0a0,0 0 4px #ffc43d;
}
.tg-bet-heading { text-align:center; }
.tg-bet-heading small { display:block; color:#c7aa70; font-size:8px; letter-spacing:.16em; }
.tg-bet-heading strong { display:block; color:#ffe18b; font-size:16px; }
.tg-bet-values { display:flex; align-items:center; justify-content:center; gap:5px; min-width:0; }
.tg-bet-values button {
  flex:1 1 0;
  min-width:0;
  height:38px;
  padding:0 3px;
  border:1px solid #a87832;
  border-radius:999px;
  background:linear-gradient(#432c11,#1a0f05);
  color:#f7d982;
  font:800 11px Georgia,serif;
  box-shadow:inset 0 1px #fff1a530;
}
.tg-bet-values button.active { color:#251100; border-color:#ffe48a; background:linear-gradient(#ffe991,#c58622); box-shadow:0 0 12px #ffc84988; }
.tg-spin { width:98px; height:76px; }
.tg-auto {
  width:74px;
  height:58px;
  padding:4px;
  border:2px solid #c89532;
  border-radius:11px;
  background:linear-gradient(180deg,#765019,#291605);
  color:#ffeaa3;
  box-shadow:inset 0 1px #fff3a855,0 5px 10px #0008;
  font-family:Georgia,serif;
  cursor:pointer;
}
.tg-auto span { display:block; font-size:14px; font-weight:900; letter-spacing:.08em; }
.tg-auto small { display:block; margin-top:2px; color:#d5ae69; font-size:6px; font-weight:700; line-height:1.05; }
.tg-auto.active { border-color:#72ffe7; color:#fff; background:linear-gradient(180deg,#8c6820,#3e2606); box-shadow:inset 0 1px #fff8,0 0 14px #45f2d0; }
.tg-status { margin-top:4px; }
.tg-status>div { padding:5px; }

@media(max-width:560px) {
  .tg-controls { grid-template-columns:minmax(0,1fr) 78px 60px; gap:4px; }
  .tg-bet-area { grid-template-columns:42px minmax(58px,1fr) 42px; gap:3px; padding:4px; min-height:54px; }
  .tg-bet-area>button { width:42px; height:42px; }
  .tg-bet-heading strong { font-size:12px; }
  .tg-bet-values { gap:2px; }
  .tg-bet-values button { height:32px; font-size:8px; }
  .tg-spin { width:78px; height:62px; }
  .tg-auto { width:60px; height:48px; padding:3px; border-radius:9px; }
  .tg-auto span { font-size:11px; }
  .tg-auto small { font-size:5px; }
}