1754 lines
41 KiB
CSS
1754 lines
41 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--ink: #16101d;
|
|
--panel: #3d304c;
|
|
--panel-2: #5b466c;
|
|
--edge: #17131e;
|
|
--paper: #d8c89f;
|
|
--gold: #f2a62c;
|
|
--gold-hi: #ffd76a;
|
|
--cyan: #39c5c8;
|
|
--green: #2fc78f;
|
|
--red: #ca3e55;
|
|
--purple: #6d3b80;
|
|
--muted: #a898b2;
|
|
--safe-top: 26px;
|
|
font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
background: #08080d;
|
|
user-select: none;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:disabled {
|
|
cursor: not-allowed;
|
|
filter: grayscale(0.8) brightness(0.65);
|
|
}
|
|
|
|
#app {
|
|
position: relative;
|
|
width: min(100vw, calc(100vh * 750 / 1334));
|
|
height: min(100vh, calc(100vw * 1334 / 750));
|
|
margin: auto;
|
|
overflow: hidden;
|
|
background: #11101d;
|
|
box-shadow: 0 0 0 2px #2b2433, 0 0 42px #000;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
#legal-strip {
|
|
position: absolute;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: var(--safe-top);
|
|
padding: 5px 12px;
|
|
color: #c4b8c9;
|
|
background: rgb(8 6 12 / 86%);
|
|
border-bottom: 1px solid #3a2f44;
|
|
font-size: 11px;
|
|
letter-spacing: 0.08em;
|
|
text-align: center;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.screen {
|
|
display: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
}
|
|
|
|
.screen.active {
|
|
display: block;
|
|
}
|
|
|
|
.panel {
|
|
border: 4px solid var(--edge);
|
|
border-radius: 12px;
|
|
background: linear-gradient(#5b4969, #34293f);
|
|
box-shadow: inset 0 0 0 3px #8a7197, 0 7px 0 #100d15, 0 16px 32px #0008;
|
|
}
|
|
|
|
.button {
|
|
min-height: 58px;
|
|
padding: 10px 20px;
|
|
border: 4px solid #211727;
|
|
border-radius: 10px;
|
|
box-shadow: inset 0 0 0 3px #ffffff40, 0 5px 0 #17101d;
|
|
font-weight: 900;
|
|
letter-spacing: 0.08em;
|
|
text-shadow: 0 2px 0 #0008;
|
|
transition: transform 70ms ease, filter 120ms ease;
|
|
}
|
|
|
|
.button:active,
|
|
.roll-button:active,
|
|
.potion-button:active {
|
|
transform: translateY(4px) scale(0.97);
|
|
}
|
|
|
|
.button.primary {
|
|
color: #2a1c10;
|
|
background: linear-gradient(#ffc354, #ee941f);
|
|
}
|
|
|
|
.button.secondary {
|
|
background: linear-gradient(#28b9c2, #137c91);
|
|
}
|
|
|
|
.button.ghost {
|
|
background: #332a3c;
|
|
color: #d9cfe0;
|
|
}
|
|
|
|
#start-screen {
|
|
padding-top: var(--safe-top);
|
|
background:
|
|
linear-gradient(180deg, #0b0b15aa 0%, #14121f33 45%, #09080ed9 100%),
|
|
url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_back_grass.png") center / cover,
|
|
#171a1f;
|
|
}
|
|
|
|
.start-art {
|
|
position: absolute;
|
|
inset: 9% -8% 31%;
|
|
background:
|
|
url("../analysis/visual-study/unity-samples/character_boss/sharedassets3__001_boss_idle_2.png") center 68% / 72% auto no-repeat,
|
|
url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_front_grass.png") center bottom / 112% auto no-repeat;
|
|
filter: drop-shadow(0 12px 0 #0008);
|
|
opacity: 0.94;
|
|
}
|
|
|
|
.title-mark {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 12%;
|
|
text-align: center;
|
|
text-shadow: 0 5px 0 #17101d, 0 0 18px #8c58b4;
|
|
}
|
|
|
|
.title-mark small {
|
|
color: #d6c6a3;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
}
|
|
|
|
.title-mark h1 {
|
|
margin: 8px 0 -4px;
|
|
color: #f4e8c4;
|
|
font-size: clamp(58px, 11vw, 88px);
|
|
line-height: 0.95;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.title-mark p {
|
|
margin: 8px 0;
|
|
color: var(--gold-hi);
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.start-actions {
|
|
position: absolute;
|
|
z-index: 2;
|
|
left: 7%;
|
|
right: 7%;
|
|
bottom: 6%;
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 22px;
|
|
}
|
|
|
|
.seed-field {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
color: #e6d9ec;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.seed-field input {
|
|
min-width: 0;
|
|
flex: 1;
|
|
padding: 10px 12px;
|
|
border: 2px solid #1d1723;
|
|
border-radius: 7px;
|
|
color: #fff;
|
|
background: #18131f;
|
|
user-select: text;
|
|
}
|
|
|
|
.scope-note {
|
|
margin: 2px 4px 0;
|
|
color: #c3b6c9;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
text-align: center;
|
|
}
|
|
|
|
#game-screen {
|
|
padding-top: var(--safe-top);
|
|
background: #0a0b12;
|
|
}
|
|
|
|
#top-hud {
|
|
position: absolute;
|
|
z-index: 26;
|
|
top: calc(var(--safe-top) + 10px);
|
|
left: 12px;
|
|
right: 9px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
height: 58px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.resource-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 178px;
|
|
height: 49px;
|
|
padding: 3px 14px 3px 42px;
|
|
border: 4px solid #11131c;
|
|
clip-path: polygon(10% 0, 100% 0, 100% 80%, 92% 100%, 7% 100%, 0 75%, 0 23%);
|
|
background: linear-gradient(90deg, #3d384d, #292635 75%, #1e1d29);
|
|
box-shadow: inset 0 0 0 3px #5d596b, 0 4px 0 #080910;
|
|
}
|
|
|
|
.resource-chip strong {
|
|
margin-left: auto;
|
|
color: #f2eff2;
|
|
font-size: 25px;
|
|
font-weight: 500;
|
|
text-shadow: 2px 2px 0 #11131a;
|
|
}
|
|
|
|
.point-gem {
|
|
position: absolute;
|
|
left: 4px;
|
|
top: 7px;
|
|
color: #ff627b;
|
|
font-size: 38px;
|
|
line-height: 1;
|
|
filter: drop-shadow(0 3px 0 #5f1830) drop-shadow(0 0 2px #fff);
|
|
}
|
|
|
|
#auto-indicator {
|
|
width: 120px;
|
|
height: 50px;
|
|
margin-left: auto;
|
|
padding: 9px 12px;
|
|
border: 4px solid #11131c;
|
|
color: #cbc9ce;
|
|
background: #403f43;
|
|
box-shadow: inset 0 0 0 2px #58575e, 0 3px 0 #080910;
|
|
font-size: 22px;
|
|
letter-spacing: 0.04em;
|
|
text-align: center;
|
|
text-shadow: 2px 2px 0 #19191d;
|
|
}
|
|
|
|
.icon-button {
|
|
width: 52px;
|
|
height: 52px;
|
|
border: 4px solid #11131c;
|
|
border-radius: 3px;
|
|
background: linear-gradient(90deg, #4e4d53, #2e2d35);
|
|
box-shadow: inset 0 0 0 2px #68676d, 0 3px 0 #080910;
|
|
font-weight: 900;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.play-view {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: var(--safe-top);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 350px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.play-view.active {
|
|
display: block;
|
|
}
|
|
|
|
#board-view {
|
|
background: #11151a;
|
|
}
|
|
|
|
.scene-back {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(#0c111927, #08100a35 63%, #05070bcf),
|
|
url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_front_grass.png") center bottom / 118% auto no-repeat,
|
|
url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_back_grass.png") center / cover;
|
|
filter: saturate(.78) brightness(.78);
|
|
}
|
|
|
|
#boss-figure {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 50%;
|
|
top: 48%;
|
|
width: 49%;
|
|
aspect-ratio: 192 / 137;
|
|
transform: translate(-50%, -53%) scale(1.55);
|
|
background: url("../analysis/visual-study/unity-samples/character_boss/sharedassets3__001_boss_idle_2.png") center / contain no-repeat;
|
|
opacity: .76;
|
|
filter: brightness(.64) saturate(1.4) drop-shadow(0 0 1px #ff244a) drop-shadow(0 9px 8px #000b);
|
|
}
|
|
|
|
#boss-figure::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 20% -26% 3%;
|
|
z-index: -1;
|
|
background: repeating-linear-gradient(90deg, transparent 0 19px, #30333b 20px 26px, transparent 27px 43px);
|
|
clip-path: polygon(0 44%, 100% 44%, 100% 58%, 0 58%);
|
|
opacity: .62;
|
|
}
|
|
|
|
#board-view.boss-acting #boss-figure {
|
|
animation: boss-board-action 820ms steps(2, end);
|
|
}
|
|
|
|
#board-view.boss-acting #board-ring {
|
|
animation: boss-board-shock 420ms ease-out;
|
|
}
|
|
|
|
.board-tile.boss-converting {
|
|
z-index: 9;
|
|
animation: boss-tile-convert 340ms steps(3, end);
|
|
}
|
|
|
|
@keyframes boss-board-action {
|
|
0% { transform: translate(-50%, -53%) scale(1.55); filter: brightness(.64) saturate(1.4) drop-shadow(0 0 1px #ff244a) drop-shadow(0 9px 8px #000b); }
|
|
35% { transform: translate(-50%, -53%) scale(1.78); filter: brightness(1.35) saturate(2.2) drop-shadow(0 0 18px #ff244a) drop-shadow(0 9px 8px #000b); }
|
|
100% { transform: translate(-50%, -53%) scale(1.55); filter: brightness(.64) saturate(1.4) drop-shadow(0 0 1px #ff244a) drop-shadow(0 9px 8px #000b); }
|
|
}
|
|
|
|
@keyframes boss-board-shock {
|
|
0%, 100% { translate: 0 0; }
|
|
25% { translate: -7px 2px; }
|
|
50% { translate: 6px -2px; }
|
|
75% { translate: -3px 1px; }
|
|
}
|
|
|
|
@keyframes boss-tile-convert {
|
|
0% { scale: 1; filter: brightness(1); }
|
|
35% { scale: 1.45; filter: brightness(2.2) sepia(1) saturate(5) hue-rotate(315deg); }
|
|
70% { scale: .8; filter: brightness(.45) saturate(2); }
|
|
100% { scale: 1; filter: brightness(1); }
|
|
}
|
|
|
|
#board-ring {
|
|
position: absolute;
|
|
z-index: 3;
|
|
inset: 8% 2% 1%;
|
|
transform: none;
|
|
}
|
|
|
|
.board-path {
|
|
position: absolute;
|
|
z-index: 0;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 72%;
|
|
aspect-ratio: 1;
|
|
border: 59px solid #262833;
|
|
border-radius: 2px;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
box-shadow: inset 0 0 0 7px #15161d, 0 0 0 7px #13141b, 0 0 34px #000c;
|
|
opacity: .94;
|
|
}
|
|
|
|
.board-path::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -38px;
|
|
border: 6px dashed #393c49;
|
|
opacity: .45;
|
|
}
|
|
|
|
.board-tile {
|
|
position: absolute;
|
|
z-index: 2;
|
|
width: 44px;
|
|
height: 44px;
|
|
margin: -22px;
|
|
border: 0;
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__tile_normal.png") center / 100% 100% no-repeat;
|
|
filter: hue-rotate(292deg) saturate(.86) brightness(.9) drop-shadow(0 2px 0 #0c0c12);
|
|
transform: rotate(45deg);
|
|
transition: filter 150ms ease, transform 150ms ease;
|
|
}
|
|
|
|
.board-tile.purple:not(.good):not(.merchant):not(.start) {
|
|
filter: sepia(.65) saturate(1.8) hue-rotate(222deg) brightness(.83) drop-shadow(0 2px 0 #0c0c12);
|
|
}
|
|
|
|
.board-tile.stone:not(.good):not(.merchant):not(.start) {
|
|
filter: grayscale(.88) brightness(1.08) drop-shadow(0 2px 0 #0c0c12);
|
|
}
|
|
|
|
.board-tile.current {
|
|
transform: rotate(45deg) scale(1.08);
|
|
filter: hue-rotate(292deg) brightness(1.65) drop-shadow(0 0 8px #fff39b);
|
|
}
|
|
|
|
.board-tile.good,
|
|
.board-tile.merchant {
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__tile_goodEvent.png") center / 100% 100% no-repeat;
|
|
filter: brightness(1.08) drop-shadow(0 2px 0 #07140f);
|
|
}
|
|
|
|
.board-tile.battle {
|
|
background: url("../design/ue-ui/assets/original/board/923b2b5e8d06c8548a5ab01a28352030__tile_battle.png") center / 100% 100% no-repeat;
|
|
filter: hue-rotate(335deg) saturate(1.45) brightness(.9) drop-shadow(0 2px 0 #14070b);
|
|
}
|
|
|
|
.board-tile.miniboss {
|
|
background: url("../design/ue-ui/assets/original/board/2aa332480a841f045a6a77325d1a5237__tile_battle_hard.png") center / 100% 100% no-repeat;
|
|
filter: brightness(1.08) saturate(1.25) drop-shadow(0 0 5px #ff553f) drop-shadow(0 2px 0 #14070b);
|
|
}
|
|
|
|
.board-tile.infected_boss {
|
|
background: url("../design/ue-ui/assets/original/board/413152916e05bb744a3153d113e8ba81__tile_battle_infected.png") center / 100% 100% no-repeat;
|
|
filter: brightness(1.12) saturate(1.4) drop-shadow(0 0 6px #77b73c) drop-shadow(0 2px 0 #0b1307);
|
|
}
|
|
|
|
.board-tile.polluted {
|
|
box-shadow: 0 0 0 2px #79a844, 0 0 9px #77b73c;
|
|
}
|
|
|
|
.board-tile.start {
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__tile_normal_white.png") center / 100% 100% no-repeat;
|
|
filter: sepia(.72) brightness(1.08) drop-shadow(0 2px 0 #261a0b);
|
|
}
|
|
|
|
.board-tile .tile-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
color: #f1e7d9;
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
text-shadow: 0 3px 0 #000;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.board-tile .tile-art {
|
|
display: block;
|
|
width: 34px;
|
|
height: 34px;
|
|
object-fit: contain;
|
|
image-rendering: pixelated;
|
|
filter: drop-shadow(0 2px 0 #101018) drop-shadow(0 0 2px #fff8);
|
|
}
|
|
|
|
.board-tile.merchant .tile-art {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.board-tile .tile-index {
|
|
position: absolute;
|
|
right: 22px;
|
|
bottom: -14px;
|
|
color: #79b5e8;
|
|
font-size: 8px;
|
|
font-weight: 900;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
#hero-marker {
|
|
position: absolute;
|
|
z-index: 8;
|
|
width: 48px;
|
|
height: 58px;
|
|
margin: -46px -24px;
|
|
background: url("../analysis/visual-study/unity-samples/character_player/ae84db1b203207e43a50cdb606a4f489__knight_m_idle_anim_f0.png") center bottom / 32px 56px no-repeat;
|
|
filter: drop-shadow(0 3px 0 #111) drop-shadow(0 0 5px #ffed9b);
|
|
transition: left 170ms linear, top 170ms linear;
|
|
animation: knight-idle 680ms steps(1) infinite;
|
|
transform: rotate(var(--hero-counter-rotation, 0deg));
|
|
}
|
|
|
|
#game-screen.animating-move #hero-marker {
|
|
transition-duration: 56ms;
|
|
filter: drop-shadow(0 5px 0 #111) drop-shadow(0 0 8px #ffe993);
|
|
}
|
|
|
|
#hero-marker.running {
|
|
animation: knight-run 232ms steps(1) infinite;
|
|
}
|
|
|
|
#hero-marker.landing {
|
|
animation: hero-land 280ms ease-out;
|
|
}
|
|
|
|
@keyframes knight-run {
|
|
0% { background-image: url("../analysis/visual-study/unity-samples/character_player/066f2d8aea4b254408f0d3be3a340137__knight_m_run_anim_f0.png"); }
|
|
25% { background-image: url("../analysis/visual-study/unity-samples/character_player/000edfb39ceebe545909ea197165bb9b__knight_m_run_anim_f1.png"); }
|
|
50% { background-image: url("../analysis/visual-study/unity-samples/character_player/6a7c4fa5e8ffe2c478701dadf43e44ea__knight_m_run_anim_f2.png"); }
|
|
75% { background-image: url("../analysis/visual-study/unity-samples/character_player/883cd9c5cac93ec4e94820b2fd548ec0__knight_m_run_anim_f3.png"); }
|
|
}
|
|
|
|
@keyframes hero-land {
|
|
0% { transform: rotate(var(--hero-counter-rotation, 0deg)) translateY(-10px) scale(1.12); }
|
|
55% { transform: rotate(var(--hero-counter-rotation, 0deg)) translateY(3px) scale(.94); }
|
|
100% { transform: rotate(var(--hero-counter-rotation, 0deg)) translateY(0) scale(1); }
|
|
}
|
|
|
|
#hero-marker::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px;
|
|
right: 3px;
|
|
bottom: -1px;
|
|
height: 13px;
|
|
border-radius: 50%;
|
|
background: #ffeaa373;
|
|
filter: blur(3px);
|
|
}
|
|
|
|
#dice-result {
|
|
position: absolute;
|
|
z-index: 45;
|
|
left: 50%;
|
|
top: 34%;
|
|
display: flex;
|
|
gap: 7px;
|
|
width: 184px;
|
|
height: 184px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
pointer-events: none;
|
|
}
|
|
|
|
#dice-result:not(:empty) {
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__dice_roll_bg.png") center / 100% 100% no-repeat;
|
|
filter: drop-shadow(0 7px 0 #0c0912) drop-shadow(0 0 18px #000);
|
|
animation: dice-platform-in 180ms ease-out;
|
|
}
|
|
|
|
#game-screen.showing-dice #board-view { display: block !important; }
|
|
#game-screen.showing-dice #battle-view { display: none !important; }
|
|
#app:has(#game-screen.showing-dice) #modal-layer,
|
|
#app:has(#game-screen.showing-dice) #tutorial-layer { visibility: hidden; }
|
|
|
|
@keyframes dice-platform-in {
|
|
from { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.62); }
|
|
}
|
|
|
|
.die-face {
|
|
width: 76px;
|
|
height: 76px;
|
|
background: var(--die-image) center / contain no-repeat;
|
|
filter: drop-shadow(4px 5px 0 #17131b);
|
|
transform: rotate(-45deg);
|
|
animation: die-tumble 420ms cubic-bezier(.2,.8,.2,1);
|
|
}
|
|
|
|
.dice-sum {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 10px;
|
|
min-width: 42px;
|
|
translate: -50% 0;
|
|
color: #fff4bf;
|
|
font-size: 25px;
|
|
line-height: 1;
|
|
text-align: center;
|
|
text-shadow: 0 3px 0 #18101d, 0 0 4px #000;
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
@keyframes die-tumble {
|
|
from { transform: rotate(-225deg) scale(.45); }
|
|
70% { transform: rotate(-31deg) scale(1.12); }
|
|
to { transform: rotate(-45deg) scale(1); }
|
|
}
|
|
|
|
#floor-meter {
|
|
position: absolute;
|
|
z-index: 22;
|
|
top: 9%;
|
|
right: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 50px;
|
|
color: #fff;
|
|
text-shadow: 2px 2px 0 #080910;
|
|
}
|
|
|
|
.boss-meter-icon {
|
|
width: 42px;
|
|
height: 32px;
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_boss_icon.png") center / contain no-repeat;
|
|
}
|
|
|
|
.meter-rail {
|
|
position: relative;
|
|
width: 19px;
|
|
height: 257px;
|
|
border: 4px solid #090a10;
|
|
background: #1a1b23;
|
|
box-shadow: inset 0 0 0 2px #4b4e5a;
|
|
}
|
|
|
|
.meter-rail i {
|
|
position: absolute;
|
|
left: 3px;
|
|
right: 3px;
|
|
bottom: 3px;
|
|
height: 10%;
|
|
background: linear-gradient(#48a5ed, #2876cf);
|
|
transition: height 300ms ease;
|
|
}
|
|
|
|
#floor-meter[data-mode="COUNTDOWN"] .meter-rail i {
|
|
background: linear-gradient(#ff6b55, #a70e29);
|
|
box-shadow: 0 0 10px #ff284d;
|
|
}
|
|
|
|
#floor-meter.meter-pulse {
|
|
animation: boss-meter-pulse 360ms ease-out;
|
|
}
|
|
|
|
@keyframes boss-meter-pulse {
|
|
0%, 100% { scale: 1; }
|
|
45% { scale: 1.16; filter: brightness(1.7); }
|
|
}
|
|
|
|
.floor-step-icon {
|
|
width: 38px;
|
|
height: 27px;
|
|
margin-top: -2px;
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_dice_icon.png") center / contain no-repeat;
|
|
}
|
|
|
|
#floor-meter strong {
|
|
margin-top: 2px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
#floor-banner {
|
|
position: absolute;
|
|
z-index: 14;
|
|
left: 50%;
|
|
top: 18%;
|
|
min-width: 240px;
|
|
padding: 12px 22px;
|
|
border: 4px solid #25172b;
|
|
border-radius: 8px;
|
|
transform: translateX(-50%);
|
|
color: #ffecaf;
|
|
background: #5c3a6ee8;
|
|
box-shadow: 0 5px 0 #120d17;
|
|
font-size: 24px;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#floor-banner.show {
|
|
animation: banner 900ms ease;
|
|
}
|
|
|
|
@keyframes banner {
|
|
0% { opacity: 0; transform: translate(-50%, -10px) scale(0.8); }
|
|
20%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); }
|
|
100% { opacity: 0; transform: translate(-50%, 8px) scale(1); }
|
|
}
|
|
|
|
#battle-view {
|
|
background:
|
|
linear-gradient(#0c101585, #262b2685 54%, #12150f 55% 100%),
|
|
url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_front_grass.png") center bottom / cover,
|
|
url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_back_grass.png") center / cover;
|
|
}
|
|
|
|
#battle-view.active {
|
|
animation: battle-view-in 360ms ease-out both;
|
|
}
|
|
|
|
@keyframes battle-view-in {
|
|
from { opacity: 0; filter: brightness(2); transform: scale(1.035); }
|
|
to { opacity: 1; filter: brightness(1); transform: scale(1); }
|
|
}
|
|
|
|
.battle-sky {
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
linear-gradient(transparent 66%, #0007 100%),
|
|
radial-gradient(circle at 50% 34%, #8fc49435, transparent 44%);
|
|
}
|
|
|
|
#battle-versus {
|
|
position: absolute;
|
|
z-index: 8;
|
|
top: 75px;
|
|
left: 14%;
|
|
right: 14%;
|
|
display: grid;
|
|
grid-template-columns: 1fr 34px 1fr;
|
|
align-items: center;
|
|
height: 17px;
|
|
border: 4px solid #0c0d12;
|
|
background: #252630;
|
|
box-shadow: inset 0 0 0 2px #5d6069, 0 3px 0 #090a0e;
|
|
}
|
|
|
|
#battle-versus i {
|
|
display: block;
|
|
height: 7px;
|
|
transition: width 180ms linear;
|
|
}
|
|
|
|
#battle-versus .versus-player {
|
|
justify-self: end;
|
|
background: #55b279;
|
|
}
|
|
|
|
#battle-versus .versus-enemy { background: #c94b5b; }
|
|
|
|
#battle-versus strong {
|
|
color: #f0eef0;
|
|
font-size: 11px;
|
|
text-align: center;
|
|
text-shadow: 1px 1px 0 #000;
|
|
}
|
|
|
|
.combatant {
|
|
position: absolute;
|
|
z-index: 5;
|
|
width: 116px;
|
|
text-align: center;
|
|
}
|
|
|
|
.combatant.player {
|
|
left: 11%;
|
|
bottom: 31%;
|
|
}
|
|
|
|
.combatant.enemy {
|
|
right: 14%;
|
|
width: 190px;
|
|
}
|
|
|
|
.pixel-fighter {
|
|
position: relative;
|
|
width: 88px;
|
|
height: 108px;
|
|
margin: auto;
|
|
background: center bottom / contain no-repeat;
|
|
filter: drop-shadow(0 6px 0 #12131a) drop-shadow(0 0 6px #000);
|
|
}
|
|
|
|
.player-silhouette {
|
|
width: 64px;
|
|
height: 112px;
|
|
background-image: url("../analysis/visual-study/unity-samples/character_player/ae84db1b203207e43a50cdb606a4f489__knight_m_idle_anim_f0.png");
|
|
image-rendering: pixelated;
|
|
animation: knight-idle 680ms steps(1) infinite;
|
|
}
|
|
|
|
@keyframes knight-idle {
|
|
0% { background-image: url("../analysis/visual-study/unity-samples/character_player/ae84db1b203207e43a50cdb606a4f489__knight_m_idle_anim_f0.png"); }
|
|
25% { background-image: url("../analysis/visual-study/unity-samples/character_player/5106094c8edff3a4bb33e3884f6d69f2__knight_m_idle_anim_f1.png"); }
|
|
50% { background-image: url("../analysis/visual-study/unity-samples/character_player/179334d6c9c17c247b247573dd1c8a70__knight_m_idle_anim_f2.png"); }
|
|
75% { background-image: url("../analysis/visual-study/unity-samples/character_player/13bc99c5d69998e42bacd5e6a78ff573__knight_m_idle_anim_f3.png"); }
|
|
}
|
|
|
|
.player-silhouette.attack::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 35px;
|
|
top: 15px;
|
|
width: 105px;
|
|
height: 105px;
|
|
background: url("../analysis/visual-study/unity-samples/vfx/sharedassets3__Fx_T_Sword01.png") center / contain no-repeat;
|
|
filter: brightness(1.6) drop-shadow(0 0 8px #fff);
|
|
}
|
|
|
|
.pixel-fighter.attack {
|
|
animation: attack 240ms ease;
|
|
}
|
|
|
|
.pixel-fighter.hit {
|
|
animation: hit 180ms ease;
|
|
}
|
|
|
|
.combatant.enemy.defeated {
|
|
animation: enemy-defeated 520ms ease forwards;
|
|
}
|
|
|
|
@keyframes attack {
|
|
0% { transform: translateX(0) rotate(0); }
|
|
45% { transform: translateX(16px) rotate(8deg); filter: brightness(1.6); }
|
|
100% { transform: translateX(0) rotate(0); }
|
|
}
|
|
|
|
@keyframes hit {
|
|
0%, 100% { filter: none; }
|
|
40% { filter: brightness(2) sepia(1) saturate(6) hue-rotate(310deg); transform: translateX(-8px); }
|
|
}
|
|
|
|
@keyframes enemy-defeated {
|
|
0% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
|
|
32% { opacity: 1; transform: translateY(-8px) scale(1.08); filter: brightness(2.2); }
|
|
100% { opacity: 0; transform: translateY(26px) scale(.72); filter: brightness(.35) grayscale(1); }
|
|
}
|
|
|
|
.enemy.sword .pixel-fighter {
|
|
width: 124px;
|
|
height: 80px;
|
|
background-image: url("../analysis/visual-study/unity-samples/character_enemy/6dd9bb0cc96b7ec40b4e8d88c1d0ff44__m_004.png");
|
|
}
|
|
|
|
.enemy.straight .pixel-fighter {
|
|
width: 76px;
|
|
height: 90px;
|
|
background-image: url("../analysis/visual-study/unity-samples/character_enemy/79d5d1971bbed5643b81db0325dc2c7e__m_002.png");
|
|
}
|
|
|
|
.enemy.curved .pixel-fighter {
|
|
width: 189px;
|
|
height: 96px;
|
|
background-image: url("../analysis/visual-study/unity-samples/character_enemy/fbe7c787bc7cfa54a8e32a7532e5503d__m_010.png");
|
|
}
|
|
|
|
.enemy.rush .pixel-fighter {
|
|
width: 116px;
|
|
height: 100px;
|
|
background-image: url("../analysis/visual-study/unity-samples/character_enemy/68b5e6d6a65fa4b4c99b243ae5a540b3__m_005.png");
|
|
}
|
|
.enemy.boss .pixel-fighter {
|
|
width: 150px;
|
|
height: 128px;
|
|
background: url("../analysis/visual-study/unity-samples/character_boss/sharedassets3__001_boss_attack_2.png") center / contain no-repeat;
|
|
border: 0;
|
|
filter: drop-shadow(0 0 8px #e6264d);
|
|
}
|
|
|
|
.entity-name {
|
|
margin-top: 5px;
|
|
color: #f1e9db;
|
|
font-size: 13px;
|
|
font-weight: 900;
|
|
text-shadow: 0 2px 0 #000;
|
|
}
|
|
|
|
.entity-hp {
|
|
height: 12px;
|
|
margin-top: 4px;
|
|
border: 2px solid #160f19;
|
|
border-radius: 5px;
|
|
background: #241a26;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.entity-hp i {
|
|
display: block;
|
|
height: 100%;
|
|
background: linear-gradient(#ef5d67, #a6263a);
|
|
}
|
|
|
|
#battle-log {
|
|
position: absolute;
|
|
z-index: 10;
|
|
left: 50%;
|
|
top: 112px;
|
|
width: 74%;
|
|
transform: translateX(-50%);
|
|
color: #fff1b0;
|
|
font-weight: 900;
|
|
text-align: center;
|
|
text-shadow: 0 2px 0 #000;
|
|
}
|
|
|
|
.damage-number {
|
|
position: absolute;
|
|
z-index: 12;
|
|
color: #fff1bc;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
text-shadow: 2px 2px 0 #6b142b;
|
|
animation: damage-number 667ms ease forwards;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.damage-number.critical {
|
|
color: #ffd84f;
|
|
font-size: 28px;
|
|
text-shadow: 2px 2px 0 #9b211d, 0 0 8px #ffed76;
|
|
}
|
|
|
|
@keyframes damage-number {
|
|
from { opacity: 1; transform: translateY(0) scale(0.7); }
|
|
30% { transform: translateY(-18px) scale(1.2); }
|
|
to { opacity: 0; transform: translateY(-54px) scale(1); }
|
|
}
|
|
|
|
#battle-speed {
|
|
position: absolute;
|
|
right: 16px;
|
|
bottom: 16px;
|
|
padding: 6px 10px;
|
|
border-radius: 6px;
|
|
background: #13101ad9;
|
|
font-weight: 900;
|
|
}
|
|
|
|
#battle-announcer {
|
|
position: absolute;
|
|
z-index: 24;
|
|
left: 0;
|
|
right: 0;
|
|
top: 31%;
|
|
color: #fff2b5;
|
|
font-size: 52px;
|
|
font-weight: 1000;
|
|
letter-spacing: 2px;
|
|
text-align: center;
|
|
text-shadow: 4px 4px 0 #591b35, 0 0 18px #ffec8c;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#battle-announcer.show {
|
|
animation: battle-announcement 760ms cubic-bezier(.18,.78,.25,1) both;
|
|
}
|
|
|
|
#battle-announcer[data-tone="defeat"] {
|
|
color: #e4d6dc;
|
|
text-shadow: 4px 4px 0 #3e1720, 0 0 16px #a6334d;
|
|
}
|
|
|
|
@keyframes battle-announcement {
|
|
0% { opacity: 0; transform: translateX(-18%) scale(1.6); }
|
|
18%, 70% { opacity: 1; transform: translateX(0) scale(1); }
|
|
100% { opacity: 0; transform: translateX(12%) scale(.88); }
|
|
}
|
|
|
|
.value-gain { animation: value-gain 360ms ease-out; }
|
|
.value-loss { animation: value-loss 360ms ease-out; }
|
|
|
|
@keyframes value-gain {
|
|
35% { color: #fff3a0; transform: translateY(-3px) scale(1.24); text-shadow: 0 0 10px #ffd85f; }
|
|
}
|
|
|
|
@keyframes value-loss {
|
|
35% { color: #ff9b9b; transform: translateX(-2px) scale(1.12); text-shadow: 0 0 9px #e64d5b; }
|
|
55% { transform: translateX(2px) scale(1.08); }
|
|
}
|
|
|
|
#bottom-hud {
|
|
position: absolute;
|
|
z-index: 30;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
height: 350px;
|
|
padding: 4px 20px 7px;
|
|
border-top: 0;
|
|
background: linear-gradient(#0e1015f2, #090b10 73%, #08090d);
|
|
box-shadow: 0 -12px 24px #0008;
|
|
}
|
|
|
|
.hp-row {
|
|
position: absolute;
|
|
top: 4px;
|
|
left: 20px;
|
|
right: 20px;
|
|
display: grid;
|
|
grid-template-columns: 52px 1fr 91px;
|
|
gap: 9px;
|
|
align-items: center;
|
|
}
|
|
|
|
.battle-mode-lock {
|
|
display: grid;
|
|
place-items: center;
|
|
height: 40px;
|
|
border: 4px solid #0b0c11;
|
|
color: #b8bbc6;
|
|
background: linear-gradient(#41434e, #282a34);
|
|
box-shadow: inset 0 0 0 2px #5c5f6b;
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
letter-spacing: .08em;
|
|
}
|
|
|
|
.level-diamond {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 45px;
|
|
height: 45px;
|
|
border: 4px solid #0c0d12;
|
|
background: linear-gradient(135deg, #44434b, #262832);
|
|
transform: rotate(45deg);
|
|
box-shadow: inset 0 0 0 2px #5c5c66;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.level-diamond::first-line {
|
|
transform: rotate(-45deg);
|
|
}
|
|
|
|
.bar {
|
|
position: relative;
|
|
height: 29px;
|
|
border: 4px solid #090a0f;
|
|
border-radius: 0;
|
|
background: #24252d;
|
|
box-shadow: inset 0 0 0 2px #5f626b;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bar i {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(#54b178, #397e5a);
|
|
transition: width 180ms ease;
|
|
}
|
|
|
|
.bar strong {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
font-size: 15px;
|
|
text-shadow: 0 2px 0 #000;
|
|
}
|
|
|
|
#gear-slots {
|
|
position: absolute;
|
|
top: 52px;
|
|
left: 15.5%;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 6px;
|
|
width: 69%;
|
|
height: 99px;
|
|
margin: 0;
|
|
padding: 12px 11px;
|
|
border: 6px solid #090a0e;
|
|
border-radius: 0;
|
|
background: linear-gradient(#292b32, #17191e);
|
|
box-shadow: inset 0 0 0 3px #45474e, 0 5px 0 #050609;
|
|
}
|
|
|
|
#gear-slots button {
|
|
position: relative;
|
|
height: 68px;
|
|
border: 4px solid #090a0e;
|
|
border-radius: 0;
|
|
color: #4c4e59;
|
|
background: linear-gradient(#191b22, #101116);
|
|
box-shadow: inset 0 0 0 3px #353740;
|
|
font-size: 31px;
|
|
}
|
|
|
|
#gear-slots button.equipped {
|
|
color: #fff;
|
|
border-color: var(--quality, #8eb9df);
|
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--quality) 50%, #111);
|
|
}
|
|
|
|
#gear-slots button small {
|
|
position: absolute;
|
|
right: 2px;
|
|
bottom: 0;
|
|
color: #fff;
|
|
font-size: 9px;
|
|
}
|
|
|
|
.action-row {
|
|
position: absolute;
|
|
left: 20px;
|
|
right: 20px;
|
|
bottom: 7px;
|
|
display: grid;
|
|
grid-template-columns: 74px 1fr 79px;
|
|
gap: 13px;
|
|
align-items: end;
|
|
}
|
|
|
|
.roll-button {
|
|
height: 89px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: #f8f0d7;
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__dice_btn.png") center / 100% 100% no-repeat;
|
|
filter: grayscale(.95) brightness(.97) drop-shadow(0 7px 0 #08090d);
|
|
font-size: 31px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-shadow: 2px 3px 0 #34343a;
|
|
}
|
|
|
|
.roll-button.ready {
|
|
color: #f9f6ee;
|
|
filter: grayscale(.92) brightness(1.16) drop-shadow(0 7px 0 #08090d) drop-shadow(0 0 7px #fff3);
|
|
}
|
|
|
|
.potion-button,
|
|
.map-button {
|
|
position: relative;
|
|
height: 76px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
filter: drop-shadow(0 4px 0 #07080c);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.potion-button span {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 0;
|
|
background:
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__potion_image.png") center 42% / 36% auto no-repeat,
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__potion_bg.png") center / contain no-repeat;
|
|
}
|
|
|
|
.potion-button strong {
|
|
position: absolute;
|
|
right: 7px;
|
|
bottom: 5px;
|
|
font-size: 14px;
|
|
text-shadow: 2px 2px 0 #000;
|
|
}
|
|
|
|
.map-button {
|
|
align-self: end;
|
|
}
|
|
|
|
.map-button span {
|
|
display: block;
|
|
position: absolute;
|
|
inset: 2px;
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__map_2.png") center / 540% no-repeat;
|
|
filter: grayscale(.35) brightness(1.25);
|
|
}
|
|
|
|
#modal-layer {
|
|
position: absolute;
|
|
z-index: 60;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: calc(var(--safe-top) + 38px) 28px 36px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
#modal-layer:has(.modal) {
|
|
background: #05040bb5;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.modal {
|
|
width: 100%;
|
|
max-height: 92%;
|
|
padding: 20px;
|
|
overflow: auto;
|
|
border: 5px solid #18111d;
|
|
border-radius: 14px;
|
|
color: #2b211e;
|
|
background: linear-gradient(#dfd0a9, #b89e71);
|
|
box-shadow: inset 0 0 0 4px #f6e8c1, 0 8px 0 #100b13, 0 20px 40px #000c;
|
|
animation: modal-in 220ms cubic-bezier(.2, 1.4, .4, 1);
|
|
}
|
|
|
|
.shop-modal {
|
|
width: 78%;
|
|
min-height: 76%;
|
|
max-height: 88%;
|
|
padding: 92px 28px 22px;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: #efe5dc;
|
|
background:
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_shop_bg.png") center top / 100% 100% no-repeat,
|
|
#3a2925;
|
|
box-shadow: 0 12px 0 #07070b, 0 20px 50px #000;
|
|
}
|
|
|
|
.shop-modal > h2 { display: none; }
|
|
|
|
.shop-master {
|
|
position: relative;
|
|
height: 70px;
|
|
margin: -56px 3px 15px;
|
|
padding: 15px 76px 10px 18px;
|
|
color: #4c4141;
|
|
background: linear-gradient(#f0ede7, #c9c9c7);
|
|
border: 3px solid #17141a;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.shop-master::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 0;
|
|
width: 72px;
|
|
height: 60px;
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_shop_master.png") center bottom / contain no-repeat;
|
|
}
|
|
|
|
.shop-section-title {
|
|
margin: 9px 0 8px;
|
|
padding: 7px;
|
|
border: 3px solid #18121d;
|
|
color: #f4eff5;
|
|
background: linear-gradient(#5d466a, #3e304b);
|
|
box-shadow: inset 0 0 0 2px #725a7b;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
}
|
|
|
|
.shop-modal .modal-actions {
|
|
margin-top: 11px;
|
|
}
|
|
|
|
.event-modal {
|
|
color: #332823;
|
|
}
|
|
|
|
.chest-modal {
|
|
color: #e8e1d5;
|
|
background: #14131a;
|
|
}
|
|
|
|
.chest-modal h2,
|
|
.bubble-modal h2,
|
|
.claw-modal h2,
|
|
.smith-modal h2,
|
|
.campfire-modal h2 {
|
|
background: linear-gradient(#685071, #473650);
|
|
}
|
|
|
|
.chest-scene {
|
|
position: relative;
|
|
height: 360px;
|
|
margin: 8px -20px;
|
|
background: radial-gradient(ellipse at 50% 57%, #fff1b087, #f3c03922 27%, transparent 58%);
|
|
}
|
|
|
|
.chest-scene::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 48%;
|
|
width: 264px;
|
|
height: 150px;
|
|
transform: translate(-50%, -50%);
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__treasure_box_1.png") center / contain no-repeat;
|
|
filter: drop-shadow(0 10px 0 #07070b) drop-shadow(0 0 20px #ffe77d);
|
|
animation: chest-breathe 1.2s steps(2) infinite;
|
|
}
|
|
|
|
@keyframes chest-breathe {
|
|
50% { transform: translate(-50%, -54%) scale(1.04); filter: drop-shadow(0 12px 0 #07070b) drop-shadow(0 0 32px #fff3a5); }
|
|
}
|
|
|
|
.campfire-scene {
|
|
height: 250px;
|
|
margin: -4px -8px 10px;
|
|
background:
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__bonfire.png") center 66% / 110px auto no-repeat,
|
|
radial-gradient(circle at 50% 68%, #ee903b8a, transparent 38%),
|
|
#24232b;
|
|
}
|
|
|
|
.smith-scene {
|
|
height: 255px;
|
|
margin: -4px -8px 10px;
|
|
background:
|
|
url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_1.png") center 62% / 240px auto no-repeat,
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png") center / cover,
|
|
#26232a;
|
|
animation: smith-idle 720ms steps(1) infinite;
|
|
}
|
|
|
|
@keyframes smith-idle {
|
|
0% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_1.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
|
|
25% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_2.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
|
|
50% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_3.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
|
|
75% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_4.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
|
|
}
|
|
|
|
.claw-scene {
|
|
height: 380px;
|
|
margin: 8px 0;
|
|
background:
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__claw_arm.png") center top / 78px auto no-repeat,
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__claw_machine.png") center / contain no-repeat,
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__claw_bg.png") center / cover;
|
|
}
|
|
|
|
.bubble-modal {
|
|
background: #15191d;
|
|
color: #efece5;
|
|
}
|
|
|
|
.bubble-shooter-scene {
|
|
position: relative;
|
|
height: 520px;
|
|
margin: 8px -20px;
|
|
overflow: hidden;
|
|
background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__bubble_shooter_bg.png") center / cover no-repeat;
|
|
}
|
|
|
|
.bubble-shooter-scene .bubble-grid {
|
|
width: 72%;
|
|
margin-top: 76px;
|
|
}
|
|
|
|
.bubble-cannon {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 5px;
|
|
width: 190px;
|
|
height: 170px;
|
|
transform: translateX(-50%);
|
|
background:
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__bubble_shooter_cannon.png") center 25% / 82px auto no-repeat,
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__bubble_shooter_cannon_floor.png") center bottom / contain no-repeat;
|
|
}
|
|
|
|
@keyframes modal-in {
|
|
from { opacity: 0; transform: translateY(20px) scale(0.86); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.modal h2 {
|
|
margin: -20px -20px 16px;
|
|
padding: 12px 18px;
|
|
border-bottom: 5px solid #25172b;
|
|
color: #fff4d9;
|
|
background: linear-gradient(#765987, #503b62);
|
|
font-size: 24px;
|
|
text-align: center;
|
|
text-shadow: 0 3px 0 #25172b;
|
|
}
|
|
|
|
.modal p {
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.result-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 76%;
|
|
overflow: hidden;
|
|
color: #fff0bd;
|
|
background:
|
|
linear-gradient(#15172ae8, #17596ee8),
|
|
url("../design/ue-ui/assets/original/battle/sharedassets3__victory_bg.png") center / cover no-repeat;
|
|
box-shadow: inset 0 0 0 4px #e0a75c, 0 8px 0 #090913, 0 22px 50px #000e;
|
|
}
|
|
|
|
.result-modal .modal-actions {
|
|
margin-top: auto;
|
|
padding-top: 22px;
|
|
}
|
|
|
|
.result-modal h2 {
|
|
margin-bottom: 0;
|
|
border: 0;
|
|
color: #fff0a8;
|
|
background: transparent;
|
|
font-size: 42px;
|
|
letter-spacing: 1px;
|
|
text-shadow: 5px 5px 0 #8f2c3d, 0 0 10px #ffe584;
|
|
animation: result-title 620ms cubic-bezier(.18,1.45,.32,1) both;
|
|
}
|
|
|
|
.result-hero {
|
|
height: 330px;
|
|
margin: -8px -20px -36px;
|
|
background: url("../design/ue-ui/assets/original/battle/sharedassets3__victory_knight.png") center / contain no-repeat;
|
|
filter: drop-shadow(0 12px 0 #0b1017) drop-shadow(0 0 18px #ffe88a);
|
|
animation: result-hero-in 720ms 120ms cubic-bezier(.2,1.2,.35,1) both;
|
|
}
|
|
|
|
.result-hero.defeat {
|
|
background-image: url("../design/ue-ui/assets/original/battle/sharedassets3__fail_shield.png");
|
|
filter: grayscale(.35) drop-shadow(0 12px 0 #0b1017) drop-shadow(0 0 16px #c44a5b);
|
|
}
|
|
|
|
.result-copy,
|
|
.result-seed {
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
.result-rewards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 9px;
|
|
margin: 16px 0;
|
|
}
|
|
|
|
.result-rewards span {
|
|
display: grid;
|
|
min-height: 78px;
|
|
place-items: center;
|
|
padding: 9px 5px;
|
|
border: 4px solid #131527;
|
|
border-radius: 10px;
|
|
color: #ffe96e;
|
|
background: #474158e8;
|
|
box-shadow: inset 0 0 0 2px #756a83, 0 5px 0 #0b0d18;
|
|
font-size: 16px;
|
|
animation: reward-card-in 420ms 420ms ease-out both;
|
|
}
|
|
|
|
.result-rewards strong {
|
|
font-size: 24px;
|
|
}
|
|
|
|
@keyframes result-title {
|
|
from { opacity: 0; transform: translateY(-34px) scale(1.4); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes result-hero-in {
|
|
from { opacity: 0; transform: translateY(38px) scale(.72); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
@keyframes reward-card-in {
|
|
from { opacity: 0; transform: translateY(22px) scale(.82); }
|
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
}
|
|
|
|
.modal-actions {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.modal-actions button,
|
|
.choice-card,
|
|
.shop-offer,
|
|
.debug-grid button {
|
|
min-height: 50px;
|
|
border: 3px solid #251a29;
|
|
border-radius: 8px;
|
|
background: linear-gradient(#31b4bd, #19798c);
|
|
box-shadow: inset 0 0 0 2px #7ee1dc, 0 4px 0 #18111b;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.modal-actions button.secondary {
|
|
background: linear-gradient(#6e5a78, #493b51);
|
|
box-shadow: inset 0 0 0 2px #9b849f, 0 4px 0 #18111b;
|
|
}
|
|
|
|
.modal-actions button.danger {
|
|
background: linear-gradient(#d6545c, #8f2b3c);
|
|
box-shadow: inset 0 0 0 2px #ef8b85, 0 4px 0 #281018;
|
|
}
|
|
|
|
.gear-card,
|
|
.blessing-card {
|
|
position: relative;
|
|
padding: 16px;
|
|
border: 5px solid var(--quality, #777);
|
|
border-radius: 12px;
|
|
background: #f1e3b9;
|
|
box-shadow: inset 0 0 0 3px #fff8d9, 0 5px 0 #3a2b30;
|
|
}
|
|
|
|
.gear-card .gear-icon,
|
|
.blessing-card .blessing-icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 76px;
|
|
height: 76px;
|
|
margin: 4px auto 12px;
|
|
border: 4px solid #2a1d2b;
|
|
border-radius: 10px;
|
|
background: #44344e;
|
|
color: #fff;
|
|
font-size: 38px;
|
|
}
|
|
|
|
.stat-delta.positive { color: #14794f; }
|
|
.stat-delta.negative { color: #a6243c; }
|
|
|
|
.shop-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 7px;
|
|
}
|
|
|
|
.shop-offer {
|
|
position: relative;
|
|
min-height: 126px;
|
|
padding: 11px 5px 35px;
|
|
border: 3px solid #1a1417;
|
|
border-radius: 0;
|
|
color: #3b2f2b;
|
|
background: #eee8d9;
|
|
box-shadow: inset 0 0 0 2px #fff, 0 4px 0 #20171a;
|
|
}
|
|
|
|
.shop-offer strong,
|
|
.shop-offer small {
|
|
display: block;
|
|
}
|
|
|
|
.shop-offer strong { font-size: 12px; }
|
|
.shop-offer small { margin-top: 7px; font-size: 9px; }
|
|
|
|
.shop-offer .price {
|
|
position: absolute;
|
|
left: 4px;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
padding: 4px;
|
|
border: 2px solid #a56c16;
|
|
color: #3a2b22;
|
|
background: #f3be3f;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dig-grid,
|
|
.bubble-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 5px;
|
|
margin: 12px auto;
|
|
}
|
|
|
|
.dig-cell,
|
|
.bubble {
|
|
aspect-ratio: 1;
|
|
border: 3px solid #2e2131;
|
|
border-radius: 5px;
|
|
color: transparent;
|
|
background: #6e6254;
|
|
}
|
|
|
|
.dig-cell.revealed {
|
|
color: #fff0a5;
|
|
background: #423751;
|
|
}
|
|
|
|
.bubble {
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
background: var(--bubble, #5d9ee7);
|
|
}
|
|
|
|
.claw-grid,
|
|
.carriage-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.capsule,
|
|
.carriage {
|
|
min-height: 62px;
|
|
border: 3px solid #2f2331;
|
|
border-radius: 50% 50% 9px 9px;
|
|
color: #2a1d27;
|
|
background: linear-gradient(#6dd6d1 0 48%, #f2d26d 49%);
|
|
font-weight: 900;
|
|
}
|
|
|
|
.third-dice-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 12px;
|
|
margin: 18px 0;
|
|
}
|
|
|
|
.third-die {
|
|
display: grid;
|
|
place-items: center;
|
|
aspect-ratio: 1;
|
|
border: 5px solid #2a1d2c;
|
|
border-radius: 10px;
|
|
color: #fff;
|
|
background: #614271;
|
|
font-size: 36px;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.third-die.legend {
|
|
color: #3b2510;
|
|
background: linear-gradient(#ffe073, #e99a24);
|
|
}
|
|
|
|
#toast-layer {
|
|
position: absolute;
|
|
z-index: 90;
|
|
top: 14%;
|
|
left: 8%;
|
|
right: 8%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
margin-bottom: 7px;
|
|
padding: 11px 16px;
|
|
border: 3px solid #151019;
|
|
border-radius: 8px;
|
|
color: #fff2ce;
|
|
background: #34283fe8;
|
|
box-shadow: inset 0 0 0 2px #725c80, 0 4px 10px #0007;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
animation: toast 1740ms ease forwards;
|
|
}
|
|
|
|
@keyframes toast {
|
|
0% { opacity: 0; transform: translateY(-10px); }
|
|
12%, 82% { opacity: 1; transform: translateY(0); }
|
|
100% { opacity: 0; transform: translateY(-8px); }
|
|
}
|
|
|
|
#tutorial-layer {
|
|
position: absolute;
|
|
z-index: 80;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.tutorial-bubble {
|
|
position: absolute;
|
|
left: 10%;
|
|
right: 10%;
|
|
bottom: 368px;
|
|
padding: 16px 18px;
|
|
border: 4px solid #211625;
|
|
border-radius: 12px;
|
|
color: #2e2220;
|
|
background:
|
|
linear-gradient(#f2e2b7dd, #c8a978dd),
|
|
url("../analysis/visual-study/unity-samples/ui/sharedassets3__tutorial_bubble_bg.png") center / cover;
|
|
box-shadow: 0 6px 0 #110d15;
|
|
font-weight: 800;
|
|
text-align: center;
|
|
animation: modal-in 220ms ease;
|
|
}
|
|
|
|
#debug-panel {
|
|
position: absolute;
|
|
z-index: 95;
|
|
top: calc(var(--safe-top) + 44px);
|
|
right: 14px;
|
|
width: min(390px, 88%);
|
|
max-height: calc(100% - 90px);
|
|
padding: 14px;
|
|
overflow: auto;
|
|
color: #eee4f2;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.debug-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.debug-title button {
|
|
border: 0;
|
|
color: #fff;
|
|
background: transparent;
|
|
font-size: 24px;
|
|
}
|
|
|
|
#debug-panel label {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 7px 0;
|
|
}
|
|
|
|
#debug-panel input,
|
|
#debug-panel output {
|
|
width: 62%;
|
|
padding: 5px 7px;
|
|
border: 2px solid #17121b;
|
|
border-radius: 4px;
|
|
color: #fff;
|
|
background: #18131d;
|
|
user-select: text;
|
|
}
|
|
|
|
.debug-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 6px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.debug-grid button {
|
|
min-height: 38px;
|
|
padding: 4px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
@media (max-height: 700px) {
|
|
#bottom-hud { height: 230px; }
|
|
.play-view { bottom: 230px; }
|
|
#gear-slots { margin: 5px auto; }
|
|
#gear-slots button { height: 43px; }
|
|
.roll-button { height: 62px; }
|
|
.action-row { gap: 8px; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 140ms !important;
|
|
transition-duration: 120ms !important;
|
|
}
|
|
}
|