@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(assets/fonts/rubik-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300 900; font-display: swap; src: url(assets/fonts/rubik-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --bg: #0b0718; --panel: #1d1540; --accent: #FFD23F; --accent2: #FF5DA2; --cyan: #28D3E8; --text: #fff; --gscale: 1; --goffx: 0px; --goffy: 0px; --gw: 100vw; --gh: 100vh; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; height: 100dvh; width: 100%; position: fixed; inset: 0; background: var(--bg); color: var(--text); font-family: Rubik, system-ui, -apple-system, sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; }
#game { position: fixed; inset: 0; display: block; touch-action: none; }
/* Touch policy: the canvas/HUD swallow gestures, scrollable screens pan vertically only, controls are tap-optimized. */
#ui .screen { touch-action: none; }
#ui .screen.scroll { touch-action: pan-y; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.btn, .island, .herocard, .item, .card, .superbtn, .tabs, #repeat, input { touch-action: manipulation; }
#hud, #hud > * { touch-action: none; }
input[type=range] { touch-action: pan-x; }
/* UI layer is positioned over the logical game area so it scales with the canvas */
#ui { position: fixed; left: var(--goffx); top: var(--goffy); width: var(--gw); height: var(--gh); pointer-events: none; font-size: calc(16px * var(--gscale)); }
#ui > * { pointer-events: auto; }
#ui .pass { pointer-events: none; }
#ui .pass > * { pointer-events: auto; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(16px * var(--gscale)); padding-top: max(calc(16px * var(--gscale)), env(safe-area-inset-top)); padding-bottom: max(calc(16px * var(--gscale)), env(safe-area-inset-bottom)); overflow: hidden; }
.screen.scroll { overflow-y: auto; }
.screen.dim { background: rgba(8, 4, 24, 0.82); }
.screen.solid { background: linear-gradient(180deg, #1d1540, #0b0718); }
.screen.transparent { background: transparent; }
h1.title { font-size: 2.4em; font-weight: 900; margin: .3em 0; text-align: center; text-shadow: 0 .12em 0 rgba(0,0,0,.35); color: var(--accent); }
h2 { font-size: 1.5em; font-weight: 900; margin: .3em 0; text-align: center; }
p.sub { font-size: 1.05em; opacity: .9; margin: .2em 0; text-align: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: calc(56px * var(--gscale)); padding: .5em 1.2em; font: inherit; font-weight: 900; font-size: 1.25em; color: #1a0b3d; background: var(--accent); border: 0; border-radius: 1em; box-shadow: 0 .25em 0 rgba(0,0,0,.3), inset 0 -.2em 0 rgba(0,0,0,.12); cursor: pointer; transition: transform .08s; margin: .25em; }
.btn:active { transform: translateY(.15em); box-shadow: 0 .1em 0 rgba(0,0,0,.3); }
.btn.big { font-size: 1.7em; padding: .5em 1.6em; border-radius: 1em; }
.btn.pink { background: var(--accent2); color: #fff; } .btn.cyan { background: var(--cyan); color: #06333a; } .btn.ghost { background: rgba(255,255,255,.12); color: #fff; } .btn.green { background: #5CCB3A; color: #0f3306; } .btn.red { background: #ff4d4d; color: #fff; }
.btn.pulse { animation: pulse 1.2s ease-in-out infinite; }
.btn[disabled] { opacity: .45; filter: grayscale(.6); }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.btn.icon { min-width: calc(56px * var(--gscale)); padding: .4em; border-radius: 50%; font-size: 1.4em; }
.row { display: flex; gap: .5em; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; }
.col { display: flex; flex-direction: column; gap: .5em; align-items: stretch; width: 100%; }
.grow { flex: 1; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; width: 100%; max-width: calc(380px * var(--gscale)); }
.menu-grid .btn { flex-direction: column; font-size: .95em; padding: .5em .2em; min-height: calc(70px * var(--gscale)); gap: .1em; }
.menu-grid .btn .ic { font-size: 1.7em; line-height: 1; }
.panel { background: var(--panel); border-radius: 1.2em; padding: 1em; width: 100%; max-width: calc(380px * var(--gscale)); box-shadow: 0 .5em 2em rgba(0,0,0,.5); }
.face { width: 3.5em; height: 3.5em; border-radius: 50%; object-fit: cover; background: #333; }
.face.big { width: 6em; height: 6em; } .face.huge { width: 9em; height: 9em; }
/* HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }
.hud-top .hpbar { flex: 1; }
.hud-top { position: absolute; top: max(calc(8px * var(--gscale)), env(safe-area-inset-top)); left: .5em; right: .5em; display: flex; align-items: center; gap: .5em; }
.hpbar { flex: 1 1 auto; min-height: calc(22px * var(--gscale)); height: calc(22px * var(--gscale)); background: rgba(0,0,0,.5); border-radius: 1em; overflow: hidden; position: relative; border: 2px solid rgba(255,255,255,.25); }
.hpbar .fill { position: absolute; inset: 0; width: 100%; background: linear-gradient(90deg, #ff4d6d, #ff8fa3); transition: width .15s; transform-origin: right; }
.hpbar .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85em; font-weight: 900; text-shadow: 0 1px 2px #000; }
.pill { background: rgba(0,0,0,.5); border-radius: 1em; padding: .15em .6em; font-weight: 900; font-size: .95em; white-space: nowrap; border: 2px solid rgba(255,255,255,.2); }
.pill.coins { color: var(--accent); }
.btn.pausebtn { min-height: calc(40px * var(--gscale)); min-width: calc(40px * var(--gscale)); padding: 0; font-size: 1.1em; margin: 0; background: rgba(0,0,0,.5); color: #fff; border-radius: .6em; }
.superbtn { position: absolute; bottom: max(calc(20px * var(--gscale)), env(safe-area-inset-bottom)); left: calc(16px * var(--gscale)); width: calc(78px * var(--gscale)); height: calc(78px * var(--gscale)); border-radius: 50%; border: 4px solid rgba(255,255,255,.4); background: conic-gradient(var(--accent) calc(var(--charge) * 1%), rgba(0,0,0,.55) 0); display: flex; align-items: center; justify-content: center; font-size: 2em; box-shadow: 0 .3em 1em rgba(0,0,0,.5); }
.superbtn .inner { width: 80%; height: 80%; border-radius: 50%; background: #1d1540; display: flex; align-items: center; justify-content: center; }
.superbtn.ready { animation: glow 1s ease-in-out infinite; border-color: #fff; }
.superbtn.ready .inner { background: var(--accent2); }
@keyframes glow { 0%,100% { box-shadow: 0 0 .5em var(--accent); transform: scale(1); } 50% { box-shadow: 0 0 1.5em var(--accent), 0 0 2.5em var(--accent2); transform: scale(1.08); } }
.bossbar { position: absolute; top: calc(44px * var(--gscale) + env(safe-area-inset-top)); left: 1em; right: 1em; }
.bossbar .name { text-align: center; font-weight: 900; font-size: 1em; text-shadow: 0 2px 0 #000; color: #ffb3c6; }
.bossbar .bar { height: calc(16px * var(--gscale)); border-radius: 1em; background: rgba(0,0,0,.6); border: 2px solid #fff3; overflow: hidden; }
.bossbar .bar .fill { height: 100%; width: 100%; background: linear-gradient(90deg, #b10dc9, #ff4136); transition: width .1s; }
/* Upgrade cards */
.cards { display: flex; gap: .6em; justify-content: center; width: 100%; padding: 0 .3em; }
.card { flex: 1; min-width: 0; background: var(--panel); border-radius: 1em; padding: 1em .4em; display: flex; flex-direction: column; align-items: center; gap: .4em; text-align: center; border: 3px solid #556; cursor: pointer; transform: translateY(40px) scale(.9); opacity: 0; animation: cardIn .4s cubic-bezier(.2,1.4,.4,1) forwards; min-height: calc(190px * var(--gscale)); justify-content: center; }
.card:nth-child(2) { animation-delay: .08s; } .card:nth-child(3) { animation-delay: .16s; }
@keyframes cardIn { to { transform: none; opacity: 1; } }
.card .ic { font-size: 2.6em; line-height: 1; filter: drop-shadow(0 .1em 0 rgba(0,0,0,.4)); }
.card .nm { font-weight: 900; font-size: 1em; line-height: 1.15; }
.card .rar { font-size: .75em; opacity: .85; padding: .1em .6em; border-radius: 1em; background: rgba(0,0,0,.3); }
.card.common { border-color: #9aa; } .card.rare { border-color: #4fc3ff; box-shadow: 0 0 1em #4fc3ff88; } .card.epic { border-color: #e040fb; box-shadow: 0 0 1.4em #e040fbaa; background: linear-gradient(180deg, #3a1d5e, #1d1540); }
.card:active { transform: scale(.96); }
/* Toasts */
#toasts { position: fixed; left: var(--goffx); top: calc(var(--goffy) + 90px * var(--gscale)); width: var(--gw); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: .4em; z-index: 10; font-size: calc(16px * var(--gscale)); }
.toast { display: flex; align-items: center; gap: .6em; background: rgba(20, 12, 50, .92); border: 2px solid rgba(255,255,255,.25); border-radius: 2em; padding: .5em 1em .5em .6em; font-weight: 700; animation: toastIn .3s cubic-bezier(.2,1.4,.4,1), toastOut .3s ease-in forwards; animation-delay: 0s, var(--life, 2.6s); max-width: 92%; box-shadow: 0 .4em 1em rgba(0,0,0,.4); }
.toast img { width: 2.4em; height: 2.4em; border-radius: 50%; }
.toast.gold { border-color: var(--accent); background: linear-gradient(90deg, #4a3a00, #1d1540); }
@keyframes toastIn { from { transform: translateY(-20px) scale(.8); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }
/* Map */
.map-list { display: flex; flex-direction: column-reverse; gap: 1em; width: 100%; max-width: calc(380px * var(--gscale)); padding: 1em 0 3em; position: relative; }
.island { position: relative; display: flex; align-items: center; gap: .8em; background: var(--panel); border-radius: 1.4em; padding: .8em 1em; border: 3px solid transparent; cursor: pointer; }
.island:nth-child(odd) { margin-inline-start: 2em; } .island:nth-child(even) { margin-inline-end: 2em; }
.island.locked { filter: grayscale(.9) brightness(.6); } .island.current { border-color: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
.island.cleared { border-color: #5CCB3A; }
.island .ic { width: 3.6em; height: 3.6em; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6em; flex-shrink: 0; }
.island .nm { font-weight: 900; font-size: 1.1em; } .island .stars { color: var(--accent); font-size: 1em; letter-spacing: .1em; }
.island .cage { margin-inline-start: auto; position: relative; } .island .cage img { width: 3em; height: 3em; border-radius: 50%; }
.island .cage::after { content: ''; position: absolute; inset: -.2em; border-radius: 50%; background: repeating-linear-gradient(90deg, transparent 0 .45em, rgba(40,20,60,.9) .45em .65em); mask: radial-gradient(circle, #000 60%, transparent 62%); -webkit-mask: radial-gradient(circle, #000 60%, transparent 62%); }
.island.cleared .cage::after { display: none; }
.island .lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2em; }
/* Hero select */
.hero-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; width: 100%; max-width: calc(380px * var(--gscale)); }
.herocard { background: var(--panel); border-radius: 1em; padding: .6em .3em; display: flex; flex-direction: column; align-items: center; gap: .3em; border: 3px solid transparent; cursor: pointer; }
.herocard.sel { border-color: var(--accent); } .herocard.locked { filter: grayscale(1) brightness(.6); }
.herocard .nm { font-weight: 900; } .herocard .lv { font-size: .8em; opacity: .8; }
.bars { width: 100%; display: flex; flex-direction: column; gap: .25em; font-size: .8em; }
.bars .b { display: flex; align-items: center; gap: .4em; } .bars .b .lbl { width: 3.6em; opacity: .85; text-align: right; }
.bars .b .tr { flex: 1; height: .7em; background: rgba(0,0,0,.4); border-radius: 1em; overflow: hidden; } .bars .b .tr i { display: block; height: 100%; border-radius: 1em; }
/* Dialog / briefing */
.radio { display: flex; flex-direction: column; align-items: center; gap: .6em; width: 100%; max-width: calc(380px * var(--gscale)); }
.radio .frame { position: relative; width: 9em; height: 9em; border-radius: 1em; border: 4px solid #4fc3ff; overflow: hidden; background: #012; box-shadow: 0 0 1.5em #4fc3ff66; }
.radio .frame img { width: 100%; height: 100%; object-fit: cover; }
.radio .frame::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); pointer-events: none; animation: scan 6s linear infinite; }
@keyframes scan { from { background-position: 0 0; } to { background-position: 0 100px; } }
.radio .name { color: #4fc3ff; font-weight: 900; }
.bubble { background: #fff; color: #1a0b3d; border-radius: 1.2em; padding: 1em 1.2em; font-size: 1.3em; font-weight: 700; min-height: 4.5em; width: 100%; position: relative; line-height: 1.4; }
.bubble::before { content: ''; position: absolute; top: -1em; right: 3em; border: .6em solid transparent; border-bottom-color: #fff; border-top: 0; }
/* lists */
.list { display: flex; flex-direction: column; gap: .5em; width: 100%; max-width: calc(380px * var(--gscale)); }
.item { display: flex; align-items: center; gap: .7em; background: var(--panel); border-radius: 1em; padding: .6em .8em; }
.item .nm { font-weight: 900; } .item .ds { font-size: .85em; opacity: .8; } .item .grow { flex: 1; min-width: 0; }
.item.locked { opacity: .5; } .item.done { border: 2px solid #5CCB3A; }
.badge { font-size: 1.8em; width: 1.6em; text-align: center; }
.crown { font-size: 1.3em; }
.tabs { display: flex; gap: .3em; width: 100%; max-width: calc(380px * var(--gscale)); }
.tabs .btn { flex: 1; font-size: 1em; min-height: calc(44px * var(--gscale)); margin: 0; }
.tabs .btn.ghost.on { background: var(--accent); color: #1a0b3d; }
.slider { width: 100%; display: flex; align-items: center; gap: .6em; } .slider input { flex: 1; height: 2em; }
input[type=range] { accent-color: var(--accent); }
.toggle { font-size: 1em; }
.lbl-big { font-size: 1.1em; font-weight: 700; }
.rankframe { position: relative; display: inline-block; }
.rankframe img { border: .3em solid var(--rank, #CD7F32); box-shadow: 0 0 1em var(--rank, #CD7F32); }
.rankframe .rk { position: absolute; bottom: -.4em; left: 50%; transform: translateX(-50%); background: var(--rank); color: #000; font-size: .7em; font-weight: 900; padding: .1em .6em; border-radius: 1em; white-space: nowrap; }
.center { text-align: center; }
.sparkle { position: absolute; pointer-events: none; font-size: 1.4em; animation: sparkle .9s ease-out forwards; }
@keyframes sparkle { 0% { transform: translate(0,0) scale(.4); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; } }
.typed::after { content: '▌'; animation: blink .8s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }
.cardflip { perspective: 800px; } .cardflip .inner { transform-style: preserve-3d; animation: flip .9s cubic-bezier(.3,1.3,.5,1) forwards; }
@keyframes flip { from { transform: rotateY(180deg) scale(.6); } to { transform: rotateY(0) scale(1); } }
.unlock-card { background: linear-gradient(160deg, #3a1d5e, #1d1540); border: 4px solid var(--accent); border-radius: 1.5em; padding: 1.2em; display: flex; flex-direction: column; align-items: center; gap: .5em; width: 100%; max-width: calc(320px * var(--gscale)); box-shadow: 0 0 2em var(--accent)88; }
.crop-wrap { position: relative; width: 14em; height: 14em; border-radius: 50%; overflow: hidden; background: #000; touch-action: none; border: 4px solid #fff; }
.crop-wrap canvas { width: 100%; height: 100%; }
input.txt { font: inherit; font-size: 1.2em; padding: .4em .8em; border-radius: .8em; border: 2px solid #556; background: #0b0718; color: #fff; width: 100%; text-align: center; }
.cine-video { position: absolute; left: 0; top: 0; width: 100%; height: 86%; object-fit: cover; background: #0b0718; pointer-events: none; }
#repeat { position: fixed; right: max(10px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 9; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); background: rgba(20,12,50,.75); font-size: 20px; color: #fff; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
#repeat:active { transform: scale(.92); }
#debug { position: fixed; top: 0; left: 0; z-index: 20; background: rgba(0,0,0,.85); color: #0f0; font: 12px monospace; padding: 6px; max-width: 50vw; direction: ltr; }
#debug button { font: inherit; margin: 2px; }
.fade-in { animation: fadeIn .4s ease-out; } @keyframes fadeIn { from { opacity: 0; } }
.hidden { display: none !important; }