/* app.css — additions for the real client (on top of meta.css = prototype 28's stylesheet). * Onboarding layout: no top bar / no nav at the start (body.notop / body.nonav), growing nav, finger guidance, * reduced home, zone path, result, NOUVEAU moment, combat frame. */ @font-face { font-family: "Anton"; src: url("../fonts/Anton-Regular.ttf") format("truetype"); font-display: block; } @font-face { font-family: "Teko"; src: url("../fonts/Teko.ttf") format("truetype"); font-weight: 300 700; font-display: block; } @font-face { font-family: "Luckiest"; src: url("../fonts/LuckiestGuy-Regular.ttf") format("truetype"); font-display: block; } #safe { position: fixed; left: env(safe-area-inset-left); right: env(safe-area-inset-right); top: env(safe-area-inset-top); bottom: env(safe-area-inset-bottom); touch-action: manipulation; } /* tablet / desktop (body.wide, set by fit() in core.js): the portrait stage stays 390×844, scaled + centred; around it a calm, blurred zone backdrop (art from the catalogue, --deskart). A real desktop layout is a later task (GDD). */ #deskbg { position: fixed; inset: -60px; display: none; background: radial-gradient(60% 70% at 50% 50%, rgba(3,4,9,0), rgba(3,4,9,.85)), var(--deskart, none) center / cover no-repeat; filter: blur(28px) saturate(1.2) brightness(.5); } body.wide #deskbg { display: block; } body.wide #stage { border-radius: 26px; box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 0 0 6px rgba(3,4,9,.55), 0 30px 90px rgba(0,0,0,.7); } .hide { display: none !important; } body.nonav:not(.immersive) #coco { transform: translateY(73px); } body.nonav:not(.immersive) .cclip { height: 771px; } .tb-sp { flex: 1; } .tb-cur { flex: 0 0 auto; min-width: 96px; } body.notop #topbar { display: none; } body.nonav #nav { display: none; } body.notop .scr:not(.full) { top: 0; height: 770px; padding-top: 16px; } body.nonav .scr:not(.full) { height: 786px; } body.notop.nonav .scr:not(.full) { height: 844px; } body.booting #view, body.booting #topbar, body.booting #nav, body.booting #coco { visibility: hidden; } #boot { position: absolute; inset: 0; z-index: 95; display: grid; place-content: center; gap: 10px; text-align: center; background: var(--bg2); } #boot .bt-logo { justify-self: center; width: min(330px, 84vw); height: 190px; } /* brand logo (core.js BRAND): the image, else the text fallback */ .brand { position: relative; display: grid; place-items: center; } .brand img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); transition: scale .2s, rotate .2s; } .brand .brand-t { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 400 44px/.92 var(--pop); letter-spacing: 1px; color: var(--y); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); rotate: -4deg; } .brand img + .brand-t { visibility: hidden; } .nav-brand { display: none; } #boot .bt-msg { font: 600 20px/1.1 var(--ui); color: #cfd4ee; text-transform: uppercase; letter-spacing: .6px; padding: 0 30px; } /* ---------- finger guidance: glowing outline on the target + a hand whose tip touches its lower right ---------- */ #finger i { left: -15px; top: -15px; width: 30px; height: 30px; background: rgba(255,210,26,.35); border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--ink); animation: fring 1s ease-out infinite; } #finger b { position: absolute; left: -9px; top: -3px; width: 50px; height: 50px; filter: drop-shadow(0 4px 2px rgba(0,0,0,.5)); } #finger b svg { width: 100%; height: 100%; rotate: -24deg; transform-origin: 30% 10%; } @keyframes fring { 0% { scale: .6; opacity: 1; } 100% { scale: 1.6; opacity: 0; } } .hint-ring { outline: 4px solid rgba(255,210,26,.95); outline-offset: 3px; animation: hglow 1s ease-in-out infinite alternate; } @keyframes hglow { from { outline-color: rgba(255,210,26,.95); outline-offset: 3px; } to { outline-color: rgba(255,255,255,.95); outline-offset: 7px; } } .nb.hint-ring { outline: 0; animation: none; } .nb.hint-ring .nic { outline: 4px solid rgba(255,210,26,.95); outline-offset: 2px; animation: hglow 1s ease-in-out infinite alternate; } .card.hint-ring, .dc.hint-ring { outline-offset: 5px; } /* ---------- reduced home (first launch): Axo + one big button ---------- */ .hm-first { background: radial-gradient(70% 40% at 50% 34%, rgba(255,210,26,.12), transparent 70%); } .hm-first .hm-hello { position: absolute; left: 0; right: 0; top: 54px; text-align: center; } .hm-hello small { display: block; font: 600 22px/1 var(--ui); color: #cfd4ee; text-transform: uppercase; letter-spacing: 1px; } .hm-hello b { display: block; margin-top: 4px; font: 400 40px/1 var(--pop); color: var(--y); rotate: -2deg; } .hm-first .hm-zone { position: absolute; left: 28px; right: 28px; top: 150px; height: 230px; border-radius: 26px; background: #222 center 40% / cover no-repeat; overflow: hidden; rotate: 1.2deg; } .hm-zone .hz-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,16,0) 35%, rgba(5,6,16,.9)); } .hm-zone .tag { position: absolute; left: 12px; top: 12px; padding: 3px 10px 0; border-radius: 10px; background: var(--y); color: var(--ink); border: 2.5px solid #fff; font: 400 15px/18px var(--pop); } .hm-zone b { position: absolute; left: 14px; right: 14px; bottom: 46px; font: 400 30px/1 var(--pop); } .hm-zone i { position: absolute; left: 14px; right: 14px; bottom: 12px; font: normal 600 17px/1.05 var(--ui); color: #e6e9f7; } .hm-first .hm-fight { position: absolute; left: 40px; right: 40px; top: 412px; height: 84px; border-radius: 24px; font-size: 34px; gap: 10px; animation: pulse 1.4s infinite; } .hm-first .hm-fight svg { font-size: 36px; } @keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } } /* ---------- home (later): gift or hero · adventure · shortcuts stacked right of Axo (28's sc-det layout) ---------- */ .hm-gift { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; height: 150px; margin-top: 10px; padding: 0 12px 0 4px; border-radius: 22px; background: linear-gradient(160deg, #ff7ac0, #9b1f6a); text-align: left; animation: pulse 1.6s infinite; } .hm-gift img { height: 146px; margin-top: -12px; rotate: -8deg; flex: none; } .hm-gift .tx { flex: 1; min-width: 0; } .hm-gift .tx small { display: block; font: 400 13px/1 var(--pop); letter-spacing: .8px; color: #ffe0f2; } .hm-gift .tx b { display: block; font: 400 23px/1.02 var(--pop); margin-top: 4px; } .hm-gift .tx i { display: block; margin-top: 4px; font: normal 600 16px/1.02 var(--ui); color: #fff; text-transform: uppercase; } .hm-gift .play { width: 54px; height: 54px; border-radius: 50%; background: var(--y); color: var(--ink); display: grid; place-items: center; font-size: 26px; border: 3px solid #fff; flex: none; } .home .adv .tx { min-width: 0; flex: 1; } .home .adv .tx b { overflow: hidden; text-overflow: ellipsis; } .home .adv .tx i { display: flex; align-items: center; gap: 4px; } .sc-det .home .pills, .sc-bul .home .pills { grid-template-columns: 1fr; gap: 7px; margin: 12px 0 0 176px; } .sc-bul .home .pill { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 9px; align-content: center; justify-items: start; height: 56px; padding: 0 8px; text-align: left; } .sc-bul .home .pill .pi { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; font-size: 21px; } .pill.pdk { background: linear-gradient(170deg, #4a2a0c, #1c1006); } .pill.pdk .pi { background: var(--orange); } .pill.shop .pi { background: var(--pink); color: #fff; } .pill.shop { background: linear-gradient(170deg, #4a1430, #1b0a14); } .pill.alb { background: linear-gradient(170deg, #0f3550, #07141f); } .pill.alb .pi { background: #33d6ff; } .pill.soon { background: rgba(11,13,28,.75); border-style: dashed; opacity: .92; } .pill.soon .pi { background: #3a3f5c; color: #cfd4ee; } .pill.soon i { color: var(--y); } /* ---------- zone path ---------- */ .zn .fpath { height: 186px; margin-top: 10px; } .zn .bosslab { right: auto; left: 214px; top: 160px; } .zfoe { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 18px; background: rgba(11,13,28,.88); } .zf-av { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; background: var(--rc) center 18% / 240% no-repeat; flex: none; box-shadow: 0 3px 0 rgba(0,0,0,.5); } .zf-tx { min-width: 0; } .zf-tx small { display: block; font: 600 15px/1 var(--ui); color: #ffd6b8; text-transform: uppercase; letter-spacing: .4px; } .zf-tx b { display: block; font: 400 21px/1.05 var(--pop); margin-top: 2px; } .zf-tx i { display: block; font: normal 600 16px/1 var(--ui); color: #b9bfdc; text-transform: uppercase; } .zn .fight-row { margin-top: 12px; } .fn .st { letter-spacing: -1px; } .ztile .zs.soon { color: #cfd4ee; font-size: 12px; } /* ---------- combat (22 in an isolated frame, full viewport like 22's own page) ---------- */ #combatFrame { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 200; background: #05060c; } .cmb-wait { display: grid; place-items: center; background: radial-gradient(60% 40% at 50% 45%, #2b1a3a, #05060c); } .cw-box { text-align: center; } .cw-vs { font-size: 44px; color: var(--y); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; animation: pulse 1s infinite; } .cw-t { margin-top: 8px; font: 600 20px/1 var(--ui); text-transform: uppercase; color: #cfd4ee; letter-spacing: .6px; } /* ---------- result ---------- */ .rs { text-align: center; overflow: hidden; } .rs-rays { position: absolute; left: 50%; top: 150px; width: 900px; height: 900px; margin: -450px 0 0 -450px; border-radius: 50%; pointer-events: none; background: repeating-conic-gradient(rgba(255,210,26,.10) 0 9deg, transparent 9deg 18deg); } .rs.lose .rs-rays { background: repeating-conic-gradient(rgba(120,140,255,.07) 0 9deg, transparent 9deg 18deg); } .rs-title { position: relative; margin-top: 18px; font: 400 54px/1 var(--pop); color: var(--y); rotate: -3deg; } .rs.lose .rs-title { color: #9fb6ff; } .rs-sub { position: relative; margin-top: 8px; font: 600 21px/1.05 var(--ui); text-transform: uppercase; color: #e6e9f7; letter-spacing: .5px; } .rs-sub b { color: var(--y); font-weight: 600; } .rs-stars { position: relative; display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .rs-star { width: 64px; height: 64px; display: grid; place-items: center; font-size: 60px; color: #2a2f4f; filter: drop-shadow(0 3px 0 rgba(0,0,0,.6)); } .rs-star:nth-child(2) { translate: 0 -12px; font-size: 70px; width: 74px; } .rs-star.on { color: var(--y); } .rs-star svg { stroke: #fff; stroke-width: 1.6px; } .rs-gains { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin: 18px 18px 0; padding: 14px 10px 12px; border-radius: 22px; background: rgba(11,13,28,.9); } .rg { display: flex; flex-direction: column; align-items: center; min-width: 74px; } .rg-i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 400 22px/1 var(--pop); border: 3px solid #fff; background: var(--ink); } .rg-i .ico-coin { font-size: 34px; } .rg-i.xp { background: linear-gradient(180deg, #5fd2ff, #1f8de6); } .rg-i.lvl { background: linear-gradient(180deg, #4ef08a, #19b052); } .rg b { margin-top: 5px; font: 400 26px/1 var(--num); letter-spacing: .4px; } .rg small { font: 600 15px/1 var(--ui); color: #b9bfdc; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; max-width: 110px; } .rg.gift img { height: 84px; margin: -18px 0 -6px; rotate: -6deg; } .rs-lvup { position: relative; margin-top: 12px; background: var(--green); color: var(--ink); height: 30px; font-size: 19px; } .rs-act { position: absolute; left: 20px; right: 20px; bottom: 180px; display: flex; gap: 10px; } .rs-act .btn { flex: 1; height: 62px; font-size: 24px; } body.nonav .rs-act { bottom: 200px; } /* ---------- NOUVEAU ! moment ---------- */ .nv { text-align: center; background: radial-gradient(60% 40% at 50% 38%, #2b2552, #07080f 75%); overflow: hidden; } .nv-rays { position: absolute; left: 50%; top: 330px; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; border-radius: 50%; background: repeating-conic-gradient(rgba(255,210,26,.13) 0 8deg, transparent 8deg 16deg); } .nv-stk { position: absolute; left: 0; right: 0; top: 70px; font-size: 58px; color: #fff; -webkit-text-stroke: 6px var(--red); paint-order: stroke fill; text-shadow: 0 6px 0 var(--ink); } .nv-ico { position: absolute; left: 50%; top: 190px; width: 170px; height: 170px; margin-left: -85px; border-radius: 40px; display: grid; place-items: center; font-size: 104px; color: var(--ink); background: var(--c); border-width: 5px; } .nv-t { position: absolute; left: 0; right: 0; top: 392px; font: 400 46px/1 var(--pop); color: var(--y); } .nv-d { position: absolute; left: 34px; right: 34px; top: 450px; margin: 0; font: 600 23px/1.1 var(--ui); color: #e6e9f7; text-transform: uppercase; letter-spacing: .3px; } .nv-go { position: absolute; left: 60px; right: 60px; top: 548px; height: 66px; font-size: 26px; } /* ---------- booster additions ---------- */ .brate.wl { padding: 8px 12px 10px; } .bsub { padding: 0 16px; } .packbox.hint-ring { outline: 0; animation: none; } .brate.wl p { margin: 4px 0 0; font: 600 17px/1.05 var(--ui); color: #e6e9f7; text-transform: uppercase; } .bsum .it.shine .card { box-shadow: 0 0 0 3px #fff, 0 0 22px 6px rgba(51,214,255,.8); } /* ---------- album: the new cards shine ---------- */ .card.fresh { box-shadow: 0 0 0 3px #fff, 0 0 16px 6px rgba(255,210,26,.85); } .newb { position: absolute; z-index: 5; left: -7px; top: 30px; transform: rotate(-14deg); padding: 2px 6px 0; border-radius: 7px; background: var(--red); border: 2px solid #fff; font: 400 11px/14px var(--pop); white-space: nowrap; } /* ---------- deck ---------- */ .dk .tcount { font: 400 20px/1 var(--num); width: 34px; text-align: center; } .dk .tier-tx { margin-top: 6px; font: 600 15px/1.05 var(--ui); color: #cfd4ee; text-transform: uppercase; letter-spacing: .3px; } .dk .dlist .card { --w: 80px; } .dk .dlist.pool .dli { opacity: .95; } .dk-empty { grid-column: 1 / -1; margin: 4px 0 0; font: 600 17px/1.1 var(--ui); color: #9aa2c8; text-transform: uppercase; } .dk-save { position: sticky; bottom: -14px; z-index: 4; margin: 14px -14px 0; padding: 26px 0 14px; display: flex; justify-content: center; background: linear-gradient(180deg, rgba(7,8,15,0), rgba(7,8,15,.92) 38%); pointer-events: none; } .dk-save .btn { pointer-events: auto; } .dk-save .btn { min-width: 230px; height: 56px; font-size: 22px; } .dk { padding-bottom: 120px; } /* ---------- shop ---------- */ .shp-load { margin-top: 30px; text-align: center; font: 600 20px/1 var(--ui); color: #9aa2c8; text-transform: uppercase; } .dc .pbtn.poor { background: linear-gradient(180deg, #4a5072, #2a2e48); box-shadow: 0 3px 0 #10121f; } .shp .packs { grid-template-columns: repeat(2, 1fr); } /* profile sheet: test tool */ .prof .ptest .btn { width: 100%; margin-top: 6px; } /* card name « Nom, épithète » (core.js cardHTML): the epithet goes on a 2nd, smaller line (set 1 legendaries) */ .card .nm:has(small) { flex-direction: column; gap: .14em; padding-top: 4%; } .card .nm small { display: block; font-size: .64em; letter-spacing: .03em; opacity: .9; } /* ---------- album: one tab per race, pages of 9 inside the race (arrows / dots / swipe / ←→), new cards highlighted ---------- */ .alb-races { display: flex; gap: 8px; margin-top: 8px; } .alb-race { position: relative; flex: 1; min-width: 0; height: 46px; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 6px; border-radius: 14px; border: 2.5px solid rgba(255,255,255,.45); background: rgba(11,13,28,.82); color: #fff; cursor: pointer; } .alb-race .ri { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--rc); color: var(--ink); display: grid; place-items: center; font-size: 17px; border: 2px solid #fff; } .alb-race b { flex: 1; min-width: 0; text-align: left; font: 400 19px/1 var(--pop); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; } .alb-race .n { flex: none; font: 400 18px/1 var(--num); color: #cfd4ee; } .alb-race.on { background: var(--rc); border-color: #fff; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.55); } .alb-race.on .ri { background: #fff; color: var(--rc); border-color: var(--ink); } .alb-race.on .n { color: var(--ink); } .alb-race .alb-new { position: absolute; right: -4px; top: -11px; padding: 2px 6px 0; border-radius: 8px; background: var(--red); border: 2px solid #fff; color: #fff; font: 400 11px/14px var(--pop); white-space: nowrap; rotate: 4deg; animation: albnb 1.2s ease-in-out infinite; } @keyframes albnb { 0%, 100% { scale: 1; } 50% { scale: 1.12; } } .alb2 { height: 458px; margin-top: 10px; } .alb2 .page { width: 366px; height: 458px; border-left-color: var(--rc); } .alb2 .page .grid { justify-content: center; padding: 14px 0 0; gap: 12px 14px; } .alb-nav { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .alb-pg { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); border: 3px solid #fff; display: grid; place-items: center; font-size: 22px; color: #fff; box-shadow: var(--sh); cursor: pointer; } .alb-pg:disabled { opacity: .3; cursor: default; } .alb-dots { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; } .alb-dots .lab { font: 600 16px/1 var(--ui); letter-spacing: 1px; color: #cfd4ee; } .alb-dots .row { display: flex; gap: 8px; } .alb-dots .dot { position: relative; width: 14px; height: 14px; padding: 0; border-radius: 50%; border: 2px solid #fff; background: rgba(255,255,255,.15); cursor: pointer; } .alb-dots .dot.on { background: #fff; scale: 1.2; } .alb-dots .dot.new::after { content: ""; position: absolute; right: -5px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 1.5px solid #fff; } /* card detail: keyword help lines (catalogue keyword_help = engine KEYWORD_HELP), engine v0.2 */ .txtbox .cdk-kw { margin-top: 5px; font: 500 16px/1.1 var(--ui); color: #3a3f5a; } .txtbox .cdk-kw b { color: #d9480f; font-weight: 700; } /* booster card back = the brand card back (core.js BRAND.cardBack) */ .cback.cb-brand { background: #2a1450; overflow: hidden; } .cback.cb-brand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; } /* language selector (profile window, first-open gate) — js/core.js langPickerHTML */ .lgp { margin-top: 12px; } .lgp small { display: block; margin-bottom: 7px; font: 400 13px/1 var(--pop); letter-spacing: .8px; color: #5d6386; text-transform: uppercase; } .lgp-row { display: flex; flex-wrap: wrap; gap: 6px; } .lgp-b { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px; border-radius: 12px; border: 2.5px solid var(--ink, #0b0d1c); background: #fff; color: #1b0f33; font: 600 14px/1 var(--ui); cursor: pointer; box-shadow: 0 3px 0 rgba(11,13,28,.35); } .lgp-b.on { background: #ffd21a; } .lgp-b:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(11,13,28,.35); } .legal-fr { font-size: .85em; opacity: .75; white-space: nowrap; } /* compact language selector of the first-open gate (#gateLang, core.js langSelectHTML): native