/* سمسمية web — styles lifted from the Claude Design handoff (design/Simsimiya.dc.html). */
@font-face { font-family: 'Lalezar'; src: url(assets/fonts/Lalezar-Regular.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Baloo Bhaijaan 2'; font-weight: 700; src: url(assets/fonts/BalooBhaijaan2-Bold.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Baloo Bhaijaan 2'; font-weight: 800; src: url(assets/fonts/BalooBhaijaan2-ExtraBold.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Pixelify Sans'; font-weight: 400; src: url(assets/fonts/PixelifySans-Regular.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Pixelify Sans'; font-weight: 700; src: url(assets/fonts/PixelifySans-Bold.ttf) format('truetype'); font-display: block; }

:root {
  --lemon: #FFE600; --saffron: #FFB800; --orange: #FF8200; --pink: #FF2E93; --turq: #00C9B7;
  --violet: #8A3FFC; --leaf: #23B455; --fern: #1E9E4A; --palm: #0B6B3A; --plum: #2A0E2E; --paper: #FFF6DC;
}

html, body {
  margin: 0; height: 100%; overflow: hidden; position: fixed; inset: 0;
  background: #2A0E2E; color: #FFF6DC;
  font-family: 'Baloo Bhaijaan 2', sans-serif; -webkit-font-smoothing: antialiased;
  touch-action: manipulation; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
img { image-rendering: pixelated; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
.tap { cursor: pointer; transition: transform .06s; }
.tap:active { transform: translateY(4px); }

#safe-probe { position: fixed; visibility: hidden; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#stage { position: absolute; top: 0; left: 0; width: 390px; transform-origin: 0 0; overflow: hidden; }
.screen { position: absolute; inset: 0; overflow: hidden; }

#loading { position: fixed; inset: 0; display: grid; place-items: center; background: #2A0E2E; z-index: 999; transition: opacity .3s; }
#loading div { font-family: Lalezar, sans-serif; font-size: 64px; color: #FFE600; text-shadow: 0 6px 0 #FF2E93; animation: bob 1.2s ease-in-out infinite; }

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-14px) rotate(20deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes cloud{0%{transform:translateX(0)}100%{transform:translateX(-40px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 #FFE600}50%{box-shadow:0 0 0 6px #FFE600}}
@keyframes pop{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.25) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes shock{0%,100%{transform:none}20%{transform:translateX(-6px) rotate(-5deg)}40%{transform:translateX(6px) rotate(5deg)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-16px) scaleY(1.04)}75%{transform:translateY(0) scaleY(.93)}}
@keyframes tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg)}}
@keyframes slump{0%{transform:none}100%{transform:translateY(8px) rotate(7deg) scaleY(.93)}}
@keyframes jump{0%,100%{transform:translateY(0) scaleY(1)}15%{transform:translateY(0) scaleY(.9)}50%{transform:translateY(-28px) rotate(-3deg) scaleY(1.05)}}
@keyframes bubblePop{0%{transform:scale(.2) translateY(16px);opacity:0}100%{transform:none;opacity:1}}
@keyframes burst{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx),var(--ty)) scale(.5);opacity:0}}
@keyframes markPop{0%{transform:scale(0) rotate(-25deg)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes zzz{0%{transform:translate(0,0);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translate(4px,-8px);opacity:0}}
@keyframes flow{0%,100%{opacity:.45}40%{opacity:1}}
@keyframes glowRing{0%,100%{box-shadow:0 0 0 0 #FFE600,0 0 0 0 #FFE600}50%{box-shadow:0 0 0 6px #FFE600,0 0 0 9px rgba(255,230,0,.4)}}
@keyframes cardIn{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}
@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes firefly{0%,100%{opacity:.35}50%{opacity:1}}

/* shared pieces */
.pill { background: #FFF6DC; border: 3px solid #2A0E2E; box-shadow: 0 4px 0 #2A0E2E; box-sizing: border-box; }
.seed { width: 10px; height: 14px; background: #FFB800; border: 2px solid #2A0E2E; border-radius: 50%/60% 60% 40% 40%; flex: none; }
.leafI { width: 14px; height: 18px; border: 2px solid #2A0E2E; border-radius: 0 80% 0 80%; transition: background .2s; }
.star { width: 34px; height: 34px; border: 3px solid #2A0E2E; box-sizing: border-box; clip-path: polygon(50% 0,64% 34%,100% 36%,72% 60%,82% 100%,50% 78%,18% 100%,28% 60%,0 36%,36% 34%); }
.sprite { display: block; width: auto; filter: drop-shadow(3px 0 0 #2A0E2E) drop-shadow(-3px 0 0 #2A0E2E) drop-shadow(0 3px 0 #2A0E2E) drop-shadow(0 -3px 0 #2A0E2E); }
.num { font-family: 'Pixelify Sans', sans-serif; font-weight: 700; }

/* overlays */
.dim { position: absolute; inset: 0; z-index: 50; background: rgba(42,14,46,.62); display: grid; place-items: center; animation: fadeIn .25s; }
.card { width: 300px; background: #FFF6DC; border: 4px solid #2A0E2E; box-shadow: 0 10px 0 #2A0E2E; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; box-sizing: border-box; animation: cardIn .3s cubic-bezier(.3,1.4,.5,1); }
.card .title { font-family: Lalezar; font-size: 40px; white-space: nowrap; line-height: 1.05; text-shadow: 0 4px 0 #2A0E2E; }
.card .sub { font-size: 16px; font-weight: 700; color: #2A0E2E; }
.cta { width: 100%; background: #FF8200; border: 4px solid #2A0E2E; box-shadow: 0 6px 0 #2A0E2E; padding: 8px 0; font-family: Lalezar; font-size: 28px; color: #FFF6DC; text-shadow: 0 2px 0 #2A0E2E; }
.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #2A0E2E; }

/* board */
.board { position: relative; background-color: #1E9E4A; background-image: conic-gradient(#23B455 25%, #1E9E4A 0 50%, #23B455 0 75%, #1E9E4A 0); border: 3px solid #2A0E2E; overflow: hidden; direction: ltr; touch-action: none; }
.cell { position: absolute; }
.arrow { position: absolute; width: 14px; height: 14px; background: #2A0E2E; clip-path: polygon(0 0,100% 50%,0 100%,30% 50%); z-index: 0; pointer-events: none; }
.sesame { position: absolute; z-index: 1; left: 50%; top: 50%; width: 34px; height: 40px; margin: -16px 0 0 -17px; pointer-events: none; }
.sesame .bobber { position: absolute; inset: 0; }
.sesame .lean { position: absolute; inset: 0; }
.sesame .body { position: absolute; inset: 0; background: #E2A04A; border: 3px solid #2A0E2E; border-radius: 50%/55% 55% 45% 45%; box-shadow: inset -4px -4px 0 #C27F2E; outline-offset: 2px; }
.sesame.gold .body { background: #FFB800; box-shadow: inset -4px -4px 0 #FF8200; }
.sesame .body.flash { outline: 3px solid #FFE600; }
.sesame .body.glow { animation: glowRing .9s ease-in-out infinite; }
.zz { position: absolute; right: 2px; top: 0; font-family: 'Pixelify Sans'; font-weight: 700; font-size: 13px; color: #FFF6DC; text-shadow: 0 1px 0 #2A0E2E; animation: zzz 1.4s linear infinite; pointer-events: none; z-index: 4; }
.hands { position: absolute; width: 18px; height: 9px; background: #E2A04A; border: 2px solid #2A0E2E; border-radius: 6px; box-sizing: border-box; z-index: 2; pointer-events: none; }
.pebble, .snail { position: absolute; pointer-events: none; }
.canal { position: absolute; background: #00C9B7; overflow: hidden; }
.canal .bank { position: absolute; left: 0; right: 0; height: 7%; background: #6FE9DA; }
.canal .chev { position: absolute; left: 50%; top: 50%; width: 38%; height: 38%; transform: translate(-50%,-50%); animation: flow 1.05s ease-in-out infinite; }
.flower { position: absolute; width: 22px; height: 22px; border: 3px solid #2A0E2E; box-sizing: border-box; clip-path: polygon(33% 0,66% 0,66% 33%,100% 33%,100% 66%,66% 66%,66% 100%,33% 100%,33% 66%,0 66%,0 33%,33% 33%); animation: pop .5s both cubic-bezier(.3,1.6,.6,1); z-index: 30; pointer-events: none; }
.puff { position: absolute; width: 6px; height: 6px; background: #FFF6DC; z-index: 8; pointer-events: none; }
.flyseed { position: absolute; z-index: 40; pointer-events: none; }

/* level map */
.lvtile { height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 3px solid #2A0E2E; box-sizing: border-box; background: #FFF6DC; color: #2A0E2E; box-shadow: 0 4px 0 rgba(255,246,220,.35); }
.lvtile.cur { background: #FFE600; border-color: #FF2E93; }
.lvtile.locked { background: #D9C9B8; border-color: #8A7A86; color: #8A7A86; box-shadow: 0 4px 0 #8A7A86; }
.mini-stars { display: flex; gap: 1px; direction: ltr; }
.mini-stars i { width: 11px; height: 11px; background: #D9C9B8; clip-path: polygon(50% 0,64% 34%,100% 36%,72% 60%,82% 100%,50% 78%,18% 100%,28% 60%,0 36%,36% 34%); }
.mini-stars i.on { background: #FFB800; }

@media (prefers-reduced-motion: reduce) {
  .bobber, .cloudy, .drifty, .homebob, .canal .chev { animation: none !important; }
}