/* حلويات بغداد — warm sweets-shop look: brass tray board, wood and honey colours; own identity */
:root { --ink: #fff; --muted: #ffe4c4; --card: rgba(60, 26, 10, .84); --line: rgba(255, 220, 160, .22); --gold: #ffcf4a; --gold2: #e8891c; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: #3a1a0a; }
body { margin: 0; min-height: 100vh; color: var(--ink); font-family: "Baloo Bhaijaan 2", system-ui, sans-serif; overflow-x: hidden; }
.shop { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: #3a1a0a url(/assets/sweets/bg.webp?v=1) center / cover no-repeat; }
.shop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(30, 10, 0, .35), rgba(30, 10, 0, .65)); }
.page { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: max(10px, env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom)); }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
.topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.icon { width: 42px; height: 42px; flex: none; border-radius: 14px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); font-size: 20px; }
.card { border-radius: 22px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.btn { display: block; width: 100%; margin-top: 10px; border: 0; border-radius: 18px; padding: 13px; font-weight: 800; font-size: 19px; }
.btn-main { background: linear-gradient(#ffd75e, #e8891c); color: #4a2000; box-shadow: 0 5px 0 #8a4400; }
.btn-main:active { transform: translateY(3px); box-shadow: 0 2px 0 #8a4400; }
.btn-ghost { background: rgba(255, 255, 255, .12); border: 1px solid var(--line); }

.home { margin-top: 12px; padding: 16px; text-align: center; }
.home-art { width: min(240px, 66%); aspect-ratio: 1; object-fit: cover; border-radius: 26px; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); }
.home h1 { margin: 8px 0 0; font-size: 38px; color: var(--gold); text-shadow: 0 3px 0 #6b2f00; }
.home p { margin: 2px 0 6px; color: var(--muted); font-weight: 600; }
.specials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.specials div { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 16px; background: rgba(0, 0, 0, .25); }
.specials img { width: 54px; height: 54px; object-fit: contain; }
.specials b { color: var(--gold); font-size: 14px; }
.specials small { color: var(--muted); font-size: 12px; line-height: 1.3; }

.map-head { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.map-head h2 { flex: 1; margin: 0; font-size: 26px; color: var(--gold); }
.map-head b { background: rgba(0, 0, 0, .35); border-radius: 99px; padding: 3px 12px; }
.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.lv { border: 0; border-radius: 20px; padding: 10px 4px 8px; background: linear-gradient(#ffd75e, #e8891c); color: #4a2000; box-shadow: 0 5px 0 #8a4400; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.lv b { font-size: 28px; line-height: 1.1; }
.lv small { display: flex; gap: 2px; min-height: 22px; align-items: center; font-size: 13px; }
.lv small img { width: 22px; height: 22px; object-fit: contain; }
.lv.lock { background: rgba(255, 255, 255, .2); color: #fff; box-shadow: none; }

.hud { display: flex; align-items: center; gap: 8px; padding: 8px; margin-top: 8px; }
.hud-mid { flex: 1; min-width: 0; text-align: center; }
.hud-mid b { color: var(--muted); font-size: 14px; }
.goals { display: flex; justify-content: center; gap: 10px; }
.goal { display: flex; align-items: center; gap: 3px; font-weight: 800; font-size: 20px; }
.goal img { width: 34px; height: 34px; object-fit: contain; }
.goal.done b { color: #7dff8a; }
.stat { min-width: 62px; text-align: center; padding: 2px 8px; border-radius: 14px; background: rgba(0, 0, 0, .3); }
.stat small { display: block; font-size: 11px; color: var(--muted); }
.stat b { font-size: 26px; line-height: 1; color: var(--gold); }
.stat.low b { color: #ff6b6b; }
.order { margin: 8px 0 0; text-align: center; font-weight: 800; color: var(--muted); font-size: 14px; }

.board-wrap { position: relative; display: flex; justify-content: center; margin-top: 8px; }
.board { position: relative; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 18px; padding: 0; background:
  radial-gradient(circle at 50% 40%, rgba(255, 230, 160, .35), transparent 70%), linear-gradient(145deg, #c8902f, #8a5a1c); box-shadow: inset 0 0 0 4px #e7b85a, inset 0 0 18px rgba(0, 0, 0, .35), 0 12px 26px rgba(0, 0, 0, .45); overflow: hidden; }
.board::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(255, 255, 255, .06) 0 25%, transparent 0 50%) 0 0 / calc(var(--cell) * 2) calc(var(--cell) * 2); }
.board.shake { animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.tile { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); padding: 4px; transition: transform .2s ease-in; }
.tile img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); transition: transform .15s; }
.tile.sel img { transform: scale(1.16); filter: drop-shadow(0 0 6px #fff) drop-shadow(0 3px 2px rgba(0, 0, 0, .35)); }
.tile.hint img { animation: hint 1s ease-in-out infinite; }
@keyframes hint { 50% { transform: scale(1.14) rotate(-6deg); } }
.tile.pop img { animation: pop .26s ease-in forwards; }
@keyframes pop { 40% { transform: scale(1.25); } to { transform: scale(0); opacity: 0; } }
.tile.born img { animation: born .4s ease-out; }
@keyframes born { from { transform: scale(.3) rotate(-30deg); } }
.tile.nope img { animation: nope .22s; }
@keyframes nope { 50% { transform: translateX(5px); } }
/* our specials: istikan streak, tray ring, teapot glow — drawn as overlays on the sweet */
.tile.sp-h::after, .tile.sp-v::after { content: ""; position: absolute; inset: 0; background: url(/assets/sweets/istikan.webp?v=1) center / 62% no-repeat; filter: drop-shadow(0 0 4px #fff); animation: glint 1.2s ease-in-out infinite alternate; }
.tile.sp-h::before, .tile.sp-v::before { content: ""; position: absolute; left: 6%; right: 6%; top: 46%; height: 8%; border-radius: 99px; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .9; }
.tile.sp-v::before { left: 46%; right: auto; width: 8%; top: 6%; bottom: 6%; height: auto; background: linear-gradient(transparent, #fff, transparent); }
.tile.sp-tray::after { content: ""; position: absolute; inset: -2px; background: url(/assets/sweets/tray.webp?v=1) center / 100% no-repeat; z-index: -1; animation: glint 1s ease-in-out infinite alternate; }
.tile.sp-pot img { filter: drop-shadow(0 0 8px #fff6b0); animation: glint 1s ease-in-out infinite alternate; }
@keyframes glint { to { opacity: .65; } }
.tile.wrap::after { content: ""; position: absolute; inset: 3px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(190, 230, 255, .2) 40%, rgba(255, 255, 255, .45)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.tile.unwrap::after { animation: unwrap .3s forwards; }
@keyframes unwrap { to { opacity: 0; transform: scale(1.3); } }
.fly { position: fixed; z-index: 60; pointer-events: none; transition: transform .5s cubic-bezier(.5, -.3, .7, 1), opacity .5s; }
.toast { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; font-size: 34px; font-weight: 800; color: var(--gold); text-shadow: 0 3px 0 #6b2f00, 0 0 18px rgba(0, 0, 0, .6); white-space: nowrap; transition: .25s; }
.toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.score-line { text-align: center; margin-top: 8px; font-weight: 800; color: var(--muted); }
.score-line b { color: var(--gold); }

.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(20, 8, 0, .8); }
.modal { width: min(400px, 100%); padding: 18px 16px; border-radius: 24px; background: #4a2310; border: 1px solid var(--line); text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.modal h2 { margin: 0 0 6px; color: var(--gold); }
.res-stars { font-size: 40px; letter-spacing: 6px; }
.res-stars i { font-style: normal; filter: grayscale(1) brightness(.5); }
.res-stars i.on { filter: none; }
.sinan-credit { text-align: center; margin-top: 18px; color: var(--muted); font-size: 12px; letter-spacing: 1px; }
.sinan-credit b { color: var(--gold); }
.lv small:has(img:nth-child(4)) img { width: 17px; height: 17px; }