/* Round 2b polish: the room behind every screen, directional screen transitions, glazed cards, animated path
   trail, win star burst, type hierarchy. Same tokens, 8 px grid. Reduced motion is honoured (styles.css). */
#app { background: var(--room, none) center / cover no-repeat, radial-gradient(120% 80% at 50% 30%, var(--bg1), var(--bg0)); }
#gameScreen { background: transparent; }

/* screens slide in the direction you travel (mirrored in Arabic) */
body[data-nav=fwd] .screen.on { animation: scrFwd .34s cubic-bezier(.2,.8,.2,1); }
body[data-nav=back] .screen.on { animation: scrBack .34s cubic-bezier(.2,.8,.2,1); }
#gameScreen.on { animation: scrGame .36s cubic-bezier(.2,.8,.2,1) !important; }
@keyframes scrFwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes scrBack { from { opacity: 0; transform: translateX(-28px); } }
[dir=rtl] body[data-nav=fwd] .screen.on, body[dir=rtl][data-nav=fwd] .screen.on { animation-name: scrBack; }
[dir=rtl] body[data-nav=back] .screen.on, body[dir=rtl][data-nav=back] .screen.on { animation-name: scrFwd; }
@keyframes scrGame { from { opacity: 0; transform: scale(1.04); } }

/* type hierarchy */
.mark { background: linear-gradient(180deg, #FFF8EA 20%, var(--accent) 120%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
.chname small { letter-spacing: .14em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
[dir=rtl] .chname small { letter-spacing: 0; font-size: 13px; }
.chname b { font-size: 22px; }
.panel .h.big { font-size: 40px; font-weight: 800; background: linear-gradient(180deg, #FFF8EA, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* glazed ceramic cards: lit top edge, darker foot, soft cast shadow; icon sits in a small glazed medallion */
.mode, .strip, .pill, .ib, .sq { position: relative; }
.mode { background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.015) 55%, rgba(0,0,0,.12)), var(--panel);
  border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -3px 0 rgba(0,0,0,.28), 0 8px 18px rgba(0,0,0,.28);
  transition: transform .14s cubic-bezier(.3,1.6,.5,1), box-shadow .14s; }
.mode .ic { width: 36px; height: 36px; padding: 6px; border-radius: 50%; box-sizing: border-box; color: var(--accent);
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.16), rgba(255,255,255,.03) 60%), rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3); }
.mode span { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.mode:active { transform: scale(.93) translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.25); }
.strip { background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--panel); border-color: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 6px 14px rgba(0,0,0,.22); }
.cta { position: relative; overflow: hidden; box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -4px 0 rgba(120,60,0,.35), 0 10px 24px rgba(0,0,0,.35); }
.cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%);
  transform: translateX(-120%); animation: sheen 4.5s ease-in-out 1.2s infinite; pointer-events: none; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* home: things arrive in order */
#home.on .hero { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
#home.on .actions > * { animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
#home.on .actions > :nth-child(1) { animation-delay: .06s; } #home.on .actions > :nth-child(2) { animation-delay: .12s; } #home.on .actions > :nth-child(3) { animation-delay: .18s; }
#home.on .mode { animation: rise .4s cubic-bezier(.2,.8,.2,1) both; }
#home.on .mode:nth-child(n+5) { animation-delay: .2s; } #home.on .mode:nth-child(-n+4) { animation-delay: .14s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

/* path: an inlaid trail through the 12 levels (snake), gilt up to where you are */
.trail { position: relative; width: 304px; height: 240px; margin: 16px auto calc(24px + var(--sab)); flex: none; }
.trail svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[dir=rtl] .trail svg { transform: scaleX(-1); }
.trail polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trail .tr0 { stroke: rgba(255,255,255,.12); stroke-width: 6; stroke-dasharray: 2 12; animation: march 1.2s linear infinite; }
.trail .tr1 { stroke: var(--accent); stroke-width: 6; opacity: .85; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw .9s .15s cubic-bezier(.4,0,.2,1) forwards;
  filter: drop-shadow(0 0 4px rgba(255,200,120,.35)); }
