/* ===================================================================== SIGNAL COMBAT 3.0 · THE ROAD (the screens it adds) --------------------------------------------------------------------- The Road strip and the stops on it, the people on the Road (rows and their card), scenes, the den, Signal Packs, item mastery (finishes), techniques in the Locker, the journal. Same rules as game.css: dark glass, solid type, one orange for go, a land's colour (--c) for where you are. Placeholders for art that doesn't exist yet say so (ART PENDING). ===================================================================== */ /* ---------- 3.1 · the Road strip under the HUD is gone (the map and the card's arrows do its job). A sealed pack waits on the HUD ---------- */ /* 3.1 · a sealed pack on the HUD: the count on the button, a slow orange breath */ .v-hb.pk { position: relative; box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .6); animation: v-pk-hint 2.8s ease-in-out infinite; } .v-hb.pk .v-ic { width: 18px; height: 18px; color: var(--v-go); } .v-hb.pk em { font: 700 11px/1 var(--f-mono); font-style: normal; padding: 3px 5px; background: var(--v-go); color: #0A0A0A; } @media (max-width: 760px) { .v-hb.pk em { position: absolute; top: -6px; right: -6px; padding: 2px 4px; font-size: 10px; } } /* the narrowest phones with a pack waiting: your badge gives way to its face (name and level are one tap away) */ @media (max-width: 430px) { .v-hud:has(.v-hb.pk) .v-me-id { display: none; } .v-hud:has(.v-hb.pk) .v-me { padding-right: 6px; } } @keyframes v-pk-hint { 50% { box-shadow: inset 0 0 0 1px rgba(252, 76, 1, .9), 0 0 16px -4px rgba(252, 76, 1, .8); } } /* a card never grows wider than its place: its one column shrinks to fit, long titles wrap */ .v-place { grid-template-columns: minmax(0, 1fr); } .v-place-h > div:first-child { min-width: 0; } /* the card folds to its title (MAP): the whole world shows, the Road and where you are */ .v-place-fold { flex: none; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; margin-left: auto; box-shadow: inset 0 0 0 1px var(--v-line); font: 700 10.5px/1 var(--f-disp); letter-spacing: .14em; color: var(--ink-2); } .v-place-fold:hover { box-shadow: inset 0 0 0 1px var(--v-line-2); color: var(--ink); } .v-place-fold .v-ui { width: 16px; height: 16px; } .v-place:not(.fold) .v-place-fold span { display: none; } /* open: the chevron alone (its label is read out, and a tooltip) */ .v-place.fold .v-place-b, .v-place.fold .v-place-go, .v-place.fold .v-place-nav, .v-place.fold > header .v-pn { display: none; } .v-place.fold { max-height: none; } .v-place.fold .v-place-h { padding-bottom: 14px; } .v-place.fold .v-place-h h2 { font-size: clamp(22px, 2.4vw, 28px); } /* ---------- a stop on the Road: rows of who's here ---------- */ .v-chs { display: grid; gap: 6px; } .v-ch { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 58px; padding: 6px 12px 6px 6px; text-align: left; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--v-line); transition: box-shadow .15s, background-color .15s; } .v-ch:hover { background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--v-line-2); } .v-ch.next { box-shadow: inset 3px 0 0 var(--v-go), inset 0 0 0 1px rgba(252, 76, 1, .5); } .v-ch.shut { opacity: .55; } .v-ch.warden { background: color-mix(in srgb, var(--c) 7%, rgba(255, 255, 255, .02)); } .v-ch-face { position: relative; display: block; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; background: #0B0B10; box-shadow: 0 0 0 1.5px var(--c); } .v-ch-face > .sav, .v-ch-face > img, .v-ch-face > .v-flat { width: 150%; height: auto; margin: -8% 0 0 -25%; display: block; } .v-ch-face > img { width: 120%; margin: -6% 0 0 -10%; } .v-ch-face.q { display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--v-line-2); background: rgba(255, 255, 255, .03); } .v-ch-face.q .v-ui, .v-ch-face.q .v-ic { width: 20px; height: 20px; } .v-ch-id { display: grid; gap: 3px; min-width: 0; } .v-ch-id i { font: 600 10.5px/1.2 var(--f-text); letter-spacing: .12em; color: var(--dim); font-style: normal; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .v-ch-id b { font: italic 700 19px/1 var(--f-head); text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; } .v-ch-st { font: 700 10.5px/1.2 var(--f-disp); letter-spacing: .12em; color: var(--ink-2); text-align: right; max-width: 11ch; } .v-ch.next .v-ch-st { color: var(--v-go); } .v-ch.beat .v-ch-st { color: var(--v-ok); } .v-techtag { display: inline-flex; align-items: center; gap: 5px; font: 700 10.5px/1 var(--f-disp); letter-spacing: .1em; font-style: normal; color: var(--c); } .v-techtag .v-ic { width: 14px; height: 14px; } .v-tech-c { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; background: color-mix(in srgb, var(--c) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); } .v-tech-c > .v-ic { width: 30px; height: 30px; color: var(--c); } .v-tech-c > div { display: grid; gap: 5px; } .v-tech-c b { font: 700 16px/1.1 var(--f-disp); letter-spacing: .06em; } .v-tech-c .v-line b { font: 600 13.5px/1.4 var(--f-text); letter-spacing: 0; color: var(--ink); } .v-ch-big { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; } .v-ch-big .v-stage { width: 112px; } .v-ch-big .v-line { font-style: italic; color: var(--ink); } .v-wolf-moves { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .v-wolf-moves li { display: grid; gap: 3px; padding: 8px 10px; box-shadow: inset 0 0 0 1px var(--v-line); } .v-wolf-moves b { font: 700 12px/1 var(--f-disp); letter-spacing: .14em; color: var(--c); } .v-wolf-moves span { font: 400 12.5px/1.35 var(--f-text); color: var(--ink-2); } /* ---------- a portrait that doesn't exist yet: the series' cast, the W01VES (a signal mark, labelled) ---------- */ .v-castph { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; aspect-ratio: 1; width: 100%; padding: 10%; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--w, #C9C5C0) 26%, #15141B), #0C0B10 70%); box-shadow: inset 0 0 0 1px var(--v-line-2); border-radius: 50%; } .v-castph > i { width: 46%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px var(--w, #C9C5C0), 0 0 0 7px rgba(255, 255, 255, .04), 0 0 0 9px color-mix(in srgb, var(--w, #C9C5C0) 55%, transparent), 0 0 0 15px rgba(255, 255, 255, .03), 0 0 0 17px color-mix(in srgb, var(--w, #C9C5C0) 25%, transparent); animation: v-ph 3.2s ease-in-out infinite; } .v-castph > b { font: italic 700 clamp(13px, 2.6vw, 18px)/1 var(--f-head); color: var(--w, var(--ink)); letter-spacing: .02em; margin-top: 10%; } .v-castph > em { font: 700 9px/1 var(--f-disp); letter-spacing: .2em; font-style: normal; color: var(--dim); padding: 3px 5px; box-shadow: inset 0 0 0 1px var(--v-line); } .v-castph.wolf { --w: #9FB1C4; } .v-castph.wolf > i { box-shadow: none; background: radial-gradient(circle at 36% 50%, #FF3B30 0 6%, transparent 7%), radial-gradient(circle at 64% 50%, #FF3B30 0 6%, transparent 7%); filter: drop-shadow(0 0 6px #FF3B30); } @keyframes v-ph { 50% { transform: scale(1.06); } } /* ---------- a scene on the Road ---------- */ .v-scn { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; background: #08080C; } .v-scn-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .v-scn-bg img { position: absolute; left: 50%; top: 42%; width: max(110%, 900px); height: auto; transform: translate(-50%, -50%); opacity: .55; filter: saturate(1.05); animation: v-scn-drift 22s ease-in-out infinite alternate; } .v-scn-bg[data-p="source"] img { opacity: .62; width: max(90%, 760px); } .v-scn-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 70% at 50% 20%, transparent, rgba(6, 6, 9, .55) 60%), linear-gradient(180deg, rgba(6, 6, 9, .1), rgba(6, 6, 9, .55) 45%, rgba(6, 6, 9, .96) 92%); } @keyframes v-scn-drift { to { transform: translate(-48%, -51%) scale(1.04); } } .v-scn-draw { position: absolute; inset: 0; } /* THE ROAD and THE WOODS, drawn (inline SVG: no painting of either yet) */ .v-scn-draw svg { position: absolute; inset: 0; width: 100%; height: 100%; } .v-scn-draw .vr-c { animation: v-hum 2.6s ease-in-out infinite; } .v-scn-draw .vr-ferry { animation: v-ferry 18s linear infinite alternate; } @keyframes v-hum { 50% { opacity: .55; } } @keyframes v-ferry { to { transform: translateX(26px); } } .v-scn-in { position: relative; z-index: 1; align-self: end; width: min(760px, 100%); margin: 0 auto; padding: 24px calc(18px + env(safe-area-inset-right, 0px)) 18px calc(18px + env(safe-area-inset-left, 0px)); display: grid; gap: 14px; justify-items: start; } .v-scn-k { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; width: 100%; color: var(--c); } .v-scn-k em { flex: none; font: 600 11px/1 var(--f-mono); color: var(--dim); font-style: normal; white-space: nowrap; letter-spacing: 0; } .v-scn-who { width: clamp(120px, 26vw, 200px); animation: v-scn-in .45s var(--v-ease) both; } .v-scn-who .v-stage { width: 100%; } .v-scn-who .v-stage > img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; } /* a flat portrait only: never a layered fighter's layers */ .v-scn-tech { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px; background: rgba(12, 11, 16, .85); box-shadow: inset 0 0 0 1.5px var(--c); animation: v-scn-in .45s var(--v-ease) both; } .v-scn-tech .v-ic { width: 40px; height: 40px; color: var(--c); } .v-scn-tech span { display: grid; gap: 4px; } .v-scn-tech i { font: 600 11px/1 var(--f-text); letter-spacing: .14em; color: var(--dim); font-style: normal; } .v-scn-tech b { font: italic 700 28px/1 var(--f-head); text-transform: uppercase; color: var(--c); } .v-scn-tech em { font: 700 11px/1 var(--f-disp); letter-spacing: .14em; font-style: normal; color: var(--ink-2); } .v-scn-box { width: 100%; display: grid; gap: 8px; padding: 16px 18px; background: rgba(12, 11, 16, .9); box-shadow: inset 0 0 0 1px var(--v-line); animation: v-scn-in .35s var(--v-ease) both; } .v-scn-box b { font: 700 13px/1 var(--f-disp); letter-spacing: .14em; color: var(--w, var(--c)); } .v-scn-box b i { font: 600 10.5px/1 var(--f-text); letter-spacing: .12em; color: var(--dim); font-style: normal; margin-left: 8px; } .v-scn-box p { font: 500 clamp(16px, 2.2vw, 19px)/1.5 var(--f-text); color: var(--ink); } .v-scn-box.narr p { font-style: italic; color: var(--ink-2); } .v-scn-box.say { box-shadow: inset 3px 0 0 var(--w, var(--c)), inset 0 0 0 1px var(--v-line); } .v-scn + .v-dock, .v-scn .v-dock { position: relative; z-index: 1; padding-inline: calc(18px + env(safe-area-inset-left, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } @keyframes v-scn-in { from { opacity: 0; transform: translateY(8px); } } @media (max-width: 600px) { .v-scn-who { width: 108px; } .v-scn-box { padding: 14px; } } /* ---------- SIGNAL PACKS ---------- */ .v-pack-seal { display: grid; justify-items: center; gap: 12px; padding-top: 10px; text-align: center; } .v-pack-cube { position: relative; width: min(300px, 70vw); aspect-ratio: 720 / 681; display: block; animation: v-cube 4s ease-in-out infinite; } /* 3.8.2 · the cube's own file fades its floor glow out (game-art/pack/signal-pack-cut.webp, tools/art/pack-derivative.py): no mask. The mask, applied after these filters, cut the glow and the shadow off at the image's box: the rectangle round SIGNAL PACK+ */ .v-pack-cube img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 22px color-mix(in srgb, var(--c) 70%, transparent)) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); } .v-pack-cube i { position: absolute; inset: 18% 22%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent); z-index: -1; filter: blur(16px); } .v-pack-seal.plus .v-pack-cube img { filter: drop-shadow(0 0 26px #FFC23D) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); } .v-pack-cube:hover { animation-play-state: paused; transform: scale(1.03); } .v-pack-cube:focus-visible { outline: none; } .v-pack-cube:focus-visible img { filter: drop-shadow(0 0 1px var(--v-go)) drop-shadow(0 0 1px var(--v-go)) drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); } .v-scr-pack .v-fine { text-align: center; max-width: 1040px; margin: 12px auto 0; } @keyframes v-cube { 50% { transform: translateY(-8px) rotate(-1deg); } } /* 3.1 · one card shape from sealed to revealed (portrait, the same size), the SAN mark on its back, the piece on the dummy */ .v-pack-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: min(100%, 1040px, calc((100dvh - 240px) * 2 + 28px)); margin-inline: auto; } .v-pack-card { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 14px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); aspect-ratio: 2 / 3; perspective: 600px; overflow: hidden; } .v-pack-card.up { box-shadow: inset 0 0 0 1.5px var(--r), 0 0 28px -8px var(--r); animation: v-flip .55s var(--v-ease) both; } .v-pack-card.r-legendary.up { background: radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--r) 22%, var(--v-panel-2)), var(--v-panel-2)); } .v-pack-card.r-epic.up { background: radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--r) 14%, var(--v-panel-2)), var(--v-panel-2)); } .v-pack-card b { font: 700 15px/1.15 var(--f-disp); letter-spacing: .04em; } .v-pack-card > i { font: 600 10.5px/1.2 var(--f-text); letter-spacing: .1em; color: var(--dim); font-style: normal; } .v-pack-card em { align-self: flex-start; justify-self: start; font: 700 10.5px/1 var(--f-disp); letter-spacing: .12em; font-style: normal; padding: 4px 6px; } .v-pack-card em.new { background: var(--v-go); color: #0A0A0A; } .v-pack-card em.dup { box-shadow: inset 0 0 0 1px var(--v-line-2); color: var(--ink-2); } .v-pack-card .v-row { margin-top: auto; } .v-pack-card .v-pa.xl { width: 100%; } .v-pack-back { position: absolute; inset: 10px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 10px, rgba(255, 255, 255, .055) 10px 20px), var(--v-tile); box-shadow: inset 0 0 0 1px var(--v-line-2); } .v-pack-back i { position: absolute; inset: 0; background: center / 34% no-repeat url("data:image/svg+xml;utf8,"); opacity: .16; } /* the dummy: Cromagnus's crash-test dummy on its orange ground, the piece where it's worn */ .v-dum { position: relative; display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: #F3941E; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); } .v-dum > .v-dum-l, .v-dum-zs > .v-dum-l { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .v-dum-zoom { position: absolute; right: 5%; bottom: 5%; width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; z-index: 300; background: #F3941E; box-shadow: 0 0 0 3px #0A0A0A, 0 0 0 5px #F9F4EE, 0 8px 20px rgba(0, 0, 0, .5); } .v-dum-zs { position: absolute; inset: 0; transform-origin: var(--fx) var(--fy); transform: translate(calc(50% - var(--fx)), calc(50% - var(--fy))) scale(var(--z)); } .v-dum.xl { width: min(100%, 340px); } .v-sig > .v-dum, .st-item .v-dum { width: 100%; } @media (max-width: 640px) { .v-sig > .v-dum { width: 108px; } } .v-dum.f-bronze { box-shadow: inset 0 0 0 3px #B4733F; } .v-dum.f-silver { box-shadow: inset 0 0 0 3px #C9D1DA; } .v-dum.f-gold { box-shadow: inset 0 0 0 3px #F0C246; } .v-dum.f-diamond { box-shadow: inset 0 0 0 3px #8FE9FF, inset 0 0 18px rgba(143, 233, 255, .5); } .v-dum.f-holo { box-shadow: inset 0 0 0 3px #E07BFF, inset 0 0 18px rgba(124, 255, 218, .45); } @media (max-width: 640px) { .v-pack-row { grid-template-columns: minmax(0, 1fr); width: 100%; } /* on a phone the three sit in a column, each card the same wide shape sealed and turned: the piece on the left, its words on the right */ .v-pack-card { display: grid; aspect-ratio: auto; height: 148px; grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-content: stretch; } .v-pack-card .v-dum, .v-pack-card .v-pa.xl { grid-column: 1; grid-row: 1 / -1; width: 124px; align-self: center; } .v-pack-card > :not(.v-dum):not(.v-pa):not(.v-pack-back) { grid-column: 2; } .v-pack-card .v-row { margin-top: 0; align-self: end; } .v-pack-card em { font-size: 10px; } .v-pack-back i { background-size: auto 56%; } .v-scr-pack .v-count { display: none; } .v-odds-pool { display: none; } } .v-unl-pk .v-unl-ic { color: var(--v-go); } .v-unl-pk.plus .v-unl-ic { color: #FFC23D; } .v-tbl { overflow-x: auto; margin-block: 8px 16px; } .v-tbl table { width: 100%; min-width: 520px; border-collapse: collapse; font: 500 13.5px/1.3 var(--f-text); } .v-tbl th, .v-tbl td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--v-line); } .v-tbl thead th { font: 700 10.5px/1.2 var(--f-disp); letter-spacing: .14em; color: var(--dim); } .v-tbl tbody th { font: 700 12.5px/1 var(--f-disp); letter-spacing: .1em; } .v-tbl td { font-family: var(--f-mono); font-variant-numeric: tabular-nums; } .v-tbl td i { font-style: normal; color: var(--dim); font-size: 12px; } @media (max-width: 640px) { .v-tbl table { min-width: 0; } .v-tbl th, .v-tbl td { padding: 10px 6px; } } /* ---------- ITEM MASTERY: finishes, wherever a piece is drawn ---------- */ .v-pa.f-bronze { box-shadow: inset 0 0 0 2px #B07A45; } .v-pa.f-silver { box-shadow: inset 0 0 0 2px #C9D2DB, 0 0 10px -4px #C9D2DB; } .v-pa.f-gold { box-shadow: inset 0 0 0 2px #E7C35A, 0 0 14px -4px #E7C35A; } .v-pa.f-gold::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 236, 170, .28) 50%, transparent 60%) -100% 0 / 200% 100% no-repeat; animation: v-glint 3.6s ease-in-out infinite; pointer-events: none; } .v-pa.f-diamond { box-shadow: inset 0 0 0 2px #BFF3FF, 0 0 16px -4px #9EE7FF; } .v-pa.f-holo { box-shadow: 0 0 18px -4px #C7B2FF; } .v-pa.f-holo::before { content: ''; position: absolute; inset: 0; padding: 2px; z-index: 2; pointer-events: none; background: linear-gradient(120deg, #FF7AD9, #9EE7FF, #FFE27A, #9DFFB0, #C7B2FF, #FF7AD9) 0 0 / 300% 300%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: v-holo 4s linear infinite; } @keyframes v-glint { 50%, 100% { background-position: 100% 0; } } @keyframes v-holo { to { background-position: 300% 0; } } .v-imast { display: grid; gap: 10px; padding: 14px; box-shadow: inset 0 0 0 1px var(--v-line); background: rgba(255, 255, 255, .02); } .v-fin { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } .v-fin li { display: grid; gap: 4px; justify-items: center; padding: 8px 2px; box-shadow: inset 0 0 0 1px var(--v-line); opacity: .5; } .v-fin li i { width: 14px; height: 14px; transform: rotate(45deg); box-shadow: inset 0 0 0 2px currentColor; } .v-fin li b { font: 700 9.5px/1 var(--f-disp); letter-spacing: .1em; } .v-fin li em { font: 600 10px/1 var(--f-mono); font-style: normal; color: var(--dim); } .v-fin li.on { opacity: 1; } .v-fin li.on i { background: currentColor; } .v-fin .f-bronze { color: #C88A50; } .v-fin .f-silver { color: #C9D2DB; } .v-fin .f-gold { color: #E7C35A; } .v-fin .f-diamond { color: #9EE7FF; } .v-fin .f-holo { color: #C7B2FF; } .v-gear { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; } .v-gear li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 10px 4px 4px; box-shadow: inset 0 0 0 1px var(--v-line); } .v-gear li .v-pa { width: 40px; } .v-gear li span { display: grid; gap: 2px; min-width: 0; } .v-gear li b { font: 700 12.5px/1.1 var(--f-disp); letter-spacing: .04em; } .v-gear li i { font: 600 10px/1.2 var(--f-text); letter-spacing: .08em; color: var(--dim); font-style: normal; } .v-gear li em { font: 700 12px/1 var(--f-mono); font-style: normal; color: var(--ink); white-space: nowrap; } .v-gear li.up { box-shadow: inset 0 0 0 1.5px var(--v-gold); } .v-gear li.up em { color: var(--v-gold); } /* ---------- TECHNIQUES in the Locker ---------- */ .v-techs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-bottom: 18px; } .v-tech { display: grid; gap: 10px; align-content: start; padding: 14px; background: var(--v-panel-2); box-shadow: inset 0 0 0 1px var(--v-line); } .v-tech.on { box-shadow: inset 0 0 0 1.5px var(--c); background: color-mix(in srgb, var(--c) 7%, var(--v-panel-2)); } .v-tech.shut { background: rgba(22, 21, 28, .55); } .v-tech header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; } .v-tech header .v-ic { width: 24px; height: 24px; } .v-tech header b { display: block; font: 700 16px/1.1 var(--f-disp); letter-spacing: .05em; } .v-tech header b i { font: 600 10.5px/1 var(--f-text); letter-spacing: .12em; color: var(--dim); font-style: normal; margin-left: 6px; } .v-tech header span { display: block; margin-top: 4px; font: 400 13.5px/1.35 var(--f-text); color: var(--ink-2); } /* ---------- THE JOURNAL ---------- */ .v-jn { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .v-jn li { display: grid; gap: 4px; padding: 10px 12px; box-shadow: inset 2px 0 0 var(--c), inset 0 0 0 1px var(--v-line); } .v-jn li b { font: 700 13px/1.2 var(--f-disp); letter-spacing: .08em; } .v-jn li span { font: 400 14px/1.5 var(--f-text); color: var(--ink-2); } .v-jn-sc { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; } .v-jn-b { display: grid; gap: 4px; padding: 10px 12px; text-align: left; box-shadow: inset 2px 0 0 var(--c), inset 0 0 0 1px var(--v-line); } .v-jn-b:hover { box-shadow: inset 2px 0 0 var(--c), inset 0 0 0 1px var(--v-line-2); } .v-jn-b i { font: 600 10.5px/1 var(--f-text); letter-spacing: .12em; color: var(--dim); font-style: normal; } .v-jn-b b { font: 500 13px/1.35 var(--f-text); color: var(--ink); } @media (max-width: 760px) { .v-place.fold .v-place-h { padding: 10px 12px 10px 16px; } .v-place.fold .v-place-h .v-k { font-size: 10px; } .v-place-fold { min-height: 36px; padding: 0 10px; } .v-place-fold span { display: none; } /* a phone: the chevron alone (its label is read out) */ html.v-onworld.v-fold .v-world { transform: none; } /* folded: the world sits where it is, the whole of it in view */ .v-ch-big { grid-template-columns: 84px minmax(0, 1fr); } .v-ch-big .v-stage { width: 84px; } } @media (prefers-reduced-motion: reduce) { .v-hb.pk, .v-pack-cube, .v-castph > i, .v-scn-bg img, .v-pa.f-holo::before, .v-pa.f-gold::after { animation: none !important; } } html.sc-calm .v-hb.pk, html.sc-calm .v-pack-cube, html.sc-calm .v-castph > i, html.sc-calm .v-scn-bg img { animation: none !important; } /* ---------- the fight: a technique you carry, a technique named as it shows, the den ---------- */ .du-uses i.du-tech { color: #0A0A0A; background: var(--you, #F9F4EE); } .du-tag.tech { color: #0A0A0A; background: var(--them, #F9F4EE); letter-spacing: .16em; } .du-tag.you.tech { background: var(--you, #F9F4EE); } .du.den .du-court { background: radial-gradient(120% 60% at 50% 0, rgba(60, 80, 70, .22), transparent 70%); } .du.den .du-ctr { display: none; } .du-f.them .du-bust .v-castph { width: 100%; height: 100%; } /* 3.1 · the map card, compact: where, one line, the reward, the action. The rest is behind DETAILS */ .v-place { width: min(clamp(400px, 24vw, 470px), calc(100% - 32px)); } .v-place-top .v-pn { width: 36px; height: 36px; } .v-place-top .v-pn-n { padding: 0 4px; } .v-place-top > .v-k { font-size: 11.5px; letter-spacing: .1em; } .v-place-h { padding: 14px 14px 2px 18px; } .v-place-h h2 { font-size: clamp(26px, 2.5vw, 32px); } .v-place-b { gap: 10px; padding: 2px 16px 12px 18px; } .v-place-go { padding: 10px 16px 14px 18px; } .v-place-go .v-btn.go { min-height: 48px; } .v-place:not(.more) .x-more { display: none !important; } .v-more-t { justify-self: start; min-height: 32px; padding: 0 2px; background: none; border: 0; color: var(--ink-2, #A9A5AE); font: 600 11px/1 var(--f-disp); letter-spacing: .16em; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent); } .v-more-t:hover, .v-more-t:focus-visible { color: var(--ink, #F9F4EE); } @media (max-width: 860px) { .v-place { width: 100%; } .v-place-h h2 { font-size: 26px; } } /* 3.5 · from 761 px the card still floats 16 px from the left, so 100 % ran it 16 px past the right edge (a tablet held upright: the next-place arrow and FIGHT cut). It keeps 16 px on both sides */ @media (min-width: 761px) and (max-width: 860px) { .v-place { width: calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); } } /* 3.8 · a short window at 761–860 px (a 1280 × 720 laptop at 150 % zoom is 853 × 480): the card is a column at the side, away from the place, not a sheet across the bottom. The place keeps the window's full height beside it (the camera frames it in the free side: map.js freeRect; nothing has to lift over a card that took 70 % of the height) */ @media (min-width: 761px) and (max-width: 860px) and (max-height: 560px) { .v-place { width: min(380px, calc(50% - 24px)); } .v-place-h h2 { font-size: 24px; } } /* 3.2 · the pack, turned over: your fighter beside the three pieces, wearing what you put on */ .v-pack-done { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr); gap: 18px; align-items: center; max-width: 1240px; margin: 0 auto; } .v-pack-done > .v-pack-row { width: 100%; } .v-pack-me { display: grid; justify-items: center; gap: 6px; align-self: end; } .v-pack-me .v-stage.big { width: min(100%, 300px, 42vh); } .v-pack-me .v-stage::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent); } .v-pack-me .v-k { color: var(--c); } @media (max-width: 900px) { .v-pack-done { grid-template-columns: minmax(0, 1fr); gap: 8px; } .v-pack-me { grid-template-columns: auto auto; align-items: center; justify-content: center; } .v-pack-me .v-stage.big { width: min(30vw, 18vh, 150px); } }