/* =============================================
   農家キング スロット
   パレット:
   --red-lacquer #B3121F  筐体の赤
   --red-deep    #7d0a13  赤の陰影
   --gold        #f5c542  金フレーム
   --gold-light  #ffe897  金ハイライト
   --panel-dark  #1c1410  黒パネル
   --cream       #fff8e7  紙・窓の生成り
   ============================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* 色の実際の値は config.js の colors から上書きされます */
:root {
  --red-lacquer: #b3121f;
  --red-deep: #7d0a13;
  --gold: #f5c542;
  --gold-light: #ffe897;
  --gold-dark: #a97b12;
  --panel-dark: #1c1410;
  --cream: #fff8e7;
  --sky-top: #4aa3dd;
  --sky-mid: #8fd0f2;
  --sky-bottom: #d8ecc2;
  --field: #c9a13d;
  --field-light: #e8c65a;
  --field-dark: #a3852c;
  --cell: 88px;
  --font-display: "Reggae One", serif;
  --font-body: "Zen Maru Gothic", sans-serif;
}

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--panel-dark);
  display: flex;
  justify-content: center;
  padding: 16px 8px 48px;
  overflow-x: hidden;
  background: var(--sky-mid);
}

/* 空と畑の背景 */
.sky-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 90% 40% at 50% 108%, var(--field) 0%, var(--field-dark) 45%, transparent 46%),
    radial-gradient(ellipse 120% 55% at 50% 118%, var(--field-light) 0%, transparent 60%),
    radial-gradient(circle at 78% 14%, rgba(255,246,201,.9) 0%, rgba(255,246,201,0) 18%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
}

/* =============== 筐体 =============== */
.cabinet {
  width: min(430px, 100%);
  background:
    linear-gradient(160deg, #d81c2b 0%, var(--red-lacquer) 35%, var(--red-deep) 100%);
  border: 6px solid var(--gold);
  border-radius: 26px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.35),
    inset 0 0 0 3px var(--red-deep),
    0 18px 50px rgba(30, 10, 0, .45);
  padding: 14px 14px 20px;
  position: relative;
}

/* 筐体スキン画像（assets/images/cabinet.png があるとき）
   レイアウト（パディング・ボタン位置）はそのまま、見た目だけ差し替え */
.cabinet.skinned {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-color: transparent;
  box-shadow: 0 18px 50px rgba(30, 10, 0, .45);
}
.cabinet.skinned .lamp-strip { visibility: hidden; } /* 高さは残して位置ずれを防ぐ */

/* ページ背景画像（assets/images/background.png があるとき） */
.sky-bg.skinned {
  background-size: cover;
  background-position: center;
}

/* ランプ列 */
.lamp-strip {
  height: 10px;
  border-radius: 6px;
  background: repeating-linear-gradient(
    90deg,
    var(--gold-light) 0 14px,
    var(--gold-dark) 14px 28px
  );
  box-shadow: inset 0 1px 2px rgba(0,0,0,.4);
  animation: lampFlow 1.1s linear infinite;
}
.lamp-strip.bottom { margin-top: 14px; }
@keyframes lampFlow { to { background-position: 28px 0; } }

/* =============== タイトル =============== */
.cab-top { text-align: center; padding-bottom: 8px; }