@keyframes march { to { stroke-dashoffset: -14; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.trail .node { position: absolute; left: calc(var(--x) - 32px); top: calc(var(--y) - 32px); animation: nodeIn .42s cubic-bezier(.3,1.5,.5,1) both; animation-delay: calc(var(--k) * 35ms); }
[dir=rtl] .trail .node { left: auto; right: calc(var(--x) - 32px); }
@keyframes nodeIn { from { opacity: 0; transform: scale(.4); } }
.node { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -3px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.35); }
.node.won { background: linear-gradient(180deg, #2C4A7A, #1C2E52); border-color: #3F5F96; }
.node.cur { outline: none; animation: nodeIn .42s cubic-bezier(.3,1.5,.5,1) both, glow 1.8s ease-in-out .5s infinite; animation-delay: calc(var(--k) * 35ms), .5s; }
.node.cur::before { content: ''; position: absolute; inset: -7px; border-radius: 26px; border: 3px solid var(--gold); opacity: .9; animation: halo 1.8s ease-out infinite; }
@keyframes glow { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 22px rgba(255,190,90,.55); } }
@keyframes halo { from { transform: scale(.92); opacity: .95; } to { transform: scale(1.18); opacity: 0; } }
.node i s { filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }

/* win: each star lands with a burst of light rays and a spark ring */
.stars { margin: 8px 0 4px; }
.st { position: relative; }
.st.on::before { content: ''; position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,214,140,.55) 0 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 68%); mask: radial-gradient(circle, transparent 18%, #000 30%, transparent 68%);
  opacity: 0; animation: rays .9s ease-out both; animation-delay: calc(450ms + var(--k) * 260ms); }
.st.on::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 -34px 0 -2px #FFE6A8, 24px -24px 0 -3px #FFD27A, 34px 0 0 -2px #FFE6A8, 24px 24px 0 -3px #FFD27A, 0 34px 0 -2px #FFE6A8, -24px 24px 0 -3px #FFD27A, -34px 0 0 -2px #FFE6A8, -24px -24px 0 -3px #FFD27A;
  opacity: 0; animation: sparks .7s ease-out both; animation-delay: calc(470ms + var(--k) * 260ms); }
@keyframes rays { 0% { opacity: 0; transform: scale(.4) rotate(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25) rotate(25deg); } }
@keyframes sparks { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } }
.result .sc { text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.cta.auto.run .cd circle { animation-duration: 2.6s; }

/* sheets: a fine gilt rule with a star at the top edge */
.panel::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(241,174,58,.55), transparent); }

/* home: each mode wears its own glaze (the tile colours), icon in ivory on a glossy medallion */
.modes .mode .ic { color: #FFF8EA; --g: #3557B7;
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), rgba(255,255,255,0) 34%), radial-gradient(circle at 50% 60%, var(--g), color-mix(in srgb, var(--g) 70%, #000) 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.35), 0 2px 4px rgba(0,0,0,.35); }
.modes .mode:nth-child(1) .ic { --g: #139E9C; } .modes .mode:nth-child(2) .ic { --g: #3557B7; } .modes .mode:nth-child(3) .ic { --g: #E09A2A; }
.modes .mode:nth-child(4) .ic { --g: #2E9E63; } .modes .mode:nth-child(5) .ic { --g: #9150AE; } .modes .mode:nth-child(6) .ic { --g: #DC5F3E; }
.modes .mode:nth-child(7) .ic { --g: #B4825A; } .modes .mode:nth-child(8) .ic { --g: #4EA6E6; }
/* hero: warm light behind the emblem and a slow carved star ring */
.hero { position: relative; }
.hero::before { content: ''; position: absolute; left: 50%; top: 0; width: min(80vw, 340px, 38vh); aspect-ratio: 1; transform: translate(-50%, -8%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%); }
.hero::after { content: ''; position: absolute; left: 50%; top: 0; width: min(68vw, 300px, 33vh); aspect-ratio: 1; margin-left: calc(min(68vw, 300px, 33vh) / -2); margin-top: calc(min(68vw, 300px, 33vh) * -.08); pointer-events: none; opacity: .14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'%3E%3Cg fill='none' stroke='%23F1AE3A' stroke-width='.6'%3E%3Ccircle r='48'/%3E%3Ccircle r='44'/%3E%3Cpath d='M0-44 9-22 31-31 22-9 44 0 22 9 31 31 9 22 0 44-9 22-31 31-22 9-44 0-22-9-31-31-9-22Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#emblem, .hero .mark, .hero .bestline { position: relative; z-index: 1; }