/* Font riêng: đặt file assets/font.ttf (hoặc .otf đổi tên thành font.ttf) là game tự dùng */
@font-face { font-family: "GameFont"; src: url("../assets/font.ttf"); font-display: swap; }

:root {
  --gold: #f6c343; --gold-lt: #ffe9a0; --ink: #2a0a0e; --wine: #6b1220; --cream: #fbefd9;
  --text-on-cream: #b3121d; --ok: #3fbf5f; --err: #ff6b6b;
  --font: "GameFont", "Bungee", "Arial Black", system-ui, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120810; }
body {
  background-color: #120810; background-position: center; background-size: cover;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; font-family: var(--font); color: #fff;
}
#stage { position: absolute; left: 50%; top: 50%; width: 1080px; height: 1920px; transform-origin: 50% 50%; overflow: hidden; }

/* ---------- ô ảnh ---------- */
.slot { position: absolute; background-repeat: no-repeat; background-size: 100% 100%; }
.slot.ph {
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,.02) 14px 28px);
  background-color: rgba(60, 30, 45, .55); outline: 3px dashed rgba(246,195,67,.7); outline-offset: -3px;
}
.slot.ph::after, .slot.bgph::after, .guide .slot[data-label]::after {
  content: attr(data-label); position: absolute; left: 6px; top: 6px; right: 6px;
  font: 600 18px/1.25 system-ui, "Segoe UI", sans-serif; color: var(--gold-lt);
  text-shadow: 0 1px 2px #000; white-space: pre-line; pointer-events: none;
}
.slot.bgph { background-color: #2a1220; background-image: radial-gradient(ellipse at 50% 20%, #4a1630, #1a0b14 70%); outline: none; }
.guide .slot { outline: 2px dashed #3ff !important; outline-offset: -2px; }
.guide .slot::after { color: #9ff !important; background: rgba(0,0,0,.55); padding: 2px 4px; right: auto; }
.textbox { position: absolute; display: grid; place-items: center; text-align: center; font-family: var(--font); line-height: 1.2; }
.guide .textbox { outline: 2px dotted #f6f; }

/* ---------- 2 màn ---------- */
.screen { position: absolute; inset: 0; transition: opacity .35s; }
.screen[hidden] { display: block !important; opacity: 0; pointer-events: none; }

/* ---------- màn nhập mã ---------- */
#idLabel { font-size: 40px; color: var(--gold-lt); text-shadow: 3px 3px 0 var(--ink); }
#idValue { font-size: 76px; letter-spacing: .12em; color: var(--text-on-cream); }
#idValue.empty { opacity: .45; font-size: calc(var(--fs, 76px) * .53) !important; letter-spacing: .04em; }
.key { position: absolute; display: grid; place-items: center; cursor: pointer; font-family: var(--font); font-size: 64px; color: var(--ink);
  transition: transform .06s, filter .06s; border: 0; padding: 0; background-color: transparent; }
.key.ph-key { background: linear-gradient(#fff4dc, #e8cf9f); border: 5px solid var(--gold); border-radius: 18px; box-shadow: 0 8px 0 #8a5a12; }
.key.ph-key.k-del { background: linear-gradient(#a02030, #6b1220); color: #fff; font-size: 40px; }
.key.ph-key.k-ok { background: linear-gradient(#2fa84f, #1d6e33); color: #fff; font-size: 48px; }
.key:active, .key.down { transform: translateY(6px) scale(.97); filter: brightness(1.15); }
.key .klabel { pointer-events: none; text-shadow: 0 2px 0 rgba(255,255,255,.35); }
.key.has-img .klabel.hide { display: none; }
#idMsg { font-size: 30px; color: var(--gold-lt); }
#idMsg.err { color: var(--err); } #idMsg.ok { color: var(--ok); }
.shake { animation: shake .4s; }
@keyframes shake { 20%,60% { transform: translateX(-14px); } 40%,80% { transform: translateX(14px); } }

/* ---------- màn game ---------- */
.tile { position: absolute; display: grid; place-items: center; transition: transform .08s, filter .08s; }
.tile img { width: var(--iw, 140px); height: var(--ih, 140px); object-fit: contain; pointer-events: none; }
.tile .tph { font: 600 20px/1.2 system-ui, sans-serif; color: var(--gold-lt); text-align: center; background: rgba(0,0,0,.35); padding: 6px 8px; border-radius: 6px; }
.tile .tph b { display: block; font-family: var(--font); font-size: 30px; color: var(--gold); margin-bottom: 4px; }
.tile::before { content: ""; position: absolute; inset: 8px; border-radius: 10px; opacity: 0; transition: opacity .08s;
  background: radial-gradient(circle, rgba(255,240,170,.75), rgba(255,200,60,.25) 60%, transparent 75%); box-shadow: 0 0 30px 8px rgba(255,210,80,.8); }
.tile.lit { transform: scale(1.08); filter: brightness(1.25); z-index: 3; }
.tile.lit::before { opacity: 1; }
.tile.win { z-index: 3; animation: winblink .3s steps(2) 10; }
.tile.win::before { opacity: 1; }
@keyframes winblink { 50% { filter: brightness(1.8) saturate(1.4); transform: scale(1.12); } }

#wheelSvg { position: absolute; overflow: visible; }
#wheelSpin { transform-origin: 0 0; }
.hubBtn { cursor: pointer; border: 0; padding: 0; background-color: transparent; border-radius: 50%; }
.hubBtn.ph-hub { background: radial-gradient(circle at 50% 35%, #4b1a24, var(--ink) 70%); border: 8px solid var(--gold); box-shadow: 0 0 0 4px #b07a14; }
.hubBtn.ready { animation: hubpulse 1.2s ease-in-out infinite; }
.hubBtn:disabled { cursor: default; }
@keyframes hubpulse { 50% { filter: brightness(1.35) drop-shadow(0 0 22px rgba(255,220,100,.95)); transform: scale(1.06); } }
.hubBtn .hlabel { font-family: var(--font); font-size: 22px; color: var(--gold-lt); line-height: 1.4; pointer-events: none; }
.hubBtn.has-img .hlabel { display: none; }

.pointerPh { clip-path: polygon(0 50%, 100% 0, 100% 100%); background: linear-gradient(90deg, #ff4b4b, #a5121c) !important; outline: none !important; }

#inFruit img, #inPrize img { max-width: 100%; max-height: 100%; object-fit: contain; }
#inFruit { grid-template-rows: 1fr auto; }
#inFruit .multTxt { font-size: var(--fs, 28px); color: var(--fc, var(--text-on-cream)); }
#inPrize { font-size: 44px; color: var(--text-on-cream); }
#inFinal { font-size: 50px; color: var(--text-on-cream); }
#inFinal.pop { animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
#playerTag { font-size: 30px; color: var(--gold-lt); text-shadow: 3px 3px 0 var(--ink); }
#tapHint { font-size: 28px; color: #fff; text-shadow: 3px 3px 0 var(--ink); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

#connOverlay { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(18,8,16,.82); z-index: 99; }
#connOverlay div { font: 600 22px system-ui, sans-serif; color: var(--gold); padding: 18px 24px; border: 2px solid var(--gold); background: #2a1220; animation: blink 1.2s steps(2) infinite; }

@media (prefers-reduced-motion: reduce) { .hubBtn.ready, #tapHint { animation: none; } }

/* ---------- cửa sổ (nhập mã, kết quả) ---------- */
.modal { position: absolute; inset: 0; z-index: 20; background: rgba(10, 4, 8, .72); opacity: 0; pointer-events: none; transition: opacity .3s; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal.open .slot, .modal.open .textbox { animation: popin .35s ease-out; }
@keyframes popin { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.popupPanel.ph, #modalId .slot.ph { background-color: rgba(42, 18, 32, .96); }

/* nút ảnh */
.ibtn { cursor: pointer; border: 0; padding: 0; background-color: transparent; display: grid; place-items: center; font-family: var(--font); transition: transform .08s, filter .08s; }
.ibtn:active { transform: translateY(5px) scale(.97); filter: brightness(1.15); }
.ibtn .blabel { pointer-events: none; }
.ibtn .blabel.hide { display: none; }
.ibtn.ph-btn { background: linear-gradient(#e0262f, #8f1219); border: 6px solid var(--gold); border-radius: 22px; box-shadow: 0 10px 0 #5a0b10, 0 0 30px rgba(246,195,67,.35); color: #fff; font-size: 44px; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.ibtn.ph-btn.backBtn { background: linear-gradient(#4a1c6b, #2a0f3f); box-shadow: 0 10px 0 #1a0827; font-size: 34px; }
.ibtn.ph-btn.newBtn { font-size: 38px; }
.ibtn.ph-btn.closeBtn { border-radius: 50%; font-size: 48px; background: linear-gradient(#6b1220, #3d0a14); box-shadow: 0 6px 0 #1a0508; }
.startBtn { animation: startpulse 1.4s ease-in-out infinite; }
@keyframes startpulse { 50% { transform: scale(1.06); filter: brightness(1.2) drop-shadow(0 0 26px rgba(255,220,100,.9)); } }

/* nội dung cửa sổ kết quả */
#popTitle { font-size: 64px; color: var(--gold); text-shadow: 4px 4px 0 var(--ink); }
#popId { font-size: 40px; color: var(--gold-lt); letter-spacing: .06em; }
#popFormula { display: flex; justify-content: center; align-items: center; gap: 22px; }
#popFormula .fcol { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#popFormula small { font-size: calc(var(--fs, 64px) * .375); color: var(--gold-lt); letter-spacing: .08em; opacity: .9; }
#popFinal small { font-size: calc(var(--fs, 104px) * .23); color: var(--gold-lt); letter-spacing: .08em; opacity: .9; }
#popFormula b { font-size: var(--fs, 64px); color: var(--fc, #fff); text-shadow: 3px 3px 0 var(--ink); font-weight: var(--fw, 400); }
#popFormula .fop { font-size: var(--fs, 64px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); padding-top: calc(var(--fs, 64px) * .53); }
#popFinal { display: flex; flex-direction: column; gap: 6px; }
#popFinal b { font-size: var(--fs, 104px); color: var(--fc, var(--gold)); text-shadow: 5px 5px 0 var(--ink), 0 0 30px rgba(255,210,80,.6); font-weight: var(--fw, 400); }
.modal.open #popFinal b { animation: pop .7s ease-out .2s both; }
@media (prefers-reduced-motion: reduce) { .startBtn { animation: none; } }

/* nút loa tắt/mở tiếng (góc phải trên) */
#soundBtn { position: absolute; z-index: 30; border-radius: 50%; border: 4px solid var(--gold); background: rgba(42,18,32,.78); color: var(--gold); padding: 16px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(0,0,0,.45); transition: transform .08s; }
#soundBtn svg { width: 100%; height: 100%; display: block; }
#soundBtn:active { transform: scale(.92); }
#soundBtn.off { color: #b9a6ad; border-color: #7d6a70; }