/* Graphics pass (v1.2): tabletop light and depth, screen slides, glazed tile flight, win rays, aim hint placement. */
body { background:
  radial-gradient(120% 60% at 50% -12%, rgba(255,251,242,.95), rgba(255,251,242,0) 62%),
  radial-gradient(100% 55% at 50% 112%, rgba(120,78,38,.18), transparent 70%),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .3 0 0 0 0 .18 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
  linear-gradient(180deg, #F4EBDD 0%, #E6D7BF 100%); }

/* screens slide sideways (mirrored in Arabic) */
.screen { transform: translateX(32px); transition: opacity .26s ease, transform .34s cubic-bezier(.2,.85,.25,1); }
#home.screen:not(.on) { transform: translateX(-32px); }
[dir=rtl] .screen { transform: translateX(-32px); }
[dir=rtl] #home.screen:not(.on) { transform: translateX(32px); }
.screen.on, [dir=rtl] .screen.on { transform: none; }

/* home hierarchy: the picture is the hero */
.mosaic-card { width: min(100%, 340px, 41vh); padding: 10px 10px 12px; background: linear-gradient(180deg, #FFFCF6, #FBF3E6);
  box-shadow: 0 2px 0 #E2D3BC, 0 18px 40px rgba(70,44,18,.16); transition: transform .12s; }
.mosaic-card:active { transform: scale(.985); }
.mosaic-card canvas.mosaic { border-radius: 14px; box-shadow: 0 6px 14px rgba(60,34,12,.25); }
.mosaic-card .ch-row { margin: 10px 4px 8px; font-size: 18px; letter-spacing: -.005em; }
.mosaic-card .ch-row .num { font-size: 15px; background: #F1E6D4; border-radius: 10px; padding: 0 8px; color: #7A6A5B; }
.mosaic-card .bar { height: 10px; border-radius: 5px; background: #EADCC6; box-shadow: inset 0 1px 2px rgba(80,50,20,.18); }
.logo .word { text-shadow: 0 2px 0 rgba(255,255,255,.8); }
.btn.primary { background: linear-gradient(180deg, #F27C52 0%, var(--accent) 55%, #DE5A31 100%); }
.btn.primary::after { content: ''; position: absolute; inset: 3px 10px auto; height: 40%; border-radius: 16px 16px 40px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.mode-tile, .meta-btn .ico, .icon-btn, .chip { box-shadow: 0 2px 0 #E2D3BC, 0 8px 18px rgba(70,44,18,.08); }
.mode-tile { transition: transform .1s, box-shadow .1s; }
.mode-tile:active, .meta-btn:active .ico, .icon-btn:active { box-shadow: 0 0 0 #E2D3BC, 0 2px 6px rgba(70,44,18,.1); }

/* live mosaic during play */
.live-card { background: linear-gradient(180deg, #FFFCF6, #F7EDDD); box-shadow: 0 2px 0 #E2D3BC, 0 10px 24px rgba(70,44,18,.16); }
.live-card canvas.mosaic { border-radius: 10px; }
.fly-tiles { display: none; }
.fly-tile { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 4px; background: var(--c); pointer-events: none; z-index: 4;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.45), inset 0 -3px 0 rgba(0,0,0,.22), 0 4px 10px rgba(40,20,0,.28); will-change: transform, opacity; }
.fly-tile.ghost { box-shadow: none; filter: saturate(1.2) brightness(1.15); }

/* aim hint sits at the top of the board, never over the conveyor row */
.banner.aim { top: 4px; bottom: auto; z-index: 5; box-shadow: 0 6px 16px rgba(20,60,56,.25); }

/* win: rays turn slowly behind the stars, each star lands with a ring */
.sheet.win .stars { position: relative; isolation: isolate; }
.sheet.win .stars::before { content: ''; position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; z-index: -1;
  border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(242,194,48,.34) 0 9deg, rgba(242,194,48,0) 9deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 66%); mask: radial-gradient(circle, #000 18%, transparent 66%);
  animation: rays 14s linear infinite, raysin .7s .25s both; }
.stars i { position: relative; }
.stars i.on::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(242,194,48,.8);
  animation: starring .6s ease-out both; animation-delay: calc(var(--d) + .12s); pointer-events: none; }
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes raysin { from { opacity: 0; transform: scale(.4); } }
@keyframes starring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
.win-title { text-shadow: 0 2px 0 rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) { .sheet.win .stars::before { animation: none; } .screen { transition: opacity .2s; transform: none !important; } }
.alb.lock canvas { filter: saturate(.25); opacity: .75; }
.alb canvas.mosaic { border-radius: 8px; box-shadow: 0 3px 8px rgba(60,34,12,.2); }
.board-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }