/* ===================================
The Defier - 逆命者
主样式表
=================================== */
@font-face {
font-family: 'Ma Shan Zheng';
src:
local('Kaiti SC'),
local('STKaiti'),
local('KaiTi'),
local('Songti SC');
font-display: swap;
}
@font-face {
font-family: 'Noto Sans SC';
src:
local('PingFang SC'),
local('Hiragino Sans GB'),
local('Microsoft YaHei'),
local('Noto Sans CJK SC'),
local('Source Han Sans SC');
font-display: swap;
}
@font-face {
font-family: 'Cinzel';
src:
local('Baskerville'),
local('Times New Roman'),
local('Georgia');
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src:
local('Helvetica Neue'),
local('Arial');
font-display: swap;
}
/* CSS Variables */
:root {
/* 主色调 - 水墨与暗金 */
--primary: #0a0e14;
--primary-light: #1c2541;
--primary-dark: #000000;
/* 强调色 - 流光金与逆命紫 */
--accent-gold: #cfaa70;
/* Muted gold */
--accent-gold-bright: #fceea7;
--accent-purple: #9d4edd;
--accent-cyan: #4cc9f0;
--accent-red: #d00000;
--accent-green: #52b788;
/* 卡牌颜色 - 符箓风格 */
--card-attack: #9d0208;
--card-defense: #0077b6;
--card-law: #5a189a;
--card-chance: #faa307;
--card-energy: #6c757d;
--card-skill: #2a9d8f;
--card-power: #8f5bd6;
--card-status: #5f6775;
--card-bg: #e6e2d3;
/* Parchment color */
--card-text: #2b2d42;
/* 背景 - 深邃虚空 */
--bg-dark: #050505;
--bg-medium: #10141d;
--bg-light: #232936;
--bg-ink: rgba(0, 0, 0, 0.92);
/* 文字 */
--text-primary: #f0f0f0;
--text-secondary: rgba(255, 255, 255, 0.75);
--text-muted: rgba(255, 255, 255, 0.45);
--text-dark: #1a1a1a;
/* For cards */
/* 字体 */
--font-display: 'Ma Shan Zheng', cursive;
--font-body: 'Noto Sans SC', sans-serif;
/* 间距 */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
/* 圆角 */
--radius-sm: 4px;
--radius-md: 10px;
--radius-lg: 18px;
--radius-xl: 30px;
/* 动画 */
--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
/* New Ink & Gold Effects */
--ink-black: #000000;
--ink-gray: #1a1a1a;
--paper-texture: #e3d8c8;
--seal-red: #a4161a;
}
/* Reset & Base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 优化触摸体验，消除300ms延迟 */
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
html,
body {
width: 100%;
height: 100%;
font-family: var(--font-body);
font-size: clamp(14px, 1.5vw, 16px);
/* 动态字体大小 */
background: var(--bg-dark);
color: var(--text-primary);
overflow: hidden;
/* 禁用默认的过度滚动效果 */
overscroll-behavior: none;
}
/* ===================================
Screen Management
=================================== */
.screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
flex-direction: column;
background: var(--bg-dark);
z-index: 1;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
}
.screen::-webkit-scrollbar {
width: 6px;
}
.screen::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.screen::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.screen.active {
display: flex;
}
/* ===================================
Main Menu
=================================== */
/* ===================================
Main Menu - Refactored for Ink & Gold
=================================== */
#main-menu {
position: relative;
justify-content: flex-start;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
padding: clamp(20px, 4vh, 42px) 0 36px;
overscroll-behavior-y: contain;
/* Deep Void Gradient Base */
background: radial-gradient(circle at center, #1b263b 0%, #000000 100%);
}
.ink-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://raw.githubusercontent.com/googlefonts/noto-emoji/main/png/512/emoji_u2601.webp');
/* Placeholder cloud texture, replaced by CSS noise/gradient in prod */
background:
radial-gradient(circle at 20% 30%, rgba(20, 20, 30, 0.8) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(10, 10, 20, 0.9) 0%, transparent 60%);
z-index: 0;
}
/* Fog Layers */
.fog-layer {
position: absolute;
top: 0;
left: -100%;
width: 300%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
z-index: 1;
pointer-events: none;
}
.fog-layer.layer-1 {
animation: fog-move 60s linear infinite;
opacity: 0.4;
background-size: 500px 500px;
}
.fog-layer.layer-2 {
animation: fog-move 45s linear infinite reverse;
opacity: 0.2;
background-size: 300px 300px;
top: 10%;
}
@keyframes fog-move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(10%);
}
}
.menu-content {
position: relative;
z-index: 10;
text-align: center;
padding: 25px 60px;
background: radial-gradient(circle, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
}
/* Logo Area */
.game-logo {
margin-bottom: 5px;
position: relative;
display: inline-block;
}
.logo-img {
max-width: 250px;
width: 60%;
height: auto;
filter: drop-shadow(0 0 15px rgba(207, 170, 112, 0.4));
animation: logo-float 6s ease-in-out infinite;
margin-bottom: 5px;
}
@keyframes logo-float {
0%,
100% {
transform: translateY(0);
filter: drop-shadow(0 0 15px rgba(207, 170, 112, 0.4));
}
50% {
transform: translateY(-8px);
filter: drop-shadow(0 0 25px rgba(207, 170, 112, 0.6));
}
}
.seal-container {
position: absolute;
top: -10px;
right: -40px;
width: 100px;
height: 100px;
transform: rotate(15deg);
opacity: 0.9;
z-index: 3;
animation: pulse-seal 4s ease-in-out infinite;
}
.seal-ring {
width: 100%;
height: 100%;
border: 3px solid var(--seal-red);
border-radius: 12px;
box-shadow: 0 0 10px var(--seal-red);
}
.seal-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--seal-red);
font-family: var(--font-display);
font-size: 1.5rem;
white-space: nowrap;
writing-mode: vertical-rl;
}
@keyframes pulse-seal {
0%,
100% {
transform: rotate(15deg) scale(1);
opacity: 0.9;
}
50% {
transform: rotate(15deg) scale(1.05);
opacity: 1;
filter: drop-shadow(0 0 5px var(--seal-red));
}
}
.game-description {
max-width: 600px;
margin: 0 auto 18px;
font-size: 0.92rem;
color: var(--text-secondary);
line-height: 1.6;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
position: relative;
}
.game-description p {
margin-bottom: 4px;
}
/* Talisman Buttons */
.menu-buttons {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.talisman-btn {
position: relative;
width: 300px;
height: 52px;
background: transparent;
border: none;
cursor: pointer;
overflow: visible;
transition: transform var(--transition-fast);
}
.talisman-paper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #1a1a1a;
border: 1px solid var(--accent-gold);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
calc(100% - 10px) 100%, 0 100%, 0 10px);
transition: all var(--transition-normal);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
z-index: 1;
}
.talisman-paper::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid rgba(255, 215, 0, 0.3);
clip-path: inherit;
}
.talisman-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
z-index: 2;
color: var(--accent-gold);
font-family: var(--font-display);
font-size: 1.35rem;
letter-spacing: 2px;
transition: color var(--transition-fast);
}
.talisman-btn:hover {
transform: translateY(-2px);
}
.talisman-btn:hover .talisman-paper {
background: #2a2a2a;
border-color: var(--accent-gold-bright);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}
.talisman-btn:hover .talisman-content {
color: var(--accent-gold-bright);
text-shadow: 0 0 8px var(--accent-gold);
}
.talisman-btn.primary .talisman-paper {
background: linear-gradient(135deg, #1a0b2e 0%, #100520 100%);
border-color: var(--accent-purple);
}
.talisman-btn.primary:hover .talisman-paper {
background: linear-gradient(135deg, #2d1b4e 0%, #1a0b2e 100%);
border-color: var(--accent-gold-bright);
box-shadow: 0 0 25px rgba(157, 78, 221, 0.4);
}
.talisman-btn.small {
width: 140px;
height: 45px;
}
.talisman-btn.small .talisman-content {
font-size: 1rem;
gap: 5px;
}
/* Utilities Bar */
.menu-utilities {
display: flex;
justify-content: center;
gap: 26px;
margin-top: 25px;
}
.util-btn-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}
.util-btn {
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--text-muted);
font-size: 1.1rem;
cursor: pointer;
transition: all var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.util-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent-gold);
color: var(--accent-gold);
transform: translateY(-5px);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}
.util-label {
position: absolute;
bottom: -30px;
font-size: 0.8rem;
color: var(--accent-gold);
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
white-space: nowrap;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
pointer-events: none;
}
.util-btn-wrapper:hover .util-label {
opacity: 1;
transform: translateY(0);
}
.version-info {
font-size: 0.78rem;
color: var(--text-muted);
margin-top: 30px;
font-family: var(--font-body);
letter-spacing: 1px;
}
.menu-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 300px;
padding: 16px 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 18px;
background: rgba(20, 20, 30, 0.8);
color: #f0f0f0;
font-family: 'Noto Sans SC', sans-serif;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.menu-btn:hover {
background: rgba(30, 30, 45, 0.9);
border-color: #cfaa70;
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
color: #cfaa70;
}
.menu-btn.primary {
background: linear-gradient(135deg, #240046 0%, #3c096c 100%);
border: 1px solid #9d4edd;
font-weight: 600;
font-size: 1.2rem;
box-shadow: 0 4px 15px rgba(60, 9, 108, 0.4);
}
.menu-btn.primary:hover {
background: linear-gradient(135deg, #3c096c 0%, #5a189a 100%);
box-shadow: 0 6px 20px rgba(90, 24, 154, 0.6);
border-color: #fceea7;
color: #fff;
}
.menu-btn.small {
width: auto;
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
}
.btn-icon {
font-size: 1.3rem;
}
/* ===================================
Screen Header
=================================== */
.screen-header {
display: flex;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.screen-header h2 {
flex: 1;
text-align: center;
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--accent-gold);
}
.back-btn {
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
background: transparent;
color: var(--text-primary);
font-family: var(--font-body);
cursor: pointer;
transition: all var(--transition-fast);
}
.back-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent-gold);
}
/* ===================================
Character Panel
=================================== */
.character-panel {
display: grid;
grid-template-columns: 200px 1fr 250px;
gap: var(--spacing-xl);
padding: var(--spacing-xl);
height: calc(100% - 70px);
overflow: auto;
}
.character-avatar {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.avatar-ring {
position: absolute;
width: 180px;
height: 180px;
border: 2px solid var(--accent-gold);
border-radius: 50%;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.avatar-ring::before {
content: '';
position: absolute;
top: -5px;
left: 50%;
width: 10px;
height: 10px;
background: var(--accent-gold);
border-radius: 50%;
box-shadow: 0 0 10px var(--accent-gold);
}
.avatar-inner {
width: 150px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
border-radius: 50%;
font-family: var(--font-display);
font-size: 2rem;
color: var(--text-primary);
box-shadow:
0 0 30px rgba(156, 39, 176, 0.5),
inset 0 0 30px rgba(0, 0, 0, 0.3);
}
.character-info {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.character-info h3 {
font-family: var(--font-display);
font-size: 2rem;
color: var(--accent-gold);
}
.imprint-badge {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 500;
}
.imprint-badge残次 {
background: linear-gradient(135deg, #424242 0%, #616161 100%);
border: 1px solid #9e9e9e;
}
.character-desc {
color: var(--text-secondary);
line-height: 1.6;
}
.character-stats {
display: flex;
gap: var(--spacing-lg);
margin-top: var(--spacing-md);
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
min-width: 80px;
}
.stat-icon {
font-size: 1.5rem;
}
.stat-name {
font-size: 0.8rem;
color: var(--text-muted);
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-gold);
}
/* Fate Ring Display */
.fate-ring-display {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: rgba(0, 0, 0, 0.3);
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 215, 0, 0.2);
}
.fate-ring-display h4 {
color: var(--accent-gold);
font-family: var(--font-display);
}
.ring-visual {
position: relative;
width: 150px;
height: 150px;
}
.ring-core {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: radial-gradient(circle, var(--accent-gold) 0%, var(--primary) 100%);
border-radius: 50%;
box-shadow: 0 0 20px var(--accent-gold);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
}
50% {
transform: translate(-50%, -50%) scale(1.1);
}
}
.ring-orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 50%;
}
.orbit-1 {
width: 80px;
height: 80px;
transform: translate(-50%, -50%);
animation: rotate 8s linear infinite;
}
.orbit-2 {
width: 120px;
height: 120px;
transform: translate(-50%, -50%);
animation: rotate 12s linear infinite reverse;
}
/* ===================================
Law Codex (Refactored)
=================================== */
.codex-scroll-container {
height: calc(100% - 80px);
overflow-y: auto;
padding: 0 var(--spacing-xl) var(--spacing-xl);
/* Custom Scrollbar for Webkit */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) var(--bg-dark);
}
.codex-scroll-container::-webkit-scrollbar {
width: 6px;
}
.codex-scroll-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.codex-scroll-container::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.codex-section {
margin-bottom: var(--spacing-xl);
}
.codex-section-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid rgba(207, 170, 112, 0.3);
/* Faded gold */
position: relative;
}
.codex-section-header::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100px;
height: 2px;
background: var(--accent-gold);
box-shadow: 0 0 10px var(--accent-gold);
}
.codex-section-header h3 {
font-family: var(--font-display);
font-size: 2rem;
color: var(--accent-gold);
letter-spacing: 2px;
}
.section-icon {
font-size: 1.8rem;
filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.4));
}
/* --- Law Archive Grid (Jade Slips) --- */
.law-archive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--spacing-lg);
}
.law-item {
position: relative;
/* Brighter background for owned items */
background: linear-gradient(180deg, #2a2a35 0%, #151520 100%);
border: 1px solid #555;
/* Lighter border default */
border-radius: 4px;
padding: var(--spacing-md);
height: 220px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transition: all var(--transition-normal);
overflow: hidden;
/* Default glow for owned items */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.05);
}
/* Specific styling for when items are NOT locked (Owned) */
.law-item:not(.locked) {
border-color: var(--accent-gold);
box-shadow: 0 0 15px rgba(207, 170, 112, 0.2), inset 0 0 20px rgba(207, 170, 112, 0.05);
}
.law-item:not(.locked)::after {
background: var(--accent-gold);
box-shadow: 0 0 8px var(--accent-gold);
opacity: 0.8;
}
/* Hover effects for Owned items */
.law-item:not(.locked):hover {
transform: translateY(-5px) scale(1.02);
border-color: var(--accent-gold-bright);
background: linear-gradient(180deg, #3a3a45 0%, #1f1f2a 100%);
box-shadow: 0 10px 30px rgba(207, 170, 112, 0.4), inset 0 0 15px rgba(255, 215, 0, 0.1);
z-index: 10;
}
.law-icon-wrapper {
margin-top: 30px;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.05);
font-size: 2.5rem;
position: relative;
transition: all var(--transition-fast);
}
.law-item:hover .law-icon-wrapper {
border-color: var(--accent-gold);
color: var(--accent-gold);
text-shadow: 0 0 15px var(--accent-gold);
transform: scale(1.1);
}
.law-name {
margin-top: 20px;
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--text-secondary);
text-align: center;
transition: color var(--transition-fast);
}
.law-item:hover .law-name {
color: var(--accent-gold-bright);
}
.law-type-tag {
margin-top: auto;
font-size: 0.8rem;
color: #555;
border: 1px solid #333;
padding: 2px 8px;
border-radius: 10px;
}
/* Locked State */
.law-item.locked {
filter: grayscale(1) brightness(0.6);
opacity: 0.8;
border-style: dashed;
border-color: #333;
pointer-events: auto;
/* Allow click for "Unknown" popup */
}
.law-item.locked .law-name {
color: #555;
text-shadow: none;
}
.law-item.locked .law-icon-wrapper {
color: #444;
border-color: #333;
background: rgba(0, 0, 0, 0.5);
box-shadow: none;
}
.law-seal-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-15deg);
font-family: var(--font-display);
font-size: 5rem;
color: rgba(164, 22, 26, 0.7);
/* Seal Red */
border: 4px solid rgba(164, 22, 26, 0.7);
border-radius: 50%;
width: 120px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 5;
animation: seal-pulse 3s infinite alternate;
background: radial-gradient(circle, rgba(164, 22, 26, 0.1) 0%, transparent 70%);
}
@keyframes seal-pulse {
0% {
transform: translate(-50%, -50%) rotate(-15deg) scale(1);
opacity: 0.7;
}
100% {
transform: translate(-50%, -50%) rotate(-15deg) scale(1.05);
opacity: 0.9;
}
}
/* Rarity Tags for Dao Types */
.law-type-tag {
margin-top: auto;
font-size: 0.8rem;
padding: 2px 8px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.2);
font-weight: bold;
letter-spacing: 1px;
}
.law-type-tag.legendary {
color: #ffd700;
/* Gold */
border-color: #ffd700;
background: rgba(255, 215, 0, 0.1);
box-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
}
.law-type-tag.epic {
color: #d8bfd8;
/* Thistle/Pale Purple */
border-color: #d8bfd8;
background: rgba(216, 191, 216, 0.1);
}
/* Default/Rare */
.law-type-tag.rare {
color: #aaa;
border-color: #666;
}
/* --- Resonance Manual List (Bamboo Scrolls) --- */
.resonance-manual-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.resonance-item {
position: relative;
background: rgba(26, 26, 26, 0.8);
border-left: 4px solid #444;
padding: var(--spacing-md) var(--spacing-lg);
display: grid;
grid-template-columns: 200px 1fr;
gap: var(--spacing-lg);
transition: all var(--transition-normal);
overflow: hidden;
}
/* Texture overlay for paper feel */
.resonance-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0IiBoZWlnaHQ9IjQiPgo8cmVjdCB3aWR0aD0iNCIgaGVpZ2h0PSI0IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9IjAuMDUiLz4KPC9zdmc+');
opacity: 0.3;
pointer-events: none;
}
.resonance-item.active {
background: linear-gradient(90deg, rgba(40, 30, 10, 0.9) 0%, rgba(20, 20, 30, 0.8) 100%);
border-left-color: var(--accent-gold);
box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.05);
}
.resonance-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.resonance-title {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--text-muted);
margin-bottom: var(--spacing-sm);
display: flex;
align-items: center;
gap: 10px;
}
.resonance-item.active .resonance-title {
color: var(--accent-gold);
}
.resonance-desc {
font-size: 0.95rem;
color: #888;
margin-bottom: var(--spacing-xs);
line-height: 1.5;
}
.resonance-effect {
font-size: 0.9rem;
color: var(--accent-cyan);
margin-top: 5px;
}
/* Resonance Components (Icons) */
.resonance-components {
display: flex;
align-items: center;
gap: var(--spacing-sm);
flex-wrap: wrap;
align-content: center;
}
.res-component-icon {
font-size: 1.2rem;
color: #444;
background: #111;
padding: 6px 12px;
border-radius: 4px;
border: 1px solid #222;
display: flex;
align-items: center;
gap: 6px;
transition: all var(--transition-normal);
}
.resonance-item.active .res-component-icon.has-law {
color: var(--text-primary);
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.05);
}
.res-component-icon.has-law {
/* If item isn't fully active but user has this specific part */
color: #aaa;
border-color: #555;
}
/* ===================================
Legacy Collection Grid (For Treasures)
=================================== */
.collection-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--spacing-md);
padding: var(--spacing-lg);
overflow: auto;
}
.collection-item {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--transition-normal);
cursor: pointer;
min-height: 200px;
position: relative;
overflow: hidden;
}
.collection-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent-purple);
transform: translateY(-4px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
z-index: 10;
}
.collection-item.locked {
opacity: 0.5;
filter: grayscale(1);
}
.collection-icon {
font-size: 3rem;
margin-bottom: var(--spacing-sm);
flex-shrink: 0;
}
.collection-name {
font-size: 1rem;
font-weight: bold;
color: var(--accent-gold);
text-align: center;
margin-bottom: var(--spacing-xs);
flex-shrink: 0;
}
/* ===================================
Resonance Section
=================================== */
.resonance-section {
width: 100%;
margin-top: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 30px;
}
.resonance-header {
font-family: var(--font-display);
font-size: 1.8rem;
/* Slightly smaller than main titles */
color: var(--accent-purple);
text-align: center;
margin-bottom: 25px;
text-shadow: 0 0 10px rgba(157, 78, 221, 0.3);
}
.resonance-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
.resonance-item {
background: linear-gradient(135deg, rgba(20, 20, 30, 0.6) 0%, rgba(40, 40, 60, 0.4) 100%);
border: 1px solid rgba(157, 78, 221, 0.3);
border-radius: var(--radius-md);
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: transform var(--transition-fast);
}
.resonance-item:hover {
transform: translateY(-2px);
border-color: var(--accent-purple);
box-shadow: 0 5px 15px rgba(157, 78, 221, 0.2);
}
.resonance-title {
font-size: 1.1rem;
font-weight: bold;
color: var(--accent-gold-bright);
display: flex;
justify-content: space-between;
align-items: center;
}
.resonance-laws {
display: flex;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 5px;
}
.res-law-req {
font-size: 0.85rem;
color: var(--text-secondary);
background: rgba(0, 0, 0, 0.3);
padding: 4px 8px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.resonance-desc {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.5;
}
.resonance-effect {
font-size: 0.85rem;
color: var(--accent-cyan);
background: rgba(76, 201, 240, 0.1);
padding: 8px;
border-radius: 4px;
margin-top: auto;
}
/* ===================================
Map Screen
=================================== */
.map-header {
padding: var(--spacing-md) var(--spacing-lg);
background: rgba(0, 0, 0, 0.5);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.player-status-bar {
display: flex;
gap: var(--spacing-lg);
justify-content: center;
}
.status-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
}
.status-item .icon {
font-size: 1.2rem;
}
.status-item.hp {
border: 1px solid var(--accent-red);
}
.status-item.gold {
border: 1px solid var(--accent-gold);
}
.status-item.floor {
border: 1px solid var(--accent-cyan);
}
.map-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-xl);
overflow: auto;
}
.realm-title {
font-family: var(--font-display);
font-size: 2rem;
color: var(--accent-gold);
margin-bottom: var(--spacing-xl);
text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
/* Map Nodes - Constellation Style */
.map-nodes {
display: flex;
flex-direction: column;
gap: 50px;
/* Increased gap */
align-items: center;
position: relative;
padding: 40px;
padding-bottom: 80px;
}
/* Connecting lines */
.map-nodes::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: 100%;
background: linear-gradient(180deg,
transparent 0%,
rgba(255, 255, 255, 0.1) 10%,
rgba(255, 255, 255, 0.1) 90%,
transparent 100%);
z-index: 0;
}
.map-row {
display: flex;
gap: 80px;
/* Increased gap */
z-index: 1;
}
.map-node {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
background: var(--bg-dark);
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}
/* Hide old lines */
.map-node::before {
display: none;
}
.map-node:hover:not(.locked):not(.completed) {
background: var(--bg-light);
border-color: var(--accent-gold);
transform: scale(1.2);
box-shadow: 0 0 25px var(--accent-gold);
}
/* ===================================
Map Screen V3 (Ascension Style)
=================================== */
.map-screen-v3 {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, #0f172a, #312e81, #1e1b4b);
position: relative;
overflow: hidden;
}
/* Parallax Background Layers */
.map-bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.map-bg-stars {
background-image:
radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
radial-gradient(1px 1px at 130px 80px, #ffffff, rgba(0, 0, 0, 0));
background-size: 200px 200px;
opacity: 0.5;
}
.map-bg-mist {
background: url('data:image/svg+xml;utf8,');
opacity: 0.3;
animation: driftMist 60s linear infinite;
}
@keyframes driftMist {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 100%;
}
}
/* Map Header (Floating) */
.map-v3-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
padding: 20px;
display: flex;
justify-content: space-between;
align-items: flex-start;
pointer-events: none;
/* Let clicks pass through to map items if needed, but buttons need pointer-events auto */
}
.map-v3-header>* {
pointer-events: auto;
}
/* Scrollable Content Area */
.map-scroll-container {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
position: relative;
z-index: 10;
scroll-behavior: smooth;
padding-bottom: 100px;
/* Space for footer */
/* Hide Scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
}
.map-scroll-container::-webkit-scrollbar {
display: none;
}
/* The Content Wrapper inside Scroll */
.map-content-wrapper {
position: relative;
width: 100%;
max-width: 600px;
margin: 0 auto;
/* Removed min-height to align SVG with actual content height */
display: flex;
flex-direction: column-reverse;
align-items: center;
padding: 100px 0;
}
/* SVG Layer for Curvy Lines */
.map-connections-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.connection-path {
fill: none;
stroke: rgba(255, 255, 255, 0.15);
stroke-width: 2;
stroke-dasharray: 5, 5;
transition: all 0.5s ease;
}
.connection-path.active {
stroke: var(--accent-gold);
stroke-width: 3;
stroke-dasharray: none;
filter: drop-shadow(0 0 5px var(--accent-gold));
animation: flowPulse 2s infinite linear;
}
.connection-path.completed {
stroke: var(--accent-green);
stroke-opacity: 0.6;
stroke-width: 2;
}
/* Nodes */
/* Rows container */
.node-row-v3 {
position: relative;
width: 100%;
height: 120px;
/* Fixed height per row */
display: flex;
justify-content: center;
/* Center nodes in the row */
align-items: center;
z-index: 2;
padding: 0 20px;
/* Add padding to sides */
}
.map-node-v3 {
width: 64px;
height: 64px;
border-radius: 50%;
background: #1a1a1a;
border: 2px solid #555;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
position: relative;
/* Changed from absolute to relative */
margin: 0 40px;
/* Space between nodes */
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
z-index: 5;
/* Ensure above lines */
/* Centering without transform conflict */
/* Removed negative margins as we are not using absolute centering anymore */
/* Removed top: 50%; */
}
/* Node Types */
.map-node-v3.enemy {
border-color: #ef4444;
color: #ef4444;
background: radial-gradient(circle at 30% 30%, #450a0a, #000);
}
.map-node-v3.elite {
border-color: #a855f7;
color: #a855f7;
background: radial-gradient(circle at 30% 30%, #3b0764, #000);
transform: scale(1.1);
}
.map-node-v3.boss {
width: 90px;
height: 90px;
font-size: 40px;
border-color: #eab308;
color: #eab308;
background: radial-gradient(circle at 30% 30%, #422006, #000);
box-shadow: 0 0 30px rgba(234, 179, 8, 0.4);
/* Adjust margin for larger size */
/* Remove negative margins as we are not using absolute centering anymore */
margin: 0 40px;
}
.map-node-v3.event {
border-color: #06b6d4;
color: #06b6d4;
background: radial-gradient(circle at 30% 30%, #083344, #000);
}
.map-node-v3.shop {
border-color: #f59e0b;
color: #f59e0b;
background: radial-gradient(circle at 30% 30%, #451a03, #000);
}
.map-node-v3.rest {
border-color: #10b981;
color: #10b981;
background: radial-gradient(circle at 30% 30%, #064e3b, #000);
}
.map-node-v3.trial {
border-color: #f43f5e;
color: #f43f5e;
background: radial-gradient(circle at 30% 30%, #4c0519, #000);
}
.map-node-v3.forge {
border-color: #f97316;
color: #f97316;
background: radial-gradient(circle at 30% 30%, #431407, #000);
}
.map-node-v3.observatory {
border-color: #38bdf8;
color: #7dd3fc;
background: radial-gradient(circle at 30% 30%, #102b46, #020617);
}
.map-node-v3.spirit_grotto {
border-color: #34d399;
color: #a7f3d0;
background: radial-gradient(circle at 30% 30%, #064e3b, #020617);
}
.map-node-v3.forbidden_altar {
border-color: #fb7185;
color: #fda4af;
background: radial-gradient(circle at 30% 30%, #4c0519, #09090b);
}
.map-node-v3.memory_rift {
border-color: #a78bfa;
color: #ddd6fe;
background: radial-gradient(circle at 30% 30%, #312e81, #020617);
}
/* States */
.map-node-v3.locked {
filter: grayscale(1) brightness(0.5);
cursor: not-allowed;
border-style: dashed;
}
.map-node-v3.completed {
filter: brightness(0.6);
border-color: #fff;
opacity: 0.8;
}
.map-node-v3.current {
box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.3), 0 0 20px rgba(234, 179, 8, 0.6);
border-color: var(--accent-gold);
color: #fff;
transform: scale(1.2);
z-index: 10;
animation: pulseNode 2s infinite;
}
@keyframes pulseNode {
0% {
transform: scale(1.2);
box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.3);
}
50% {
transform: scale(1.25);
box-shadow: 0 0 0 8px rgba(234, 179, 8, 0.1);
}
100% {
transform: scale(1.2);
box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.3);
}
}
/* Hover Tooltip */
.node-tooltip {
position: absolute;
bottom: 110%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
border: 1px solid var(--accent-gold);
padding: 8px 12px;
border-radius: 6px;
width: min(260px, 58vw);
font-size: 13px;
line-height: 1.45;
color: #fff;
white-space: normal;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
z-index: 20;
}
.node-tooltip-title {
color: #ffd892;
font-size: 0.8rem;
font-weight: 700;
}
.node-tooltip-copy {
margin-top: 4px;
color: rgba(255, 255, 255, 0.92);
}
.node-tooltip-risk {
margin-top: 5px;
color: rgba(212, 235, 255, 0.92);
font-size: 0.76rem;
}
.node-tooltip-risk.danger {
color: #ff9d9d;
}
.node-tooltip-risk.engineering {
color: rgba(174, 232, 205, 0.94);
}
.node-risk-badge {
position: absolute;
right: -12px;
bottom: -10px;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(12, 18, 28, 0.88);
color: rgba(255, 234, 214, 0.95);
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.04em;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
pointer-events: none;
z-index: 6;
}
.node-risk-badge.tier-high {
border-color: rgba(255, 170, 110, 0.48);
color: #ffd1a6;
}
.node-risk-badge.tier-extreme {
border-color: rgba(255, 118, 118, 0.58);
color: #ffc0c0;
background: rgba(42, 16, 20, 0.92);
}
.map-node-v3.current[data-risk-tier="high"] {
box-shadow: 0 0 22px rgba(255, 163, 109, 0.28);
}
.map-node-v3.current[data-risk-tier="extreme"] {
box-shadow: 0 0 26px rgba(255, 100, 100, 0.34);
}
.pollution-mark {
position: absolute;
top: -8px;
right: -8px;
font-size: 18px;
filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8));
animation: pulse-danger 2s infinite ease-in-out;
pointer-events: none;
z-index: 5;
}
@keyframes pulse-danger {
0% { transform: scale(1); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 10px rgba(255, 0, 0, 1)); }
100% { transform: scale(1); opacity: 0.8; }
}
.map-node-v3:hover .node-tooltip {
opacity: 1;
}
.map-node.current {
border-color: var(--accent-gold);
box-shadow: 0 0 30px var(--accent-gold);
background: radial-gradient(circle, var(--accent-gold-bright) 0%, var(--accent-gold) 100%);
color: var(--bg-dark);
transform: scale(1.1);
}
.map-node.current::after {
border-color: var(--accent-gold);
animation: ripple 2s infinite;
}
@keyframes ripple {
0% {
transform: scale(1);
opacity: 0.8;
border-width: 2px;
}
100% {
transform: scale(2);
opacity: 0;
border-width: 0px;
}
}
.map-node.completed {
background: var(--accent-green);
border-color: var(--accent-green);
color: var(--bg-dark);
opacity: 0.6;
transform: scale(0.8);
}
.map-node.locked {
opacity: 0.2;
background: #000;
border-color: #333;
cursor: not-allowed;
}
.map-node.enemy {
border-color: var(--accent-red);
color: var(--accent-red);
}
.map-node.enemy:hover {
background: var(--accent-red);
color: white;
}
.map-node.elite {
border-color: var(--accent-purple);
color: var(--accent-purple);
box-shadow: 0 0 10px var(--accent-purple);
}
.map-node.elite:hover {
background: var(--accent-purple);
color: white;
}
.map-node.boss {
width: 100px;
height: 100px;
font-size: 3rem;
border-width: 4px;
border-color: var(--accent-red);
color: var(--accent-red);
box-shadow: 0 0 30px var(--accent-red);
}
.map-node.event {
border-color: var(--accent-cyan);
color: var(--accent-cyan);
}
.map-node.shop {
border-color: var(--accent-gold);
color: var(--accent-gold);
}
.map-node.rest {
border-color: var(--accent-green);
color: var(--accent-green);
}
.map-footer {
display: flex;
gap: var(--spacing-md);
justify-content: center;
padding: var(--spacing-lg);
background: rgba(0, 0, 0, 0.5);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.map-expedition-panels {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
padding: 0 28px 18px;
}
.expedition-panel-card {
border: 1px solid rgba(202, 177, 104, 0.28);
background:
linear-gradient(180deg, rgba(10, 17, 34, 0.92), rgba(12, 23, 43, 0.88)),
radial-gradient(circle at top right, rgba(210, 171, 76, 0.1), transparent 52%);
border-radius: 18px;
padding: 16px 18px;
box-shadow: 0 18px 40px rgba(2, 5, 14, 0.18);
display: flex;
flex-direction: column;
gap: 10px;
}
.expedition-overview-card {
grid-column: span 2;
}
.expedition-observatory-card {
grid-column: span 2;
}
.expedition-signals-card {
grid-column: span 2;
}
.expedition-card-kicker {
color: #f0cb76;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.expedition-card-title {
color: #f8f3e4;
font-size: 18px;
font-weight: 700;
}
.expedition-card-note {
color: rgba(232, 236, 247, 0.82);
font-size: 14px;
line-height: 1.6;
}
.expedition-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.expedition-chip {
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(202, 177, 104, 0.26);
background: rgba(26, 35, 64, 0.72);
color: #f7ebc9;
font-size: 12px;
}
.expedition-choice-list,
.expedition-faction-list {
display: grid;
gap: 10px;
}
.expedition-choice-card,
.expedition-faction-card,
.expedition-nemesis-card {
border-radius: 14px;
border: 1px solid rgba(147, 168, 214, 0.18);
background: rgba(17, 25, 45, 0.66);
padding: 12px 12px 10px;
display: flex;
flex-direction: column;
gap: 8px;
}
.expedition-choice-card.selected,
.expedition-nemesis-card.hunting {
border-color: rgba(238, 194, 91, 0.46);
box-shadow: inset 0 0 0 1px rgba(238, 194, 91, 0.16);
}
.expedition-choice-card.suggested {
border-color: rgba(112, 188, 255, 0.44);
box-shadow: inset 0 0 0 1px rgba(112, 188, 255, 0.12);
}
.expedition-nemesis-card.recurring,
.expedition-nemesis-card.allied,
.expedition-nemesis-card.guarding {
border-color: rgba(255, 168, 105, 0.46);
box-shadow: inset 0 0 0 1px rgba(255, 168, 105, 0.16);
}
.expedition-choice-card.completed {
border-color: rgba(88, 181, 126, 0.42);
}
.expedition-faction-card.allied {
border-color: rgba(96, 194, 153, 0.48);
}
.expedition-faction-card.hostile,
.expedition-nemesis-card.escaped {
border-color: rgba(221, 105, 105, 0.42);
}
.expedition-nemesis-card.defeated {
border-color: rgba(106, 198, 137, 0.44);
}
.expedition-nemesis-card.released {
border-color: rgba(108, 197, 224, 0.42);
}
.expedition-nemesis-card.traded {
border-color: rgba(255, 208, 116, 0.42);
}
.expedition-nemesis-card.evolved {
border-color: rgba(196, 104, 255, 0.42);
}
.expedition-choice-head {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
}
.expedition-choice-head > * {
min-width: 0;
}
.expedition-choice-head strong {
color: #f8f3e4;
font-size: 15px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.expedition-choice-head span {
color: rgba(214, 222, 240, 0.76);
font-size: 12px;
text-align: right;
line-height: 1.5;
overflow-wrap: anywhere;
}
.expedition-choice-card p,
.expedition-faction-card p,
.expedition-nemesis-card p {
margin: 0;
color: rgba(224, 231, 243, 0.78);
font-size: 13px;
line-height: 1.6;
}
.expedition-choice-meta {
display: grid;
gap: 4px;
color: rgba(201, 212, 235, 0.72);
font-size: 12px;
}
.expedition-observatory-source {
display: grid;
gap: 10px;
padding: 12px 12px 10px;
border-radius: 14px;
border: 1px solid rgba(128, 186, 255, 0.22);
background: rgba(17, 27, 51, 0.62);
}
.expedition-observatory-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 10px;
}
.expedition-observatory-action {
display: grid;
gap: 8px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(128, 186, 255, 0.2);
background: rgba(12, 22, 43, 0.58);
}
.expedition-observatory-action.selected {
border-color: rgba(238, 194, 91, 0.42);
box-shadow: inset 0 0 0 1px rgba(238, 194, 91, 0.14);
}
.expedition-observatory-action .collection-inline-btn {
width: fit-content;
max-width: 100%;
}
.expedition-observatory-note,
.expedition-empty-note {
color: rgba(201, 219, 247, 0.74);
font-size: 12px;
line-height: 1.65;
}
.expedition-practice-topic-list,
.expedition-answer-sheet-list {
gap: 12px;
}
.expedition-answer-goal-list {
display: grid;
gap: 8px;
}
.expedition-answer-goal {
display: grid;
gap: 4px;
padding: 9px 10px;
border-radius: 12px;
border: 1px solid rgba(140, 169, 220, 0.18);
background: rgba(12, 21, 39, 0.52);
}
.expedition-answer-goal.completed {
border-color: rgba(88, 181, 126, 0.42);
}
.expedition-answer-goal.selected {
border-color: rgba(238, 194, 91, 0.32);
}
.expedition-answer-goal.suggested {
border-color: rgba(112, 188, 255, 0.32);
}
.expedition-answer-goal strong {
color: #f8f3e4;
font-size: 13px;
line-height: 1.45;
}
.expedition-answer-goal span {
color: rgba(216, 226, 244, 0.76);
font-size: 12px;
line-height: 1.55;
}
.expedition-bounty-signal {
margin-top: -2px;
}
.expedition-warning-list,
.expedition-signal-list {
display: grid;
gap: 8px;
}
.expedition-warning-item,
.expedition-signal-item {
display: grid;
gap: 4px;
padding: 9px 10px;
border-radius: 12px;
border: 1px solid rgba(140, 169, 220, 0.18);
background: rgba(12, 21, 39, 0.52);
}
.expedition-warning-item strong,
.expedition-signal-item strong {
color: #f8f3e4;
font-size: 13px;
line-height: 1.45;
}
.expedition-warning-item span,
.expedition-signal-item span {
color: rgba(221, 231, 247, 0.78);
font-size: 12px;
line-height: 1.6;
}
.expedition-warning-item.high,
.expedition-signal-item.warning.high {
border-color: rgba(255, 133, 133, 0.36);
background: linear-gradient(145deg, rgba(63, 23, 25, 0.74), rgba(37, 17, 21, 0.66));
}
.expedition-warning-item.medium,
.expedition-signal-item.warning.medium {
border-color: rgba(255, 182, 120, 0.32);
background: linear-gradient(145deg, rgba(58, 34, 19, 0.72), rgba(31, 21, 13, 0.62));
}
.expedition-warning-item.low,
.expedition-signal-item.warning.low {
border-color: rgba(132, 188, 255, 0.26);
}
.expedition-signal-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.expedition-signal-block {
display: grid;
gap: 10px;
padding: 12px;
border-radius: 14px;
border: 1px solid rgba(138, 180, 240, 0.18);
background: rgba(12, 21, 39, 0.44);
}
.expedition-signal-block.warning {
border-color: rgba(255, 173, 121, 0.2);
background: linear-gradient(145deg, rgba(31, 18, 11, 0.54), rgba(19, 16, 20, 0.48));
}
.expedition-signal-block.nemesis {
border-color: rgba(206, 160, 255, 0.22);
background: linear-gradient(145deg, rgba(25, 17, 42, 0.58), rgba(18, 13, 34, 0.52));
}
.expedition-signal-block.nemesis.high,
.expedition-signal-block.nemesis.extreme {
border-color: rgba(255, 154, 154, 0.24);
background: linear-gradient(145deg, rgba(54, 20, 26, 0.6), rgba(33, 15, 25, 0.54));
}
.expedition-signal-item.nemesis.low {
border-color: rgba(166, 201, 255, 0.24);
}
.expedition-signal-item.nemesis.medium {
border-color: rgba(214, 177, 255, 0.26);
background: linear-gradient(145deg, rgba(31, 21, 56, 0.66), rgba(20, 14, 37, 0.58));
}
.expedition-signal-item.nemesis.high,
.expedition-signal-item.nemesis.extreme {
border-color: rgba(255, 141, 141, 0.3);
background: linear-gradient(145deg, rgba(57, 22, 31, 0.72), rgba(34, 16, 24, 0.64));
}
.expedition-empty-note {
padding: 14px 12px;
border-radius: 14px;
border: 1px dashed rgba(128, 186, 255, 0.22);
background: rgba(10, 18, 35, 0.56);
}
@media (max-width: 1080px) {
.map-expedition-panels {
grid-template-columns: 1fr;
}
.expedition-overview-card,
.expedition-observatory-card,
.expedition-signals-card {
grid-column: span 1;
}
}
@media (max-width: 720px) {
.map-expedition-panels {
gap: 12px;
padding: 0 14px 16px;
}
.expedition-panel-card {
padding: 14px 14px 12px;
border-radius: 16px;
}
.expedition-observatory-source,
.expedition-observatory-card .expedition-choice-card,
.expedition-faction-card,
.expedition-nemesis-card,
.expedition-signal-block,
.expedition-warning-item,
.expedition-signal-item,
.expedition-empty-note {
padding-left: 10px;
padding-right: 10px;
}
.expedition-observatory-card .expedition-choice-head {
flex-direction: column;
align-items: flex-start;
}
.expedition-observatory-card .expedition-choice-head span {
text-align: left;
}
.expedition-observatory-actions,
.expedition-signal-grid {
grid-template-columns: 1fr;
}
.expedition-observatory-action .collection-inline-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.map-expedition-panels {
padding: 0 10px 14px;
}
.expedition-panel-card {
padding: 12px 12px 10px;
}
.expedition-card-title {
font-size: 16px;
}
.expedition-card-note {
font-size: 13px;
}
.expedition-observatory-card .expedition-choice-card p,
.expedition-faction-card p,
.expedition-nemesis-card p {
font-size: 12px;
}
.expedition-observatory-card .expedition-choice-meta,
.expedition-observatory-note,
.expedition-empty-note,
.expedition-observatory-card .expedition-answer-goal span,
.expedition-warning-item span,
.expedition-signal-item span {
font-size: 11px;
}
.expedition-observatory-card .expedition-chip {
padding: 5px 8px;
font-size: 11px;
}
.expedition-observatory-card .expedition-answer-goal {
padding: 8px 9px;
}
}
/* ===================================
Battle Screen - 水墨金韵战斗界面
=================================== */
/* ===================================
Battle Screen - 虚空道韵 (Void & Tao)
=================================== */
/* ===================================
Battle Screen - 虚空道韵 (Void & Tao)
=================================== */
.battle-container {
display: grid;
height: 100%;
position: relative;
overflow: hidden;
perspective: 1200px;
/* Deep 3D perspective */
background: radial-gradient(circle at center, #1b263b 0%, #000000 100%);
/* Layout Grid */
grid-template-columns: 1fr 150px 1fr;
/* Player (Left) - Log (Center) - Enemy (Right) */
grid-template-rows: 80px minmax(0, 1fr) 220px;
/* Treasure Bar - Battle Stage - Hand Area */
grid-template-areas:
"treasures treasures treasures"
"player log enemies"
"hand hand hand";
align-items: center;
}
/* Void Particles/Texture */
.battle-container::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.04;
pointer-events: none;
z-index: 0;
mix-blend-mode: overlay;
}
/* Battle Treasures Bar - Centered at Top */
.treasures-bar.battle-pos {
grid-area: treasures;
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
width: 100%;
z-index: 100;
/* Optional: background if needed */
}
/* Enemy Area - 3D Stage */
.enemy-area {
grid-area: enemies;
display: flex;
justify-content: flex-start;
/* Align closer to center? User said Right. */
/* Let's align center of the right column */
justify-content: center;
align-items: center;
padding: var(--spacing-lg);
transform-style: preserve-3d;
/* Keep enemies upright, no tilt */
transform: none;
/* Slight turn towards player */
z-index: 10;
min-height: 0;
}
.enemy-container {
display: flex;
gap: 40px;
align-items: flex-end;
transform-style: preserve-3d;
/* Align feet */
/* transform-style is already set */
}
/* Enemy Entity - Paper Doll / Tablet Style */
.enemy {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
cursor: pointer;
position: relative;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
transform-style: preserve-3d;
}
.enemy:hover {
transform: translateY(-12px) scale(1.08);
}
.enemy.targeted {
filter: drop-shadow(0 0 15px var(--accent-red));
}
/* 敌人头像 - 带光环效果 */
.enemy-avatar {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #37474f 0%, #263238 100%);
border: 3px solid var(--accent-red);
border-radius: 50%;
font-size: 3rem;
position: relative;
box-shadow:
0 0 20px rgba(244, 67, 54, 0.3),
inset 0 -20px 30px rgba(0, 0, 0, 0.3);
}
/* 敌人光环 */
.enemy-avatar::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(244, 67, 54, 0.25) 60deg,
transparent 120deg,
rgba(244, 67, 54, 0.25) 180deg,
transparent 240deg,
rgba(244, 67, 54, 0.25) 300deg,
transparent 360deg);
animation: enemyAura 5s linear infinite;
z-index: -1;
}
/* Boss特殊光效 */
.enemy.boss .enemy-avatar {
border-color: var(--accent-gold);
box-shadow:
0 0 30px rgba(207, 170, 112, 0.5),
0 0 60px rgba(156, 39, 176, 0.3),
inset 0 -20px 30px rgba(0, 0, 0, 0.3);
}
.enemy.boss .enemy-avatar::before {
inset: -12px;
background: conic-gradient(from 0deg,
rgba(207, 170, 112, 0.4) 0deg,
rgba(156, 39, 176, 0.3) 90deg,
rgba(207, 170, 112, 0.4) 180deg,
rgba(156, 39, 176, 0.3) 270deg,
rgba(207, 170, 112, 0.4) 360deg);
filter: blur(4px);
animation: bossAura 4s linear infinite;
}
/* Elite敌人效果 */
.enemy.elite .enemy-avatar {
border-color: var(--accent-purple);
box-shadow:
0 0 25px rgba(156, 39, 176, 0.4),
inset 0 -20px 30px rgba(0, 0, 0, 0.3);
}
.enemy.elite .enemy-avatar::before {
background: conic-gradient(from 0deg,
transparent 0deg,
rgba(156, 39, 176, 0.35) 90deg,
transparent 180deg,
rgba(156, 39, 176, 0.35) 270deg,
transparent 360deg);
}
@keyframes enemyAura {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes bossAura {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
/* 意图图标 - 增强视觉 */
.enemy-intent {
position: absolute;
top: -15px;
right: -15px;
z-index: 32;
width: 42px;
height: 42px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(10, 14, 20, 0.9);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
font-size: 1.3rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
animation: intentPulse 2s ease-in-out infinite;
}
.enemy-intent.attack {
border-color: var(--accent-red);
box-shadow: 0 0 12px rgba(244, 67, 54, 0.5);
}
.enemy-intent.defend {
border-color: var(--accent-cyan);
box-shadow: 0 0 12px rgba(0, 188, 212, 0.5);
}
.enemy-intent.buff {
border-color: var(--accent-purple);
box-shadow: 0 0 12px rgba(156, 39, 176, 0.5);
}
.enemy-intent.breaker {
border-color: #ff8a50;
box-shadow: 0 0 14px rgba(255, 138, 80, 0.6);
}
.intent-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
font-size: 0.62rem;
line-height: 1;
font-weight: 700;
padding: 2px 5px;
border-radius: 999px;
color: #fff6ee;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(20, 24, 36, 0.88);
letter-spacing: 0.3px;
white-space: nowrap;
}
.intent-tag.breaker {
background: linear-gradient(135deg, rgba(211, 73, 42, 0.92), rgba(255, 138, 80, 0.92));
border-color: rgba(255, 190, 160, 0.85);
}
@keyframes intentPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
.intent-value {
position: absolute;
bottom: -8px;
font-size: 0.75rem;
font-weight: 600;
background: var(--bg-dark);
padding: 1px 6px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.enemy-name {
font-weight: 600;
font-family: var(--font-display);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.enemy-role-tag {
margin-top: 4px;
margin-bottom: 4px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.68rem;
letter-spacing: 0.4px;
line-height: 1.2;
border: 1px solid rgba(255, 255, 255, 0.24);
background: rgba(13, 18, 28, 0.75);
color: rgba(238, 245, 255, 0.95);
}
.enemy-role-tag.role-striker {
border-color: rgba(255, 134, 99, 0.7);
background: linear-gradient(135deg, rgba(128, 31, 26, 0.76), rgba(205, 73, 51, 0.76));
color: #ffe9e2;
}
.enemy-role-tag.role-guardian {
border-color: rgba(89, 222, 255, 0.65);
background: linear-gradient(135deg, rgba(21, 60, 92, 0.78), rgba(42, 112, 162, 0.78));
color: #e5f6ff;
}
.enemy-role-tag.role-hexer {
border-color: rgba(213, 146, 255, 0.66);
background: linear-gradient(135deg, rgba(73, 32, 101, 0.78), rgba(126, 57, 158, 0.78));
color: #f7e9ff;
}
.enemy-role-tag.role-balanced {
border-color: rgba(168, 196, 255, 0.5);
background: linear-gradient(135deg, rgba(36, 56, 96, 0.72), rgba(56, 81, 122, 0.72));
color: #e9f1ff;
}
.enemy-plan-tag {
margin-top: -1px;
margin-bottom: 4px;
padding: 1px 8px;
border-radius: 999px;
border: 1px solid rgba(131, 224, 198, 0.6);
background: linear-gradient(135deg, rgba(21, 77, 64, 0.8), rgba(36, 126, 103, 0.78));
color: #e6fff6;
font-size: 0.6rem;
line-height: 1.2;
letter-spacing: 0.24px;
white-space: nowrap;
}
.enemy-encounter-tag {
margin-top: 2px;
margin-bottom: 4px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 196, 123, 0.52);
background: linear-gradient(135deg, rgba(89, 58, 24, 0.82), rgba(142, 95, 30, 0.78));
color: #ffe9bd;
font-size: 0.62rem;
line-height: 1.2;
letter-spacing: 0.28px;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(49, 26, 6, 0.35);
}
.enemy-encounter-affix {
margin-top: -1px;
margin-bottom: 4px;
padding: 1px 8px;
border-radius: 999px;
border: 1px solid rgba(137, 199, 255, 0.55);
background: linear-gradient(135deg, rgba(24, 58, 96, 0.84), rgba(32, 95, 145, 0.78));
color: #ddf2ff;
font-size: 0.6rem;
line-height: 1.2;
letter-spacing: 0.26px;
white-space: nowrap;
box-shadow: 0 2px 7px rgba(7, 22, 44, 0.34);
}
.enemy-squad-tag {
margin-top: -1px;
margin-bottom: 4px;
padding: 1px 8px;
border-radius: 999px;
border: 1px solid rgba(130, 226, 255, 0.58);
background: linear-gradient(135deg, rgba(22, 74, 95, 0.84), rgba(30, 114, 141, 0.8));
color: #def8ff;
font-size: 0.6rem;
line-height: 1.2;
letter-spacing: 0.26px;
white-space: nowrap;
box-shadow: 0 2px 7px rgba(8, 34, 43, 0.34);
}
.enemy-formation-tag {
margin-top: -1px;
margin-bottom: 4px;
padding: 1px 8px;
border-radius: 999px;
border: 1px solid rgba(205, 170, 255, 0.58);
background: linear-gradient(135deg, rgba(61, 34, 92, 0.84), rgba(106, 64, 146, 0.78));
color: #f1e3ff;
font-size: 0.6rem;
line-height: 1.2;
letter-spacing: 0.26px;
white-space: nowrap;
box-shadow: 0 2px 7px rgba(28, 13, 46, 0.34);
}
.enemy-counter-tag {
margin-top: -1px;
margin-bottom: 4px;
padding: 1px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 210, 125, 0.58);
background: linear-gradient(135deg, rgba(92, 55, 17, 0.82), rgba(152, 94, 26, 0.78));
color: #fff0d7;
font-size: 0.6rem;
line-height: 1.2;
letter-spacing: 0.26px;
white-space: nowrap;
box-shadow: 0 2px 7px rgba(58, 32, 6, 0.33);
}
.enemy-threat-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-top: 2px;
margin-bottom: 5px;
}
.enemy-threat-tag {
padding: 1px 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
font-size: 0.62rem;
line-height: 1.2;
letter-spacing: 0.25px;
background: rgba(12, 18, 28, 0.74);
color: rgba(236, 243, 255, 0.94);
white-space: nowrap;
}
.enemy-threat-tag.tag-burst-kill {
border-color: rgba(255, 126, 88, 0.74);
background: linear-gradient(135deg, rgba(133, 31, 22, 0.78), rgba(201, 64, 44, 0.76));
color: #ffe6de;
}
.enemy-threat-tag.tag-status-lock {
border-color: rgba(218, 151, 255, 0.74);
background: linear-gradient(135deg, rgba(72, 33, 104, 0.8), rgba(123, 55, 152, 0.76));
color: #f8e9ff;
}
.enemy-threat-tag.tag-summon-chain {
border-color: rgba(99, 214, 255, 0.68);
background: linear-gradient(135deg, rgba(18, 67, 96, 0.8), rgba(42, 122, 168, 0.76));
color: #e5f7ff;
}
.enemy-threat-tag.tag-combo-loop {
border-color: rgba(130, 212, 156, 0.68);
background: linear-gradient(135deg, rgba(27, 82, 58, 0.8), rgba(42, 134, 92, 0.76));
color: #eafff0;
}
.enemy-threat-tag.tag-sustain {
border-color: rgba(255, 208, 129, 0.68);
background: linear-gradient(135deg, rgba(105, 74, 24, 0.78), rgba(158, 113, 35, 0.74));
color: #fff3d9;
}
.enemy-threat-tag.high-risk {
animation: threatRiskPulse 1.7s ease-in-out infinite;
box-shadow: 0 0 10px rgba(255, 112, 112, 0.24);
}
.enemy-threat-tag:hover {
transform: translateY(-1px);
filter: brightness(1.08);
}
.environment-display {
position: absolute;
top: 74px;
left: 14px;
z-index: 90;
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
max-width: min(720px, 70vw);
padding: 6px 10px;
border-radius: 10px;
border: 1px solid rgba(185, 205, 255, 0.28);
background: linear-gradient(135deg, rgba(11, 17, 29, 0.82), rgba(21, 31, 49, 0.76));
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
color: #e8f2ff;
}
.environment-display .env-main {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.84rem;
}
.environment-display .env-icon {
font-size: 1rem;
}
.environment-display .env-name {
font-weight: 600;
letter-spacing: 0.35px;
}
.chapter-rule-chip,
.chapter-omen-chip,
.chapter-leyline-chip,
.chapter-formation-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 999px;
font-size: 0.75rem;
line-height: 1.24;
letter-spacing: 0.28px;
box-shadow: 0 4px 10px rgba(8, 16, 32, 0.24);
}
.chapter-rule-chip {
border: 1px solid rgba(232, 190, 122, 0.46);
background: linear-gradient(135deg, rgba(63, 43, 20, 0.84), rgba(102, 67, 23, 0.78));
color: #ffe8c2;
}
.chapter-omen-chip {
border: 1px solid rgba(164, 203, 255, 0.38);
background: linear-gradient(135deg, rgba(19, 40, 72, 0.84), rgba(29, 68, 111, 0.78));
color: #dff2ff;
}
.chapter-leyline-chip {
border: 1px solid rgba(154, 227, 192, 0.42);
background: linear-gradient(135deg, rgba(17, 66, 48, 0.84), rgba(24, 95, 68, 0.78));
color: #ddfff0;
}
.chapter-formation-chip {
border: 1px solid rgba(211, 176, 255, 0.44);
background: linear-gradient(135deg, rgba(57, 30, 86, 0.84), rgba(94, 52, 138, 0.78));
color: #f3e6ff;
}
.chapter-rule-chip .chapter-rule-icon,
.chapter-omen-chip .chapter-rule-icon,
.chapter-leyline-chip .chapter-rule-icon,
.chapter-formation-chip .chapter-rule-icon {
font-size: 0.88rem;
}
.chapter-rule-chip .chapter-rule-stage,
.chapter-omen-chip .chapter-rule-stage,
.chapter-leyline-chip .chapter-rule-stage,
.chapter-formation-chip .chapter-rule-stage {
color: rgba(255, 236, 197, 0.72);
font-size: 0.68rem;
}
.encounter-theme-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 196, 120, 0.52);
background: linear-gradient(135deg, rgba(76, 48, 19, 0.84), rgba(122, 78, 24, 0.8));
color: #ffe7ba;
font-size: 0.76rem;
line-height: 1.25;
letter-spacing: 0.28px;
box-shadow: 0 4px 10px rgba(50, 27, 8, 0.26);
}
.encounter-theme-chip .encounter-icon {
font-size: 0.92rem;
}
.squad-formation-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 9px;
border-radius: 999px;
border: 1px solid rgba(129, 223, 255, 0.56);
background: linear-gradient(135deg, rgba(21, 74, 101, 0.84), rgba(33, 112, 145, 0.78));
color: #dff6ff;
font-size: 0.75rem;
line-height: 1.24;
letter-spacing: 0.28px;
box-shadow: 0 4px 10px rgba(10, 36, 51, 0.27);
}
.squad-formation-chip .squad-icon {
font-size: 0.9rem;
}
@keyframes threatRiskPulse {
0%,
100% {
box-shadow: 0 0 0 0 rgba(255, 115, 115, 0.18);
}
50% {
box-shadow: 0 0 0 3px rgba(255, 115, 115, 0.08);
}
}
/* 敌人血条增强 */
.enemy-hp {
width: 100px;
height: 10px;
background: rgba(0, 0, 0, 0.6);
border-radius: 5px;
overflow: hidden;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.enemy-hp-fill {
height: 100%;
background: linear-gradient(90deg, #c62828 0%, var(--accent-red) 50%, #ff6659 100%);
transition: width var(--transition-normal);
position: relative;
}
/* 血条光泽 */
.enemy-hp-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
border-radius: 5px 5px 0 0;
}
.enemy-hp-text {
font-size: 0.8rem;
color: var(--text-secondary);
}
.enemy-block {
display: flex;
align-items: center;
gap: 4px;
font-size: 0.9rem;
color: var(--accent-cyan);
}
/* Battle Middle (Log) */
.battle-middle {
grid-area: log;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
pointer-events: none;
/* Click through */
z-index: 50;
min-height: 0;
}
/* 战斗日志 - 增强 */
.battle-log {
padding: 10px 24px;
background:
linear-gradient(90deg,
transparent 0%,
rgba(0, 0, 0, 0.7) 20%,
rgba(0, 0, 0, 0.7) 80%,
transparent 100%);
border-radius: 0;
border-top: 1px solid rgba(207, 170, 112, 0.3);
border-bottom: 1px solid rgba(207, 170, 112, 0.3);
font-size: 0.95rem;
font-weight: 500;
color: var(--text-primary);
max-width: 90%;
text-align: center;
opacity: 0;
transform: translateY(-5px);
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.battle-log.show {
opacity: 1;
transform: translateY(0);
}
/* 连击显示 */
.combo-display {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
display: none;
flex-direction: column;
align-items: center;
gap: 5px;
z-index: 200;
opacity: 0;
pointer-events: none;
animation: comboAppear 0.5s ease-out forwards;
}
.combo-display.show {
display: flex;
opacity: 1;
animation: comboAppear 0.5s ease-out forwards;
}
@keyframes comboAppear {
0% {
transform: translate(-50%, -50%) scale(0.3);
opacity: 0;
}
50% {
transform: translate(-50%, -50%) scale(1.2);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.combo-count {
font-size: 4rem;
font-weight: 900;
font-family: var(--font-display);
color: var(--accent-gold);
text-shadow:
0 0 20px rgba(207, 170, 112, 0.8),
0 0 40px rgba(207, 170, 112, 0.5),
0 4px 8px rgba(0, 0, 0, 0.5);
line-height: 1;
}
.combo-text {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: 4px;
color: var(--accent-red);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.combo-bonus {
font-size: 0.9rem;
color: var(--accent-cyan);
font-weight: 600;
padding: 4px 12px;
background: rgba(0, 0, 0, 0.6);
border-radius: 12px;
border: 1px solid rgba(0, 188, 212, 0.4);
}
/* Buff Display */
.buff-list {
display: flex;
gap: 4px;
margin-top: 5px;
flex-wrap: wrap;
justify-content: center;
}
.buff-icon {
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
background: rgba(0, 0, 0, 0.6);
padding: 2px 4px;
border-radius: 4px;
font-size: 0.8rem;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.buff-val {
font-weight: bold;
color: var(--accent-gold);
}
/* Player Area */
/* Player Area - The Console */
.player-area {
grid-area: player;
display: flex;
justify-content: center;
align-items: center;
/* Center in its box */
/* Remove bottom align since it's now in the middle row */
gap: 40px;
padding: 20px;
position: relative;
z-index: 100;
/* 3D Console effect - REMOVED */
transform-style: flat;
transform: none;
/* Slight turn towards enemies */
/* Transparent background to blend in */
/* Transparent background to blend in */
background: transparent !important;
border: none;
box-shadow: none;
margin: 0;
/* Remove auto margin */
min-height: 0;
}
.player-character {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
}
.player-avatar {
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
border: 3px solid var(--accent-gold);
border-radius: 50%;
font-family: var(--font-display);
font-size: 1.2rem;
position: relative;
box-shadow:
0 0 25px rgba(207, 170, 112, 0.4),
inset 0 -15px 25px rgba(0, 0, 0, 0.3);
}
.player-face-visual {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
/* Behind text (which needs z-index > 1) */
background-position: center top;
background-size: cover;
}
.player-face-visual.skin-equipped {
box-shadow:
inset 0 0 0 2px rgba(207, 170, 112, 0.82),
0 0 18px rgba(98, 196, 255, 0.42);
}
.player-avatar.skin-equipped::before {
opacity: 0.95;
filter: saturate(1.3);
}
.player-skin-badge {
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
min-width: 72px;
max-width: 132px;
font-size: 0.68rem;
line-height: 1.2;
color: rgba(236, 225, 197, 0.95);
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(207, 170, 112, 0.4);
background: rgba(9, 20, 35, 0.85);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 6;
}
/* Fix z-index for name to be above visual */
.player-avatar>span,
.player-avatar>#player-name-display {
position: relative;
z-index: 5;
text-shadow: 0 0 4px #000;
/* Enhance readability */
}
/* 玩家灵气光环 */
.player-avatar::before {
content: '';
position: absolute;
inset: -10px;
border-radius: 50%;
border: 2px solid transparent;
background:
linear-gradient(var(--bg-dark), var(--bg-dark)) padding-box,
conic-gradient(from 0deg,
var(--accent-gold),
var(--accent-purple),
var(--accent-cyan),
var(--accent-gold)) border-box;
animation: playerAura 6s linear infinite;
z-index: -1;
opacity: 0.7;
}
@keyframes playerAura {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.avatar-effects {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
pointer-events: none;
/* 用于受伤闪烁等动态效果 */
}
.player-bars {
display: flex;
flex-direction: column;
gap: 4px;
align-items: center;
}
/* 玩家血条 - 增强光泽 */
.hp-bar {
width: 130px;
height: 18px;
background: rgba(0, 0, 0, 0.6);
border-radius: 9px;
overflow: hidden;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.bar-fill {
height: 100%;
transition: width var(--transition-normal);
position: relative;
}
.hp-fill {
background: linear-gradient(90deg, #8b0000 0%, #c62828 30%, var(--accent-red) 70%, #ff6659 100%);
}
/* 血条光泽效果 */
.hp-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 45%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
border-radius: 9px 9px 0 0;
}
/* 血条流光动画 */
.hp-bar::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.15),
transparent);
animation: hpShine 4s ease-in-out infinite;
}
@keyframes hpShine {
0% {
left: -100%;
}
50%,
100% {
left: 150%;
}
}
.bar-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
font-weight: 700;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
z-index: 1;
}
/* 护盾显示 - 增强 */
.block-display {
display: none;
align-items: center;
gap: 6px;
padding: 4px 12px;
background: rgba(0, 188, 212, 0.15);
border: 2px solid var(--accent-cyan);
border-radius: var(--radius-md);
box-shadow:
0 0 15px rgba(0, 188, 212, 0.3),
inset 0 0 10px rgba(0, 188, 212, 0.1);
animation: blockPulse 2s ease-in-out infinite;
}
.block-display.show {
display: flex;
}
@keyframes blockPulse {
0%,
100% {
box-shadow: 0 0 15px rgba(0, 188, 212, 0.3), inset 0 0 10px rgba(0, 188, 212, 0.1);
}
50% {
box-shadow: 0 0 25px rgba(0, 188, 212, 0.5), inset 0 0 15px rgba(0, 188, 212, 0.2);
}
}
.block-icon {
font-size: 1rem;
}
.block-value {
font-weight: 700;
color: var(--accent-cyan);
font-size: 1rem;
text-shadow: 0 0 5px rgba(0, 188, 212, 0.5);
}
/* Energy Display - 灵力显示增强 */
.energy-display {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
}
.energy-orbs {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
max-width: 250px;
/* 容纳6个图标：32×6 + 8×5 = 232px */
}
/* 能量球改为emoji显示 */
.energy-orb {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
transition: all var(--transition-fast);
position: relative;
animation: orbFloat 2.5s ease-in-out infinite;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
@keyframes orbFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-4px);
}
}
/* 每个能量球错开动画 */
.energy-orb:nth-child(2) {
animation-delay: 0.15s;
}
.energy-orb:nth-child(3) {
animation-delay: 0.3s;
}
.energy-orb:nth-child(4) {
animation-delay: 0.45s;
}
.energy-orb:nth-child(5) {
animation-delay: 0.6s;
}
.energy-text {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-secondary);
}
/* Hand Area */
/* Hand Area - The Cards */
.hand-area {
grid-area: hand;
display: flex;
align-items: flex-start;
/* Cards hang from top of area? No, sit on bottom */
align-items: flex-end;
justify-content: flex-start;
gap: 0;
/* Move UP logic: negative margin or transform */
/* Grid row is fixed at 280px at bottom. */
/* We can push the cards up by just aligning them higher or transforming */
padding: 20px;
padding-bottom: 20px;
min-height: 200px;
/* No background, floating in void */
background: transparent;
overflow: visible !important;
/* Allow 3D popups */
perspective: 1000px;
z-index: 200;
/* Lift entire hand up - Reduced from -50px */
transform: translateY(-20px);
}
/* New 3D Card Styles */
/* .card-wrapper removed */
/* Ensure global card styles are compatible or override here */
#hand-cards .card {
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Bouncy spring */
margin-left: -30px;
/* Overlap fan effect */
transform-origin: bottom center;
/* Default: Resting on table - Lifted up */
transform: rotateX(10deg) translateY(-20px) scale(0.9);
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.1) inset;
border: 1px solid rgba(0, 0, 0, 0.5);
background: var(--card-bg);
border-radius: 10px;
/* Smooth corners */
position: relative;
}
#hand-cards .card:first-child {
margin-left: 0;
}
/* Hover Effect: Pop Up & Straighten */
#hand-cards .card:hover {
/* Use transform-origin to scale from bottom-center, preventing jitter */
transform-origin: bottom center;
transform: translateY(-30px) scale(1.08) rotateX(0deg) !important;
z-index: 1000;
/* No margin changes to prevent layout shift */
margin-left: 0px;
margin-right: 0px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
0 0 20px var(--accent-gold);
border-color: var(--accent-gold);
}
/* Selected Effect */
#hand-cards .card.selected {
transform: translateY(-90px) scale(1.3) rotateX(0deg) !important;
z-index: 999;
box-shadow: 0 0 40px var(--accent-red);
border-color: var(--accent-red);
}
/* Unplayable */
#hand-cards .card.unplayable {
filter: grayscale(0.8) brightness(0.7);
cursor: not-allowed;
}
#hand-cards .card.advisor-focus {
transform: translateY(-44px) scale(1.12) rotateX(0deg) !important;
z-index: 1100;
border-color: rgba(164, 255, 183, 0.92);
box-shadow: 0 0 0 2px rgba(162, 255, 189, 0.26), 0 12px 30px rgba(73, 149, 89, 0.42);
}
/* 牌堆3D堆叠效果 */
.deck-pile,
.discard-pile {
width: 75px;
height: 105px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:
linear-gradient(145deg, rgba(60, 60, 70, 0.9) 0%, rgba(30, 30, 35, 0.95) 100%);
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
position: relative;
transform-style: preserve-3d;
transform: perspective(500px) rotateX(5deg);
box-shadow:
0 5px 15px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
/* 模拟卡牌堆叠层 */
.deck-pile::before,
.deck-pile::after,
.discard-pile::before,
.discard-pile::after {
content: '';
position: absolute;
inset: 4px;
background: linear-gradient(145deg, rgba(80, 80, 90, 0.6) 0%, rgba(40, 40, 45, 0.8) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: calc(var(--radius-md) - 2px);
z-index: -1;
}
.deck-pile::before,
.discard-pile::before {
transform: translateZ(-4px) translateY(4px);
opacity: 0.7;
}
.deck-pile::after,
.discard-pile::after {
transform: translateZ(-8px) translateY(8px);
opacity: 0.4;
}
.deck-pile:hover,
.discard-pile:hover {
transform: perspective(500px) rotateX(0deg) translateY(-5px);
border-color: var(--accent-gold);
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.5),
0 0 15px rgba(207, 170, 112, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.pile-count {
font-size: 1.6rem;
font-weight: 700;
color: var(--accent-gold);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.pile-label {
font-size: 0.75rem;
color: var(--text-muted);
font-weight: 500;
letter-spacing: 0.5px;
}
.hand-cards {
display: flex;
gap: -30px;
perspective: 1000px;
align-items: flex-end;
/* 卡牌底部对齐 */
}
/* ===================================
卡牌3D悬浮效果系统
移植自 pokemon-cards-css，适配水墨金韵风格
=================================== */
/* Cards */
.card {
/* === 3D交互状态变量 === */
--pointer-x: 50%;
--pointer-y: 50%;
--rotate-x: 0deg;
--rotate-y: 0deg;
--card-opacity: 0;
/* === 水墨金韵流光色系 === */
--shine-gold: hsla(43, 74%, 62%, 0.7);
--shine-cyan: hsla(187, 100%, 42%, 0.5);
--shine-white: hsla(0, 0%, 100%, 0.3);
/* === 基础尺寸 === */
width: 130px;
height: 180px;
background: var(--card-bg);
color: var(--card-text);
border: 4px solid rgba(0, 0, 0, 0.2);
border-radius: var(--radius-sm);
padding: var(--spacing-sm);
display: flex;
flex-direction: column;
cursor: pointer;
position: relative;
margin-left: -35px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
/* === 3D变换核心 === */
transform-style: preserve-3d;
transform:
perspective(800px) rotateY(var(--rotate-x)) rotateX(var(--rotate-y));
transition:
transform 0.1s ease-out,
box-shadow 0.2s ease-out,
border-color 0.2s ease-out;
/* 硬件加速 */
will-change: transform;
-webkit-transform: translate3d(0, 0, 0.01px);
}
.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' opacity='0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
opacity: 0.6;
pointer-events: none;
z-index: 0;
}
.card>* {
z-index: 1;
}
.card:first-child {
margin-left: 0;
}
/* === 卡牌光效层 === */
/* 光效层 - 金色流光 (color-dodge混合模式) */
.card__shine {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
border-radius: inherit;
overflow: hidden;
/* 锥形渐变模拟全息光栅 */
background: conic-gradient(from 0deg at var(--pointer-x) var(--pointer-y),
var(--shine-gold) 0deg,
var(--shine-cyan) 60deg,
transparent 120deg,
var(--shine-gold) 180deg,
var(--shine-cyan) 240deg,
transparent 300deg,
var(--shine-gold) 360deg);
background-size: 150% 150%;
/* 核心：颜色减淡混合模式产生金属反光 - Reduced Brightness/Contrast */
filter: brightness(0.6) contrast(1.5) saturate(0.8);
mix-blend-mode: soft-light;
/* Switched from color-dodge to avoid whiteout */
opacity: 0;
transition: opacity 0.3s ease-out;
}
/* 高光层 - 表面跟随光 (overlay混合模式) */
.card__glare {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 6;
border-radius: inherit;
overflow: hidden;
/* 径向渐变跟随鼠标位置 */
background: radial-gradient(farthest-corner circle at var(--pointer-x) var(--pointer-y),
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.3) 20%,
rgba(255, 215, 0, 0.1) 40%,
transparent 70%);
/* 叠加模式增强对比 - Changed to soft-light */
mix-blend-mode: soft-light;
opacity: 0;
transition: opacity 0.3s ease-out;
}
/* 交互状态 - 激活光效 */
.card.card--interacting {
z-index: 100;
border-color: var(--accent-gold);
box-shadow:
0 0 15px rgba(255, 215, 0, 0.4),
0 8px 25px rgba(0, 0, 0, 0.5);
}
.card.card--interacting .card__shine {
opacity: 0.3;
/* Was 1 - Drastically reduced */
}
.card.card--interacting .card__glare {
opacity: 0.15;
/* Was 0.8 - Drastically reduced */
}
/* 稀有度特殊光效 */
.card.rarity-rare .card__shine,
.card.rarity-legendary .card__shine {
/* 更强烈的流光效果 */
filter: brightness(0.9) contrast(3) saturate(0.8);
}
.card.rarity-legendary {
--shine-gold: hsla(43, 100%, 65%, 0.9);
--shine-cyan: hsla(280, 80%, 60%, 0.7);
}
/* 确保光效层在内容之上 */
.card__shine,
.card__glare {
backface-visibility: hidden;
}
/* 仅在支持悬停的设备上启用 hover 效果 */
@media (hover: hover) {
.card:hover {
z-index: 100;
/* 保留3D旋转变量，同时添加上移和缩放 */
transform:
perspective(800px) rotateY(var(--rotate-x)) rotateX(var(--rotate-y)) translateY(-10px) scale(1.08);
box-shadow:
0 0 20px rgba(255, 215, 0, 0.5),
0 8px 20px rgba(0, 0, 0, 0.4);
border-color: var(--accent-gold);
}
/* 手牌特有：大幅突出显示 */
.hand-cards .card:hover {
transform-origin: center bottom;
transform:
perspective(800px) rotateY(var(--rotate-x)) rotateX(var(--rotate-y)) translateY(-35px) scale(1.12);
box-shadow:
0 15px 40px rgba(0, 0, 0, 0.6),
0 0 25px rgba(255, 215, 0, 0.5);
z-index: 1000;
}
}
/* 移动端点击反馈 */
.card:active {
transform: scale(0.95);
transition: transform 0.1s;
}
.card.attack {
border-color: var(--card-attack);
background: linear-gradient(135deg, var(--card-bg) 0%, #f0e6e6 100%);
}
.card.defense {
border-color: var(--card-defense);
background: linear-gradient(135deg, var(--card-bg) 0%, #e6eff0 100%);
}
.card.law {
border-color: var(--card-law);
background: linear-gradient(135deg, var(--card-bg) 0%, #ebe6f0 100%);
}
.card.chance {
border-color: var(--card-chance);
background: linear-gradient(135deg, var(--card-bg) 0%, #f0eee6 100%);
}
.card.energy {
border-color: var(--card-energy);
}
.card.skill {
border-color: var(--card-skill);
background: linear-gradient(135deg, var(--card-bg) 0%, #e4f1ee 100%);
}
.card.power {
border-color: var(--card-power);
background: linear-gradient(135deg, var(--card-bg) 0%, #eee7f8 100%);
}
.card.status {
border-color: var(--card-status);
background: linear-gradient(135deg, #d9d6d1 0%, #c4c8d0 100%);
}
.card.skill .card-type {
color: rgba(26, 106, 96, 0.82);
}
.card.power .card-type {
color: rgba(80, 46, 133, 0.84);
}
.card.status .card-type {
color: rgba(56, 61, 72, 0.82);
}
.card.unplayable {
opacity: 0.6;
filter: grayscale(0.8);
transform: translateY(10px) scale(0.95);
}
.card.selected {
transform: translateY(-50px) scale(1.2);
box-shadow: 0 0 40px var(--accent-gold);
border-color: var(--accent-gold);
}
.card.priority-play {
box-shadow: 0 0 0 1px rgba(255, 243, 186, 0.65), 0 0 14px rgba(124, 207, 255, 0.28);
animation: cardPriorityPulse 1.8s ease-in-out infinite;
}
.card.priority-play.priority-cleanse {
box-shadow: 0 0 0 1px rgba(148, 248, 209, 0.74), 0 0 15px rgba(96, 222, 176, 0.32);
}
.card.priority-play.priority-break {
box-shadow: 0 0 0 1px rgba(255, 210, 132, 0.72), 0 0 15px rgba(247, 169, 82, 0.32);
}
.card.priority-play.priority-defend {
box-shadow: 0 0 0 1px rgba(154, 214, 255, 0.75), 0 0 15px rgba(108, 177, 255, 0.33);
}
.card.priority-play.priority-burst {
box-shadow: 0 0 0 1px rgba(255, 159, 143, 0.76), 0 0 15px rgba(232, 101, 89, 0.34);
}
.card-cost {
position: absolute;
top: -10px;
left: -10px;
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
background: var(--primary);
color: var(--accent-gold);
border: 2px solid var(--accent-gold);
border-radius: 50%;
font-weight: 700;
font-size: 1.2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
z-index: 10;
font-family: var(--font-display);
}
.card-live-tags {
position: absolute;
top: 4px;
right: 4px;
z-index: 11;
display: flex;
flex-direction: column;
gap: 3px;
pointer-events: none;
}
.card-live-tag {
padding: 1px 6px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.35);
background: rgba(11, 18, 31, 0.78);
color: rgba(238, 246, 255, 0.96);
font-size: 0.52rem;
line-height: 1.2;
letter-spacing: 0.22px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
white-space: nowrap;
}
.card-live-tag.tag-cleanse {
border-color: rgba(137, 236, 190, 0.66);
background: linear-gradient(135deg, rgba(24, 92, 70, 0.82), rgba(37, 142, 107, 0.78));
color: #e5fff2;
}
.card-live-tag.tag-break {
border-color: rgba(255, 199, 119, 0.64);
background: linear-gradient(135deg, rgba(96, 58, 19, 0.82), rgba(160, 95, 24, 0.78));
color: #ffefd2;
}
.card-live-tag.tag-defend {
border-color: rgba(136, 205, 255, 0.66);
background: linear-gradient(135deg, rgba(22, 62, 98, 0.82), rgba(34, 112, 170, 0.78));
color: #e3f5ff;
}
.card-live-tag.tag-burst {
border-color: rgba(255, 141, 123, 0.66);
background: linear-gradient(135deg, rgba(111, 32, 22, 0.82), rgba(181, 62, 44, 0.78));
color: #ffebe6;
}
.cost-candy {
background: #ffeb3b;
color: #e91e63;
border-color: #e91e63;
font-size: 1.1rem;
width: 36px;
/* 与普通费用徽章一致 */
height: 36px;
box-shadow: 0 0 10px #e91e63;
}
.card-header {
display: flex;
align-items: flex-start;
justify-content: center;
text-align: center;
padding: 2px 0 2px 15px;
/* Added left padding to avoid overlap with cost */
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
margin-bottom: 4px;
width: 100%;
min-height: 28px;
}
/* Active Skill Button Z-Index Fix */
#active-skill-btn {
pointer-events: auto;
z-index: 200;
}
.card-name,
.card-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--primary-dark);
font-family: var(--font-display);
transition: color 0.2s;
width: 100%;
line-height: 1.08;
min-height: calc(1.08em * 2);
max-height: calc(1.08em * 2);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-wrap: balance;
}
/* Fix: Do not change color on hover per user request */
.card:hover .card-name,
.card:hover .card-title {
color: var(--primary-dark) !important;
}
.card-type {
font-size: 0.6rem;
color: rgba(0, 0, 0, 0.5);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: auto;
min-height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
.card-image,
.card-art {
flex: 0 0 40px;
min-height: 40px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
margin: 4px 0;
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
}
.card-desc {
font-size: 0.7rem;
text-align: center;
color: var(--text-dark);
line-height: 1.3;
min-height: 40px;
max-height: 55px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
background: rgba(255, 255, 255, 0.4);
border-radius: var(--radius-sm);
padding: 4px 6px;
transition: all var(--transition-normal);
}
/* 悬停时显示完整描述 - 仅限鼠标 */
@media (hover: hover) {
.card:hover .card-desc {
max-height: 100px;
overflow: visible;
-webkit-line-clamp: unset;
background: rgba(255, 255, 255, 0.9);
z-index: 10;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
}
@keyframes cardPriorityPulse {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-1px) scale(1.01);
}
}
/* End Turn Button - 符篆风格 */
.end-turn-btn {
position: fixed;
right: 30px;
bottom: 220px;
padding: 14px 28px;
/* 符篆纸张背景 */
background:
linear-gradient(135deg,
rgba(207, 170, 112, 0.92) 0%,
rgba(180, 140, 80, 0.95) 50%,
rgba(160, 120, 60, 0.92) 100%);
color: var(--bg-dark);
border: 2px solid var(--accent-gold-bright);
border-radius: 6px;
/* 符文装饰边框 */
box-shadow:
inset 0 0 0 3px rgba(10, 14, 20, 0.08),
0 4px 15px rgba(0, 0, 0, 0.4),
0 0 25px rgba(207, 170, 112, 0.25);
font-family: var(--font-display);
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 3px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
z-index: 100;
/* Paper Texture - handled by ::before, remove relative from here if it conflicts with fixed */
/* position: relative; REMOVED to allow position: fixed to work */
}
/* Ensure fixed positioning works and button is neat */
.end-turn-btn {
width: auto;
/* Prevent stretching */
align-self: flex-end;
/* If relative */
/* Re-assert Fixed Position */
position: fixed !important;
right: 40px;
bottom: 300px;
/* Floating above the hand area */
z-index: 1000;
/* Above everything */
}
.end-turn-btn::before {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
opacity: 0.08;
pointer-events: none;
border-radius: inherit;
}
.end-turn-btn:hover:not(:disabled) {
transform: translateY(-4px) scale(1.03);
box-shadow:
inset 0 0 0 3px rgba(10, 14, 20, 0.1),
0 8px 25px rgba(0, 0, 0, 0.5),
0 0 40px rgba(207, 170, 112, 0.5);
border-color: #fff;
}
.end-turn-btn:active:not(:disabled) {
transform: translateY(-1px) scale(1.01);
}
.end-turn-btn:disabled {
background: linear-gradient(135deg, #555 0%, #444 50%, #333 100%);
color: #888;
border-color: #666;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
cursor: not-allowed;
letter-spacing: 2px;
}
/* ===================================
Reward Screen
=================================== */
.reward-container {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: clamp(20px, 3vh, 32px) clamp(20px, 3vw, 40px) 36px;
}
.reward-shell {
width: min(1320px, 100%);
margin: 0 auto;
display: grid;
gap: 22px;
}
.reward-header {
display: grid;
justify-items: center;
gap: 10px;
text-align: center;
}
.reward-kicker {
display: inline-flex;
align-items: center;
padding: 5px 12px;
border-radius: 999px;
border: 1px solid rgba(255, 215, 122, 0.32);
background: rgba(25, 18, 8, 0.48);
color: rgba(255, 227, 161, 0.94);
font-size: 0.78rem;
letter-spacing: 0.26em;
text-transform: uppercase;
}
.reward-title {
font-family: var(--font-display);
font-size: clamp(2.5rem, 4.4vw, 3.7rem);
color: var(--accent-gold);
text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
animation: victoryGlow 1.5s ease-in-out infinite alternate;
}
.reward-subtitle {
max-width: 760px;
color: rgba(229, 236, 255, 0.78);
font-size: 1rem;
line-height: 1.65;
}
@keyframes victoryGlow {
from {
text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}
to {
text-shadow: 0 0 50px rgba(255, 215, 0, 0.8);
}
}
.reward-layout {
display: grid;
grid-template-columns: minmax(0, 1.28fr) minmax(320px, 0.84fr);
gap: 22px;
align-items: start;
}
.reward-main-column,
.reward-side-column {
display: grid;
gap: 18px;
}
.reward-panel {
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(180deg, rgba(8, 13, 30, 0.92), rgba(5, 8, 20, 0.94));
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
backdrop-filter: blur(10px);
}
.reward-section-heading {
display: grid;
gap: 6px;
margin-bottom: 18px;
}
.reward-section-heading.compact {
margin-bottom: 16px;
}
.reward-section-eyebrow {
font-size: 0.76rem;
color: rgba(166, 227, 255, 0.82);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.reward-section-heading h3 {
font-family: var(--font-display);
font-size: 1.55rem;
color: #f8f4dd;
}
.reward-section-heading p {
color: rgba(221, 228, 245, 0.72);
line-height: 1.65;
}
.steal-chance {
display: grid;
gap: 14px;
justify-items: start;
padding: 22px 24px;
background: linear-gradient(145deg, rgba(49, 12, 74, 0.82), rgba(14, 10, 34, 0.92));
border: 1px solid rgba(183, 98, 245, 0.46);
}
.steal-chance h3 {
color: rgba(235, 208, 255, 0.96);
font-size: 1.3rem;
}
.steal-chance p {
color: rgba(231, 220, 245, 0.82);
line-height: 1.7;
}
.steal-btn {
min-width: 180px;
padding: 12px 22px;
background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
border: none;
border-radius: 14px;
color: white;
font-family: var(--font-body);
font-size: 1rem;
cursor: pointer;
transition: all var(--transition-normal);
}
.steal-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 24px rgba(124, 58, 237, 0.28);
}
.steal-btn:disabled {
opacity: 0.58;
cursor: not-allowed;
box-shadow: none;
}
.reward-card-stage {
padding: 24px 24px 28px;
}
#reward-screen .reward-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
gap: 28px;
align-items: start;
justify-items: center;
width: 100%;
padding: 6px 4px 0;
perspective: 1500px;
}
#reward-screen .reward-card {
margin-left: 0;
transform: translateZ(0);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#reward-screen .reward-card:hover {
transform: translateY(-16px) scale(1.04);
box-shadow: 0 24px 34px rgba(0, 0, 0, 0.34);
}
.reward-summary-card {
padding: 22px;
}
.reward-resources {
display: grid;
gap: 12px;
width: 100%;
}
.reward-item {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 215, 0, 0.22);
border-radius: 16px;
color: rgba(248, 241, 220, 0.96);
}
.reward-item-primary {
background: linear-gradient(135deg, rgba(64, 42, 9, 0.48), rgba(22, 25, 42, 0.72));
border-color: rgba(255, 215, 122, 0.4);
}
.reward-battle-meta {
width: 100%;
margin-top: 14px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(109, 205, 255, 0.36);
background: linear-gradient(135deg, rgba(9, 26, 46, 0.88), rgba(13, 35, 62, 0.84));
box-shadow: 0 6px 18px rgba(2, 10, 19, 0.3);
}
.reward-meta-title {
font-size: 0.8rem;
color: rgba(166, 227, 255, 0.96);
letter-spacing: 0.35px;
margin-bottom: 8px;
font-weight: 700;
}
.reward-narrative-brief {
width: 100%;
margin-top: 14px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(155, 208, 255, 0.24);
background:
radial-gradient(circle at top right, rgba(122, 192, 255, 0.16), transparent 38%),
linear-gradient(145deg, rgba(15, 34, 62, 0.92), rgba(18, 24, 49, 0.9));
box-shadow: 0 10px 24px rgba(2, 12, 28, 0.28);
display: grid;
gap: 8px;
}
.reward-narrative-brief.is-archived {
border-color: rgba(255, 204, 116, 0.4);
background:
radial-gradient(circle at top right, rgba(255, 214, 135, 0.18), transparent 42%),
linear-gradient(145deg, rgba(63, 34, 8, 0.92), rgba(18, 30, 49, 0.9));
}
.reward-narrative-kicker {
color: rgba(176, 223, 255, 0.92);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.24em;
text-transform: uppercase;
}
.reward-narrative-title {
color: rgba(244, 248, 255, 0.98);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.45;
}
.reward-narrative-body,
.reward-narrative-foot {
color: rgba(214, 226, 244, 0.86);
font-size: 0.74rem;
line-height: 1.65;
}
.reward-narrative-foot {
color: rgba(167, 203, 236, 0.84);
}
.reward-expedition-meta {
width: 100%;
margin-top: 14px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 183, 122, 0.34);
background:
radial-gradient(circle at top right, rgba(255, 198, 132, 0.18), transparent 42%),
linear-gradient(145deg, rgba(61, 31, 12, 0.92), rgba(24, 36, 59, 0.9));
box-shadow: 0 10px 24px rgba(24, 10, 3, 0.28);
display: grid;
gap: 10px;
}
.reward-expedition-meta.is-complete {
border-color: rgba(255, 212, 128, 0.48);
background:
radial-gradient(circle at top right, rgba(255, 218, 152, 0.22), transparent 44%),
linear-gradient(145deg, rgba(84, 46, 10, 0.94), rgba(24, 41, 58, 0.92));
box-shadow: 0 14px 30px rgba(52, 28, 5, 0.32);
}
.reward-expedition-kicker {
color: rgba(255, 222, 176, 0.94);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.3px;
}
.reward-expedition-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.reward-expedition-badge,
.reward-expedition-score {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 12px;
border-radius: 999px;
font-size: 0.72rem;
line-height: 1.2;
letter-spacing: 0.24px;
}
.reward-expedition-badge {
border: 1px solid rgba(255, 214, 156, 0.34);
background: rgba(125, 72, 20, 0.28);
color: rgba(255, 239, 215, 0.98);
font-weight: 700;
}
.reward-expedition-score {
border: 1px solid rgba(173, 225, 255, 0.32);
background: rgba(28, 70, 96, 0.3);
color: rgba(221, 244, 255, 0.96);
font-weight: 700;
}
.reward-expedition-title {
color: rgba(248, 242, 233, 0.98);
font-size: 0.9rem;
font-weight: 700;
line-height: 1.45;
}
.reward-expedition-summary {
color: rgba(234, 220, 198, 0.88);
font-size: 0.73rem;
line-height: 1.65;
}
.reward-expedition-section {
display: grid;
gap: 6px;
}
.reward-expedition-section-title {
color: rgba(255, 214, 149, 0.92);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.22px;
}
.reward-expedition-list {
display: grid;
gap: 6px;
}
.reward-expedition-line {
padding: 9px 10px;
border-radius: 12px;
border: 1px solid rgba(255, 205, 145, 0.18);
background: rgba(255, 255, 255, 0.05);
color: rgba(247, 232, 209, 0.92);
font-size: 0.7rem;
line-height: 1.55;
}
.reward-expedition-line.muted {
border-color: rgba(157, 215, 255, 0.18);
background: rgba(18, 55, 74, 0.22);
color: rgba(210, 228, 243, 0.84);
}
.reward-expedition-callout {
display: grid;
gap: 4px;
}
.reward-expedition-callout.is-focus {
border-color: rgba(149, 223, 255, 0.3);
background: linear-gradient(135deg, rgba(20, 63, 89, 0.36), rgba(81, 58, 22, 0.18));
}
.reward-expedition-callout.is-warning {
border-color: rgba(255, 171, 132, 0.34);
background: linear-gradient(135deg, rgba(88, 37, 26, 0.36), rgba(82, 61, 18, 0.2));
}
.reward-expedition-callout.is-tracking {
border-color: rgba(255, 214, 149, 0.24);
background: linear-gradient(135deg, rgba(69, 52, 20, 0.3), rgba(16, 52, 69, 0.18));
}
.reward-expedition-callout-kicker {
color: rgba(255, 214, 149, 0.96);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.22px;
}
.reward-expedition-callout-body {
color: rgba(248, 242, 233, 0.98);
font-size: 0.78rem;
font-weight: 700;
line-height: 1.5;
}
.reward-expedition-callout-detail {
color: rgba(231, 222, 206, 0.9);
font-size: 0.67rem;
line-height: 1.55;
}
.reward-expedition-callout-meta {
color: rgba(201, 225, 241, 0.78);
font-size: 0.62rem;
line-height: 1.5;
}
.reward-expedition-handoff-btn {
justify-self: start;
margin-top: 4px;
border: 1px solid rgba(124, 209, 255, 0.34);
border-radius: 999px;
padding: 7px 11px;
background: linear-gradient(135deg, rgba(25, 72, 101, 0.86), rgba(86, 61, 24, 0.7));
color: rgba(244, 250, 255, 0.96);
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.04em;
cursor: pointer;
transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.reward-expedition-handoff-btn:hover {
transform: translateY(-1px);
border-color: rgba(154, 225, 255, 0.56);
background: linear-gradient(135deg, rgba(35, 88, 121, 0.96), rgba(111, 78, 28, 0.82));
}
.reward-expedition-advice {
display: grid;
gap: 4px;
padding: 11px 12px;
border-radius: 13px;
border: 1px solid rgba(137, 227, 255, 0.24);
background: linear-gradient(135deg, rgba(15, 52, 68, 0.32), rgba(69, 45, 18, 0.22));
color: rgba(220, 240, 252, 0.92);
font-size: 0.7rem;
line-height: 1.55;
}
.reward-expedition-advice-label {
color: rgba(156, 230, 255, 0.96);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.24px;
}
.reward-expedition-chip-row {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.reward-expedition-chip {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 213, 162, 0.26);
background: rgba(102, 65, 26, 0.28);
color: rgba(255, 238, 214, 0.96);
font-size: 0.68rem;
line-height: 1.2;
letter-spacing: 0.2px;
}
.reward-expedition-chip.focus {
border-color: rgba(154, 227, 255, 0.36);
background: rgba(29, 82, 112, 0.34);
color: rgba(226, 247, 255, 0.98);
}
.reward-meta-chips {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.reward-meta-chip {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(153, 219, 255, 0.34);
background: rgba(31, 69, 105, 0.34);
color: rgba(216, 241, 255, 0.96);
font-size: 0.69rem;
line-height: 1.2;
letter-spacing: 0.2px;
}
.reward-meta-chip.chip-encounter {
border-color: rgba(255, 196, 123, 0.58);
background: rgba(94, 61, 22, 0.42);
color: rgba(255, 236, 204, 0.96);
}
.reward-meta-chip.chip-squad {
border-color: rgba(137, 224, 255, 0.56);
background: rgba(23, 70, 98, 0.45);
color: rgba(218, 247, 255, 0.97);
}
.reward-meta-chip.chip-gold {
border-color: rgba(255, 220, 122, 0.54);
background: rgba(92, 74, 24, 0.4);
color: rgba(255, 242, 205, 0.96);
}
.reward-meta-chip.chip-exp {
border-color: rgba(166, 213, 255, 0.52);
background: rgba(37, 74, 116, 0.38);
color: rgba(220, 241, 255, 0.95);
}
.reward-meta-chip.chip-synergy {
border-color: rgba(189, 160, 255, 0.6);
background: rgba(66, 41, 108, 0.44);
color: rgba(242, 231, 255, 0.96);
}
.reward-run-path-meta {
width: 100%;
margin-top: 14px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(130, 255, 228, 0.28);
background: linear-gradient(145deg, rgba(8, 39, 40, 0.9), rgba(17, 45, 59, 0.88));
box-shadow: 0 6px 18px rgba(1, 16, 20, 0.28);
}
.reward-run-path-meta.is-complete {
border-color: rgba(255, 209, 122, 0.54);
background:
radial-gradient(circle at top right, rgba(255, 202, 104, 0.2), transparent 42%),
linear-gradient(145deg, rgba(52, 31, 8, 0.92), rgba(19, 41, 52, 0.9));
box-shadow: 0 12px 30px rgba(40, 24, 4, 0.34);
}
.reward-run-path-kicker {
font-size: 0.78rem;
color: rgba(149, 255, 229, 0.92);
letter-spacing: 0.3px;
font-weight: 700;
}
.reward-run-path-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 8px;
}
.reward-run-path-badge,
.reward-run-path-status {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 12px;
border-radius: 999px;
font-size: 0.72rem;
line-height: 1.2;
letter-spacing: 0.24px;
}
.reward-run-path-badge {
border: 1px solid rgba(149, 255, 229, 0.28);
background: rgba(41, 121, 109, 0.18);
color: rgba(228, 255, 249, 0.96);
font-weight: 700;
}
.reward-run-path-status {
border: 1px solid rgba(255, 210, 132, 0.3);
background: rgba(92, 62, 15, 0.26);
color: rgba(255, 237, 205, 0.96);
}
.reward-run-path-status.is-complete {
border-color: rgba(255, 198, 102, 0.54);
background: rgba(96, 55, 7, 0.42);
color: rgba(255, 240, 205, 0.98);
}
.reward-run-path-finale {
position: relative;
display: grid;
gap: 8px;
margin-top: 12px;
padding: 13px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 205, 112, 0.34);
background: linear-gradient(135deg, rgba(97, 58, 12, 0.38), rgba(34, 51, 72, 0.42));
overflow: hidden;
}
.reward-run-path-finale::before {
content: '';
position: absolute;
inset: -30% auto -30% -25%;
width: 46%;
background: linear-gradient(90deg, transparent, rgba(255, 233, 179, 0.3), transparent);
transform: rotate(18deg);
animation: runPathFinaleSweep 3.4s linear infinite;
}
.reward-run-path-crest {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 34px;
padding: 6px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 214, 138, 0.56);
background: rgba(96, 56, 6, 0.54);
color: rgba(255, 241, 214, 0.98);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.24px;
box-shadow: 0 0 0 1px rgba(255, 214, 138, 0.14), 0 0 22px rgba(255, 186, 87, 0.14);
animation: runPathFinalePulse 2.3s ease-in-out infinite;
}
.reward-run-path-finale-copy {
position: relative;
z-index: 1;
color: rgba(248, 236, 213, 0.88);
font-size: 0.72rem;
line-height: 1.6;
}
.reward-run-path-archive {
display: grid;
gap: 6px;
margin-top: 12px;
padding: 12px 13px;
border-radius: 14px;
border: 1px solid rgba(154, 212, 255, 0.3);
background: linear-gradient(135deg, rgba(22, 60, 88, 0.42), rgba(37, 38, 66, 0.36));
}
.reward-run-path-archive-title {
color: rgba(225, 242, 255, 0.98);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.22px;
}
.reward-run-path-archive-copy,
.reward-run-path-archive-meta {
color: rgba(202, 223, 238, 0.84);
font-size: 0.68rem;
line-height: 1.55;
}
.reward-run-path-archive-meta {
color: rgba(167, 206, 238, 0.82);
}
.reward-run-path-entries {
display: grid;
gap: 10px;
margin-top: 12px;
}
.reward-run-path-entry {
padding: 12px 13px;
border-radius: 14px;
border: 1px solid rgba(132, 233, 221, 0.18);
background: rgba(255, 255, 255, 0.04);
}
.reward-run-path-entry.completed {
border-color: rgba(255, 198, 120, 0.38);
background: linear-gradient(145deg, rgba(84, 51, 10, 0.28), rgba(255, 255, 255, 0.04));
}
.reward-run-path-phase {
color: rgba(240, 250, 248, 0.98);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.25px;
}
.reward-run-path-desc,
.reward-run-path-next {
margin-top: 6px;
color: rgba(201, 233, 230, 0.82);
font-size: 0.7rem;
line-height: 1.5;
}
.reward-run-path-reward {
margin-top: 8px;
color: rgba(255, 229, 176, 0.96);
font-size: 0.74rem;
font-weight: 700;
line-height: 1.45;
}
@keyframes runPathFinalePulse {
0%,
100% {
transform: translateY(0);
box-shadow: 0 0 0 1px rgba(255, 214, 138, 0.14), 0 0 18px rgba(255, 186, 87, 0.12);
}
50% {
transform: translateY(-1px) scale(1.01);
box-shadow: 0 0 0 1px rgba(255, 214, 138, 0.18), 0 0 28px rgba(255, 198, 112, 0.22);
}
}
@keyframes runPathFinaleSweep {
0% {
transform: translateX(-35%) rotate(18deg);
opacity: 0;
}
14%,
72% {
opacity: 1;
}
100% {
transform: translateX(280%) rotate(18deg);
opacity: 0;
}
}
.continue-btn {
padding: var(--spacing-md) var(--spacing-xl);
background: linear-gradient(135deg, var(--accent-green) 0%, #388e3c 100%);
border: none;
border-radius: var(--radius-lg);
color: white;
font-family: var(--font-body);
font-size: 1.1rem;
cursor: pointer;
transition: all var(--transition-normal);
}
.continue-btn:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}
/* ===================================
Game Over Screen
=================================== */
#game-over-screen.active {
align-items: center;
}
#game-over-screen.active::before,
#game-over-screen.active::after {
content: "";
flex: 1 0 auto;
min-height: 20px;
}
.game-over-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xl);
min-height: 100%;
margin: 0 auto;
padding: var(--spacing-xl);
flex-shrink: 0;
}
.game-over-title {
font-family: var(--font-display);
font-size: 4rem;
color: var(--accent-red);
text-shadow: 0 0 30px rgba(244, 67, 54, 0.5);
}
.game-over-title.victory {
color: var(--accent-gold);
text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}
.game-over-text {
font-size: 1.2rem;
color: var(--text-secondary);
}
.run-stats {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-lg);
min-width: 300px;
}
.stat-row {
display: flex;
justify-content: space-between;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-row:last-child {
border-bottom: none;
}
.game-over-buttons {
display: flex;
gap: var(--spacing-md);
}
/* ===================================
关卡选择界面样式
=================================== */
/* Legacy Realm Selection Styles Removed (See line 7400+) */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
display: none;
overflow-y: auto;
padding: 0;
z-index: 1000;
}
.modal.active {
display: flex;
flex-direction: column;
}
.modal.active::before,
.modal.active::after {
content: "";
flex: 1 0 auto;
min-height: 20px;
}
.modal-content {
background: var(--bg-medium);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-lg);
padding: var(--spacing-xl);
max-width: 90%;
max-height: 90%;
overflow: auto;
position: relative;
margin: 0 auto;
flex-shrink: 0;
}
.modal-close {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
width: 32px;
height: 32px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: var(--text-primary);
font-size: 1.2rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.modal-close:hover {
background: rgba(255, 255, 255, 0.2);
border-color: var(--accent-red);
}
/* ===================================
Refactored 3D Deck View
=================================== */
/* ===================================
Refactored 3D Deck View
=================================== */
.deck-view {
min-width: 800px;
/* Reduced since cards are smaller */
max-width: 90vw;
height: 85vh;
max-height: 85vh;
overflow: hidden;
perspective: 1000px;
background: radial-gradient(circle at center, #141e30 0%, #000000 100%);
/* Opaque Dark Void */
box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
border: 1px solid rgba(255, 215, 0, 0.1);
border-radius: var(--radius-lg);
display: flex;
flex-direction: column;
}
.deck-view-header {
text-align: center;
margin-bottom: var(--spacing-md);
/* Reduced margin */
position: relative;
z-index: 2;
padding-bottom: 15px;
/* Reduced padding */
border-bottom: 2px solid rgba(207, 170, 112, 0.3);
}
.deck-view-header h2 {
color: var(--accent-gold);
font-family: var(--font-display);
font-size: 2rem;
/* reduced font size */
text-shadow: 0 4px 10px rgba(0, 0, 0, 0.8);
letter-spacing: 3px;
}
.deck-view-content {
flex: 1;
overflow-y: auto;
padding: 0 var(--spacing-lg) 40px;
/* Reduced padding */
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
}
.deck-view-content::-webkit-scrollbar {
width: 6px;
}
.deck-view-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.deck-view-content::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
/* Card Category Section */
.deck-category {
margin-bottom: 25px;
/* Reduced margin */
opacity: 0;
transform: translateY(30px);
animation: slide-up-fade 0.5s ease-out forwards;
}
.deck-category h3 {
font-family: var(--font-display);
color: var(--text-secondary);
font-size: 1.3rem;
/* reduced font size */
margin-bottom: 10px;
/* reduced margin */
border-left: 4px solid var(--accent-gold);
padding-left: 10px;
display: flex;
align-items: center;
gap: 10px;
background: linear-gradient(90deg, rgba(207, 170, 112, 0.1) 0%, transparent 100%);
padding: 5px 15px;
border-radius: 0 10px 10px 0;
}
.category-count {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--text-muted);
background: rgba(0, 0, 0, 0.4);
padding: 2px 8px;
border-radius: 10px;
}
/* 3D Grid */
.deck-grid {
display: grid;
/* Reduced min-width for smaller cards */
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
/* Reduced horizontal gap */
row-gap: 25px;
/* Reduced vertical gap */
perspective: 1200px;
padding: 10px;
}
/* Card Container */
.deck-card-wrapper {
position: relative;
width: 130px;
/* Reduced width */
height: 175px;
/* Reduced height to match scaling */
transform-style: preserve-3d;
animation: card-float 6s ease-in-out infinite;
}
/*
Idle State:
- Tilted back (Relaxed posture on the table)
*/
.deck-card-wrapper .card {
transform: scale(0.75) rotateX(20deg) rotateY(0deg);
/* Reduced scale from 0.85 to 0.75 */
transform-origin: center bottom;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
will-change: transform;
background: linear-gradient(135deg, var(--card-bg) 0%, #dcd8c8 100%);
}
/* Wrapper Hover */
.deck-card-wrapper:hover {
z-index: 50;
animation-play-state: paused;
}
/* Card Hover */
.deck-card-wrapper:hover .card {
/* Reduced hover scale from 1.15 to 1.05 and less translation */
background: linear-gradient(135deg, #fffcf5 0%, #ede6d4 100%);
transform: scale(1.05) rotateX(0deg) rotateY(0deg) translateY(-20px) !important;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.8),
0 0 20px rgba(255, 215, 0, 0.3);
border-color: var(--accent-gold-bright);
}
/* Floating Animation */
@keyframes card-float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
/* Entry Animation */
@keyframes slide-up-fade {
from {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.ring-visual.large {
width: 200px;
height: 200px;
}
.ring-info {
margin-bottom: var(--spacing-lg);
color: var(--text-secondary);
}
.loaded-laws-list {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.law-slot {
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border: 2px dashed rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
}
.law-slot.filled {
border-style: solid;
border-color: var(--accent-purple);
background: rgba(156, 39, 176, 0.1);
}
.law-icon {
font-size: 1.5rem;
}
.law-name {
font-size: 0.7rem;
margin-top: 4px;
}
/* 粒子通用样式 */
.particle {
position: fixed;
pointer-events: none;
z-index: 9999;
background-size: contain;
background-repeat: no-repeat;
animation: particleFade 1s forwards;
}
@keyframes particleFade {
0% {
opacity: 1;
transform: translate(0, 0) scale(1);
}
100% {
opacity: 0;
transform: translate(var(--offset-x), var(--offset-y)) scale(0);
}
}
.particle-magic {
background: radial-gradient(circle, #fff, transparent);
border-radius: 50%;
box-shadow: 0 0 10px #fff;
}
.particle-attack {
background: var(--accent-red);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.particle-heal {
background: var(--accent-green);
border-radius: 50%;
box-shadow: 0 0 5px var(--accent-green);
}
.particle-shield {
border: 2px solid var(--accent-cyan);
border-radius: 50%;
background: transparent;
}
.particle-fire {
background: radial-gradient(circle, #ff5722, #ff9800);
border-radius: 50%;
filter: blur(2px);
}
.particle-thunder {
background: #ffeb3b;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
transform: rotate(45deg);
}
.particle-law {
background: var(--accent-purple);
border-radius: 2px;
box-shadow: 0 0 8px var(--accent-purple);
}
.screen-shake {
animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
}
@keyframes damageFlash {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(2) saturate(0);
}
}
.shake {
animation: shake 0.3s ease;
}
.damage-flash {
animation: damageFlash 0.2s ease;
}
@keyframes floatUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-50px);
}
}
.damage-number {
position: absolute;
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-red);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
animation: floatUp 1s ease forwards;
pointer-events: none;
}
.heal-number {
color: var(--accent-green);
}
.block-number {
color: var(--accent-cyan);
}
/* ===================================
Responsive
=================================== */
@media (max-width: 768px) {
.title-cn {
font-size: 3rem;
}
.title-en {
font-size: 1rem;
letter-spacing: 0.3em;
}
.menu-btn {
width: 240px;
padding: var(--spacing-sm) var(--spacing-md);
}
.character-panel {
grid-template-columns: 1fr;
text-align: center;
}
.character-stats {
justify-content: center;
}
.card {
width: 90px;
height: 130px;
margin-left: -20px;
}
.card-name {
font-size: 0.7rem;
}
.card-desc {
font-size: 0.6rem;
}
.card-image,
.card-art {
font-size: 1.8rem;
}
.hand-area {
min-height: 160px;
}
.end-turn-btn {
bottom: 180px;
padding: var(--spacing-sm) var(--spacing-md);
font-size: 0.9rem;
}
}
/* 更小屏幕适配 - 手机端 */
@media (max-width: 480px) {
.title-cn {
font-size: 2.2rem;
}
.title-en {
font-size: 0.8rem;
letter-spacing: 0.2em;
}
.menu-btn {
width: 200px;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 0.9rem;
}
/* 卡牌样式 - 手机端优化 */
.card {
width: 65px;
height: 95px;
margin-left: -25px;
padding: 4px;
}
.card:first-child {
margin-left: 0;
}
.card-cost {
width: 22px;
height: 22px;
font-size: 0.75rem;
top: -5px;
left: -5px;
}
.card-name {
font-size: 0.55rem;
}
.card-type {
font-size: 0.45rem;
}
.card-desc {
font-size: 0.45rem;
min-height: 28px;
line-height: 1.2;
}
.card-image,
.card-art {
font-size: 1.3rem;
}
.card-header {
padding: 2px 0 2px 14px;
}
/* 手牌区域优化 */
.hand-area {
min-height: 130px;
padding: var(--spacing-sm);
padding-top: 50px;
/* 为悬停效果留空间 */
gap: var(--spacing-sm);
overflow-x: auto;
overflow-y: visible;
/* 允许卡牌悬停时向上显示 */
-webkit-overflow-scrolling: touch;
justify-content: flex-start;
align-items: flex-end;
/* 卡牌底部对齐 */
}
.hand-cards {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
padding: 10px 0;
align-items: flex-end;
/* 卡牌底部对齐 */
}
.deck-pile,
.discard-pile {
width: 50px;
height: 75px;
min-width: 50px;
}
.pile-count {
font-size: 1.1rem;
}
.pile-label {
font-size: 0.55rem;
}
.end-turn-btn {
bottom: 145px;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 0.8rem;
right: var(--spacing-sm);
}
/* 玩家区域优化 */
.player-area {
padding: var(--spacing-sm);
gap: var(--spacing-md);
}
.player-avatar {
width: 60px;
height: 60px;
font-size: 1rem;
}
.hp-bar {
width: 90px;
height: 12px;
}
.bar-text {
font-size: 0.65rem;
}
.energy-orb {
width: 18px;
height: 18px;
}
.energy-text {
font-size: 0.7rem;
}
/* 敌人区域优化 */
.enemy-avatar {
width: 70px;
height: 70px;
font-size: 2rem;
}
.enemy-hp {
width: 70px;
}
.enemy-intent {
width: 28px;
height: 28px;
font-size: 0.9rem;
top: -12px;
right: -12px;
}
/* 地图节点优化 */
.map-node {
width: 50px;
height: 50px;
font-size: 1.3rem;
}
.map-node.boss {
width: 60px;
height: 60px;
}
.realm-title {
font-size: 1.4rem;
}
/* 奖励卡牌优化 */
.reward-cards {
flex-wrap: wrap;
gap: var(--spacing-sm);
justify-content: center;
}
.reward-card {
width: 80px;
height: 115px;
}
}
/* ===================================
成就界面样式
=================================== */
#achievements-screen {
background:
radial-gradient(ellipse at 30% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(156, 39, 176, 0.15) 0%, transparent 50%),
var(--bg-dark);
}
#achievements-screen .screen-header,
#inheritance-screen .screen-header {
width: min(1480px, calc(100% - 48px));
margin: 0 auto;
padding: 12px 0 10px;
}
.achievements-container {
width: min(1480px, calc(100% - 48px));
margin: 0 auto 36px;
padding: 22px 24px 34px;
overflow: auto;
max-height: calc(100vh - 96px);
border-radius: 26px;
border: 1px solid rgba(255, 215, 122, 0.12);
background: linear-gradient(180deg, rgba(11, 14, 28, 0.82), rgba(8, 10, 22, 0.9));
box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
}
.achievements-progress {
text-align: center;
padding: var(--spacing-lg);
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-xl);
border: 1px solid rgba(255, 215, 0, 0.3);
}
.achievements-progress p {
font-size: 1.4rem;
color: var(--accent-gold);
font-weight: 600;
}
.achievement-category {
margin-bottom: var(--spacing-xl);
}
.category-title {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--accent-gold);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}
.achievement-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-md);
}
.achievement-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-md);
transition: all var(--transition-normal);
}
.achievement-item:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(5px);
}
.achievement-item.unlocked {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(76, 175, 80, 0.1) 100%);
border-color: var(--accent-gold);
}
.achievement-item.locked {
opacity: 0.6;
}
.achievement-item .achievement-icon {
font-size: 2rem;
min-width: 50px;
text-align: center;
}
.achievement-details {
flex: 1;
}
.achievement-item .achievement-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 2px;
}
.achievement-item .achievement-desc {
font-size: 0.85rem;
color: var(--text-muted);
}
.achievement-check {
font-size: 1.5rem;
color: var(--accent-green);
font-weight: 700;
}
/* ===================================
战斗界面增强
=================================== */
.battle-container {
background:
radial-gradient(ellipse at 50% 0%, rgba(26, 35, 126, 0.4) 0%, transparent 40%),
radial-gradient(ellipse at 80% 80%, rgba(156, 39, 176, 0.2) 0%, transparent 30%),
radial-gradient(ellipse at 20% 60%, rgba(0, 188, 212, 0.1) 0%, transparent 30%),
linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-medium) 100%);
}
/* 敌人增强 */
.enemy {
position: relative;
}
.enemy::before {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 15px;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
border-radius: 50%;
}
.enemy-avatar {
box-shadow:
0 0 30px rgba(244, 67, 54, 0.3),
inset 0 0 30px rgba(0, 0, 0, 0.3);
animation: enemyFloat 3s ease-in-out infinite;
}
@keyframes enemyFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-5px);
}
}
/* 玩家区域增强 */
.player-area {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
}
.player-avatar {
box-shadow:
0 0 40px rgba(156, 39, 176, 0.4),
inset 0 0 30px rgba(0, 0, 0, 0.3);
}
/* 手牌增强 */
.hand-cards {
perspective: 1000px;
}
.card {
transform-style: preserve-3d;
backface-visibility: hidden;
}
.card:hover {
z-index: 100;
/* 确保悬停卡牌在最上层 */
transform: translateY(-10px) scale(1.1);
/* 通用默认效果 */
box-shadow:
0 0 25px rgba(255, 215, 0, 0.5),
0 4px 15px rgba(0, 0, 0, 0.4);
border-color: var(--accent-gold);
filter: brightness(1.1);
}
/* 战斗日志增强 */
.battle-log {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(26, 35, 126, 0.3) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
/* 结束回合按钮增强 */
.end-turn-btn {
background: linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
box-shadow:
0 5px 20px rgba(156, 39, 176, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
}
.end-turn-btn:hover {
transform: scale(1.05);
/* Removed translateX(-50%) to prevent jumping */
box-shadow:
0 8px 30px rgba(156, 39, 176, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
/* ===================================
奖励界面增强
=================================== */
.reward-container {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(26, 35, 126, 0.3) 100%);
backdrop-filter: blur(20px);
}
.reward-title {
background: linear-gradient(135deg, var(--accent-gold) 0%, #ffeb3b 50%, var(--accent-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
#reward-screen .reward-cards {
perspective: 1500px;
}
#reward-screen .reward-card {
cursor: pointer;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#reward-screen .reward-card:hover {
transform: translateY(-16px) scale(1.04);
box-shadow: 0 24px 34px rgba(0, 0, 0, 0.34);
}
.continue-btn {
background: linear-gradient(135deg, var(--accent-green) 0%, #2e7d32 100%);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
box-shadow: 0 5px 20px rgba(76, 175, 80, 0.4);
}
.continue-btn:hover {
transform: scale(1.05);
box-shadow: 0 8px 30px rgba(76, 175, 80, 0.6);
}
/* ===================================
地图节点增强
=================================== */
.map-node {
position: relative;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.map-node.current::after {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 2px solid var(--accent-gold);
border-radius: 50%;
animation: nodePulse 1.5s ease-in-out infinite;
pointer-events: none;
}
.map-node.boss {
width: 85px;
height: 85px;
background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
animation: bossGlow 2s ease-in-out infinite;
}
@keyframes bossGlow {
0%,
100% {
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}
50% {
box-shadow: 0 0 40px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
}
}
/* ===================================
游戏结束界面增强
=================================== */
.game-over-container {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(26, 35, 126, 0.2) 100%);
backdrop-filter: blur(20px);
}
.game-over-title {
font-size: 4rem;
}
.game-over-title.victory {
background: linear-gradient(135deg, var(--accent-gold) 0%, #ffeb3b 50%, var(--accent-gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: victoryGlow 1s ease-in-out infinite alternate;
}
@keyframes victoryGlow {
from {
filter: drop-shadow(0 0 10px var(--accent-gold));
}
to {
filter: drop-shadow(0 0 30px var(--accent-gold));
}
}
.run-stats {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
margin: var(--spacing-xl) 0;
}
.stat-row {
padding: var(--spacing-md) var(--spacing-xl);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.stat-row:last-child {
border-bottom: none;
}
/* ===================================
New Fate Ring Visual (Battle Background)
=================================== */
.battle-bg-ring {
position: absolute;
bottom: -100px;
left: -100px;
width: 600px;
height: 600px;
pointer-events: none;
z-index: 0;
opacity: 0.6;
transform: rotateX(60deg) rotateZ(0deg);
transform-style: preserve-3d;
transition: all 1s ease;
}
.ring-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 2px solid var(--accent-gold);
box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}
.layer-1 {
width: 300px;
height: 300px;
border-width: 15px;
border-style: double;
border-color: rgba(212, 175, 55, 0.3);
animation: ringRotate1 60s linear infinite;
}
.layer-2 {
width: 450px;
height: 450px;
border-width: 2px;
border-style: dashed;
border-color: rgba(123, 44, 191, 0.4);
animation: ringRotate2 40s linear infinite reverse;
}
.layer-3 {
width: 580px;
height: 580px;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.1);
animation: ringRotate1 100s linear infinite;
}
.ring-center-gem {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background: radial-gradient(circle, var(--accent-gold-bright) 0%, var(--accent-gold) 60%, transparent 100%);
border-radius: 50%;
box-shadow: 0 0 50px var(--accent-gold);
animation: gemPulse 4s ease-in-out infinite;
}
@keyframes ringRotate1 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes ringRotate2 {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes gemPulse {
0%,
100% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 1;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Realm Law Indicator */
.realm-law-indicator {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-lg);
background: rgba(0, 0, 0, 0.6);
border: 1px solid var(--accent-red);
border-radius: var(--radius-lg);
margin-bottom: var(--spacing-lg);
box-shadow: 0 0 15px rgba(155, 34, 38, 0.3);
}
.law-icon {
font-size: 1.5rem;
}
.law-text {
color: var(--text-secondary);
font-size: 0.9rem;
}
/* ===================================
Shop Screen
=================================== */
#shop-screen {
background: linear-gradient(180deg, #1a0a2e 0%, #0a0e14 100%);
}
.shop-screen-header {
align-items: flex-start;
gap: var(--spacing-lg);
flex-wrap: wrap;
}
.shop-header-title {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 220px;
}
.shop-header-title p {
margin: 0;
color: rgba(255, 255, 255, 0.72);
font-size: 0.92rem;
}
.shop-currency-strip {
display: flex;
align-items: stretch;
justify-content: flex-end;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-left: auto;
}
.shop-currency {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.14);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2));
}
.shop-currency .label {
font-size: 0.82rem;
opacity: 0.8;
}
.shop-currency.currency-gold {
border-color: var(--accent-gold);
color: var(--accent-gold);
}
.shop-currency.currency-insight {
border-color: #72d7ff;
color: #9be8ff;
}
.shop-currency.currency-karma {
border-color: #ff7a7a;
color: #ffb2b2;
}
.shop-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-xl);
overflow: auto;
}
.shop-tab-bar {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.shop-tab-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.04);
color: var(--text-primary);
cursor: pointer;
transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.shop-tab-btn:hover {
transform: translateY(-1px);
border-color: rgba(255, 255, 255, 0.35);
}
.shop-tab-btn.active {
background: linear-gradient(135deg, rgba(207, 170, 112, 0.22), rgba(77, 32, 90, 0.5));
border-color: var(--accent-gold);
box-shadow: 0 0 22px rgba(207, 170, 112, 0.12);
}
.shop-tab-summary {
padding: 16px 18px;
border-radius: var(--radius-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.24));
}
.shop-tab-summary:empty,
.shop-tab-bar:empty {
display: none !important;
}
.shop-summary-title {
font-family: var(--font-display);
color: var(--accent-gold);
margin-bottom: 6px;
font-size: 1.08rem;
}
.shop-summary-text {
color: rgba(255, 255, 255, 0.84);
line-height: 1.5;
}
.shop-spend-advice {
margin-top: 14px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
display: grid;
gap: 8px;
}
.shop-spend-advice.tone-card {
border-color: rgba(255, 196, 112, 0.26);
}
.shop-spend-advice.tone-service {
border-color: rgba(122, 212, 255, 0.3);
}
.shop-spend-advice.tone-save {
border-color: rgba(204, 204, 204, 0.18);
}
.shop-advice-badge {
justify-self: start;
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: var(--accent-gold);
font-size: 0.76rem;
letter-spacing: 0.04em;
}
.shop-advice-text {
color: rgba(255, 255, 255, 0.84);
line-height: 1.6;
}
.shop-advice-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
color: rgba(255, 255, 255, 0.62);
font-size: 0.8rem;
}
.shop-advice-forecast {
padding: 8px 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
color: rgba(228, 238, 255, 0.84);
font-size: 0.8rem;
}
.shop-advice-forecast.high {
border: 1px solid rgba(255, 145, 145, 0.24);
color: #ffd0d0;
}
.shop-advice-forecast.medium {
border: 1px solid rgba(255, 205, 145, 0.22);
color: #ffe1b8;
}
.shop-advice-forecast.low {
border: 1px solid rgba(122, 212, 255, 0.2);
color: #d9f1ff;
}
.shop-advice-economy {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.shop-economy-chip {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.8);
font-size: 0.76rem;
letter-spacing: 0.03em;
}
.shop-economy-chip.stable {
border-color: rgba(122, 212, 255, 0.26);
color: #d9f1ff;
}
.shop-economy-chip.tight {
border-color: rgba(255, 205, 145, 0.24);
color: #ffe1b8;
}
.shop-economy-chip.critical {
border-color: rgba(255, 145, 145, 0.28);
color: #ffd0d0;
}
.shop-advice-note {
color: rgba(255, 255, 255, 0.7);
font-size: 0.82rem;
line-height: 1.55;
}
.shop-summary-history {
margin-top: 10px;
color: rgba(255, 255, 255, 0.62);
font-size: 0.84rem;
}
.shop-section {
background: rgba(0, 0, 0, 0.3);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.shop-section h3 {
font-family: var(--font-display);
color: var(--accent-gold);
margin-bottom: var(--spacing-md);
font-size: 1.4rem;
}
.shop-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--spacing-lg);
justify-items: center;
}
.shop-card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
}
.shop-card-wrapper .card {
margin-left: 0;
transition: all var(--transition-normal);
}
.shop-card-wrapper .card:hover {
transform: translateY(-10px) scale(1.05);
}
.shop-card-wrapper .card.sold {
opacity: 0.3;
filter: grayscale(1);
pointer-events: none;
}
.card-price {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(0, 0, 0, 0.5);
border-radius: var(--radius-md);
border: 1px solid var(--accent-gold);
color: var(--accent-gold);
font-weight: 600;
cursor: pointer;
transition: all var(--transition-fast);
}
.card-price:hover {
background: rgba(255, 215, 0, 0.2);
transform: scale(1.05);
}
.card-price.cannot-afford {
border-color: var(--accent-red);
color: var(--accent-red);
opacity: 0.6;
}
.shop-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
.shop-empty-state {
padding: 18px;
border-radius: var(--radius-md);
border: 1px dashed rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.65);
text-align: center;
}
.shop-service {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.1);
min-width: 0;
transition: all var(--transition-fast);
}
.shop-service:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--accent-purple);
}
.service-icon {
font-size: 2rem;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(157, 78, 221, 0.2);
border-radius: 50%;
}
.service-info {
flex: 1;
}
.service-name-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 4px;
}
.service-tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
justify-content: flex-end;
}
.shop-service-tag {
padding: 2px 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.78);
font-size: 0.72rem;
white-space: nowrap;
}
.shop-service-tag.fit-high {
background: rgba(112, 210, 160, 0.16);
color: #a8f3cb;
}
.shop-service-tag.fit-mid {
background: rgba(122, 212, 255, 0.16);
color: #bfe9ff;
}
.shop-service-tag.fit-low {
background: rgba(255, 193, 122, 0.16);
color: #ffd9a5;
}
.shop-service.currency-insight {
border-color: rgba(114, 215, 255, 0.42);
}
.shop-service.currency-karma {
border-color: rgba(255, 122, 122, 0.42);
background: linear-gradient(135deg, rgba(90, 22, 30, 0.34), rgba(255, 255, 255, 0.03));
}
.shop-service.is-risky {
box-shadow: 0 0 18px rgba(255, 96, 96, 0.08);
}
.service-name {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.service-desc {
font-size: 0.85rem;
color: var(--text-secondary);
}
.service-fit-note {
margin-top: 8px;
font-size: 0.78rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.62);
}
.buy-btn {
padding: var(--spacing-sm) var(--spacing-md);
background: linear-gradient(135deg, #240046 0%, #3c096c 100%);
border: 1px solid var(--accent-purple);
border-radius: var(--radius-md);
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
}
.buy-btn:hover {
background: linear-gradient(135deg, #3c096c 0%, #5a189a 100%);
transform: scale(1.05);
}
.buy-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.buy-btn .price {
font-weight: 600;
}
/* ===================================
Event Modal
=================================== */
.event-view {
max-width: 500px;
text-align: center;
}
.event-header {
padding: var(--spacing-lg);
background: linear-gradient(135deg, rgba(156, 39, 176, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.event-view .event-icon {
width: 74px;
height: 74px;
margin: 0 auto var(--spacing-sm);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 2.7rem;
line-height: 1;
border-radius: 16px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(20, 22, 32, 0.5));
border: 1px solid rgba(255, 255, 255, 0.12);
}
.event-view h2 {
font-family: var(--font-display);
color: var(--accent-gold);
font-size: 1.6rem;
}
.event-body {
padding: var(--spacing-lg);
}
.event-desc {
font-size: 1rem;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: var(--spacing-lg);
}
.event-choices {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.event-choice {
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
color: var(--text-primary);
cursor: pointer;
transition: all var(--transition-fast);
text-align: left;
}
.event-choice:hover {
background: rgba(157, 78, 221, 0.2);
border-color: var(--accent-purple);
transform: translateX(5px);
}
.event-choice .choice-effect {
font-size: 0.85rem;
color: var(--text-muted);
margin-top: 4px;
}
.event-atmosphere {
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(205, 174, 118, 0.18);
background: linear-gradient(135deg, rgba(77, 54, 27, 0.32) 0%, rgba(18, 22, 32, 0.76) 100%);
color: rgba(247, 229, 198, 0.88);
font-size: 0.9rem;
line-height: 1.55;
text-align: left;
}
.event-system-summary {
margin: 0 0 18px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
text-align: left;
}
.event-summary-label {
display: block;
margin-bottom: 8px;
font-size: 0.78rem;
letter-spacing: 0.08em;
color: rgba(244, 220, 173, 0.8);
text-transform: uppercase;
}
.event-summary-chip-list,
.choice-summary {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.event-summary-chip,
.choice-summary-chip {
display: inline-flex;
align-items: center;
min-height: 24px;
padding: 4px 10px;
border-radius: 999px;
font-size: 0.76rem;
line-height: 1.3;
color: rgba(231, 239, 245, 0.86);
background: rgba(78, 102, 122, 0.2);
border: 1px solid rgba(122, 156, 182, 0.18);
}
.choice-summary {
margin-top: 8px;
}
.event-choice .choice-title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-weight: 600;
}
.event-choice .choice-rarity {
font-size: 0.82rem;
font-weight: 700;
}
.event-choice .choice-rarity.rarity-basic,
.event-choice .choice-rarity.rarity-common {
color: #d5d9df;
}
.event-choice .choice-rarity.rarity-uncommon {
color: #77d3ff;
}
.event-choice .choice-rarity.rarity-rare {
color: #6de38f;
}
.event-choice .choice-rarity.rarity-epic {
color: #d796ff;
}
.event-choice .choice-rarity.rarity-legendary {
color: #ffcb6b;
}
/* ===================================
Reward Actions
=================================== */
.reward-actions {
display: grid;
gap: 12px;
padding: 18px;
}
.skip-reward-btn,
.continue-btn {
width: 100%;
min-height: 54px;
border-radius: 16px;
}
.skip-reward-btn {
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
font-size: 0.95rem;
}
.skip-reward-btn:hover {
background: rgba(255, 255, 255, 0.14);
border-color: var(--accent-gold);
color: var(--text-primary);
}
.continue-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
box-shadow: none;
}
#reward-screen[data-steal-state="success"] #steal-section {
border-color: rgba(114, 214, 151, 0.58);
background: linear-gradient(145deg, rgba(14, 63, 42, 0.78), rgba(10, 22, 24, 0.92));
}
#reward-screen[data-steal-state="failed"] #steal-section {
border-color: rgba(255, 138, 138, 0.5);
background: linear-gradient(145deg, rgba(65, 19, 32, 0.78), rgba(24, 11, 18, 0.92));
}
#reward-screen[data-steal-state="hidden"] .reward-main-column {
grid-template-rows: 1fr;
}
@media (max-width: 1180px) {
.reward-layout {
grid-template-columns: 1fr;
}
.reward-side-column {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
}
@media (max-width: 840px) {
.reward-container {
padding: 18px 14px 28px;
}
.reward-title {
font-size: 2.2rem;
}
.reward-subtitle {
font-size: 0.92rem;
}
.reward-panel,
.reward-card-stage,
.reward-summary-card {
padding-left: 16px;
padding-right: 16px;
}
.steal-chance {
padding: 18px 16px;
}
.reward-side-column {
grid-template-columns: 1fr;
}
#reward-screen .reward-cards {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 18px;
}
#reward-screen .reward-card {
transform: scale(0.94);
transform-origin: center top;
}
#reward-screen .reward-card:hover {
transform: scale(0.97) translateY(-8px);
}
.reward-run-path-meta {
padding: 10px;
border-radius: 12px;
}
.reward-expedition-meta {
padding: 10px;
border-radius: 12px;
gap: 8px;
}
.reward-narrative-brief {
padding: 10px;
border-radius: 12px;
gap: 6px;
}
.reward-narrative-kicker {
font-size: 0.68rem;
}
.reward-narrative-title {
font-size: 0.78rem;
}
.reward-narrative-body,
.reward-narrative-foot {
font-size: 0.64rem;
}
.reward-run-path-header {
flex-direction: column;
align-items: stretch;
}
.reward-expedition-header {
flex-direction: column;
align-items: stretch;
}
.reward-expedition-badge,
.reward-expedition-score {
justify-content: center;
font-size: 0.66rem;
}
.reward-expedition-title {
font-size: 0.78rem;
}
.reward-expedition-summary,
.reward-expedition-line,
.reward-expedition-advice {
font-size: 0.64rem;
}
.reward-expedition-callout-body {
font-size: 0.7rem;
}
.reward-expedition-callout-kicker,
.reward-expedition-callout-detail,
.reward-expedition-callout-meta {
font-size: 0.58rem;
}
.reward-expedition-advice-label,
.reward-expedition-section-title {
font-size: 0.62rem;
}
.reward-run-path-badge,
.reward-run-path-status {
justify-content: center;
font-size: 0.66rem;
}
.reward-run-path-entry {
padding: 9px 10px;
border-radius: 11px;
}
.reward-run-path-phase {
font-size: 0.74rem;
}
.reward-run-path-archive {
padding: 10px;
border-radius: 11px;
}
.reward-run-path-archive-title {
font-size: 0.7rem;
}
.reward-run-path-desc,
.reward-run-path-next,
.reward-run-path-reward,
.reward-run-path-archive-copy,
.reward-run-path-archive-meta {
font-size: 0.64rem;
}
}
/* ===================================
Card Count Badge
=================================== */
.card-count-badge {
position: absolute;
top: 6px;
right: 6px;
background: var(--accent-gold);
color: var(--text-dark);
font-size: 0.85rem;
font-weight: 800;
padding: 2px 8px;
border-radius: 12px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
z-index: 20;
border: 2px solid #fff;
pointer-events: none;
}
/* ===================================
High Priority UI Overlays
=================================== */
#battle-log {
position: fixed;
left: 50%;
bottom: 118px;
transform: translate(-50%, 8px);
max-width: min(86vw, 760px);
min-height: 42px;
padding: 10px 18px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(5, 10, 22, 0.84);
color: #f2f4ff;
text-align: center;
font-size: 0.95rem;
line-height: 1.45;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
z-index: 2000 !important;
}
#battle-log.show {
opacity: 1;
transform: translate(-50%, 0);
}
#battle-log.log-damage {
border-color: rgba(255, 92, 92, 0.85);
box-shadow: 0 0 18px rgba(255, 73, 73, 0.35);
}
#battle-log.log-status {
border-color: rgba(83, 214, 184, 0.85);
box-shadow: 0 0 18px rgba(83, 214, 184, 0.28);
}
#battle-log.log-reward {
border-color: rgba(236, 196, 92, 0.85);
box-shadow: 0 0 18px rgba(236, 196, 92, 0.28);
}
#battle-log.log-warning {
border-color: rgba(255, 150, 79, 0.9);
box-shadow: 0 0 18px rgba(255, 150, 79, 0.32);
}
#battle-log.log-system {
border-color: rgba(122, 156, 255, 0.85);
box-shadow: 0 0 18px rgba(122, 156, 255, 0.25);
}
.battle-log-panel {
position: fixed;
right: 16px;
bottom: 16px;
width: min(440px, 92vw);
max-height: 46vh;
display: none;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
background: rgba(3, 9, 20, 0.95);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
z-index: 2100;
overflow: hidden;
}
.battle-log-panel.active {
display: flex;
}
.battle-log-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
color: #f8f9ff;
font-weight: 600;
}
#battle-log-panel-close {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
color: #f8f9ff;
cursor: pointer;
}
.battle-log-panel-filters {
display: flex;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
}
.log-filter-btn {
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
color: #d6ddff;
border-radius: 999px;
padding: 4px 10px;
font-size: 0.78rem;
cursor: pointer;
}
.log-filter-btn.active {
border-color: rgba(122, 156, 255, 0.85);
background: rgba(122, 156, 255, 0.26);
color: #fff;
}
.battle-log-panel-list {
overflow: auto;
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.battle-log-item {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 6px 8px;
background: rgba(255, 255, 255, 0.03);
}
.battle-log-item-time {
color: rgba(255, 255, 255, 0.58);
font-size: 0.72rem;
margin-bottom: 3px;
}
.battle-log-item-text {
color: #eef1ff;
font-size: 0.86rem;
line-height: 1.35;
}
.battle-log-item.log-damage {
border-color: rgba(255, 92, 92, 0.4);
}
.battle-log-item.log-status {
border-color: rgba(83, 214, 184, 0.4);
}
.battle-log-item.log-reward {
border-color: rgba(236, 196, 92, 0.4);
}
.battle-log-item.log-warning {
border-color: rgba(255, 150, 79, 0.5);
}
.battle-log-item.log-system {
border-color: rgba(122, 156, 255, 0.38);
}
.battle-log-empty {
color: rgba(255, 255, 255, 0.55);
text-align: center;
padding: 22px 10px;
}
@media (max-width: 768px) {
#battle-log {
bottom: 96px;
max-width: 94vw;
font-size: 0.88rem;
}
.battle-log-panel {
left: 8px;
right: 8px;
width: auto;
max-height: 52vh;
}
}
/* ===================================
命环界面 - 墨金美学重构
=================================== */
/* 动画关键帧定义 */
@keyframes pulse-ring {
0%,
100% {
box-shadow: 0 0 10px rgba(157, 78, 221, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(157, 78, 221, 0.6);
}
}
@keyframes rotate-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes glow-sweep {
0% {
background-position: -200% center;
}
100% {
background-position: 200% center;
}
}
@keyframes float-particle {
0%,
100% {
transform: translateY(0) translateX(0);
opacity: 0.3;
}
50% {
transform: translateY(-10px) translateX(5px);
opacity: 0.6;
}
}
/* 模态框整体 */
.fate-ring-modal-content {
display: flex;
flex-direction: column;
width: 1000px;
max-width: 95vw;
height: 680px;
max-height: 92vh;
padding: 0;
overflow: hidden;
background: linear-gradient(135deg, rgba(10, 14, 20, 0.98) 0%, rgba(28, 37, 65, 0.95) 100%);
border: 2px solid rgba(207, 170, 112, 0.3);
box-shadow: 0 0 60px rgba(157, 78, 221, 0.4), inset 0 0 80px rgba(0, 0, 0, 0.3);
}
/* 头部标题栏 */
.fate-ring-header {
padding: 24px 30px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(50, 20, 80, 0.4) 100%);
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.fate-ring-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}
.fate-ring-header h2 {
font-size: 1.8rem;
text-shadow: 0 0 10px rgba(207, 170, 112, 0.5);
letter-spacing: 2px;
}
/* 主体三栏布局 */
.fate-ring-body {
display: flex;
flex: 1;
overflow: hidden;
position: relative;
}
/* ========== 左侧：状态面板 ========== */
.ring-status-panel {
width: 280px;
padding: 25px 20px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(20, 10, 30, 0.5) 100%);
border-right: 1px solid rgba(255, 215, 0, 0.2);
display: flex;
flex-direction: column;
gap: 24px;
position: relative;
overflow-y: auto;
}
.ring-status-panel::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg, transparent, var(--accent-gold), transparent);
}
/* 命环核心视觉 - 多层光环效果 */
.ring-visual {
width: 160px;
height: 160px;
margin: 0 auto 10px;
position: relative;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle, rgba(157, 78, 221, 0.3) 0%, rgba(82, 40, 136, 0.15) 40%, transparent 70%);
}
/* 外层光环 */
.ring-visual::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid transparent;
border-top-color: var(--accent-gold);
border-right-color: var(--accent-gold);
opacity: 0.6;
animation: rotate-slow 20s linear infinite;
}
/* 内层光环 */
.ring-visual::after {
content: '';
position: absolute;
width: 80%;
height: 80%;
border-radius: 50%;
border: 2px solid transparent;
border-bottom-color: var(--accent-purple);
border-left-color: var(--accent-purple);
opacity: 0.4;
animation: rotate-slow 15s linear infinite reverse;
}
.ring-visual>div {
z-index: 2;
filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}
/* 等级信息 */
.ring-level-info {
text-align: center;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 10px;
border: 1px solid rgba(255, 215, 0, 0.2);
}
.ring-level-info h3 {
font-size: 1.3rem;
margin-bottom: 8px;
background: linear-gradient(135deg, #ffd700, #cfaa70);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 8px rgba(207, 170, 112, 0.4));
}
/* 经验进度条 - 带流光效果 */
.ring-level-info>div[style*="margin-top: 10px"] {
position: relative;
overflow: hidden;
}
.ring-level-info>div[style*="margin-top: 10px"]::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
background-size: 200% 100%;
animation: glow-sweep 3s ease-in-out infinite;
pointer-events: none;
}
/* 路径信息卡片 - 古卷纸效果 */
.ring-path-info {
font-size: 0.9rem;
color: var(--text-secondary);
background: linear-gradient(135deg, rgba(50, 30, 20, 0.4), rgba(30, 20, 40, 0.3));
padding: 14px;
border-radius: 10px;
border: 1px solid rgba(207, 170, 112, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(157, 78, 221, 0.1);
position: relative;
}
.ring-path-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
background: linear-gradient(45deg, transparent 48%, rgba(255, 215, 0, 0.1) 50%, transparent 52%);
background-size: 20px 20px;
opacity: 0.3;
pointer-events: none;
}
/* 角色专属面板 */
.ring-specifics-panel {
background: rgba(0, 0, 0, 0.25);
border-radius: 8px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* ========== 中间：槽位圆环 ========== */
.ring-slots-panel {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
background: radial-gradient(circle at center, rgba(82, 40, 136, 0.25) 0%, rgba(10, 14, 20, 0.5) 60%, transparent 100%);
overflow-y: auto;
}
/* 星阵背景效果 */
.ring-slots-panel::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
border: 1px dashed rgba(255, 215, 0, 0.15);
animation: rotate-slow 40s linear infinite;
pointer-events: none;
}
.ring-slots-panel::after {
content: '';
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
border: 1px dashed rgba(157, 78, 221, 0.1);
animation: rotate-slow 50s linear infinite reverse;
pointer-events: none;
}
/* 滚动条样式优化 */
.ring-slots-panel::-webkit-scrollbar {
width: 8px;
}
.ring-slots-panel::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.ring-slots-panel::-webkit-scrollbar-thumb {
background: rgba(157, 78, 221, 0.3);
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.ring-slots-panel::-webkit-scrollbar-thumb:hover {
background: rgba(157, 78, 221, 0.5);
}
/* 槽位圆圈容器 */
.slots-circle {
position: relative;
width: 320px;
height: 320px;
border-radius: 50%;
border: 2px dashed rgba(255, 215, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
margin: auto;
z-index: 10;
box-shadow: 0 0 40px rgba(157, 78, 221, 0.2);
}
/* 中心核心 - 3D球体效果 */
.center-core {
width: 110px;
height: 110px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(157, 78, 221, 0.9), rgba(82, 40, 136, 1));
box-shadow:
0 0 30px var(--accent-purple),
inset -10px -10px 20px rgba(0, 0, 0, 0.5),
inset 10px 10px 20px rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
font-weight: bold;
color: #fff;
z-index: 2;
animation: pulse-ring 3s ease-in-out infinite;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
/* 法则槽位节点 - 增强美化 */
.law-slot-node {
position: absolute;
width: 68px;
height: 68px;
background: linear-gradient(135deg, rgba(20, 10, 30, 0.95), rgba(10, 5, 15, 1));
border: 3px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
font-size: 1.8rem;
z-index: 3;
box-shadow:
0 0 0 2px rgba(0, 0, 0, 0.8),
0 6px 20px rgba(0, 0, 0, 0.6),
inset 0 2px 8px rgba(255, 255, 255, 0.05),
inset 0 -2px 6px rgba(0, 0, 0, 0.4);
}
/* 槽位连接线效果 */
.law-slot-node::before {
content: '';
position: absolute;
width: 2px;
height: 60px;
background: linear-gradient(180deg, transparent, rgba(157, 78, 221, 0.3), transparent);
top: -65px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
}
.law-slot-node.filled::before {
opacity: 0.6;
}
/* 空槽位 - 脉冲动画 */
.law-slot-node.empty {
color: rgba(255, 255, 255, 0.3);
border-style: dashed;
animation: pulse-ring 2s ease-in-out infinite;
}
/* 已填充槽位 - 金色光晕增强 */
.law-slot-node.filled {
border-color: var(--accent-gold);
border-width: 3px;
background: radial-gradient(circle at center, rgba(82, 40, 136, 1), rgba(50, 20, 80, 0.95));
box-shadow:
0 0 0 2px rgba(207, 170, 112, 0.4),
0 0 25px rgba(255, 215, 0, 0.5),
0 6px 20px rgba(0, 0, 0, 0.7),
inset 0 2px 10px rgba(255, 215, 0, 0.15),
inset 0 -2px 8px rgba(0, 0, 0, 0.5);
}
/* 锁定槽位 */
.law-slot-node.locked {
opacity: 0.4;
cursor: not-allowed;
border-color: rgba(100, 100, 100, 0.5);
background: rgba(0, 0, 0, 0.8);
}
/* 悬浮效果 */
.law-slot-node:not(.locked):hover {
border-color: var(--accent-gold);
transform: scale(1.15);
box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.7);
z-index: 5;
}
.law-slot-node.filled:hover {
box-shadow: 0 0 35px rgba(255, 215, 0, 0.7), 0 8px 25px rgba(0, 0, 0, 0.8);
}
/* ========== 右侧：法则库 ========== */
.law-library-panel {
width: 320px;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(30, 20, 40, 0.5) 100%);
border-left: 1px solid rgba(255, 215, 0, 0.2);
display: flex;
flex-direction: column;
overflow-x: hidden;
position: relative;
}
.law-library-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: linear-gradient(180deg, transparent, var(--accent-gold), transparent);
}
/* 法则库标题 */
.library-header {
padding: 18px 20px;
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
font-weight: bold;
font-size: 1.1rem;
color: var(--accent-gold);
font-family: var(--font-display);
text-shadow: 0 0 10px rgba(207, 170, 112, 0.4);
background: rgba(0, 0, 0, 0.2);
}
/* 法则列表 */
.library-list {
flex: 1;
overflow-y: auto;
padding: 20px 15px 20px 12px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* 滚动条样式优化 - 暗色低调 */
.library-list::-webkit-scrollbar {
width: 8px;
}
.library-list::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.library-list::-webkit-scrollbar-thumb {
background: rgba(207, 170, 112, 0.3);
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.library-list::-webkit-scrollbar-thumb:hover {
background: rgba(207, 170, 112, 0.5);
}
/* 法则条目卡片 - 增强卡片感 */
.library-item {
display: flex;
align-items: center;
padding: 14px 12px;
background: linear-gradient(135deg, rgba(20, 10, 30, 0.6), rgba(10, 5, 20, 0.5));
border: 1px solid rgba(207, 170, 112, 0.25);
border-radius: 10px;
cursor: grab;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.05);
}
.library-item:active {
cursor: grabbing;
}
/* 卡片背景层叠效果 */
.library-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
transition: left 0.5s;
}
.library-item:hover::before {
left: 100%;
}
/* 悬浮效果 - 增强 */
.library-item:hover {
background: linear-gradient(135deg, rgba(82, 40, 136, 0.5), rgba(50, 30, 70, 0.4));
border-color: var(--accent-gold);
transform: translateX(8px) scale(1.02);
box-shadow: 0 6px 20px rgba(207, 170, 112, 0.4), -6px 0 15px rgba(157, 78, 221, 0.3), inset 0 1px 3px rgba(255, 255, 255, 0.1);
}
/* 已装备状态 */
.library-item.equipped {
opacity: 0.6;
cursor: not-allowed;
border-color: var(--accent-gold);
background: linear-gradient(135deg, rgba(207, 170, 112, 0.15), rgba(82, 40, 136, 0.1));
position: relative;
}
.library-item.equipped::after {
content: '✓';
position: absolute;
top: 4px;
right: 8px;
color: var(--accent-gold);
font-size: 1.2rem;
font-weight: bold;
text-shadow: 0 0 8px rgba(207, 170, 112, 0.6);
}
.library-item.equipped:hover {
transform: none;
}
/* 法则图标 */
.lib-icon {
font-size: 1.7rem;
margin-right: 12px;
width: 36px;
text-align: center;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.3));
}
/* 法则信息 */
.lib-info {
flex: 1;
}
.lib-name {
font-weight: 600;
margin-bottom: 4px;
font-size: 0.95rem;
color: var(--text-primary);
}
.lib-desc {
font-size: 0.75rem;
color: var(--text-muted);
line-height: 1.3;
}
/* 共鸣面板 - 卡片风格 */
.resonance-panel {
border-top: 2px solid rgba(255, 215, 0, 0.3);
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(20, 10, 30, 0.25));
margin: 15px 12px 12px;
border-radius: 10px;
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}
.resonance-item {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(157, 78, 221, 0.08)) !important;
border: 1px solid rgba(207, 170, 112, 0.4) !important;
box-shadow: 0 3px 12px rgba(207, 170, 112, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.05) !important;
border-radius: 8px !important;
}
/* ===================================
Character Selection Screen
=================================== */
.character-selection-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
padding: 20px 40px;
flex: 1;
min-height: 0;
overflow-y: auto;
width: 100%;
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
}
.story-intro {
max-width: 900px;
width: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0.7) 80%, rgba(0, 0, 0, 0));
padding: 20px 40px;
border-top: 1px solid rgba(207, 170, 112, 0.3);
border-bottom: 1px solid rgba(207, 170, 112, 0.3);
line-height: 1.8;
text-align: center;
flex-shrink: 0;
margin-bottom: 30px;
}
.story-intro p {
color: var(--text-secondary);
font-size: 0.95rem;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.story-intro strong {
color: var(--accent-gold);
font-size: 1.1rem;
font-weight: normal;
font-family: var(--font-display);
letter-spacing: 2px;
}
.character-cards-wrapper {
display: grid;
/* Force 4 columns for single row */
grid-template-columns: repeat(4, 1fr);
gap: 20px;
justify-content: center;
width: 100%;
max-width: 1400px;
padding-bottom: 60px;
}
.run-destiny-section {
width: 100%;
max-width: 1400px;
display: flex;
flex-direction: column;
gap: 18px;
margin-top: -10px;
padding-bottom: 24px;
}
.run-destiny-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
padding: 20px 24px;
border: 1px solid rgba(207, 170, 112, 0.18);
background:
radial-gradient(circle at top left, rgba(207, 170, 112, 0.12), transparent 45%),
linear-gradient(135deg, rgba(17, 20, 29, 0.92), rgba(9, 11, 18, 0.92));
border-radius: 16px;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.run-destiny-kicker {
display: inline-block;
margin-bottom: 8px;
color: var(--accent-gold);
letter-spacing: 2px;
font-size: 0.78rem;
text-transform: uppercase;
}
.run-destiny-header h3 {
margin: 0;
font-family: var(--font-display);
color: var(--text-main);
font-size: 1.5rem;
letter-spacing: 1px;
}
.run-destiny-header p {
margin: 0;
max-width: 720px;
color: var(--text-secondary);
line-height: 1.7;
text-align: right;
}
.run-destiny-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.run-destiny-card {
width: 100%;
min-height: 220px;
padding: 18px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background:
radial-gradient(circle at top right, rgba(207, 170, 112, 0.12), transparent 30%),
linear-gradient(160deg, rgba(18, 21, 30, 0.96), rgba(9, 11, 17, 0.96));
color: var(--text-main);
text-align: left;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.run-destiny-card:hover {
transform: translateY(-3px);
border-color: rgba(207, 170, 112, 0.36);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
}
.run-destiny-card.selected {
border-color: rgba(207, 170, 112, 0.72);
box-shadow:
0 14px 34px rgba(0, 0, 0, 0.34),
0 0 0 1px rgba(207, 170, 112, 0.2) inset;
transform: translateY(-4px);
}
.run-spirit-section .run-destiny-header {
background:
radial-gradient(circle at top left, rgba(118, 190, 255, 0.14), transparent 46%),
linear-gradient(135deg, rgba(16, 20, 34, 0.94), rgba(8, 11, 20, 0.94));
}
.run-spirit-card {
background:
radial-gradient(circle at top right, rgba(118, 190, 255, 0.16), transparent 32%),
linear-gradient(160deg, rgba(14, 20, 32, 0.96), rgba(8, 11, 20, 0.96));
}
.run-spirit-card .run-destiny-icon {
background: rgba(118, 190, 255, 0.14);
border-color: rgba(118, 190, 255, 0.28);
}
.run-spirit-card .run-destiny-tier,
.run-spirit-card .run-destiny-tag {
color: rgba(189, 228, 255, 0.96);
}
.run-spirit-card .run-destiny-tag {
background: rgba(118, 190, 255, 0.12);
border-color: rgba(118, 190, 255, 0.2);
}
.run-destiny-head {
display: flex;
align-items: center;
gap: 12px;
}
.run-destiny-icon {
width: 46px;
height: 46px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.45rem;
background: rgba(207, 170, 112, 0.12);
border: 1px solid rgba(207, 170, 112, 0.25);
flex-shrink: 0;
}
.run-destiny-title-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.run-destiny-name {
font-family: var(--font-display);
font-size: 1.3rem;
color: var(--text-main);
letter-spacing: 1px;
}
.run-destiny-tier {
color: var(--accent-gold-bright);
font-size: 0.82rem;
letter-spacing: 1px;
}
.run-destiny-desc {
color: var(--text-secondary);
line-height: 1.6;
min-height: 50px;
}
.run-destiny-summary {
color: var(--text-main);
line-height: 1.6;
padding: 10px 12px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.run-destiny-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: auto;
}
.run-destiny-tag {
padding: 5px 10px;
border-radius: 999px;
background: rgba(207, 170, 112, 0.1);
border: 1px solid rgba(207, 170, 112, 0.18);
color: var(--accent-gold-bright);
font-size: 0.78rem;
}
.run-destiny-empty {
grid-column: 1 / -1;
padding: 26px 20px;
border-radius: 16px;
border: 1px dashed rgba(207, 170, 112, 0.2);
color: var(--text-muted);
text-align: center;
background: rgba(12, 15, 24, 0.86);
}
.character-card {
position: relative;
width: 100%;
max-width: 320px;
height: 620px;
margin: 0 auto;
background: #0f121a;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
/* 选中状态金边光效 */
.character-card.selected {
border-color: var(--accent-gold);
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.6),
0 0 20px rgba(207, 170, 112, 0.3);
transform: translateY(-8px);
z-index: 2;
}
/* 选中标记 - 只有选中时显示 */
.character-card .selected-mark {
position: absolute;
top: 10px;
right: 10px;
color: var(--accent-gold);
font-size: 1.5rem;
opacity: 0;
transform: scale(0);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 10;
text-shadow: 0 0 10px rgba(207, 170, 112, 0.5);
}
.character-card.selected .selected-mark {
opacity: 1;
transform: scale(1);
}
.character-card:hover:not(.selected):not(.locked) {
border-color: rgba(207, 170, 112, 0.5);
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}
.character-card.locked {
filter: grayscale(1) brightness(0.6);
cursor: not-allowed;
border-style: dashed;
}
/* 内部容器 */
.card-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(to bottom, rgba(20, 20, 30, 0.2), rgba(10, 14, 20, 0.95));
}
/* 顶部头像区 */
.char-header {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
background: radial-gradient(circle at 50% 40%, rgba(50, 50, 70, 0.3) 0%, transparent 70%);
}
/* 水墨背景装饰 */
.char-ink-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 10rem;
opacity: 0.1;
color: #000;
pointer-events: none;
z-index: 0;
filter: blur(2px);
}
/* 头像容器 */
.char-avatar-wrapper {
position: relative;
z-index: 1;
width: 110px;
height: 110px;
border: 2px solid rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #1a1a24;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transition: border-color 0.3s ease;
}
.character-card.selected .char-avatar-wrapper {
border-color: var(--accent-gold);
box-shadow: 0 0 20px rgba(207, 170, 112, 0.2);
}
.char-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.char-avatar-emoji {
font-size: 3.5rem;
line-height: 1;
}
/* 信息主体 */
.char-body {
flex: 1;
padding: 15px 25px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.char-name {
font-family: var(--font-display);
font-size: 2rem;
color: #e0e0e0;
margin-bottom: 0;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
letter-spacing: 2px;
}
.character-card.selected .char-name {
color: var(--accent-gold);
}
.char-title {
font-size: 0.85rem;
color: var(--text-muted);
letter-spacing: 1px;
margin-top: -8px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2px 10px;
border-radius: 20px;
}
.character-card.selected .char-title {
border-color: rgba(207, 170, 112, 0.3);
color: var(--accent-gold-bright);
}
.char-desc {
font-size: 0.85rem;
color: #999;
text-align: center;
line-height: 1.5;
margin: 10px 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.char-identity-strip,
.char-keyword-strip {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
}
.char-identity-pill,
.char-keyword-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 24px;
padding: 3px 10px;
border-radius: 999px;
font-size: 0.74rem;
line-height: 1.3;
color: rgba(235, 239, 247, 0.86);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.char-identity-pill.primary {
color: #f8e8c0;
border-color: rgba(214, 171, 88, 0.28);
background: rgba(214, 171, 88, 0.12);
}
.char-keyword-chip {
color: #d8efff;
background: rgba(84, 129, 164, 0.14);
border-color: rgba(115, 159, 194, 0.18);
}
.char-story-panel {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
background: linear-gradient(180deg, rgba(16, 20, 28, 0.92) 0%, rgba(10, 13, 20, 0.78) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
display: grid;
gap: 6px;
}
.char-story-line {
font-size: 0.76rem;
line-height: 1.45;
color: rgba(226, 231, 238, 0.82);
}
.char-story-line strong {
color: #f1d6a3;
font-weight: 600;
}
.char-story-line.muted {
color: rgba(190, 197, 206, 0.7);
}
/* 天赋区域 */
.char-relic-info {
width: 100%;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
padding: 10px;
margin-top: auto;
/* Push to bottom of body if space allows */
}
.character-card.selected .char-relic-info {
background: rgba(207, 170, 112, 0.05);
border-color: rgba(207, 170, 112, 0.2);
}
.relic-name {
color: var(--accent-gold);
font-size: 0.95rem;
font-weight: 500;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.relic-desc {
font-size: 0.8rem;
color: #aaa;
line-height: 1.4;
}
/* 属性预览 */
.char-stats-preview {
display: flex;
justify-content: center;
gap: 30px;
width: 100%;
padding-top: 15px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.stat-item {
text-align: center;
}
.stat-value {
font-size: 1.2rem;
font-family: 'Roboto', sans-serif;
/* Use sans-serif for numbers */
font-weight: bold;
color: #ddd;
display: block;
}
.stat-label {
font-size: 0.75rem;
color: #666;
margin-top: 2px;
display: block;
text-transform: uppercase;
}
.character-selection-footer {
padding: 20px;
display: flex;
justify-content: center;
}
.menu-utilities {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.util-btn {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: var(--text-main);
font-size: 1.2rem;
}
.util-btn:hover {
background: rgba(255, 255, 255, 0.15);
border-color: var(--accent-gold);
transform: translateY(-3px) scale(1.1);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
color: var(--accent-gold);
}
.hidden {
display: none !important;
}
/* ===================================
Mobile Responsiveness (Phone & Tablet)
=================================== */
@media screen and (max-width: 768px) {
/* 主菜单调整 */
.menu-content {
width: 90%;
padding: 20px;
}
.title-cn {
font-size: 3rem;
}
.title-en {
font-size: 1.2rem;
}
.menu-buttons {
gap: 15px;
}
.menu-btn {
width: 100%;
padding: 12px;
}
/* 角色选择界面 */
.character-selection-container {
padding: 10px;
}
.story-intro {
font-size: 0.9rem;
padding: 15px;
}
.character-cards-wrapper {
grid-template-columns: 1fr;
}
.character-card {
width: 100%;
max-width: 300px;
height: auto;
min-height: 400px;
}
.run-destiny-header {
flex-direction: column;
align-items: flex-start;
}
.run-destiny-header p {
text-align: left;
}
.run-destiny-grid {
grid-template-columns: 1fr;
}
/* 战斗界面调整 */
.battle-container {
grid-template-rows: 1fr 1fr 1.2fr 180px;
padding: 10px;
}
/* 敌人区域 */
.enemy-container {
gap: 10px;
justify-content: center;
}
.enemy-card {
width: 120px;
height: 160px;
}
.enemy-intent {
top: -30px;
}
/* 玩家区域 */
.player-area {
position: relative;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.player-character {
flex-direction: row;
gap: 10px;
}
.player-avatar {
width: 60px;
height: 60px;
font-size: 0.8rem;
}
/* 手牌区域 */
.hand-area {
height: 160px;
padding-bottom: 60px;
padding-top: 50px;
/* 为悬停效果留空间 */
align-items: flex-end;
/* 卡牌底部对齐 */
overflow-y: visible;
}
.hand-cards {
gap: -30px;
align-items: flex-end;
/* 卡牌底部对齐 */
}
.card {
width: 120px;
height: 170px;
font-size: 0.8rem;
}
/* 结束回合按钮悬浮或固定在底部 */
.end-turn-btn {
position: absolute;
bottom: 20px;
right: 20px;
width: auto;
padding: 10px 20px;
font-size: 1rem;
z-index: 100;
}
/* 战斗日志放中间上方 */
.battle-middle {
pointer-events: none;
}
.battle-log {
font-size: 0.9rem;
max-width: 90%;
}
/* 地图界面 */
.map-nodes {
height: 60vh;
}
/* 命环界面 */
.fate-ring-body {
flex-direction: column;
}
.ring-status-panel,
.law-library-panel {
width: 100%;
height: auto;
min-height: 200px;
}
/* 弹窗适配 */
.modal-content {
width: 95%;
max-height: 90vh;
padding: 15px;
-webkit-overflow-scrolling: touch;
/* 修复iOS滚动 */
}
/* 顶部栏 */
.player-status-bar {
font-size: 0.8rem;
gap: 10px;
}
}
/* ===================================
Treasure UI
=================================== */
.treasures-bar {
display: flex;
gap: 8px;
padding: 5px 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
align-items: center;
min-height: 40px;
flex-wrap: wrap;
/* Fix overflow */
justify-content: center;
max-width: 90%;
/* Prevent hitting screen edges */
}
.treasures-bar.battle-pos {
position: absolute;
top: 20px;
/* Move to top left */
left: 20px;
transform: none;
/* Remove center transform */
z-index: 20;
pointer-events: auto;
justify-content: flex-start;
max-width: 300px;
}
.treasure-icon {
width: 36px;
height: 36px;
background: rgba(20, 20, 30, 0.8);
border: 1px solid var(--border-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
cursor: help;
transition: all 0.2s;
position: relative;
}
.treasure-icon.rare {
border-color: #00bcd4;
box-shadow: 0 0 5px rgba(0, 188, 212, 0.3);
}
.treasure-icon.legendary {
border-color: #ffd700;
box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.treasure-icon:hover {
transform: scale(1.1);
z-index: 100;
}
/* Tooltip */
.treasure-tooltip {
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
border: 1px solid var(--accent-gold);
padding: 10px;
border-radius: 8px;
width: 200px;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
text-align: left;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.8));
visibility: hidden;
z-index: 1000;
}
/* Battle specific tooltip (display below and left-aligned) */
.treasures-bar.battle-pos .treasure-tooltip {
bottom: auto;
top: 120%;
left: 0;
transform: none;
}
.treasure-icon:hover .treasure-tooltip {
opacity: 1;
visibility: visible;
}
.treasure-icon:hover .treasure-tooltip {
opacity: 1;
visibility: visible;
}
.treasure-tooltip h4 {
color: var(--accent-gold);
margin: 0 0 5px 0;
font-size: 0.9rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 3px;
}
.treasure-tooltip p {
color: #ccc;
font-size: 0.8rem;
margin: 0;
line-height: 1.3;
}
/* ===================================
Evolution UI
=================================== */
.evolution-view {
padding: 30px;
width: 100%;
height: 100%;
/* Fill parent */
overflow-y: auto;
/* Enable internal scrolling */
display: flex;
flex-direction: column;
align-items: center;
background: radial-gradient(circle at center, rgba(30, 10, 50, 0.8) 0%, rgba(10, 5, 20, 0.9) 100%);
border-radius: var(--radius-lg);
}
.evolution-title {
color: var(--accent-gold);
margin-bottom: 30px;
font-family: var(--font-display);
font-size: 2rem;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.evolution-options-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
width: 100%;
max-width: 900px;
margin-bottom: 30px;
}
.evolution-path-card {
flex: 1 1 200px;
max-width: 250px;
padding: 20px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: 12px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
text-align: center;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.evolution-path-card:hover {
transform: translateY(-5px) scale(1.05);
background: rgba(255, 215, 0, 0.1);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3);
border-color: var(--accent-gold);
z-index: 10;
}
.evolution-path-card .path-icon {
font-size: 3rem;
margin-bottom: 15px;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
.evolution-path-card .path-name {
margin-bottom: 10px;
color: var(--text-primary);
font-size: 1.2rem;
font-weight: bold;
}
.evolution-path-card .path-desc {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.4;
margin-bottom: 15px;
}
.evolution-path-card .path-select-hint {
margin-top: auto;
font-size: 0.8rem;
color: var(--accent-gold);
opacity: 0;
transition: opacity 0.3s;
transform: translateY(10px);
}
.evolution-path-card:hover .path-select-hint {
opacity: 1;
transform: translateY(0);
}
.evolution-back-btn {
padding: 10px 40px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
color: var(--text-muted);
cursor: pointer;
border-radius: 20px;
transition: all 0.3s;
}
.evolution-back-btn:hover {
border-color: var(--text-primary);
color: var(--text-primary);
background: rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
.evolution-options-container {
/* On mobile, stack them but keep flexible width */
flex-direction: row;
/* Actually row with wrap is fine for mobile too if items are 200px wide,
but on very small screens (320px) they might need to be 100% */
}
.evolution-path-card {
flex: 1 1 100%;
max-width: 100%;
}
}
/* ===================================
Mobile Optimization (Battle & Cards)
=================================== */
@media (max-width: 600px) {
/* 缩小手牌区域，适应小屏 */
.hand-area {
min-height: 140px;
padding: 2px;
padding-top: 40px;
/* 为悬停效果留空间 */
gap: 2px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 50%);
overflow: visible;
/* 允许卡牌悬停时向上显示 */
align-items: flex-end;
/* 卡牌底部对齐 */
}
.hand-cards {
gap: -20px;
align-items: flex-end;
/* 卡牌底部对齐 */
}
/* 缩小卡牌尺寸 */
.card {
width: 80px;
/* 进一步缩小 */
height: 115px;
margin-left: -20px;
font-size: 0.7rem;
padding: 4px;
border-width: 2px;
}
.card-cost {
width: 20px;
height: 20px;
font-size: 0.8rem;
top: -5px;
left: -5px;
border-width: 1px;
}
.card-header {
padding-left: 10px;
}
.card-image,
.card-art {
font-size: 1.5rem;
margin: 0;
}
.card-desc {
font-size: 0.55rem;
padding: 1px 2px;
line-height: 1;
min-height: 25px;
-webkit-line-clamp: 2;
}
/* 调整结束回合按钮位置 - 彻底悬浮 */
.end-turn-btn {
bottom: 125px;
/* 紧贴手牌上方 */
right: 5px;
padding: 6px 12px;
font-size: 0.8rem;
z-index: 200;
}
/* 压缩战斗区域垂直空间 */
.battle-container {
justify-content: flex-end;
/* 优先保证底部对齐 */
}
.enemy-area {
flex: 1;
/* 占据剩余空间 */
padding: 5px;
min-height: 0;
/* 允许压缩 */
align-items: flex-end;
/* 敌人靠下 */
}
.enemy-container {
gap: 10px;
transform: scale(0.85);
/* 整体缩小敌人 */
}
.battle-middle {
height: 30px;
/* 压缩日志区域 */
min-height: 30px;
}
.battle-log {
font-size: 0.7rem;
padding: 2px 8px;
}
/* 调整玩家区域 */
.player-area {
padding: 0 5px;
gap: 10px;
margin-bottom: 5px;
flex-shrink: 0;
}
.player-character {
transform: none;
/* 取消之前的 scale */
gap: 2px;
}
.player-avatar {
width: 50px;
height: 50px;
font-size: 1rem;
border-width: 2px;
}
.avatar-effects {
display: none;
/* 移除特效减少干扰 */
}
.hp-bar {
width: 80px;
height: 12px;
}
.bar-text {
font-size: 0.6rem;
}
.energy-orb {
width: 18px;
height: 18px;
}
}
/* ===================================
新增 UI (P0 Update)
=================================== */
/* 伤害预览 */
.enemy-hp-preview {
position: absolute;
top: 0;
height: 100%;
background: rgba(255, 255, 255, 0.5);
animation: previewBlink 1s infinite alternate;
pointer-events: none;
z-index: 2;
}
.enemy-hp-fill.will-die {
animation: lethalPulse 0.5s infinite alternate;
background: #444 !important;
}
/* 工具提示 */
.game-tooltip {
position: fixed;
background: rgba(0, 0, 0, 0.9);
border: 1px solid var(--accent-gold);
color: #fff;
padding: 8px 12px;
border-radius: 4px;
pointer-events: none;
z-index: 2000;
font-size: 0.9rem;
white-space: nowrap;
display: none;
transform: translate(-50%, -120%);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
/* ===================================
Active Skill Button
=================================== */
/* ===================================
Active Skill Button (Super Skill Refactor)
=================================== */
.active-skill-container {
position: relative;
width: 80px;
height: 80px;
background: radial-gradient(circle at 30% 30%, #2d3436 0%, #000000 100%);
border-radius: 50%;
margin-right: 25px;
display: flex;
justify-content: center;
align-items: center;
cursor: not-allowed;
/* Default to not ready/cooldown */
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 10;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.9);
}
/* Icon */
.skill-icon-wrapper {
position: relative;
z-index: 5;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
/* Mask for cooldown fill */
}
.skill-icon {
font-size: 40px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
transition: transform 0.3s;
}
/* Cooldown State (Enhanced - Color Recovery) */
.active-skill-container.cooldown {
/* filter和opacity由JS动态控制 */
border: 2px solid rgba(100, 100, 100, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 0, 0, 0.8);
cursor: not-allowed;
transition: filter 0.3s ease, opacity 0.3s ease;
}
.skill-cooldown-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0%;
/* Controlled by JS */
background: rgba(0, 0, 0, 0.75);
z-index: 6;
transition: height 0.1s linear;
pointer-events: none;
}
.skill-cooldown-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: var(--font-display);
font-size: 28px;
color: #fff;
z-index: 7;
text-shadow: 0 0 5px #000, 0 0 10px #000;
pointer-events: none;
}
/* Ready State */
.active-skill-container.ready {
cursor: pointer;
filter: grayscale(0);
opacity: 1;
border: 2px solid rgba(255, 215, 0, 0.5);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}
.active-skill-container.ready:hover {
transform: scale(1.1);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
}
.active-skill-container.ready .skill-icon {
animation: skillIconFloat 3s ease-in-out infinite;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
@keyframes skillIconFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Visual Effects (Only visible when ready) */
.skill-halo {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 1px solid var(--accent-gold);
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
.active-skill-container.ready .skill-halo {
opacity: 0.6;
animation: haloPulse 2s infinite;
}
@keyframes haloPulse {
0% {
transform: scale(0.9);
opacity: 0.3;
}
50% {
transform: scale(1.1);
opacity: 0.6;
}
100% {
transform: scale(0.9);
opacity: 0.3;
}
}
/* Rotating Runes Ring */
.skill-runes-ring {
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border: 1px dashed rgba(255, 215, 0, 0.3);
border-radius: 50%;
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
.active-skill-container.ready .skill-runes-ring {
opacity: 1;
animation: runeRotate 10s linear infinite;
}
.active-skill-container.ready .skill-runes-ring::before {
content: '★';
position: absolute;
top: -5px;
left: 50%;
color: var(--accent-gold);
font-size: 10px;
}
.active-skill-container.ready .skill-runes-ring::after {
content: '★';
position: absolute;
bottom: -5px;
left: 50%;
color: var(--accent-gold);
font-size: 10px;
}
@keyframes runeRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.skill-inner-glow {
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s;
pointer-events: none;
}
.active-skill-container.ready .skill-inner-glow {
opacity: 1;
animation: innerGlowPulse 2s ease-in-out infinite alternate;
}
@keyframes innerGlowPulse {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
/* Particles placeholder - can be used by JS particles.js */
.skill-ready-particles {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
}
/* Tooltip - Ink Style */
.skill-tooltip.ink-tooltip {
position: absolute;
bottom: 130%;
left: 50%;
transform: translateX(-50%) translateY(10px);
width: 260px;
background: #1a1a1a;
/* Fallback */
background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
border: 1px solid var(--accent-gold);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
padding: 15px;
border-radius: 8px;
opacity: 0;
visibility: hidden;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 100;
pointer-events: none;
}
/* Frame decoration */
.skill-tooltip.ink-tooltip::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
pointer-events: none;
}
/* Arrow */
.skill-tooltip.ink-tooltip::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: #000;
border-right: 1px solid var(--accent-gold);
border-bottom: 1px solid var(--accent-gold);
}
.active-skill-container:hover .skill-tooltip {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* Stats List (Reverted to Flex Column) */
.stats-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.stat-row-3d {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Polished XP Bar */
.exp-section {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.skill-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.skill-name {
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--accent-gold);
}
.skill-type-badge {
font-size: 0.7rem;
background: var(--accent-purple);
color: #fff;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.skill-divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
margin-bottom: 8px;
opacity: 0.5;
}
.skill-desc {
color: #e0e0e0;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 10px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.skill-lore {
color: #888;
font-size: 0.85rem;
font-style: italic;
text-align: right;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 5px;
font-family: serif;
}
/* ===================================
Candy Display (Emoji Icons)
=================================== */
.candy-orb {
position: relative;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
animation: candyFloat 2s ease-in-out infinite;
cursor: default;
transition: transform 0.3s;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}
.candy-orb:hover {
transform: scale(1.2) rotate(10deg);
}
@keyframes candyFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-3px) rotate(5deg);
}
50% {
transform: translateY(0) rotate(0deg);
}
75% {
transform: translateY(-3px) rotate(-5deg);
}
}
.candy-extra {
font-size: 0.9rem;
color: var(--accent-gold);
font-weight: bold;
text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
padding: 0 8px;
}
/* ===================================
Resources Container (Vertical Layout)
=================================== */
.resources-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-left: 25px;
}
.resource-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.resource-tooltip {
position: absolute;
left: 120%;
top: 50%;
transform: translateY(-50%);
background: rgba(0, 0, 0, 0.9);
color: var(--accent-gold);
padding: 4px 10px;
border-radius: 6px;
border: 1px solid var(--accent-gold);
font-size: 0.85rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
pointer-events: none;
z-index: 1000;
}
.resource-item:hover .resource-tooltip {
opacity: 1;
visibility: visible;
left: 110%;
}
.candy-orbs {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
max-width: 230px;
/* 容纳6个糖果图标：28×6 + 8×5 = 208px */
}
.candy-text,
.energy-text {
font-size: 0.85rem;
color: #fff;
font-weight: bold;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
/* Save Slots - Spirit Tablets (命牌) */
.slots-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
padding: 20px;
perspective: 1000px;
}
.save-slot {
position: relative;
background: linear-gradient(180deg, #1a2a3a 0%, #0d1117 100%);
border: 2px solid #3d4c53;
border-radius: 20px 20px 4px 4px;
padding: 2px;
/* For double border effect inside */
height: 450px;
display: flex;
flex-direction: column;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
cursor: default;
}
.save-slot::before {
/* Inner Border */
content: '';
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px 16px 2px 2px;
pointer-events: none;
z-index: 1;
}
.save-slot.empty {
background: rgba(20, 20, 25, 0.6);
border-color: #333;
opacity: 0.8;
}
.save-slot:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 20px rgba(207, 170, 112, 0.2);
border-color: var(--accent-gold);
}
.save-slot.empty:hover {
border-color: var(--text-muted);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}
/* Tablet Header */
.slot-header {
background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
padding: 15px 0;
text-align: center;
font-family: var(--font-display);
font-size: 1.4rem;
color: var(--accent-gold);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 2;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
/* Tablet Content */
.slot-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
z-index: 2;
padding: 20px;
}
.slot-visual {
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
margin-bottom: 15px;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.save-slot:not(.empty) .slot-visual {
border-color: var(--accent-gold);
box-shadow: 0 0 15px rgba(207, 170, 112, 0.3);
text-shadow: 0 0 10px rgba(207, 170, 112, 0.5);
}
.slot-info-primary {
font-size: 1.1rem;
color: #fff;
font-weight: bold;
}
.slot-info-secondary {
font-size: 0.9rem;
color: var(--text-muted);
}
.slot-actions {
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
z-index: 2;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}
.slot-empty-text {
color: var(--text-muted);
font-style: italic;
opacity: 0.5;
}
/* New Tablet Glow Animation */
@keyframes tablet-pulse {
0% {
box-shadow: 0 0 10px rgba(207, 170, 112, 0.1);
}
50% {
box-shadow: 0 0 25px rgba(207, 170, 112, 0.3);
}
100% {
box-shadow: 0 0 10px rgba(207, 170, 112, 0.1);
}
}
.save-slot:not(.empty) {
animation: tablet-pulse 4s infinite ease-in-out;
}
.slot-overwrite-warning {
color: var(--accent-red);
font-size: 0.75rem;
opacity: 0.7;
margin-top: 5px;
}
/* Cheater Button */
.cheat-btn {
background: rgba(220, 53, 69, 0.2);
border: 1px solid rgba(220, 53, 69, 0.5);
color: #ff6b6b;
margin-left: auto;
}
.cheat-btn:hover {
background: rgba(220, 53, 69, 0.4);
box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
color: #fff;
border-color: #ff4d4d;
}
/* ===================================
Treasure Bag Modal
=================================== */
.treasure-bag-modal .modal-content {
max-width: 700px;
width: 95%;
max-height: 85vh;
background: linear-gradient(180deg, rgba(20, 20, 35, 0.98) 0%, rgba(10, 10, 20, 0.99) 100%);
border: 1px solid rgba(207, 170, 112, 0.3);
border-radius: var(--radius-lg);
box-shadow:
0 0 60px rgba(0, 0, 0, 0.8),
0 0 30px rgba(207, 170, 112, 0.1) inset;
padding: 0;
overflow: hidden;
}
.treasure-bag-modal .modal-content h2 {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--accent-gold);
text-align: center;
padding: var(--spacing-lg);
margin: 0;
background: linear-gradient(180deg, rgba(207, 170, 112, 0.15) 0%, transparent 100%);
border-bottom: 1px solid rgba(207, 170, 112, 0.2);
text-shadow: 0 0 20px rgba(207, 170, 112, 0.3);
}
.treasure-bag-modal .close-btn {
position: absolute;
top: 15px;
right: 20px;
font-size: 1.8rem;
color: var(--text-muted);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 10;
}
.treasure-bag-modal .close-btn:hover {
color: var(--accent-gold);
transform: scale(1.2);
}
.treasure-bag-layout {
display: flex;
flex-direction: column;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
overflow-y: auto;
max-height: calc(85vh - 80px);
}
/* Custom Scrollbar for Treasure Bag */
.treasure-bag-layout::-webkit-scrollbar {
width: 6px;
}
.treasure-bag-layout::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
.treasure-bag-layout::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.equipped-section,
.inventory-section {
background: rgba(0, 0, 0, 0.3);
border-radius: var(--radius-md);
padding: var(--spacing-md);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.equipped-section h3,
.inventory-section h3 {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--accent-gold-bright);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 1px solid rgba(207, 170, 112, 0.2);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.equipped-section h3::before {
content: '⚔️';
}
.inventory-section h3::before {
content: '📦';
}
#equipped-count {
font-size: 0.9rem;
padding: 2px 8px;
background: rgba(207, 170, 112, 0.2);
border-radius: var(--radius-sm);
color: var(--accent-gold);
}
.equipped-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--spacing-md);
}
.treasure-slot {
min-height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
border-radius: var(--radius-md);
border: 2px dashed rgba(255, 255, 255, 0.15);
background: rgba(0, 0, 0, 0.2);
transition: all var(--transition-fast);
cursor: pointer;
text-align: center;
gap: var(--spacing-sm);
}
.treasure-slot.empty {
border-style: dashed;
}
.treasure-slot.empty .empty-text {
color: var(--text-muted);
font-size: 0.85rem;
font-style: italic;
}
.treasure-slot.filled {
border-style: solid;
background: linear-gradient(135deg, rgba(40, 40, 60, 0.6) 0%, rgba(20, 20, 35, 0.8) 100%);
}
.treasure-slot.filled:hover {
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}
/* Rarity Colors */
.treasure-slot.rarity-common {
border-color: #9e9e9e;
}
.treasure-slot.rarity-common:hover {
box-shadow: 0 0 15px rgba(158, 158, 158, 0.4);
}
.treasure-slot.rarity-rare {
border-color: #4fc3f7;
background: linear-gradient(135deg, rgba(30, 60, 80, 0.5) 0%, rgba(20, 30, 50, 0.7) 100%);
}
.treasure-slot.rarity-rare:hover {
box-shadow: 0 0 20px rgba(79, 195, 247, 0.4);
}
.treasure-slot.rarity-legendary {
border-color: #e040fb;
/* Legendary -> Mythic (Purple) */
background: linear-gradient(135deg, rgba(100, 30, 120, 0.4) 0%, rgba(50, 20, 70, 0.6) 100%);
}
.treasure-slot.rarity-legendary:hover {
box-shadow: 0 0 25px rgba(224, 64, 251, 0.5);
}
.treasure-slot.rarity-mythic {
border-color: #ffab00;
/* Mythic -> Immortal (Orange) */
background: linear-gradient(135deg, rgba(80, 60, 30, 0.5) 0%, rgba(50, 40, 20, 0.7) 100%);
animation: mythicPulse 2s ease-in-out infinite;
}
@keyframes mythicPulse {
0%,
100% {
box-shadow: 0 0 10px rgba(224, 64, 251, 0.3);
}
50% {
box-shadow: 0 0 25px rgba(224, 64, 251, 0.6);
}
}
.treasure-slot .t-icon {
font-size: 2.5rem;
margin-bottom: var(--spacing-xs);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.treasure-slot .t-name {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--spacing-xs);
}
.treasure-slot .unequip-btn {
padding: 4px 12px;
font-size: 0.75rem;
background: rgba(255, 100, 100, 0.15);
border: 1px solid rgba(255, 100, 100, 0.4);
border-radius: var(--radius-sm);
color: #ff8a8a;
cursor: pointer;
transition: all var(--transition-fast);
}
.treasure-slot .unequip-btn:hover {
background: rgba(255, 100, 100, 0.3);
border-color: #ff6b6b;
color: #fff;
}
.slot-info {
text-align: center;
font-size: 0.8rem;
color: var(--text-muted);
margin-top: var(--spacing-sm);
font-style: italic;
}
/* Inventory Grid */
.inventory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: var(--spacing-md);
min-height: 80px;
padding: var(--spacing-sm);
}
.inventory-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
border-radius: var(--radius-md);
border: 2px solid rgba(255, 255, 255, 0.15);
background: linear-gradient(135deg, rgba(40, 40, 55, 0.7) 0%, rgba(25, 25, 40, 0.8) 100%);
cursor: pointer;
transition: all var(--transition-fast);
text-align: center;
min-height: 100px;
position: relative;
overflow: hidden;
}
.inventory-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.inventory-item:hover {
background: linear-gradient(135deg, rgba(60, 60, 80, 0.8) 0%, rgba(40, 40, 60, 0.9) 100%);
border-color: var(--accent-cyan);
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.inventory-item .t-icon {
font-size: 2.2rem;
margin-bottom: var(--spacing-xs);
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.inventory-item .t-name {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-primary);
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
/* Rarity backgrounds for inventory */
.inventory-item.rarity-common {
border-color: rgba(158, 158, 158, 0.4);
}
.inventory-item.rarity-common::before {
background: linear-gradient(90deg, transparent, rgba(158, 158, 158, 0.3), transparent);
}
.inventory-item.rarity-rare {
border-color: rgba(79, 195, 247, 0.5);
background: linear-gradient(135deg, rgba(30, 50, 70, 0.7) 0%, rgba(20, 35, 55, 0.8) 100%);
}
.inventory-item.rarity-rare::before {
background: linear-gradient(90deg, transparent, rgba(79, 195, 247, 0.5), transparent);
}
.inventory-item.rarity-rare:hover {
border-color: #4fc3f7;
box-shadow: 0 8px 25px rgba(79, 195, 247, 0.3);
}
.inventory-item.rarity-legendary {
border-color: rgba(224, 64, 251, 0.5);
background: linear-gradient(135deg, rgba(100, 30, 120, 0.4) 0%, rgba(50, 20, 70, 0.6) 100%);
}
.inventory-item.rarity-legendary::before {
background: linear-gradient(90deg, transparent, rgba(224, 64, 251, 0.5), transparent);
}
.inventory-item.rarity-legendary:hover {
border-color: #e040fb;
box-shadow: 0 8px 25px rgba(224, 64, 251, 0.4);
}
.inventory-item.rarity-mythic {
border-color: rgba(255, 171, 0, 0.6);
}
.empty-inventory {
grid-column: 1 / -1;
text-align: center;
color: var(--text-muted);
font-style: italic;
padding: var(--spacing-lg);
}
.inventory-item .t-desc-hint {
font-size: 0.65rem;
color: var(--accent-cyan);
opacity: 0.7;
margin-top: 4px;
cursor: pointer;
transition: opacity var(--transition-fast);
}
.inventory-item:hover .t-desc-hint {
opacity: 1;
}
/* 已装备法宝的效果描述提示 */
.treasure-slot .t-effect {
font-size: 0.7rem;
color: var(--text-secondary);
max-width: 100%;
text-align: center;
line-height: 1.3;
margin-top: 4px;
opacity: 0.8;
}
/* 仓库法宝效果描述 (新) - 与已装备保持一致但适配Grid */
.inventory-item .t-effect {
font-size: 0.7rem;
/* 调小字体 */
color: var(--text-muted);
line-height: 1.3;
margin-top: 6px;
height: 38px;
/* 固定高度，显示两行左右，多余截断 */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-align: center;
width: 100%;
}
.inventory-item {
min-height: 140px;
/* 增加高度以容纳描述 */
}
/* Collection Item Tweaks */
.collection-item {
padding: 15px;
background: linear-gradient(135deg, rgba(35, 35, 50, 0.8) 0%, rgba(20, 20, 30, 0.9) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.collection-item.locked {
background: rgba(20, 20, 25, 0.5);
border-style: dashed;
border-color: rgba(255, 255, 255, 0.1);
}
.collection-desc {
font-size: 0.75rem;
/* 调小字体 */
color: var(--text-secondary);
text-align: center;
line-height: 1.4;
margin-top: 8px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
/* 显示更多行 */
-webkit-box-orient: vertical;
width: 100%;
opacity: 0.9;
}
.collection-item.locked .collection-desc {
color: var(--text-muted);
font-style: italic;
opacity: 0.6;
}
.collection-item .collection-icon {
font-size: 2.5rem;
margin-bottom: 10px;
}
/* Mobile UI Compensation Patch */
@media (max-width: 768px) {
/* Life Ring Mobile Fixes */
.ring-visual.large {
width: 150px;
height: 150px;
}
.law-slot {
width: 60px;
height: 60px;
}
.law-icon {
font-size: 1.2rem;
}
.loaded-laws-list {
gap: 5px;
}
.ring-large {
transform: scale(0.9);
margin-bottom: 10px;
}
/* Character Panel Mobile Fixes */
.character-panel {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
height: auto;
overflow-y: auto;
}
.character-avatar {
transform: scale(0.8);
margin-bottom: 0;
}
/* Adjust Avatar Ring size for mobile so it doesn't overflow */
.avatar-ring {
width: 140px;
height: 140px;
top: 5px;
/* Re-center */
}
.avatar-inner {
width: 110px;
height: 110px;
font-size: 1.5rem;
}
.character-info {
text-align: center;
width: 100%;
}
.character-stats {
justify-content: center;
flex-wrap: wrap;
gap: 10px;
}
.stat {
min-width: 60px;
padding: 8px;
}
.fate-ring-display {
width: 100%;
margin-top: 10px;
padding: 10px;
}
/* Save Slots Mobile Fixes */
.slots-container {
grid-template-columns: 1fr;
}
.save-slot {
padding: 10px;
}
/* Modal Tweaks */
.modal-content {
width: 95%;
padding: 15px;
max-height: 90vh;
}
/* Treasure Bag Mobile */
.treasure-bag-layout {
padding: 10px;
}
.equipped-grid,
.inventory-grid {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.treasure-slot,
.inventory-item {
min-height: 100px;
}
}
/* Map V3 Mobile Styles */
@media (max-width: 600px) {
.map-content-wrapper {
padding: 60px 0;
max-width: 100%;
overflow-x: hidden;
/* Prevent horizontal scroll */
}
.node-row-v3 {
height: 100px;
/* Reduced row height */
padding: 0 5px;
gap: 15px;
/* Use gap for flex spacing */
}
.map-node-v3 {
width: 48px;
height: 48px;
font-size: 20px;
margin: 0;
/* Let gap handle spacing */
border-width: 2px;
flex-shrink: 0;
/* Prevent squishing */
}
.map-node-v3.boss {
width: 70px;
height: 70px;
font-size: 30px;
}
.map-v3-header {
padding: 10px;
flex-direction: column;
/* Stack header on very small screens? No, keep inline but compact */
align-items: center;
}
.player-status-bar {
gap: 8px;
font-size: 0.8rem;
margin-top: 5px;
width: 100%;
justify-content: space-around;
background: rgba(0, 0, 0, 0.3);
padding: 5px;
border-radius: 8px;
}
.back-btn {
font-size: 0.8rem;
padding: 5px 10px;
}
}
/* ===================================
Realm Select Screen (New Ink & Gold)
=================================== */
/* ===================================
Realm Select Screen (New Ink & Gold - Spirit Tablets)
=================================== */
.realm-select-layout {
display: flex;
flex: 1;
min-height: 0;
padding: var(--spacing-lg);
gap: var(--spacing-xl);
/* Void Background - Deep & Ethereal */
background: radial-gradient(circle at 50% 120%, #1a1a20 0%, #050505 60%, #000000 100%);
position: relative;
overflow: hidden;
}
/* Background Ornamentation - Smoke/Fog */
.realm-select-layout::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(at 80% 0%, rgba(207, 170, 112, 0.03) 0px, transparent 50%),
radial-gradient(at 0% 50%, rgba(255, 255, 255, 0.02) 0px, transparent 50%);
pointer-events: none;
z-index: 0;
}
/* Background Ornamentation */
.realm-select-layout::before {
content: '天域';
position: absolute;
top: -20px;
right: 20px;
font-family: var(--font-display);
font-size: 15rem;
color: rgba(255, 255, 255, 0.02);
pointer-events: none;
z-index: 0;
}
.realm-list-container {
flex: 2;
min-height: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
grid-auto-rows: 210px;
gap: var(--spacing-md);
padding: var(--spacing-sm);
overflow-y: auto;
/* Custom Scrollbar - Gold & Minimal */
scrollbar-width: thin;
scrollbar-color: #333 transparent;
z-index: 1;
}
.realm-list-container::-webkit-scrollbar {
width: 4px;
}
.realm-list-container::-webkit-scrollbar-thumb {
background-color: #444;
border-radius: 2px;
}
/* Spirit Tablet Design (Realm Card) - Refined */
.realm-card {
position: relative;
/* Lighter Ink Background */
background: linear-gradient(135deg, #1a1a1c 0%, #2a2a2d 100%);
border: 1px solid rgba(207, 170, 112, 0.3);
border-radius: 4px;
/* Sharper corners for tablet feel */
padding: var(--spacing-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
}
/* Dynamic Theme Application via CSS Variables (set in JS) */
.realm-card {
--theme-color: var(--accent-gold);
/* Default */
}
/* Gold Streamer Effect */
.realm-card:not(.locked)::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 45%,
rgba(207, 170, 112, 0.12) 50%,
transparent 55%);
transform: rotate(30deg) translateY(100%);
animation: streamer-flow 6s infinite linear;
pointer-events: none;
z-index: 0;
}
@keyframes streamer-flow {
0% {
transform: rotate(30deg) translateY(0%);
}
100% {
transform: rotate(30deg) translateY(-100%);
/* Move upwards/diagonal */
}
}
/* Inner Frame */
/* Inner Frame */
.realm-card::after {
content: '';
position: absolute;
top: 3px;
left: 3px;
right: 3px;
bottom: 3px;
border: 1px solid rgba(255, 255, 255, 0.05);
pointer-events: none;
transition: all 0.4s;
z-index: 2;
}
/* Hover State */
/* Hover State */
.realm-card:not(.locked):hover {
transform: translateY(-5px);
border-color: var(--theme-color);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 15px rgba(207, 170, 112, 0.1);
z-index: 10;
}
.realm-card:not(.locked):hover::after {
border-color: var(--theme-color);
box-shadow: inset 0 0 10px rgba(207, 170, 112, 0.2);
}
.realm-card:not(.locked):hover::before {
background: linear-gradient(45deg,
transparent 40%,
rgba(207, 170, 112, 0.2) 50%,
transparent 60%);
animation-duration: 3s;
/* Speed up on hover */
}
/* Active State - Subtle Glow */
.realm-card.active {
border-color: var(--theme-color);
background: linear-gradient(135deg, #1c1c24 0%, #000 100%);
box-shadow: 0 0 25px rgba(207, 170, 112, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.8);
}
.realm-card.active::after {
border-color: var(--theme-color);
box-shadow: inset 0 0 15px rgba(207, 170, 112, 0.1);
}
/* Tablet Content */
.realm-icon {
font-size: 2.5rem;
margin-top: 15px;
margin-bottom: 8px;
filter: grayscale(0.8);
/* Muted by default */
transition: all 0.3s ease;
z-index: 1;
}
.realm-card:hover .realm-icon,
.realm-card.active .realm-icon {
filter: grayscale(0);
transform: scale(1.1);
text-shadow: 0 0 20px currentColor;
/* Uses color from JS inline style */
}
.realm-info {
text-align: center;
width: 100%;
margin-top: auto;
margin-bottom: 10px;
z-index: 1;
}
.realm-info h3 {
font-family: var(--font-display);
font-size: 1.1rem;
color: #666;
margin-bottom: 2px;
letter-spacing: 1px;
transition: color 0.3s;
}
.realm-card:hover .realm-info h3,
.realm-card.active .realm-info h3 {
color: var(--theme-color);
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.realm-env-preview {
font-size: 0.75rem;
color: #444;
display: block;
font-family: serif;
transition: color 0.3s;
}
.realm-card:hover .realm-env-preview,
.realm-card.active .realm-env-preview {
color: #888;
}
/* Locked State */
.realm-card.locked {
opacity: 0.82;
cursor: default;
border-color: #222;
}
.realm-card.locked::before {
content: '未解锁';
position: absolute;
top: 10px;
right: 10px;
font-family: var(--font-display);
font-size: 0.72rem;
color: #d8bc86;
background: rgba(0, 0, 0, 0.65);
border: 1px solid rgba(216, 188, 134, 0.45);
border-radius: 999px;
padding: 2px 8px;
letter-spacing: 1px;
z-index: 3;
pointer-events: none;
}
.realm-card.endless-card {
border-color: rgba(93, 217, 255, 0.55);
box-shadow: 0 0 24px rgba(24, 111, 150, 0.42), inset 0 0 20px rgba(7, 15, 28, 0.85);
}
.realm-card.endless-card::before {
background: linear-gradient(35deg,
transparent 42%,
rgba(84, 200, 255, 0.22) 50%,
transparent 58%);
}
.realm-card.endless-card .realm-env-preview {
color: rgba(174, 230, 255, 0.82);
}
/* Cloud Mirror Preview Panel - Refined & Compact */
.realm-preview-panel {
flex: 1.2;
min-height: 0;
background: rgba(10, 15, 20, 0.8);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: var(--spacing-md);
/* Reduced padding */
position: relative;
display: flex;
flex-direction: column;
backdrop-filter: blur(12px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
max-width: 400px;
/* Constrain width slightly more */
}
/* Mirror Shine Effect */
.realm-preview-panel::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.realm-preview-placeholder {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #555;
z-index: 1;
}
.badge-float {
animation: floatBadge 3s infinite ease-in-out;
}
@keyframes floatBadge {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.realm-preview-content {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow-y: auto;
padding-right: 5px;
padding-bottom: 4px;
gap: var(--spacing-sm);
/* Tighter gap */
z-index: 1;
position: relative;
}
.preview-header {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
/* Reduced padding */
border-bottom: 2px solid rgba(212, 175, 55, 0.3);
position: relative;
}
/* Header Ink Stroke */
.preview-header::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-gold), transparent);
}
.preview-icon {
font-size: 2.5rem;
/* Smaller icon */
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--accent-gold);
border-radius: 4px;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}
.preview-header h3 {
font-family: var(--font-display);
font-size: 1.6rem;
/* Smaller Font */
color: var(--accent-gold);
text-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
letter-spacing: 1px;
}
.preview-inner-container {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
/* Tighter spacing */
padding-right: 5px;
/* Space for scrollbar */
}
.preview-section {
padding: var(--spacing-sm);
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
border-left: 3px solid #555;
transition: border-color 0.3s;
}
.preview-section:hover {
border-left-color: var(--accent-gold);
background: rgba(255, 255, 255, 0.05);
}
.preview-section h4 {
font-size: 0.8rem;
color: #888;
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
text-transform: uppercase;
letter-spacing: 1px;
}
.section-icon {
color: var(--accent-cyan);
filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.3));
}
.preview-text {
font-size: 0.9rem;
/* Smaller text */
color: #ddd;
line-height: 1.4;
}
.preview-chapter-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 8px;
color: #f4e3ba;
}
.preview-stage-pill {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(129, 223, 255, 0.32);
background: rgba(22, 58, 81, 0.35);
color: #cceeff;
font-size: 0.72rem;
line-height: 1;
white-space: nowrap;
}
.preview-rule-line {
display: grid;
grid-template-columns: 42px 1fr;
gap: 8px;
margin-top: 6px;
color: rgba(232, 239, 255, 0.9);
}
.preview-rule-line .rule-label {
color: rgba(150, 201, 255, 0.9);
font-size: 0.74rem;
letter-spacing: 0.08em;
}
.preview-recommend-row {
display: grid;
grid-template-columns: 42px 1fr;
gap: 8px;
margin-bottom: 8px;
align-items: start;
}
.preview-recommend-row .recommend-label {
color: rgba(150, 201, 255, 0.9);
font-size: 0.74rem;
letter-spacing: 0.08em;
}
.preview-tag-strip {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.preview-tag {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 214, 138, 0.22);
background: rgba(67, 46, 20, 0.34);
color: rgba(255, 236, 204, 0.94);
font-size: 0.74rem;
line-height: 1.15;
}
.preview-tag.match {
border-color: rgba(121, 232, 184, 0.42);
background: rgba(18, 70, 47, 0.34);
color: rgba(218, 255, 236, 0.96);
}
.preview-tag.muted {
border-color: rgba(142, 168, 191, 0.24);
background: rgba(34, 44, 57, 0.32);
color: rgba(204, 218, 233, 0.86);
}
.preview-current-build {
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(223, 232, 247, 0.88);
font-size: 0.78rem;
line-height: 1.55;
}
.preview-endless-directives {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.preview-endless-directive-btn {
border: 1px solid rgba(118, 176, 220, 0.26);
border-radius: 999px;
background: rgba(20, 35, 56, 0.7);
color: rgba(220, 236, 255, 0.92);
font-size: 0.72rem;
line-height: 1;
padding: 6px 10px;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.preview-endless-directive-btn:hover {
transform: translateY(-1px);
border-color: rgba(255, 208, 141, 0.4);
background: rgba(62, 43, 21, 0.74);
}
.preview-endless-directive-btn.active {
border-color: rgba(255, 198, 122, 0.5);
background: linear-gradient(145deg, rgba(86, 57, 24, 0.78), rgba(54, 34, 18, 0.84));
color: rgba(255, 238, 210, 0.98);
}
.realm-preview-actions {
position: sticky;
bottom: 0;
margin-top: auto;
padding-top: 10px;
background:
linear-gradient(180deg, rgba(10, 15, 20, 0), rgba(10, 15, 20, 0.82) 28%, rgba(10, 15, 20, 0.96) 100%);
z-index: 2;
}
.realm-preview-actions .menu-btn.large {
width: 100%;
}
.realm-preview-actions .realm-cost-display {
text-align: center;
}
.preview-loot-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 5px;
}
.loot-icon {
width: 36px;
/* Smaller loot icons */
height: 36px;
background: #111;
border: 1px solid #333;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
position: relative;
transition: all 0.2s;
}
.loot-icon:hover {
transform: scale(1.1);
border-color: var(--accent-gold);
box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}
.preview-actions {
margin-top: auto;
padding-top: var(--spacing-sm);
}
#enter-realm-btn {
width: 100%;
padding: 12px;
/* Smaller button padding */
font-size: 1.2rem;
letter-spacing: 2px;
font-family: var(--font-display);
background: linear-gradient(90deg, #8B0000 0%, #a4161a 100%);
border: 1px solid #ff4d4d;
box-shadow: 0 0 20px rgba(139, 0, 0, 0.5);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
#enter-realm-btn:hover:not(:disabled) {
background: linear-gradient(90deg, #a4161a 0%, #c41e3a 100%);
box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
transform: translateY(-2px);
}
#enter-realm-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
background: #222;
border-color: #444;
box-shadow: none;
color: #666;
}
/* ===================================
Character Info Refactor (Ink & Gold)
=================================== */
.ink-scroll-container {
width: 100%;
height: calc(100% - 70px);
display: flex;
justify-content: center;
align-items: center;
padding: var(--spacing-lg);
overflow: hidden;
}
.ink-scroll-content {
width: 1000px;
max-width: 95%;
height: 100%;
display: grid;
grid-template-columns: 350px 1fr;
gap: 40px;
padding: 40px;
background: linear-gradient(to bottom, #1a1a1a, #0d0d0d);
border: 2px solid var(--accent-gold-dark);
box-shadow:
0 0 0 5px #000,
0 0 0 7px var(--accent-gold-dark),
0 0 50px rgba(0, 0, 0, 0.8),
inset 0 0 100px rgba(0, 0, 0, 0.9);
border-radius: 4px;
position: relative;
}
/* Corner Decorations */
.ink-scroll-content::before,
.ink-scroll-content::after {
content: '';
position: absolute;
width: 40px;
height: 40px;
border: 3px solid var(--accent-gold);
transition: all 0.3s ease;
}
.ink-scroll-content::before {
top: -5px;
left: -5px;
border-right: none;
border-bottom: none;
}
.ink-scroll-content::after {
bottom: -5px;
right: -5px;
border-left: none;
border-top: none;
}
/* Left Column: Identity */
.char-identity-col {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
border-right: 1px solid rgba(255, 215, 0, 0.1);
padding-right: 30px;
}
.char-name-vertical {
writing-mode: vertical-rl;
text-orientation: upright;
font-family: 'Ma Shan Zheng', cursive;
font-size: 3.5rem;
color: var(--accent-gold);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
margin-bottom: 20px;
letter-spacing: 10px;
position: absolute;
right: 0;
top: 50px;
height: 300px;
z-index: 2;
}
.char-avatar-ink-wrapper {
position: relative;
width: 280px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-right: 50px;
/* Space for name */
}
.ink-splash-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 350px;
height: 350px;
background: radial-gradient(circle, rgba(0, 0, 0, 0.8) 0%, transparent 70%);
border-radius: 50%;
filter: blur(20px);
z-index: 0;
}
.avatar-ink-inner {
width: 220px;
height: 220px;
border-radius: 50%;
background: linear-gradient(135deg, #2d1b4e 0%, #000 100%);
border: 3px solid var(--accent-gold-dark);
display: flex;
justify-content: center;
align-items: center;
font-family: var(--font-display);
font-size: 3rem;
color: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
position: relative;
z-index: 1;
overflow: hidden;
}
.avatar-ink-inner.pvp-skin-avatar {
box-shadow:
0 0 30px rgba(0, 0, 0, 0.8),
0 0 28px rgba(98, 196, 255, 0.24);
border-color: #8fcdf5;
}
.avatar-ink-inner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZmlsdGVyIGlsPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==');
opacity: 0.3;
}
.imprint-seal {
position: absolute;
bottom: 20px;
left: 20px;
width: 100px;
height: 100px;
border: 4px double #d32f2f;
color: #d32f2f;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.2rem;
font-weight: bold;
transform: rotate(-15deg);
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
box-shadow:
inset 0 0 20px rgba(211, 47, 47, 0.2),
0 5px 15px rgba(0, 0, 0, 0.5);
z-index: 3;
opacity: 0.9;
mix-blend-mode: color-dodge;
}
/* Right Column: Details */
.char-details-col {
display: flex;
flex-direction: column;
gap: 30px;
}
/* Spirit Tablets (Stats) */
.spirit-tablets-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 15px;
}
.spirit-tablet {
background: linear-gradient(to bottom, #1a1a1a, #000);
border: 1px solid #333;
border-top: 3px solid #555;
border-radius: 4px;
padding: 15px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
position: relative;
overflow: hidden;
transition: transform 0.3s ease;
}
.spirit-tablet:hover {
transform: translateY(-5px);
border-top-color: var(--accent-gold);
box-shadow: 0 5px 15px rgba(255, 215, 0, 0.1);
}
.spirit-tablet::before {
content: '';
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 2px;
}
.tablet-icon {
font-size: 1.8rem;
filter: drop-shadow(0 0 5px currentColor);
}
.hp .tablet-icon {
color: var(--accent-red);
}
.energy .tablet-icon {
color: var(--accent-blue);
}
.draw .tablet-icon {
color: var(--accent-purple);
}
.strength .tablet-icon {
color: var(--accent-gold);
}
.tablet-label {
font-size: 0.8rem;
color: #888;
font-family: 'Noto Sans SC', sans-serif;
}
.tablet-value {
font-size: 1.5rem;
font-weight: bold;
color: #eee;
font-family: var(--font-display);
}
/* Bio Scroll */
.bio-scroll-paper {
background: #e8dbc4;
color: #2c1810;
padding: 20px;
mask-image: url('data:image/svg+xml;utf8,');
-webkit-mask-image: url('data:image/svg+xml;utf8,');
position: relative;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3);
min-height: 120px;
border-radius: 2px;
}
.bio-scroll-paper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48ZmlsdGVyIGlsPSJub2lzZSI+PGZlVHVyYnVsZW5jZSB0eXBlPSJmcmFjdGFsTm9pc2UiIGJhc2VGcmVxdWVuY3k9IjAuNSIgbnVtT2N0YXZlcz0iMyIgc3RpdGNoVGlsZXM9InN0aXRjaCIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNub2lzZSkiIG9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==');
opacity: 0.5;
mix-blend-mode: multiply;
pointer-events: none;
}
.bio-content h4 {
font-family: var(--font-display);
color: #5d4037;
margin-bottom: 10px;
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 8px;
border-bottom: 1px solid rgba(93, 64, 55, 0.3);
padding-bottom: 5px;
}
.bio-content p {
font-family: 'Noto Sans SC', sans-serif;
line-height: 1.8;
font-weight: 500;
}
/* Fate Ring Hologram */
.fate-ring-info-panel {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(20, 20, 30, 0.4) 100%);
border: 1px solid rgba(255, 215, 0, 0.15);
border-left: 3px solid var(--accent-gold);
border-radius: 4px;
padding: 15px 25px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.fate-ring-info-panel::after {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 70%);
filter: blur(30px);
}
.ring-info-header {
display: flex;
flex-direction: column;
gap: 10px;
}
.ring-info-header h4 {
color: var(--accent-gold);
font-family: var(--font-display);
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 8px;
}
.ring-level-badge {
background: linear-gradient(90deg, #b8860b 0%, #daa520 100%);
color: #000;
padding: 4px 12px;
border-radius: 12px;
font-weight: bold;
font-size: 0.9rem;
display: inline-block;
width: fit-content;
}
.ring-visual-mini {
position: relative;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.ring-visual-mini .ring-core {
width: 20px;
height: 20px;
background: radial-gradient(circle, #fff 0%, var(--accent-gold) 60%, transparent 100%);
border-radius: 50%;
box-shadow:
0 0 10px var(--accent-gold),
0 0 30px var(--accent-gold);
animation: corePulse 3s infinite ease-in-out;
}
.ring-visual-mini .orbit-1,
.ring-visual-mini .orbit-2 {
display: none;
/* Hide unwanted circles */
}
@keyframes corePulse {
0%,
100% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
.ring-stats-text {
font-size: 1.1rem;
color: #ccc;
font-family: var(--font-display);
}
@media (max-width: 900px) {
.ink-scroll-content {
grid-template-columns: 1fr;
height: auto;
overflow-y: auto;
}
.char-identity-col {
border-right: none;
border-bottom: 1px solid rgba(255, 215, 0, 0.1);
padding-bottom: 30px;
padding-right: 0;
flex-direction: row;
justify-content: center;
}
.char-name-vertical {
writing-mode: horizontal-tb;
position: static;
height: auto;
margin-right: 20px;
margin-bottom: 0;
letter-spacing: 2px;
}
.char-avatar-ink-wrapper {
margin-right: 0;
margin-top: 0;
height: 300px;
width: 200px;
}
.avatar-ink-inner {
width: 180px;
height: 180px;
}
}
/* ===================================
Tooltips (Ink & Gold Style)
=================================== */
[data-tooltip] {
position: relative;
cursor: help;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: 110%;
left: 50%;
transform: translateX(-50%) translateY(10px);
background: #e6dac3;
/* Parchment color */
color: #2c1810;
/* Ink color */
padding: 8px 12px;
border-radius: 4px;
font-size: 0.9rem;
font-family: 'Noto Sans SC', sans-serif;
font-weight: 500;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
pointer-events: none;
box-shadow:
0 4px 10px rgba(0, 0, 0, 0.3),
0 0 0 1px #8d6e63;
z-index: 100;
min-width: 150px;
text-align: center;
border: 1px solid #5d4037;
}
[data-tooltip]::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%) translateY(10px);
border-width: 6px;
border-style: solid;
border-color: #5d4037 transparent transparent transparent;
opacity: 0;
visibility: hidden;
transition: all 0.2s ease;
z-index: 100;
}
[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* ===================================
Compendium - Law (Jade Slips) & Treasure (Shelf)
=================================== */
/* Layout Containers */
.compendium-layout {
display: grid;
grid-template-columns: 1fr 350px;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
height: calc(100% - 80px);
max-width: 1600px;
margin: 0 auto;
overflow: hidden;
}
.jade-slips-container {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.jade-slips-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: var(--spacing-md);
padding: var(--spacing-md);
overflow-y: auto;
/* Custom Scrollbar styled elsewhere */
}
/* Jade Slip Item */
.jade-slip {
position: relative;
width: 100%;
aspect-ratio: 1 / 2.2;
/* Vertical proportions */
background: linear-gradient(180deg, #1f2c28 0%, #0d1612 100%);
border: 1px solid #3c4a45;
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-normal);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
padding: 10px 5px;
}
.jade-slip::before {
content: '';
position: absolute;
top: 5px;
bottom: 5px;
left: 5px;
right: 5px;
border: 1px solid rgba(255, 255, 255, 0.05);
pointer-events: none;
}
.jade-slip:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
background: linear-gradient(180deg, #2a3d36 0%, #15221d 100%);
border-color: #5a756b;
}
.jade-slip.collected {
background: linear-gradient(180deg, #2d463b 0%, #0e2b20 100%);
border-color: #4ade80;
box-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
}
.jade-slip.collected:hover {
box-shadow: 0 0 20px rgba(74, 222, 128, 0.4);
}
.jade-slip.locked {
opacity: 0.5;
background: #0a0a0a;
border-color: #222;
}
/* Vertical Text for Jade Slips */
.jade-slip-name {
writing-mode: vertical-rl;
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--text-muted);
letter-spacing: 4px;
margin: 5px 0;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
}
.jade-slip.collected .jade-slip-name {
color: #e0e7ff;
/* Whiter, slightly jade tint */
text-shadow: 0 0 5px rgba(74, 222, 128, 0.6);
}
.jade-slip-icon {
font-size: 1.5rem;
margin-bottom: 5px;
opacity: 0.3;
}
.jade-slip.collected .jade-slip-icon {
opacity: 1;
filter: drop-shadow(0 0 5px currentColor);
}
/* Resonance Manual */
.resonance-manual-container {
background: rgba(0, 0, 0, 0.2);
border-left: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
flex-direction: column;
padding-left: var(--spacing-lg);
}
.section-title-ink {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--accent-gold);
border-bottom: 2px solid var(--accent-gold);
padding-bottom: 5px;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 10px;
}
.resonance-scroll-content {
flex: 1;
overflow-y: auto;
padding-right: 5px;
}
.resonance-item {
background: rgba(10, 10, 15, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 15px;
padding: 15px;
border-radius: var(--radius-md);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.resonance-item.active {
background: linear-gradient(135deg, rgba(80, 60, 20, 0.3) 0%, rgba(30, 30, 40, 0.6) 100%);
border-color: var(--accent-gold);
}
.resonance-title {
font-size: 1.1rem;
color: #ccc;
margin-bottom: 8px;
display: flex;
justify-content: space-between;
}
.resonance-item.active .resonance-title {
color: var(--accent-gold-bright);
font-weight: bold;
}
.resonance-laws {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.res-law-req {
font-size: 0.8rem;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.3);
border-radius: 4px;
border: 1px solid transparent;
}
.resonance-item.active .res-law-req {
border-color: rgba(207, 170, 112, 0.3);
color: var(--accent-gold-bright) !important;
}
.resonance-effect {
font-size: 0.9rem;
color: #aaa;
margin-top: 5px;
padding-top: 5px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.resonance-item.active .resonance-effect {
color: #fff;
text-shadow: 0 0 5px rgba(207, 170, 112, 0.3);
}
/* Treasure Shelf (Curator Layout) */
.curator-shelf-layout {
display: flex;
flex-direction: column;
padding: var(--spacing-lg);
height: calc(100% - 70px);
overflow: hidden;
}
.shelf-stats-header {
display: flex;
gap: 40px;
justify-content: center;
margin-bottom: 20px;
font-family: var(--font-display);
}
.shelf-stat {
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.4);
padding: 10px 25px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.shelf-stat span:first-child {
font-size: 0.9rem;
color: #888;
margin-bottom: 5px;
}
.shelf-stat .stat-val {
font-size: 1.5rem;
color: #eee;
}
.shelf-stat .stat-val.gold {
color: var(--accent-gold);
}
.treasures-shelf-container {
flex: 1;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
grid-auto-rows: 100px;
gap: 15px;
padding: 20px;
background: #111;
border: 6px solid #3e2723;
/* Dark Wood Frame */
border-radius: 4px;
box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 100px 100%;
/* Shelf vertical dividers mimic */
}
/* Shelf Slot Item */
.shelf-slot {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.3);
border-bottom: 4px solid #281812;
/* Wood plank */
transition: all 0.2s;
cursor: pointer;
}
.shelf-slot::after {
/* Spotlight effect */
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.2s;
}
.shelf-slot:hover::after {
opacity: 1;
}
.shelf-slot.unlocked .shelf-treasure-icon {
filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
transform: scale(1);
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.shelf-slot:hover .shelf-treasure-icon {
transform: scale(1.15) translateY(-5px);
}
.shelf-treasure-icon {
font-size: 2.5rem;
z-index: 2;
}
.shelf-slot.locked .shelf-treasure-icon {
opacity: 0.2;
filter: grayscale(1) blur(2px);
transform: scale(0.8);
}
.shelf-slot .rarity-indicator {
position: absolute;
bottom: 5px;
right: 5px;
width: 8px;
height: 8px;
border-radius: 50%;
box-shadow: 0 0 5px currentColor;
}
.rarity-common {
color: #ccc;
}
.rarity-rare {
color: #4cc9f0;
box-shadow: 0 0 8px #4cc9f0;
}
.rarity-epic {
color: #9d4edd;
box-shadow: 0 0 10px #9d4edd;
}
.rarity-legendary {
color: #fceea7;
box-shadow: 0 0 12px #fceea7;
}
/* Tooltips */
/* Using modal for now, or native title, but rich CSS tooltips could be added here if game.js supports them */
/* =========================================
Talisman Compendium (New) - 法宝图鉴重构
========================================= */
.treasure-compendium-layout {
display: flex;
flex-direction: column;
height: calc(100% - 60px);
/* Adjust for header */
padding: 0 20px 20px 20px;
gap: 20px;
}
/* Stats Header - Ink Scroll Style */
.compendium-stats-wrapper {
flex: 0 0 auto;
display: flex;
justify-content: center;
}
.compendium-stats {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 42%), linear-gradient(to right, #1a1a1a, #2a2a2a, #1a1a1a);
border: 1px solid var(--border-color);
border-top: 2px solid var(--accent-gold);
border-bottom: 2px solid var(--accent-gold);
padding: 10px 40px;
border-radius: 4px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
gap: 15px;
font-family: 'Ma Shan Zheng', cursive;
position: relative;
}
.compendium-stats::before,
.compendium-stats::after {
content: '';
position: absolute;
top: 50%;
width: 20px;
height: 120%;
background: #111;
border: 1px solid var(--accent-gold);
transform: translateY(-50%);
border-radius: 4px;
}
.compendium-stats::before {
left: -10px;
}
.compendium-stats::after {
right: -10px;
}
.stat-icon {
font-size: 1.5rem;
}
.stat-text {
color: #ddd;
font-size: 1.2rem;
}
/* Grid Container */
.compendium-grid-container {
flex: 1;
overflow-y: auto;
padding-right: 10px;
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
}
.compendium-grid-container::-webkit-scrollbar {
width: 6px;
}
.compendium-grid-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.1);
}
.compendium-grid-container::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.compendium-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
gap: 15px;
padding-bottom: 40px;
}
/* Compendium Item - Identity Tablet Style */
.compendium-item {
position: relative;
aspect-ratio: 0.75;
/* Portrait aspect ratio */
background: #1a1a1a;
border: 1px solid #444;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.compendium-item:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 215, 0, 0.1);
z-index: 10;
}
.compendium-item-inner {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 100%);
}
.compendium-icon {
font-size: 3rem;
margin-bottom: 10px;
filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.2));
transition: transform 0.3s ease;
}
.compendium-item:hover .compendium-icon {
transform: scale(1.1);
}
.compendium-name {
font-size: 0.9rem;
color: #ccc;
text-align: center;
line-height: 1.2;
font-family: 'Noto Sans SC', sans-serif;
font-weight: 500;
}
.compendium-item-sub {
margin-top: 10px;
width: 100%;
display: grid;
gap: 6px;
justify-items: center;
}
.compendium-mini-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 9px;
border-radius: 999px;
background: rgba(18, 31, 61, 0.84);
border: 1px solid rgba(122, 184, 255, 0.24);
color: rgba(228, 239, 255, 0.92);
font-size: 0.68rem;
letter-spacing: 0.06em;
}
.compendium-mini-badge.core {
border-color: rgba(255, 214, 110, 0.4);
background: rgba(64, 44, 10, 0.84);
color: rgba(255, 236, 190, 0.96);
}
.compendium-mini-badge.form {
border-color: rgba(134, 245, 219, 0.34);
background: rgba(12, 49, 45, 0.82);
color: rgba(216, 255, 246, 0.94);
}
.compendium-mini-text {
font-size: 0.72rem;
text-align: center;
color: rgba(196, 212, 237, 0.8);
line-height: 1.35;
}
/* Rarity Styles - Swapped Legendary/Mythic Colors */
.compendium-item.rarity-common {
border-color: #6da5bb;
box-shadow: inset 0 0 10px rgba(109, 165, 187, 0.1);
}
.compendium-item.rarity-common .compendium-name {
color: #a0c0cf;
text-shadow: 0 0 2px rgba(109, 165, 187, 0.5);
}
.compendium-item.rarity-rare {
border-color: #b19cd9;
box-shadow: inset 0 0 10px rgba(177, 156, 217, 0.1);
}
.compendium-item.rarity-rare .compendium-name {
color: #d1c4e9;
text-shadow: 0 0 2px rgba(177, 156, 217, 0.5);
}
/* Legendary is now RED (formerly Mythic style) */
.compendium-item.rarity-legendary {
border-color: #ff4d4d;
box-shadow: inset 0 0 15px rgba(255, 77, 77, 0.15);
background: linear-gradient(135deg, #1a0505 0%, #1a1a1a 100%);
}
.compendium-item.rarity-legendary .compendium-name {
color: #ff6b6b;
text-shadow: 0 0 3px rgba(255, 77, 77, 0.6);
}
/* Mythic is now GOLD (formerly Legendary style) */
.compendium-item.rarity-mythic {
border-color: #ffd700;
box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.2);
animation: legendary-pulse 3s infinite alternate;
}
.compendium-item.rarity-mythic .compendium-name {
color: #ffd700;
text-shadow: 0 0 4px rgba(255, 215, 0, 0.7);
}
/* Locked State - Now darker but visible */
.compendium-item.locked {
filter: brightness(0.6) grayscale(0.8);
border-color: #444;
}
.compendium-item.locked:hover {
filter: brightness(0.8) grayscale(0.5);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.compendium-icon.locked {
/* filter: grayscale(1) opacity(0.3) blur(2px); */
/* Removed concealment */
opacity: 0.5;
}
.compendium-name.locked {
color: #666;
}
.item-seal-overlay {
display: none;
/* Hide seal overlay to show icon, or make subtle? User said "can be black", didn't explicitly forbid seal but wants to see content. */
/* Let's keep it but semi-transparent if needed, or just remove for clarity as requested */
}
@keyframes legendary-pulse {
0% {
box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.1);
}
100% {
box-shadow: inset 0 0 20px rgba(255, 215, 0, 0.3);
}
}
/* =========================================
Treasure Detail Modal (New)
========================================= */
.treasure-detail-view {
padding: 0;
width: 800px;
max-width: 90vw;
height: 500px;
max-height: 80vh;
display: flex;
overflow: hidden;
background: #1a1a1a;
border: 1px solid var(--accent-gold);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}
.treasure-detail-layout {
display: flex;
width: 100%;
height: 100%;
}
/* Visual Column (Left) */
.treasure-visual-col {
flex: 0 0 40%;
background: linear-gradient(135deg, #111 0%, #222 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border-right: 1px solid rgba(255, 215, 0, 0.2);
}
.treasure-visual-bg {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Background Particles */
.visual-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 60%),
linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 55%);
animation: particlesDrift 20s linear infinite;
opacity: 0.5;
}
@keyframes particlesDrift {
0% {
background-position: 0 0;
}
100% {
background-position: 100px 100px;
}
}
.treasure-large-icon {
font-size: 8rem;
z-index: 2;
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
animation: floatIcon 4s ease-in-out infinite;
}
@keyframes floatIcon {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-10px) scale(1.05);
}
}
/* Info Column (Right) */
.treasure-info-col {
flex: 1;
display: flex;
flex-direction: column;
padding: 30px;
background:
linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.6)),
linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 58%);
background-size: cover;
}
.detail-header {
border-bottom: 1px solid rgba(255, 215, 0, 0.3);
padding-bottom: 15px;
margin-bottom: 20px;
}
#detail-name {
font-family: 'Ma Shan Zheng', cursive;
font-size: 2.2rem;
color: var(--accent-gold);
margin-bottom: 5px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.detail-sub {
font-family: 'Noto Sans SC', sans-serif;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--text-secondary);
}
/* Dynamic Rarity Colors for Header */
.detail-header.rarity-common #detail-name {
color: #a0c0cf;
}
.detail-header.rarity-common .detail-sub {
color: #6da5bb;
}
.detail-header.rarity-rare #detail-name {
color: #d1c4e9;
}
.detail-header.rarity-rare .detail-sub {
color: #b19cd9;
}
.detail-header.rarity-legendary #detail-name {
color: #ffd700;
}
.detail-header.rarity-legendary .detail-sub {
color: #ffd700;
}
.detail-header.rarity-mythic #detail-name {
color: #ff6b6b;
}
.detail-header.rarity-mythic .detail-sub {
color: #ff4d4d;
}
.detail-body {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
overflow-y: auto;
}
.detail-desc-box {
font-size: 1.1rem;
line-height: 1.6;
color: #eee;
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-left: 3px solid var(--accent-gold);
border-radius: 4px;
}
.detail-lore {
margin-top: auto;
font-size: 0.95rem;
color: #999;
font-style: italic;
font-family: 'KaiTi', serif;
padding: 10px 0;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.detail-source {
font-size: 0.9rem;
color: #bbb;
background: rgba(255, 255, 255, 0.05);
padding: 10px;
border-radius: 4px;
}
.source-label {
color: var(--accent-gold);
margin-right: 5px;
font-weight: bold;
}
/* Mobile Responsiveness for Modal */
@media screen and (max-width: 768px) {
.treasure-detail-view {
height: auto;
flex-direction: column;
overflow-y: auto;
}
.treasure-detail-layout {
flex-direction: column;
}
.treasure-visual-col {
height: 200px;
flex: 0 0 auto;
border-right: none;
border-bottom: 1px solid rgba(255, 215, 0, 0.2);
}
.treasure-large-icon {
font-size: 5rem;
}
.treasure-info-col {
padding: 20px;
}
}
/* Detailed Header Colors Update for new mapping */
.detail-header.rarity-legendary #detail-name {
color: #ff6b6b;
}
/* Legendary is now Red-ish */
.detail-header.rarity-legendary .detail-sub {
color: #ff4d4d;
}
.detail-header.rarity-mythic #detail-name {
color: #ffd700;
}
/* Mythic is now Gold */
.detail-header.rarity-mythic .detail-sub {
color: #ffd700;
}
/* ===================================
Achievements Hall (Refactored)
=================================== */
.achievements-container {
height: calc(100% - 70px);
overflow-y: auto;
padding: var(--spacing-xl);
padding-bottom: 80px;
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) var(--bg-dark);
}
.achievements-container::-webkit-scrollbar {
width: 6px;
}
.achievements-container::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.achievements-container::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
/* Progress Section */
.achievements-header-stats {
display: flex;
justify-content: center;
margin-bottom: var(--spacing-xl);
}
.achievement-progress-card {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 215, 0, 0.2);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: var(--radius-lg);
display: flex;
align-items: center;
gap: var(--spacing-lg);
backdrop-filter: blur(5px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.progress-label {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--accent-gold);
}
.progress-track {
width: 300px;
height: 12px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
overflow: hidden;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent-gold) 0%, #fceea7 100%);
box-shadow: 0 0 10px var(--accent-gold);
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-text {
font-family: var(--font-body);
font-weight: 700;
color: var(--text-primary);
min-width: 60px;
text-align: right;
}
/* Category Sections */
.achievement-category {
margin-bottom: 40px;
}
.category-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
position: relative;
padding-bottom: var(--spacing-sm);
}
.category-header h3 {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--text-primary);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
position: relative;
z-index: 2;
}
.category-header .ink-decoration {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent-gold) 0%, transparent 100%);
opacity: 0.5;
}
/* Achievements Grid */
.achievement-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-md);
}
/* Achievement Card */
.achievement-card {
position: relative;
display: flex;
align-items: center;
padding: var(--spacing-md);
background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 14, 20, 0.95) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
transition: all var(--transition-normal);
overflow: hidden;
}
.achievement-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 100%;
background: rgba(255, 255, 255, 0.1);
transition: all var(--transition-normal);
}
/* Locked State */
.achievement-card.locked {
opacity: 0.6;
filter: grayscale(100%) brightness(0.8);
}
.achievement-card.locked .achievement-icon-wrapper {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: none;
}
/* Unlocked State */
.achievement-card.unlocked {
border-color: rgba(207, 170, 112, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.achievement-card.unlocked::before {
background: var(--accent-gold);
box-shadow: 0 0 10px var(--accent-gold);
}
.achievement-card.unlocked:hover {
transform: translateY(-2px);
border-color: var(--accent-gold);
box-shadow: 0 8px 25px rgba(207, 170, 112, 0.15);
}
.achievement-card.unlocked:hover .achievement-icon-wrapper {
transform: scale(1.1) rotate(5deg);
}
/* Icon */
.achievement-icon-wrapper {
width: 56px;
height: 56px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle, rgba(50, 40, 20, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
border: 1px solid rgba(207, 170, 112, 0.3);
border-radius: 50%;
margin-right: var(--spacing-md);
font-size: 1.8rem;
flex-shrink: 0;
transition: transform var(--transition-normal);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}
.achievement-card.unlocked .achievement-icon-wrapper {
text-shadow: 0 0 10px var(--accent-gold);
border-color: var(--accent-gold);
}
/* Content */
.achievement-content {
flex: 1;
min-width: 0;
/* Prevent flex overflow */
}
.achievement-title {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--text-muted);
margin-bottom: 4px;
letter-spacing: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.achievement-card.unlocked .achievement-title {
color: var(--accent-gold);
}
.achievement-desc {
font-size: 0.85rem;
color: var(--text-secondary);
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Reward Tag */
.achievement-reward-tag {
margin-top: 6px;
font-size: 0.75rem;
color: var(--accent-purple);
display: flex;
align-items: center;
gap: 4px;
}
.achievement-reward-tag::before {
content: '🎁';
font-size: 0.8rem;
}
/* Status Icon (Checkmark) */
.achievement-status-icon {
position: absolute;
top: 8px;
right: 8px;
font-size: 1rem;
color: var(--accent-gold);
opacity: 0;
transform: scale(0);
transition: all var(--transition-normal);
}
.achievement-card.unlocked .achievement-status-icon {
opacity: 1;
transform: scale(1);
}
/* ===================================
Achievement Actions
=================================== */
/* Claim Button */
.claim-btn {
margin-top: 10px;
padding: 6px 16px;
background: linear-gradient(135deg, var(--accent-gold) 0%, #fceea7 100%);
border: 1px solid var(--accent-gold);
border-radius: 20px;
color: #1a1a1a;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
box-shadow: 0 4px 10px rgba(207, 170, 112, 0.4);
transition: all var(--transition-normal);
}
.claim-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(207, 170, 112, 0.6);
filter: brightness(1.1);
}
.claim-btn:active {
transform: translateY(0);
}
/* Claimed Badge */
.claimed-badge {
margin-top: 10px;
display: inline-block;
padding: 4px 12px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
color: var(--text-muted);
font-size: 0.8rem;
user-select: none;
}
.achievement-card.claimed {
border-color: rgba(207, 170, 112, 0.5);
/* Dim gold for claimed */
background: linear-gradient(135deg, rgba(20, 20, 30, 0.95) 0%, rgba(10, 14, 20, 0.98) 100%);
}
.achievement-card.claimed::before {
opacity: 0.5;
}
/* Pulse Animation for Claim Button */
@keyframes btn-pulse {
0% {
box-shadow: 0 0 0 0 rgba(207, 170, 112, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(207, 170, 112, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(207, 170, 112, 0);
}
}
.claim-btn.pulse {
animation: btn-pulse 2s infinite;
}
/* ===================================
Game Introduction & Help Modal (Refactored)
=================================== */
/* ===================================
Game Introduction & Help Modal (Refactored)
=================================== */
.settings-view {
width: min(920px, 95vw) !important;
max-width: 95vw;
height: min(82vh, 860px) !important;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 20px 24px 18px;
}
.settings-options {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.game-intro-container {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
overflow: hidden;
gap: 12px;
padding-bottom: 8px;
}
.intro-header {
text-align: center;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 4px 8px 12px;
flex-shrink: 0;
}
.intro-header h2 {
color: var(--accent-gold);
font-family: var(--font-display);
font-size: clamp(1.85rem, 3vw, 2.3rem);
margin-bottom: var(--spacing-xs);
}
.intro-header .subtitle {
color: var(--text-muted);
font-size: 0.92rem;
letter-spacing: 1px;
font-family: var(--font-body);
}
.intro-tabs {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 0;
border-bottom: 1px solid rgba(207, 170, 112, 0.2);
padding-bottom: 0;
flex-shrink: 0;
}
.intro-tab-btn {
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 1.02rem;
padding: 12px 0;
width: 110px;
text-align: center;
cursor: pointer;
font-family: var(--font-display);
position: relative;
transition: all var(--transition-fast);
}
.intro-tab-btn:hover {
color: var(--accent-gold-bright);
background: rgba(255, 255, 255, 0.05);
}
.intro-tab-btn.active {
color: var(--accent-gold);
font-weight: bold;
}
.intro-tab-btn.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 3px;
background: var(--accent-gold);
box-shadow: 0 -2px 10px rgba(255, 215, 0, 0.5);
}
.intro-content-area {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 8px 10px 0 2px;
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
mask-image: linear-gradient(180deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
}
.intro-content-area::-webkit-scrollbar {
width: 6px;
}
.intro-content-area::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.intro-content-area::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.intro-tab-panel {
display: none;
opacity: 1;
transform: translateY(0);
animation: introPanelIn 0.22s ease;
}
.intro-tab-panel.active {
display: block;
opacity: 1;
}
.intro-section {
margin-bottom: 16px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(120, 181, 255, 0.14);
background:
linear-gradient(180deg, rgba(14, 20, 42, 0.82), rgba(8, 12, 28, 0.9)),
radial-gradient(circle at top left, rgba(64, 112, 188, 0.12), transparent 52%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.intro-section h3 {
color: #67d8ff;
font-size: 1.24rem;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.intro-section h3::before {
content: '◆';
color: var(--accent-gold);
font-size: 0.8rem;
}
.intro-text {
color: rgba(229, 236, 249, 0.9);
line-height: 1.8;
font-size: 1rem;
margin-bottom: 12px;
}
.intro-list {
list-style: none;
padding-left: 0;
}
.intro-list li {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
line-height: 1.68;
color: rgba(222, 231, 247, 0.88);
}
.intro-list li::before {
content: '•';
color: var(--accent-purple);
position: absolute;
left: 0;
font-weight: bold;
}
.intro-list strong {
color: #f8f3df;
}
.intro-section .char-highlight {
margin-bottom: 0;
border-radius: 14px;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
}
@keyframes introPanelIn {
from {
transform: translateY(4px);
}
to {
transform: translateY(0);
}
}
@media (max-width: 768px) {
.settings-view {
width: calc(100vw - 20px) !important;
height: min(88vh, 900px) !important;
padding: 16px 14px 14px;
}
.game-intro-container {
gap: 10px;
}
.intro-header {
padding: 2px 4px 10px;
}
.intro-header h2 {
font-size: 1.72rem;
}
.intro-header .subtitle {
font-size: 0.84rem;
}
.intro-tabs {
gap: 4px;
}
.intro-tab-btn {
width: auto;
min-width: 0;
flex: 1;
font-size: 0.92rem;
padding: 10px 0;
}
.intro-content-area {
padding-right: 4px;
}
.intro-section {
padding: 12px 12px 13px;
border-radius: 16px;
}
.intro-section h3 {
font-size: 1.08rem;
margin-bottom: 10px;
}
.intro-text,
.intro-list li {
font-size: 0.95rem;
line-height: 1.7;
}
}
/* Specific Element Styling */
.element-cycle-container {
display: flex;
justify-content: center;
margin: 20px 0;
padding: 20px;
background: rgba(0, 0, 0, 0.2);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.element-cycle-text {
font-family: var(--font-display);
font-size: 1.2rem;
color: var(--accent-gold);
letter-spacing: 2px;
}
.rarity-legend {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.rarity-tag {
padding: 4px 10px;
border-radius: 4px;
font-size: 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.3);
}
.rarity-tag.common {
color: #9e9e9e;
border-color: #9e9e9e;
}
.rarity-tag.rare {
color: #4fc3f7;
border-color: #4fc3f7;
}
.rarity-tag.epic {
color: #e040fb;
border-color: #e040fb;
}
.rarity-tag.legendary {
color: #ffab00;
border-color: #ffab00;
box-shadow: 0 0 5px rgba(255, 171, 0, 0.3);
}
/* Character Highlight */
.char-highlight {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
border-left: 3px solid var(--accent-gold);
padding: 15px;
margin-bottom: 15px;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.char-highlight.wuyu {
border-color: var(--accent-gold);
}
.char-highlight.yanhan {
border-color: var(--accent-cyan);
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================================
3D Fate Ring System (New)
=================================== */
/* Container */
.ring-scene-container {
width: 100%;
height: 100%;
position: relative;
background: radial-gradient(circle at center, #1b263b 0%, #000 100%);
overflow: hidden;
perspective: 1200px;
}
.modal-close-floating {
position: absolute;
top: 30px;
right: 30px;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid var(--accent-gold);
color: var(--accent-gold);
font-size: 24px;
border-radius: 50%;
cursor: pointer;
z-index: 100;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.modal-close-floating:hover {
background: var(--accent-gold);
color: #000;
transform: rotate(90deg);
}
/* 3D Scene Area - Refactored to Planar Orrery */
.ring-scene {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
perspective: 1200px;
/* Reduced perspective complexity */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
pointer-events: none;
/* Container passes clicks */
}
/* The Rotating System */
.ring-system {
position: relative;
width: 500px;
height: 500px;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
/* Flattened view as per user request */
transition: transform 0.5s ease-out;
pointer-events: auto;
/* System catches clicks */
}
/* Background/Decorative Rings */
.fate-ring-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(255, 215, 0, 0.1);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.05);
pointer-events: none;
}
/* Ring Styling Variations */
.ring-layer-core {
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
animation: pulse-core 4s infinite ease-in-out;
}
.ring-layer-inner {
width: 240px;
height: 240px;
border-color: rgba(255, 215, 0, 0.3);
animation: rotate-3d-slow 60s linear infinite;
}
.ring-layer-middle {
width: 400px;
height: 400px;
border-color: rgba(157, 78, 221, 0.3);
border-style: dashed;
animation: rotate-3d-reverse 80s linear infinite;
}
.ring-layer-outer {
width: 560px;
height: 560px;
border: 1px solid rgba(255, 255, 255, 0.1);
animation: rotate-3d-slow 120s linear infinite;
}
/* Runes on rings */
.ring-rune {
position: absolute;
top: 50%;
left: 50%;
color: rgba(255, 255, 255, 0.6);
font-family: var(--font-display);
font-size: 1.2rem;
transform-origin: 0 0;
/* Important for radial positioning */
}
/* Slots in 3D Space */
.ring-slot-3d {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.8);
border: 2px solid var(--accent-gold);
border-radius: 50%;
transform-style: preserve-3d;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
/* Improve alignment: the translate x/y will be applied inline,
but we need to offset by -50% to center exactly on the point */
margin-left: -30px;
margin-top: -30px;
}
.ring-slot-3d:hover {
border-color: #fff;
box-shadow: 0 0 30px var(--accent-gold);
/* Scale up but maintain the base translation (applied inline via JS) */
/* We can't use transform scale here easily without overwriting inline styles.
Instead, we'll scale inner content or use a wrapper.
Let's use a pseudo element highlight or simply border change for stability.
Or use !important for scale if we are careful. */
z-index: 100;
}
.ring-slot-3d.active {
border-color: var(--accent-cyan);
box-shadow: 0 0 40px var(--accent-cyan);
animation: pulse-slot 1.5s infinite;
}
@keyframes pulse-slot {
0% {
box-shadow: 0 0 20px var(--accent-cyan);
}
50% {
box-shadow: 0 0 40px var(--accent-cyan), inset 0 0 20px var(--accent-cyan);
}
100% {
box-shadow: 0 0 20px var(--accent-cyan);
}
}
.ring-slot-3d.locked {
border-color: #444;
background: #111;
cursor: not-allowed;
opacity: 0.8;
}
.slot-inner-icon {
font-size: 24px;
color: #fff;
pointer-events: none;
}
/* UI Overlay */
.ring-ui-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Let clicks pass through to 3D scene */
display: grid;
grid-template-columns: 350px 1fr 350px;
grid-template-rows: 1fr 80px;
}
.ring-ui-panel {
background: linear-gradient(90deg, rgba(10, 14, 20, 0.95) 0%, rgba(10, 14, 20, 0.8) 100%);
pointer-events: auto;
padding: 0;
/* Clear padding for custom layout */
backdrop-filter: blur(10px);
border-right: 1px solid rgba(207, 170, 112, 0.2);
display: flex;
flex-direction: column;
transform: translateX(-100%);
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 10px 0 30px rgba(0, 0, 0, 0.5);
}
/* Right Panel - Law Treasury Redesign */
.ring-ui-panel.right {
background: linear-gradient(-90deg, rgba(10, 14, 20, 0.98) 0%, rgba(10, 14, 20, 0.9) 100%);
/* Make opaque for readability */
border-left: 1px solid rgba(207, 170, 112, 0.2);
border-right: none;
transform: translateX(100%);
grid-column: 3;
display: flex;
flex-direction: column;
height: 100vh;
/* Ensure full height */
}
.right-panel-header {
flex: 0 0 auto;
padding: 20px;
border-bottom: 2px solid rgba(207, 170, 112, 0.3);
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
.right-panel-header h3 {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--accent-gold);
letter-spacing: 2px;
margin: 0;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.right-panel-content {
flex: 1;
overflow-y: auto;
padding: 15px;
display: flex;
flex-direction: column;
gap: 20px;
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
}
.right-panel-content::-webkit-scrollbar {
width: 5px;
}
.right-panel-content::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.right-panel-content::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
/* Right Panel - Tabbed Interface */
.panel-tabs {
display: flex;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tab {
flex: 1;
text-align: center;
padding: 15px;
cursor: pointer;
font-family: var(--font-display);
font-size: 1.2rem;
color: #888;
transition: all 0.2s;
border-bottom: 2px solid transparent;
}
.tab:hover {
color: #ccc;
background: rgba(255, 255, 255, 0.05);
}
.tab.active {
color: var(--accent-gold);
border-bottom-color: var(--accent-gold);
background: linear-gradient(to top, rgba(255, 215, 0, 0.1), transparent);
text-shadow: 0 0 8px rgba(207, 170, 112, 0.5);
}
.panel-content-area {
flex: 1;
overflow-y: auto;
padding: 15px;
position: relative;
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
}
.panel-content-area::-webkit-scrollbar {
width: 5px;
}
.panel-content-area::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.panel-content-area::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.tab-content {
display: none;
animation: fadeIn 0.3s ease;
}
.tab-content.active {
display: block;
}
/* Polish: Left Panel XP Bar "MAX" */
.exp-bar-container {
margin-top: 10px;
background: rgba(0, 0, 0, 0.5);
height: 10px;
border-radius: 5px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.exp-bar-fill {
width: 0%;
background: linear-gradient(90deg, var(--accent-gold), var(--accent-purple));
height: 100%;
transition: width 0.5s;
}
.exp-bar-fill.max {
width: 100% !important;
background: linear-gradient(90deg, #ff0055, #ffcc00);
box-shadow: 0 0 10px #ffcc00;
}
.exp-text {
font-size: 0.8rem;
color: #aaa;
display: flex;
justify-content: space-between;
margin-top: 4px;
}
.exp-text .value {
color: var(--accent-gold);
font-weight: bold;
}
.exp-text .value.max {
color: #ffcc00;
text-shadow: 0 0 5px #ffcc00;
}
/* Resonance Section (Top) */
.resonance-section {
flex: 0 0 auto;
}
.section-label {
font-size: 0.9rem;
color: var(--text-muted);
border-left: 3px solid var(--accent-gold);
padding-left: 10px;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.resonance-card {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(0, 0, 0, 0.4) 100%);
border: 1px solid var(--accent-gold);
border-radius: 4px;
padding: 12px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.resonance-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--accent-gold);
}
.resonance-card.active {
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(0, 0, 0, 0.6) 100%);
}
.resonance-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 5px;
}
.resonance-name {
color: var(--accent-gold);
font-weight: bold;
font-family: var(--font-display);
font-size: 1.1rem;
}
.resonance-bar {
height: 4px;
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
overflow: hidden;
margin-top: 8px;
}
.resonance-progress {
height: 100%;
background: var(--accent-gold);
width: 0%;
transition: width 0.3s ease;
}
/* Law Library Grid -> List Transformation */
.library-list-container {
display: flex;
flex-direction: column;
gap: 10px;
}
.law-item-row {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 10px;
cursor: pointer;
transition: all 0.2s ease;
gap: 15px;
}
.law-item-row:hover {
background: rgba(255, 215, 0, 0.1);
border-color: var(--accent-gold);
transform: translateX(-5px);
}
.law-item-row.equipped {
border-color: var(--accent-green);
background: rgba(82, 183, 136, 0.1);
}
.law-icon-box {
width: 45px;
height: 45px;
background: #000;
border: 1px solid #444;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.law-item-row.equipped .law-icon-box {
border-color: var(--accent-green);
box-shadow: 0 0 10px rgba(82, 183, 136, 0.3);
}
.law-info {
flex: 1;
}
.law-name {
color: #eee;
font-weight: bold;
font-size: 1rem;
margin-bottom: 3px;
font-family: var(--font-body);
}
.law-desc-mini {
color: #999;
font-size: 0.8rem;
line-height: 1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.law-status-icon {
font-size: 1.2rem;
opacity: 0;
transition: opacity 0.2s;
}
.law-item-row.equipped .law-status-icon {
opacity: 1;
}
/* Active state for animation */
#ring-modal.active .ring-ui-panel {
transform: translateX(0);
}
.panel-header h2 {
font-family: var(--font-display);
font-size: 2.5rem;
color: var(--accent-gold);
margin-bottom: 5px;
}
.ring-level-badge {
display: inline-block;
padding: 4px 12px;
background: var(--accent-purple);
color: #fff;
border-radius: 12px;
font-size: 0.9rem;
font-weight: bold;
box-shadow: 0 2px 10px rgba(157, 78, 221, 0.4);
}
/* Valid Stats & Library Styles */
.stats-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.stat-row-3d {
display: flex;
justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.law-library-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
gap: 10px;
overflow-y: auto;
max-height: 400px;
padding-right: 5px;
}
.library-card-item {
width: 60px;
height: 80px;
background: #222;
border: 1px solid #444;
border-radius: 6px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.2s;
}
.library-card-item:hover {
border-color: var(--accent-gold);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
.ring-ui-footer {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.instruction-text {
background: rgba(0, 0, 0, 0.6);
padding: 10px 30px;
border-radius: 20px;
color: var(--text-secondary);
border: 1px solid rgba(255, 255, 255, 0.1);
font-family: var(--font-body);
}
/* Animations */
@keyframes rotate-3d-slow {
0% {
transform: translate(-50%, -50%) rotateZ(0deg) rotateX(0deg);
}
100% {
transform: translate(-50%, -50%) rotateZ(360deg) rotateX(10deg);
}
}
@keyframes rotate-3d-reverse {
0% {
transform: translate(-50%, -50%) rotateZ(360deg) rotateX(0deg);
}
100% {
transform: translate(-50%, -50%) rotateZ(0deg) rotateX(-10deg);
}
}
@keyframes pulse-core {
0%,
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.8;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 1;
}
}
/* Responsive adjustments */
@media (max-width: 1200px) {
.ring-ui-overlay {
grid-template-columns: 280px 1fr 280px;
}
}
/* ===================================
Life Ring UI - Ink & Gold Overhaul
=================================== */
/* Modal Container Background */
#ring-modal .modal-content {
background: radial-gradient(circle at center, #1b263b 0%, #050505 100%);
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(0, 0, 0, 0.9);
border: 1px solid var(--accent-gold);
width: 95vw;
height: 90vh;
max-width: 1400px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: row;
}
#ring-modal .modal-close-floating {
position: absolute;
top: 20px;
right: 20px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--text-muted);
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 1.5rem;
cursor: pointer;
z-index: 100;
transition: all 0.3s ease;
}
#ring-modal .modal-close-floating:hover {
color: var(--accent-gold);
border-color: var(--accent-gold);
transform: rotate(90deg);
}
/* 3D Scene Container */
.ring-scene-container {
display: flex;
width: 100%;
height: 100%;
position: relative;
/* Solid dark background to hide game map */
background: radial-gradient(circle at center, #1b263b 0%, #050505 100%);
z-index: 1;
}
/* ... existing scene styles ... */
/* Slots - The Interactive Elements */
.ring-slot-3d {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
/* Reduced slightly to match visual */
height: 50px;
margin-left: -25px;
margin-top: -25px;
background: rgba(10, 10, 15, 0.9);
border: 2px solid var(--accent-gold);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
z-index: 10;
/* Removed transition on container to prevent conflict with inline styles */
}
/* Apply hover effect to Inner Content or pseudo-element instead */
.ring-slot-3d .slot-inner-icon,
.ring-slot-3d .slot-fusion-icon {
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ring-slot-3d:hover {
border-color: #fff;
box-shadow: 0 0 25px var(--accent-gold);
z-index: 20 !important;
/* Ensure it pops over others */
}
.ring-slot-3d:hover .slot-inner-icon {
transform: scale(1.3);
}
.ring-slot-3d.active {
border-color: var(--accent-green);
box-shadow: 0 0 20px var(--accent-green), inset 0 0 10px var(--accent-green);
}
.ring-slot-3d.locked {
border-color: #555;
background: #111;
cursor: not-allowed;
opacity: 0.7;
}
.ring-slot-3d.drag-over {
border-color: var(--accent-purple);
box-shadow: 0 0 30px var(--accent-purple), inset 0 0 20px rgba(157, 78, 221, 0.5);
/* Removed scale to prevent hit-test jitter during drag */
transform: none !important;
}
.slot-inner-icon {
font-size: 1.8rem;
pointer-events: none;
}
/* UI Overlay Panels */
.ring-ui-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Let interaction pass to 3d scene */
display: flex;
justify-content: space-between;
padding: 20px;
}
.ring-ui-panel {
pointer-events: auto;
/* Re-enable interaction for panels */
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 215, 0, 0.15);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
width: 350px;
height: 100%;
overflow: hidden;
transition: transform 0.3s ease;
}
.ring-ui-panel.left {
transform-origin: left;
}
.ring-ui-panel.right {
transform-origin: right;
width: 400px;
}
.panel-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-header h2,
.panel-header h3 {
margin: 0;
color: var(--accent-gold);
font-family: var(--font-display);
font-size: 1.8rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.ring-level-badge,
.count {
background: rgba(255, 215, 0, 0.1);
border: 1px solid var(--accent-gold);
color: var(--accent-gold);
padding: 2px 8px;
border-radius: 4px;
font-size: 0.9rem;
font-weight: bold;
}
.panel-body,
.panel-content-area {
flex: 1;
overflow-y: auto;
padding-right: 5px;
}
/* Custom Scrollbar */
.panel-body::-webkit-scrollbar,
.panel-content-area::-webkit-scrollbar {
width: 6px;
}
.panel-body::-webkit-scrollbar-thumb,
.panel-content-area::-webkit-scrollbar-thumb {
background: rgba(255, 215, 0, 0.3);
border-radius: 3px;
}
/* EXP Bar */
.exp-bar-container {
height: 24px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid #444;
border-radius: 12px;
position: relative;
overflow: hidden;
margin-bottom: 20px;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8);
}
.exp-bar-fill {
height: 100%;
background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
width: 0%;
transition: width 0.5s ease;
}
.exp-bar-fill.max {
background: linear-gradient(90deg, #cfaa70 0%, #fceea7 50%, #cfaa70 100%);
box-shadow: 0 0 15px var(--accent-gold);
}
.exp-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 0.8rem;
color: #fff;
text-shadow: 0 1px 2px #000;
z-index: 2;
white-space: nowrap;
}
.exp-text .value.max {
color: #fff;
font-weight: 800;
letter-spacing: 2px;
}
/* Stats List */
.stat-row-3d {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
}
/* Right Panel Tabs */
.panel-tabs {
display: flex;
margin-bottom: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 8px;
padding: 4px;
}
.panel-tabs .tab {
flex: 1;
text-align: center;
padding: 8px;
cursor: pointer;
font-size: 0.9rem;
border-radius: 6px;
color: var(--text-muted);
transition: all 0.2s;
}
.panel-tabs .tab.active {
background: rgba(255, 255, 255, 0.1);
color: var(--accent-gold);
font-weight: bold;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.tab-content {
display: none;
animation: fadeIn 0.3s ease;
}
.tab-content.active {
display: block;
}
/* Library Items (Redesigned - Resonance Style) */
.library-list-container {
display: flex;
flex-direction: column;
gap: 12px;
padding: 10px;
}
.law-item-row {
display: flex;
align-items: center;
padding: 15px;
background: rgba(10, 16, 25, 0.6);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
overflow: hidden;
}
.law-item-row:hover {
background: rgba(20, 30, 45, 0.8);
border-color: rgba(255, 215, 0, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.law-item-row.equipped {
background: rgba(10, 25, 20, 0.6);
border-color: var(--accent-green);
opacity: 1;
/* Keep fully visible but marked */
}
/* Selected state (for future use or multi-select) */
.law-item-row.selected {
border-color: var(--accent-gold);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}
.law-icon-box {
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
background: #080808;
border-radius: 50%;
margin-right: 15px;
border: 1px solid #333;
flex-shrink: 0;
color: var(--accent-gold);
}
.law-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.law-info .law-name {
font-weight: bold;
color: #eee;
font-size: 1rem;
margin-bottom: 4px;
font-family: var(--font-display);
}
.law-info .law-desc-mini {
font-size: 0.8rem;
color: #888;
line-height: 1.3;
}
.law-status-icon {
width: 24px;
height: 24px;
border: 2px solid #444;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 15px;
transition: all 0.2s;
flex-shrink: 0;
}
/* Checkbox style for equipped */
.law-item-row.equipped .law-status-icon {
background: var(--accent-green);
border-color: var(--accent-green);
color: #000;
font-weight: bold;
}
.law-item-row.equipped .law-status-icon::after {
content: '✓';
font-size: 0.9rem;
}
/* Side accent for resonance style */
.law-item-row::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: transparent;
transition: background 0.2s;
}
.law-item-row:hover::before {
background: var(--accent-gold);
}
.law-item-row.equipped::before {
background: var(--accent-green);
}
/* Footer Hint */
.ring-ui-footer {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
text-align: center;
pointer-events: none;
width: 100%;
}
.instruction-text {
background: rgba(0, 0, 0, 0.6);
padding: 5px 15px;
border-radius: 20px;
font-size: 0.8rem;
color: var(--text-muted);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Karma UI (Wu Yu) */
#karma-container {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 10px;
padding: 8px;
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
border: 1px solid rgba(255, 215, 0, 0.2);
width: 200px;
/* Adjust as needed */
pointer-events: none;
/* Let clicks pass through */
}
.karma-resource {
display: flex;
align-items: center;
gap: 8px;
position: relative;
}
.karma-icon {
font-size: 1.2rem;
width: 24px;
text-align: center;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
}
.karma-bar-bg {
flex: 1;
height: 12px;
/* Thicker bars */
background: rgba(0, 0, 0, 0.6);
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
}
.karma-bar-fill {
height: 100%;
transition: width 0.3s ease-out;
position: relative;
}
/* Merit - Gold/Yellow */
.merit-fill {
background: linear-gradient(90deg, #FFD700, #FFFACD);
box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
/* Sin - Red/Dark */
.sin-fill {
background: linear-gradient(90deg, #8B0000, #FF4500);
box-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}
.karma-value {
font-size: 0.8rem;
color: #eee;
font-family: 'Cinzel', serif;
/* Or game font */
min-width: 50px;
text-align: right;
text-shadow: 1px 1px 2px black;
}
/* Golden Body Effect Overlay (Optional) */
.merit-resource.golden-active .karma-icon {
animation: pulse-gold 1s infinite;
}
/* Wrath Effect Overlay (Optional) */
.sin-resource.wrath-active .karma-icon {
animation: shake-red 0.5s infinite;
}
@keyframes pulse-gold {
0% {
transform: scale(1);
filter: drop-shadow(0 0 2px gold);
}
50% {
transform: scale(1.2);
filter: drop-shadow(0 0 10px gold);
}
100% {
transform: scale(1);
filter: drop-shadow(0 0 2px gold);
}
}
@keyframes shake-red {
0% {
transform: translateX(0);
}
25% {
transform: translateX(-2px);
}
75% {
transform: translateX(2px);
}
100% {
transform: translateX(0);
}
}
/* ===================================
Mobile Adaptation ( < 768px )
=================================== */
@media (max-width: 768px) {
:root {
/* Reduce spacing on mobile */
--spacing-md: 12px;
--spacing-lg: 16px;
--spacing-xl: 20px;
}
html,
body {
/* Slightly larger base text for readability, but controlled */
font-size: 14px;
}
/* --- Main Menu --- */
.menu-content {
padding: 20px 15px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
/* Let content grow and scroll naturally */
}
.game-logo {
margin-bottom: 20px;
transform: scale(0.85);
/* Slight scale down */
}
.title-cn {
font-size: 4.5rem;
/* Down from 6.5rem */
letter-spacing: 5px;
}
.title-en {
font-size: 0.9rem;
margin-left: 0;
text-align: center;
}
.seal-container {
transform: scale(0.7) rotate(15deg);
right: -20px;
top: -20px;
}
.game-description {
font-size: 0.85rem;
padding: 0 10px;
}
.menu-buttons {
gap: 12px;
width: 100%;
}
.talisman-btn {
width: 90%;
/* Fluid width */
max-width: 320px;
height: 55px;
/* Slightly shorter */
}
.talisman-content {
font-size: 1.2rem;
}
.menu-utilities {
gap: 20px;
margin-top: 30px;
}
.util-btn {
width: 40px;
height: 40px;
}
/* Ensure fog layers don't break layout */
.fog-layer {
background-size: 200px 200px;
}
/* --- Modals / Overlays Generic --- */
.screen-header {
padding: 10px 15px;
}
.screen-header h2 {
font-size: 1.4rem;
}
/* Fix Character Selection Layout */
.character-panel {
grid-template-columns: 1fr;
/* Stack vertically */
grid-template-rows: auto auto auto;
padding: 15px;
gap: 20px;
height: calc(100% - 60px);
}
.character-avatar {
order: 1;
}
.avatar-ring {
width: 140px;
height: 140px;
}
.avatar-inner {
width: 120px;
height: 120px;
font-size: 1.6rem;
}
.character-stats {
order: 2;
justify-content: center;
flex-wrap: wrap;
gap: 15px;
}
.stat {
min-width: 70px;
padding: 10px;
}
.character-info {
order: 3;
}
.fate-ring-display {
display: none;
/* Hide complex decoration on mobile if space is tight, or move to bottom */
}
}
/* ===================================
Mobile Adaptation: Game Loop Screens
=================================== */
@media (max-width: 768px) {
/* --- Save Slots --- */
.save-slots-container {
grid-template-columns: 1fr;
gap: 15px;
padding: 10px;
height: auto;
overflow-y: auto;
}
.save-slot-card {
width: 100%;
max-width: 350px;
margin: 0 auto;
min-height: 120px;
/* Compress height */
}
/* --- Realm / Map Selection --- */
#realm-selection-screen .realm-cards {
flex-direction: column;
align-items: center;
overflow-y: auto;
padding-bottom: 50px;
}
.realm-card {
width: 90%;
height: 180px;
/* Shorter cards */
margin-bottom: 15px;
}
/* --- Battle Interface --- */
.battle-screen {
grid-template-rows: auto 1fr auto;
/* Re-adjust battle layout if it uses grid */
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* Enemy Area */
.enemy-container {
flex-wrap: wrap;
justify-content: center;
gap: 5px;
padding-top: 50px;
/* Space for top bar */
transform: scale(0.9);
/* Scale down slightly */
transform-origin: top center;
}
.enemy-unit {
width: 100px;
/* Smaller enemies */
height: 140px;
}
/* Hand Area */
.hand-container {
height: 140px;
bottom: 10px;
/* Allow horizontal scrolling or tighter stacking */
overflow-x: auto;
justify-content: flex-start;
padding-left: 20px;
}
.card {
width: 100px;
/* Smaller cards */
height: 140px;
flex-shrink: 0;
}
.card:hover {
transform: translateY(-20px) scale(1.1);
/* Reduce hover lift */
}
/* Player Status / Energy */
.player-status-area {
position: absolute;
bottom: 160px;
/* Above hand */
left: 10px;
transform: scale(0.8);
transform-origin: bottom left;
}
.energy-display,
.milk-candy-display {
font-size: 1rem;
}
/* Map Interface */
#map-screen {
overflow: hidden;
}
.map-container {
/* Ensure map is scrollable or fitted */
width: 100%;
flex: 1;
min-height: 0;
overflow: auto;
}
}
/* ===================================
Mobile Adaptation: Management Screens
=================================== */
@media (max-width: 768px) {
/* --- Deck Builder / Visual --- */
#deck-view-screen .deck-content {
flex-direction: column;
}
.deck-column {
width: 100%;
height: auto;
min-height: 200px;
}
/* --- Life Ring (Ming Huan) --- */
.ming-huan-container {
flex-direction: column;
overflow-y: auto;
}
.ring-visual-area,
.ring-slots-area {
width: 100%;
height: auto;
}
.ring-slots-area {
padding-bottom: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 10px;
}
/* --- Compendium / Treasure --- */
.treasure-grid {
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 10px;
}
.treasure-item {
width: 80px;
height: 80px;
}
/* --- Card Detail Modal --- */
#card-detail-modal,
#treasure-detail-modal {
width: 95% !important;
/* Force fit */
height: auto;
max-height: 90vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
overflow-y: auto;
}
.detail-content {
flex-direction: column;
}
.detail-image,
.detail-info {
width: 100%;
}
.detail-image {
height: 200px;
/* Limit image height */
margin-bottom: 15px;
}
}
/* ===================================
Mobile Battle UI Fixes - FINAL
=================================== */
@media (max-width: 768px) {
/* 1. Reset the Main Grid for Mobile Portrait */
.battle-container {
display: flex;
/* Switch from Grid to Flex Column */
flex-direction: column;
justify-content: flex-start;
align-items: center;
height: 100vh;
overflow: hidden;
padding-top: 60px;
/* Space for top bar/island */
}
/* 2. Enemy Area (Top) */
.enemy-area {
width: 100%;
height: 25vh;
/* Fixed height for enemies */
margin-bottom: 20px;
align-items: flex-end;
/* Align enemies to bottom of their box */
transform: scale(0.85);
/* Slightly smaller */
}
.enemy-container {
gap: 15px;
/* Closer together */
}
/* 3. Player Info & Battle Log (Middle) */
.battle-middle {
position: absolute;
width: 100%;
top: 30vh;
/* Position log below enemies */
height: 50px;
z-index: 50;
}
.player-area {
width: 100%;
height: auto;
flex-direction: column;
gap: 10px;
padding: 0;
margin-bottom: 10px;
}
.player-character {
flex-direction: row;
/* Avatar left, Bars right */
gap: 15px;
}
/* Energy Bars - Horizontal Layout */
.player-bars {
align-items: flex-start;
}
/* Milk Candy / Energy Indicators */
.milk-candy-display,
.energy-display {
flex-direction: row;
font-size: 0.9rem;
}
/* 4. Hand Area (Bottom) */
.hand-area {
width: 100%;
flex: 1;
/* Take remaining space */
min-height: 180px;
align-items: flex-end;
padding-bottom: 80px;
/* Push cards up from very bottom */
overflow-x: auto;
/* Allow scrolling if too many cards */
overflow-y: visible;
justify-content: flex-start;
/* Start from left */
padding-left: 20px;
padding-right: 20px;
}
.hand-container {
width: max-content;
/* Allow container to grow wide */
display: flex;
gap: -30px;
/* Overlap cards */
padding: 0 10px;
}
.card {
width: 100px;
height: 140px;
font-size: 0.8rem;
/* Smaller text */
flex-shrink: 0;
}
/* 5. End Turn Button & Deck Piles */
.end-turn-btn {
position: fixed;
bottom: 20px;
right: 20px;
width: auto;
padding: 10px 20px;
font-size: 1rem;
z-index: 300;
}
.pile-btn {
position: fixed;
bottom: 20px;
z-index: 300;
transform: scale(0.8);
}
.pile-btn.draw {
left: 10px;
}
.pile-btn.discard {
left: 80px;
}
/* Hide decorative/heavy elements */
.void-particles,
.fog-layer {
display: none;
}
}
/* ===================================
Mobile Management UI Fixes - FINAL
=================================== */
@media (max-width: 768px) {
/* --- 1. Life Ring (Ming Huan) --- */
#fate-ring-screen {
overflow-y: auto;
}
/* Force planar view (no 3D rotation) on mobile */
.ring-scene-container {
height: auto;
min-height: 100vh;
overflow: visible;
perspective: none;
}
.ring-scene {
position: relative;
height: 600px;
/* Minimum height for ring interaction */
width: 100%;
overflow: visible;
/* Allow scrolling */
pointer-events: auto;
/* Enable scroll interaction */
}
.ring-system {
transform: rotateX(0deg) rotateY(0deg) !important;
width: 100%;
height: 100%;
/* Scale down to fit width */
transform: scale(0.65) !important;
transform-origin: top center;
margin-top: 50px;
}
/* Make slots easier to tap */
.ring-slot-3d {
width: 80px;
height: 80px;
margin-left: -40px;
margin-top: -40px;
}
/* --- 2. Deck Builder / Compendium --- */
/* Fix layout containers */
.compendium-layout,
.treasure-compendium-layout {
display: flex;
flex-direction: column;
padding: 10px;
height: auto;
overflow-y: auto;
/* Allow entire screen scroll */
padding-bottom: 80px;
}
.jade-slips-container {
height: auto;
overflow: visible;
}
.jade-slips-grid {
grid-template-columns: repeat(3, 1fr);
/* 3 cols on mobile */
gap: 10px;
padding: 0;
overflow: visible;
}
.compendium-grid {
grid-template-columns: repeat(3, 1fr);
/* 3 cols for items */
gap: 8px;
}
/* Hide Resonance Manual sidebar initially? Or stack it */
.resonance-manual-container {
margin-top: 20px;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-left: 0;
padding-top: 20px;
height: auto;
}
/* --- 3. Shop / Curator Shelf --- */
.curator-shelf-layout {
padding: 10px;
height: 100vh;
/* Fixed height for shop to allow internal scroll */
}
.treasures-shelf-container {
grid-template-columns: repeat(3, 1fr);
/* 3 cols */
grid-auto-rows: auto;
gap: 10px;
padding: 10px;
}
.shelf-slot {
height: 90px;
}
.shelf-stats-header {
gap: 15px;
flex-wrap: wrap;
}
.shelf-stat {
padding: 5px 15px;
flex: 1;
}
/* --- 4. Modals (Detail Views) --- */
/* Ensure close buttons are visible & accessible */
.cd-close-btn,
.modal-close-floating {
width: 100%;
/* Full width button at bottom for easier close */
border-radius: 8px;
height: 50px;
position: static;
/* Flow in document */
margin-top: 15px;
}
/* --- Dynamic Avatar Styles --- */
.modal-close-floating {
margin-bottom: 15px;
/* For top close buttons */
position: absolute;
width: 40px;
top: 10px;
right: 10px;
}
}
/* ===================================
Mobile Battle UI Overlap Fixes
=================================== */
@media (max-width: 768px) {
/* Reposition Realm Law/Environmental Effects */
.realm-law-indicator {
position: absolute;
top: 60px;
/* Move down below header/treasures */
left: 10px;
z-index: 100;
transform: scale(0.85);
/* Slightly smaller */
transform-origin: top left;
background: rgba(0, 0, 0, 0.6);
padding: 5px 10px;
border-radius: 4px;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Adjust Treasures Bar to ensure it stays at top */
.treasures-bar.battle-pos {
top: 0;
padding-top: 10px;
height: auto;
min-height: 50px;
flex-wrap: nowrap;
overflow-x: auto;
/* Allow scrolling if many treasures */
justify-content: flex-start;
/* Left align on mobile for better space usage */
padding-left: 10px;
}
.treasure-icon {
width: 32px;
/* Smaller icons on mobile */
height: 32px;
font-size: 20px;
}
}
/* ===================================
Mobile Battle UI Overlap Fixes - REAL FIX
=================================== */
@media (max-width: 768px) {
/* Correct Selector for Battle Screen Environment Display */
#battle-environment {
position: absolute;
top: 60px;
/* Move down below header/treasures */
left: 10px;
z-index: 100;
transform: scale(0.85);
/* Slightly smaller */
transform-origin: top left;
background: rgba(0, 0, 0, 0.6);
padding: 5px 10px;
border-radius: 4px;
max-width: 240px;
white-space: normal;
overflow: visible;
display: flex;
/* Ensure flex layout matches JS setting */
align-items: center;
gap: 5px;
flex-wrap: wrap;
}
#battle-command-panel {
top: 102px;
left: 8px;
transform: none;
width: calc(100vw - 16px);
padding: 8px 9px;
border-radius: 10px;
}
#battle-command-panel .battle-command-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
#battle-command-panel .battle-command-btn {
padding: 6px;
}
#battle-command-panel .battle-command-name {
font-size: 0.72rem;
}
#battle-command-panel .battle-command-meta {
font-size: 0.64rem;
}
#battle-command-panel .battle-command-right {
gap: 5px;
}
#battle-command-panel .battle-advisor-toggle {
font-size: 0.62rem;
padding: 4px 7px;
}
#battle-command-panel .battle-advisor-title {
font-size: 0.68rem;
}
#battle-command-panel .battle-advisor-line {
font-size: 0.63rem;
}
#battle-command-panel .battle-advisor-matrix-btn {
font-size: 0.6rem;
padding: 4px 7px;
}
#battle-command-panel .battle-advisor-cardstep-btn {
font-size: 0.58rem;
padding: 4px 6px;
}
}
/* Character Avatar Image Support */
.char-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
.char-avatar:has(.char-avatar-img) {
width: 120px;
height: 120px;
font-size: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Character Portrait Styles - Added for Wuyu */
.char-portrait-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.character-card .char-header:has(.char-portrait-img) {
height: 140px;
align-items: flex-end;
}
.character-card .char-header .char-avatar:has(.char-portrait-img) {
width: 120px;
height: 120px;
border: 3px solid var(--accent-gold);
}
/* Battle Avatar Portrait */
#player-avatar.has-portrait {
background: transparent;
padding: 0;
border: 2px solid var(--accent-gold);
overflow: hidden;
}
.battle-portrait-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- Global Dynamic Avatar Styles (Fixed) --- */
.slot-visual.is-image {
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
border: 2px solid var(--accent-gold);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
color: transparent;
/* Hide any fallback text */
background-color: transparent !important;
/* Ensure base background doesn't show */
}
.player-face-visual.is-image {
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
border: 2px solid var(--accent-gold);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
/* ===================================
New Asset Styles (Realm BG & Boss Logo)
=================================== */
/* Dynamic Background Image Support */
.dynamic-bg.is-image-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: brightness(0.7);
/* Darken slightly */
transition: background-image 1s ease-in-out;
}
.bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 100%);
z-index: 1;
}
/* Boss Logo in Battle */
/* Boss Logo in Battle */
.enemy-boss-logo {
position: absolute;
top: -25px;
/* Moved down closer to HP bar as requested */
left: 50%;
transform: translateX(-50%);
width: 140px;
/* Slightly larger */
height: 140px;
z-index: 1;
/* Lower than avatar (intent) */
pointer-events: none;
animation: logo-float-battle 4s ease-in-out infinite;
}
.enemy-boss-logo img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
}
@keyframes logo-float-battle {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(-10px);
}
}
/* Adjust enemy avatar if boss logo is present */
/* Adjust enemy avatar if boss logo is present (Unified) */
.enemy.boss .enemy-avatar.has-image {
/* Ensure image covers the avatar circle */
background-size: cover;
background-position: center;
border-color: var(--accent-gold);
box-shadow:
0 0 30px rgba(207, 170, 112, 0.5),
0 0 60px rgba(156, 39, 176, 0.3);
}
/* Ensure intent is visible over image */
.enemy-avatar.has-image .enemy-intent {
z-index: 5;
background: rgba(0, 0, 0, 0.8);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* ===================================
Inheritance Screen
=================================== */
#inheritance-screen {
background:
radial-gradient(circle at 20% 15%, rgba(212, 170, 72, 0.16) 0%, transparent 35%),
radial-gradient(circle at 80% 85%, rgba(74, 127, 250, 0.16) 0%, transparent 32%),
linear-gradient(180deg, #0b1126 0%, #070b18 100%);
overflow-y: auto;
}
.inheritance-container {
width: min(1120px, calc(100% - 48px));
margin: 10px auto 30px;
padding: 18px 18px 24px;
border-radius: 24px;
border: 1px solid rgba(126, 166, 255, 0.16);
background: linear-gradient(180deg, rgba(10, 16, 36, 0.88), rgba(6, 10, 24, 0.92));
box-shadow: 0 22px 42px rgba(0, 0, 0, 0.24);
}
.inheritance-summary {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.inheritance-stat {
padding: 14px 16px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(12, 16, 34, 0.75);
backdrop-filter: blur(4px);
display: flex;
justify-content: space-between;
align-items: baseline;
}
.inheritance-stat .label {
color: rgba(223, 231, 255, 0.7);
font-size: 0.9rem;
}
.inheritance-stat .value {
font-size: 1.3rem;
color: #f3f6ff;
font-weight: 700;
}
.inheritance-stat .value.highlight {
color: var(--accent-gold);
text-shadow: 0 0 10px rgba(207, 170, 112, 0.45);
}
.inheritance-run-note {
margin-top: 12px;
padding: 12px 14px;
border-radius: 10px;
border: 1px solid rgba(79, 150, 255, 0.4);
background: rgba(16, 25, 56, 0.6);
color: rgba(226, 237, 255, 0.86);
font-size: 0.92rem;
line-height: 1.5;
}
.inheritance-presets {
margin-top: 12px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
}
.inheritance-preset-btn {
border: 1px solid rgba(126, 166, 255, 0.35);
border-radius: 10px;
padding: 10px 12px;
background: rgba(10, 20, 48, 0.7);
color: rgba(228, 238, 255, 0.92);
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 8px;
}
.inheritance-preset-btn .icon {
grid-row: span 2;
font-size: 1.1rem;
display: flex;
align-items: center;
}
.inheritance-preset-btn .name {
font-size: 0.95rem;
font-weight: 600;
}
.inheritance-preset-btn .desc {
margin-top: 2px;
font-size: 0.8rem;
color: rgba(203, 218, 255, 0.75);
}
.inheritance-preset-btn:hover {
border-color: rgba(207, 170, 112, 0.55);
box-shadow: 0 0 14px rgba(207, 170, 112, 0.2);
transform: translateY(-1px);
}
.inheritance-preset-btn.active {
border-color: rgba(207, 170, 112, 0.7);
background: linear-gradient(145deg, rgba(36, 28, 10, 0.56), rgba(17, 27, 60, 0.82));
}
.inheritance-upgrade-grid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 12px;
}
.inheritance-card {
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 12px;
padding: 12px;
background: linear-gradient(145deg, rgba(14, 22, 49, 0.92), rgba(8, 12, 28, 0.94));
}
.inheritance-card.maxed {
border-color: rgba(207, 170, 112, 0.52);
box-shadow: 0 0 18px rgba(207, 170, 112, 0.16);
}
.inheritance-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.inheritance-card-header .icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 1.2rem;
background: rgba(207, 170, 112, 0.22);
border: 1px solid rgba(207, 170, 112, 0.38);
}
.inheritance-card-header .name {
font-size: 1.05rem;
color: #f4f7ff;
}
.inheritance-card-header .level {
margin-top: 2px;
font-size: 0.8rem;
color: rgba(215, 226, 255, 0.7);
}
.inheritance-desc {
color: rgba(220, 230, 255, 0.82);
font-size: 0.9rem;
min-height: 40px;
}
.inheritance-card-footer {
margin-top: 12px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.inheritance-card-footer .cost {
color: rgba(255, 225, 160, 0.9);
font-size: 0.85rem;
}
.inheritance-actions {
margin-top: 16px;
display: flex;
justify-content: flex-end;
}
@media (max-width: 768px) {
#achievements-screen .screen-header,
#inheritance-screen .screen-header,
.achievements-container,
.inheritance-container {
width: calc(100% - 20px);
}
.achievements-container,
.inheritance-container {
padding-left: 14px;
padding-right: 14px;
}
.inheritance-summary {
grid-template-columns: 1fr;
}
.inheritance-actions {
justify-content: center;
}
}
/* ===================================
Legacy Mission Trackers
=================================== */
.legacy-mission-tracker {
position: absolute;
top: 88px;
left: 50%;
transform: translateX(-50%);
width: min(460px, 92vw);
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(120, 169, 255, 0.45);
background: linear-gradient(145deg, rgba(9, 17, 42, 0.9), rgba(6, 13, 34, 0.9));
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
z-index: 120;
}
.legacy-mission-tracker.completed {
border-color: rgba(207, 170, 112, 0.7);
box-shadow: 0 8px 24px rgba(207, 170, 112, 0.2);
}
.legacy-mission-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.legacy-mission-tag {
color: rgba(156, 199, 255, 0.95);
font-size: 0.82rem;
letter-spacing: 0.5px;
}
.legacy-mission-reward {
color: rgba(255, 220, 148, 0.95);
font-size: 0.82rem;
}
.legacy-mission-title {
margin-top: 4px;
color: rgba(236, 244, 255, 0.96);
font-size: 0.92rem;
line-height: 1.35;
}
.legacy-mission-progress-track {
margin-top: 8px;
height: 7px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.12);
}
.legacy-mission-progress-fill {
width: 0;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #7f5af0 0%, #46d3ff 100%);
transition: width 0.25s ease;
}
.legacy-mission-tracker.completed .legacy-mission-progress-fill {
background: linear-gradient(90deg, #b58c37 0%, #f3d184 100%);
}
.legacy-mission-progress-text {
margin-top: 4px;
color: rgba(201, 222, 255, 0.88);
font-size: 0.8rem;
text-align: right;
}
.battle-command-panel {
position: absolute;
top: 162px;
left: 50%;
transform: translateX(-50%);
width: min(540px, 95vw);
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(114, 184, 255, 0.48);
background: linear-gradient(145deg, rgba(7, 16, 40, 0.92), rgba(4, 10, 26, 0.92));
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
z-index: 118;
}
.battle-command-panel.custom-position {
transition: box-shadow 0.12s ease, border-color 0.12s ease;
}
.battle-command-panel.dragging {
user-select: none;
cursor: grabbing;
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.46);
}
.battle-command-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.battle-command-title-group {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.battle-command-title {
font-size: 0.82rem;
letter-spacing: 0.6px;
color: rgba(161, 214, 255, 0.96);
}
.battle-command-spirit-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid rgba(126, 196, 255, 0.34);
background: rgba(24, 58, 102, 0.46);
color: rgba(223, 241, 255, 0.95);
font-size: 0.62rem;
line-height: 1;
white-space: nowrap;
}
.battle-command-spirit-chip.ready {
border-color: rgba(255, 214, 132, 0.54);
background: rgba(88, 63, 18, 0.48);
color: rgba(255, 239, 205, 0.98);
}
.battle-command-spirit-icon {
font-size: 0.8rem;
}
.battle-command-spirit-name {
font-weight: 700;
}
.battle-command-spirit-charge {
opacity: 0.84;
}
.battle-command-points {
font-size: 0.78rem;
color: rgba(255, 229, 165, 0.95);
}
.battle-command-right {
display: inline-flex;
align-items: center;
gap: 8px;
}
.battle-advisor-toggle {
border: 1px solid rgba(118, 190, 255, 0.52);
border-radius: 999px;
background: rgba(23, 55, 101, 0.78);
color: rgba(219, 236, 255, 0.95);
font-size: 0.66rem;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease;
}
.battle-advisor-toggle:hover {
border-color: rgba(154, 219, 255, 0.82);
background: rgba(31, 72, 128, 0.86);
}
.battle-command-track {
margin-top: 7px;
width: 100%;
height: 7px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.14);
}
.battle-command-fill {
width: 0;
height: 100%;
border-radius: 999px;
transition: width 0.2s ease;
background: linear-gradient(90deg, #5eb5ff 0%, #77f0ff 48%, #ffe28d 100%);
}
.battle-command-list {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.battle-system-strip {
margin-top: 8px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
gap: 6px;
}
.battle-system-chip,
.battle-system-card {
min-width: 0;
border-radius: 12px;
border: 1px solid rgba(110, 180, 255, 0.24);
background:
linear-gradient(145deg, rgba(18, 38, 72, 0.74), rgba(10, 24, 48, 0.82)),
radial-gradient(circle at top right, rgba(120, 188, 255, 0.12), transparent 42%);
color: rgba(226, 240, 255, 0.94);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}
.battle-system-chip {
padding: 7px 8px;
}
.battle-system-chip-head,
.battle-system-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.battle-system-chip-label,
.battle-system-card-label {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(165, 223, 255, 0.92);
}
.battle-system-chip-icon,
.battle-system-card-icon {
flex: 0 0 auto;
width: 18px;
height: 18px;
border-radius: 7px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.78rem;
}
.battle-system-chip-value,
.battle-system-card-value {
margin-top: 5px;
font-size: 0.74rem;
font-weight: 700;
line-height: 1.28;
color: rgba(239, 246, 255, 0.98);
word-break: break-word;
}
.battle-system-chip-meta,
.battle-system-card-meta,
.battle-system-card-detail {
font-size: 0.61rem;
line-height: 1.35;
color: rgba(192, 216, 241, 0.84);
}
.battle-system-chip-meta {
margin-top: 4px;
}
.battle-system-grid {
margin-top: 6px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(144px, 1fr));
gap: 6px;
}
.battle-system-card {
padding: 8px 9px;
}
.battle-system-card-meta {
text-align: right;
}
.battle-system-card-detail {
margin-top: 6px;
}
.battle-system-chip.tone-fate,
.battle-system-card.tone-fate {
border-color: rgba(207, 170, 112, 0.42);
background:
linear-gradient(145deg, rgba(83, 54, 19, 0.66), rgba(37, 24, 12, 0.78)),
radial-gradient(circle at top right, rgba(255, 214, 137, 0.18), transparent 44%);
color: rgba(255, 239, 206, 0.96);
}
.battle-system-chip.tone-oath,
.battle-system-card.tone-oath {
border-color: rgba(216, 138, 108, 0.45);
background:
linear-gradient(145deg, rgba(88, 39, 27, 0.68), rgba(42, 21, 18, 0.8)),
radial-gradient(circle at top right, rgba(255, 178, 150, 0.16), transparent 44%);
color: rgba(255, 230, 217, 0.96);
}
.battle-system-chip.tone-spirit,
.battle-system-card.tone-spirit {
border-color: rgba(118, 190, 255, 0.46);
background:
linear-gradient(145deg, rgba(24, 58, 104, 0.7), rgba(14, 30, 58, 0.8)),
radial-gradient(circle at top right, rgba(116, 205, 255, 0.18), transparent 44%);
color: rgba(222, 242, 255, 0.97);
}
.battle-system-chip.tone-chapter,
.battle-system-card.tone-chapter {
border-color: rgba(147, 213, 191, 0.42);
background:
linear-gradient(145deg, rgba(22, 66, 60, 0.68), rgba(13, 33, 35, 0.8)),
radial-gradient(circle at top right, rgba(180, 244, 213, 0.14), transparent 42%);
color: rgba(225, 248, 239, 0.96);
}
.battle-system-chip.tone-resonance,
.battle-system-card.tone-resonance {
border-color: rgba(181, 160, 255, 0.45);
background:
linear-gradient(145deg, rgba(56, 35, 97, 0.72), rgba(26, 18, 52, 0.82)),
radial-gradient(circle at top right, rgba(196, 178, 255, 0.18), transparent 44%);
color: rgba(241, 234, 255, 0.96);
}
.battle-system-chip.tone-treasure,
.battle-system-card.tone-treasure {
border-color: rgba(255, 196, 123, 0.44);
background:
linear-gradient(145deg, rgba(92, 57, 19, 0.7), rgba(41, 26, 12, 0.82)),
radial-gradient(circle at top right, rgba(255, 217, 158, 0.16), transparent 44%);
color: rgba(255, 240, 212, 0.96);
}
.battle-system-chip.tone-warning,
.battle-system-card.tone-warning {
border-color: rgba(255, 172, 127, 0.46);
background:
linear-gradient(145deg, rgba(95, 43, 25, 0.72), rgba(46, 22, 19, 0.82)),
radial-gradient(circle at top right, rgba(255, 175, 123, 0.18), transparent 44%);
color: rgba(255, 231, 214, 0.97);
}
.battle-system-chip.tone-muted,
.battle-system-card.tone-muted {
border-color: rgba(125, 169, 208, 0.22);
background:
linear-gradient(145deg, rgba(28, 46, 67, 0.64), rgba(15, 25, 40, 0.8)),
radial-gradient(circle at top right, rgba(153, 194, 234, 0.08), transparent 44%);
color: rgba(214, 228, 242, 0.92);
}
.battle-command-btn {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
width: 100%;
padding: 7px 8px;
border-radius: 9px;
border: 1px solid rgba(109, 173, 255, 0.38);
background: linear-gradient(145deg, rgba(21, 44, 86, 0.8), rgba(14, 31, 64, 0.88));
color: rgba(226, 239, 255, 0.95);
cursor: pointer;
transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.battle-command-btn:hover:not(:disabled) {
transform: translateY(-1px);
border-color: rgba(144, 206, 255, 0.8);
box-shadow: 0 6px 14px rgba(77, 148, 231, 0.24);
}
.battle-command-btn.ready {
border-color: rgba(139, 222, 255, 0.76);
}
.battle-command-btn.cooldown,
.battle-command-btn.disabled,
.battle-command-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.battle-command-head {
display: flex;
align-items: center;
gap: 5px;
line-height: 1;
}
.battle-command-icon {
font-size: 0.95rem;
}
.battle-command-name {
font-size: 0.76rem;
font-weight: 700;
color: rgba(236, 244, 255, 0.97);
}
.battle-command-meta {
font-size: 0.68rem;
color: rgba(197, 219, 245, 0.87);
}
.battle-tactical-advisor {
margin-top: 8px;
border-radius: 9px;
border: 1px solid rgba(96, 176, 255, 0.35);
background: linear-gradient(145deg, rgba(9, 24, 52, 0.74), rgba(8, 20, 42, 0.82));
padding: 7px 8px;
}
.battle-tactical-advisor.collapsed {
padding-bottom: 6px;
}
.battle-advisor-header {
display: flex;
align-items: center;
gap: 6px;
cursor: grab;
touch-action: none;
}
.battle-advisor-drag-handle {
flex: 0 0 auto;
width: 24px;
height: 24px;
border: 1px solid rgba(118, 190, 255, 0.42);
border-radius: 8px;
background: rgba(17, 43, 78, 0.68);
color: rgba(214, 233, 255, 0.95);
font-size: 0.82rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: grab;
touch-action: none;
transition: border-color 0.12s ease, background 0.12s ease;
}
.battle-advisor-drag-handle:hover {
border-color: rgba(156, 220, 255, 0.78);
background: rgba(30, 70, 120, 0.82);
}
.battle-command-panel.dragging .battle-advisor-drag-handle {
cursor: grabbing;
}
.battle-command-panel.dragging .battle-advisor-header {
cursor: grabbing;
}
.battle-advisor-title {
flex: 1 1 auto;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.35px;
color: rgba(161, 221, 255, 0.95);
}
.battle-advisor-body[hidden] {
display: none;
}
.battle-advisor-block {
margin-top: 7px;
padding: 7px 8px;
border-radius: 10px;
border: 1px solid rgba(108, 179, 255, 0.18);
background: rgba(7, 18, 38, 0.42);
}
.battle-advisor-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.battle-advisor-section-title {
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(161, 223, 255, 0.94);
}
.battle-advisor-section-note {
flex: 1 1 auto;
text-align: right;
font-size: 0.6rem;
line-height: 1.3;
color: rgba(183, 209, 236, 0.78);
}
.battle-advisor-tempo-grid {
margin-top: 6px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.battle-advisor-tempo-segment {
padding: 6px 7px;
border-radius: 10px;
border: 1px solid rgba(101, 169, 241, 0.18);
background: rgba(15, 33, 63, 0.42);
transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.battle-advisor-tempo-segment.active {
transform: translateY(-1px);
border-color: rgba(255, 215, 138, 0.62);
background: linear-gradient(145deg, rgba(74, 54, 18, 0.56), rgba(27, 24, 40, 0.74));
}
.battle-advisor-tempo-segment.tone-guard.active {
border-color: rgba(135, 214, 255, 0.66);
background: linear-gradient(145deg, rgba(24, 56, 91, 0.72), rgba(15, 33, 63, 0.74));
}
.battle-advisor-tempo-segment.tone-cleanse.active {
border-color: rgba(139, 235, 204, 0.66);
background: linear-gradient(145deg, rgba(17, 70, 53, 0.7), rgba(14, 39, 40, 0.74));
}
.battle-advisor-tempo-segment.tone-burst.active {
border-color: rgba(255, 165, 176, 0.68);
background: linear-gradient(145deg, rgba(85, 31, 44, 0.72), rgba(41, 24, 45, 0.76));
}
.battle-advisor-tempo-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.battle-advisor-tempo-label,
.battle-advisor-tempo-score {
font-size: 0.62rem;
color: rgba(224, 238, 255, 0.92);
}
.battle-advisor-tempo-label {
font-weight: 700;
}
.battle-advisor-tempo-score {
color: rgba(253, 226, 157, 0.94);
}
.battle-advisor-tempo-track {
margin-top: 5px;
position: relative;
height: 5px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
}
.battle-advisor-tempo-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, rgba(112, 189, 255, 0.85), rgba(255, 218, 145, 0.92));
}
.battle-advisor-tempo-segment.tone-cleanse .battle-advisor-tempo-fill {
background: linear-gradient(90deg, rgba(110, 227, 184, 0.84), rgba(191, 255, 225, 0.92));
}
.battle-advisor-tempo-segment.tone-burst .battle-advisor-tempo-fill {
background: linear-gradient(90deg, rgba(255, 141, 138, 0.84), rgba(255, 213, 165, 0.92));
}
.battle-advisor-status-strip {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.battle-advisor-status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(115, 184, 255, 0.26);
background: rgba(21, 49, 86, 0.42);
color: rgba(226, 240, 255, 0.94);
font-size: 0.63rem;
line-height: 1;
}
.battle-advisor-status-label {
opacity: 0.78;
}
.battle-advisor-status-value {
font-weight: 700;
}
.battle-advisor-status-chip.tone-command_ready,
.battle-advisor-status-chip.tone-finish {
border-color: rgba(255, 211, 136, 0.44);
background: rgba(87, 60, 20, 0.42);
color: rgba(255, 241, 206, 0.95);
}
.battle-advisor-status-chip.tone-guard,
.battle-advisor-status-chip.tone-boss {
border-color: rgba(133, 212, 255, 0.42);
background: rgba(20, 58, 92, 0.44);
}
.battle-advisor-status-chip.tone-warning {
border-color: rgba(255, 172, 127, 0.45);
background: rgba(89, 42, 23, 0.42);
color: rgba(255, 229, 214, 0.96);
}
.battle-advisor-status-chip.tone-resonance {
border-color: rgba(181, 160, 255, 0.45);
background: rgba(55, 34, 97, 0.42);
color: rgba(241, 233, 255, 0.95);
}
.battle-advisor-status-chip.tone-fate {
border-color: rgba(207, 170, 112, 0.45);
background: rgba(79, 50, 20, 0.42);
color: rgba(255, 238, 202, 0.95);
}
.battle-advisor-status-chip.tone-oath {
border-color: rgba(216, 138, 108, 0.46);
background: rgba(92, 39, 26, 0.44);
color: rgba(255, 228, 214, 0.96);
}
.battle-advisor-status-chip.tone-spirit {
border-color: rgba(118, 190, 255, 0.46);
background: rgba(21, 58, 102, 0.44);
color: rgba(220, 241, 255, 0.97);
}
.battle-advisor-status-chip.tone-muted,
.battle-advisor-status-chip.tone-calm,
.battle-advisor-status-chip.tone-command {
border-color: rgba(125, 169, 208, 0.25);
background: rgba(26, 44, 63, 0.4);
}
.battle-advisor-threat-list {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
}
.battle-advisor-spirit-card {
margin-top: 6px;
padding: 8px 9px;
border-radius: 10px;
border: 1px solid rgba(118, 190, 255, 0.22);
background: linear-gradient(145deg, rgba(16, 34, 66, 0.58), rgba(10, 22, 42, 0.62));
}
.battle-advisor-spirit-card.ready {
border-color: rgba(255, 214, 132, 0.44);
background: linear-gradient(145deg, rgba(67, 49, 19, 0.5), rgba(18, 24, 40, 0.64));
}
.battle-advisor-spirit-head {
display: flex;
align-items: center;
gap: 9px;
}
.battle-advisor-spirit-icon {
width: 34px;
height: 34px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.05rem;
background: rgba(118, 190, 255, 0.12);
border: 1px solid rgba(118, 190, 255, 0.24);
}
.battle-advisor-spirit-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.battle-advisor-spirit-name-line {
font-size: 0.71rem;
font-weight: 700;
color: rgba(229, 241, 255, 0.96);
}
.battle-advisor-spirit-summary,
.battle-advisor-spirit-passive,
.battle-advisor-spirit-active {
margin-top: 5px;
font-size: 0.62rem;
line-height: 1.4;
color: rgba(208, 228, 248, 0.9);
}
.battle-advisor-spirit-summary {
margin-top: 2px;
color: rgba(184, 214, 244, 0.82);
}
.battle-advisor-spirit-track {
position: relative;
margin-top: 7px;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
}
.battle-advisor-spirit-fill {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: 999px;
background: linear-gradient(90deg, rgba(118, 190, 255, 0.82), rgba(255, 220, 143, 0.94));
}
.battle-advisor-spirit-btn {
width: 100%;
margin-top: 8px;
padding: 7px 9px;
border-radius: 9px;
border: 1px solid rgba(118, 190, 255, 0.3);
background: rgba(25, 62, 108, 0.5);
color: rgba(225, 241, 255, 0.95);
font-size: 0.64rem;
font-weight: 700;
cursor: not-allowed;
opacity: 0.7;
}
.battle-advisor-spirit-btn.ready {
border-color: rgba(255, 214, 132, 0.5);
background: linear-gradient(145deg, rgba(92, 66, 21, 0.66), rgba(43, 29, 16, 0.74));
color: rgba(255, 242, 211, 0.98);
cursor: pointer;
opacity: 1;
}
.battle-advisor-threat-chip {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid rgba(123, 180, 246, 0.4);
background: rgba(24, 56, 96, 0.52);
color: rgba(226, 239, 255, 0.94);
font-size: 0.66rem;
line-height: 1.15;
}
.battle-advisor-threat-chip.chip-defend {
border-color: rgba(255, 171, 129, 0.6);
background: rgba(108, 49, 26, 0.52);
color: rgba(255, 227, 205, 0.95);
}
.battle-advisor-threat-chip.chip-break {
border-color: rgba(255, 214, 128, 0.58);
background: rgba(97, 73, 24, 0.5);
color: rgba(255, 238, 197, 0.95);
}
.battle-advisor-threat-chip.chip-cleanse {
border-color: rgba(144, 232, 199, 0.58);
background: rgba(20, 76, 61, 0.5);
color: rgba(210, 255, 238, 0.95);
}
.battle-advisor-threat-chip.chip-burst {
border-color: rgba(245, 145, 175, 0.56);
background: rgba(92, 32, 53, 0.48);
color: rgba(255, 219, 232, 0.95);
}
.battle-advisor-threat-chip.chip-stable {
border-color: rgba(151, 202, 255, 0.52);
background: rgba(24, 58, 102, 0.45);
}
.battle-advisor-line {
margin-top: 5px;
font-size: 0.68rem;
line-height: 1.32;
color: rgba(204, 225, 247, 0.9);
}
.battle-advisor-recommend {
color: rgba(219, 238, 255, 0.96);
}
.battle-advisor-readiness {
color: rgba(255, 233, 179, 0.94);
}
.battle-advisor-formation {
color: rgba(180, 232, 255, 0.95);
}
.battle-advisor-cardplan {
color: rgba(214, 244, 198, 0.96);
}
.battle-advisor-cardplan-steps {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
}
.battle-advisor-cardstep-btn {
border: 1px solid rgba(145, 228, 168, 0.58);
border-radius: 999px;
background: rgba(24, 79, 42, 0.55);
color: rgba(226, 252, 234, 0.97);
font-size: 0.62rem;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.battle-advisor-cardstep-btn:hover {
border-color: rgba(183, 255, 201, 0.86);
background: rgba(34, 99, 56, 0.7);
transform: translateY(-1px);
}
.battle-advisor-chain {
border-color: rgba(142, 202, 255, 0.26);
background:
linear-gradient(145deg, rgba(12, 31, 61, 0.56), rgba(10, 21, 46, 0.62)),
radial-gradient(circle at top right, rgba(134, 199, 255, 0.14), transparent 46%);
}
.battle-advisor-chain-title {
margin-top: 5px;
font-size: 0.72rem;
font-weight: 700;
color: rgba(229, 241, 255, 0.96);
}
.battle-advisor-chain-tags {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.battle-advisor-chain-tag {
display: inline-flex;
align-items: center;
padding: 2px 7px;
border-radius: 999px;
border: 1px solid rgba(109, 178, 246, 0.32);
background: rgba(23, 57, 94, 0.4);
color: rgba(224, 237, 255, 0.94);
font-size: 0.6rem;
line-height: 1.1;
}
.battle-advisor-chain-tag.tone-defend {
border-color: rgba(139, 210, 255, 0.48);
background: rgba(18, 62, 90, 0.44);
}
.battle-advisor-chain-tag.tone-break {
border-color: rgba(255, 213, 128, 0.5);
background: rgba(88, 60, 19, 0.44);
}
.battle-advisor-chain-tag.tone-cleanse {
border-color: rgba(132, 230, 190, 0.5);
background: rgba(18, 78, 60, 0.42);
}
.battle-advisor-chain-tag.tone-burst {
border-color: rgba(255, 156, 169, 0.48);
background: rgba(89, 31, 50, 0.42);
}
.battle-advisor-chain-steps {
margin-top: 6px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 5px;
}
.battle-advisor-chain-step {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(139, 202, 255, 0.28);
background: rgba(255, 255, 255, 0.05);
color: rgba(234, 243, 255, 0.95);
font-size: 0.62rem;
line-height: 1.15;
}
.battle-advisor-chain-arrow {
color: rgba(145, 195, 244, 0.72);
font-size: 0.64rem;
line-height: 1;
}
.battle-advisor-matrix {
color: rgba(191, 237, 255, 0.94);
}
.battle-advisor-pending-mode {
color: rgba(166, 232, 221, 0.95);
}
.battle-advisor-hotkey {
color: rgba(175, 206, 242, 0.9);
}
.battle-advisor-matrix-controls {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
}
.battle-advisor-matrix-btn {
border: 1px solid rgba(106, 182, 255, 0.44);
border-radius: 999px;
background: rgba(17, 45, 85, 0.6);
color: rgba(216, 234, 255, 0.95);
font-size: 0.64rem;
line-height: 1;
padding: 4px 8px;
cursor: pointer;
transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.battle-advisor-matrix-btn:hover {
border-color: rgba(149, 214, 255, 0.76);
background: rgba(28, 70, 122, 0.72);
}
.battle-advisor-matrix-btn.active {
border-color: rgba(255, 210, 131, 0.82);
background: linear-gradient(145deg, rgba(97, 67, 23, 0.76), rgba(65, 44, 13, 0.82));
color: rgba(255, 236, 198, 0.96);
transform: translateY(-1px);
}
.battle-advisor-last {
color: rgba(198, 214, 239, 0.9);
}
.map-header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.map-situation-overview {
width: min(520px, 66vw);
padding: 8px 10px;
border: 1px solid rgba(118, 210, 255, 0.34);
border-radius: 12px;
background:
linear-gradient(145deg, rgba(10, 27, 45, 0.9), rgba(8, 18, 31, 0.84)),
radial-gradient(circle at top left, rgba(129, 208, 255, 0.18), transparent 48%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
color: rgba(220, 240, 255, 0.95);
}
.map-overview-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
}
.map-overview-kicker {
color: rgba(153, 220, 255, 0.88);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.map-overview-chapter {
color: rgba(234, 244, 255, 0.95);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
text-align: right;
}
.map-overview-grid {
margin-top: 6px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
.map-overview-item {
min-height: 58px;
padding: 6px 8px;
border-radius: 10px;
border: 1px solid rgba(132, 202, 255, 0.24);
background: linear-gradient(145deg, rgba(22, 48, 76, 0.56), rgba(13, 28, 46, 0.66));
display: flex;
flex-direction: column;
gap: 3px;
}
.map-overview-label {
color: rgba(158, 210, 255, 0.88);
font-size: 0.65rem;
letter-spacing: 0.1em;
}
.map-overview-value {
color: rgba(228, 241, 255, 0.96);
font-size: 0.71rem;
line-height: 1.36;
word-break: break-word;
}
.map-situation-overview[data-risk-tier="high"] .map-overview-item,
.map-situation-overview[data-risk-tier="extreme"] .map-overview-item {
border-color: rgba(255, 168, 139, 0.34);
}
.map-situation-overview[data-risk-tier="extreme"] {
border-color: rgba(255, 129, 129, 0.42);
background:
linear-gradient(145deg, rgba(43, 19, 23, 0.92), rgba(30, 14, 18, 0.88)),
radial-gradient(circle at top left, rgba(255, 127, 127, 0.2), transparent 50%);
}
.map-chapter-risk-card {
width: min(520px, 66vw);
padding: 9px 11px;
border: 1px solid rgba(255, 191, 130, 0.38);
border-radius: 12px;
background:
linear-gradient(145deg, rgba(28, 18, 12, 0.9), rgba(40, 23, 15, 0.84)),
radial-gradient(circle at top right, rgba(255, 183, 106, 0.16), transparent 50%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
color: rgba(255, 239, 214, 0.96);
}
.map-risk-kicker {
color: rgba(255, 211, 151, 0.82);
font-size: 0.67rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.map-risk-title {
margin-top: 4px;
color: rgba(255, 243, 220, 0.96);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.03em;
}
.map-risk-line {
margin-top: 6px;
display: grid;
grid-template-columns: 52px 1fr;
gap: 8px;
align-items: start;
}
.map-risk-label {
color: rgba(255, 207, 143, 0.9);
font-size: 0.68rem;
letter-spacing: 0.1em;
}
.map-risk-value {
color: rgba(243, 235, 224, 0.95);
font-size: 0.72rem;
line-height: 1.42;
word-break: break-word;
}
.map-chapter-risk-card[data-risk-tier="high"] {
border-color: rgba(255, 153, 123, 0.5);
background:
linear-gradient(145deg, rgba(46, 21, 12, 0.92), rgba(60, 27, 17, 0.88)),
radial-gradient(circle at top right, rgba(255, 153, 112, 0.18), transparent 48%);
}
.map-chapter-risk-card[data-risk-tier="extreme"] {
border-color: rgba(255, 118, 118, 0.56);
background:
linear-gradient(145deg, rgba(59, 16, 16, 0.94), rgba(76, 23, 20, 0.9)),
radial-gradient(circle at top right, rgba(255, 118, 118, 0.24), transparent 46%);
}
.map-chapter-brief {
width: min(520px, 66vw);
padding: 10px 12px;
border: 1px solid rgba(236, 194, 121, 0.38);
border-radius: 12px;
background:
linear-gradient(145deg, rgba(20, 16, 14, 0.88), rgba(33, 26, 21, 0.82)),
radial-gradient(circle at top right, rgba(255, 199, 117, 0.12), transparent 46%);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
color: rgba(244, 232, 214, 0.95);
}
.chapter-brief-kicker {
color: rgba(255, 214, 150, 0.82);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.chapter-brief-header {
margin-top: 4px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.chapter-brief-title {
color: rgba(255, 241, 214, 0.96);
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.04em;
}
.chapter-brief-stage {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(140, 204, 255, 0.3);
background: rgba(24, 59, 86, 0.32);
color: rgba(214, 242, 255, 0.92);
font-size: 0.68rem;
white-space: nowrap;
}
.chapter-brief-line {
margin-top: 7px;
display: grid;
grid-template-columns: 40px 1fr;
gap: 8px;
align-items: start;
}
.chapter-brief-line.compact {
margin-top: 6px;
}
.chapter-line-label {
color: rgba(145, 200, 255, 0.88);
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.chapter-line-value {
color: rgba(230, 239, 250, 0.9);
font-size: 0.72rem;
line-height: 1.42;
}
.chapter-brief-chip-row {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chapter-brief-chip {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(244, 214, 145, 0.24);
background: rgba(78, 56, 30, 0.34);
color: rgba(255, 238, 208, 0.95);
font-size: 0.69rem;
line-height: 1.2;
}
.chapter-brief-chip.dri {
border-color: rgba(189, 223, 255, 0.52);
background: rgba(18, 52, 83, 0.44);
color: rgba(228, 243, 255, 0.96);
}
.chapter-brief-chip.dri.tier-low {
border-color: rgba(143, 219, 181, 0.56);
background: rgba(20, 73, 50, 0.4);
color: rgba(222, 255, 237, 0.97);
}
.chapter-brief-chip.dri.tier-medium {
border-color: rgba(226, 205, 139, 0.56);
background: rgba(78, 60, 22, 0.4);
color: rgba(255, 245, 219, 0.97);
}
.chapter-brief-chip.dri.tier-high {
border-color: rgba(248, 165, 120, 0.6);
background: rgba(92, 47, 23, 0.42);
color: rgba(255, 231, 219, 0.98);
}
.chapter-brief-chip.dri.tier-extreme {
border-color: rgba(255, 123, 123, 0.62);
background: rgba(95, 24, 24, 0.45);
color: rgba(255, 225, 225, 0.99);
}
.chapter-brief-chip.dri.tier-none {
border-color: rgba(160, 189, 222, 0.4);
background: rgba(26, 43, 64, 0.36);
color: rgba(220, 232, 248, 0.9);
}
.chapter-brief-chip.nemesis {
border-color: rgba(255, 184, 135, 0.4);
background: linear-gradient(145deg, rgba(64, 31, 16, 0.72), rgba(43, 17, 12, 0.84));
color: rgba(255, 236, 215, 0.97);
}
.chapter-brief-chip.nemesis.status-hunting {
border-color: rgba(255, 160, 110, 0.55);
background: linear-gradient(145deg, rgba(92, 39, 18, 0.82), rgba(60, 24, 16, 0.9));
color: rgba(255, 232, 220, 0.98);
}
.chapter-brief-chip.nemesis.status-recurring,
.chapter-brief-chip.nemesis.status-allied,
.chapter-brief-chip.nemesis.status-guarding {
border-color: rgba(255, 188, 112, 0.56);
background: linear-gradient(145deg, rgba(96, 52, 18, 0.82), rgba(63, 30, 14, 0.9));
color: rgba(255, 239, 216, 0.98);
}
.chapter-brief-chip.nemesis.status-defeated {
border-color: rgba(133, 224, 174, 0.52);
background: linear-gradient(145deg, rgba(18, 69, 41, 0.76), rgba(12, 46, 31, 0.86));
color: rgba(228, 255, 237, 0.98);
}
.chapter-brief-chip.nemesis.status-escaped {
border-color: rgba(209, 168, 255, 0.54);
background: linear-gradient(145deg, rgba(58, 26, 78, 0.78), rgba(37, 16, 58, 0.88));
color: rgba(245, 230, 255, 0.98);
}
.chapter-brief-chip.nemesis.status-released {
border-color: rgba(116, 210, 255, 0.5);
background: linear-gradient(145deg, rgba(16, 57, 76, 0.8), rgba(11, 35, 49, 0.9));
color: rgba(225, 245, 255, 0.98);
}
.chapter-brief-chip.nemesis.status-traded {
border-color: rgba(255, 214, 128, 0.54);
background: linear-gradient(145deg, rgba(88, 61, 18, 0.8), rgba(58, 39, 12, 0.9));
color: rgba(255, 244, 214, 0.98);
}
.chapter-brief-chip.nemesis.status-evolved {
border-color: rgba(204, 132, 255, 0.54);
background: linear-gradient(145deg, rgba(62, 25, 88, 0.82), rgba(40, 16, 59, 0.9));
color: rgba(247, 229, 255, 0.98);
}
.chapter-brief-chip.nemesis.status-none {
border-color: rgba(167, 178, 214, 0.38);
background: linear-gradient(145deg, rgba(31, 39, 58, 0.7), rgba(19, 24, 38, 0.84));
color: rgba(228, 235, 247, 0.92);
}
.chapter-brief-chip.nemesis-reward {
border-color: rgba(255, 220, 150, 0.42);
background: rgba(86, 58, 18, 0.4);
color: rgba(255, 244, 214, 0.96);
}
.chapter-brief-chip.nemesis-forecast {
border-color: rgba(206, 177, 255, 0.34);
background: rgba(53, 35, 90, 0.34);
color: rgba(239, 230, 255, 0.96);
}
.chapter-brief-chip.nemesis-forecast.tier-low {
border-color: rgba(153, 205, 255, 0.32);
background: rgba(24, 52, 80, 0.34);
}
.chapter-brief-chip.nemesis-forecast.tier-medium {
border-color: rgba(209, 177, 255, 0.34);
background: rgba(45, 30, 75, 0.34);
}
.chapter-brief-chip.nemesis-forecast.tier-high {
border-color: rgba(255, 166, 132, 0.38);
background: rgba(93, 44, 28, 0.38);
}
.chapter-brief-chip.nemesis-forecast.tier-extreme {
border-color: rgba(255, 124, 124, 0.42);
background: rgba(101, 25, 28, 0.42);
}
.chapter-brief-chip.warning {
border-color: rgba(140, 204, 255, 0.28);
background: rgba(20, 45, 72, 0.34);
color: rgba(218, 241, 255, 0.95);
}
.chapter-brief-chip.engineering {
border-color: rgba(146, 222, 184, 0.38);
background: rgba(19, 64, 44, 0.36);
color: rgba(228, 255, 238, 0.96);
}
.map-adventure-buffs {
width: min(520px, 66vw);
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.map-route-hints {
width: min(520px, 66vw);
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
.map-route-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(109, 186, 255, 0.4);
background: linear-gradient(145deg, rgba(10, 20, 42, 0.82), rgba(8, 16, 34, 0.9));
color: rgba(220, 237, 255, 0.94);
font-size: 0.71rem;
line-height: 1;
}
.map-route-chip .route-icon {
font-size: 0.86rem;
}
.map-route-chip.route-event-pity,
.map-route-chip.route-shop-pity {
border-color: rgba(255, 203, 116, 0.5);
color: rgba(255, 236, 196, 0.96);
}
.map-route-chip.route-combat-dense {
border-color: rgba(255, 156, 156, 0.52);
color: rgba(255, 224, 224, 0.94);
}
.map-route-chip.route-strategic-pity {
border-color: rgba(143, 196, 255, 0.56);
background: linear-gradient(145deg, rgba(14, 31, 58, 0.86), rgba(7, 16, 36, 0.94));
color: rgba(224, 240, 255, 0.96);
}
.map-route-chip.route-vow-route {
border-color: rgba(213, 166, 108, 0.48);
background: linear-gradient(145deg, rgba(58, 34, 14, 0.84), rgba(40, 23, 10, 0.92));
color: rgba(255, 239, 210, 0.96);
}
.map-endless-panel {
width: min(520px, 66vw);
padding: 10px 12px;
border: 1px solid rgba(105, 210, 255, 0.42);
border-radius: 10px;
background: linear-gradient(145deg, rgba(6, 14, 32, 0.84), rgba(4, 10, 22, 0.9));
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
color: rgba(218, 239, 255, 0.95);
}
.map-endless-panel.pressure-up {
animation: endlessPressureRisePulse 0.85s ease;
}
.map-endless-panel.pressure-down {
animation: endlessPressureDropPulse 0.85s ease;
}
.map-endless-panel .endless-title {
font-size: 0.84rem;
font-weight: 700;
color: rgba(143, 232, 255, 0.96);
}
.map-endless-panel .endless-stats {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
font-size: 0.73rem;
}
.map-endless-panel .endless-stats span {
padding: 2px 6px;
border-radius: 999px;
background: rgba(43, 84, 123, 0.36);
border: 1px solid rgba(102, 182, 255, 0.28);
}
.map-endless-panel .endless-stats .endless-pressure-chip {
border-color: rgba(255, 219, 132, 0.5);
color: rgba(255, 240, 194, 0.96);
background: rgba(80, 63, 23, 0.42);
}
.map-endless-panel .endless-stats .endless-pressure-chip.tier-calm {
border-color: rgba(108, 205, 236, 0.45);
color: rgba(194, 241, 255, 0.95);
background: rgba(26, 61, 77, 0.42);
}
.map-endless-panel .endless-stats .endless-pressure-chip.tier-tense {
border-color: rgba(255, 199, 125, 0.5);
color: rgba(255, 235, 194, 0.95);
background: rgba(88, 59, 19, 0.45);
}
.map-endless-panel .endless-stats .endless-pressure-chip.tier-hazard {
border-color: rgba(255, 156, 97, 0.55);
color: rgba(255, 226, 197, 0.96);
background: rgba(97, 40, 24, 0.48);
}
.map-endless-panel .endless-stats .endless-pressure-chip.tier-cataclysm {
border-color: rgba(255, 97, 97, 0.62);
color: rgba(255, 221, 221, 0.96);
background: rgba(108, 23, 23, 0.5);
}
.map-endless-panel .endless-stats .endless-theme-chip {
border-color: rgba(130, 226, 255, 0.55);
color: rgba(219, 247, 255, 0.98);
background: rgba(22, 63, 86, 0.46);
}
.map-endless-panel .endless-stats .endless-theme-chip.segment-1 {
border-color: rgba(255, 184, 118, 0.6);
background: rgba(92, 56, 23, 0.5);
color: rgba(255, 234, 206, 0.97);
}
.map-endless-panel .endless-stats .endless-theme-chip.segment-2 {
border-color: rgba(142, 250, 180, 0.62);
background: rgba(24, 78, 55, 0.48);
color: rgba(220, 255, 234, 0.97);
}
.map-endless-panel .endless-stats .endless-theme-chip.segment-3 {
border-color: rgba(187, 156, 255, 0.62);
background: rgba(64, 36, 96, 0.49);
color: rgba(241, 229, 255, 0.98);
}
.map-endless-panel .endless-stats .endless-theme-chip.segment-4 {
border-color: rgba(255, 122, 122, 0.65);
background: rgba(103, 27, 27, 0.52);
color: rgba(255, 229, 229, 0.98);
}
.map-endless-panel .endless-stats .endless-theme-chip.segment-5 {
border-color: rgba(140, 224, 255, 0.6);
background: rgba(28, 62, 98, 0.49);
color: rgba(222, 244, 255, 0.98);
}
.map-endless-panel .endless-stats .endless-season-chip {
border-color: rgba(255, 219, 156, 0.58);
color: rgba(255, 241, 214, 0.98);
background: rgba(86, 58, 24, 0.5);
}
.map-endless-panel .endless-stats .endless-directive-chip {
border-color: rgba(255, 175, 124, 0.6);
color: rgba(255, 234, 214, 0.97);
background: rgba(96, 44, 24, 0.52);
}
.map-endless-panel .endless-danger-band {
margin-top: 6px;
padding: 8px 9px;
border-radius: 10px;
border: 1px solid rgba(120, 191, 236, 0.3);
background: linear-gradient(145deg, rgba(14, 34, 55, 0.56), rgba(8, 18, 34, 0.72));
}
.map-endless-panel .endless-danger-band.tier-controlled {
border-color: rgba(123, 214, 246, 0.36);
box-shadow: 0 0 0 1px rgba(90, 184, 223, 0.08) inset;
}
.map-endless-panel .endless-danger-band.tier-medium {
border-color: rgba(255, 198, 128, 0.44);
box-shadow: 0 0 0 1px rgba(255, 198, 128, 0.08) inset;
}
.map-endless-panel .endless-danger-band.tier-high {
border-color: rgba(255, 155, 102, 0.5);
box-shadow: 0 0 0 1px rgba(255, 148, 102, 0.1) inset;
}
.map-endless-panel .endless-danger-band.tier-extreme {
border-color: rgba(255, 108, 108, 0.58);
box-shadow: 0 0 0 1px rgba(255, 108, 108, 0.12) inset;
}
.map-endless-panel .endless-danger-band.tier-none {
border-color: rgba(123, 170, 196, 0.24);
background: linear-gradient(145deg, rgba(14, 28, 44, 0.5), rgba(8, 16, 29, 0.64));
}
.map-endless-panel .endless-danger-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.map-endless-panel .endless-danger-head strong {
font-size: 0.75rem;
color: rgba(255, 236, 208, 0.98);
letter-spacing: 0.02em;
}
.map-endless-panel .endless-danger-head span {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 202, 143, 0.3);
background: rgba(76, 46, 20, 0.44);
color: rgba(255, 228, 198, 0.94);
font-size: 0.67rem;
}
.map-endless-panel .endless-danger-summary {
margin: 6px 0 0;
color: rgba(214, 233, 248, 0.9);
font-size: 0.67rem;
line-height: 1.45;
}
.map-endless-panel .endless-danger-grid {
margin-top: 7px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
.map-endless-panel .endless-danger-chip {
min-width: 0;
padding: 6px 7px;
border-radius: 9px;
border: 1px solid rgba(120, 187, 233, 0.22);
background: rgba(11, 24, 40, 0.54);
display: flex;
flex-direction: column;
gap: 4px;
}
.map-endless-panel .endless-danger-chip strong {
font-size: 0.64rem;
color: rgba(149, 213, 255, 0.92);
line-height: 1.25;
}
.map-endless-panel .endless-danger-chip span {
font-size: 0.82rem;
font-weight: 700;
color: rgba(255, 236, 210, 0.96);
}
.map-endless-panel .endless-danger-chip.idle {
justify-content: center;
border-color: rgba(123, 170, 196, 0.24);
color: rgba(192, 223, 238, 0.84);
background: rgba(28, 46, 59, 0.34);
}
.map-endless-panel .endless-danger-foot {
margin-top: 7px;
display: grid;
gap: 5px;
}
.map-endless-panel .endless-danger-foot span {
color: rgba(218, 234, 247, 0.9);
font-size: 0.66rem;
line-height: 1.4;
}
.map-endless-panel .endless-theme-desc {
margin-top: 5px;
padding: 3px 8px;
border-radius: 8px;
border: 1px solid rgba(123, 210, 242, 0.28);
background: rgba(17, 42, 66, 0.42);
color: rgba(202, 236, 253, 0.92);
font-size: 0.67rem;
line-height: 1.35;
}
.map-endless-panel .endless-season-desc {
margin-top: 5px;
padding: 3px 8px;
border-radius: 8px;
border: 1px solid rgba(255, 187, 128, 0.3);
background: rgba(68, 35, 19, 0.45);
color: rgba(255, 232, 205, 0.92);
font-size: 0.67rem;
line-height: 1.35;
}
.map-endless-panel .endless-season-ledger {
margin-top: 6px;
padding: 4px 8px;
border-radius: 8px;
border: 1px solid rgba(255, 201, 139, 0.28);
background: rgba(42, 28, 18, 0.44);
color: rgba(255, 228, 197, 0.92);
font-size: 0.66rem;
line-height: 1.35;
}
.map-endless-panel .endless-section-title {
font-size: 0.68rem;
letter-spacing: 0.08em;
color: rgba(151, 214, 255, 0.88);
margin-bottom: 6px;
}
.map-endless-panel .endless-directive-controls,
.map-endless-panel .endless-season-goals,
.map-endless-panel .endless-collapse-ledger {
margin-top: 7px;
padding: 7px 8px;
border-radius: 8px;
border: 1px solid rgba(111, 168, 212, 0.2);
background: rgba(10, 22, 38, 0.42);
}
.map-endless-panel .endless-directive-options {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.map-endless-panel .endless-directive-option {
border: 1px solid rgba(121, 180, 228, 0.28);
border-radius: 999px;
background: rgba(22, 44, 70, 0.72);
color: rgba(220, 238, 255, 0.94);
font-size: 0.68rem;
line-height: 1.1;
padding: 5px 10px;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.map-endless-panel .endless-directive-option:hover {
transform: translateY(-1px);
border-color: rgba(255, 201, 134, 0.42);
}
.map-endless-panel .endless-directive-option.active {
border-color: rgba(255, 184, 118, 0.62);
background: linear-gradient(145deg, rgba(92, 58, 23, 0.66), rgba(55, 34, 18, 0.78));
color: rgba(255, 238, 214, 0.98);
}
.map-endless-panel .endless-directive-option.risk-steady {
border-color: rgba(121, 225, 191, 0.34);
}
.map-endless-panel .endless-directive-option.risk-volatile {
border-color: rgba(255, 129, 129, 0.38);
}
.map-endless-panel .directive-risk {
opacity: 0.84;
}
.map-endless-panel .endless-directive-note,
.map-endless-panel .endless-collapse-note {
margin-top: 6px;
color: rgba(208, 228, 248, 0.88);
font-size: 0.66rem;
line-height: 1.4;
}
.map-endless-panel .endless-season-goal-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.map-endless-panel .endless-season-goal {
border-radius: 10px;
padding: 8px;
border: 1px solid rgba(117, 177, 228, 0.22);
background: rgba(15, 30, 48, 0.48);
min-height: 92px;
}
.map-endless-panel .endless-season-goal.completed {
border-color: rgba(121, 231, 184, 0.34);
background: rgba(17, 56, 40, 0.42);
}
.map-endless-panel .endless-season-goal .goal-tier {
font-size: 0.65rem;
color: rgba(154, 214, 255, 0.86);
letter-spacing: 0.08em;
}
.map-endless-panel .endless-season-goal .goal-title {
margin-top: 3px;
color: rgba(238, 245, 255, 0.96);
font-size: 0.74rem;
font-weight: 700;
}
.map-endless-panel .endless-season-goal .goal-progress {
margin-top: 4px;
color: rgba(255, 221, 179, 0.92);
font-size: 0.65rem;
line-height: 1.35;
}
.map-endless-panel .endless-season-goal.completed .goal-progress {
color: rgba(188, 255, 222, 0.95);
}
.map-endless-panel .endless-season-goal .goal-desc {
margin-top: 5px;
color: rgba(205, 221, 238, 0.82);
font-size: 0.63rem;
line-height: 1.35;
}
.map-endless-panel .endless-collapse-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.map-endless-panel .endless-collapse-chip {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 163, 134, 0.28);
background: rgba(74, 33, 24, 0.38);
color: rgba(255, 225, 205, 0.94);
font-size: 0.67rem;
}
.map-endless-panel .endless-collapse-chip.idle {
border-color: rgba(123, 170, 196, 0.24);
color: rgba(192, 223, 238, 0.84);
background: rgba(28, 46, 59, 0.34);
}
.map-endless-panel .endless-stats .endless-paranoia-chip {
border-color: rgba(255, 173, 112, 0.45);
color: rgba(255, 229, 208, 0.96);
background: rgba(88, 43, 24, 0.46);
}
.map-endless-panel .endless-stats .endless-paranoia-chip.active {
border-color: rgba(255, 120, 90, 0.58);
background: rgba(98, 31, 25, 0.52);
color: rgba(255, 223, 215, 0.98);
}
.map-endless-panel .endless-paranoia-summary {
margin-top: 6px;
padding: 4px 8px;
border-radius: 8px;
border: 1px solid rgba(255, 162, 125, 0.28);
background: rgba(52, 24, 18, 0.44);
color: rgba(255, 226, 208, 0.93);
font-size: 0.67rem;
line-height: 1.35;
}
.map-endless-panel .endless-paranoia-effects {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.map-endless-panel .endless-paranoia-effect {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 176, 136, 0.32);
color: rgba(255, 222, 204, 0.94);
background: rgba(76, 33, 24, 0.42);
font-size: 0.68rem;
}
.map-endless-panel .endless-paranoia-effect.idle {
border-color: rgba(123, 170, 196, 0.24);
color: rgba(192, 223, 238, 0.84);
background: rgba(28, 46, 59, 0.34);
}
.map-endless-panel .endless-mutators {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.map-endless-panel .endless-mutator-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(254, 124, 124, 0.35);
color: rgba(255, 205, 205, 0.95);
background: rgba(66, 20, 27, 0.45);
font-size: 0.7rem;
}
@keyframes endlessPressureRisePulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 143, 76, 0.36);
border-color: rgba(105, 210, 255, 0.42);
}
35% {
box-shadow: 0 0 0 4px rgba(255, 143, 76, 0.14);
border-color: rgba(255, 161, 92, 0.8);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 143, 76, 0);
border-color: rgba(105, 210, 255, 0.42);
}
}
@keyframes endlessPressureDropPulse {
0% {
box-shadow: 0 0 0 0 rgba(91, 225, 171, 0.28);
border-color: rgba(105, 210, 255, 0.42);
}
35% {
box-shadow: 0 0 0 4px rgba(91, 225, 171, 0.12);
border-color: rgba(105, 233, 188, 0.76);
}
100% {
box-shadow: 0 0 0 0 rgba(91, 225, 171, 0);
border-color: rgba(105, 210, 255, 0.42);
}
}
.map-buff-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(96, 165, 250, 0.45);
background: linear-gradient(140deg, rgba(13, 25, 58, 0.86), rgba(10, 20, 40, 0.9));
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
color: rgba(222, 236, 255, 0.94);
font-size: 0.72rem;
line-height: 1;
}
.map-buff-icon {
font-size: 0.9rem;
}
.map-buff-name {
opacity: 0.9;
}
.map-buff-count {
color: rgba(250, 216, 124, 0.96);
font-weight: 700;
}
.map-legacy-mission {
width: min(460px, 62vw);
padding: 9px 12px;
border: 1px solid rgba(120, 169, 255, 0.45);
border-radius: 10px;
background: linear-gradient(145deg, rgba(8, 16, 42, 0.8), rgba(8, 14, 35, 0.82));
}
.map-legacy-mission.completed {
border-color: rgba(207, 170, 112, 0.68);
}
.map-legacy-mission .mission-title {
color: rgba(232, 241, 255, 0.94);
font-size: 0.84rem;
font-weight: 600;
}
.map-legacy-mission .mission-desc {
margin-top: 3px;
color: rgba(197, 216, 247, 0.8);
font-size: 0.76rem;
line-height: 1.3;
}
.map-legacy-mission .mission-track {
margin-top: 6px;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.15);
}
.map-legacy-mission .mission-fill {
width: 0;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #7f5af0 0%, #46d3ff 100%);
transition: width 0.25s ease;
}
.map-legacy-mission.completed .mission-fill {
background: linear-gradient(90deg, #b58c37 0%, #f3d184 100%);
}
.map-legacy-mission .mission-progress {
margin-top: 4px;
color: rgba(200, 220, 255, 0.86);
font-size: 0.74rem;
text-align: right;
}
.map-run-path-flash {
width: min(460px, 62vw);
gap: 8px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(121, 241, 218, 0.42);
background:
radial-gradient(circle at top right, rgba(108, 235, 212, 0.18), transparent 34%),
linear-gradient(145deg, rgba(8, 31, 38, 0.9), rgba(13, 33, 48, 0.92));
box-shadow: 0 12px 34px rgba(2, 13, 18, 0.26);
animation: mapRunPathFlashEnter 0.4s ease, mapRunPathFlashPulse 2.6s ease-in-out infinite;
}
.map-run-path-flash.completed {
border-color: rgba(255, 204, 120, 0.54);
background:
radial-gradient(circle at top right, rgba(255, 202, 109, 0.16), transparent 36%),
linear-gradient(145deg, rgba(52, 30, 8, 0.9), rgba(19, 40, 52, 0.92));
}
.map-run-path-flash-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.map-run-path-flash-badge,
.map-run-path-flash-status {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 5px 12px;
border-radius: 999px;
font-size: 0.72rem;
line-height: 1.2;
}
.map-run-path-flash-badge {
border: 1px solid rgba(138, 247, 227, 0.28);
background: rgba(32, 110, 98, 0.24);
color: rgba(232, 255, 250, 0.98);
font-weight: 700;
}
.map-run-path-flash-status {
border: 1px solid rgba(255, 211, 148, 0.24);
background: rgba(69, 49, 18, 0.3);
color: rgba(255, 237, 205, 0.94);
}
.map-run-path-flash-title {
color: rgba(244, 251, 255, 0.98);
font-size: 0.86rem;
font-weight: 700;
letter-spacing: 0.2px;
}
.map-run-path-flash-reward {
color: rgba(255, 224, 169, 0.96);
font-size: 0.76rem;
font-weight: 700;
}
.map-run-path-flash-next {
color: rgba(204, 231, 236, 0.82);
font-size: 0.72rem;
line-height: 1.45;
}
@keyframes mapRunPathFlashEnter {
from {
transform: translateY(-10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes mapRunPathFlashPulse {
0%,
100% {
box-shadow: 0 12px 34px rgba(2, 13, 18, 0.24);
}
50% {
box-shadow: 0 16px 40px rgba(7, 31, 38, 0.32);
}
}
@media (max-width: 900px) {
.legacy-mission-tracker {
top: 74px;
width: min(420px, 95vw);
}
.battle-command-panel {
top: 146px;
width: min(500px, 96vw);
}
.battle-command-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.battle-advisor-toggle {
font-size: 0.64rem;
}
.battle-advisor-section-head {
flex-direction: column;
align-items: flex-start;
}
.battle-advisor-section-note {
text-align: left;
}
.map-header-right {
width: 100%;
align-items: stretch;
}
.map-chapter-brief {
width: 100%;
}
.map-situation-overview {
width: 100%;
}
.map-overview-grid {
grid-template-columns: 1fr;
}
.map-overview-item {
min-height: 50px;
}
.map-chapter-risk-card {
width: 100%;
}
.map-risk-line {
grid-template-columns: 46px 1fr;
}
.map-adventure-buffs {
width: 100%;
justify-content: flex-start;
}
.map-route-hints {
width: 100%;
justify-content: flex-start;
}
.map-endless-panel {
width: 100%;
}
.map-endless-panel .endless-season-goal-grid {
grid-template-columns: 1fr;
}
.preview-endless-directives {
gap: 6px;
}
.preview-endless-directive-btn {
width: 100%;
justify-content: center;
}
.map-legacy-mission {
width: 100%;
}
.map-run-path-flash {
width: 100%;
}
.map-run-path-flash-head {
flex-direction: column;
align-items: stretch;
}
.map-run-path-flash-badge,
.map-run-path-flash-status {
justify-content: center;
}
}
/* Compact desktop / tablet landscape battle layout:
keep hand cards and piles fully visible without bottom clipping. */
@media (min-width: 769px) and (max-width: 900px) {
.battle-container {
grid-template-columns: 1fr 120px 1fr;
grid-template-rows: 72px minmax(0, 1fr) 210px;
}
.hand-area {
min-height: 210px;
height: auto;
padding-top: 10px;
padding-bottom: 16px;
transform: translateY(0);
overflow: visible;
}
.hand-cards {
min-height: 150px;
align-self: flex-end;
overflow: visible;
}
#hand-cards .card {
transform: rotateX(8deg) translateY(-8px) scale(0.88);
}
.battle-command-panel {
top: 132px;
}
}
.boss-act-panel {
display: none;
margin: 8px 0 14px;
padding: 14px 16px;
border: 1px solid rgba(255, 215, 130, 0.32);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(34, 24, 16, 0.95), rgba(64, 28, 18, 0.88)),
radial-gradient(circle at top right, rgba(255, 188, 92, 0.18), transparent 44%);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(10px);
}
.boss-act-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.boss-act-title {
color: #ffe4a8;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.08em;
}
.boss-act-subtitle {
margin-top: 4px;
color: rgba(255, 241, 214, 0.78);
font-size: 0.78rem;
}
.boss-act-hp {
padding: 4px 10px;
border-radius: 999px;
background: rgba(255, 202, 116, 0.14);
color: #ffd89c;
font-size: 0.76rem;
font-weight: 700;
white-space: nowrap;
}
.boss-act-track {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin-top: 12px;
}
.boss-act-chip {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
padding: 9px 10px;
border: 1px solid rgba(255, 227, 176, 0.14);
border-radius: 14px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 239, 212, 0.72);
transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.boss-act-chip.active {
border-color: rgba(255, 210, 120, 0.72);
background: linear-gradient(135deg, rgba(255, 195, 90, 0.18), rgba(255, 110, 76, 0.16));
color: #fff0cb;
transform: translateY(-1px);
}
.boss-act-chip.cleared {
border-color: rgba(129, 222, 182, 0.34);
background: rgba(88, 178, 139, 0.14);
color: rgba(213, 255, 236, 0.82);
}
.boss-act-chip-index {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
font-size: 0.76rem;
font-weight: 800;
flex-shrink: 0;
}
.boss-act-chip-label {
min-width: 0;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.35;
}
.boss-act-body {
display: grid;
gap: 8px;
margin-top: 12px;
}
.boss-act-counter-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.boss-act-counter-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 219, 162, 0.24);
background: rgba(255, 250, 239, 0.08);
color: rgba(255, 238, 208, 0.92);
font-size: 0.68rem;
line-height: 1.2;
letter-spacing: 0.03em;
}
.boss-act-counter-chip.chip-finish,
.boss-act-counter-chip.chip-burst_window,
.boss-act-counter-chip.chip-pressure {
border-color: rgba(255, 167, 122, 0.42);
background: rgba(130, 50, 22, 0.24);
color: #ffe3cc;
}
.boss-act-counter-chip.chip-protect_core,
.boss-act-counter-chip.chip-low_value,
.boss-act-counter-chip.chip-hand_buffer {
border-color: rgba(255, 221, 135, 0.4);
background: rgba(113, 83, 18, 0.24);
color: #fff1c7;
}
.boss-act-counter-chip.chip-cycle,
.boss-act-counter-chip.chip-cycle_tools,
.boss-act-counter-chip.chip-careful_finish,
.boss-act-counter-chip.chip-avoid_value {
border-color: rgba(145, 220, 255, 0.38);
background: rgba(25, 72, 112, 0.22);
color: #dff5ff;
}
.boss-act-line {
display: grid;
grid-template-columns: 78px 1fr;
gap: 10px;
align-items: start;
padding: 8px 10px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.04);
}
.boss-act-line .label {
color: rgba(255, 210, 138, 0.8);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.boss-act-line .value {
color: rgba(248, 244, 235, 0.92);
font-size: 0.8rem;
line-height: 1.55;
}
.boss-act-line.fail {
background: rgba(140, 28, 28, 0.18);
}
.boss-sealed-card {
position: relative;
outline: 2px solid rgba(255, 173, 90, 0.9);
box-shadow: 0 0 0 1px rgba(255, 234, 195, 0.22), 0 16px 34px rgba(88, 22, 12, 0.34);
}
.boss-sealed-card::after {
content: '';
position: absolute;
inset: 8px;
border: 1px dashed rgba(255, 213, 146, 0.6);
border-radius: 12px;
pointer-events: none;
}
.boss-sealed-badge {
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
padding: 3px 8px;
border-radius: 999px;
background: linear-gradient(135deg, rgba(156, 40, 20, 0.95), rgba(240, 122, 48, 0.92));
color: #fff6e8;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.05em;
box-shadow: 0 8px 16px rgba(64, 12, 6, 0.28);
pointer-events: none;
}
@media (max-width: 900px) {
.boss-act-panel {
margin: 6px 0 10px;
padding: 12px;
border-radius: 16px;
}
.boss-act-header {
flex-direction: column;
gap: 8px;
}
.boss-act-track {
grid-template-columns: 1fr;
gap: 8px;
}
.boss-act-line {
grid-template-columns: 1fr;
gap: 4px;
}
.boss-sealed-badge {
top: 6px;
right: 6px;
font-size: 0.6rem;
}
}
.boss-act-panel {
grid-column: 1 / -1;
grid-row: 2;
justify-self: center;
align-self: start;
width: min(1120px, calc(100% - 32px));
margin-top: 10px;
z-index: 24;
pointer-events: none;
}
@media (max-width: 768px) {
.boss-act-panel {
width: calc(100% - 18px);
margin-top: 6px;
order: 1;
align-self: stretch;
}
}
/* ===================================
UI Review Pass - Desktop Rhythm & Battle Visibility
=================================== */
#main-menu .menu-content {
width: min(720px, 92vw);
min-height: auto;
padding: 32px 42px 28px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto;
border: 1px solid rgba(207, 170, 112, 0.16);
border-radius: 28px;
background:
linear-gradient(180deg, rgba(7, 11, 20, 0.74), rgba(4, 7, 14, 0.3)),
radial-gradient(circle at top, rgba(46, 68, 108, 0.18), transparent 62%);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(14px);
}
#main-menu .game-description {
max-width: 500px;
margin-bottom: 20px;
}
#main-menu .menu-buttons {
gap: 12px;
}
#main-menu .talisman-btn {
transition:
box-shadow var(--transition-fast),
filter var(--transition-fast),
opacity var(--transition-fast);
}
#main-menu .talisman-btn:hover {
transform: none;
}
#battle-screen .end-turn-btn,
.battle-screen .end-turn-btn {
transition:
box-shadow 0.3s ease,
filter 0.3s ease,
opacity 0.3s ease,
background 0.3s ease,
border-color 0.3s ease;
}
#battle-screen .end-turn-btn:hover:not(:disabled),
.battle-screen .end-turn-btn:hover:not(:disabled),
#battle-screen .end-turn-btn:active:not(:disabled),
.battle-screen .end-turn-btn:active:not(:disabled) {
transform: none;
}
#main-menu .menu-utilities {
gap: 22px;
margin-top: 28px;
flex-wrap: wrap;
row-gap: 18px;
}
.character-selection-container {
padding-bottom: 170px;
}
.character-selection-footer {
position: sticky;
bottom: 0;
z-index: 24;
padding: 18px 20px 24px;
background: linear-gradient(180deg, rgba(2, 5, 12, 0), rgba(2, 5, 12, 0.82) 22%, rgba(2, 5, 12, 0.96) 100%);
border-top: 1px solid rgba(255, 221, 169, 0.12);
backdrop-filter: blur(12px);
}
.character-selection-footer .menu-btn,
.character-selection-footer .talisman-btn {
min-width: 240px;
}
.realm-select-layout {
width: min(1380px, 100%);
margin: 0 auto;
padding: 24px 28px 32px;
align-items: stretch;
}
.realm-list-container {
align-self: stretch;
height: 100%;
max-height: 100%;
align-content: start;
padding: 6px 12px 18px 6px;
}
.realm-preview-panel {
align-self: stretch;
height: 100%;
max-height: 100%;
max-width: 420px;
}
.environment-display {
top: 82px;
left: 16px;
max-width: clamp(250px, 24vw, 340px);
padding: 6px 9px;
gap: 6px;
border-radius: 12px;
backdrop-filter: blur(12px);
}
.legacy-mission-tracker {
top: 82px;
left: auto;
right: 16px;
transform: none;
width: clamp(220px, 20vw, 280px);
padding: 8px 10px;
border-radius: 12px;
z-index: 111;
}
.legacy-mission-header {
gap: 6px;
}
.legacy-mission-tag,
.legacy-mission-reward,
.legacy-mission-progress-text {
font-size: 0.72rem;
}
.legacy-mission-title {
font-size: 0.82rem;
line-height: 1.3;
}
.battle-command-panel {
top: 154px;
left: 16px;
transform: none;
width: clamp(280px, 24vw, 360px);
padding: 8px 9px;
border-radius: 12px;
max-height: calc(100vh - 392px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(124, 188, 255, 0.46) transparent;
z-index: 109;
}
.battle-command-panel::-webkit-scrollbar,
.battle-tactical-advisor::-webkit-scrollbar {
width: 5px;
}
.battle-command-panel::-webkit-scrollbar-thumb,
.battle-tactical-advisor::-webkit-scrollbar-thumb {
background: rgba(124, 188, 255, 0.42);
border-radius: 999px;
}
.battle-command-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
.battle-command-btn {
min-height: 54px;
padding: 6px 7px;
}
.battle-command-name {
font-size: 0.72rem;
}
.battle-command-meta {
font-size: 0.63rem;
}
.battle-command-title-group {
gap: 6px;
}
.battle-command-spirit-chip {
padding: 2px 6px;
font-size: 0.56rem;
}
.battle-command-spirit-name {
max-width: 56px;
overflow: hidden;
text-overflow: ellipsis;
}
.battle-tactical-advisor {
margin-top: 6px;
max-height: min(180px, 24vh);
overflow-y: auto;
}
.battle-advisor-title {
font-size: 0.68rem;
}
.battle-advisor-line {
margin-top: 4px;
font-size: 0.64rem;
line-height: 1.28;
}
.battle-advisor-section-title,
.battle-advisor-section-note,
.battle-advisor-tempo-label,
.battle-advisor-tempo-score,
.battle-advisor-status-chip,
.battle-system-chip-label,
.battle-system-chip-meta,
.battle-system-card-label,
.battle-system-card-meta,
.battle-system-card-detail,
.battle-advisor-chain-tag,
.battle-advisor-chain-step {
font-size: 0.58rem;
}
.battle-advisor-chain-title {
font-size: 0.67rem;
}
.battle-system-chip-value,
.battle-system-card-value {
font-size: 0.66rem;
}
.battle-advisor-cardstep-btn,
.battle-advisor-matrix-btn {
font-size: 0.58rem;
padding: 4px 6px;
}
.battle-advisor-spirit-name-line {
font-size: 0.64rem;
}
.battle-advisor-spirit-summary,
.battle-advisor-spirit-passive,
.battle-advisor-spirit-active,
.battle-advisor-spirit-btn {
font-size: 0.58rem;
}
.boss-act-panel {
width: clamp(420px, 44vw, 760px);
margin-top: 8px;
padding: 10px 12px;
border-radius: 16px;
}
.boss-act-title {
font-size: 0.92rem;
}
.boss-act-subtitle,
.boss-act-hp {
font-size: 0.72rem;
}
.boss-act-track {
gap: 8px;
margin-top: 9px;
}
.boss-act-counter-chips {
margin-top: 8px;
gap: 5px;
}
.boss-act-counter-chip {
font-size: 0.62rem;
padding: 3px 8px;
}
.boss-act-chip {
padding: 7px 8px;
gap: 8px;
}
.boss-act-chip-index {
width: 22px;
height: 22px;
font-size: 0.7rem;
}
.boss-act-chip-label {
font-size: 0.7rem;
}
.boss-act-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin-top: 8px;
}
.boss-act-line {
grid-template-columns: 64px 1fr;
gap: 8px;
padding: 6px 8px;
}
.boss-act-line.fail {
grid-column: 1 / -1;
}
.boss-act-line .label {
font-size: 0.64rem;
}
.boss-act-line .value {
font-size: 0.72rem;
line-height: 1.4;
}
@media (max-width: 1180px) {
.environment-display {
max-width: clamp(220px, 25vw, 300px);
}
.chapter-rule-chip,
.chapter-omen-chip,
.chapter-leyline-chip,
.chapter-formation-chip {
font-size: 0.69rem;
}
.legacy-mission-tracker {
width: clamp(210px, 22vw, 250px);
}
.battle-command-panel {
width: clamp(260px, 26vw, 320px);
max-height: calc(100vh - 360px);
}
.boss-act-panel {
width: clamp(400px, 42vw, 620px);
}
}
/* Battle HUD lane refinement: keep the center lane readable when side panels are present. */
.boss-act-panel {
justify-self: center;
max-width: calc(100% - 32px);
width: min(620px, 44vw);
margin-left: 0;
margin-right: 0;
z-index: 18;
}
@media (max-width: 1180px) {
.boss-act-panel {
width: min(540px, 50vw);
}
}
@media (max-width: 900px) {
.boss-act-panel {
width: min(500px, calc(100% - 18px));
margin-left: auto;
margin-right: auto;
}
}
/* ===================================
Archive / Detail Unified Two-Rail Layout
=================================== */
#collection,
#treasure-compendium {
background:
radial-gradient(circle at 18% 14%, rgba(207, 170, 112, 0.12) 0%, transparent 28%),
radial-gradient(circle at 82% 82%, rgba(70, 128, 255, 0.12) 0%, transparent 26%),
linear-gradient(180deg, #0b1021 0%, #060914 100%);
}
.codex-shell,
.treasure-compendium-shell {
width: min(1320px, calc(100% - 40px));
margin: 10px auto 28px;
}
.codex-scroll-container,
.treasure-compendium-shell {
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.24);
}
.codex-layout,
.treasure-compendium-layout {
display: grid;
grid-template-columns: minmax(0, 1.24fr) minmax(300px, 0.76fr);
gap: 22px;
align-items: start;
}
.codex-main-column,
.treasure-compendium-main,
.detail-dual-main,
.detail-dual-side,
.codex-side-column,
.treasure-compendium-side {
display: grid;
gap: 18px;
}
.codex-main-column,
.treasure-compendium-main {
min-width: 0;
}
.codex-side-column,
.treasure-compendium-side {
position: sticky;
top: 14px;
}
.codex-side-card,
.compendium-side-card,
.detail-dual-panel {
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: linear-gradient(180deg, rgba(8, 13, 30, 0.92), rgba(5, 8, 20, 0.94));
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.26);
backdrop-filter: blur(10px);
padding: 18px 20px;
}
.codex-side-kicker,
.detail-kicker,
.detail-panel-kicker {
display: inline-flex;
align-items: center;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(255, 215, 122, 0.24);
background: rgba(24, 19, 10, 0.42);
color: rgba(255, 226, 167, 0.92);
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.codex-side-card h3,
.compendium-side-card h3,
.detail-panel-heading h3,
.detail-header h2,
.cd-header h2 {
margin-top: 10px;
color: #f3f6ff;
}
.codex-side-card h3,
.compendium-side-card h3,
.detail-panel-heading h3 {
font-size: 1.16rem;
}
.codex-summary-metric {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 14px;
}
.codex-summary-metric strong {
font-size: clamp(2rem, 3vw, 2.6rem);
color: var(--accent-gold);
line-height: 1;
}
.codex-summary-metric span,
.codex-side-note {
color: rgba(212, 224, 247, 0.76);
line-height: 1.55;
}
.codex-progress-track {
margin-top: 14px;
height: 10px;
border-radius: 999px;
overflow: hidden;
background: rgba(255, 255, 255, 0.08);
}
.codex-progress-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #62c4ff 0%, #80f1ff 48%, #ffe18d 100%);
}
.codex-summary-grid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.codex-summary-grid.two-cols {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.codex-summary-chip {
padding: 12px 13px;
border-radius: 14px;
border: 1px solid rgba(110, 161, 255, 0.2);
background: rgba(14, 20, 40, 0.82);
display: grid;
gap: 4px;
}
.codex-summary-chip strong {
color: #f4f7ff;
font-size: 1.1rem;
}
.codex-summary-chip span {
color: rgba(197, 214, 240, 0.72);
font-size: 0.78rem;
}
.codex-side-list {
margin-top: 14px;
padding-left: 18px;
display: grid;
gap: 10px;
color: rgba(215, 226, 244, 0.84);
line-height: 1.55;
}
.codex-side-list.compact {
gap: 8px;
}
.codex-guide-card {
background: linear-gradient(180deg, rgba(11, 19, 42, 0.95), rgba(7, 10, 23, 0.96));
}
.codex-section,
.compendium-grid-container,
.compendium-stats-wrapper {
border-radius: 22px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(8, 13, 30, 0.92), rgba(5, 8, 20, 0.94));
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}
.codex-section {
margin-bottom: 0;
padding: 18px 20px 22px;
}
.codex-scroll-container {
height: calc(100% - 80px);
overflow-y: auto;
padding: 0 0 12px;
}
.treasure-compendium-layout {
height: calc(100% - 60px);
padding: 0;
}
.treasure-compendium-main {
min-height: calc(100vh - 180px);
}
.compendium-stats-wrapper {
padding: 16px 18px;
}
.compendium-grid-container {
padding: 18px;
}
.compendium-grid {
padding-bottom: 12px;
}
.card-detail-overlay {
position: fixed;
inset: 0;
z-index: 1400;
display: none;
align-items: center;
justify-content: center;
padding: 22px;
background: rgba(4, 7, 16, 0.8);
backdrop-filter: blur(14px);
}
.card-detail-container,
.treasure-detail-layout {
width: min(1180px, calc(100vw - 44px));
max-height: min(84vh, 860px);
}
.detail-dual-layout {
display: grid;
grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
gap: 18px;
align-items: start;
}
.detail-dual-main {
grid-template-columns: minmax(0, 1fr);
}
.detail-dual-side {
align-content: start;
}
.treasure-detail-view {
padding: 24px;
width: min(1180px, 96vw);
max-width: 96vw;
height: auto;
max-height: 88vh;
overflow: auto;
background: linear-gradient(180deg, rgba(7, 11, 24, 0.98), rgba(4, 7, 16, 0.98));
border: 1px solid rgba(255, 215, 122, 0.24);
box-shadow: 0 28px 60px rgba(0, 0, 0, 0.48);
}
.treasure-stage-panel,
.cd-stage-panel {
min-height: 360px;
}
.treasure-visual-col,
.cd-preview-pane {
width: 100%;
min-height: 320px;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(135deg, #111827 0%, #090e1d 100%);
}
.treasure-visual-col {
height: 100%;
border-right: none;
}
.treasure-story-panel,
.cd-copy-panel {
display: grid;
gap: 16px;
}
.detail-panel-heading {
display: grid;
gap: 8px;
}
.detail-panel-heading.compact {
gap: 6px;
}
.detail-header {
padding-bottom: 14px;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.detail-header h2,
.cd-header h2 {
font-family: var(--font-display);
font-size: clamp(1.8rem, 2.8vw, 2.5rem);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.38);
}
.detail-sub {
margin-top: 8px;
text-transform: none;
letter-spacing: 0.08em;
color: rgba(203, 218, 245, 0.78);
}
.detail-status-strip {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.detail-status-chip {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(122, 184, 255, 0.28);
background: rgba(18, 31, 61, 0.78);
color: rgba(224, 236, 255, 0.94);
font-size: 0.72rem;
line-height: 1.2;
}
.detail-status-chip.owned {
border-color: rgba(122, 224, 170, 0.42);
background: rgba(16, 61, 40, 0.7);
color: rgba(222, 255, 237, 0.94);
}
.detail-status-chip.locked {
border-color: rgba(255, 164, 164, 0.34);
background: rgba(68, 24, 34, 0.72);
color: rgba(255, 228, 228, 0.92);
}
.detail-status-chip.research {
border-color: rgba(255, 215, 122, 0.3);
background: rgba(56, 40, 12, 0.76);
color: rgba(255, 236, 201, 0.94);
}
.detail-status-chip.eligible {
border-color: rgba(122, 224, 170, 0.42);
background: rgba(16, 61, 40, 0.7);
color: rgba(222, 255, 237, 0.94);
}
.detail-status-chip.muted {
border-color: rgba(171, 187, 220, 0.24);
background: rgba(28, 35, 55, 0.74);
color: rgba(213, 223, 241, 0.82);
}
.collection-alert {
margin: 10px 0 0;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(24, 31, 52, 0.82);
color: rgba(226, 236, 252, 0.92);
font-size: 0.84rem;
line-height: 1.5;
}
.collection-alert.danger {
border-color: rgba(255, 138, 138, 0.36);
background: rgba(74, 24, 31, 0.74);
color: rgba(255, 231, 231, 0.96);
}
.detail-source-card,
.detail-lore-card,
.cd-summary-card,
.cd-lore-card,
.cd-section,
.cd-desc-box,
.detail-desc-box {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(10, 15, 30, 0.72);
}
.detail-source-card,
.detail-lore-card,
.cd-summary-card,
.cd-lore-card,
.cd-section {
padding: 14px 16px;
}
.detail-desc-box,
.cd-desc-box {
padding: 16px 18px;
line-height: 1.7;
border-left: 3px solid var(--accent-gold);
}
.detail-mini-label {
display: inline-block;
margin-bottom: 8px;
color: rgba(162, 221, 255, 0.78);
font-size: 0.76rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.detail-source {
color: rgba(222, 232, 248, 0.9);
line-height: 1.6;
}
.treasure-research-grid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.treasure-research-chip {
padding: 12px 13px;
border-radius: 14px;
border: 1px solid rgba(122, 184, 255, 0.18);
background: rgba(12, 18, 36, 0.8);
display: grid;
gap: 6px;
}
.treasure-research-chip strong {
color: #f4f7ff;
font-size: 0.95rem;
}
.treasure-research-chip span,
.treasure-research-chip em {
font-style: normal;
color: rgba(201, 214, 240, 0.78);
font-size: 0.76rem;
line-height: 1.45;
}
.treasure-research-chip.full {
border-color: rgba(255, 214, 110, 0.34);
background: linear-gradient(180deg, rgba(57, 41, 12, 0.86), rgba(22, 16, 7, 0.88));
}
.treasure-research-chip.active {
border-color: rgba(132, 232, 197, 0.3);
background: linear-gradient(180deg, rgba(14, 46, 39, 0.84), rgba(7, 18, 15, 0.88));
}
.treasure-research-chip.forming {
border-color: rgba(122, 184, 255, 0.24);
}
.cd-summary-card {
margin-top: 14px;
display: grid;
gap: 10px;
}
.cd-summary-row {
display: flex;
justify-content: space-between;
gap: 12px;
color: rgba(205, 219, 245, 0.82);
font-size: 0.9rem;
}
.cd-summary-row strong {
color: #f5f8ff;
text-align: right;
}
.cd-effects-list {
margin: 10px 0 0;
padding-left: 18px;
display: grid;
gap: 8px;
color: rgba(220, 231, 248, 0.88);
line-height: 1.55;
}
.cd-lore {
color: rgba(219, 225, 241, 0.78);
font-style: italic;
line-height: 1.7;
}
.card-detail-main .card-preview-wrapper {
min-height: 320px;
display: grid;
place-items: center;
padding: 14px;
}
.card-detail-main .big-preview {
transform: scale(1.04);
transform-origin: center;
}
.detail-modal-actions {
display: flex;
justify-content: stretch;
}
.cd-close-btn {
width: 100%;
border: 1px solid rgba(207, 170, 112, 0.44);
border-radius: 14px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(48, 36, 13, 0.9), rgba(25, 18, 7, 0.92));
color: rgba(255, 236, 199, 0.94);
font-weight: 700;
letter-spacing: 0.08em;
cursor: pointer;
}
.cd-close-btn:hover {
border-color: rgba(255, 217, 145, 0.62);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
}
@media (max-width: 1100px) {
.codex-layout,
.treasure-compendium-layout,
.detail-dual-layout {
grid-template-columns: 1fr;
}
.codex-side-column,
.treasure-compendium-side {
position: static;
}
}
@media (max-width: 768px) {
.codex-shell,
.treasure-compendium-shell {
width: calc(100% - 20px);
margin: 8px auto 20px;
}
.codex-section,
.codex-side-card,
.compendium-side-card,
.detail-dual-panel,
.compendium-grid-container,
.compendium-stats-wrapper {
padding-left: 14px;
padding-right: 14px;
}
.codex-summary-grid {
grid-template-columns: 1fr 1fr;
}
.treasure-research-grid {
grid-template-columns: 1fr;
}
.collection-tab-bar {
overflow-x: auto;
flex-wrap: nowrap;
padding: 12px;
}
.collection-tab-btn {
white-space: nowrap;
}
.collection-tab-panel .codex-scroll-container {
max-height: none;
}
.collection-card-grid,
.sanctum-room-grid,
.collection-detail-grid,
.build-metric-grid,
.collection-mini-grid {
grid-template-columns: 1fr;
}
.unlock-feed-item {
grid-template-columns: 1fr;
}
.card-detail-overlay {
padding: 10px;
}
.card-detail-container,
.treasure-detail-layout,
.treasure-detail-view {
width: 100%;
max-width: 100%;
}
.treasure-detail-view {
padding: 16px 12px 14px;
max-height: 92vh;
}
.treasure-visual-col,
.cd-preview-pane {
min-height: 240px;
}
.card-detail-main .big-preview {
transform: scale(0.92);
}
}
.compendium-toolbar,
.codex-toolbar {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 14px 16px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(8, 13, 30, 0.92), rgba(5, 8, 20, 0.94));
box-shadow: 0 16px 28px rgba(0, 0, 0, 0.18);
}
.compendium-control {
display: grid;
gap: 6px;
min-width: 180px;
color: rgba(208, 222, 245, 0.86);
font-size: 0.82rem;
}
.compendium-control.compendium-control-wide {
flex: 1 1 280px;
min-width: min(320px, 100%);
}
.compendium-control select,
.compendium-control input {
border-radius: 12px;
border: 1px solid rgba(117, 181, 255, 0.26);
background: rgba(10, 18, 36, 0.92);
color: #eef4ff;
padding: 10px 12px;
font-size: 0.9rem;
}
.compendium-control input::placeholder {
color: rgba(193, 208, 235, 0.48);
}
.compendium-control input:focus,
.compendium-control select:focus {
outline: none;
border-color: rgba(132, 210, 255, 0.52);
box-shadow: 0 0 0 3px rgba(83, 160, 255, 0.12);
}
.compendium-chip-groups {
display: grid;
gap: 10px;
flex: 1 1 100%;
}
.compendium-chip-group {
display: grid;
gap: 8px;
}
.compendium-chip-label {
color: rgba(208, 222, 245, 0.72);
font-size: 0.76rem;
letter-spacing: 0.04em;
}
.compendium-chip-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.compendium-chip {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 7px 12px;
background: rgba(255, 255, 255, 0.05);
color: rgba(234, 240, 250, 0.84);
cursor: pointer;
transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.compendium-chip:hover {
transform: translateY(-1px);
border-color: rgba(122, 212, 255, 0.34);
}
.compendium-chip.active {
border-color: rgba(122, 212, 255, 0.46);
background: linear-gradient(135deg, rgba(70, 126, 255, 0.16), rgba(113, 205, 255, 0.12));
color: #eef8ff;
box-shadow: 0 0 20px rgba(71, 150, 255, 0.12);
}
.compendium-chip.utility {
background: rgba(255, 255, 255, 0.03);
color: rgba(214, 225, 242, 0.78);
}
.compendium-chip.compact {
min-width: 42px;
padding-inline: 10px;
}
.compendium-chip.preset {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.compendium-preset-bar {
display: grid;
gap: 10px;
align-items: start;
}
.compendium-preset-slots {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.compendium-preset-slot {
display: flex;
gap: 8px;
align-items: center;
}
.codex-empty-state {
grid-column: 1 / -1;
min-height: 132px;
display: grid;
place-items: center;
text-align: center;
padding: 18px;
border-radius: 18px;
border: 1px dashed rgba(130, 182, 255, 0.2);
background: rgba(10, 17, 35, 0.68);
color: rgba(214, 225, 242, 0.78);
line-height: 1.7;
}
.collection-heading-group {
display: grid;
gap: 4px;
}
.collection-heading-group p {
margin: 0;
color: rgba(211, 223, 244, 0.72);
font-size: 0.95rem;
}
.collection-handoff-arrival {
position: relative;
margin-top: 10px;
padding: 12px 14px 12px 16px;
display: grid;
gap: 4px;
overflow: hidden;
border-radius: 16px;
border: 1px solid rgba(124, 209, 255, 0.3);
background:
linear-gradient(135deg, rgba(30, 72, 104, 0.88), rgba(62, 43, 16, 0.72)),
radial-gradient(circle at top right, rgba(255, 215, 122, 0.2), transparent 38%);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.collection-handoff-arrival::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: linear-gradient(180deg, rgba(124, 209, 255, 0.88), rgba(255, 215, 122, 0.82));
}
.collection-handoff-arrival-kicker {
color: rgba(173, 218, 255, 0.78);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.1em;
}
.collection-handoff-arrival strong {
color: #f5f9ff;
font-size: 0.98rem;
}
.collection-handoff-arrival p {
color: rgba(226, 236, 250, 0.78);
font-size: 0.86rem;
line-height: 1.55;
}
.collection-handoff-arrival-btn {
justify-self: flex-start;
margin-top: 4px;
border-color: rgba(255, 215, 122, 0.42);
background: rgba(255, 215, 122, 0.14);
color: #fff7d7;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.collection-handoff-arrival-btn:hover {
border-color: rgba(255, 232, 166, 0.72);
background: rgba(255, 215, 122, 0.22);
}
.collection-handoff-arrival-btn:focus-visible {
outline: 2px solid rgba(255, 232, 166, 0.86);
outline-offset: 3px;
border-color: rgba(255, 232, 166, 0.82);
background: rgba(255, 215, 122, 0.24);
}
.sanctum-goal-item.season-board-handoff-focus,
.sanctum-research-item.season-board-handoff-focus,
.collection-detail-card.season-board-handoff-focus,
.collection-detail-list li.season-board-handoff-focus {
position: relative;
border-color: rgba(255, 215, 122, 0.62);
background:
linear-gradient(135deg, rgba(255, 215, 122, 0.14), rgba(80, 178, 255, 0.08)),
rgba(11, 19, 38, 0.76);
box-shadow: 0 0 0 1px rgba(255, 215, 122, 0.18), 0 18px 34px rgba(0, 0, 0, 0.22);
}
.sanctum-goal-item.season-board-handoff-focus:focus-within,
.sanctum-research-item.season-board-handoff-focus:focus-within,
.collection-detail-card.season-board-handoff-focus:focus-within,
.collection-detail-list li.season-board-handoff-focus:focus-within {
box-shadow: 0 0 0 2px rgba(255, 232, 166, 0.34), 0 20px 38px rgba(0, 0, 0, 0.24);
}
.season-board-handoff-action-target {
outline: 2px solid rgba(255, 215, 122, 0.72);
outline-offset: 3px;
}
.season-board-handoff-action-target:focus-visible {
outline-color: rgba(255, 246, 200, 0.94);
}
.collection-tab-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
padding: 14px 16px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: linear-gradient(180deg, rgba(8, 13, 30, 0.92), rgba(5, 8, 20, 0.94));
box-shadow: 0 16px 30px rgba(0, 0, 0, 0.18);
}
.collection-tab-btn {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 999px;
padding: 10px 16px;
background: rgba(255, 255, 255, 0.04);
color: rgba(227, 236, 250, 0.82);
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.collection-tab-btn:hover {
transform: translateY(-1px);
border-color: rgba(124, 209, 255, 0.34);
color: #f4f8ff;
}
.collection-tab-btn.active {
border-color: rgba(120, 214, 255, 0.48);
background: linear-gradient(135deg, rgba(72, 128, 255, 0.16), rgba(118, 207, 255, 0.12));
color: #eff8ff;
box-shadow: 0 0 24px rgba(69, 151, 255, 0.16);
}
.collection-tab-panel {
display: none;
}
.collection-tab-panel.active {
display: block;
}
.collection-tab-panel .codex-scroll-container {
height: auto;
max-height: calc(100vh - 240px);
}
.collection-card-grid,
.sanctum-room-grid,
.build-metric-grid,
.collection-mini-grid {
display: grid;
gap: 12px;
}
.collection-card-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sanctum-room-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.build-metric-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.collection-mini-grid {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.collection-card,
.sanctum-room-card,
.sanctum-research-item,
.sanctum-goal-item,
.unlock-feed-item,
.build-metric-card,
.collection-mini-card,
.collection-detail-card,
.collection-detail-hero {
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(10, 15, 30, 0.72);
}
.collection-card {
width: 100%;
padding: 14px;
text-align: left;
display: grid;
gap: 12px;
color: inherit;
cursor: pointer;
transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.collection-card:hover,
.sanctum-room-card:hover,
.sanctum-research-item:hover,
.sanctum-goal-item:hover,
.unlock-feed-item:hover {
transform: translateY(-1px);
border-color: rgba(124, 209, 255, 0.24);
}
.collection-card.selected {
border-color: rgba(124, 209, 255, 0.42);
box-shadow: 0 0 0 1px rgba(124, 209, 255, 0.18), 0 14px 28px rgba(0, 0, 0, 0.24);
}
.collection-card-top,
.sanctum-room-top,
.sanctum-goal-top,
.unlock-feed-main,
.collection-detail-hero-main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.collection-card-icon,
.sanctum-room-icon,
.sanctum-goal-icon,
.unlock-feed-icon,
.collection-detail-icon {
display: grid;
place-items: center;
width: 48px;
min-width: 48px;
height: 48px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(66, 123, 255, 0.22), rgba(120, 209, 255, 0.14));
font-size: 1.5rem;
box-shadow: inset 0 0 0 1px rgba(124, 209, 255, 0.12);
}
.collection-detail-icon {
width: 64px;
min-width: 64px;
height: 64px;
border-radius: 18px;
font-size: 2rem;
}
.collection-card-body,
.collection-detail-meta {
display: grid;
gap: 6px;
}
.collection-card-body h4,
.collection-detail-meta h3,
.sanctum-room-card h4 {
margin: 0;
color: #f4f7ff;
}
.collection-card-body p,
.collection-detail-meta p,
.sanctum-room-card p,
.collection-detail-card p,
.build-metric-card p,
.collection-mini-card p,
.sanctum-research-item p,
.sanctum-goal-item p,
.unlock-feed-item p {
margin: 0;
color: rgba(206, 219, 242, 0.78);
line-height: 1.6;
}
.collection-card-kicker {
color: rgba(173, 218, 255, 0.74);
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.collection-card-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.collection-tag,
.collection-status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 0.76rem;
line-height: 1.2;
}
.collection-tag {
border: 1px solid rgba(122, 184, 255, 0.22);
background: rgba(17, 28, 58, 0.68);
color: rgba(220, 231, 248, 0.9);
}
.collection-tag.muted {
color: rgba(193, 208, 235, 0.62);
}
.collection-tag.danger {
border-color: rgba(255, 162, 162, 0.3);
background: rgba(72, 24, 36, 0.68);
color: rgba(255, 227, 227, 0.94);
}
.collection-tag.emphasis {
border-color: rgba(255, 215, 122, 0.34);
background: rgba(73, 52, 13, 0.76);
color: rgba(255, 240, 196, 0.96);
}
.collection-status-chip {
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(231, 239, 252, 0.88);
}
.collection-status-chip.current,
.detail-status-chip.current,
.detail-status-chip.defeated {
border-color: rgba(122, 224, 170, 0.36);
background: rgba(16, 61, 40, 0.72);
color: rgba(227, 255, 238, 0.94);
}
.collection-status-chip.aligned,
.collection-status-chip.scouted,
.detail-status-chip.active,
.detail-status-chip.scouted,
.detail-status-chip.ready {
border-color: rgba(122, 184, 255, 0.34);
background: rgba(18, 31, 61, 0.78);
color: rgba(224, 236, 255, 0.94);
}
.collection-status-chip.cleared,
.collection-status-chip.logged,
.detail-status-chip.cleared,
.detail-status-chip.logged {
border-color: rgba(255, 215, 122, 0.36);
background: rgba(58, 42, 14, 0.72);
color: rgba(255, 241, 206, 0.94);
}
.collection-status-chip.pending,
.collection-status-chip.upcoming,
.collection-status-chip.hidden,
.detail-status-chip.pending,
.detail-status-chip.upcoming,
.detail-status-chip.hidden {
border-color: rgba(255, 164, 164, 0.34);
background: rgba(68, 24, 34, 0.72);
color: rgba(255, 228, 228, 0.92);
}
.collection-status-chip.completed,
.detail-status-chip.completed {
border-color: rgba(122, 224, 170, 0.36);
background: rgba(16, 61, 40, 0.72);
color: rgba(227, 255, 238, 0.94);
}
.collection-status-chip.selected,
.detail-status-chip.selected {
border-color: rgba(122, 184, 255, 0.34);
background: rgba(18, 31, 61, 0.78);
color: rgba(224, 236, 255, 0.94);
}
.collection-status-chip.suggested,
.detail-status-chip.suggested {
border-color: rgba(255, 215, 122, 0.36);
background: rgba(58, 42, 14, 0.72);
color: rgba(255, 241, 206, 0.94);
}
.collection-detail-shell {
display: grid;
gap: 14px;
}
.run-slate-card.tone-completed {
border-color: rgba(122, 224, 170, 0.2);
}
.run-slate-card.selected {
border-color: rgba(124, 209, 255, 0.34);
}
.run-slate-card.tone-suggested {
border-color: rgba(255, 215, 122, 0.2);
}
.collection-detail-hero,
.collection-detail-card,
.build-metric-card,
.collection-mini-card,
.sanctum-room-card,
.sanctum-research-item,
.sanctum-goal-item,
.unlock-feed-item {
padding: 16px;
}
.collection-detail-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.collection-detail-card strong,
.build-metric-card strong,
.collection-mini-card strong,
.sanctum-research-meta strong,
.unlock-feed-item strong,
.sanctum-goal-item strong {
color: #f4f7ff;
}
.collection-detail-list {
margin: 0;
padding-left: 18px;
display: grid;
gap: 8px;
color: rgba(220, 231, 248, 0.88);
line-height: 1.55;
}
.collection-muted {
color: rgba(191, 207, 233, 0.64);
}
.collection-inline-btn {
margin-top: 10px;
border: 1px solid rgba(124, 209, 255, 0.26);
border-radius: 12px;
padding: 10px 12px;
background: rgba(19, 31, 58, 0.88);
color: #eef8ff;
font-weight: 700;
letter-spacing: 0.04em;
cursor: pointer;
transition: border-color var(--transition-fast), transform var(--transition-fast), background var(--transition-fast);
}
.collection-inline-btn:hover {
transform: translateY(-1px);
border-color: rgba(124, 209, 255, 0.42);
background: rgba(26, 40, 74, 0.94);
}
.collection-inline-btn.secondary {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.04);
color: rgba(230, 238, 249, 0.86);
}
.collection-inline-btn.secondary:hover {
border-color: rgba(187, 205, 229, 0.28);
background: rgba(255, 255, 255, 0.08);
}
.collection-inline-btn:disabled {
cursor: not-allowed;
opacity: 0.58;
transform: none;
}
.season-board-task-action-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 10px;
margin-top: 8px;
}
.season-board-task-action-row .collection-inline-btn {
margin-top: 0;
}
.collection-action-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.collection-action-row .collection-inline-btn {
margin-top: 0;
}
.collection-detail-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 6px;
}
.collection-memory-panel {
display: grid;
gap: 10px;
}
.build-metric-card,
.collection-mini-card {
display: grid;
gap: 6px;
}
.build-metric-card strong,
.collection-mini-card strong {
font-size: 1.3rem;
}
.build-metric-card span,
.collection-mini-card span,
.sanctum-research-meta span,
.unlock-feed-time {
color: rgba(193, 208, 235, 0.66);
font-size: 0.8rem;
}
.sanctum-room-card,
.sanctum-research-item,
.sanctum-goal-item,
.unlock-feed-item {
display: grid;
gap: 10px;
}
.sanctum-research-list,
.sanctum-goal-list,
.sanctum-unlock-feed {
display: grid;
gap: 12px;
}
.sanctum-research-meta {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 10px;
}
.sanctum-research-item.ready {
border-color: rgba(122, 224, 170, 0.28);
}
.unlock-feed-item {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
}
.unlock-feed-main {
justify-content: flex-start;
}
.law-detail-view .law-detail-layout,
.law-detail-main,
.law-detail-side,
.law-copy-panel {
display: grid;
gap: 18px;
}
.law-hero-stage {
min-height: 320px;
border-radius: 18px;
border: 1px solid rgba(120, 186, 255, 0.18);
background:
radial-gradient(circle at 50% 40%, rgba(99, 208, 255, 0.18) 0%, transparent 34%),
linear-gradient(180deg, rgba(12, 20, 44, 0.96), rgba(5, 9, 21, 0.96));
display: grid;
place-items: center;
text-align: center;
padding: 22px;
position: relative;
overflow: hidden;
}
.law-hero-stage.locked {
background:
radial-gradient(circle at 50% 40%, rgba(255, 161, 161, 0.12) 0%, transparent 34%),
linear-gradient(180deg, rgba(27, 12, 24, 0.96), rgba(10, 5, 12, 0.96));
}
.law-hero-orbit {
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
border: 1px solid rgba(132, 210, 255, 0.16);
box-shadow: 0 0 60px rgba(74, 195, 255, 0.08);
}
.law-hero-icon {
position: relative;
z-index: 1;
font-size: 5.4rem;
filter: drop-shadow(0 0 24px rgba(113, 205, 255, 0.32));
}
.law-hero-caption {
position: relative;
z-index: 1;
margin-top: 12px;
max-width: 320px;
color: rgba(216, 228, 247, 0.82);
line-height: 1.6;
}
.law-passive-card,
.law-links-card {
padding: 14px 16px;
}
.law-readiness-panel {
padding: 14px 16px;
}
#law-detail-readiness {
display: grid;
gap: 10px;
}
.law-readiness-item {
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
padding: 12px 14px;
display: grid;
gap: 6px;
}
.law-readiness-item.active {
border-color: rgba(114, 214, 164, 0.28);
}
.law-readiness-item.ready {
border-color: rgba(122, 212, 255, 0.28);
}
.law-readiness-item.near {
border-color: rgba(255, 199, 122, 0.3);
}
.law-readiness-title-row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px;
color: rgba(241, 246, 255, 0.92);
}
.law-readiness-chip {
padding: 3px 10px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
font-size: 0.72rem;
}
.law-readiness-chip.active {
color: #9ef1c7;
}
.law-readiness-chip.ready {
color: #bde9ff;
}
.law-readiness-chip.near {
color: #ffd89f;
}
.law-readiness-desc,
.law-readiness-empty {
color: rgba(219, 230, 244, 0.74);
line-height: 1.55;
}
.law-readiness-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.law-readiness-btn {
border: 1px solid rgba(122, 212, 255, 0.22);
border-radius: 999px;
padding: 6px 12px;
background: rgba(122, 212, 255, 0.08);
color: #e7f6ff;
cursor: pointer;
font-size: 0.76rem;
}
.law-readiness-btn:hover {
transform: translateY(-1px);
border-color: rgba(122, 212, 255, 0.4);
}
.ring-slot-3d.focus-target,
.resonance-card.focus-target,
.law-item-row.focus-target {
box-shadow: 0 0 0 2px rgba(142, 220, 255, 0.35), 0 0 22px rgba(101, 187, 255, 0.18);
border-color: rgba(142, 220, 255, 0.48) !important;
}
.law-links-card p,
.law-passive-card p {
color: rgba(220, 231, 248, 0.86);
line-height: 1.6;
}
.detail-header.rarity-epic h2,
.detail-header.rarity-epic #detail-name {
color: #f0a7ff;
}
.detail-header.rarity-epic .detail-sub {
color: #ddb6ff;
}
.detail-status-chip.rarity-chip.rarity-rare {
border-color: rgba(122, 212, 255, 0.34);
}
.detail-status-chip.rarity-chip.rarity-epic,
.detail-status-chip.rarity-chip.rarity-legendary {
border-color: rgba(237, 167, 255, 0.34);
}
.detail-status-chip.rarity-chip.rarity-mythic {
border-color: rgba(255, 208, 122, 0.38);
}
@media (max-width: 768px) {
.compendium-toolbar {
padding: 12px;
}
.compendium-control {
min-width: 0;
flex: 1 1 100%;
}
.law-hero-stage {
min-height: 240px;
padding: 18px;
}
.law-hero-icon {
font-size: 4.2rem;
}
}
.menu-oracle-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px;
width: 100%;
margin: 22px auto 0;
}
.menu-oracle-card {
position: relative;
padding: 18px 18px 16px;
border-radius: 18px;
border: 1px solid rgba(246, 202, 123, 0.2);
background:
linear-gradient(180deg, rgba(13, 21, 44, 0.94), rgba(7, 12, 28, 0.94)),
radial-gradient(circle at top left, rgba(255, 210, 132, 0.12), transparent 52%);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}
.menu-oracle-card h4 {
margin: 4px 0 8px;
font-size: 1.05rem;
color: #f7e4b8;
}
.menu-oracle-card p {
margin: 0;
min-height: 46px;
color: rgba(235, 241, 255, 0.74);
font-size: 0.92rem;
line-height: 1.55;
}
.menu-oracle-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(244, 206, 140, 0.82);
}
.menu-oracle-meta {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 12px;
color: rgba(211, 222, 252, 0.78);
font-size: 0.84rem;
}
.menu-oracle-meta strong {
color: #f7e7b4;
font-weight: 700;
}
.menu-oracle-card .collection-inline-btn {
margin-top: 14px;
}
.challenge-shell {
width: min(1320px, calc(100% - 48px));
margin: 0 auto 32px;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.challenge-tab-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
padding: 16px 0 12px;
}
.challenge-tab-btn {
border: 1px solid rgba(101, 152, 255, 0.22);
background: rgba(8, 14, 32, 0.88);
color: rgba(230, 239, 255, 0.74);
border-radius: 999px;
padding: 11px 18px;
cursor: pointer;
transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.challenge-tab-btn:hover,
.challenge-tab-btn.active {
transform: translateY(-1px);
border-color: rgba(104, 170, 255, 0.58);
color: #f6e0ac;
box-shadow: 0 10px 26px rgba(32, 71, 146, 0.28);
}
.challenge-scroll-container {
flex: 1;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: 0;
border-radius: 28px;
border: 1px solid rgba(101, 133, 214, 0.14);
background:
linear-gradient(180deg, rgba(8, 16, 37, 0.95), rgba(4, 9, 24, 0.96)),
radial-gradient(circle at top right, rgba(98, 148, 255, 0.1), transparent 36%);
box-shadow: 0 28px 56px rgba(0, 0, 0, 0.32);
overscroll-behavior-y: contain;
}
.challenge-layout {
display: grid;
grid-template-columns: minmax(0, 1.55fr) 360px;
gap: 24px;
padding: 24px;
align-items: start;
}
.challenge-main-column,
.challenge-side-column {
display: flex;
flex-direction: column;
gap: 18px;
}
.challenge-focus-card,
.challenge-section,
.challenge-rule-card,
.challenge-reward-card,
.challenge-record-item,
.challenge-selection-banner,
.challenge-launch-card {
border-radius: 22px;
border: 1px solid rgba(88, 126, 205, 0.18);
background: linear-gradient(180deg, rgba(10, 20, 46, 0.94), rgba(5, 10, 26, 0.96));
box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
}
.challenge-focus-card {
padding: 20px;
overflow: hidden;
}
.challenge-focus-card.daily {
border-color: rgba(236, 166, 83, 0.34);
}
.challenge-focus-card.weekly {
border-color: rgba(103, 160, 255, 0.34);
}
.challenge-focus-card.global {
border-color: rgba(174, 125, 255, 0.34);
}
.challenge-focus-head {
display: flex;
align-items: center;
gap: 14px;
}
.challenge-focus-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
border-radius: 18px;
font-size: 1.7rem;
background: rgba(47, 78, 142, 0.35);
box-shadow: inset 0 0 0 1px rgba(148, 182, 255, 0.12);
}
.challenge-kicker {
display: inline-block;
margin-bottom: 4px;
color: rgba(247, 209, 145, 0.82);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.challenge-focus-card h3 {
margin: 0;
color: #f8e4b8;
font-size: 1.3rem;
}
.challenge-focus-intro {
margin: 14px 0 0;
color: rgba(232, 240, 255, 0.78);
line-height: 1.65;
}
.challenge-focus-meta {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-top: 16px;
}
.challenge-meta-chip {
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(103, 134, 204, 0.18);
background: rgba(11, 20, 43, 0.82);
}
.challenge-meta-chip strong {
display: block;
color: #fff2cf;
font-size: 1rem;
}
.challenge-meta-chip span {
display: block;
margin-top: 6px;
color: rgba(212, 223, 247, 0.68);
font-size: 0.82rem;
}
.challenge-tag-strip {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 16px;
}
.challenge-tag,
.challenge-lock-pill,
.challenge-run-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(126, 167, 255, 0.24);
background: rgba(11, 22, 51, 0.84);
color: rgba(235, 241, 255, 0.76);
font-size: 0.84rem;
}
.challenge-inline-note {
margin-top: 16px;
color: rgba(163, 208, 255, 0.84);
font-size: 0.9rem;
}
.challenge-theme-note {
margin-top: 16px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(118, 166, 255, 0.18);
background: rgba(12, 23, 52, 0.72);
display: grid;
gap: 6px;
}
.challenge-theme-note strong {
color: #f6e3b7;
font-size: 0.94rem;
}
.challenge-theme-note span {
color: rgba(208, 223, 248, 0.76);
font-size: 0.84rem;
line-height: 1.55;
}
.challenge-danger-band {
margin-top: 16px;
padding: 14px;
border-radius: 18px;
border: 1px solid rgba(255, 214, 138, 0.18);
background:
linear-gradient(135deg, rgba(47, 29, 8, 0.68), rgba(12, 22, 48, 0.78));
display: grid;
gap: 12px;
}
.challenge-danger-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
}
.challenge-danger-head strong {
color: #f7e2b5;
font-size: 0.96rem;
}
.challenge-danger-head span {
color: rgba(255, 228, 172, 0.88);
font-size: 0.84rem;
white-space: nowrap;
}
.challenge-danger-summary {
margin: 0;
color: rgba(226, 234, 247, 0.8);
font-size: 0.88rem;
line-height: 1.6;
}
.challenge-danger-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.challenge-danger-chip {
padding: 12px 10px;
border-radius: 16px;
border: 1px solid rgba(255, 222, 163, 0.16);
background: rgba(13, 22, 46, 0.82);
text-align: center;
}
.challenge-danger-chip strong {
display: block;
color: #fff1cb;
font-size: 1rem;
}
.challenge-danger-chip span {
display: block;
margin-top: 6px;
color: rgba(211, 224, 249, 0.72);
font-size: 0.78rem;
}
.challenge-danger-foot {
display: grid;
gap: 6px;
color: rgba(205, 221, 247, 0.74);
font-size: 0.83rem;
line-height: 1.55;
}
.challenge-seed-line {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
align-items: center;
margin-top: 16px;
color: rgba(202, 220, 249, 0.74);
font-size: 0.86rem;
}
.challenge-seed-chip {
display: inline-flex;
align-items: center;
padding: 5px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 216, 132, 0.24);
background: rgba(16, 28, 60, 0.82);
color: #f7dfae;
font-size: 0.8rem;
line-height: 1;
}
.challenge-section {
padding: 18px;
}
.challenge-section-head {
display: flex;
gap: 14px;
align-items: flex-start;
margin-bottom: 16px;
}
.challenge-section-head h3 {
margin: 0;
color: #f5e2bb;
font-size: 1.08rem;
}
.challenge-section-head p {
margin: 4px 0 0;
color: rgba(210, 222, 246, 0.7);
font-size: 0.9rem;
}
.challenge-section-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 14px;
background: rgba(31, 53, 102, 0.42);
font-size: 1.2rem;
}
.challenge-rule-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.challenge-rule-card {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 14px 16px;
}
.challenge-rule-bullet {
color: rgba(245, 204, 132, 0.8);
}
.challenge-rule-card p {
margin: 0;
color: rgba(232, 240, 255, 0.8);
line-height: 1.55;
}
.challenge-reward-list,
.challenge-record-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.challenge-record-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.challenge-record-section-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
padding: 0 2px;
color: rgba(211, 224, 250, 0.76);
font-size: 0.84rem;
}
.challenge-record-section-head strong {
color: #f6e3b7;
font-size: 0.95rem;
}
.challenge-archive-toolbar {
padding: 14px 16px;
border-radius: 20px;
border: 1px solid rgba(118, 166, 255, 0.16);
background: linear-gradient(180deg, rgba(10, 18, 38, 0.88), rgba(7, 13, 28, 0.94));
display: grid;
gap: 12px;
}
.challenge-archive-toolbar-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.challenge-archive-toolbar-head .challenge-compare-note {
flex: 1 1 auto;
}
.challenge-archive-filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
gap: 10px;
}
.challenge-archive-filter {
display: grid;
gap: 6px;
}
.challenge-archive-filter span {
color: rgba(214, 225, 248, 0.76);
font-size: 0.8rem;
}
.challenge-archive-filter select {
width: 100%;
min-width: 0;
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(128, 171, 255, 0.26);
background: rgba(12, 22, 46, 0.92);
color: #e7eefc;
font-size: 0.86rem;
outline: none;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.challenge-archive-filter select:hover {
border-color: rgba(164, 198, 255, 0.4);
}
.challenge-archive-filter select:focus {
border-color: rgba(240, 202, 121, 0.42);
box-shadow: 0 0 0 3px rgba(240, 202, 121, 0.12);
background: rgba(15, 27, 54, 0.96);
}
.challenge-archive-filter select option {
color: #e7eefc;
background: #10203f;
}
.challenge-archive-summary-tags {
margin-top: 0;
}
.challenge-archive-preset-bar {
gap: 10px;
}
.challenge-archive-preset-bar .collection-muted {
margin: 0;
}
.challenge-archive-preset-slots {
width: 100%;
}
.challenge-archive-preset-slot {
flex: 1 1 280px;
min-width: min(100%, 240px);
}
.challenge-archive-preset-btn {
max-width: min(100%, 280px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.challenge-archive-preset-btn.active {
border-color: rgba(240, 202, 121, 0.36);
box-shadow: inset 0 0 0 1px rgba(240, 202, 121, 0.14);
}
.collection-inline-btn.compact {
padding-inline: 10px;
min-width: 42px;
}
.challenge-reward-card,
.challenge-record-item {
padding: 14px 16px;
}
.challenge-reward-card.ready {
border-color: rgba(123, 214, 172, 0.42);
}
.challenge-reward-card.claimed {
opacity: 0.8;
}
.challenge-reward-top {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
}
.challenge-reward-top strong,
.challenge-record-item strong {
color: #f6e3b7;
}
.challenge-reward-top p,
.challenge-record-item p {
margin: 6px 0 0;
color: rgba(221, 231, 250, 0.72);
line-height: 1.55;
}
.challenge-reward-progress,
.challenge-record-item span {
color: rgba(166, 190, 255, 0.82);
font-size: 0.84rem;
white-space: nowrap;
}
.challenge-record-item {
display: flex;
justify-content: space-between;
gap: 14px;
align-items: flex-start;
}
.challenge-record-item.replayable {
border-color: rgba(138, 176, 255, 0.3);
}
.challenge-record-subline {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin-top: 10px;
color: rgba(176, 197, 244, 0.72);
font-size: 0.8rem;
}
.challenge-record-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.challenge-record-insight {
margin-top: 12px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(135, 177, 255, 0.18);
background: rgba(12, 24, 52, 0.78);
display: grid;
gap: 8px;
}
.challenge-record-insight strong {
color: #f7e2b5;
font-size: 0.92rem;
}
.challenge-record-insight p {
margin: 0;
color: rgba(219, 230, 249, 0.76);
font-size: 0.84rem;
line-height: 1.6;
}
.challenge-record-insight-lines {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.challenge-record-insight-line,
.challenge-record-item .challenge-record-insight-line,
.challenge-compare-card .challenge-record-insight-line,
#challenge-hub-side .challenge-record-insight-line,
.challenge-selection-banner .challenge-record-insight-line {
display: inline-flex;
align-items: center;
box-sizing: border-box;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(244, 204, 120, 0.18);
background: rgba(35, 28, 14, 0.56);
color: rgba(255, 232, 185, 0.88);
font-size: 0.78rem;
line-height: 1.45;
max-width: 100%;
min-width: 0;
overflow-wrap: anywhere;
white-space: normal;
}
.challenge-record-insight.compact {
padding: 10px 12px;
gap: 6px;
}
.challenge-record-insight.compact strong {
font-size: 0.88rem;
}
.challenge-record-insight.compact p {
font-size: 0.8rem;
}
.challenge-record-actions {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-end;
}
.challenge-compare-note {
margin: 0;
color: rgba(204, 219, 246, 0.72);
font-size: 0.86rem;
line-height: 1.6;
}
.challenge-compare-card {
padding: 16px;
border-radius: 20px;
border: 1px solid rgba(118, 166, 255, 0.2);
background: linear-gradient(180deg, rgba(11, 22, 48, 0.9), rgba(7, 14, 30, 0.94));
display: grid;
gap: 12px;
}
.challenge-compare-card.selected {
border-color: rgba(240, 202, 121, 0.36);
box-shadow: inset 0 0 0 1px rgba(240, 202, 121, 0.14);
}
.challenge-compare-head {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: flex-start;
}
.challenge-compare-head strong {
color: #f6e3b7;
}
.challenge-compare-head p {
margin: 6px 0 0;
color: rgba(214, 226, 248, 0.72);
font-size: 0.86rem;
line-height: 1.55;
}
.challenge-compare-score {
color: #fff0c4;
font-size: 0.92rem;
white-space: nowrap;
}
.challenge-compare-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
color: rgba(182, 201, 240, 0.72);
font-size: 0.82rem;
}
.challenge-compare-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.challenge-leaderboard {
display: flex;
flex-direction: column;
gap: 10px;
}
.challenge-rank-row {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 12px;
align-items: center;
padding: 10px 12px;
border-radius: 16px;
background: rgba(10, 21, 46, 0.72);
color: rgba(228, 237, 255, 0.78);
}
.challenge-rank-row.highlight {
border: 1px solid rgba(255, 220, 153, 0.38);
color: #f7e2b3;
}
.challenge-launch-card {
padding: 18px;
}
.challenge-launch-btn {
width: 100%;
}
.challenge-selection-banner {
padding: 16px 18px;
margin-bottom: 18px;
border-color: rgba(245, 194, 113, 0.34);
}
.challenge-selection-head {
display: flex;
align-items: center;
gap: 12px;
}
.challenge-selection-banner p {
margin: 12px 0 0;
color: rgba(232, 241, 255, 0.78);
}
.challenge-selection-meta {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
margin-top: 10px;
color: rgba(195, 212, 252, 0.72);
font-size: 0.86rem;
}
.challenge-card-locked {
opacity: 0.42;
filter: grayscale(0.3);
}
.challenge-locked-card {
cursor: default;
}
.challenge-lock-pill {
margin-left: auto;
color: rgba(255, 227, 171, 0.9);
border-color: rgba(246, 202, 123, 0.28);
}
.challenge-run-banner {
width: min(1180px, calc(100% - 48px));
margin: 14px auto 0;
display: none;
align-items: center;
gap: 14px;
padding: 12px 16px;
border-radius: 18px;
border: 1px solid rgba(255, 205, 132, 0.24);
background: linear-gradient(90deg, rgba(15, 24, 53, 0.94), rgba(8, 15, 34, 0.94));
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.24);
}
.challenge-run-text {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.challenge-run-text strong {
color: #f7e2b5;
}
.challenge-run-text span,
.challenge-run-stats span {
color: rgba(208, 222, 248, 0.74);
font-size: 0.85rem;
}
.challenge-run-focus {
color: rgba(255, 229, 172, 0.82);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.challenge-run-stats {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.challenge-run-stats strong {
color: #fff0c4;
font-size: 1rem;
}
@media (max-width: 1100px) {
.menu-oracle-strip,
.challenge-layout {
grid-template-columns: 1fr;
}
.challenge-focus-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.challenge-danger-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 780px) {
.menu-oracle-strip,
.challenge-rule-grid {
grid-template-columns: 1fr;
}
.challenge-shell {
width: calc(100% - 24px);
}
.challenge-layout {
padding: 14px;
gap: 14px;
}
.challenge-focus-meta {
grid-template-columns: 1fr 1fr;
}
.challenge-danger-head {
flex-direction: column;
align-items: flex-start;
}
.challenge-run-banner {
width: calc(100% - 24px);
flex-wrap: wrap;
}
.challenge-run-stats {
margin-left: 0;
align-items: flex-start;
}
.challenge-record-item {
flex-direction: column;
}
.challenge-record-actions {
width: 100%;
align-items: stretch;
}
.challenge-archive-toolbar-head {
flex-direction: column;
}
.challenge-archive-preset-slot {
width: 100%;
}
.challenge-archive-preset-btn {
max-width: 100%;
white-space: normal;
text-overflow: clip;
}
.challenge-compare-head,
.challenge-compare-actions {
flex-direction: column;
}
.challenge-record-insight-lines {
flex-direction: column;
}
.challenge-record-insight-line,
.challenge-record-item .challenge-record-insight-line,
.challenge-compare-card .challenge-record-insight-line,
#challenge-hub-side .challenge-record-insight-line,
.challenge-selection-banner .challenge-record-insight-line {
display: block;
width: 100%;
}
.challenge-run-focus {
white-space: normal;
}
}
:root {
--hud-compact-breakpoint: 768;
--ui-shell-max-width: 1320px;
--ui-shell-wide-width: 1400px;
--ui-shell-padding: clamp(16px, 2vw, 28px);
--ui-surface-radius-xl: 28px;
--ui-surface-radius-lg: 22px;
--ui-surface-radius-md: 16px;
--ui-surface-border: rgba(113, 158, 244, 0.18);
--ui-surface-border-strong: rgba(176, 212, 255, 0.3);
--ui-surface-bg:
radial-gradient(circle at top right, rgba(104, 156, 255, 0.1), transparent 34%),
linear-gradient(180deg, rgba(11, 18, 40, 0.9), rgba(5, 9, 22, 0.96));
--ui-surface-bg-elevated:
radial-gradient(circle at top left, rgba(244, 197, 110, 0.08), transparent 36%),
linear-gradient(180deg, rgba(13, 21, 47, 0.92), rgba(6, 10, 24, 0.98));
--ui-surface-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
--ui-surface-shadow-soft: 0 18px 36px rgba(0, 0, 0, 0.24);
--ui-focus-ring: 0 0 0 2px rgba(132, 207, 255, 0.36), 0 0 0 5px rgba(132, 207, 255, 0.14);
--ui-scrollbar-track: rgba(255, 255, 255, 0.05);
--ui-scrollbar-thumb: rgba(122, 178, 255, 0.44);
--hud-gutter-desktop: 16px;
--hud-gutter-mobile: 6px;
--hud-panel-radius: 14px;
--hud-panel-padding: 8px 9px;
--hud-panel-bg:
linear-gradient(145deg, rgba(7, 16, 40, 0.92), rgba(4, 10, 26, 0.92));
--hud-panel-bg-strong:
linear-gradient(135deg, rgba(34, 24, 16, 0.95), rgba(64, 28, 18, 0.88)),
radial-gradient(circle at top right, rgba(255, 188, 92, 0.18), transparent 44%);
--hud-panel-border: rgba(114, 184, 255, 0.48);
--hud-panel-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
--hud-command-width: clamp(280px, 24vw, 360px);
--hud-boss-width: min(620px, 44vw, calc(100% - 32px));
--hud-scrollbar: rgba(124, 188, 255, 0.42);
--hud-transition-fast: 180ms ease;
--hud-transition-medium: 240ms ease;
--battle-card-overlap-desktop: -30px;
--battle-card-overlap-mobile: -22px;
--battle-card-pop-lift: -30px;
--battle-card-selected-lift: -90px;
--battle-card-advisor-lift: -44px;
--z-battle-environment: 108;
--z-battle-boss-panel: 114;
--z-battle-end-turn: 116;
--z-battle-command-panel: 118;
--z-battle-mission: 119;
--z-battle-intent: 130;
}
body {
background:
radial-gradient(circle at 14% 0%, rgba(93, 145, 255, 0.14), transparent 24%),
radial-gradient(circle at 86% 100%, rgba(246, 199, 115, 0.08), transparent 24%),
linear-gradient(180deg, #07111e 0%, #050914 58%, #03050a 100%);
}
.screen {
background:
radial-gradient(circle at 12% 0%, rgba(88, 142, 255, 0.12), transparent 26%),
radial-gradient(circle at 88% 100%, rgba(236, 186, 102, 0.08), transparent 24%),
linear-gradient(180deg, #07111f 0%, #040914 55%, #02050a 100%);
}
.screen-header {
width: min(var(--ui-shell-wide-width), calc(100% - 32px));
margin: clamp(12px, 2vh, 18px) auto 0;
padding: 14px 18px;
border: 1px solid var(--ui-surface-border);
border-radius: var(--ui-surface-radius-xl);
background: var(--ui-surface-bg-elevated);
box-shadow: var(--ui-surface-shadow-soft);
backdrop-filter: blur(18px);
gap: 14px;
}
.screen-header h2 {
margin: 0;
font-size: clamp(1.4rem, 2.4vw, 2rem);
letter-spacing: 0.04em;
}
.screen-header.transparent {
width: min(var(--ui-shell-wide-width), calc(100% - 32px));
margin: clamp(12px, 2vh, 18px) auto 0;
min-height: 92px;
height: auto;
padding: 16px clamp(18px, 2.5vw, 28px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--ui-surface-radius-xl);
background: linear-gradient(180deg, rgba(7, 12, 28, 0.88), rgba(7, 12, 28, 0.42));
box-shadow: var(--ui-surface-shadow-soft);
backdrop-filter: blur(18px);
}
.back-btn {
min-height: 44px;
border-radius: 14px;
background: linear-gradient(180deg, rgba(18, 28, 58, 0.92), rgba(10, 16, 34, 0.96));
border-color: rgba(151, 187, 255, 0.24);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.back-btn:hover {
background: linear-gradient(180deg, rgba(25, 40, 79, 0.96), rgba(13, 21, 44, 0.98));
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}
:where(button, .collection-inline-btn, .challenge-tab-btn, .shop-tab-btn, .rune-tab, .util-btn, .back-btn, .menu-btn, .talisman-btn):focus-visible {
outline: none;
box-shadow: var(--ui-focus-ring);
}
.menu-content,
.character-selection-container,
.realm-select-layout,
.challenge-shell,
.reward-shell,
.codex-shell,
.treasure-compendium-shell,
.achievements-container,
.inheritance-container,
#pvp-screen .pvp-layout-split,
.shop-container {
width: min(var(--ui-shell-max-width), calc(100% - 32px));
margin-left: auto;
margin-right: auto;
}
.menu-content,
.character-selection-container,
.realm-select-layout,
.achievements-container,
.inheritance-container,
#pvp-screen .pvp-layout-split,
.shop-container {
border: 1px solid var(--ui-surface-border);
border-radius: var(--ui-surface-radius-xl);
background: var(--ui-surface-bg);
box-shadow: var(--ui-surface-shadow);
backdrop-filter: blur(18px);
}
.menu-content {
width: min(760px, calc(100% - 32px));
padding: clamp(24px, 3vw, 36px);
border-radius: 30px;
background:
radial-gradient(circle at top center, rgba(255, 224, 157, 0.08), transparent 42%),
linear-gradient(180deg, rgba(8, 14, 32, 0.82), rgba(4, 8, 20, 0.9));
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.38);
backdrop-filter: blur(18px);
}
.character-selection-container,
.realm-select-layout,
.achievements-container,
.inheritance-container,
#pvp-screen .pvp-layout-split,
.shop-container {
padding: clamp(16px, 2vw, 24px);
}
#pvp-screen .pvp-layout-split {
max-width: var(--ui-shell-wide-width);
margin-top: 14px;
margin-bottom: 24px;
gap: clamp(28px, 4vw, 68px);
height: calc(100vh - 150px);
}
.reward-panel,
.challenge-scroll-container,
.challenge-focus-card,
.challenge-section,
.challenge-rule-card,
.challenge-reward-card,
.challenge-record-item,
.challenge-selection-banner,
.challenge-launch-card,
.realm-preview-panel,
.map-endless-panel,
.expedition-panel-card,
.detail-dual-panel,
.shop-section,
.achievement-progress-card,
.inheritance-card,
.inheritance-stat,
.inheritance-preset-btn,
.formation-visualizer-panel,
.defense-controls-panel,
.shop-main-panel {
border-color: var(--ui-surface-border);
box-shadow: var(--ui-surface-shadow-soft);
}
.screen,
.modal-content,
.challenge-scroll-container,
.ranking-scroll-area,
.shop-container,
.achievements-container,
.inheritance-container,
.realm-list-container,
.realm-preview-panel,
.reward-container,
.codex-scroll-container,
.panel-body,
.panel-content-area,
.right-panel-content,
.purification-scroll-area {
scrollbar-width: thin;
scrollbar-color: var(--ui-scrollbar-thumb) var(--ui-scrollbar-track);
scrollbar-gutter: stable both-edges;
}
.modal-content::-webkit-scrollbar,
.challenge-scroll-container::-webkit-scrollbar,
.ranking-scroll-area::-webkit-scrollbar,
.shop-container::-webkit-scrollbar,
.achievements-container::-webkit-scrollbar,
.inheritance-container::-webkit-scrollbar,
.realm-list-container::-webkit-scrollbar,
.realm-preview-panel::-webkit-scrollbar,
.reward-container::-webkit-scrollbar,
.codex-scroll-container::-webkit-scrollbar,
.panel-body::-webkit-scrollbar,
.panel-content-area::-webkit-scrollbar,
.right-panel-content::-webkit-scrollbar,
.purification-scroll-area::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.modal-content::-webkit-scrollbar-track,
.challenge-scroll-container::-webkit-scrollbar-track,
.ranking-scroll-area::-webkit-scrollbar-track,
.shop-container::-webkit-scrollbar-track,
.achievements-container::-webkit-scrollbar-track,
.inheritance-container::-webkit-scrollbar-track,
.realm-list-container::-webkit-scrollbar-track,
.realm-preview-panel::-webkit-scrollbar-track,
.reward-container::-webkit-scrollbar-track,
.codex-scroll-container::-webkit-scrollbar-track,
.panel-body::-webkit-scrollbar-track,
.panel-content-area::-webkit-scrollbar-track,
.right-panel-content::-webkit-scrollbar-track,
.purification-scroll-area::-webkit-scrollbar-track {
background: var(--ui-scrollbar-track);
border-radius: 999px;
}
.modal-content::-webkit-scrollbar-thumb,
.challenge-scroll-container::-webkit-scrollbar-thumb,
.ranking-scroll-area::-webkit-scrollbar-thumb,
.shop-container::-webkit-scrollbar-thumb,
.achievements-container::-webkit-scrollbar-thumb,
.inheritance-container::-webkit-scrollbar-thumb,
.realm-list-container::-webkit-scrollbar-thumb,
.realm-preview-panel::-webkit-scrollbar-thumb,
.reward-container::-webkit-scrollbar-thumb,
.codex-scroll-container::-webkit-scrollbar-thumb,
.panel-body::-webkit-scrollbar-thumb,
.panel-content-area::-webkit-scrollbar-thumb,
.right-panel-content::-webkit-scrollbar-thumb,
.purification-scroll-area::-webkit-scrollbar-thumb {
background: var(--ui-scrollbar-thumb);
border-radius: 999px;
}
.modal-content {
border-radius: var(--ui-surface-radius-xl);
border-color: var(--ui-surface-border-strong);
background: var(--ui-surface-bg-elevated);
box-shadow: var(--ui-surface-shadow);
backdrop-filter: blur(20px);
}
#main-menu .menu-content {
width: min(1040px, calc(100% - 32px));
max-height: calc(100vh - 28px);
padding: clamp(22px, 3vh, 30px) clamp(24px, 3vw, 36px);
overflow: auto;
}
#main-menu .game-logo {
margin-bottom: 2px;
}
#main-menu .logo-img {
width: min(28vw, 168px);
max-width: 168px;
margin-bottom: 0;
}
#main-menu .game-description {
max-width: 620px;
margin-bottom: 16px;
}
#main-menu .game-description p {
line-height: 1.45;
}
#main-menu .menu-buttons {
width: min(100%, 380px);
gap: 10px;
}
#main-menu .menu-utilities {
justify-content: center;
gap: 16px;
row-gap: 18px;
margin-top: 20px;
}
#main-menu .util-btn-wrapper {
min-width: 64px;
}
#main-menu .menu-oracle-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 20px;
}
#main-menu .menu-oracle-card {
min-height: 166px;
padding: 16px;
}
#main-menu .menu-oracle-card p {
min-height: 0;
}
#main-menu .version-info {
margin-top: 16px;
}
.codex-shell,
.treasure-compendium-shell {
flex: 1;
min-height: 0;
max-height: calc(100vh - 132px);
display: flex;
overflow: hidden;
}
.codex-layout,
.treasure-compendium-layout {
width: 100%;
height: 100%;
min-height: 0;
}
.codex-main-column,
.treasure-compendium-main,
.codex-side-column,
.treasure-compendium-side {
min-height: 0;
}
.codex-main-column,
.treasure-compendium-main {
align-content: start;
}
.codex-scroll-container,
.compendium-grid-container {
min-height: 0;
overflow: auto;
}
.codex-side-column,
.treasure-compendium-side {
overflow: auto;
padding-right: 4px;
}
.realm-select-layout {
flex: 1;
min-height: 0;
max-height: calc(100vh - 132px);
margin-bottom: 18px;
overflow: hidden;
}
.realm-list-container,
.realm-preview-panel {
min-height: 0;
}
.shop-container {
flex: 1;
min-height: 0;
max-height: calc(100vh - 144px);
padding: clamp(16px, 2vw, 24px);
}
@media (max-width: 1180px) {
#main-menu .menu-content {
width: min(760px, calc(100% - 28px));
}
#main-menu .menu-oracle-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-height: 820px) and (min-width: 769px) {
#main-menu {
padding: 12px 0 16px;
}
#main-menu .menu-content {
max-height: calc(100vh - 16px);
padding: 18px 26px 16px;
}
#main-menu .logo-img {
width: min(22vw, 138px);
max-width: 138px;
}
#main-menu .game-description {
margin-bottom: 10px;
font-size: 0.88rem;
}
#main-menu .talisman-btn {
height: 48px;
}
#main-menu .talisman-content {
gap: 10px;
font-size: 1.18rem;
letter-spacing: 1px;
}
#main-menu .menu-utilities {
margin-top: 14px;
gap: 12px;
row-gap: 14px;
}
#main-menu .util-btn {
width: 42px;
height: 42px;
}
#main-menu .menu-oracle-strip {
margin-top: 16px;
gap: 12px;
}
#main-menu .menu-oracle-card {
padding: 14px 14px 12px;
}
#main-menu .menu-oracle-card h4 {
margin: 3px 0 6px;
font-size: 0.96rem;
}
#main-menu .menu-oracle-card p {
font-size: 0.84rem;
line-height: 1.42;
}
#main-menu .version-info {
margin-top: 12px;
font-size: 0.72rem;
}
}
@media (prefers-reduced-motion: reduce) {
:root {
--hud-transition-fast: 1ms linear;
--hud-transition-medium: 1ms linear;
}
}
@media (max-width: 768px) {
.screen-header,
.screen-header.transparent,
.menu-content,
.character-selection-container,
.realm-select-layout,
.challenge-shell,
.reward-shell,
.codex-shell,
.treasure-compendium-shell,
.achievements-container,
.inheritance-container,
#pvp-screen .pvp-layout-split,
.shop-container {
width: calc(100% - 18px);
border-radius: 22px;
}
.screen-header,
.screen-header.transparent {
padding: 12px 14px;
}
.screen-header.transparent {
min-height: 78px;
}
.character-selection-container,
.realm-select-layout,
.achievements-container,
.inheritance-container,
#pvp-screen .pvp-layout-split,
.shop-container,
.menu-content {
padding: 14px;
}
#main-menu .menu-content {
max-height: calc(100vh - 20px);
}
#main-menu .menu-oracle-strip {
grid-template-columns: 1fr;
}
.codex-shell,
.treasure-compendium-shell,
.realm-select-layout,
.shop-container {
max-height: calc(100vh - 104px);
}
}
/* ===================================
The Defier 2.0 - 动画特效
=================================== */
/* 粒子系统基础 */
.particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 100;
}
.particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
animation: particleFade 1s ease forwards;
}
@keyframes particleFade {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
/* 攻击粒子 */
.particle-attack {
background: radial-gradient(circle, #ff6b6b 0%, #ee5a24 100%);
box-shadow: 0 0 10px #ff6b6b, 0 0 20px #ee5a24;
}
/* 雷电粒子 */
.particle-thunder {
background: radial-gradient(circle, #74b9ff 0%, #0984e3 100%);
box-shadow: 0 0 15px #74b9ff, 0 0 30px #0984e3;
animation: thunderFlash 0.5s ease forwards;
}
@keyframes thunderFlash {
0%,
50% {
opacity: 1;
}
25%,
75% {
opacity: 0.3;
}
100% {
opacity: 0;
}
}
/* 火焰粒子 */
.particle-fire {
background: radial-gradient(circle, #fdcb6e 0%, #e17055 50%, #d63031 100%);
box-shadow: 0 0 10px #fdcb6e, 0 0 20px #e17055;
animation: fireRise 1s ease forwards;
}
@keyframes fireRise {
0% {
opacity: 1;
transform: translateY(0) scale(1);
}
100% {
opacity: 0;
transform: translateY(-50px) scale(0.5);
}
}
/* 治疗粒子 */
.particle-heal {
background: radial-gradient(circle, #00b894 0%, #55efc4 100%);
box-shadow: 0 0 10px #55efc4;
animation: healFloat 1.5s ease forwards;
}
@keyframes healFloat {
0% {
opacity: 1;
transform: translateY(0) rotate(0deg);
}
100% {
opacity: 0;
transform: translateY(-30px) rotate(180deg);
}
}
/* 护盾粒子 */
.particle-shield {
background: radial-gradient(circle, #00cec9 0%, #81ecec 100%);
box-shadow: 0 0 15px #00cec9;
border-radius: 0;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
/* 法则粒子 */
.particle-law {
background: radial-gradient(circle, #a29bfe 0%, #6c5ce7 100%);
box-shadow: 0 0 20px #a29bfe, 0 0 40px #6c5ce7;
animation: lawSpiral 1.5s ease forwards;
}
@keyframes lawSpiral {
0% {
opacity: 1;
transform: rotate(0deg) scale(1) translateY(0);
}
100% {
opacity: 0;
transform: rotate(720deg) scale(0) translateY(-50px);
}
}
/* 寒冰粒子 */
.particle-ice {
background: radial-gradient(circle, #81ecec 0%, #74b9ff 100%);
box-shadow: 0 0 10px #81ecec;
border-radius: 2px;
animation: iceShatter 0.8s ease forwards;
}
@keyframes iceShatter {
0% {
opacity: 1;
transform: scale(0) rotate(0deg);
}
50% {
opacity: 1;
transform: scale(1) rotate(180deg);
}
100% {
opacity: 0;
transform: scale(0.5) rotate(360deg);
}
}
/* 虚空/暗影粒子 */
.particle-dark {
background: radial-gradient(circle, #2d3436 0%, #000000 100%);
box-shadow: 0 0 15px #6c5ce7;
animation: darkImplode 1.2s ease forwards;
}
@keyframes darkImplode {
0% {
opacity: 0.8;
transform: scale(1);
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(0);
opacity: 0;
}
}
/* ===================================
连击系统视觉效果
=================================== */
.combo-display {
position: fixed;
top: 20%;
right: 50px;
display: none;
flex-direction: column;
align-items: center;
z-index: 200;
animation: comboPopIn 0.3s ease;
}
.combo-display.show {
display: flex;
}
@keyframes comboPopIn {
0% {
transform: scale(0) rotate(-20deg);
opacity: 0;
}
50% {
transform: scale(1.2) rotate(5deg);
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
.combo-count {
font-size: 4rem;
font-weight: 900;
font-family: var(--font-display);
background: linear-gradient(135deg, #ffd700 0%, #ff6b6b 50%, #a29bfe 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
}
.combo-text {
font-size: 1.2rem;
color: var(--accent-gold);
text-transform: uppercase;
letter-spacing: 0.3em;
}
.combo-bonus {
font-size: 1rem;
color: var(--accent-green);
margin-top: 5px;
}
/* 连击等级颜色 */
.combo-display.level-2 .combo-count {
background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
-webkit-background-clip: text;
background-clip: text;
}
.combo-display.level-3 .combo-count {
background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
-webkit-background-clip: text;
background-clip: text;
}
.combo-display.level-4 .combo-count {
background: linear-gradient(135deg, #ffd700 0%, #ff6b6b 100%);
-webkit-background-clip: text;
background-clip: text;
animation: rainbowGlow 1s linear infinite;
}
@keyframes rainbowGlow {
0% {
filter: drop-shadow(0 0 20px #ff6b6b);
}
33% {
filter: drop-shadow(0 0 20px #ffd700);
}
66% {
filter: drop-shadow(0 0 20px #a29bfe);
}
100% {
filter: drop-shadow(0 0 20px #ff6b6b);
}
}
/* ===================================
状态效果图标
=================================== */
.status-effects {
display: flex;
gap: 4px;
margin-top: 4px;
flex-wrap: wrap;
justify-content: center;
max-width: 120px;
}
.status-effect {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: rgba(0, 0, 0, 0.6);
border-radius: 4px;
font-size: 0.9rem;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.status-effect .value {
position: absolute;
bottom: -2px;
right: -2px;
font-size: 0.6rem;
font-weight: 700;
background: var(--bg-dark);
border-radius: 50%;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
}
/* 状态类型颜色 */
.status-effect.buff {
border-color: var(--accent-green);
}
.status-effect.debuff {
border-color: var(--accent-red);
}
.status-effect.law {
border-color: var(--accent-purple);
}
/* ===================================
卡牌稀有度特效
=================================== */
.card.rarity-common {
border-color: #b2bec3;
}
.card.rarity-uncommon {
border-color: #00b894;
box-shadow: 0 0 15px rgba(0, 184, 148, 0.3);
}
.card.rarity-rare {
border-color: #0984e3;
box-shadow: 0 0 20px rgba(9, 132, 227, 0.4);
animation: rareGlow 2s ease-in-out infinite;
}
@keyframes rareGlow {
0%,
100% {
box-shadow: 0 0 20px rgba(9, 132, 227, 0.4);
}
50% {
box-shadow: 0 0 30px rgba(9, 132, 227, 0.7);
}
}
.card.rarity-epic {
border-color: #6c5ce7;
box-shadow: 0 0 25px rgba(108, 92, 231, 0.5);
animation: epicPulse 2s ease-in-out infinite;
}
@keyframes epicPulse {
0%,
100% {
box-shadow: 0 0 25px rgba(108, 92, 231, 0.5);
}
50% {
box-shadow: 0 0 35px rgba(108, 92, 231, 0.8);
}
}
.card.rarity-legendary {
border-color: #ffd700;
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
animation: legendaryShine 3s linear infinite;
position: relative;
overflow: hidden;
}
@keyframes legendaryShine {
0% {
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}
25% {
box-shadow: 0 0 30px rgba(255, 107, 107, 0.6);
}
50% {
box-shadow: 0 0 30px rgba(162, 155, 254, 0.6);
}
75% {
box-shadow: 0 0 30px rgba(0, 184, 148, 0.6);
}
100% {
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
}
}
.card.rarity-legendary::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent 40%,
rgba(255, 255, 255, 0.3) 50%,
transparent 60%);
animation: legendarySwipe 3s linear infinite;
}
@keyframes legendarySwipe {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) rotate(45deg);
}
}
/* ===================================
卡牌升级标识
=================================== */
.card.upgraded .card-name::after {
content: '+';
color: var(--accent-gold);
font-weight: 900;
margin-left: 2px;
}
.card.upgraded {
border-width: 3px;
}
/* ===================================
暴击效果
=================================== */
@keyframes criticalHit {
0% {
transform: scale(1);
filter: brightness(1);
}
20% {
transform: scale(1.3);
filter: brightness(2);
}
40% {
transform: scale(0.95);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
filter: brightness(1);
}
}
.critical-hit {
animation: criticalHit 0.5s ease;
}
.critical-text {
position: absolute;
font-size: 2.5rem;
font-weight: 900;
color: #ffd700;
text-shadow:
0 0 10px #ffd700,
0 0 20px #ff6b6b,
2px 2px 0 #000;
animation: criticalFloat 1s ease forwards;
z-index: 1000;
}
@keyframes criticalFloat {
0% {
opacity: 1;
transform: translateY(0) scale(1.5);
}
50% {
transform: translateY(-30px) scale(1.2);
}
100% {
opacity: 0;
transform: translateY(-60px) scale(1);
}
}
/* ===================================
战斗重击与顿帧效果 (Hit Stop)
=================================== */
.hit-stop-frozen {
animation: none !important;
transition: none !important;
filter: brightness(2) contrast(1.5) saturate(2);
transform: scale(1.1) rotate(2deg) !important;
}
.damage-flash {
position: relative;
}
.damage-flash::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--flash-color, rgba(255, 255, 255, 0.7));
z-index: 10;
pointer-events: none;
border-radius: inherit;
animation: quickFadeOut 0.2s ease-out forwards;
}
@keyframes quickFadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* ===================================
屏幕震动效果
=================================== */
@keyframes screenShake {
0%,
100% {
transform: translateX(0);
}
10% {
transform: translateX(-10px) translateY(5px);
}
20% {
transform: translateX(10px) translateY(-5px);
}
30% {
transform: translateX(-8px) translateY(3px);
}
40% {
transform: translateX(8px) translateY(-3px);
}
50% {
transform: translateX(-5px);
}
60% {
transform: translateX(5px);
}
70% {
transform: translateX(-3px);
}
80% {
transform: translateX(3px);
}
90% {
transform: translateX(-1px);
}
}
.screen-shake {
animation: screenShake 0.5s ease;
}
/* ===================================
新版地图路径样式
=================================== */
.map-container-v2 {
position: relative;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-xl);
overflow: auto;
background:
radial-gradient(ellipse at 50% 20%, rgba(26, 35, 126, 0.3) 0%, transparent 50%),
radial-gradient(ellipse at 80% 80%, rgba(156, 39, 176, 0.2) 0%, transparent 40%),
var(--bg-dark);
}
.map-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.map-path {
fill: none;
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 2;
stroke-dasharray: 8, 4;
animation: pathFlow 20s linear infinite;
}
@keyframes pathFlow {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -100;
}
}
.map-path.active {
stroke: var(--accent-gold);
stroke-width: 3;
filter: drop-shadow(0 0 5px var(--accent-gold));
stroke-dasharray: none;
}
.map-path.completed {
stroke: var(--accent-green);
opacity: 0.5;
}
/* 地图节点2.0 */
.map-node-v2 {
width: 80px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.6);
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
cursor: pointer;
transition: all var(--transition-normal);
position: relative;
z-index: 1;
}
.map-node-v2 .node-icon {
font-size: 2rem;
margin-bottom: 4px;
}
.map-node-v2 .node-label {
font-size: 0.7rem;
color: var(--text-muted);
}
.map-node-v2:hover:not(.locked):not(.completed) {
transform: scale(1.15);
border-color: var(--accent-gold);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
}
.map-node-v2.current {
border-color: var(--accent-gold);
box-shadow: 0 0 20px var(--accent-gold);
animation: nodeFloat 3s ease-in-out infinite;
}
@keyframes nodeFloat {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.map-node-v2.enemy {
border-color: var(--card-attack);
}
.map-node-v2.elite {
border-color: #a29bfe;
box-shadow: 0 0 15px rgba(162, 155, 254, 0.3);
}
.map-node-v2.boss {
border-color: #ffd700;
box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
animation: bossGlow 2s ease-in-out infinite;
}
@keyframes bossGlow {
0%,
100% {
box-shadow: 0 0 25px rgba(255, 215, 0, 0.5);
}
50% {
box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
}
}
.map-node-v2.event {
border-color: #00cec9;
}
.map-node-v2.shop {
border-color: #fdcb6e;
}
.map-node-v2.rest {
border-color: #55efc4;
}
/* 节点预览卡 */
.node-preview {
position: absolute;
bottom: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
width: 200px;
background: var(--bg-medium);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 12px;
opacity: 0;
visibility: hidden;
transition: all var(--transition-fast);
z-index: 100;
pointer-events: none;
}
.map-node-v2:hover .node-preview {
opacity: 1;
visibility: visible;
}
.node-preview::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 8px solid transparent;
border-top-color: var(--bg-medium);
}
.node-preview-title {
font-weight: 600;
color: var(--accent-gold);
margin-bottom: 8px;
font-size: 0.9rem;
}
.node-preview-content {
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.4;
}
.node-preview-rewards {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.7rem;
}
/* ===================================
事件对话框
=================================== */
.event-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
display: none;
justify-content: center;
align-items: center;
z-index: 2000;
}
.event-modal.active {
display: flex;
}
.event-container {
width: 90%;
max-width: 600px;
background: linear-gradient(180deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
border: 2px solid var(--accent-purple);
border-radius: 20px;
overflow: hidden;
animation: eventSlideIn 0.5s ease;
}
@keyframes eventSlideIn {
0% {
opacity: 0;
transform: translateY(50px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.event-header {
padding: 20px;
background: rgba(156, 39, 176, 0.2);
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.event-icon {
font-size: 3rem;
margin-bottom: 10px;
}
.event-title {
font-family: var(--font-display);
font-size: 1.8rem;
color: var(--accent-gold);
}
.event-body {
padding: 25px;
}
.event-description {
font-size: 1rem;
line-height: 1.8;
color: var(--text-secondary);
margin-bottom: 25px;
text-align: center;
}
.event-speaker {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.speaker-avatar {
width: 60px;
height: 60px;
background: var(--bg-light);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
border: 2px solid var(--accent-purple);
}
.speaker-dialogue {
flex: 1;
background: rgba(255, 255, 255, 0.05);
padding: 15px;
border-radius: 12px;
border-left: 3px solid var(--accent-purple);
font-style: italic;
line-height: 1.6;
}
.event-choices {
display: flex;
flex-direction: column;
gap: 12px;
}
.event-choice {
display: flex;
align-items: center;
gap: 12px;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
cursor: pointer;
transition: all var(--transition-fast);
text-align: left;
}
.event-choice:hover {
background: rgba(255, 215, 0, 0.1);
border-color: var(--accent-gold);
transform: translateX(10px);
}
.choice-icon {
font-size: 1.5rem;
}
.choice-content {
flex: 1;
}
.choice-text {
font-weight: 500;
color: var(--text-primary);
margin-bottom: 4px;
}
.choice-result {
font-size: 0.8rem;
color: var(--text-muted);
}
.choice-result.positive {
color: var(--accent-green);
}
.choice-result.negative {
color: var(--accent-red);
}
.choice-result.neutral {
color: var(--accent-cyan);
}
/* ===================================
成就通知
=================================== */
.achievement-popup {
position: fixed;
top: 100px;
left: 50%;
transform: translateX(-50%) translateY(-100px);
background: linear-gradient(135deg, var(--bg-medium) 0%, var(--bg-dark) 100%);
border: 2px solid var(--accent-gold);
border-radius: 16px;
padding: 20px 30px;
display: flex;
align-items: center;
gap: 15px;
z-index: 3000;
opacity: 0;
transition: all 0.5s ease;
box-shadow: 0 10px 40px rgba(255, 215, 0, 0.3);
}
.achievement-popup.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.achievement-icon {
font-size: 2.5rem;
}
.achievement-info {
display: flex;
flex-direction: column;
}
.achievement-label {
font-size: 0.8rem;
color: var(--accent-gold);
text-transform: uppercase;
letter-spacing: 0.2em;
}
.achievement-name {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary);
}
/* ===================================
动态背景效果
=================================== */
.dynamic-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
overflow: hidden;
}
.bg-star {
position: absolute;
width: 2px;
height: 2px;
background: white;
border-radius: 50%;
animation: twinkleStar 3s ease-in-out infinite;
}
@keyframes twinkleStar {
0%,
100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.5);
}
}
.bg-cloud {
position: absolute;
width: 200px;
height: 100px;
background: radial-gradient(ellipse, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
animation: floatCloud 60s linear infinite;
}
@keyframes floatCloud {
0% {
transform: translateX(-200px);
}
100% {
transform: translateX(calc(100vw + 200px));
}
}
/* ===================================
新增 VFX (P0 Update)
=================================== */
/* 粒子效果 */
.vfx-particle {
position: fixed;
width: 6px;
height: 6px;
border-radius: 50%;
pointer-events: none;
z-index: 1000;
opacity: 0;
animation: particleFly 0.6s ease-out forwards;
}
@keyframes particleFly {
0% {
opacity: 1;
transform: scale(1) translate(0, 0);
}
100% {
opacity: 0;
transform: scale(0.5) translate(var(--tx), var(--ty));
}
}
/* 震动强度 */
.shake {
animation: shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}
.shake-light {
animation: shakeLight 0.3s ease-in-out;
}
.shake-heavy {
animation: shakeHeavy 0.5s ease-in-out;
}
@keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes shakeLight {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-2px);
}
75% {
transform: translateX(2px);
}
}
@keyframes shakeHeavy {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
10% {
transform: translate(-5px, -5px) rotate(-5deg);
}
30% {
transform: translate(5px, 5px) rotate(5deg);
}
50% {
transform: translate(-5px, 5px) rotate(-5deg);
}
70% {
transform: translate(5px, -5px) rotate(5deg);
}
}
/* 伤害预览闪烁 */
@keyframes previewBlink {
from {
opacity: 0.4;
}
to {
opacity: 0.8;
}
}
@keyframes lethalPulse {
from {
filter: brightness(1);
}
to {
filter: brightness(0.5);
}
}/* ===================================
Refactored Card Detail Modal (Right Click)
Theme: Void, Ink & Gold
=================================== */
.card-detail-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
z-index: 2000;
display: flex;
justify-content: center;
align-items: center;
perspective: 1200px;
}
.card-detail-container {
display: flex;
width: 800px;
height: 500px;
background: radial-gradient(circle at top right, #1a202c, #0d1117);
border: 2px solid var(--accent-gold);
border-radius: 12px;
box-shadow:
0 0 40px rgba(0, 0, 0, 0.8),
0 0 15px rgba(212, 175, 55, 0.3),
inset 0 0 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
position: relative;
/* Animation handled by JS class addition usually, but default here is fine */
}
/* Ink Decoration Pattern */
.card-detail-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 0;
}
/* --- Left Pane: 3D Preview --- */
.cd-preview-pane {
flex: 0 0 40%;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0.2) 100%);
border-right: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
z-index: 1;
}
.card-preview-wrapper {
transform: scale(1.5);
filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
}
/* Ensure the big preview card looks good - Flat & Active */
.card.big-preview {
position: relative;
/* User request: No tilt, show hover effect directly */
transform: rotateY(0deg) rotateX(0deg) scale(1.1);
transition: transform 0.5s ease;
cursor: default;
/* Simulate hover state visually */
box-shadow:
0 0 20px rgba(255, 215, 0, 0.4),
0 10px 40px rgba(0, 0, 0, 0.5);
border-color: var(--accent-gold);
z-index: 10;
}
/* Force shine to be visible */
.card.big-preview .card__shine {
opacity: 0.3;
/* Match the new toned-down shine opacity */
}
.card.big-preview .card__glare {
opacity: 0.2;
}
.card.big-preview:hover {
/* Slight movement on actual hover just for life */
transform: scale(1.15);
}
/* --- Right Pane: Info --- */
.cd-info-pane {
flex: 1;
display: flex;
flex-direction: column;
padding: 30px;
z-index: 1;
}
.cd-header {
border-bottom: 1px solid rgba(212, 175, 55, 0.3);
padding-bottom: 15px;
margin-bottom: 20px;
}
.cd-header h2 {
font-family: var(--font-display);
font-size: 2rem;
color: var(--accent-gold);
margin: 0 0 10px 0;
text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}
.cd-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cd-badge {
font-size: 0.75rem;
padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ccc;
text-transform: uppercase;
letter-spacing: 1px;
}
.cd-badge.rarity-legendary {
color: #fcc200;
border-color: #fcc200;
background: rgba(252, 194, 0, 0.1);
}
.cd-badge.rarity-rare {
color: #a0c0ff;
border-color: #a0c0ff;
background: rgba(160, 192, 255, 0.1);
}
.cd-badge.law {
color: #d8b4fe;
border-color: #d8b4fe;
}
.cd-body {
flex: 1;
overflow-y: auto;
padding-right: 10px;
}
/* Scrollbar for detail body */
.cd-body::-webkit-scrollbar {
width: 4px;
}
.cd-body::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
.cd-desc-box {
font-size: 1.1rem;
line-height: 1.6;
color: #e2e8f0;
margin-bottom: 25px;
padding: 15px;
background: rgba(0, 0, 0, 0.3);
border-radius: 6px;
border-left: 3px solid var(--accent-gold);
}
.cd-section {
margin-bottom: 20px;
}
.cd-section h3 {
font-size: 0.9rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.cd-effects-list {
list-style: none;
padding: 0;
}
.cd-effects-list li {
padding: 8px 12px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
font-size: 0.95rem;
color: #cbd5e1;
}
.cd-effects-list li:last-child {
border-bottom: none;
}
.cd-lore {
margin-top: 30px;
font-style: italic;
color: #64748b;
font-size: 0.85rem;
text-align: right;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 10px;
}
.cd-close-btn {
margin-top: 20px;
align-self: flex-end;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.2);
color: rgba(255, 255, 255, 0.6);
padding: 8px 24px;
border-radius: 6px;
cursor: pointer;
font-family: var(--font-display);
transition: all 0.2s;
}
.cd-close-btn:hover {
border-color: var(--accent-gold);
color: var(--accent-gold);
background: rgba(212, 175, 55, 0.05);
}
@keyframes modalPopIn {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}/* ===================================
The Defier - Mobile Adaptation
Mobile-specific overrides and adjustments
=================================== */
@media screen and (max-width: 768px) {
/* --- Global Resets & Adjustments --- */
:root {
--card-width-mobile: 88px;
--card-height-mobile: 140px;
--spacing-md: 10px;
--spacing-lg: 16px;
--spacing-xl: 20px;
}
body {
font-size: 14px;
/* Prevent pull-to-refresh on mobile */
overscroll-behavior-y: none;
}
.screen {
padding: 0;
overflow-x: hidden;
}
button {
/* Ensure touch targets are large enough */
min-height: 44px;
}
/* --- Main Menu --- */
#main-menu .title-cn {
font-size: 4rem;
/* Reduced from 6.5rem */
letter-spacing: 4px;
margin-bottom: 0;
}
#main-menu .title-en {
font-size: 0.9rem;
letter-spacing: 0.5em;
margin-left: 0.5em;
}
#main-menu .menu-content {
padding: 20px;
width: min(94vw, 420px);
min-height: auto;
}
#main-menu .game-description {
font-size: 0.85rem;
padding: 0 10px;
}
#main-menu .talisman-btn,
#main-menu .menu-btn {
width: min(300px, 85vw);
}
#main-menu .menu-utilities {
gap: 15px;
flex-wrap: wrap;
}
#main-menu .util-btn-wrapper {
margin-bottom: 10px;
}
#main-menu .util-label {
/* Always show labels on mobile or hide if too cluttered?
Let's keep them but ensure they don't overlap awkwardly. */
font-size: 0.7rem;
bottom: -20px;
}
/* --- Character Selection --- */
#character-selection-screen .character-selection-container {
flex-direction: column;
align-items: center;
overflow-y: auto;
}
#character-select .ink-scroll-content {
flex-direction: column;
padding: 50px 20px 20px;
/* More top padding for "back" button space */
}
#character-select .char-identity-col {
border-right: none;
border-bottom: 2px dashed rgba(0, 0, 0, 0.1);
padding-bottom: 20px;
margin-bottom: 20px;
}
/* --- Realm Selection --- */
#realm-select-screen .realm-select-layout {
flex-direction: column;
}
#realm-select-screen .realm-list-container {
display: flex;
flex-direction: row;
overflow-x: auto;
padding: 10px;
height: auto;
min-height: 200px;
width: 100%;
scroll-snap-type: x mandatory;
padding-bottom: 20px;
/* Space for scroll */
}
/* Modify the realm cards to be side-scrolling items */
.realm-card {
min-width: 85vw;
margin-right: 15px;
scroll-snap-align: center;
}
#realm-select-screen .realm-preview-panel {
width: 100%;
height: auto;
min-height: 50vh;
border-left: none;
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 40px;
}
/* --- Map Screen (Ascension V3) --- */
.map-v3-header {
padding: 10px;
}
.map-v3-header .back-btn {
padding: 5px 10px;
font-size: 0.8rem;
}
.player-status-bar {
gap: 5px;
flex-wrap: wrap;
justify-content: flex-end;
}
.status-item {
padding: 4px 8px;
font-size: 0.8rem;
}
.map-adventure-buffs {
margin-top: 4px;
gap: 4px;
}
.map-endless-panel {
margin-top: 4px;
padding: 8px 9px;
}
.map-endless-panel .endless-stats {
gap: 4px;
}
.map-endless-panel .endless-stats span {
font-size: 0.64rem;
}
.map-endless-panel .endless-mutator-chip {
font-size: 0.62rem;
}
.map-endless-panel .endless-pressure-chip {
font-size: 0.6rem;
line-height: 1.2;
white-space: normal;
}
.map-endless-panel .endless-theme-chip {
font-size: 0.6rem;
line-height: 1.2;
white-space: normal;
}
.map-endless-panel .endless-season-chip,
.map-endless-panel .endless-directive-chip {
font-size: 0.6rem;
line-height: 1.2;
white-space: normal;
}
.map-endless-panel .endless-danger-band {
margin-top: 4px;
padding: 7px 8px;
}
.map-endless-panel .endless-danger-head {
gap: 5px;
}
.map-endless-panel .endless-danger-head strong {
font-size: 0.64rem;
line-height: 1.3;
}
.map-endless-panel .endless-danger-head span {
font-size: 0.58rem;
line-height: 1.2;
white-space: normal;
}
.map-endless-panel .endless-danger-summary,
.map-endless-panel .endless-danger-foot span {
font-size: 0.6rem;
line-height: 1.35;
}
.map-endless-panel .endless-danger-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
}
.map-endless-panel .endless-danger-chip {
padding: 6px;
}
.map-endless-panel .endless-danger-chip strong {
font-size: 0.58rem;
line-height: 1.25;
}
.map-endless-panel .endless-danger-chip span {
font-size: 0.72rem;
}
.map-endless-panel .endless-theme-desc {
font-size: 0.6rem;
line-height: 1.3;
margin-top: 4px;
}
.map-endless-panel .endless-season-desc,
.map-endless-panel .endless-season-ledger {
font-size: 0.6rem;
line-height: 1.3;
margin-top: 4px;
}
.map-run-path-flash {
margin-top: 4px;
padding: 9px 10px;
gap: 6px;
}
.map-run-path-flash-head {
flex-direction: column;
align-items: stretch;
}
.map-run-path-flash-badge,
.map-run-path-flash-status {
justify-content: center;
font-size: 0.64rem;
}
.map-run-path-flash-title {
font-size: 0.76rem;
}
.map-run-path-flash-reward,
.map-run-path-flash-next {
font-size: 0.66rem;
}
.map-endless-panel .endless-paranoia-summary {
font-size: 0.6rem;
line-height: 1.3;
margin-top: 4px;
}
.map-endless-panel .endless-paranoia-effect {
font-size: 0.6rem;
line-height: 1.2;
}
.map-buff-chip {
padding: 4px 7px;
font-size: 0.66rem;
}
.map-expedition-panels {
grid-template-columns: 1fr;
padding: 0 10px 14px;
gap: 10px;
}
.expedition-overview-card {
grid-column: span 1;
}
.expedition-panel-card {
padding: 12px;
}
.expedition-card-title {
font-size: 16px;
}
.expedition-signal-grid {
grid-template-columns: 1fr;
}
.expedition-choice-head {
align-items: flex-start;
}
.map-buff-name {
display: none;
}
.event-choice .choice-title {
align-items: flex-start;
flex-direction: column;
gap: 4px;
}
.event-choice .choice-rarity {
font-size: 0.74rem;
}
.node-row-v3 {
padding: 0 10px;
/* Reduce node margin to fit 3 nodes if needed, or 2 */
}
.map-node-v3 {
margin: 0 10px;
/* Reduced from 40px */
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.node-risk-badge {
right: -10px;
bottom: -8px;
padding: 2px 6px;
font-size: 0.56rem;
}
.node-tooltip {
width: min(220px, 70vw);
font-size: 12px;
}
.map-node-v3.boss {
width: 70px;
height: 70px;
font-size: 2rem;
}
/* --- Battle UI --- */
.battle-container {
grid-template-rows: 60px 1fr auto auto;
/* Header, Enemy, Player, Hand */
grid-template-columns: 1fr;
padding: 0;
overflow: hidden;
}
/* Header / Treasures */
#battle-treasures {
position: absolute;
top: 10px;
right: 10px;
left: auto;
transform: scale(0.8);
transform-origin: top right;
max-width: 50%;
z-index: 20;
}
/* Enemy Area */
.enemy-area {
height: auto;
min-height: 35vh;
align-items: flex-end;
/* Align enemies to bottom of their area */
padding-bottom: 2rem;
}
.enemy-container {
gap: 10px;
/* Reduce gap between enemies */
}
/* Player Area */
.player-area {
position: relative;
height: auto;
padding: 10px;
z-index: 10;
margin-bottom: 120px;
/* Space for hand */
}
.player-character {
transform: scale(0.9);
transform-origin: bottom center;
margin-bottom: 0;
}
/* Skill Button - Float it */
#active-skill-btn {
position: absolute;
bottom: 20px;
right: 20px;
transform: scale(0.8);
z-index: 15;
}
/* End turn button - Float it */
.end-turn-btn {
position: absolute;
bottom: 160px;
/* Above hand */
right: 10px;
/* Right aligned */
width: auto;
padding: 10px 20px;
font-size: 1rem;
z-index: 84;
/* Top most */
}
/* Hand Area */
.hand-area {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
min-height: 170px;
padding: 8px 8px max(14px, env(safe-area-inset-bottom));
display: flex;
align-items: flex-end;
z-index: 70;
overflow: visible;
/* background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); */
}
.hand-cards {
justify-content: flex-start;
/* Center cards */
padding-left: 0;
padding-bottom: 6px;
min-height: 140px;
height: auto;
overflow-x: auto;
overflow-y: visible;
align-items: flex-end;
/* Allow scroll if too many cards? No, usually fan. */
}
/* Card sizing in hand */
.card {
width: var(--card-width-mobile);
height: var(--card-height-mobile);
font-size: 0.8rem;
/* Smaller text */
}
.card .card-cost {
width: 24px;
height: 24px;
font-size: 0.9rem;
}
.card .card-title,
.card .card-name {
font-size: 0.85rem;
}
.card .card-desc {
font-size: 0.7rem;
line-height: 1.2;
}
/* Reduce overlap on mobile to ensure tap targets are distinguishable */
.hand-cards .card {
margin-left: -32px;
/* Tighter overlap */
}
.hand-cards .card:hover {
/* On mobile hover is weird, usually means 'active' or 'focus'.
We rely on click-to-select behavior usually.
But if we pop up, ensure it doesn't go offscreen. */
transform: translateY(-56px) scale(1.14) !important;
z-index: 100;
}
/* Resources */
.resources-container {
position: absolute;
top: -95px;
/* Above player? */
flex-direction: row;
/* Horizontal */
width: auto;
height: auto;
left: 50%;
transform: translateX(-50%);
justify-content: center;
}
.energy-display {
margin-bottom: 0;
margin-right: 10px;
}
/* --- Reward Screen --- */
#reward-screen .reward-container {
padding: 14px 10px 18px;
}
#reward-screen .reward-shell {
width: 100%;
max-width: 100%;
gap: 16px;
}
#reward-screen .reward-layout {
grid-template-columns: minmax(0, 1fr);
gap: 14px;
}
#reward-screen .reward-layout > * {
min-width: 0;
}
#reward-screen .reward-main-column,
#reward-screen .reward-side-column {
width: 100%;
min-width: 0;
gap: 14px;
}
#reward-screen .reward-side-column {
grid-template-columns: minmax(0, 1fr);
}
#reward-screen .reward-panel,
#reward-screen .reward-card-stage,
#reward-screen .reward-summary-card,
#reward-screen .reward-actions {
padding-left: 14px;
padding-right: 14px;
}
#reward-screen .steal-chance {
padding: 18px 14px;
}
#reward-screen .reward-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
#reward-screen .reward-card {
justify-self: center;
transform: scale(0.9);
transform-origin: center top;
}
#reward-screen .reward-card:hover {
transform: scale(0.94) translateY(-6px);
}
.reward-resources {
gap: 8px;
justify-content: flex-start;
}
.reward-item {
padding: 6px 9px;
font-size: 0.74rem;
line-height: 1.25;
}
.reward-battle-meta {
width: 100%;
padding: 8px 9px;
border-radius: 10px;
}
.reward-meta-title {
font-size: 0.74rem;
margin-bottom: 6px;
}
.reward-meta-chips {
gap: 5px 6px;
}
.reward-meta-chip {
font-size: 0.62rem;
padding: 3px 7px;
}
.reward-run-path-meta {
width: 100%;
padding: 10px;
border-radius: 12px;
}
.reward-narrative-brief {
width: 100%;
padding: 10px;
border-radius: 12px;
gap: 6px;
}
.reward-narrative-kicker {
font-size: 0.68rem;
}
.reward-narrative-title {
font-size: 0.78rem;
}
.reward-narrative-body,
.reward-narrative-foot {
font-size: 0.64rem;
}
.reward-run-path-header {
flex-direction: column;
align-items: stretch;
}
.reward-run-path-badge,
.reward-run-path-status {
justify-content: center;
font-size: 0.66rem;
}
.reward-run-path-entry {
padding: 9px 10px;
border-radius: 11px;
}
.reward-run-path-phase {
font-size: 0.74rem;
}
.reward-run-path-desc,
.reward-run-path-next,
.reward-run-path-reward {
font-size: 0.64rem;
}
.reward-run-path-finale {
padding: 10px;
}
.reward-run-path-crest {
width: 100%;
justify-content: center;
font-size: 0.68rem;
}
.reward-run-path-finale-copy {
font-size: 0.64rem;
}
.reward-run-path-archive {
padding: 10px;
border-radius: 11px;
}
.reward-run-path-archive-title {
font-size: 0.7rem;
}
.reward-run-path-archive-copy,
.reward-run-path-archive-meta {
font-size: 0.62rem;
}
/* --- Decks and Inventory --- */
.law-archive-grid,
.compendium-grid,
.shop-cards {
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 10px;
}
.shop-screen-header {
flex-direction: column;
align-items: stretch;
}
.shop-currency-strip {
width: 100%;
margin-left: 0;
justify-content: flex-start;
}
.shop-currency {
flex: 1 1 120px;
justify-content: center;
}
.shop-tab-bar {
gap: 8px;
}
.shop-tab-btn {
flex: 1 1 calc(50% - 8px);
justify-content: center;
padding: 10px 12px;
}
.shop-container {
padding: 14px 10px 24px;
gap: 14px;
}
.shop-section {
padding: 14px 12px;
}
.shop-services {
grid-template-columns: 1fr;
gap: 10px;
}
.shop-service {
align-items: flex-start;
}
.service-name-row {
flex-direction: column;
align-items: flex-start;
}
.service-tags {
justify-content: flex-start;
}
/* --- Fate Ring / Life Ring --- */
#ring-modal .ring-scene-container {
flex-direction: column;
/* Stack 3D scene and UI */
}
#ring-modal .ring-scene {
width: 100%;
height: 40vh;
/* Top part is 3D scene */
}
#ring-modal .ring-ui-overlay {
position: relative;
height: 60vh;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding: 10px;
pointer-events: auto;
/* Ensure clickable */
}
#ring-modal .ring-ui-panel.left,
#ring-modal .ring-ui-panel.right,
#ring-modal .ring-ui-footer {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
max-height: none;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.8);
/* Darker bg for readability */
}
/* Hide some details on mobile or scroll them */
#ring-modal .ring-ui-panel.right {
display: none;
/* Simplify - maybe show only stats or laws tab?
Or just stack them. For now let's stack them if possible,
But screen real estate is tight. */
}
/* --- Modals (General) --- */
.modal-content {
width: 95%;
max-width: 95%;
max-height: 85vh;
margin: 10px auto;
padding: 15px;
overflow-y: auto;
}
.modal-content.large {
width: 98%;
height: 95vh;
}
.treasure-detail-layout {
flex-direction: column;
}
.treasure-visual-col {
height: 200px;
}
}
#boss-act-panel {
max-width: 100%;
}
.boss-act-panel {
margin: 4px 0 8px;
padding: 10px 12px;
}
.boss-act-title {
font-size: 0.92rem;
}
.boss-act-subtitle,
.boss-act-hp,
.boss-act-chip-label,
.boss-act-line .value {
font-size: 0.72rem;
}
.boss-act-chip {
padding: 8px 9px;
}
.boss-act-counter-chips {
margin-top: 6px;
gap: 4px;
}
.boss-act-counter-chip {
font-size: 0.58rem;
padding: 3px 7px;
}
.boss-act-chip-index {
width: 22px;
height: 22px;
}
.boss-sealed-card::after {
inset: 6px;
}
/* UI Review Pass - Mobile containment */
@media (max-width: 768px) {
#main-menu .menu-content {
width: min(94vw, 420px);
padding: 18px 16px 24px;
border-radius: 22px;
}
#main-menu {
justify-content: flex-start;
padding: 16px 0 22px;
}
#main-menu .menu-utilities {
gap: 14px;
row-gap: 20px;
}
#main-menu .menu-oracle-strip {
grid-template-columns: 1fr;
gap: 12px;
}
#main-menu .menu-oracle-card {
padding: 16px 14px;
}
#challenge-screen .challenge-shell {
width: calc(100% - 16px);
margin-bottom: 16px;
}
#challenge-screen .challenge-scroll-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
#character-selection-screen .character-selection-container {
padding-bottom: 150px;
}
#character-selection-screen .character-selection-footer {
position: sticky;
bottom: 0;
padding: 14px 12px 18px;
background: linear-gradient(180deg, rgba(2, 5, 12, 0), rgba(2, 5, 12, 0.88) 24%, rgba(2, 5, 12, 0.98) 100%);
}
#realm-select-screen .realm-select-layout {
padding-bottom: 20px;
}
#battle-environment {
max-width: calc(100vw - 16px);
}
#legacy-mission-tracker {
top: 58px;
right: 8px;
left: auto;
transform: none;
width: min(220px, calc(100vw - 16px));
padding: 6px 8px;
}
#battle-command-panel {
max-height: 180px;
overflow-y: auto;
}
#battle-command-panel .battle-command-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#battle-command-panel .battle-tactical-advisor {
max-height: 88px;
overflow-y: auto;
}
}
/* UI Review Pass - Mobile battle compact HUD */
@media (max-width: 768px) {
#battle-command-panel {
top: 68px;
left: 6px;
width: calc(100vw - 12px);
max-height: 118px;
padding: 7px 8px;
border-radius: 12px;
z-index: 82;
}
#battle-command-panel .battle-command-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
margin-top: 6px;
}
#battle-command-panel .battle-command-btn {
min-height: 46px;
padding: 5px 6px;
}
#battle-command-panel .battle-command-name {
font-size: 0.62rem;
}
#battle-command-panel .battle-command-meta {
font-size: 0.52rem;
line-height: 1.15;
}
#battle-command-panel .battle-tactical-advisor {
display: block;
margin-top: 6px;
max-height: 34px;
opacity: 1;
overflow: hidden;
}
#legacy-mission-tracker {
top: 64px;
right: 6px;
width: min(184px, calc(100vw - 12px));
padding: 5px 7px;
z-index: 83;
}
#legacy-mission-tracker .legacy-mission-tag,
#legacy-mission-tracker .legacy-mission-reward,
#legacy-mission-tracker .legacy-mission-progress-text {
font-size: 0.64rem;
}
#legacy-mission-tracker .legacy-mission-title {
font-size: 0.72rem;
line-height: 1.22;
}
#boss-act-panel {
position: absolute;
left: 6px;
right: 6px;
top: 194px;
bottom: auto;
width: auto;
margin: 0;
padding: 7px 8px;
border-radius: 14px;
max-height: 160px;
overflow-y: auto;
z-index: 78;
background: linear-gradient(135deg, rgba(31, 19, 12, 0.96), rgba(65, 25, 17, 0.92));
}
#boss-act-panel .boss-act-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
align-items: center;
}
#boss-act-panel .boss-act-title {
font-size: 0.76rem;
letter-spacing: 0.03em;
}
#boss-act-panel .boss-act-subtitle,
#boss-act-panel .boss-act-hp {
font-size: 0.6rem;
}
#boss-act-panel .boss-act-track {
margin-top: 5px;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 5px;
}
#boss-act-panel .boss-act-counter-chips {
margin-top: 4px;
gap: 4px;
}
#boss-act-panel .boss-act-counter-chip {
font-size: 0.52rem;
padding: 2px 6px;
}
#boss-act-panel .boss-act-chip {
padding: 5px 4px;
gap: 5px;
border-radius: 10px;
}
#boss-act-panel .boss-act-chip-index {
width: 18px;
height: 18px;
font-size: 0.58rem;
}
#boss-act-panel .boss-act-chip-label {
font-size: 0.56rem;
line-height: 1.15;
}
#boss-act-panel .boss-act-body {
display: block;
margin-top: 5px;
}
#boss-act-panel .boss-act-line {
grid-template-columns: 44px 1fr;
gap: 5px;
padding: 4px 6px;
border-radius: 8px;
}
#boss-act-panel .boss-act-line.signal,
#boss-act-panel .boss-act-line.counter,
#boss-act-panel .boss-act-line.fail {
display: none;
}
#boss-act-panel .boss-act-line .label,
#boss-act-panel .boss-act-line .value {
font-size: 0.58rem;
line-height: 1.2;
}
.end-turn-btn {
bottom: 192px;
right: 8px;
padding: 8px 16px;
font-size: 0.9rem;
z-index: 84;
}
@media (max-height: 500px) {
.end-turn-btn {
bottom: 140px;
}
#boss-act-panel {
top: calc(58px + 20vh);
max-height: 20vh;
}
#battle-command-panel {
max-height: 20vh;
}
}
.player-area {
margin-bottom: 132px;
}
.hand-area {
min-height: 182px;
padding-bottom: 12px;
}
}
@media (max-width: 768px) {
#battle-command-panel {
top: 58px;
max-height: 25vh;
overflow-y: auto;
}
#boss-act-panel {
top: calc(58px + 26vh);
max-height: 25vh;
overflow-y: auto;
padding: 6px 7px;
}
#boss-act-panel .boss-act-track {
margin-top: 4px;
gap: 4px;
}
#boss-act-panel .boss-act-chip {
padding: 4px 3px;
gap: 4px;
}
#boss-act-panel .boss-act-chip-label {
font-size: 0.52rem;
}
#boss-act-panel .boss-act-body {
margin-top: 4px;
}
#boss-act-panel .boss-act-line {
padding: 3px 5px;
}
#boss-act-panel .boss-act-line .label,
#boss-act-panel .boss-act-line .value {
font-size: 0.54rem;
}
}
#battle-screen .battle-container {
position: relative;
}
#battle-screen .environment-display {
z-index: var(--z-battle-environment);
}
#battle-screen .legacy-mission-tracker,
#battle-screen #legacy-mission-tracker {
z-index: var(--z-battle-mission);
}
#battle-screen .battle-command-panel,
#battle-screen #battle-command-panel {
top: 148px;
left: var(--hud-gutter-desktop);
transform: none;
width: clamp(264px, 20vw, 312px);
max-height: clamp(150px, calc(100vh - 430px), 410px);
padding: 7px 8px;
border-radius: var(--hud-panel-radius);
border-color: var(--hud-panel-border);
background: linear-gradient(145deg, rgba(7, 16, 40, 0.86), rgba(4, 10, 26, 0.82));
box-shadow: var(--hud-panel-shadow);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--hud-scrollbar) transparent;
z-index: var(--z-battle-command-panel);
backdrop-filter: blur(8px);
}
#battle-screen .battle-command-panel::-webkit-scrollbar,
#battle-screen .battle-tactical-advisor::-webkit-scrollbar {
width: 5px;
}
#battle-screen .battle-command-panel::-webkit-scrollbar-thumb,
#battle-screen .battle-tactical-advisor::-webkit-scrollbar-thumb {
background: var(--hud-scrollbar);
border-radius: 999px;
}
#battle-screen .battle-command-panel.custom-position {
right: auto;
bottom: auto;
}
#battle-screen .battle-command-panel .battle-command-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
margin-top: 7px;
}
#battle-screen .battle-command-panel .battle-command-btn {
min-height: 48px;
padding: 5px 6px;
}
#battle-screen .battle-command-panel .battle-command-name {
font-size: 0.69rem;
}
#battle-screen .battle-command-panel .battle-command-meta {
font-size: 0.6rem;
line-height: 1.18;
}
#battle-screen .battle-tactical-advisor {
margin-top: 5px;
max-height: min(132px, 16vh);
overflow-y: auto;
will-change: max-height, opacity;
transition:
max-height 220ms ease,
opacity var(--hud-transition-fast),
margin var(--hud-transition-fast),
border-color var(--hud-transition-fast),
background var(--hud-transition-fast);
}
#battle-screen .battle-tactical-advisor.collapsed {
max-height: 38px;
overflow: hidden;
}
#battle-screen .battle-advisor-header {
min-height: 28px;
gap: 7px;
border-radius: 10px;
}
#battle-screen .battle-advisor-title {
font-size: 0.68rem;
}
#battle-screen .player-area {
justify-content: flex-end;
align-items: center;
padding-left: clamp(304px, 25vw, 350px);
padding-right: clamp(16px, 3vw, 42px);
pointer-events: none;
}
#battle-screen .player-character {
position: relative;
display: grid;
grid-template-columns: auto minmax(92px, 138px);
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid rgba(119, 205, 255, 0.18);
border-radius: 22px;
background:
linear-gradient(145deg, rgba(6, 16, 35, 0.74), rgba(5, 10, 24, 0.5)),
radial-gradient(circle at 22% 30%, rgba(79, 196, 255, 0.13), transparent 44%);
box-shadow:
0 18px 36px rgba(0, 0, 0, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.07);
pointer-events: auto;
}
#battle-screen .player-character::after {
content: "";
position: absolute;
left: 20px;
right: 18px;
bottom: -13px;
height: 18px;
border-radius: 50%;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42), transparent 70%);
pointer-events: none;
}
#battle-screen .player-avatar {
width: 96px;
height: 96px;
border-color: rgba(255, 221, 151, 0.88);
background:
radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.25), transparent 24%),
linear-gradient(145deg, rgba(35, 52, 88, 0.9), rgba(32, 18, 62, 0.94));
box-shadow:
0 0 0 6px rgba(255, 221, 151, 0.08),
0 0 36px rgba(106, 201, 255, 0.24),
inset 0 -18px 26px rgba(0, 0, 0, 0.34);
}
#battle-screen .player-face-visual {
background-repeat: no-repeat;
background-position: top center;
background-size: cover;
}
#battle-screen .player-face-visual.is-image {
border: 0;
box-shadow: inset 0 -18px 28px rgba(0, 0, 0, 0.18);
}
#battle-screen .player-avatar>span,
#battle-screen .player-avatar>#player-name-display {
position: absolute;
left: 50%;
bottom: -18px;
min-width: 76px;
padding: 3px 8px;
border: 1px solid rgba(255, 221, 151, 0.36);
border-radius: 999px;
background: rgba(6, 12, 26, 0.82);
color: rgba(255, 242, 212, 0.96);
font-size: 0.68rem;
line-height: 1.1;
text-align: center;
transform: translateX(-50%);
}
#battle-screen .player-bars {
width: 100%;
min-width: 112px;
}
#battle-screen .battle-advisor-line {
margin-top: 4px;
font-size: 0.64rem;
line-height: 1.28;
}
#battle-screen .battle-advisor-section-title,
#battle-screen .battle-advisor-section-note,
#battle-screen .battle-advisor-tempo-label,
#battle-screen .battle-advisor-tempo-score,
#battle-screen .battle-advisor-status-chip,
#battle-screen .battle-advisor-chain-tag,
#battle-screen .battle-advisor-chain-step {
font-size: 0.58rem;
}
#battle-screen .battle-advisor-chain-title {
font-size: 0.67rem;
}
#battle-screen .battle-advisor-cardstep-btn,
#battle-screen .battle-advisor-matrix-btn {
font-size: 0.58rem;
padding: 4px 6px;
}
#battle-screen .boss-act-panel,
#battle-screen #boss-act-panel {
width: var(--hud-boss-width);
max-width: calc(100% - 32px);
margin-top: 8px;
margin-left: auto;
margin-right: auto;
padding: 10px 12px;
border-radius: 16px;
background: var(--hud-panel-bg-strong);
z-index: var(--z-battle-boss-panel);
pointer-events: none;
}
#battle-screen .boss-act-track {
gap: 8px;
margin-top: 9px;
}
#battle-screen .boss-act-counter-chips {
margin-top: 8px;
gap: 5px;
}
#battle-screen .boss-act-counter-chip {
font-size: 0.62rem;
padding: 3px 8px;
}
#battle-screen .boss-act-chip {
padding: 7px 8px;
gap: 8px;
}
#battle-screen .boss-act-chip-index {
width: 22px;
height: 22px;
font-size: 0.7rem;
}
#battle-screen .boss-act-chip-label {
font-size: 0.7rem;
}
#battle-screen .boss-act-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
margin-top: 8px;
}
#battle-screen .boss-act-line {
grid-template-columns: 64px 1fr;
gap: 8px;
padding: 6px 8px;
}
#battle-screen .boss-act-line.fail {
grid-column: 1 / -1;
}
#battle-screen .boss-act-line .label {
font-size: 0.64rem;
}
#battle-screen .boss-act-line .value {
font-size: 0.72rem;
line-height: 1.4;
}
#battle-screen .end-turn-btn,
#battle-screen .end-turn-btn:hover:not(:disabled),
#battle-screen .end-turn-btn:active:not(:disabled) {
z-index: var(--z-battle-end-turn);
}
#battle-screen .enemy-intent,
#battle-screen .enemy-avatar.has-image .enemy-intent {
z-index: var(--z-battle-intent);
}
#battle-screen .enemy-container {
width: min(100%, 760px);
justify-content: center;
align-items: flex-start;
align-content: flex-start;
flex-wrap: wrap;
row-gap: 28px;
column-gap: clamp(18px, 3vw, 40px);
}
#battle-screen .enemy {
width: clamp(124px, 12vw, 162px);
gap: 8px;
}
#battle-screen .enemy-avatar {
overflow: visible;
}
#battle-screen .enemy-info-stack {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
#battle-screen .enemy-name {
width: 100%;
margin-top: 2px;
font-size: 0.94rem;
line-height: 1.18;
text-align: center;
text-wrap: balance;
}
#battle-screen .enemy-meta-strip {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 5px;
margin: 0;
}
#battle-screen .enemy-meta-strip .enemy-role-tag,
#battle-screen .enemy-meta-strip .enemy-plan-tag,
#battle-screen .enemy-meta-strip .enemy-encounter-tag,
#battle-screen .enemy-meta-strip .enemy-encounter-affix,
#battle-screen .enemy-meta-strip .enemy-squad-tag,
#battle-screen .enemy-meta-strip .enemy-formation-tag,
#battle-screen .enemy-meta-strip .enemy-counter-tag,
#battle-screen .enemy-meta-strip .enemy-threat-tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 18px;
max-width: 100%;
margin: 0;
padding: 2px 7px;
text-align: center;
line-height: 1.16;
white-space: normal;
text-wrap: balance;
word-break: break-word;
}
#battle-screen .enemy-meta-primary {
margin-top: 1px;
}
#battle-screen .enemy-meta-secondary {
opacity: 0.94;
}
#battle-screen .enemy-threat-tags {
gap: 4px;
}
#battle-screen .enemy-vitals {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
#battle-screen .enemy-hp {
width: min(100%, 92px);
}
#battle-screen .enemy-vital-row {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
}
#battle-screen .enemy-hp-text {
font-size: 0.78rem;
line-height: 1;
}
#battle-screen .enemy-block {
margin: 0;
font-size: 0.78rem;
line-height: 1;
}
#battle-screen .enemy-buffs {
width: 100%;
min-height: 0;
margin-top: 0;
}
#battle-screen .enemy-intent {
top: -18px;
right: -18px;
width: auto;
min-width: 46px;
max-width: min(108px, calc(100% + 28px));
min-height: 46px;
height: auto;
padding: 4px 9px 6px 4px;
border-width: 1px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0;
background:
linear-gradient(135deg, rgba(10, 16, 30, 0.96), rgba(21, 28, 44, 0.92));
border-color: rgba(208, 222, 255, 0.28);
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.36),
0 0 0 1px rgba(255, 255, 255, 0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transform-origin: center;
}
#battle-screen .enemy-avatar.has-image .enemy-intent {
top: -16px;
right: -20px;
background:
linear-gradient(135deg, rgba(7, 11, 20, 0.97), rgba(18, 22, 34, 0.94));
}
#battle-screen .enemy-intent.has-label {
padding-right: 10px;
}
#battle-screen .enemy-intent.icon-only {
width: 46px;
padding-right: 4px;
justify-content: center;
}
#battle-screen .enemy-intent-core {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
#battle-screen .enemy-intent-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 34px;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 1rem;
line-height: 1;
background: rgba(255, 255, 255, 0.08);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.16),
0 4px 10px rgba(0, 0, 0, 0.22);
}
#battle-screen .enemy-intent-label {
display: -webkit-box;
max-width: 54px;
overflow: hidden;
font-size: 0.62rem;
font-weight: 700;
line-height: 1.08;
color: rgba(245, 248, 255, 0.96);
text-align: left;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.42);
white-space: normal;
word-break: keep-all;
writing-mode: horizontal-tb;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
#battle-screen .enemy-intent.icon-only .enemy-intent-label {
display: none;
}
#battle-screen .enemy-intent.attack {
border-color: rgba(255, 116, 93, 0.52);
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.36),
0 0 18px rgba(244, 67, 54, 0.24);
}
#battle-screen .enemy-intent.attack .enemy-intent-icon,
#battle-screen .enemy-intent.multiAttack .enemy-intent-icon,
#battle-screen .enemy-intent.executeDamage .enemy-intent-icon {
background: linear-gradient(135deg, rgba(115, 28, 26, 0.92), rgba(184, 58, 47, 0.9));
}
#battle-screen .enemy-intent.defend {
border-color: rgba(96, 207, 255, 0.5);
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.36),
0 0 18px rgba(0, 188, 212, 0.2);
}
#battle-screen .enemy-intent.defend .enemy-intent-icon {
background: linear-gradient(135deg, rgba(18, 64, 108, 0.92), rgba(30, 116, 180, 0.88));
}
#battle-screen .enemy-intent.buff,
#battle-screen .enemy-intent.heal {
border-color: rgba(163, 114, 255, 0.5);
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.36),
0 0 18px rgba(156, 39, 176, 0.2);
}
#battle-screen .enemy-intent.buff .enemy-intent-icon,
#battle-screen .enemy-intent.heal .enemy-intent-icon {
background: linear-gradient(135deg, rgba(77, 35, 113, 0.92), rgba(133, 63, 176, 0.9));
}
#battle-screen .enemy-intent.debuff .enemy-intent-icon,
#battle-screen .enemy-intent.addStatus .enemy-intent-icon,
#battle-screen .enemy-intent.multiAction .enemy-intent-icon,
#battle-screen .enemy-intent.summon .enemy-intent-icon {
background: linear-gradient(135deg, rgba(78, 43, 18, 0.92), rgba(137, 89, 36, 0.88));
}
#battle-screen .enemy-intent.breaker {
border-color: rgba(255, 160, 112, 0.78);
box-shadow:
0 10px 20px rgba(0, 0, 0, 0.36),
0 0 22px rgba(255, 138, 80, 0.34);
}
#battle-screen .enemy-intent .intent-value {
bottom: -7px;
right: 3px;
font-size: 0.7rem;
line-height: 1;
min-width: 22px;
padding: 3px 6px;
border-radius: 999px;
border-color: rgba(255, 255, 255, 0.18);
background: rgba(5, 8, 15, 0.96);
color: #f6fbff;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
}
#battle-screen .enemy-intent .intent-tag {
top: -10px;
left: 8px;
transform: none;
font-size: 0.52rem;
padding: 2px 5px;
z-index: 2;
}
#battle-screen .hand-cards {
gap: 0;
justify-content: center;
}
#battle-screen #hand-cards .card {
margin-left: var(--battle-card-overlap-desktop);
}
#battle-screen #hand-cards .card:first-child {
margin-left: 0;
}
#battle-screen #hand-cards .card:hover {
transform: translateY(var(--battle-card-pop-lift)) scale(1.08) rotateX(0deg) !important;
}
#battle-screen #hand-cards .card.selected {
transform: translateY(var(--battle-card-selected-lift)) scale(1.3) rotateX(0deg) !important;
}
#battle-screen #hand-cards .card.advisor-focus {
transform: translateY(var(--battle-card-advisor-lift)) scale(1.12) rotateX(0deg) !important;
}
@media (max-width: 1180px) {
#battle-screen .battle-command-panel,
#battle-screen #battle-command-panel {
width: clamp(252px, 24vw, 296px);
max-height: clamp(150px, calc(100vh - 396px), 392px);
}
#battle-screen .boss-act-panel,
#battle-screen #boss-act-panel {
width: min(540px, 50vw, calc(100% - 24px));
}
}
@media (max-width: 980px) {
#battle-screen .battle-command-panel,
#battle-screen #battle-command-panel {
width: clamp(188px, 22vw, 206px);
padding: 6px 7px;
}
#battle-screen .battle-command-panel .battle-command-btn,
#battle-screen #battle-command-panel .battle-command-btn {
min-height: 44px;
padding: 4px 5px;
}
#battle-screen .battle-command-panel .battle-command-name,
#battle-screen #battle-command-panel .battle-command-name {
font-size: 0.62rem;
}
#battle-screen .battle-command-panel .battle-command-meta,
#battle-screen #battle-command-panel .battle-command-meta {
font-size: 0.54rem;
line-height: 1.14;
}
}
@media (max-width: 900px) {
#battle-screen .boss-act-panel,
#battle-screen #boss-act-panel {
width: min(500px, calc(100% - 18px));
}
}
@media (max-width: 768px) {
#battle-screen .enemy-container {
width: 100%;
row-gap: 20px;
column-gap: 14px;
}
#battle-screen .enemy {
width: min(120px, 31vw);
gap: 6px;
}
#battle-screen .enemy-name {
font-size: 0.76rem;
line-height: 1.16;
}
#battle-screen .enemy-meta-strip {
gap: 3px 4px;
}
#battle-screen .enemy-meta-strip .enemy-role-tag,
#battle-screen .enemy-meta-strip .enemy-plan-tag,
#battle-screen .enemy-meta-strip .enemy-encounter-tag,
#battle-screen .enemy-meta-strip .enemy-encounter-affix,
#battle-screen .enemy-meta-strip .enemy-squad-tag,
#battle-screen .enemy-meta-strip .enemy-formation-tag,
#battle-screen .enemy-meta-strip .enemy-counter-tag,
#battle-screen .enemy-meta-strip .enemy-threat-tag {
min-height: 16px;
padding: 1px 6px;
font-size: 0.5rem;
letter-spacing: 0.16px;
}
#battle-screen .enemy-hp {
width: min(100%, 72px);
}
#battle-screen .enemy-hp-text,
#battle-screen .enemy-block {
font-size: 0.66rem;
}
#battle-screen .battle-command-panel,
#battle-screen #battle-command-panel {
top: 68px;
left: var(--hud-gutter-mobile);
width: calc(100vw - 12px);
max-height: 118px;
padding: 7px 8px;
border-radius: 12px;
z-index: var(--z-battle-command-panel);
}
#battle-screen .battle-command-panel .battle-command-list,
#battle-screen #battle-command-panel .battle-command-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
margin-top: 6px;
}
#battle-screen .battle-command-panel .battle-command-btn,
#battle-screen #battle-command-panel .battle-command-btn {
min-height: 46px;
padding: 5px 6px;
}
#battle-screen .battle-command-panel .battle-command-name,
#battle-screen #battle-command-panel .battle-command-name {
font-size: 0.62rem;
}
#battle-screen .battle-command-panel .battle-command-meta,
#battle-screen #battle-command-panel .battle-command-meta {
font-size: 0.52rem;
line-height: 1.15;
}
#battle-screen .battle-command-panel .battle-advisor-toggle,
#battle-screen #battle-command-panel .battle-advisor-toggle {
min-height: 26px;
padding: 4px 8px;
}
#battle-screen .battle-command-panel .battle-tactical-advisor,
#battle-screen #battle-command-panel .battle-tactical-advisor {
display: block;
margin-top: 6px;
max-height: 34px;
opacity: 1;
overflow: hidden;
}
#battle-screen .battle-command-panel .battle-tactical-advisor:not(.collapsed),
#battle-screen #battle-command-panel .battle-tactical-advisor:not(.collapsed) {
max-height: min(240px, 26vh);
background: linear-gradient(145deg, rgba(9, 24, 52, 0.9), rgba(8, 20, 42, 0.94));
}
#battle-screen .battle-command-panel .battle-advisor-drag-handle,
#battle-screen #battle-command-panel .battle-advisor-drag-handle {
display: none;
}
#battle-screen .battle-command-panel .battle-advisor-header,
#battle-screen #battle-command-panel .battle-advisor-header {
cursor: default;
touch-action: pan-y;
}
#battle-screen .battle-command-panel .battle-advisor-title,
#battle-screen #battle-command-panel .battle-advisor-title {
font-size: 0.64rem;
padding-left: 2px;
}
#battle-screen .battle-command-panel .battle-advisor-body,
#battle-screen #battle-command-panel .battle-advisor-body {
padding-bottom: 2px;
}
#battle-screen .enemy-intent,
#battle-screen .enemy-avatar.has-image .enemy-intent {
top: -16px;
right: -14px;
min-width: 40px;
max-width: min(92px, calc(100% + 14px));
min-height: 40px;
padding: 3px 8px 5px 3px;
}
#battle-screen .enemy-intent.icon-only {
width: 40px;
}
#battle-screen .enemy-intent-icon {
flex-basis: 30px;
width: 30px;
height: 30px;
font-size: 0.92rem;
}
#battle-screen .enemy-intent-label {
max-width: 44px;
font-size: 0.56rem;
}
#battle-screen .enemy-intent .intent-value {
bottom: -6px;
right: 1px;
font-size: 0.62rem;
min-width: 18px;
padding: 2px 5px;
}
#battle-screen .enemy-intent .intent-tag {
top: -9px;
left: 6px;
font-size: 0.48rem;
}
#battle-screen .legacy-mission-tracker,
#battle-screen #legacy-mission-tracker {
top: 64px;
right: 6px;
left: auto;
width: min(184px, calc(100vw - 12px));
padding: 5px 7px;
z-index: var(--z-battle-mission);
}
#battle-screen .boss-act-panel,
#battle-screen #boss-act-panel {
position: absolute;
left: 6px;
right: 6px;
top: 194px;
bottom: auto;
width: auto;
max-width: none;
margin: 0;
padding: 7px 8px;
border-radius: 14px;
max-height: 160px;
overflow-y: auto;
z-index: var(--z-battle-boss-panel);
}
#battle-screen #boss-act-panel .boss-act-header {
display: grid;
grid-template-columns: 1fr auto;
gap: 6px;
align-items: center;
}
#battle-screen #boss-act-panel .boss-act-title {
font-size: 0.76rem;
letter-spacing: 0.03em;
}
#battle-screen #boss-act-panel .boss-act-subtitle,
#battle-screen #boss-act-panel .boss-act-hp {
font-size: 0.62rem;
}
#battle-screen #boss-act-panel .boss-act-track,
#battle-screen #boss-act-panel .boss-act-counter-chips {
display: none;
}
#battle-screen #boss-act-panel .boss-act-body {
margin-top: 6px;
grid-template-columns: 1fr;
gap: 4px;
}
#battle-screen #boss-act-panel .boss-act-line {
grid-template-columns: 52px 1fr;
padding: 4px 6px;
}
#battle-screen #boss-act-panel .boss-act-line:not(.signal) {
display: none;
}
#battle-screen #boss-act-panel .boss-act-line .label,
#battle-screen #boss-act-panel .boss-act-line .value {
font-size: 0.58rem;
line-height: 1.2;
}
#battle-screen #hand-cards .card {
margin-left: var(--battle-card-overlap-mobile);
transform: rotateX(6deg) translateY(-12px) scale(0.92);
}
#battle-screen #hand-cards .card:hover {
transform: translateY(-48px) scale(1.12) rotateX(0deg) !important;
}
#battle-screen #hand-cards .card.selected {
transform: translateY(-68px) scale(1.18) rotateX(0deg) !important;
}
#battle-screen #hand-cards .card.advisor-focus {
transform: translateY(-32px) scale(1.06) rotateX(0deg) !important;
}
}
#battle-log {
position: fixed;
left: 50%;
bottom: 118px;
transform: translate(-50%, 8px);
max-width: min(86vw, 760px);
min-height: 42px;
padding: 10px 18px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(5, 10, 22, 0.84);
backdrop-filter: blur(14px);
color: #f2f4ff;
text-align: center;
font-size: 0.95rem;
line-height: 1.45;
opacity: 0;
pointer-events: none;
transition:
opacity var(--hud-transition-fast, 180ms ease),
transform var(--hud-transition-fast, 180ms ease),
border-color var(--hud-transition-fast, 180ms ease),
box-shadow var(--hud-transition-fast, 180ms ease);
z-index: 2000 !important;
}
#battle-log.show {
opacity: 1;
transform: translate(-50%, 0);
}
#battle-log.log-damage {
border-color: rgba(255, 92, 92, 0.85);
box-shadow: 0 0 18px rgba(255, 73, 73, 0.35);
}
#battle-log.log-status {
border-color: rgba(83, 214, 184, 0.85);
box-shadow: 0 0 18px rgba(83, 214, 184, 0.28);
}
#battle-log.log-reward {
border-color: rgba(236, 196, 92, 0.85);
box-shadow: 0 0 18px rgba(236, 196, 92, 0.28);
}
#battle-log.log-warning {
border-color: rgba(255, 150, 79, 0.9);
box-shadow: 0 0 18px rgba(255, 150, 79, 0.32);
}
#battle-log.log-system {
border-color: rgba(122, 156, 255, 0.85);
box-shadow: 0 0 18px rgba(122, 156, 255, 0.25);
}
.battle-log-panel {
position: fixed;
right: 16px;
bottom: 16px;
width: min(440px, 92vw);
max-height: 46vh;
display: none;
flex-direction: column;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 12px;
background: rgba(3, 9, 20, 0.95);
backdrop-filter: blur(18px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
z-index: 2100;
overflow: hidden;
}
.battle-log-panel.active {
display: flex;
}
.battle-log-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
color: #f8f9ff;
font-weight: 600;
}
.battle-log-panel-title {
letter-spacing: 0.3px;
}
#battle-log-panel-close {
min-width: 36px;
min-height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.08);
color: #f8f9ff;
cursor: pointer;
transition: background var(--hud-transition-fast, 180ms ease), border-color var(--hud-transition-fast, 180ms ease);
}
.battle-log-panel-filters {
display: flex;
gap: 8px;
padding: 10px 12px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
flex-wrap: wrap;
}
.log-filter-btn {
min-height: 36px;
padding: 6px 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.06);
color: #d6ddff;
border-radius: 999px;
font-size: 0.78rem;
cursor: pointer;
transition:
border-color var(--hud-transition-fast, 180ms ease),
background var(--hud-transition-fast, 180ms ease),
color var(--hud-transition-fast, 180ms ease);
}
.log-filter-btn.active {
border-color: rgba(122, 156, 255, 0.85);
background: rgba(122, 156, 255, 0.26);
color: #fff;
}
.log-filter-btn:focus-visible,
#battle-log-panel-close:focus-visible {
outline: 2px solid rgba(122, 156, 255, 0.92);
outline-offset: 2px;
}
.battle-log-panel-list {
overflow: auto;
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
gap: 6px;
}
.battle-log-item {
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 10px;
padding: 6px 8px;
background: rgba(255, 255, 255, 0.03);
}
.battle-log-item-time {
color: rgba(255, 255, 255, 0.58);
font-size: 0.72rem;
margin-bottom: 3px;
}
.battle-log-item-text {
color: #eef1ff;
font-size: 0.86rem;
line-height: 1.4;
word-break: break-word;
}
.battle-log-item.log-damage {
border-color: rgba(255, 92, 92, 0.4);
}
.battle-log-item.log-status {
border-color: rgba(83, 214, 184, 0.4);
}
.battle-log-item.log-reward {
border-color: rgba(236, 196, 92, 0.4);
}
.battle-log-item.log-warning {
border-color: rgba(255, 150, 79, 0.5);
}
.battle-log-item.log-system {
border-color: rgba(122, 156, 255, 0.38);
}
.battle-log-empty {
color: rgba(255, 255, 255, 0.55);
text-align: center;
padding: 22px 10px;
}
.reward-battle-meta {
width: 100%;
margin-top: 14px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(109, 205, 255, 0.36);
background: linear-gradient(135deg, rgba(9, 26, 46, 0.88), rgba(13, 35, 62, 0.84));
box-shadow: 0 6px 18px rgba(2, 10, 19, 0.3);
}
.reward-meta-title {
font-size: 0.8rem;
color: rgba(166, 227, 255, 0.96);
letter-spacing: 0.35px;
margin-bottom: 8px;
font-weight: 700;
}
.reward-meta-chips {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.reward-meta-chip {
display: inline-flex;
align-items: center;
min-height: 28px;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(153, 219, 255, 0.34);
background: rgba(31, 69, 105, 0.34);
color: rgba(216, 241, 255, 0.96);
font-size: 0.69rem;
line-height: 1.2;
letter-spacing: 0.2px;
}
.reward-meta-chip.chip-encounter {
border-color: rgba(255, 196, 123, 0.58);
background: rgba(94, 61, 22, 0.42);
color: rgba(255, 236, 204, 0.96);
}
.reward-meta-chip.chip-squad {
border-color: rgba(137, 224, 255, 0.56);
background: rgba(23, 70, 98, 0.45);
color: rgba(218, 247, 255, 0.97);
}
.reward-meta-chip.chip-gold {
border-color: rgba(255, 220, 122, 0.54);
background: rgba(92, 74, 24, 0.4);
color: rgba(255, 242, 205, 0.96);
}
.reward-meta-chip.chip-exp {
border-color: rgba(166, 213, 255, 0.52);
background: rgba(37, 74, 116, 0.38);
color: rgba(220, 241, 255, 0.95);
}
.reward-meta-chip.chip-synergy {
border-color: rgba(189, 160, 255, 0.6);
background: rgba(66, 41, 108, 0.44);
color: rgba(242, 231, 255, 0.96);
}
@media (max-width: 840px) {
#battle-log {
bottom: 102px;
max-width: calc(100vw - 20px);
font-size: 0.88rem;
padding: 9px 14px;
}
.battle-log-panel {
right: 10px;
left: 10px;
bottom: 12px;
width: auto;
max-height: 52vh;
}
.reward-battle-meta {
padding: 11px 12px;
}
}
@media (prefers-reduced-motion: reduce) {
#battle-log,
.battle-log-panel,
.log-filter-btn,
#battle-log-panel-close {
transition: none;
}
}
/* PVP Interface Styles - Ink & Gold Redesign (Final) */
/* --- Screen Container & Backgrounds --- */
#pvp-screen {
overflow: hidden;
color: #eee;
font-family: 'Ma Shan Zheng', cursive;
}
/* Void Background - Deeper and more complex */
.void-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 30%, #1b263b 0%, #0a0e14 60%, #000000 100%);
z-index: -2;
}
/* Floating Ink Overlay */
.ink-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 80% 20%, rgba(20, 20, 30, 0.4) 0%, transparent 40%),
radial-gradient(circle at 20% 80%, rgba(10, 10, 20, 0.5) 0%, transparent 40%);
opacity: 0.6;
z-index: -1;
pointer-events: none;
animation: pulse-void 10s infinite alternate;
}
@keyframes pulse-void {
0% {
opacity: 0.5;
}
100% {
opacity: 0.7;
}
}
/* Header Adjustments */
.screen-header.transparent {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent);
border-bottom: none;
padding-top: 30px;
height: 120px;
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 60px;
padding-right: 60px;
z-index: 10;
}
.header-title-group {
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
}
.ink-title {
font-size: 3.5rem;
color: var(--accent-gold);
text-shadow: 0 0 25px rgba(207, 170, 112, 0.4);
margin: 0;
letter-spacing: 12px;
background: linear-gradient(180deg, #fff 0%, #cfaa70 40%, #8a6a2a 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.5));
}
.sub-title {
font-size: 0.85rem;
letter-spacing: 8px;
color: rgba(255, 255, 255, 0.3);
margin-top: -5px;
font-family: 'Noto Sans SC', sans-serif;
text-transform: uppercase;
position: relative;
}
.sub-title::before,
.sub-title::after {
content: '';
position: absolute;
top: 50%;
width: 30px;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}
.sub-title::before {
right: 100%;
margin-right: 15px;
}
.sub-title::after {
left: 100%;
margin-left: 15px;
}
/* Player Rank Badge (Header) - Talisman Style */
.player-rank-badge {
display: flex;
align-items: center;
gap: 15px;
background: rgba(10, 14, 20, 0.6);
padding: 8px 24px;
border-radius: 4px;
border: 1px solid rgba(207, 170, 112, 0.3);
backdrop-filter: blur(8px);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.rank-icon-frame {
color: var(--accent-gold);
font-size: 1.4rem;
filter: drop-shadow(0 0 5px rgba(207, 170, 112, 0.5));
}
#my-rank-tier {
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.2rem;
color: #e3d8c8;
}
#my-rank-score {
font-family: 'Ma Shan Zheng', cursive;
color: var(--accent-cyan);
font-size: 1.2rem;
margin-left: 10px;
text-shadow: 0 0 5px rgba(76, 201, 240, 0.4);
}
/* --- Layout --- */
.pvp-layout-split {
display: flex;
height: calc(100vh - 120px);
padding: 20px 80px 40px 80px;
gap: 80px;
max-width: 1800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* --- Left: Navigation Runes --- */
.pvp-nav-sidebar {
width: 240px;
display: flex;
flex-direction: column;
gap: 30px;
padding-top: 40px;
align-items: flex-start;
}
.rune-tab {
background: transparent;
border: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
cursor: pointer;
font-size: 1.4rem;
position: relative;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
opacity: 0.5;
padding: 15px 0;
width: 100%;
}
.rune-tab:hover {
opacity: 0.9;
transform: translateX(10px);
}
.rune-tab.active {
opacity: 1;
transform: translateX(15px);
}
.rune-icon-container {
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
transform: rotate(45deg);
/* Diamond shape */
transition: all 0.5s ease;
background: rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.rune-icon {
transform: rotate(-45deg);
/* Counter-rotate icon */
font-size: 1.6rem;
filter: grayscale(1) brightness(0.7);
transition: all 0.5s;
}
.rune-tab.active .rune-icon-container {
border-color: var(--accent-gold);
background: rgba(207, 170, 112, 0.1);
box-shadow: 0 0 20px rgba(207, 170, 112, 0.3);
animation: rune-breathe 4s infinite ease-in-out;
}
.rune-tab.active .rune-icon {
filter: grayscale(0) brightness(1.2) drop-shadow(0 0 5px var(--accent-gold));
transform: rotate(-45deg) scale(1.1);
}
.rune-name {
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.5rem;
color: #e3d8c8;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
position: relative;
}
.rune-tab.active .rune-name {
color: var(--accent-gold);
text-shadow: 0 0 10px rgba(207, 170, 112, 0.4);
}
/* Soul Connection Line */
.rune-tab.active::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
width: 15px;
height: 2px;
background: var(--accent-gold);
box-shadow: 0 0 10px var(--accent-gold);
}
@keyframes rune-breathe {
0%,
100% {
border-color: rgba(207, 170, 112, 0.5);
box-shadow: 0 0 20px rgba(207, 170, 112, 0.3);
}
50% {
border-color: rgba(207, 170, 112, 1);
box-shadow: 0 0 35px rgba(207, 170, 112, 0.5);
}
}
/* --- Right: Content Area --- */
.pvp-content-container {
flex: 1;
position: relative;
padding-top: 20px;
}
.pvp-risk-brief {
margin: 0 18px 14px;
padding: 18px 20px;
border-radius: 18px;
border: 1px solid rgba(236, 194, 121, 0.24);
background:
linear-gradient(145deg, rgba(23, 18, 14, 0.9), rgba(17, 24, 39, 0.86)),
radial-gradient(circle at top right, rgba(94, 160, 255, 0.12), transparent 46%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 42px rgba(0, 0, 0, 0.22);
}
.pvp-risk-kicker {
color: rgba(255, 213, 147, 0.82);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.pvp-risk-header {
margin-top: 8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
}
.pvp-risk-heading {
min-width: 0;
}
.pvp-risk-title {
color: rgba(255, 242, 220, 0.98);
font-size: 1.18rem;
letter-spacing: 0.03em;
}
.pvp-risk-subtitle {
margin-top: 5px;
color: rgba(198, 220, 255, 0.78);
font-size: 0.82rem;
letter-spacing: 0.05em;
}
.pvp-risk-dri {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 100px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(171, 203, 255, 0.34);
background: rgba(25, 51, 86, 0.34);
color: rgba(229, 242, 255, 0.96);
font-size: 0.92rem;
letter-spacing: 0.06em;
white-space: nowrap;
}
.pvp-risk-dri.tier-controlled {
border-color: rgba(143, 219, 181, 0.56);
background: rgba(20, 73, 50, 0.34);
color: rgba(225, 255, 238, 0.96);
}
.pvp-risk-dri.tier-medium {
border-color: rgba(226, 205, 139, 0.56);
background: rgba(78, 60, 22, 0.38);
color: rgba(255, 245, 219, 0.97);
}
.pvp-risk-dri.tier-high {
border-color: rgba(248, 165, 120, 0.6);
background: rgba(92, 47, 23, 0.42);
color: rgba(255, 231, 219, 0.98);
}
.pvp-risk-dri.tier-extreme {
border-color: rgba(255, 123, 123, 0.62);
background: rgba(95, 24, 24, 0.45);
color: rgba(255, 225, 225, 0.99);
}
.pvp-risk-chip-row {
margin-top: 12px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pvp-risk-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.05);
color: rgba(236, 239, 244, 0.9);
font-size: 0.74rem;
line-height: 1.2;
}
.pvp-risk-chip.accent {
border-color: rgba(147, 205, 255, 0.35);
background: rgba(20, 49, 80, 0.32);
color: rgba(223, 241, 255, 0.98);
}
.pvp-risk-chip.tier-controlled {
border-color: rgba(143, 219, 181, 0.56);
color: rgba(225, 255, 238, 0.96);
}
.pvp-risk-chip.tier-medium {
border-color: rgba(226, 205, 139, 0.56);
color: rgba(255, 245, 219, 0.97);
}
.pvp-risk-chip.tier-high {
border-color: rgba(248, 165, 120, 0.6);
color: rgba(255, 231, 219, 0.98);
}
.pvp-risk-chip.tier-extreme {
border-color: rgba(255, 123, 123, 0.62);
color: rgba(255, 225, 225, 0.99);
}
.pvp-risk-summary {
margin-top: 12px;
color: rgba(234, 236, 242, 0.9);
font-size: 0.84rem;
line-height: 1.65;
}
.pvp-dossier {
margin-top: 14px;
padding: 14px 15px;
border-radius: 16px;
border: 1px solid rgba(140, 197, 255, 0.18);
background:
linear-gradient(145deg, rgba(17, 28, 45, 0.7), rgba(27, 23, 18, 0.68)),
radial-gradient(circle at top left, rgba(120, 174, 255, 0.12), transparent 44%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.pvp-dossier-kicker {
color: rgba(164, 218, 255, 0.88);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.pvp-dossier-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pvp-dossier-history-grid {
margin-top: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.pvp-dossier-card {
padding: 11px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.pvp-dossier-card-emphasis {
border-color: rgba(164, 218, 255, 0.16);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.025)),
radial-gradient(circle at top left, rgba(144, 194, 255, 0.09), transparent 48%);
}
.pvp-dossier-card-wide {
grid-column: 1 / -1;
}
.pvp-dossier-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.pvp-dossier-label {
color: rgba(154, 205, 255, 0.84);
font-size: 0.7rem;
letter-spacing: 0.1em;
}
.pvp-dossier-mini-tag {
flex-shrink: 0;
padding: 3px 8px;
border-radius: 999px;
border: 1px solid rgba(255, 226, 173, 0.2);
background: rgba(255, 226, 173, 0.08);
color: rgba(255, 232, 189, 0.9);
font-size: 0.65rem;
letter-spacing: 0.06em;
line-height: 1.2;
}
.pvp-dossier-value {
margin-top: 6px;
color: rgba(248, 242, 228, 0.98);
font-size: 0.86rem;
line-height: 1.45;
}
.pvp-dossier-detail {
margin-top: 6px;
color: rgba(209, 218, 230, 0.76);
font-size: 0.74rem;
line-height: 1.55;
}
.pvp-dossier-card-tags {
margin-top: 9px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.pvp-dossier-inline-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 0 8px;
border-radius: 999px;
border: 1px solid rgba(157, 205, 255, 0.18);
background: rgba(157, 205, 255, 0.08);
color: rgba(226, 239, 255, 0.92);
font-size: 0.67rem;
letter-spacing: 0.04em;
line-height: 1.2;
}
.pvp-dossier-line {
margin-top: 10px;
color: rgba(230, 236, 244, 0.84);
font-size: 0.76rem;
line-height: 1.55;
}
.pvp-dossier-tags {
margin-top: 10px;
}
.pvp-risk-axis-grid {
margin-top: 14px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.pvp-risk-axis-item {
padding: 10px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
}
.pvp-risk-axis-label-row {
display: flex;
justify-content: space-between;
gap: 12px;
color: rgba(241, 239, 231, 0.92);
font-size: 0.76rem;
letter-spacing: 0.04em;
}
.pvp-risk-axis-track {
margin-top: 9px;
height: 8px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
}
.pvp-risk-axis-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, rgba(164, 200, 255, 0.44), rgba(255, 223, 152, 0.76));
}
.pvp-risk-axis-fill.tone-burst {
background: linear-gradient(90deg, rgba(255, 118, 118, 0.4), rgba(255, 171, 120, 0.88));
}
.pvp-risk-axis-fill.tone-attrition {
background: linear-gradient(90deg, rgba(166, 226, 154, 0.4), rgba(255, 214, 120, 0.84));
}
.pvp-risk-axis-fill.tone-control {
background: linear-gradient(90deg, rgba(124, 196, 255, 0.4), rgba(175, 148, 255, 0.84));
}
.pvp-risk-axis-fill.tone-execution {
background: linear-gradient(90deg, rgba(255, 212, 117, 0.42), rgba(255, 146, 111, 0.84));
}
.pvp-risk-line {
margin-top: 10px;
display: grid;
grid-template-columns: 44px 1fr;
gap: 12px;
}
.pvp-risk-line .label {
color: rgba(148, 201, 255, 0.88);
font-size: 0.74rem;
letter-spacing: 0.08em;
}
.pvp-risk-line .value {
color: rgba(238, 239, 243, 0.92);
font-size: 0.8rem;
line-height: 1.58;
}
.pvp-risk-footnote {
margin-top: 10px;
color: rgba(206, 212, 223, 0.68);
font-size: 0.74rem;
line-height: 1.5;
}
.pvp-duel-slip {
margin-top: 14px;
padding: 14px 15px;
border-radius: 16px;
border: 1px solid rgba(120, 174, 255, 0.16);
background:
linear-gradient(145deg, rgba(12, 24, 41, 0.72), rgba(31, 25, 16, 0.7)),
radial-gradient(circle at top right, rgba(255, 203, 116, 0.08), transparent 42%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.pvp-duel-slip-kicker {
color: rgba(156, 212, 255, 0.86);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.pvp-duel-slip-head {
margin-top: 8px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.pvp-duel-slip-title {
color: rgba(245, 239, 226, 0.98);
font-size: 0.98rem;
letter-spacing: 0.04em;
}
.pvp-duel-slip-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(214, 183, 112, 0.28);
background: rgba(83, 59, 20, 0.28);
color: rgba(255, 237, 204, 0.96);
font-size: 0.76rem;
white-space: nowrap;
}
.pvp-duel-slip-tags {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pvp-duel-slip-tag {
display: inline-flex;
align-items: center;
padding: 3px 9px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.04);
color: rgba(232, 236, 242, 0.88);
font-size: 0.72rem;
}
.pvp-duel-line {
margin-top: 8px;
}
/* --- Ranking Tab --- */
.pvp-tab-pane {
height: 100%;
width: 100%;
/* Ensure full width */
display: none;
flex-direction: column;
align-items: center;
/* Center fixed-width children like the disk */
animation: fade-in-up 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.pvp-tab-pane.active {
display: flex;
}
.ranking-scroll-area {
flex: 1;
width: 100%;
/* Force full width to prevent shrinking */
overflow-y: auto;
padding: 10px 30px 24px 30px;
/* Mask to fade out top/bottom */
mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%);
}
.ranking-scroll-area::-webkit-scrollbar {
display: none;
}
/* Jade Slip Rows (List Items) */
.jade-slip-row {
display: grid;
grid-template-columns: 80px 80px 1fr 150px;
/* Rank | Avatar | Info | Score */
align-items: center;
height: 90px;
margin-bottom: 24px;
padding: 0 40px;
background: rgba(20, 25, 35, 0.6);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 4px;
/* Slightly rounded */
position: relative;
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
backdrop-filter: blur(4px);
cursor: pointer;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
/* Hover Effect: 3D Lift */
.jade-slip-row:hover {
transform: translateY(-5px) scale(1.01);
background: rgba(30, 36, 50, 0.8);
border-color: rgba(207, 170, 112, 0.3);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
z-index: 5;
}
/* Floating Animation */
.jade-slip-row {
animation: float-row 6s ease-in-out infinite;
}
.jade-slip-row:nth-child(even) {
animation-delay: -3s;
}
@keyframes float-row {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
.jade-slip-row:hover {
animation: none;
/* Stop floating on hover */
}
/* Rank Number - Vertical Calligraphy */
.rank-index {
font-size: 2.8rem;
font-weight: bold;
color: rgba(255, 255, 255, 0.15);
font-family: 'Ma Shan Zheng', cursive;
text-align: center;
line-height: 1;
position: relative;
z-index: 2;
}
/* Rank 1-3 Specia Styling */
.jade-slip-row.rank-1 {
background: linear-gradient(90deg, rgba(82, 60, 20, 0.5), rgba(20, 15, 5, 0.4));
border: 1px solid rgba(255, 215, 0, 0.5);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.15);
}
.jade-slip-row.rank-1 .rank-index {
color: transparent;
background: linear-gradient(180deg, #fff, #ffd700);
background-clip: text;
-webkit-background-clip: text;
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
font-size: 3.5rem;
}
.jade-slip-row.rank-2 .rank-index {
color: #e0e0e0;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.jade-slip-row.rank-3 .rank-index {
color: #cd7f32;
text-shadow: 0 0 10px rgba(205, 127, 50, 0.5);
}
/* Avatar Halo */
.rank-avatar-container {
position: relative;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
}
.rank-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid #444;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: #888;
z-index: 2;
font-family: 'Noto Sans SC', sans-serif;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.rank-1 .rank-avatar {
border-color: #ffd700;
color: #ffd700;
background: linear-gradient(135deg, #332200, #000);
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
/* Rotating Halo for Top Ranks */
.rank-aura {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 1px dashed rgba(255, 215, 0, 0.3);
border-radius: 50%;
animation: rotate-slow 20s linear infinite;
pointer-events: none;
opacity: 0;
}
.rank-1 .rank-aura {
opacity: 1;
border-color: rgba(255, 215, 0, 0.6);
box-shadow: 0 0 20px rgba(255, 215, 0, 0.1);
}
/* Info Text */
.rank-info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding-left: 20px;
min-width: 0;
}
.rank-name {
font-size: 1.4rem;
color: #e3d8c8;
font-family: 'Noto Sans SC', sans-serif;
letter-spacing: 1px;
}
.rank-1 .rank-name {
color: #fff;
text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.rank-realm-badge {
display: inline-flex;
align-items: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.5);
background: rgba(0, 0, 0, 0.4);
padding: 2px 8px;
border-radius: 2px;
width: fit-content;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.rank-meta-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.rank-risk-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid rgba(165, 198, 255, 0.18);
background: rgba(17, 39, 68, 0.34);
color: rgba(220, 236, 255, 0.94);
font-size: 0.72rem;
line-height: 1.2;
white-space: nowrap;
}
.rank-risk-chip.axis {
border-color: rgba(255, 221, 163, 0.18);
background: rgba(64, 46, 16, 0.34);
color: rgba(255, 241, 213, 0.96);
}
.rank-risk-chip.tier-controlled {
border-color: rgba(143, 219, 181, 0.46);
color: rgba(225, 255, 238, 0.96);
}
.rank-risk-chip.tier-medium {
border-color: rgba(226, 205, 139, 0.5);
color: rgba(255, 245, 219, 0.97);
}
.rank-risk-chip.tier-high {
border-color: rgba(248, 165, 120, 0.55);
color: rgba(255, 231, 219, 0.98);
}
.rank-risk-chip.tier-extreme {
border-color: rgba(255, 123, 123, 0.58);
color: rgba(255, 225, 225, 0.99);
}
.rank-risk-note {
color: rgba(201, 210, 223, 0.72);
font-size: 0.75rem;
line-height: 1.4;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Score Display */
.rank-score-display {
text-align: right;
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.6rem;
color: var(--accent-cyan);
letter-spacing: 2px;
text-shadow: 0 0 8px rgba(76, 201, 240, 0.4);
}
.rank-1 .rank-score-display {
color: var(--accent-gold);
text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}
.jade-slip-row.is-focused {
border-color: rgba(207, 170, 112, 0.48);
background: rgba(33, 41, 57, 0.86);
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(207, 170, 112, 0.12) inset;
}
/* Footer Action */
.pvp-nav-footer {
width: 100%;
padding: 0 18px 18px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
}
.challenge-intent-line {
max-width: 320px;
color: rgba(214, 225, 240, 0.82);
font-size: 0.76rem;
line-height: 1.45;
text-align: right;
}
.challenge-btn {
width: 220px;
height: 60px;
background: linear-gradient(135deg, #3d0000 0%, #1a0505 100%);
border: 1px solid #8b0000;
color: #ff4d4d;
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.5rem;
letter-spacing: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
.challenge-btn:hover {
background: linear-gradient(135deg, #5c0000 0%, #2b0000 100%);
border-color: #ff0000;
text-shadow: 0 0 10px #ff0000;
transform: translateY(-2px);
box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
}
.btn-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 0, 0, 0.2), transparent 70%);
animation: rotate-slow 5s linear infinite;
pointer-events: none;
}
/* Animation Utilities */
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(30px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes rotate-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Loading State */
.loading-ink {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 200px;
color: rgba(255, 255, 255, 0.4);
font-family: 'Ma Shan Zheng', cursive;
gap: 20px;
}
.spinner {
width: 50px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--accent-gold);
border-radius: 50%;
animation: rotate-slow 1s linear infinite;
}
/* --- Defense Tab Styling (New Ink & Gold - Refactored) --- */
/* Split Layout Container */
.defense-layout-split {
display: flex;
height: 100%;
width: 100%;
gap: 40px;
padding: 20px 40px;
align-items: stretch;
}
/* Left Panel: Formation Visualizer */
.formation-visualizer-panel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background: radial-gradient(circle at center, rgba(20, 30, 45, 0.4) 0%, transparent 70%);
}
.formation-visual-container {
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
/* Core Rings Animation */
.formation-core-rings {
width: 100%;
height: 100%;
position: relative;
}
.rune-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border-style: solid;
transition: all 1s ease;
}
.ring-outer {
width: 100%;
height: 100%;
border-width: 1px;
border-color: rgba(207, 170, 112, 0.2);
border-top: 2px solid var(--accent-gold);
border-bottom: 2px solid var(--accent-gold);
animation: spin-slow 20s linear infinite;
box-shadow: 0 0 20px rgba(207, 170, 112, 0.05);
}
.ring-middle {
width: 70%;
height: 70%;
border-width: 1px;
border-color: rgba(76, 201, 240, 0.2);
border-left: 2px solid var(--accent-cyan);
border-right: 2px solid var(--accent-cyan);
animation: spin-reverse-medium 12s linear infinite;
}
.ring-inner {
width: 40%;
height: 40%;
border-width: 2px;
border-color: rgba(255, 255, 255, 0.1);
border-top-color: #fff;
animation: spin-fast 6s linear infinite;
}
/* Center Gem */
.core-gem-center {
position: absolute;
width: 60px;
height: 60px;
border-radius: 50%;
background: radial-gradient(circle, #cfaa70 0%, #3d2e15 80%, black 100%);
box-shadow: 0 0 30px rgba(207, 170, 112, 0.4);
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.pulse-energy {
width: 100%;
height: 100%;
border-radius: 50%;
animation: energy-pulse 3s infinite ease-in-out;
background: rgba(207, 170, 112, 0.3);
}
/* Stats Overlay */
.formation-stats-overlay {
position: absolute;
bottom: -60px;
display: flex;
gap: 40px;
background: rgba(0, 0, 0, 0.6);
padding: 10px 30px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
}
.stat-row {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.stat-row .label {
font-size: 0.85rem;
color: #888;
font-family: 'Noto Sans SC', sans-serif;
}
.stat-row .value {
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.4rem;
color: #e3d8c8;
}
.stat-row .value.status-active {
color: #0f0;
text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}
.stat-row .value.status-inactive {
color: #888;
}
/* Right Panel: Controls Controls */
.defense-controls-panel {
width: 400px;
background: linear-gradient(145deg, rgba(25, 30, 40, 0.8) 0%, rgba(15, 20, 25, 0.9) 100%);
border-left: 1px solid rgba(207, 170, 112, 0.2);
padding: 30px;
display: flex;
flex-direction: column;
gap: 30px;
backdrop-filter: blur(10px);
}
.control-group {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.03);
}
.control-header {
margin: 0 0 15px 0;
font-size: 1.1rem;
color: var(--accent-gold);
display: flex;
align-items: center;
gap: 10px;
font-family: 'Noto Sans SC', sans-serif;
letter-spacing: 1px;
}
/* Dao Heart Selector */
.dao-heart-selector {
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 15px;
}
.dao-card {
flex: 1;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.3s;
}
.dao-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-3px);
}
.dao-card.active {
background: linear-gradient(135deg, rgba(207, 170, 112, 0.2), rgba(0, 0, 0, 0.3));
border-color: var(--accent-gold);
box-shadow: 0 0 15px rgba(207, 170, 112, 0.15);
}
.dao-card .card-icon {
font-size: 1.5rem;
margin-bottom: 5px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}
.dao-card .card-name {
font-size: 0.9rem;
color: #ccc;
font-family: 'Ma Shan Zheng', cursive;
margin-bottom: 3px;
}
.dao-card.active .card-name {
color: var(--accent-gold);
}
.dao-card .card-desc {
font-size: 0.7rem;
color: #666;
}
.dao-description-box {
font-size: 0.85rem;
color: #888;
line-height: 1.5;
background: rgba(0, 0, 0, 0.3);
padding: 10px;
border-radius: 4px;
min-height: 40px;
border-left: 2px solid rgba(255, 255, 255, 0.1);
}
/* Seal Switch */
.seal-switch-container {
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
width: 80px;
height: 40px;
position: relative;
}
.seal-switch-container input {
display: none;
}
.seal-slider {
width: 100%;
height: 100%;
background: #2a2a2a;
border-radius: 20px;
position: relative;
transition: 0.4s;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.seal-face {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
font-weight: bold;
font-family: 'Ma Shan Zheng', cursive;
transition: 0.3s;
}
.seal-face.off {
right: 10px;
color: #666;
}
.seal-face.on {
left: 10px;
color: var(--accent-gold);
opacity: 0;
}
.seal-slider::before {
content: '';
position: absolute;
height: 32px;
width: 32px;
left: 4px;
bottom: 3px;
background-color: #555;
transition: .4s;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.1);
}
input:checked+.seal-slider {
background-color: rgba(207, 170, 112, 0.2);
border-color: var(--accent-gold);
}
input:checked+.seal-slider::before {
transform: translateX(38px);
background-color: var(--accent-gold);
box-shadow: 0 0 10px var(--accent-gold);
}
input:checked+.seal-slider .seal-face.off {
opacity: 0;
}
input:checked+.seal-slider .seal-face.on {
opacity: 1;
}
.formation-activation-area {
display: flex;
align-items: center;
gap: 20px;
}
.activation-info p {
margin: 0;
}
.activation-info .highlight {
color: #eee;
font-size: 0.95rem;
}
.activation-info .sub-text {
font-size: 0.8rem;
color: #666;
}
/* Action Button */
.control-actions {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
}
.ink-btn-large {
width: 100%;
height: 56px;
background: linear-gradient(90deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
border: 1px solid rgba(207, 170, 112, 0.4);
color: var(--accent-gold);
font-size: 1.2rem;
font-family: 'Ma Shan Zheng', cursive;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
letter-spacing: 2px;
}
.ink-btn-large:hover {
border-color: var(--accent-gold);
box-shadow: 0 0 20px rgba(207, 170, 112, 0.2);
text-shadow: 0 0 8px var(--accent-gold);
}
.ink-flow-effect {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(207, 170, 112, 0.2), transparent);
animation: flow-right 3s infinite;
}
.last-sync-time {
font-size: 0.8rem;
color: #555;
font-family: 'Courier New', monospace;
}
/* Animations */
@keyframes spin-slow {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes spin-reverse-medium {
from {
transform: translate(-50%, -50%) rotate(360deg);
}
to {
transform: translate(-50%, -50%) rotate(0deg);
}
}
@keyframes spin-fast {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes flow-right {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes energy-pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.5);
opacity: 0;
}
}
/* Active State Enhancements */
.defense-layout-split.active-formation .ring-outer {
border-color: var(--accent-gold);
box-shadow: 0 0 30px rgba(207, 170, 112, 0.3);
}
.defense-layout-split.active-formation .core-gem-center {
box-shadow: 0 0 60px rgba(207, 170, 112, 0.6);
}
.dao-heart-nodes {
display: flex;
gap: 15px;
}
.dao-node {
flex: 1;
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 6px;
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.dao-node:hover {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(207, 170, 112, 0.4);
}
.dao-node.active {
background: linear-gradient(180deg, rgba(207, 170, 112, 0.1), rgba(0, 0, 0, 0.6));
border-color: var(--accent-gold);
box-shadow: 0 0 15px rgba(207, 170, 112, 0.15);
}
.node-gem {
font-size: 2rem;
filter: grayscale(1);
transition: all 0.3s;
}
.dao-node.active .node-gem {
filter: grayscale(0) drop-shadow(0 0 10px gold);
transform: scale(1.1);
}
.node-label {
font-size: 0.9rem;
color: #888;
}
.dao-node.active .node-label {
color: var(--accent-gold);
}
/* Seal Switch */
.formation-toggle-container {
display: flex;
align-items: center;
gap: 20px;
background: rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 8px;
}
.seal-switch {
width: 60px;
height: 60px;
position: relative;
cursor: pointer;
}
.seal-switch input {
display: none;
}
.seal-stone {
width: 100%;
height: 100%;
background: #2a2a2a;
border-radius: 50%;
border: 2px solid #555;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.seal-rune {
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.8rem;
color: #444;
transition: all 0.5s;
}
.seal-switch input:checked+.seal-stone {
border-color: var(--accent-gold);
background: radial-gradient(circle, #3d2b00, #000);
box-shadow: 0 0 20px rgba(207, 170, 112, 0.4);
transform: rotate(360deg);
}
.seal-switch input:checked+.seal-stone .seal-rune {
color: var(--accent-gold);
text-shadow: 0 0 10px gold;
}
.toggle-info {
display: flex;
flex-direction: column;
}
.toggle-title {
font-size: 1.1rem;
color: #e3d8c8;
margin-bottom: 4px;
}
.toggle-desc {
font-size: 0.8rem;
color: #666;
}
/* Upload Button */
.primary-ink-btn {
width: 100%;
height: 60px;
background: #1a1a1a;
border: 1px solid var(--accent-gold);
color: var(--accent-gold);
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.4rem;
letter-spacing: 2px;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.primary-ink-btn:hover {
background: #2a2215;
box-shadow: 0 0 20px rgba(207, 170, 112, 0.2);
transform: translateY(-2px);
}
.primary-ink-btn .btn-ink-flow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(207, 170, 112, 0.2), transparent);
transition: 0.5s;
}
.primary-ink-btn:hover .btn-ink-flow {
left: 100%;
}
/* --- Shop Tab Styling (New Ink & Gold) --- */
.shop-header-bar {
display: flex;
justify-content: space-between;
align-items: flex-end;
padding: 0 40px 20px 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 30px;
}
.shop-title-rune {
font-family: 'Ma Shan Zheng', cursive;
font-size: 2.5rem;
color: #fff;
opacity: 0.1;
position: absolute;
top: 20px;
right: 40px;
pointer-events: none;
}
.shop-wallet {
display: flex;
align-items: center;
gap: 15px;
background: rgba(0, 0, 0, 0.6);
padding: 10px 25px;
border-radius: 30px;
border: 1px solid rgba(255, 215, 0, 0.3);
}
.coin-amount {
font-size: 1.6rem;
font-family: 'Ma Shan Zheng', cursive;
color: var(--accent-gold);
}
.coin-label {
font-size: 0.9rem;
color: #888;
}
/* Fixed Shop Container */
.shop-fixed-container {
height: calc(100% - 100px);
overflow: hidden;
padding: 20px 40px;
/* Consistent horizontal padding */
width: 100%;
}
/* Unified Grid - Fixed responsive issues */
.shop-unified-grid {
display: grid;
/* Use minmax to ensure multiple columns fit */
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
grid-auto-rows: 380px;
gap: 30px;
width: 100%;
align-content: start;
}
/* Talisman Card (Shop Item) */
.talisman-card {
position: relative;
width: 100%;
height: 100%;
background: rgba(20, 20, 25, 0.8);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
/* Ensure content doesn't spill */
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.talisman-card:hover {
transform: translateY(-15px) scale(1.02);
background: rgba(25, 25, 35, 0.9);
border-color: var(--accent-gold);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
z-index: 10;
}
.talisman-top-decor {
width: 60%;
height: 4px;
background: var(--accent-gold);
margin-top: -2px;
box-shadow: 0 0 10px gold;
opacity: 0;
transition: 0.3s;
}
.talisman-card:hover .talisman-top-decor {
opacity: 1;
width: 80%;
}
.talisman-icon-area {
width: 100%;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.05), transparent 70%);
}
.shop-icon {
font-size: 4rem;
filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));
transition: 0.4s;
}
.talisman-card:hover .shop-icon {
transform: scale(1.2) translateY(-10px);
filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.6));
}
.talisman-info {
padding: 20px;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
width: 100%;
}
.talisman-name {
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.4rem;
color: #e3d8c8;
margin-bottom: 10px;
}
.talisman-desc {
font-size: 0.85rem;
color: #888;
line-height: 1.5;
margin-bottom: auto;
}
.talisman-price-tag {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 20px;
padding-top: 15px;
border-top: 1px dashed rgba(255, 255, 255, 0.1);
}
.price-text {
font-family: 'Ma Shan Zheng', cursive;
color: var(--accent-gold);
font-size: 1.2rem;
}
.shop-stock-info {
margin-top: 8px;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.35);
letter-spacing: 1px;
}
.buy-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(to top, rgba(207, 170, 112, 0.9), rgba(207, 170, 112, 0.6));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: 0.3s;
border-radius: 0 0 4px 4px;
cursor: pointer;
}
.talisman-card:hover .buy-overlay {
height: 60px;
}
.buy-overlay.state-owned,
.buy-overlay.state-sold_out {
background: linear-gradient(to top, rgba(103, 117, 132, 0.9), rgba(78, 90, 104, 0.7));
cursor: default;
}
.buy-overlay.state-equippable {
background: linear-gradient(to top, rgba(102, 153, 116, 0.92), rgba(79, 126, 95, 0.72));
}
.buy-overlay.state-equipped {
background: linear-gradient(to top, rgba(80, 120, 161, 0.92), rgba(62, 96, 130, 0.72));
cursor: pointer;
}
.buy-overlay.state-insufficient {
background: linear-gradient(to top, rgba(130, 84, 69, 0.9), rgba(95, 60, 48, 0.7));
cursor: default;
}
.buy-btn-text {
font-size: 1.2rem;
color: #000;
font-weight: bold;
letter-spacing: 2px;
}
@keyframes rotate-gold {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* --- Shop Layout (New) --- */
.shop-layout {
display: flex;
height: 100%;
width: 100%;
overflow: hidden;
}
/* Sidebar */
.shop-sidebar {
width: 200px;
background: rgba(10, 12, 16, 0.6);
border-right: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
padding-top: 40px;
}
.shop-category {
padding: 20px 30px;
display: flex;
align-items: center;
gap: 15px;
cursor: pointer;
transition: all 0.3s;
border-left: 3px solid transparent;
color: #888;
}
.shop-category:hover {
background: rgba(255, 255, 255, 0.02);
color: #ccc;
}
.shop-category.active {
background: linear-gradient(90deg, rgba(207, 170, 112, 0.1), transparent);
border-left-color: var(--accent-gold);
color: var(--accent-gold);
}
.shop-category .cat-icon {
font-size: 1.2rem;
filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}
.shop-category .cat-name {
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.2rem;
letter-spacing: 2px;
}
/* Content Area */
.shop-content-area {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
background: rgba(0, 0, 0, 0.2);
}
/* Shop Header Override */
.shop-header-bar {
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(10, 12, 16, 0.4);
}
.shop-title-rune {
font-family: 'Ma Shan Zheng', cursive;
font-size: 2rem;
color: #e3d8c8;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.shop-wallet-container {
display: flex;
align-items: center;
gap: 10px;
background: rgba(0, 0, 0, 0.4);
padding: 8px 20px;
border-radius: 20px;
border: 1px solid rgba(207, 170, 112, 0.3);
}
.wallet-icon {
font-size: 1.2rem;
}
.wallet-amount {
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.4rem;
color: var(--accent-gold);
}
.wallet-label {
font-size: 0.8rem;
color: #666;
margin-left: 5px;
}
.shop-meta-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 10px 24px 8px;
background: rgba(10, 12, 16, 0.28);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.shop-meta-item {
font-size: 0.82rem;
letter-spacing: 0.5px;
color: rgba(226, 214, 194, 0.85);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 6px;
padding: 8px 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shop-activity-log {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 108px;
overflow-y: auto;
padding: 8px 24px 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
background: rgba(0, 0, 0, 0.18);
}
.shop-log-item {
display: grid;
grid-template-columns: 52px 1fr 72px;
align-items: center;
font-size: 0.78rem;
color: rgba(235, 225, 210, 0.88);
gap: 10px;
}
.shop-log-time {
color: rgba(255, 255, 255, 0.45);
font-family: 'Noto Sans SC', sans-serif;
}
.shop-log-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shop-log-coin {
text-align: right;
color: var(--accent-gold);
font-family: 'Ma Shan Zheng', cursive;
}
.shop-log-empty {
color: rgba(255, 255, 255, 0.35);
font-size: 0.8rem;
}
@media (max-width: 1100px) {
.shop-meta-strip {
grid-template-columns: 1fr;
gap: 8px;
}
.shop-activity-log {
max-height: 94px;
}
}
/* Scroll View containing the grid */
.shop-scroll-view {
flex: 1;
overflow-y: auto;
padding: 40px;
}
.shop-scroll-view::-webkit-scrollbar {
width: 6px;
}
.shop-scroll-view::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.item-type-badge {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 4px;
margin-bottom: 5px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* =========================================
PVP Result Overlay (Settlement)
========================================= */
.pvp-result-overlay {
background: rgba(5, 5, 5, 0.95);
/* Deep dark background */
display: none;
/* Initially hidden */
overflow-y: auto;
padding: 20px 0;
z-index: 10000;
backdrop-filter: blur(10px);
}
.pvp-result-container {
width: 100%;
max-width: 600px;
padding: 40px;
text-align: center;
position: relative;
margin: auto;
border: 1px solid rgba(207, 170, 112, 0.1);
background: linear-gradient(180deg, rgba(20, 20, 25, 0.9), rgba(10, 10, 12, 0.95));
box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), inset 0 0 100px rgba(0, 0, 0, 0.5);
border-radius: 8px;
animation: dialog-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Victory Mode */
.pvp-result-overlay.victory .pvp-result-container {
border-color: var(--accent-gold);
box-shadow: 0 0 60px rgba(207, 170, 112, 0.2), inset 0 0 30px rgba(207, 170, 112, 0.1);
}
.pvp-result-overlay.victory .result-title {
color: var(--accent-gold);
text-shadow: 0 0 20px rgba(207, 170, 112, 0.6), 0 0 40px rgba(207, 170, 112, 0.3);
background: linear-gradient(to bottom, #fff, var(--accent-gold));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Defeat Mode */
.pvp-result-overlay.defeat .pvp-result-container {
border-color: #555;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}
.pvp-result-overlay.defeat .result-title {
color: #888;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
font-family: 'Ma Shan Zheng', cursive;
letter-spacing: 4px;
}
.result-title {
font-size: 4rem;
margin-bottom: 30px;
font-family: 'Ma Shan Zheng', cursive;
animation: title-enter 0.8s ease-out forwards;
opacity: 0;
transform: scale(0.8);
}
@keyframes title-enter {
0% {
opacity: 0;
transform: scale(2);
filter: blur(10px);
}
100% {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
}
.result-content {
margin-bottom: 40px;
}
.pvp-score-change-anim {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 120px;
margin-bottom: 20px;
}
.score-label {
font-size: 1rem;
color: #666;
margin-bottom: 5px;
letter-spacing: 2px;
}
.score-value {
font-size: 2.5rem;
font-weight: bold;
color: #eee;
font-family: 'Cinzel', serif;
}
.score-delta {
font-size: 3rem;
font-weight: bold;
margin-top: 10px;
opacity: 0;
font-family: 'Cinzel', serif;
}
/* Victory Delta Animation */
.pvp-result-overlay.victory .score-delta {
color: var(--accent-gold);
animation: score-up-anim 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards 0.5s;
}
@keyframes score-up-anim {
0% {
opacity: 0;
transform: translateY(20px) scale(0.5);
}
30% {
opacity: 1;
transform: translateY(-10px) scale(1.2);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
text-shadow: 0 0 20px var(--accent-gold);
}
}
/* Defeat Delta Animation */
.pvp-result-overlay.defeat .score-delta {
color: #a4161a;
animation: score-down-anim 1s ease-out forwards 0.5s;
}
@keyframes score-down-anim {
0% {
opacity: 0;
transform: translateY(-20px);
}
40% {
opacity: 1;
transform: translateY(10px);
}
60% {
transform: translateY(-5px);
}
80% {
transform: translateY(2px);
}
100% {
opacity: 1;
transform: translateY(0);
color: #888;
}
/* Fade to grey */
}
.opponent-info-result {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
color: #666;
font-size: 0.9rem;
margin-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
}
.pvp-result-review {
margin-top: 22px;
padding: 18px 20px;
border-radius: 16px;
border: 1px solid rgba(207, 170, 112, 0.18);
background: linear-gradient(180deg, rgba(18, 23, 37, 0.96), rgba(11, 15, 24, 0.9));
text-align: left;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 28px rgba(0, 0, 0, 0.24);
}
.pvp-result-overlay.victory .pvp-result-review {
border-color: rgba(207, 170, 112, 0.3);
}
.pvp-result-overlay.defeat .pvp-result-review {
border-color: rgba(155, 155, 155, 0.22);
}
.pvp-result-review-kicker {
font-size: 0.8rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 231, 192, 0.72);
margin-bottom: 10px;
}
.pvp-result-review-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
}
.pvp-result-review-copy {
min-width: 0;
}
.pvp-result-review-title {
font-size: 1.2rem;
font-weight: 700;
color: #f7ead0;
}
.pvp-result-review-subtitle {
margin-top: 4px;
font-size: 0.92rem;
color: rgba(214, 221, 236, 0.74);
}
.pvp-result-review-chip {
flex-shrink: 0;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 220, 190, 0.16);
font-family: 'Cinzel', serif;
color: #f8efe0;
background: rgba(255, 255, 255, 0.04);
}
.pvp-result-review-chip.tier-controlled {
background: rgba(122, 186, 160, 0.14);
border-color: rgba(122, 186, 160, 0.26);
}
.pvp-result-review-chip.tier-medium {
background: rgba(126, 162, 233, 0.16);
border-color: rgba(126, 162, 233, 0.28);
}
.pvp-result-review-chip.tier-high {
background: rgba(227, 155, 105, 0.17);
border-color: rgba(227, 155, 105, 0.32);
}
.pvp-result-review-chip.tier-extreme {
background: rgba(187, 82, 82, 0.18);
border-color: rgba(187, 82, 82, 0.34);
}
.pvp-result-review-summary {
margin-top: 12px;
color: rgba(239, 239, 243, 0.9);
line-height: 1.72;
}
.pvp-result-review-row {
display: grid;
grid-template-columns: 74px minmax(0, 1fr);
gap: 12px;
margin-top: 12px;
align-items: start;
}
.pvp-result-review-row .label {
color: #91c8ff;
font-weight: 700;
letter-spacing: 0.08em;
}
.pvp-result-review-row .value {
color: rgba(238, 238, 244, 0.92);
line-height: 1.66;
}
.pvp-result-review-foot {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(246, 219, 172, 0.82);
font-size: 0.92rem;
}
.vs-text {
font-style: italic;
opacity: 0.5;
}
.result-actions button {
min-width: 180px;
opacity: 0;
animation: fade-in-up 0.5s ease-out forwards 1.5s;
/* Delay button */
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* UI Review Pass - PVP layout consistency */
#pvp-screen .screen-header.transparent {
height: 104px;
padding: 18px 34px 0;
}
.pvp-layout-split {
height: calc(100vh - 104px);
padding: 16px 34px 28px;
gap: 34px;
max-width: 1520px;
}
.pvp-nav-sidebar {
width: 196px;
gap: 22px;
padding-top: 26px;
}
.rune-tab {
gap: 16px;
padding: 12px 0;
}
.rune-name {
font-size: 1.28rem;
}
.pvp-content-container {
padding: 14px 18px 18px;
border: 1px solid rgba(207, 170, 112, 0.12);
border-radius: 24px;
background: linear-gradient(180deg, rgba(9, 16, 30, 0.56), rgba(6, 12, 22, 0.28));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 20px 50px rgba(0, 0, 0, 0.16);
backdrop-filter: blur(10px);
}
.ranking-scroll-area {
padding: 6px 18px 84px;
}
.jade-slip-row {
margin-bottom: 18px;
}
.defense-layout-split {
gap: 20px;
}
.formation-visualizer-panel,
.defense-controls-panel,
.shop-main-panel,
.shop-sidebar {
border-radius: 20px;
}
.pvp-result-container {
max-width: 560px;
padding: 34px 32px;
border-radius: 18px;
}
@media (max-width: 1240px) {
.pvp-layout-split {
gap: 24px;
padding: 14px 22px 24px;
}
.pvp-nav-sidebar {
width: 168px;
}
.rune-name {
font-size: 1.12rem;
}
.ranking-scroll-area {
padding-left: 10px;
padding-right: 10px;
}
.pvp-risk-brief {
margin-left: 10px;
margin-right: 10px;
}
.challenge-intent-line {
max-width: 260px;
}
.jade-slip-row {
grid-template-columns: 68px 72px 1fr 120px;
padding: 0 22px;
}
.pvp-result-review-head {
flex-direction: column;
}
.pvp-result-review-chip {
align-self: flex-start;
}
}
@media (max-width: 960px) {
#pvp-screen .screen-header.transparent {
height: auto;
min-height: 90px;
padding: 14px 16px 0;
}
.header-title-group {
position: static;
transform: none;
}
.pvp-layout-split {
flex-direction: column;
height: auto;
min-height: calc(100vh - 90px);
padding: 10px 12px 18px;
gap: 14px;
}
.pvp-nav-sidebar {
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
gap: 10px;
padding-top: 4px;
}
.rune-tab {
flex: 1;
justify-content: center;
gap: 10px;
padding: 10px 6px;
}
.rune-tab.active,
.rune-tab:hover {
transform: translateX(0);
}
.rune-tab.active::before {
display: none;
}
.rune-name {
font-size: 0.98rem;
}
.player-rank-badge {
padding: 6px 12px;
gap: 8px;
}
.pvp-content-container {
padding: 10px;
border-radius: 18px;
}
.pvp-risk-brief {
margin: 0 2px 12px;
padding: 14px;
border-radius: 16px;
}
.pvp-risk-header {
flex-direction: column;
align-items: flex-start;
}
.pvp-risk-axis-grid {
grid-template-columns: 1fr;
gap: 10px;
}
.pvp-dossier-grid {
grid-template-columns: 1fr;
}
.pvp-dossier-history-grid {
grid-template-columns: 1fr;
}
.pvp-dossier-card-head {
align-items: flex-start;
flex-direction: column;
gap: 6px;
}
.pvp-duel-slip-head {
flex-direction: column;
}
.pvp-risk-line {
grid-template-columns: 38px 1fr;
gap: 10px;
}
.pvp-result-review-row {
grid-template-columns: 1fr;
gap: 6px;
}
.ranking-scroll-area {
padding: 4px 2px 18px;
mask-image: none;
-webkit-mask-image: none;
}
.jade-slip-row {
grid-template-columns: 52px 58px 1fr 88px;
height: 76px;
padding: 0 14px;
}
.rank-meta-strip {
gap: 6px;
}
.rank-risk-note {
font-size: 0.7rem;
}
.pvp-nav-footer {
padding: 0 16px 16px;
align-items: stretch;
}
.challenge-intent-line {
max-width: none;
text-align: left;
}
.defense-layout-split {
flex-direction: column;
gap: 14px;
padding: 12px 10px 18px;
}
.formation-visualizer-panel {
min-width: 0;
padding: 10px;
overflow: hidden;
}
.formation-visual-container {
width: min(100%, 320px);
height: min(100vw - 72px, 320px);
}
.defense-controls-panel {
width: 100%;
min-width: 0;
padding: 18px;
border-left: none;
border-top: 1px solid rgba(207, 170, 112, 0.18);
}
.dao-heart-selector {
flex-wrap: wrap;
}
.dao-card {
min-width: 0;
}
.formation-stats-overlay {
position: static;
margin-top: 14px;
justify-content: center;
gap: 12px;
padding: 10px 14px;
flex-wrap: wrap;
}
.stat-row .value {
font-size: 1.16rem;
}
}
/* The Defier - Ink & Gold Event UI */
:root {
--event-bg-dark: #121212;
--paper-texture-dark: #1a1a1a;
--gold-accent: #cfaa70;
--jade-accent: #4ade80;
--ink-black: #000000;
--text-primary: #e0e0e0;
--text-secondary: #a0a0a0;
}
/* Modal Layout Adjustments */
.large-modal {
width: 90vw;
max-width: 1200px;
height: 85vh;
display: flex;
flex-direction: column;
background: var(--event-bg-dark);
border: 1px solid var(--gold-accent);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
position: relative;
overflow: hidden;
}
/* Event Choices Refinement */
.event-choice {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
text-align: left;
}
.event-choice:hover:not(.disabled) {
border-color: var(--gold-accent);
background: rgba(207, 170, 112, 0.1);
transform: translateY(-2px);
}
.choice-effect {
font-size: 0.9rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
/* Upgrade Screen Layout */
.upgrade-modal-layout {
display: flex;
flex: 1;
overflow: hidden;
height: 100%;
}
/* Left: Card Grid */
.upgrade-card-grid {
flex: 2;
padding: 2rem;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 1.5rem;
align-content: flex-start;
background: radial-gradient(circle at center, rgba(30, 30, 30, 0.8), rgba(10, 10, 10, 0.95));
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--gold-accent) var(--event-bg-dark);
}
.upgrade-card-grid::-webkit-scrollbar {
width: 6px;
}
.upgrade-card-grid::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.upgrade-card-grid::-webkit-scrollbar-thumb {
background: var(--gold-accent);
border-radius: 3px;
}
.upgrade-card-grid .card {
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.upgrade-card-grid .card:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
border-color: rgba(207, 170, 112, 0.5);
}
.upgrade-card-grid .card.selected {
border: 2px solid var(--gold-accent);
box-shadow: 0 0 15px var(--gold-accent);
transform: scale(1.05);
}
/* Right: Preview Panel (Jade Slip) */
.upgrade-preview-panel {
flex: 1;
min-width: 350px;
background: #161616;
border-left: 1px solid var(--gold-accent);
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
}
.preview-title {
font-family: 'Ma Shan Zheng', cursive;
font-size: 2rem;
color: var(--gold-accent);
margin-bottom: 1rem;
text-shadow: 0 0 5px rgba(207, 170, 112, 0.3);
}
.preview-placeholder {
color: var(--text-secondary);
text-align: center;
font-style: italic;
margin-top: 50%;
line-height: 1.6;
}
.preview-card-container {
margin: 1.5rem 0;
transform: scale(1.2);
filter: drop-shadow(0 0 10px rgba(74, 222, 128, 0.2));
}
.preview-diff-box {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 1rem;
width: 100%;
margin-top: 1rem;
}
.diff-row {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 0.95rem;
border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
padding-bottom: 4px;
}
.diff-row:last-child {
border-bottom: none;
}
.diff-label {
color: #888;
}
.diff-val-old {
color: #aaa;
text-decoration: line-through;
margin-right: 5px;
}
.diff-val-new {
color: var(--jade-accent);
font-weight: bold;
}
.confirm-upgrade-btn {
margin-top: auto;
width: 100%;
padding: 1rem;
background: linear-gradient(90deg, #1a1a1a, #2a2a2a);
border: 1px solid var(--gold-accent);
color: var(--gold-accent);
font-family: 'Ma Shan Zheng', cursive;
font-size: 1.4rem;
cursor: pointer;
position: relative;
overflow: hidden;
transition: all 0.3s;
}
.confirm-upgrade-btn:not(:disabled):hover {
background: var(--gold-accent);
color: #000;
box-shadow: 0 0 15px var(--gold-accent);
}
.confirm-upgrade-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
border-color: #444;
}
/* Particle effect for upgrade */
@keyframes upgrade-flash {
0% {
opacity: 0;
transform: scale(0.5);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
.upgrade-flash-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
pointer-events: none;
animation: upgrade-flash 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
z-index: 100;
}
/* --- Fixes for User Scroll Requests --- */
/* 1. Event Modal: Disable scrolling as requested */
#event-modal .modal-content {
overflow: hidden !important;
/* Force no scrollbar */
display: flex;
flex-direction: column;
justify-content: center;
max-height: 80vh !important;
}
/* 2. Upgrade Modal: Fix scrolling for card grid */
/* We need the parent modal to NOT scroll, so the child grid CAN scroll */
.modal.upgrade-mode .modal-content {
overflow: hidden !important;
padding: 0 !important;
/* Remove padding to let split layout touch edges */
height: 85vh !important;
max-height: 85vh !important;
background: var(--event-bg-dark);
display: flex;
flex-direction: column;
}
.modal.upgrade-mode .close-btn {
z-index: 10;
/* Ensure close button stays on top */
background: rgba(0, 0, 0, 0.5);
color: #fff;
}
/* Ensure the view container fills the modal */
#deck-view-cards {
height: 100%;
width: 100%;
}/* ===================================
Purification (Remove Card) UI
Style: Ink & Gold (Premium)
=================================== */
#purification-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
display: none;
/* Toggled by JS */
justify-content: center;
align-items: center;
overflow: hidden;
font-family: 'Ma Shan Zheng', cursive;
color: #f0f0f0;
}
#purification-modal.active {
display: flex;
animation: fade-in-modal 0.5s ease-out forwards;
}
/* Background Layers */
.purification-bg-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, #1a1a1a 0%, #000 100%);
z-index: -2;
}
.purification-ink-overlay {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background-image: url('https://raw.githubusercontent.com/googlefonts/noto-emoji/main/png/512/emoji_u2601.webp');
/* Placeholder textyre */
background-size: 800px;
opacity: 0.1;
animation: rotate-ink 60s linear infinite;
z-index: -1;
filter: invert(1) contrast(2);
pointer-events: none;
}
/* Main Container */
.purification-container {
width: 90%;
max-width: 1400px;
height: 85%;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 10;
}
/* Header Section */
.purification-header {
text-align: center;
margin-bottom: 40px;
position: relative;
}
.purification-title {
font-size: 4rem;
color: var(--accent-gold);
text-shadow: 0 0 20px rgba(207, 170, 112, 0.4);
letter-spacing: 10px;
margin-bottom: 5px;
background: linear-gradient(180deg, #fff 0%, #cfaa70 60%, #8a6a2a 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.purification-subtitle {
font-family: 'Noto Sans SC', sans-serif;
font-size: 1rem;
color: #888;
letter-spacing: 5px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.purification-subtitle::before,
.purification-subtitle::after {
content: '';
width: 40px;
height: 1px;
background: linear-gradient(90deg, transparent, #888, transparent);
}
/* Card Grid Area */
.purification-scroll-area {
flex: 1;
width: 100%;
overflow-y: auto;
padding: 20px 40px;
display: flex;
justify-content: center;
align-items: flex-start;
/* Custom Scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--accent-gold) rgba(0, 0, 0, 0.3);
}
.purification-scroll-area::-webkit-scrollbar {
width: 6px;
}
.purification-scroll-area::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.3);
}
.purification-scroll-area::-webkit-scrollbar-thumb {
background: var(--accent-gold);
border-radius: 3px;
}
.purification-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 40px 30px;
width: 100%;
max-width: 1200px;
padding-bottom: 100px;
/* Space for footer */
}
/* Card Wrapper Styles */
.purification-card-wrapper {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
}
.purification-card-wrapper .card {
transition: transform 0.4s ease, box-shadow 0.4s ease, filter 0.3s;
transform-origin: center center;
filter: grayscale(0.2) brightness(0.9);
/* Slightly dimmer by default to pop on hover */
}
/* Hover Effects */
.purification-card-wrapper:hover {
z-index: 10;
}
.purification-card-wrapper:hover .card {
transform: translateY(-15px) scale(1.1) rotate(2deg);
filter: grayscale(0) brightness(1.1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 2px var(--accent-gold);
}
/* Delete Overlay (Appears on Hover) */
.delete-intent-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
z-index: 11;
width: 80px;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.7);
border-radius: 50%;
border: 2px solid #ff4d4d;
box-shadow: 0 0 20px #ff4d4d;
}
.purification-card-wrapper:hover .delete-intent-overlay {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.delete-icon {
font-size: 2rem;
color: #ff4d4d;
text-shadow: 0 0 10px red;
}
/* Selection State */
.purification-card-wrapper.selected .card {
transform: translateY(-20px) scale(1.15);
filter: sepia(100%) hue-rotate(320deg) saturate(200%);
/* Reddish tint */
box-shadow: 0 0 30px #ff4d4d;
border-color: #ff4d4d;
}
.purification-card-wrapper.selected .delete-intent-overlay {
opacity: 0;
/* Hide icon when selected, show global confirm instead? Or keep it? Let's hide to show the card clearly */
}
/* Footer Controls */
.purification-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
background: linear-gradient(to top, #000 0%, transparent 100%);
display: flex;
justify-content: center;
gap: 30px;
pointer-events: none;
/* Let clicks pass through to grid */
}
.purification-footer button {
pointer-events: auto;
}
.purification-btn {
padding: 12px 40px;
font-size: 1.2rem;
font-family: 'Ma Shan Zheng', cursive;
background: rgba(0, 0, 0, 0.6);
border: 1px solid #444;
color: #ccc;
cursor: pointer;
transition: all 0.3s;
border-radius: 4px;
letter-spacing: 2px;
}
.purification-btn:hover {
background: #222;
border-color: #888;
color: #fff;
}
.purification-btn.confirm {
background: linear-gradient(135deg, #3d0000 0%, #1a0505 100%);
border: 1px solid #8b0000;
color: #ff4d4d;
box-shadow: 0 0 20px rgba(139, 0, 0, 0.3);
}
.purification-btn.confirm:hover {
background: linear-gradient(135deg, #5c0000 0%, #2b0000 100%);
box-shadow: 0 0 30px rgba(255, 0, 0, 0.5);
transform: scale(1.05);
}
.purification-cost {
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
font-size: 1.2rem;
color: var(--accent-gold);
text-shadow: 0 2px 5px #000;
}
/* Animation Keyframes */
@keyframes fade-in-modal {
from {
opacity: 0;
transform: scale(1.05);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes rotate-ink {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Particle Burn Effect (Stylized) */
.card-burn-effect {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, #ffcc00, #ff4500, transparent 70%);
mix-blend-mode: screen;
animation: burn-out 0.8s ease-out forwards;
pointer-events: none;
z-index: 20;
}
@keyframes burn-out {
0% {
transform: scale(0.5);
opacity: 0.8;
}
100% {
transform: scale(2);
opacity: 0;
}
}/* ===================================
Layout Fixes
Last-loaded containment overrides for clipping, overlap and short viewport bugs.
=================================== */
.screen,
.screen * {
box-sizing: border-box;
}
.screen {
min-width: 0;
}
.screen-header {
position: relative;
z-index: 60;
flex-shrink: 0;
min-width: 0;
}
.screen-header > * {
min-width: 0;
}
.screen-header h2,
.collection-heading-group,
.header-title-group {
min-width: 0;
overflow-wrap: anywhere;
}
#main-menu .ink-canvas {
pointer-events: none;
}
/* Character selection: keep the footer in normal flow so it cannot cover cards. */
#character-selection-screen {
overflow: hidden;
}
#character-selection-screen .character-selection-container {
flex: 1 1 auto;
min-height: 0;
height: auto;
padding-bottom: 24px;
}
#character-selection-screen .character-selection-footer {
position: relative;
bottom: auto;
z-index: 8;
flex: 0 0 auto;
padding: 14px 16px 18px;
background: linear-gradient(180deg, rgba(2, 5, 12, 0), rgba(2, 5, 12, 0.84) 20%, rgba(2, 5, 12, 0.98) 100%);
}
/* Archive and compendium screens: the shell owns scrolling, not the fixed screen. */
#collection,
#treasure-compendium {
overflow: hidden;
}
#collection .codex-shell,
#treasure-compendium .treasure-compendium-shell {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
display: flex;
flex-direction: column;
}
#collection .collection-tab-panel.active {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
#collection .collection-tab-panel .codex-scroll-container {
height: 100%;
max-height: none;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
#collection .codex-layout,
#treasure-compendium .treasure-compendium-layout {
min-width: 0;
}
#collection .codex-main-column,
#collection .codex-side-column,
#treasure-compendium .treasure-compendium-main,
#treasure-compendium .treasure-compendium-side {
min-width: 0;
}
#treasure-compendium .treasure-compendium-layout {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
#treasure-compendium .treasure-compendium-main {
min-height: 0;
}
/* Realm select: keep the action button out of the scrollable text column. */
#realm-select-screen .realm-preview-panel {
overflow: hidden;
}
#realm-select-screen {
background:
radial-gradient(circle at 12% 0%, rgba(88, 142, 255, 0.12), transparent 26%),
radial-gradient(circle at 88% 100%, rgba(236, 186, 102, 0.08), transparent 24%),
linear-gradient(180deg, #07111f 0%, #040914 55%, #02050a 100%);
}
#realm-select-screen .screen-header {
border-color: rgba(113, 158, 244, 0.18);
background:
radial-gradient(circle at 0% 0%, rgba(244, 197, 110, 0.08), transparent 36%),
linear-gradient(180deg, rgba(13, 21, 47, 0.92), rgba(6, 10, 24, 0.98));
}
#realm-select-screen .realm-select-layout {
border-color: rgba(113, 158, 244, 0.18);
background:
radial-gradient(circle at 100% 0%, rgba(104, 156, 255, 0.1), transparent 34%),
linear-gradient(180deg, rgba(11, 18, 40, 0.9), rgba(5, 9, 22, 0.96));
}
#realm-select-screen .realm-preview-panel {
border-color: rgba(113, 158, 244, 0.18);
background: rgba(10, 15, 20, 0.8);
}
#realm-select-screen .realm-preview-content {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
overflow: hidden;
}
#realm-select-screen .preview-header {
flex: 0 0 auto;
}
#realm-select-screen .preview-inner-container,
#realm-select-screen .preview-scroll-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
overflow-x: hidden;
overflow-y: auto;
padding-bottom: 12px;
padding-right: 5px;
}
#realm-select-screen .realm-preview-actions {
position: relative;
bottom: auto;
flex: 0 0 auto;
margin-top: 10px;
padding-top: 12px;
padding-bottom: 2px;
}
/* PVP hub and result screens: short windows must scroll vertically. */
#pvp-screen {
overflow-x: hidden;
overflow-y: auto;
}
#pvp-screen .pvp-layout-split {
height: auto;
min-height: calc(100dvh - 136px);
}
#pvp-screen .screen-header.transparent {
height: auto;
min-height: 88px;
}
#pvp-screen .challenge-btn {
width: min(260px, 100%);
height: auto;
min-height: 64px;
padding: 12px 22px;
overflow: hidden;
white-space: normal;
line-height: 1.18;
letter-spacing: 0.12em;
text-align: center;
}
#pvp-screen .ranking-scroll-area,
#pvp-screen .jade-slip-row,
#pvp-screen .rank-risk-note {
min-width: 0;
}
#pvp-screen .rank-risk-note {
white-space: normal;
overflow-wrap: anywhere;
}
#pvp-result-overlay.pvp-result-overlay {
align-items: flex-start;
overflow-x: hidden;
overflow-y: auto;
padding: 18px;
}
#pvp-result-overlay .pvp-result-container {
width: min(560px, calc(100vw - 36px));
max-width: calc(100vw - 36px);
max-height: none;
margin: 0 auto;
}
/* Modal close controls must stay above detail panels. */
.modal-content {
isolation: isolate;
}
.modal-close,
.modal-close-floating {
z-index: 120;
}
#treasure-detail-modal .modal-close,
#law-detail-modal .modal-close,
.treasure-detail-view .modal-close,
.law-detail-view .modal-close {
background: rgba(5, 8, 18, 0.92);
border-color: rgba(255, 226, 166, 0.42);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.treasure-detail-view,
.law-detail-view,
.card-detail-container {
isolation: isolate;
}
.card-detail-overlay {
padding: 18px;
overflow: auto;
}
.card-detail-container {
width: min(800px, calc(100vw - 36px));
height: min(500px, calc(100dvh - 36px));
max-width: calc(100vw - 36px);
max-height: calc(100dvh - 36px);
}
/* Deck modal: remove the hard 800px floor and keep generated card grids inside. */
#deck-modal .deck-view {
min-width: 0;
width: min(920px, calc(100vw - 28px));
max-width: calc(100vw - 28px);
height: min(85dvh, 760px);
max-height: calc(100dvh - 28px);
padding: 22px;
}
#deck-modal .deck-view > h2,
#deck-modal .deck-view-header {
flex: 0 0 auto;
}
#deck-modal #deck-view-cards,
#deck-modal .deck-cards,
#deck-modal .deck-view-content {
flex: 1 1 auto;
min-height: 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
overflow-y: auto;
}
#deck-modal .deck-grid {
grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
justify-items: center;
gap: 14px 8px;
padding: 10px 4px 18px;
}
#deck-modal .deck-card-wrapper {
width: 112px;
height: 156px;
}
#deck-modal .deck-card-wrapper .card {
transform: scale(0.68) rotateX(14deg) rotateY(0deg);
}
#pvp-screen .challenge-btn .btn-glow {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#battle-command-panel {
z-index: 520;
}
/* Battle log toast: avoid covering non-battle pages and mobile hand cards. */
body[data-current-screen]:not([data-current-screen="battle-screen"]) #battle-log {
top: max(clamp(56px, 7dvh, 82px), env(safe-area-inset-top));
bottom: auto;
max-width: min(88vw, 600px);
transform: translate(-50%, -8px);
z-index: 950;
}
body[data-current-screen]:not([data-current-screen="battle-screen"]) #battle-log.show {
transform: translate(-50%, 0);
}
body[data-current-screen="battle-screen"] #battle-log {
bottom: clamp(272px, 29dvh, 320px);
z-index: 610;
}
#battle-screen:not(.active) .battle-log {
display: none !important;
}
#battle-screen #hand-cards .card {
margin-left: 0;
}
/* Purification: footer participates in layout instead of overlaying the card list. */
#purification-modal {
overflow: hidden;
padding: 12px;
}
#purification-modal .purification-container {
width: min(1400px, calc(100vw - 24px));
height: min(88dvh, 900px);
max-height: calc(100dvh - 24px);
min-height: 0;
}
#purification-modal .purification-header {
flex: 0 0 auto;
margin-bottom: clamp(14px, 3vh, 34px);
}
#purification-modal .purification-scroll-area {
flex: 1 1 auto;
min-height: 0;
padding-bottom: 20px;
}
#purification-modal .purification-grid {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
padding-bottom: 24px;
}
#purification-modal .purification-footer {
position: relative;
bottom: auto;
left: auto;
flex: 0 0 auto;
width: 100%;
padding: 16px 18px 4px;
pointer-events: auto;
flex-wrap: wrap;
align-items: center;
background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.82));
}
#purification-modal .purification-cost {
position: static;
transform: none;
flex: 1 1 100%;
text-align: center;
}
/* Battle hand: avoid clipped first/last cards and keep piles outside the scroll lane. */
@media (max-width: 768px) {
#main-menu {
min-height: 100dvh;
padding: 10px 0 18px;
}
#main-menu .menu-content {
width: min(94vw, 420px);
max-width: calc(100vw - 18px);
padding: 14px 14px 18px;
}
#main-menu .game-logo {
margin-bottom: 0;
}
#main-menu .logo-img {
max-width: 156px;
width: 44vw;
}
#main-menu .game-description {
margin-bottom: 12px;
line-height: 1.45;
}
#main-menu .menu-buttons {
gap: 8px;
}
#main-menu .talisman-btn,
#main-menu .menu-btn {
width: min(292px, calc(100vw - 56px));
min-height: 48px;
}
#main-menu .menu-utilities {
margin-top: 16px;
gap: 10px;
row-gap: 18px;
}
#collection .screen-header,
#treasure-compendium .screen-header {
align-items: flex-start;
gap: 10px;
padding: 10px;
}
#collection .collection-heading-group h2,
#treasure-compendium .screen-header h2 {
font-size: 1.22rem;
line-height: 1.25;
text-align: left;
}
#collection .collection-heading-group p {
font-size: 0.78rem;
line-height: 1.35;
}
#collection .codex-shell,
#treasure-compendium .treasure-compendium-shell {
width: calc(100vw - 16px);
margin: 8px auto 12px;
}
#collection .collection-tab-bar {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
flex: 0 0 auto;
overflow: visible;
gap: 8px;
width: 100%;
margin-bottom: 10px;
padding: 10px;
position: relative;
z-index: 3;
}
#collection .collection-tab-btn {
width: 100%;
min-width: 0;
min-height: 44px;
padding: 8px 6px;
white-space: nowrap;
}
#collection .collection-tab-panel.active {
display: flex;
flex-direction: column;
}
#collection .codex-layout,
#treasure-compendium .treasure-compendium-layout {
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
#collection .codex-side-column,
#treasure-compendium .treasure-compendium-side {
position: relative;
width: 100%;
margin-top: 28px;
z-index: 1;
}
#collection .codex-main-column {
position: relative;
z-index: 2;
}
#collection .collection-card,
#collection .collection-inline-btn {
position: relative;
z-index: 3;
}
#collection .compendium-toolbar,
#collection .codex-toolbar,
#treasure-compendium .compendium-toolbar {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 10px;
padding: 12px;
width: 100%;
overflow: hidden;
}
#collection .compendium-control,
#collection .compendium-control.compendium-control-wide,
#treasure-compendium .compendium-control,
#treasure-compendium .compendium-control.compendium-control-wide {
width: 100%;
min-width: 0;
max-width: 100%;
flex-basis: auto;
}
#collection .compendium-control input,
#collection .compendium-control select,
#treasure-compendium .compendium-control input,
#treasure-compendium .compendium-control select {
width: 100%;
min-width: 0;
max-width: 100%;
}
#treasure-compendium .compendium-chip-row {
flex-wrap: wrap;
}
#collection .collection-card-grid,
#collection .sanctum-room-grid,
#collection .collection-detail-grid,
#collection .build-metric-grid,
#collection .collection-mini-grid,
#treasure-compendium .compendium-grid {
grid-template-columns: minmax(0, 1fr);
}
#pvp-screen .screen-header.transparent {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px;
min-height: 0;
padding: 12px 12px 8px;
}
#pvp-screen .screen-header.transparent .back-btn {
position: relative;
z-index: 2;
flex: 0 0 auto;
}
#pvp-screen .header-title-group {
position: static;
transform: none;
flex: 1 1 210px;
text-align: left;
}
#pvp-screen .pvp-layout-split {
min-height: 0;
padding: 10px 10px 18px;
}
#pvp-screen .challenge-btn {
width: 100%;
min-height: 58px;
font-size: 1.18rem;
letter-spacing: 0.08em;
}
#realm-select-screen .realm-select-layout {
min-height: 0;
overflow: hidden;
}
#realm-select-screen .realm-list-container {
flex: 0 0 auto;
max-height: min(32dvh, 260px);
}
#realm-select-screen .realm-preview-panel {
flex: 1 1 auto;
min-height: 0;
padding-bottom: 12px;
}
#realm-select-screen .preview-inner-container,
#realm-select-screen .preview-scroll-body {
padding-bottom: 10px;
}
#realm-select-screen .realm-preview-actions {
margin-top: 8px;
padding-top: 10px;
}
#realm-select-screen #enter-realm-btn {
min-height: 46px;
}
#pvp-result-overlay.pvp-result-overlay {
padding: 12px;
}
#pvp-result-overlay .pvp-result-container {
width: calc(100vw - 24px);
max-width: calc(100vw - 24px);
padding: 22px 16px;
}
#pvp-result-overlay .result-title {
font-size: clamp(2.15rem, 12vw, 3rem);
margin-bottom: 18px;
}
#pvp-result-overlay .result-content {
margin-bottom: 18px;
}
#pvp-result-overlay .pvp-result-review {
padding: 14px;
}
#deck-modal .deck-view {
width: calc(100vw - 20px);
max-width: calc(100vw - 20px);
height: min(88dvh, 760px);
max-height: calc(100dvh - 20px);
padding: 18px 12px;
}
#deck-modal .deck-grid {
grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
gap: 10px 4px;
}
#deck-modal .deck-card-wrapper {
width: 92px;
height: 132px;
}
#deck-modal .deck-card-wrapper .card {
transform: scale(0.58) rotateX(10deg) rotateY(0deg);
}
#purification-modal {
padding: 10px;
}
#purification-modal .purification-container {
width: calc(100vw - 20px);
height: calc(100dvh - 20px);
}
#purification-modal .purification-title {
font-size: clamp(2.4rem, 15vw, 3.6rem);
letter-spacing: 0.12em;
}
#purification-modal .purification-subtitle {
font-size: 0.8rem;
letter-spacing: 0.18em;
}
#purification-modal .purification-scroll-area {
padding: 12px 8px 10px;
}
#purification-modal .purification-grid {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
padding-bottom: 12px;
}
#purification-modal .purification-footer {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 10px 8px 0;
}
#purification-modal .purification-cost {
grid-column: 1 / -1;
font-size: 0.95rem;
}
#purification-modal .purification-btn {
width: 100%;
min-width: 0;
padding: 10px 12px;
font-size: 0.98rem;
}
#battle-screen .hand-area {
overflow: hidden;
padding: 8px 4px 24px;
transform: none;
}
body[data-current-screen="battle-screen"] #battle-log {
bottom: clamp(244px, 30dvh, 286px);
max-width: calc(100vw - 28px);
padding: 8px 12px;
font-size: 0.8rem;
line-height: 1.36;
z-index: 610;
}
#battle-screen .hand-cards {
width: 100%;
max-width: 100%;
justify-content: flex-start;
align-items: flex-end;
gap: 4px;
padding: 0 4px 8px;
overflow-x: auto;
overflow-y: hidden;
scroll-padding-inline: 8px;
}
#battle-screen #hand-cards .card,
#battle-screen .hand-cards .card {
flex: 0 0 var(--card-width-mobile);
width: var(--card-width-mobile);
margin-left: 0;
scroll-snap-align: center;
transform: none;
padding: 6px 5px;
border-width: 2px;
}
#battle-screen #hand-cards .card:first-child {
margin-left: 0;
}
#battle-screen #hand-cards .card:hover,
#battle-screen #hand-cards .card.selected {
transform: translateY(-28px) scale(1.06);
z-index: 120;
}
#battle-screen .deck-pile,
#battle-screen .discard-pile,
#battle-screen .pile-btn {
z-index: 320;
}
#battle-screen .deck-pile {
margin-left: 2px;
}
#battle-screen .discard-pile {
margin-right: 2px;
}
#battle-screen #hand-cards .card-cost {
width: 22px;
height: 22px;
top: -6px;
left: -6px;
font-size: 0.78rem;
border-width: 1px;
}
#battle-screen #hand-cards .card-header {
min-height: 22px;
margin-bottom: 3px;
padding: 2px 0 2px 12px;
border-bottom-width: 1px;
}
#battle-screen #hand-cards .card-name,
#battle-screen #hand-cards .card-title {
font-size: 0.68rem;
line-height: 1.08;
}
#battle-screen #hand-cards .card-image,
#battle-screen #hand-cards .card-art {
flex-basis: 26px;
min-height: 26px;
margin: 2px 0;
font-size: 1.55rem;
}
#battle-screen #hand-cards .card-desc {
min-height: 36px;
max-height: 42px;
padding: 3px 4px;
font-size: 0.52rem;
line-height: 1.2;
}
#battle-screen #hand-cards .card-type {
min-height: 11px;
margin-top: 2px;
font-size: 0.46rem;
line-height: 1;
letter-spacing: 0.03em;
}
#battle-command-panel,
#legacy-mission-tracker,
#boss-act-panel,
#battle-environment {
max-width: calc(100vw - 12px);
}
#battle-command-panel {
left: 6px;
right: 6px;
width: auto;
}
#game-over-screen {
overflow-y: auto;
padding: 18px;
}
#game-over-screen .game-over-container {
max-height: none;
margin: 0 auto;
}
#game-over-screen .game-over-buttons {
flex-wrap: wrap;
}
.card-detail-overlay {
align-items: flex-start;
padding: 10px;
}
.card-detail-container {
width: calc(100vw - 20px);
height: auto;
max-width: calc(100vw - 20px);
max-height: calc(100dvh - 20px);
overflow-y: auto;
flex-direction: column;
}
.card-preview-wrapper {
transform: scale(1);
}
.cd-preview-pane {
flex: 0 0 auto;
min-height: 220px;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cd-info-pane {
min-height: 0;
padding: 18px;
}
}
@media (max-height: 760px) {
#game-over-screen {
overflow-y: auto;
padding: 16px;
}
#game-over-screen .game-over-container {
max-height: none;
margin: 0 auto;
}
#game-over-screen .game-over-buttons {
flex-wrap: wrap;
}
#character-selection-screen .character-selection-container {
padding-top: 12px;
gap: 18px;
}
#character-selection-screen .story-intro {
margin-bottom: 12px;
padding: 14px 24px;
}
}
/* Terminal visual pass: this intentionally sits last so it wins over older
mobile overrides above. */
@media (max-width: 768px) {
body[data-current-screen="battle-screen"] #battle-log,
#battle-screen .battle-log {
bottom: clamp(236px, 29dvh, 260px);
max-width: min(48vw, 176px);
padding: 7px 10px;
font-size: 0.76rem;
line-height: 1.28;
}
#battle-screen .end-turn-btn {
right: 8px;
bottom: clamp(174px, 22dvh, 200px);
min-height: 42px;
padding: 8px 14px;
}
#realm-select-screen .realm-list-container {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
max-height: min(24dvh, 194px);
}
#realm-select-screen .realm-list-container::-webkit-scrollbar {
display: none;
}
#ring-modal .ring-scene-container {
display: grid;
grid-template-rows: minmax(190px, 25dvh) minmax(0, 1fr);
gap: 8px;
height: 100dvh;
min-height: 0;
padding: 10px;
overflow: hidden;
perspective: none;
background:
radial-gradient(circle at 50% 14%, rgba(52, 82, 126, 0.24), transparent 36%),
linear-gradient(180deg, rgba(9, 14, 24, 0.98), rgba(4, 8, 14, 1));
}
#ring-modal .ring-scene {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
pointer-events: auto;
}
#ring-modal .ring-system {
width: min(318px, calc(100vw - 48px));
height: min(318px, calc(100vw - 48px));
margin: -28px auto -18px;
transform: scale(0.56) !important;
transform-origin: center center;
}
#ring-modal .modal-close-floating {
top: 14px;
right: 14px;
}
#ring-modal .ring-ui-overlay {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 8px;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
pointer-events: auto;
}
#ring-modal .ring-ui-panel,
#ring-modal .ring-ui-panel.left {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
margin: 0;
padding: 12px;
overflow: hidden;
transform: none !important;
background:
radial-gradient(circle at 12% 0%, rgba(255, 215, 122, 0.08), transparent 32%),
rgba(0, 0, 0, 0.72);
border-radius: 16px;
}
#ring-modal .ring-ui-panel.right {
display: flex;
flex-direction: column;
width: 100%;
min-height: 0;
max-height: none;
margin: 0;
padding: 12px;
overflow: hidden;
background:
radial-gradient(circle at 88% 0%, rgba(78, 111, 189, 0.12), transparent 34%),
rgba(0, 0, 0, 0.72);
border-radius: 16px;
}
#ring-modal .ring-ui-panel .panel-body {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-x: hidden;
overflow-y: auto;
}
#ring-modal .ring-ui-panel.right .panel-header {
flex: 0 0 auto;
}
#ring-modal .ring-ui-panel.right .law-library-grid {
flex: 1 1 auto;
min-height: 0;
}
#ring-modal .ring-ui-footer {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 40px;
margin: 0;
padding: 8px 10px;
transform: none;
}
}
@media (max-width: 768px) and (max-height: 780px) {
#ring-modal .ring-scene-container {
grid-template-rows: 176px minmax(0, 1fr);
}
#ring-modal .ring-system {
transform: scale(0.52) !important;
}
}
/* Final visual pass: mobile battle, realm select and fate ring need a stronger
content-first layout than the older fixed-band mobile rules. */
@media (max-width: 768px) {
#battle-screen .battle-container {
padding-top: clamp(48px, 7dvh, 56px);
justify-content: flex-start;
}
#battle-screen .battle-command-panel,
#battle-screen #battle-command-panel {
top: max(54px, calc(env(safe-area-inset-top) + 44px));
max-height: min(122px, 15dvh);
padding: 5px 7px;
border-radius: 11px;
overflow-y: auto;
}
#battle-screen .battle-command-panel .battle-command-list,
#battle-screen #battle-command-panel .battle-command-list {
gap: 3px;
margin-top: 4px;
}
#battle-screen .battle-command-panel .battle-command-btn,
#battle-screen #battle-command-panel .battle-command-btn {
min-height: 36px;
padding: 4px 5px;
}
#battle-screen .battle-command-panel .battle-command-name,
#battle-screen #battle-command-panel .battle-command-name {
font-size: 0.6rem;
}
#battle-screen .battle-command-panel .battle-command-meta,
#battle-screen #battle-command-panel .battle-command-meta {
font-size: 0.49rem;
line-height: 1.12;
}
#battle-screen .battle-command-panel .battle-tactical-advisor,
#battle-screen #battle-command-panel .battle-tactical-advisor {
display: block;
margin-top: 5px;
max-height: 34px;
opacity: 1;
overflow: hidden;
}
#battle-screen .boss-act-panel,
#battle-screen #boss-act-panel {
top: clamp(150px, 19dvh, 162px);
left: 50%;
right: auto;
width: min(308px, calc(100vw - 32px));
transform: translateX(-50%);
max-height: 46px;
padding: 7px 10px;
overflow: hidden;
}
#battle-screen #boss-act-panel .boss-act-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 5px;
align-items: center;
}
#battle-screen #boss-act-panel .boss-act-title {
font-size: 0.72rem;
line-height: 1.18;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#battle-screen #boss-act-panel .boss-act-subtitle,
#battle-screen #boss-act-panel .boss-act-hp {
font-size: 0.56rem;
}
#battle-screen #boss-act-panel .boss-act-body {
display: none;
}
#battle-screen .enemy-area {
flex: 0 0 clamp(316px, 43dvh, 360px);
height: auto;
min-height: 0;
margin-bottom: 6px;
padding: 0 8px 4px;
align-items: flex-end;
transform: none;
}
#battle-screen .enemy-container {
gap: 8px;
transform: scale(0.86);
transform-origin: center bottom;
}
#battle-screen .enemy-meta-strip {
gap: 2px 3px;
}
#battle-screen .enemy-meta-strip .enemy-role-tag,
#battle-screen .enemy-meta-strip .enemy-plan-tag,
#battle-screen .enemy-meta-strip .enemy-encounter-tag,
#battle-screen .enemy-meta-strip .enemy-encounter-affix,
#battle-screen .enemy-meta-strip .enemy-squad-tag,
#battle-screen .enemy-meta-strip .enemy-formation-tag,
#battle-screen .enemy-meta-strip .enemy-counter-tag,
#battle-screen .enemy-meta-strip .enemy-threat-tag {
min-height: 14px;
padding: 1px 5px;
font-size: 0.48rem;
letter-spacing: 0.12px;
}
#battle-screen .battle-middle {
top: 28dvh;
height: 38px;
min-height: 38px;
}
#battle-screen .hand-area {
min-height: 168px;
height: 178px;
padding: 6px 4px 20px;
}
#battle-screen .hand-cards {
gap: 4px;
padding: 0 4px 6px;
overflow-x: auto;
}
body[data-current-screen="battle-screen"] #battle-log,
#battle-screen .battle-log {
bottom: clamp(206px, 25dvh, 232px);
}
#battle-screen .end-turn-btn {
right: 8px;
bottom: clamp(174px, 22dvh, 200px);
min-height: 42px;
padding: 8px 14px;
}
#realm-select-screen .screen-header {
min-height: 60px;
padding: 10px 14px;
}
#realm-select-screen .realm-select-layout {
gap: 10px;
padding: 10px;
}
#realm-select-screen .realm-list-container {
min-height: 0;
max-height: min(22dvh, 174px);
padding: 8px 8px 12px;
gap: 10px;
}
#realm-select-screen .realm-card {
width: min(78vw, 304px);
min-width: min(78vw, 304px);
height: clamp(136px, 18dvh, 154px);
min-height: clamp(136px, 18dvh, 154px);
margin-right: 10px;
}
#realm-select-screen .realm-info {
padding: 0 10px 12px;
}
#realm-select-screen .realm-info h3 {
font-size: 0.98rem;
line-height: 1.18;
}
#realm-select-screen .realm-env-preview {
font-size: 0.72rem;
}
#realm-select-screen .realm-preview-panel {
flex: 1 1 auto;
min-height: 0;
padding: 10px;
}
#realm-select-screen .realm-preview-content {
gap: 8px;
}
#realm-select-screen .preview-header {
min-height: 54px;
gap: 8px;
padding-bottom: 8px;
}
#realm-select-screen .preview-icon {
width: 50px;
height: 50px;
min-width: 50px;
font-size: 1.55rem;
}
#realm-select-screen .preview-header h3 {
font-size: 1.28rem;
line-height: 1.18;
}
#realm-select-screen .preview-scroll-body {
gap: 8px;
padding-right: 4px;
}
#realm-select-screen .preview-section,
#realm-select-screen .preview-rewards {
padding: 8px 10px;
}
#realm-select-screen .preview-section h4,
#realm-select-screen .preview-rewards h4 {
min-height: 0;
margin-bottom: 5px;
line-height: 1.2;
}
#realm-select-screen .preview-text {
font-size: 0.82rem;
line-height: 1.35;
}
#realm-select-screen .realm-preview-actions {
margin-top: 6px;
padding-top: 8px;
}
#realm-select-screen #enter-realm-btn {
min-height: 44px;
}
#ring-modal .ring-scene-container {
height: 100dvh;
gap: 8px;
padding: 10px;
overflow: hidden;
background:
radial-gradient(circle at 50% 18%, rgba(52, 82, 126, 0.24), transparent 38%),
linear-gradient(180deg, rgba(9, 14, 24, 0.98), rgba(4, 8, 14, 1));
}
#ring-modal .ring-scene {
flex: 0 0 min(30dvh, 240px);
min-height: 220px;
padding-top: 0;
overflow: hidden;
}
#ring-modal .ring-system {
width: min(318px, calc(100vw - 48px));
height: min(318px, calc(100vw - 48px));
margin: -18px auto 0;
transform: scale(0.58) !important;
transform-origin: center center;
}
#ring-modal .modal-close-floating {
top: 14px;
right: 14px;
}
#ring-modal .ring-ui-overlay {
flex: 1 1 auto;
min-height: 0;
height: auto;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 8px;
padding: 0;
}
#ring-modal .ring-ui-panel.left {
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
padding: 12px;
background:
radial-gradient(circle at 12% 0%, rgba(255, 215, 122, 0.08), transparent 32%),
rgba(0, 0, 0, 0.72);
border-radius: 16px;
}
#ring-modal .ring-ui-panel .panel-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
#ring-modal .ring-ui-footer {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 10px;
}
}
@media (max-width: 768px) and (max-height: 780px) {
#battle-screen .battle-command-panel,
#battle-screen #battle-command-panel {
max-height: 86px;
}
#battle-screen .enemy-area {
flex-basis: clamp(282px, 40dvh, 316px);
}
#battle-screen .hand-area {
height: 166px;
min-height: 158px;
}
#realm-select-screen .realm-list-container {
max-height: 148px;
}
#realm-select-screen .realm-card {
height: 128px;
min-height: 128px;
}
#ring-modal .ring-scene {
flex-basis: 190px;
min-height: 190px;
}
#ring-modal .ring-system {
transform: scale(0.52) !important;
}
}
@media (min-width: 769px) and (max-width: 1240px) {
#pvp-screen .pvp-layout-split {
gap: clamp(18px, 3vw, 36px);
padding-left: clamp(20px, 4vw, 52px);
padding-right: clamp(20px, 4vw, 52px);
}
#pvp-screen .jade-slip-row {
grid-template-columns: 64px 70px minmax(0, 1fr) minmax(92px, auto);
padding-left: 18px;
padding-right: 18px;
}
}
/* Final visual audit pass: make critical content complete instead of clipped. */
#character-select .ink-scroll-container {
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
#character-select .ink-scroll-content {
min-height: 0;
}
#character-select .fate-ring-info-panel {
min-height: 0;
height: auto;
overflow: visible;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
}
#character-select .fate-ring-info-panel::after {
z-index: 0;
pointer-events: none;
}
#character-select .fate-ring-info-panel > * {
position: relative;
z-index: 1;
min-width: 0;
}
#character-select .ring-info-header {
flex: 1 1 180px;
}
#character-select .ring-stats-text {
flex: 1 1 140px;
text-align: right;
white-space: normal;
}
#event-modal .modal-content.event-view {
width: min(520px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
max-height: calc(100dvh - 32px);
padding: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden !important;
}
#event-modal .event-header {
flex: 0 0 auto;
}
#event-modal .event-body {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
#event-modal .event-choices {
padding-bottom: 4px;
overflow-y: auto;
flex: 1;
min-height: 0;
}
#event-modal .event-choice {
min-height: 0;
}
#battle-screen #battle-tactical-advisor.collapsed {
min-height: 40px;
max-height: 48px;
overflow: hidden;
}
#card-modal .modal-content.card-detail {
width: min(360px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
max-height: calc(100dvh - 32px);
padding: 18px;
display: grid;
place-items: center;
overflow: visible;
}
#card-modal .modal-content.card-detail .modal-close {
top: 10px;
right: 10px;
}
#card-modal #modal-card,
#card-modal .card-large {
width: 100%;
min-height: 260px;
display: grid;
place-items: center;
padding: 10px 0;
}
#card-modal #modal-card .card,
#card-modal .card-large .card {
width: 150px;
height: 210px;
margin-left: 0;
transform: none;
}
#shop-screen .shop-card-wrapper .card {
height: auto;
min-height: 218px;
margin-left: 0;
overflow: visible;
}
#shop-screen .shop-card-wrapper .card-desc {
display: block;
min-height: 0;
max-height: none;
overflow: visible;
-webkit-line-clamp: unset;
line-height: 1.28;
}
#shop-screen .shop-card-wrapper .card-type {
flex: 0 0 auto;
}
#reward-screen .reward-cards .card,
#reward-screen .reward-card-stage .card,
#reward-screen .reward-card {
height: auto;
min-height: 214px;
overflow: visible;
}
#reward-screen .reward-cards .card-desc,
#reward-screen .reward-card-stage .card-desc,
#reward-screen .reward-card .card-desc {
height: auto;
min-height: 0;
max-height: none;
overflow: visible;
}
#reward-screen .reward-cards .card-type,
#reward-screen .reward-card-stage .card-type,
#reward-screen .reward-card .card-type {
flex: 0 0 auto;
}
#map-screen .map-screen-v3 {
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto auto;
overflow: hidden;
background:
radial-gradient(circle at 50% 22%, rgba(106, 92, 210, 0.42), transparent 34%),
radial-gradient(circle at 14% 42%, rgba(41, 190, 222, 0.18), transparent 34%),
radial-gradient(circle at 84% 36%, rgba(236, 173, 74, 0.12), transparent 28%),
linear-gradient(180deg, #030713 0%, #081124 38%, #111748 100%);
color: rgba(239, 246, 255, 0.96);
}
#map-screen #map-expedition-panels {
grid-row: 3;
min-height: 0;
max-height: 0;
padding: 0 20px;
opacity: 0;
pointer-events: none;
overflow-x: hidden;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
transition:
max-height 220ms ease,
opacity 180ms ease,
padding 180ms ease;
}
#map-screen .map-screen-v3.show-map-intel #map-expedition-panels {
max-height: min(22dvh, 220px);
padding: 0 20px 16px;
opacity: 1;
pointer-events: auto;
overflow-y: auto;
}
#map-screen .map-v3-header {
grid-row: 1;
position: relative;
top: auto;
left: auto;
width: 100%;
overflow: visible;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 14px 20px 12px;
pointer-events: auto;
background:
linear-gradient(180deg, rgba(3, 7, 18, 0.94), rgba(7, 12, 28, 0.72)),
radial-gradient(circle at 18% 0%, rgba(238, 191, 94, 0.18), transparent 34%),
radial-gradient(circle at 86% 12%, rgba(78, 196, 255, 0.14), transparent 38%);
border-bottom: 1px solid rgba(179, 206, 255, 0.14);
box-shadow:
inset 0 -1px 0 rgba(255, 255, 255, 0.05),
0 18px 48px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(16px);
}
#map-screen .map-v3-header .back-btn {
grid-column: 1;
position: relative;
z-index: 2;
border: 1px solid rgba(158, 206, 255, 0.24);
background:
linear-gradient(180deg, rgba(16, 30, 65, 0.88), rgba(7, 16, 36, 0.82)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 48%);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
min-height: 42px;
padding-inline: 14px;
}
#map-screen .map-header-right {
grid-column: 2;
width: 100%;
max-width: 980px;
min-width: 0;
justify-self: end;
display: grid;
align-items: stretch;
}
#map-screen .map-header-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
#map-screen .map-header-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
#map-screen .map-header-toggle {
min-height: 38px;
padding: 8px 14px;
border: 1px solid rgba(166, 209, 255, 0.18);
border-radius: 999px;
background:
linear-gradient(180deg, rgba(15, 25, 53, 0.88), rgba(8, 16, 34, 0.82)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 48%);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
color: rgba(236, 244, 255, 0.94);
font-size: 0.82rem;
letter-spacing: 0.02em;
}
#map-screen .player-status-bar {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
}
#map-screen .map-detail-panels {
max-height: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
margin-top: 0;
transition:
max-height 220ms ease,
opacity 180ms ease,
margin-top 180ms ease;
}
#map-screen .map-screen-v3.show-map-intel .map-detail-panels {
max-height: min(48dvh, 520px);
overflow-x: hidden;
overflow-y: auto;
opacity: 1;
pointer-events: auto;
margin-top: 10px;
}
#map-screen .status-item {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 42px;
padding: 8px 14px;
border: 1px solid rgba(166, 209, 255, 0.18);
background:
linear-gradient(180deg, rgba(18, 32, 64, 0.92), rgba(8, 16, 34, 0.82)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.09), transparent 42%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 10px 24px rgba(0, 0, 0, 0.22);
border-radius: 16px;
color: rgba(239, 246, 255, 0.96);
font-weight: 600;
}
#map-screen .status-item .icon {
opacity: 0.92;
font-size: 0.95rem;
}
#map-screen .map-situation-overview,
#map-screen .map-chapter-risk-card,
#map-screen .map-chapter-brief,
#map-screen .map-adventure-buffs,
#map-screen .map-route-hints,
#map-screen .map-endless-panel,
#map-screen .map-legacy-mission,
#map-screen .map-run-path-flash {
width: 100%;
max-width: 100%;
}
#map-screen .map-scroll-container {
grid-row: 2;
min-height: 0;
height: 100%;
scroll-behavior: auto;
padding: 24px 28px 82px;
background:
linear-gradient(180deg, rgba(7, 12, 31, 0.08), rgba(6, 10, 26, 0.52)),
radial-gradient(circle at 50% 10%, rgba(125, 115, 255, 0.16), transparent 38%);
}
#map-screen .map-content-wrapper {
position: relative;
width: min(1040px, 100%);
max-width: 1040px;
min-height: max(360px, 100%);
padding: 28px 28px 72px;
border: 1px solid rgba(151, 188, 255, 0.14);
border-radius: 30px;
background:
linear-gradient(180deg, rgba(10, 18, 44, 0.88), rgba(10, 18, 52, 0.62)),
radial-gradient(circle at 50% 18%, rgba(118, 102, 220, 0.26), transparent 34%),
radial-gradient(circle at 18% 12%, rgba(66, 184, 255, 0.1), transparent 28%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 74px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 74px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.08),
0 28px 68px rgba(0, 0, 0, 0.3);
overflow: visible;
}
#map-screen .map-content-wrapper::before {
content: "";
position: absolute;
inset: 18px;
border-radius: 24px;
border: 1px solid rgba(255, 216, 146, 0.1);
background:
radial-gradient(circle at center, transparent 0 28%, rgba(255, 216, 146, 0.05) 29%, transparent 30%),
radial-gradient(circle at center, transparent 0 45%, rgba(132, 187, 255, 0.04) 46%, transparent 47%);
pointer-events: none;
z-index: 0;
}
#map-screen .map-canvas-header {
position: relative;
z-index: 3;
display: grid;
gap: 10px;
width: min(620px, 100%);
margin: 0 auto 28px;
padding: 18px 22px;
border: 1px solid rgba(164, 205, 255, 0.16);
border-radius: 24px;
background:
linear-gradient(180deg, rgba(11, 22, 51, 0.84), rgba(8, 16, 36, 0.76)),
radial-gradient(circle at top left, rgba(255, 224, 148, 0.08), transparent 42%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
0 16px 42px rgba(0, 0, 0, 0.24);
backdrop-filter: blur(10px);
}
#map-screen .map-canvas-kicker {
color: rgba(255, 223, 155, 0.88);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#map-screen .map-canvas-title-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
#map-screen .map-canvas-title {
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.45rem);
line-height: 1.2;
font-weight: 700;
color: rgba(244, 248, 255, 0.98);
}
#map-screen .map-canvas-stage {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 4px 12px;
border: 1px solid rgba(255, 220, 146, 0.22);
border-radius: 999px;
background: rgba(255, 220, 146, 0.08);
color: rgba(255, 234, 191, 0.94);
font-size: 0.78rem;
white-space: nowrap;
}
#map-screen .map-canvas-subtitle {
color: rgba(202, 217, 245, 0.86);
font-size: 0.9rem;
line-height: 1.55;
}
#map-screen .map-canvas-legend {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#map-screen .map-legend-chip {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 28px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(164, 205, 255, 0.16);
background: rgba(11, 18, 34, 0.58);
color: rgba(225, 235, 252, 0.88);
font-size: 0.76rem;
}
#map-screen .map-legend-chip::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(164, 205, 255, 0.9);
box-shadow: 0 0 8px rgba(164, 205, 255, 0.35);
}
#map-screen .map-legend-chip.current::before {
background: rgba(255, 220, 146, 0.96);
box-shadow: 0 0 10px rgba(255, 220, 146, 0.48);
}
#map-screen .map-legend-chip.completed::before {
background: rgba(86, 232, 169, 0.92);
box-shadow: 0 0 10px rgba(86, 232, 169, 0.38);
}
#map-screen .map-legend-chip.locked::before {
background: rgba(138, 156, 186, 0.8);
box-shadow: none;
}
#map-screen .map-connections-svg {
z-index: 2;
}
#map-screen .node-row-v3 {
height: 96px;
padding: 0 18px;
z-index: 3;
}
#map-screen .map-node-v3 {
width: clamp(68px, 4.8vw, 78px);
height: clamp(68px, 4.8vw, 78px);
margin: 0 clamp(18px, 3vw, 42px);
border-width: 1px;
border-color: rgba(163, 202, 255, 0.26);
background:
radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.22), transparent 24%),
radial-gradient(circle at 50% 64%, rgba(5, 10, 24, 0.88), rgba(3, 6, 16, 0.98));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 16px 30px rgba(0, 0, 0, 0.34);
}
#map-screen .map-node-v3::before {
content: "";
position: absolute;
inset: -9px;
border-radius: inherit;
border: 1px solid rgba(183, 213, 255, 0.14);
background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 66%);
opacity: 0.58;
pointer-events: none;
}
#map-screen .map-node-v3 .node-icon {
position: relative;
z-index: 2;
font-size: clamp(1.35rem, 1.1rem + 0.7vw, 1.7rem);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.46));
}
#map-screen .map-node-v3:hover {
transform: translateY(-4px) scale(1.08);
}
#map-screen .map-node-v3.boss {
width: clamp(88px, 6vw, 98px);
height: clamp(88px, 6vw, 98px);
margin: 0 clamp(20px, 3.4vw, 46px);
box-shadow:
0 0 0 4px rgba(234, 179, 8, 0.16),
0 0 42px rgba(234, 179, 8, 0.32),
0 20px 38px rgba(0, 0, 0, 0.38);
}
#map-screen .map-node-v3.locked {
filter: grayscale(0.55) brightness(0.74);
opacity: 0.72;
border-color: rgba(158, 180, 214, 0.38);
background:
radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.14), transparent 24%),
radial-gradient(circle at 50% 64%, rgba(21, 28, 48, 0.92), rgba(3, 6, 16, 0.96));
}
#map-screen .map-node-v3.current {
border-color: #ffe3a1;
box-shadow:
0 0 0 6px rgba(234, 179, 8, 0.16),
0 0 34px rgba(234, 179, 8, 0.54),
0 18px 38px rgba(0, 0, 0, 0.4);
}
#map-screen .connection-path {
stroke: rgba(164, 196, 255, 0.22);
stroke-width: 3;
stroke-dasharray: 8, 8;
}
#map-screen .connection-path.active {
stroke: rgba(255, 220, 146, 0.96);
stroke-width: 4;
filter: drop-shadow(0 0 8px rgba(234, 179, 8, 0.5));
}
#map-screen .connection-path.completed {
stroke: rgba(86, 232, 169, 0.62);
stroke-width: 3;
}
#map-screen .node-tooltip {
width: min(270px, calc(100vw - 40px));
padding: 12px 14px;
border-radius: 18px;
border: 1px solid rgba(255, 216, 146, 0.48);
background:
linear-gradient(180deg, rgba(9, 14, 28, 0.96), rgba(7, 10, 22, 0.96)),
radial-gradient(circle at top left, rgba(255, 216, 146, 0.1), transparent 42%);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);
}
#map-screen .node-tooltip-title {
font-size: 0.84rem;
line-height: 1.35;
}
#map-screen .node-tooltip-copy,
#map-screen .node-tooltip-risk {
font-size: 0.76rem;
line-height: 1.45;
}
#map-screen .node-risk-badge {
right: -8px;
bottom: -8px;
min-width: 44px;
min-height: 22px;
padding: 0 7px;
font-size: 0.64rem;
letter-spacing: 0.03em;
}
#map-screen .map-footer {
position: absolute;
right: 18px;
bottom: 18px;
z-index: 30;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background:
linear-gradient(180deg, rgba(5, 7, 18, 0.72), rgba(3, 5, 14, 0.96)),
radial-gradient(circle at 50% 0%, rgba(125, 186, 255, 0.12), transparent 52%);
border: 1px solid rgba(168, 202, 255, 0.16);
border-radius: 999px;
backdrop-filter: blur(12px);
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition:
opacity 180ms ease,
transform 180ms ease;
}
#map-screen .map-screen-v3.show-map-tools .map-footer {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
#map-screen .map-footer .menu-btn.small {
border: 1px solid rgba(166, 209, 255, 0.18);
min-height: 38px;
border-radius: 999px;
background:
linear-gradient(180deg, rgba(15, 25, 53, 0.88), rgba(8, 16, 34, 0.82)),
radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 48%);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
#map-screen .map-expedition-panels {
gap: 12px;
padding: 0 20px 16px;
}
#map-screen .expedition-panel-card {
padding: 12px 14px 10px;
gap: 8px;
}
#map-screen .expedition-card-title {
font-size: 16px;
line-height: 1.2;
}
#map-screen .expedition-card-note {
font-size: 13px;
line-height: 1.45;
}
#map-screen .expedition-chip-row {
gap: 6px;
}
#map-screen .expedition-chip {
padding: 5px 9px;
font-size: 11px;
}
#map-screen .expedition-choice-list,
#map-screen .expedition-faction-list {
gap: 8px;
}
#map-screen .expedition-choice-card,
#map-screen .expedition-faction-card,
#map-screen .expedition-nemesis-card {
padding: 10px 10px 8px;
gap: 6px;
}
#map-screen .expedition-choice-head {
align-items: flex-start;
gap: 8px;
}
#map-screen .expedition-choice-head strong {
min-width: 0;
}
#map-screen .expedition-choice-card p,
#map-screen .expedition-faction-card p,
#map-screen .expedition-nemesis-card p,
#map-screen .expedition-observatory-note,
#map-screen .expedition-empty-note,
#map-screen .expedition-signal-item span,
#map-screen .expedition-warning-item span {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
#map-screen .expedition-choice-meta {
gap: 4px 8px;
}
@media (max-height: 760px) {
#event-modal .modal-content.event-view {
max-height: calc(100dvh - 24px);
}
#event-modal .event-header {
padding: 12px 16px;
}
#event-modal .event-view .event-icon {
width: 54px;
height: 54px;
font-size: 2rem;
}
#event-modal .event-body {
padding: 14px 16px;
}
#map-screen .map-v3-header {
padding: 12px 16px 10px;
}
#map-screen #map-expedition-panels {
padding-left: 14px;
padding-right: 14px;
}
#map-screen .map-scroll-container {
padding-top: 16px;
padding-bottom: 64px;
}
#map-screen .map-content-wrapper {
padding: 22px 22px 54px;
}
}
@media (max-width: 768px) {
#character-select .fate-ring-info-panel {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 14px 16px;
gap: 12px;
}
#character-select .ring-info-header {
gap: 8px;
}
#character-select .ring-visual-mini {
width: 42px;
height: 42px;
justify-self: center;
}
#character-select .ring-stats-text {
text-align: left;
}
#map-screen .map-screen-v3 {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr) auto auto;
}
#map-screen .map-v3-header {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 12px 12px 10px;
gap: 8px;
}
#map-screen .map-header-toolbar {
justify-content: stretch;
flex-direction: column;
align-items: stretch;
}
#map-screen #map-expedition-panels {
padding-left: 10px;
padding-right: 10px;
}
#map-screen .map-v3-header .back-btn {
align-self: flex-start;
}
#map-screen .map-header-right {
width: 100%;
gap: 7px;
}
#map-screen .map-header-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
}
#map-screen .player-status-bar {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
width: 100%;
margin-top: 0;
padding: 6px;
}
#map-screen .status-item {
min-width: 0;
justify-content: center;
padding: 6px 8px;
font-size: 0.74rem;
white-space: nowrap;
}
#map-screen .map-canvas-header {
width: 100%;
margin-bottom: 18px;
padding: 14px 14px 12px;
gap: 8px;
}
#map-screen .map-canvas-title-row {
align-items: flex-start;
flex-direction: column;
}
#map-screen .map-canvas-stage {
min-height: 28px;
font-size: 0.72rem;
}
#map-screen .map-canvas-subtitle {
font-size: 0.8rem;
}
#map-screen .map-canvas-legend {
gap: 6px;
}
#map-screen .map-legend-chip {
font-size: 0.72rem;
}
#map-screen .map-situation-overview,
#map-screen .map-chapter-risk-card,
#map-screen .map-chapter-brief,
#map-screen .map-adventure-buffs,
#map-screen .map-route-hints,
#map-screen .map-endless-panel,
#map-screen .map-legacy-mission,
#map-screen .map-run-path-flash {
width: 100%;
}
#map-screen .map-scroll-container {
padding: 14px 12px 68px;
padding-bottom: 64px;
}
#map-screen .map-content-wrapper {
padding: 18px 14px 54px;
}
#map-screen .node-row-v3 {
height: 82px;
padding: 0 6px;
}
#map-screen .map-node-v3 {
width: 56px;
height: 56px;
margin: 0 10px;
}
#map-screen .map-node-v3 .node-icon {
font-size: 1.2rem;
}
#map-screen .map-node-v3.boss {
width: 72px;
height: 72px;
margin: 0 12px;
}
#map-screen .node-risk-badge {
right: -6px;
bottom: -6px;
}
#map-screen .map-footer {
left: 10px;
right: 10px;
bottom: 10px;
justify-content: center;
border-radius: 18px;
}
#map-screen .map-footer .menu-btn.small {
flex: 1 1 0;
min-width: 0;
padding-inline: 10px;
font-size: 0.76rem;
}
#collection .compendium-toolbar,
#collection .codex-toolbar,
#treasure-compendium .compendium-toolbar {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex: 0 0 auto;
height: auto !important;
max-height: none !important;
min-height: max-content;
overflow: visible;
align-items: stretch;
align-self: stretch;
position: relative;
z-index: 6;
margin-bottom: 16px;
}
#collection .codex-main-column,
#treasure-compendium .treasure-compendium-main {
display: flex;
flex-direction: column;
gap: 18px;
height: auto;
min-height: max-content;
overflow: visible;
}
#collection .codex-section,
#treasure-compendium .compendium-stats-wrapper,
#treasure-compendium .compendium-grid-container {
position: relative;
z-index: 1;
flex: 0 0 auto;
}
#collection .compendium-toolbar.codex-toolbar,
#treasure-compendium .compendium-toolbar {
grid-auto-rows: unset;
}
#collection .compendium-control,
#collection .compendium-control.compendium-control-wide,
#treasure-compendium .compendium-control,
#treasure-compendium .compendium-control.compendium-control-wide {
display: grid;
grid-template-columns: minmax(0, 1fr);
flex: 0 0 auto;
}
#collection .compendium-chip-groups,
#collection .compendium-chip-group,
#collection .compendium-chip-row,
#treasure-compendium .compendium-chip-groups,
#treasure-compendium .compendium-chip-group,
#treasure-compendium .compendium-chip-row,
#treasure-compendium .compendium-preset-bar,
#treasure-compendium .compendium-preset-slots {
width: 100%;
min-width: 0;
max-height: none;
overflow: visible;
}
#collection .compendium-chip,
#treasure-compendium .compendium-chip {
min-height: 34px;
white-space: normal;
}
#treasure-compendium .compendium-preset-slots {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
#treasure-compendium .compendium-preset-slot {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
#treasure-compendium .compendium-grid-container {
overflow: visible;
}
#ring-modal.active {
align-items: center;
justify-content: flex-start;
overflow-y: auto;
}
#ring-modal .ring-scene-container {
width: calc(100vw - 20px);
max-width: calc(100vw - 20px);
height: auto;
min-height: calc(100dvh - 40px);
margin: 0 auto;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: visible;
perspective: none;
gap: 12px;
padding: 16px 10px 16px;
flex-shrink: 0;
}
#ring-modal .ring-scene {
position: relative;
flex: 0 0 min(34dvh, 300px);
width: 100%;
height: auto;
min-height: 248px;
overflow: visible;
pointer-events: auto;
padding-top: 10px;
}
#ring-modal .ring-system {
width: min(330px, calc(100vw - 28px));
height: min(330px, calc(100vw - 28px));
margin: 0 auto;
transform: scale(0.64) !important;
transform-origin: center center;
}
#ring-modal .ring-ui-overlay {
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
height: auto;
min-height: 0;
padding: 0;
pointer-events: auto;
}
#ring-modal .ring-ui-panel,
#ring-modal .ring-ui-panel.left,
#ring-modal .ring-ui-panel.right {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
width: 100%;
height: auto;
max-height: none;
margin: 0;
padding: 14px;
overflow: visible;
transform: none !important;
}
#ring-modal .ring-ui-panel.right {
display: none;
}
#ring-modal .ring-ui-panel .panel-body {
max-height: none;
overflow: visible;
}
#ring-modal .ring-ui-footer {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
display: block;
width: 100%;
margin: 0;
padding: 10px 12px;
transform: none;
pointer-events: auto;
background: rgba(0, 0, 0, 0.72);
border: 1px solid rgba(255, 215, 0, 0.16);
border-radius: 14px;
}
#ring-modal .instruction-text {
display: block;
width: 100%;
margin: 0;
white-space: normal;
line-height: 1.4;
text-align: center;
}
#card-modal .modal-content.card-detail {
width: min(340px, calc(100vw - 20px));
max-width: calc(100vw - 20px);
padding: 16px;
}
#card-modal #modal-card,
#card-modal .card-large {
min-height: 280px;
}
#card-modal #modal-card .card,
#card-modal .card-large .card {
width: 158px;
height: 220px;
padding: 8px;
font-size: 0.9rem;
}
#shop-screen .shop-card-wrapper .card {
width: 126px;
min-height: 218px;
}
#shop-screen .shop-card-wrapper .card-desc {
font-size: 0.62rem;
}
}
@media (max-height: 760px) {
#reward-screen .reward-container {
padding-top: 18px;
}
#reward-screen .reward-title {
font-size: clamp(2.45rem, 5.6vw, 3.3rem);
line-height: 1.05;
}
#reward-screen .reward-cards {
align-items: start;
}
#reward-screen .reward-cards .card,
#reward-screen .reward-card-stage .card,
#reward-screen .reward-card {
width: 138px;
min-height: 206px;
padding: 9px;
}
#reward-screen .reward-cards .card-header,
#reward-screen .reward-card-stage .card-header,
#reward-screen .reward-card .card-header {
min-height: 28px;
margin-bottom: 6px;
}
#reward-screen .reward-cards .card-image,
#reward-screen .reward-cards .card-art,
#reward-screen .reward-card-stage .card-image,
#reward-screen .reward-card-stage .card-art,
#reward-screen .reward-card .card-image,
#reward-screen .reward-card .card-art {
height: 36px;
min-height: 36px;
margin: 4px 0;
font-size: 2.2rem;
}
#reward-screen .reward-cards .card-desc,
#reward-screen .reward-card-stage .card-desc,
#reward-screen .reward-card .card-desc {
font-size: 0.66rem;
line-height: 1.25;
padding: 5px;
}
}
/* Terminal visual pass: this block must remain at EOF so it wins over the
older duplicated mobile overrides above. */
@media (max-width: 768px) {
body[data-current-screen="battle-screen"] #battle-log,
#battle-screen .battle-log {
bottom: clamp(236px, 29dvh, 260px);
max-width: min(48vw, 176px);
padding: 7px 10px;
font-size: 0.76rem;
line-height: 1.28;
}
#battle-screen .end-turn-btn {
right: 8px;
bottom: clamp(174px, 22dvh, 200px);
min-height: 42px;
padding: 8px 14px;
}
#realm-select-screen .realm-list-container {
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
#realm-select-screen .realm-list-container::-webkit-scrollbar {
display: none;
}
#ring-modal .ring-scene-container {
display: grid;
grid-template-rows: minmax(202px, 27dvh) minmax(0, 1fr);
gap: 8px;
height: 100dvh;
min-height: 0;
padding: 10px;
overflow: hidden;
perspective: none;
background:
radial-gradient(circle at 50% 14%, rgba(52, 82, 126, 0.24), transparent 36%),
linear-gradient(180deg, rgba(9, 14, 24, 0.98), rgba(4, 8, 14, 1));
}
#ring-modal .ring-scene {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
pointer-events: auto;
}
#ring-modal .ring-system {
width: min(318px, calc(100vw - 48px));
height: min(318px, calc(100vw - 48px));
margin: -28px auto -18px;
transform: scale(0.56) !important;
transform-origin: center center;
}
#ring-modal .modal-close-floating {
top: 14px;
right: 14px;
}
#ring-modal .ring-ui-overlay {
position: relative;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 8px;
width: 100%;
height: 100%;
min-height: 0;
padding: 0;
overflow: hidden;
pointer-events: auto;
}
#ring-modal .ring-ui-panel,
#ring-modal .ring-ui-panel.left {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
display: flex;
flex-direction: column;
width: 100%;
height: auto;
min-height: 0;
max-height: none;
margin: 0;
padding: 12px;
overflow: hidden;
transform: none !important;
background:
radial-gradient(circle at 12% 0%, rgba(255, 215, 122, 0.08), transparent 32%),
rgba(0, 0, 0, 0.72);
border-radius: 16px;
}
#ring-modal .ring-ui-panel.right {
display: none;
}
#ring-modal .ring-ui-panel .panel-body {
flex: 1 1 auto;
min-height: 0;
max-height: none;
overflow-x: hidden;
overflow-y: auto;
}
#ring-modal .ring-ui-footer {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 40px;
margin: 0;
padding: 8px 10px;
transform: none;
}
}
@media (max-width: 768px) and (max-height: 780px) {
#ring-modal .ring-scene-container {
grid-template-rows: 184px minmax(0, 1fr);
}
#ring-modal .ring-system {
transform: scale(0.52) !important;
}
}
/* Absolute final mobile ring override. Keep this below the duplicated mobile
blocks so the library panel is not hidden again. */
@media (max-width: 768px) {
#ring-modal .ring-scene-container {
display: grid;
grid-template-rows: minmax(260px, 32dvh) minmax(0, 1fr);
gap: 8px;
height: 100dvh;
min-height: 0;
overflow: hidden;
padding: 10px;
}
#ring-modal .ring-scene {
min-height: 0;
overflow: hidden;
}
#ring-modal .ring-ui-overlay {
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 8px;
height: 100%;
min-height: 0;
overflow: hidden;
}
#ring-modal .ring-ui-panel.left {
grid-row: 1;
}
#ring-modal .ring-ui-panel.right {
grid-row: 2;
display: flex !important;
flex-direction: column;
width: 100%;
min-height: 0;
margin: 0;
padding: 12px;
overflow: hidden;
background:
radial-gradient(circle at 88% 0%, rgba(78, 111, 189, 0.12), transparent 34%),
rgba(0, 0, 0, 0.72);
border-radius: 16px;
transform: none !important;
}
#ring-modal .ring-ui-panel.right .panel-header {
flex: 0 0 auto;
}
#ring-modal .ring-ui-panel.right .law-library-grid {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
#ring-modal .ring-ui-panel.right .resonance-area {
flex: 0 0 auto;
}
#ring-modal .ring-ui-footer {
grid-row: 3;
}
}
@media (max-width: 768px) {
#ring-modal .ring-ui-overlay {
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-flow: row;
}
#ring-modal .ring-ui-panel.left,
#ring-modal .ring-ui-panel.right,
#ring-modal .ring-ui-footer {
grid-column: 1 / -1 !important;
width: 100%;
min-width: 0;
}
#ring-modal .ring-ui-panel.left {
grid-row: 1 !important;
}
#ring-modal .ring-ui-panel.right {
grid-row: 2 !important;
align-self: stretch;
}
#ring-modal .ring-ui-footer {
grid-row: 3 !important;
}
}
/* Audit cleanup: the realm-card shimmer used an oversized absolute pseudo
element, which inflated scrollHeight and looked like hidden content. */
@keyframes realm-card-contained-shimmer {
0% {
transform: translateX(-115%) skewX(-18deg);
}
100% {
transform: translateX(115%) skewX(-18deg);
}
}
#realm-select-screen .realm-card:not(.locked)::before {
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(105deg,
transparent 0%,
transparent 43%,
rgba(207, 170, 112, 0.16) 50%,
transparent 57%,
transparent 100%) !important;
animation: realm-card-contained-shimmer 6s infinite linear !important;
transform: translateX(-115%) skewX(-18deg);
}
#realm-select-screen .realm-card.endless-card::before {
background: linear-gradient(105deg,
transparent 0%,
transparent 42%,
rgba(84, 200, 255, 0.2) 50%,
transparent 58%,
transparent 100%) !important;
}
@media (max-width: 768px) {
#map-screen .map-content-wrapper {
overflow-x: visible !important;
}
#map-screen .map-scroll-container {
overflow-x: auto !important;
overscroll-behavior-x: contain;
touch-action: pan-y;
}
#map-screen .map-scroll-container::-webkit-scrollbar {
display: none;
}
#realm-select-screen .realm-list-container {
overflow-x: auto;
overflow-y: auto;
}
#ring-modal .ring-scene-container {
grid-template-rows: minmax(296px, 35dvh) minmax(0, 1fr);
}
#ring-modal .ring-scene {
overflow: visible !important;
}
}