.title-logo {
  font-family: var(--font-display);
  font-size: clamp(38px, 11vw, 52px);
  line-height: 1.1;
  margin-top: 10px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  letter-spacing: .02em;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.45));
}
.title-logo .crown { font-size: .55em; vertical-align: .45em; margin-right: 2px; }
/* タイトル各パートの色は config.js から直接あたります */
.subtitle {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 12px;
  letter-spacing: .42em;
  margin-top: 2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

/* =============== リール窓 =============== */
.reel-window {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #3a2c14, var(--panel-dark));
  border: 4px solid var(--gold);
  border-radius: 16px;
  padding: 10px 4px;
  box-shadow: inset 0 4px 14px rgba(0,0,0,.7);
}

.payline-arrow {
  color: #ff5340;
  font-size: 20px;
  flex: 0 0 auto;
  text-shadow: 0 0 6px rgba(255,83,64,.9);
  animation: arrowPulse 1s ease-in-out infinite;
}
@keyframes arrowPulse { 50% { opacity: .45; } }

.reels {
  position: relative;
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.reel {
  width: calc(var(--cell) + 8px);
  height: calc(var(--cell) * 3);
  overflow: hidden;
  background: var(--cream);
  border-radius: 8px;
  border: 2px solid var(--gold-dark);
  position: relative;
}

.strip { position: absolute; left: 4px; right: 4px; top: 0; will-change: transform; }

.cell {
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  border-bottom: 1px dashed rgba(0,0,0,.12);
  position: relative;
  border-radius: 6px;
}

/* 図柄の背景・アイコン・バッジは config.js の symbols から入ります */
.cell.shine {
  background-size: 200% 200% !important;
  animation: goldShine 2.2s linear infinite;
}
@keyframes goldShine { to { background-position: 200% 200%; } }

.sym-badge {
  position: absolute;
  top: 3px; right: 5px;
  font-size: 17px;
}
.cell img {
  max-width: 74%;
  max-height: 74%;
  object-fit: contain;
}

/* 当たりライン */
.payline {
  position: absolute;
  left: -6px; right: -6px;
  top: 50%;
  height: var(--cell);
  transform: translateY(-50%);
  border-top: 3px solid rgba(255, 83, 64, .85);
  border-bottom: 3px solid rgba(255, 83, 64, .85);
  pointer-events: none;
  z-index: 3;
}

/* 上下を少し暗くして窓らしく */
.window-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(180deg,
    rgba(20,12,4,.5) 0%, rgba(20,12,4,0) 22%,
    rgba(20,12,4,0) 78%, rgba(20,12,4,.5) 100%);
}

/* リール揃いの点滅 */
.reel.hit { animation: reelHit .5s ease-in-out 4; }
@keyframes reelHit {
  50% { box-shadow: 0 0 0 4px var(--gold-light), 0 0 22px 6px rgba(255,220,90,.9); }
}

/* =============== 操作パネル =============== */
.control-deck {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 12px;
  background: linear-gradient(180deg, #2b2018, var(--panel-dark));
  border: 3px solid var(--gold-dark);
  border-radius: 14px;
}

.start-btn {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 4px solid #e8e8e8;
  background: radial-gradient(circle at 35% 30%, #ff6b6b, #d40f1e 60%, #8f0812);
  color: #fff;
  font-family: var(--font-display);
  cursor: pointer;
  box-shadow: 0 6px 0 #5f050c, 0 8px 16px rgba(0,0,0,.5);
  transition: transform .08s, box-shadow .08s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.start-btn .start-en { font-size: 22px; letter-spacing: .05em; }
.start-btn .start-ja { font-size: 11px; font-family: var(--font-body); font-weight: 700; }
.start-btn:not(:disabled):active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #5f050c, 0 3px 8px rgba(0,0,0,.5);
}
.start-btn:disabled {
  filter: grayscale(.75) brightness(.7);
  cursor: default;
}

.stop-group {
  flex: 1;
  display: flex;
  gap: 10px;
  justify-content: space-around;
}

.stop-btn {
  flex: 1;
  height: 62px;
  border-radius: 12px;
  border: 3px solid #ffd7d7;
  background: radial-gradient(circle at 35% 30%, #ff8a5c, #e6421f 65%, #a12708);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 5px 0 #6d1a02, 0 6px 12px rgba(0,0,0,.45);
  transition: transform .07s, box-shadow .07s, filter .2s;
}
.stop-btn:not(:disabled):active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #6d1a02;
}
.stop-btn:disabled {
  filter: grayscale(.8) brightness(.55);
  cursor: default;
}
.stop-btn.pressed { filter: brightness(.55); }

.deck-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  min-height: 24px;
}
.auto-timer {
  color: var(--gold-light);
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.sound-toggle {
  border: 2px solid var(--gold-dark);
  background: rgba(0,0,0,.35);
  color: var(--gold-light);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  cursor: pointer;
}

/* =============== 景品一覧 =============== */
.prize-legend {
  margin-top: 14px;
  background: var(--cream);
  border: 3px solid var(--gold-dark);
  border-radius: 12px;
  padding: 10px 12px;
}
.prize-legend h2 {
  font-size: 12px;
  font-weight: 900;
  color: #6b4a12;
  margin-bottom: 6px;
}
.prize-legend ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.prize-legend li {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prize-legend .lg-sym {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 16px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}
.prize-legend .lg-sym .sym-badge { display: none; }
.prize-legend .lg-sym img { max-width: 85%; max-height: 85%; object-fit: contain; }

/* =============== ネギキャラクター =============== */
.negi {
  position: fixed;
  left: -160px;
  bottom: 6vh;
  z-index: 60;
  transition: left .55s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.negi.show { left: max(12px, calc(50vw - 340px)); }
.negi.show svg { animation: negiHop .5s ease-in-out infinite; }
@keyframes negiHop { 50% { transform: translateY(-14px); } }

/* 画像キャラクター（config.js の character.image 指定時） */
.negi .chara-img {
  width: 140px;
  max-height: 200px;
  object-fit: contain;
}
.negi.show .chara-img { animation: negiHop .5s ease-in-out infinite; }

.negi .arm { transform-origin: 60px 122px; }
.negi.show .arm-l { animation: banzaiL .5s ease-in-out infinite; }
.negi.show .arm-r { animation: banzaiR .5s ease-in-out infinite; }
@keyframes banzaiL { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-40deg); } }
@keyframes banzaiR { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(40deg); } }

.negi-say {
  position: absolute;
  top: -14px;
  left: 70px;
  background: #fff;
  border: 2px solid #3f9b2f;
  color: #2c6b1f;
  border-radius: 14px;
  padding: 5px 10px;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .3s .4s, transform .3s .4s;
}
.negi.show .negi-say { opacity: 1; transform: scale(1); }

/* =============== 結果画面 =============== */
.result-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 8, 2, .62);
  backdrop-filter: blur(2px);
}
.result-overlay[hidden] { display: none; }

