/* HTML5 replacement for Slot_1.swf, added 2026-08-18 */

/* Reserve space up front, before JS populates it — the old <object width
   height> did this via HTML attributes with no JS involved, so the page
   never shifted. This div starts empty, so without a reserved size here the
   ~280px of content appears late and pushes everything below it down
   (visible as a "jump" during load). Width/min-height below match .s1-frame's
   actual rendered size 1:1 so the reserved box and the real content line up
   exactly and nothing shifts once JS runs. */
#slot1-game {
  display: block;
  width: 100%;
  max-width: 540px;
  min-height: 280px;
}
@media (max-width: 520px) {
  #slot1-game { min-height: 220px; }
}

.s1-frame {
  display: inline-block;
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
}
.s1-reels {
  display: flex;
  gap: 12px;
  justify-content: center;
  background: #0a0a0a;
  border: 2px solid #ffe69a;
  border-radius: 6px;
  padding: 16px;
  box-sizing: border-box;
}
.s1-window {
  width: 150px;
  height: 150px;
  overflow: hidden;
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px #333333;
  flex-shrink: 0;
}
.s1-strip {
  width: 100%;
}
.s1-cell {
  width: 150px;
  height: 150px;
  line-height: 150px;
  font-size: 74px;
  text-align: center;
}
.s1-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.s1-credits {
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
  letter-spacing: 0.05em;
}
.s1-credits span {
  color: #ffe69a;
  font-size: 18px;
}
.s1-spin {
  background: linear-gradient(180deg, #8A9A3F, #5c6b1f);
  color: #ffffff;
  border: 1px solid #ffe69a;
  border-radius: 6px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s ease;
}
.s1-spin:hover:not(:disabled) {
  background: linear-gradient(180deg, #9dae4a, #6e7f26);
}
.s1-spin:active:not(:disabled) {
  transform: scale(0.97);
}
.s1-spin:disabled {
  opacity: 0.6;
  cursor: default;
}
.s1-msg {
  margin-top: 12px;
  min-height: 20px;
  font-size: 13px;
  color: #cccccc;
}
.s1-msg.s1-win {
  color: #ffe69a;
  font-weight: bold;
}

@media (max-width: 520px) {
  .s1-window, .s1-cell { width: 100px; height: 100px; }
  .s1-cell { line-height: 100px; font-size: 50px; }
  .s1-reels { gap: 8px; padding: 12px; }
  .s1-spin { padding: 10px 20px; font-size: 14px; }
}