.result-card {
  width: min(340px, 88vw);
  text-align: center;
  border-radius: 20px;
  padding: 26px 22px 24px;
  border: 5px solid var(--gold);
  background: linear-gradient(170deg, #fffdf4, #fff3d0);
  box-shadow: 0 16px 50px rgba(0,0,0,.5);
  animation: cardPop .45s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes cardPop { from { transform: scale(.4); opacity: 0; } }

.result-eyebrow {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .3em;
  color: #8a6a1d;
}
.result-rank {
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1.15;
  margin: 6px 0 2px;
}
.result-prize { font-size: 20px; font-weight: 900; }
.result-note { font-size: 13px; margin-top: 8px; color: #6d5b33; font-weight: 700; }

/* 演出の強さ（effect）ごとのカード装飾 */
.result-card.fx-gold {
  border-color: #ffdf6b;
  background: linear-gradient(170deg, #fff8d6, #ffe27a 55%, #ffd1f0);
  animation: cardPop .45s cubic-bezier(.2,1.5,.4,1), rainbowGlow 1.4s linear infinite;
}
@keyframes rainbowGlow {
  0%   { box-shadow: 0 0 34px 10px rgba(255, 90, 90, .75); }
  25%  { box-shadow: 0 0 34px 10px rgba(255, 214, 68, .8); }
  50%  { box-shadow: 0 0 34px 10px rgba(96, 227, 121, .75); }
  75%  { box-shadow: 0 0 34px 10px rgba(94, 158, 255, .8); }
  100% { box-shadow: 0 0 34px 10px rgba(255, 90, 90, .75); }
}
.result-card.fx-gold .result-rank { color: #b8860b; text-shadow: 0 2px 0 #fff; }
.result-card.fx-silver { background: linear-gradient(170deg, #fbfbfb, #e9edf2 60%, #ffdcdc); }
.result-card.fx-silver .result-rank { color: #b3121f; }
.result-card.fx-green { background: linear-gradient(170deg, #fdfff5, #e4f6cf); }
.result-card.fx-green .result-rank { color: #3d8a1e; }
.result-card.fx-blue { background: linear-gradient(170deg, #f8fcff, #ddeefc); }
.result-card.fx-blue .result-rank { color: #1e5f9e; }
.result-card.fx-mild { background: linear-gradient(170deg, #fffef9, #f4ecd8); }
.result-card.fx-mild .result-rank { color: #7a6a45; font-size: 44px; }
.result-card.fx-none .result-rank { font-size: 30px; color: #555; }

.again-btn {
  margin-top: 16px;
  border: none;
  border-radius: 999px;
  padding: 12px 30px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #ff6b3d, #d43a10);
  box-shadow: 0 4px 0 #8f2404;
  cursor: pointer;
}
.again-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f2404; }

/* =============== 管理画面 =============== */
.admin-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 12, .7);
  padding: 14px;
}
.admin-overlay[hidden] { display: none; }

.admin-panel {
  width: min(420px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 14px;
  padding: 20px 18px;
  border-top: 8px solid var(--red-lacquer);
}
.admin-panel h2 { font-size: 18px; font-weight: 900; }
.admin-note { font-size: 12px; color: #666; margin: 6px 0 12px; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  border-bottom: 1px solid #e5e0d5;
  padding: 8px 6px;
  font-size: 14px;
  text-align: left;
}
.admin-table th { font-size: 12px; color: #8a7c5c; }
.admin-table input {
  width: 64px;
  padding: 6px;
  font-size: 15px;
  font-family: var(--font-body);
  border: 2px solid #d8d2c2;
  border-radius: 8px;
  text-align: right;
}
.admin-table .zero { color: #c0392b; font-weight: 900; }

.admin-total { font-size: 13px; font-weight: 700; margin-top: 10px; color: #4a4130; }

.admin-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.admin-btn {
  flex: 1;
  min-width: 100px;
  padding: 11px 8px;
  border-radius: 10px;
  border: 2px solid #c9c2b0;
  background: #f6f3ea;
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
}
.admin-btn.primary { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.admin-btn.danger { background: #fff; border-color: #c0392b; color: #c0392b; }

/* =============== 紙ふぶき・フラッシュ =============== */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.confetti {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 16px;
  border-radius: 2px;
  animation: confFall linear forwards;
}
@keyframes confFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .9; }
}

.flash-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  opacity: 0;
}
.flash-layer.gold {
  background: radial-gradient(circle, rgba(255,235,140,.85), rgba(255,190,60,.25));
  animation: flashBlink .22s ease-in-out 6;
}
.flash-layer.silver {
  background: radial-gradient(circle, rgba(240,240,255,.7), rgba(200,200,220,.15));
  animation: flashBlink .26s ease-in-out 4;
}
.flash-layer.soft {
  background: radial-gradient(circle, rgba(210,255,180,.5), transparent);
  animation: flashBlink .3s ease-in-out 2;
}
@keyframes flashBlink { 50% { opacity: 1; } }

/* =============== 小さい画面 =============== */
@media (max-width: 400px) {
  :root { --cell: 72px; }
  .cell { font-size: 42px; }
  .start-btn { width: 82px; height: 82px; }
  .negi.show { left: 4px; }
  .negi svg { width: 90px; height: 150px; }
  .negi .chara-img { width: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  .lamp-strip, .payline-arrow, .sym-t1 { animation: none; }
  .negi { transition: none; }
}