Three Kingdoms: Warlord's Fate — complete playable game
- Stylized 3D ink-painting map of China (12 provinces, 32 cities, 17 factions) - Custom warlord creation (8 origins, banner, starting city) or historical factions - City management: 7 buildings, 5 dev tiers, recruitment from levies - Character system: stats, traits, loyalty, relationships, wounds, capture, death, succession - Turn-based tactical battles with formations, stances, hero skills, cinematic 3D replay - Sieges: assault, starvation, bribery, infiltration - Diplomacy with trust memory, alliances, NAPs, trade, marriage, espionage, betrayal - Scripted diverging history (Dong Zhuo, Guandu, Red Cliffs...) + world crises + court events - AI factions with distinct personalities; prisoners (execute/release/recruit/ransom) - Procedural guqin/taiko WebAudio score; save/load; victory + dynasty chronicle screens - View-relative camera controls; headless test suites (smoke, stress, map validator)
This commit is contained in:
deepseek
+286
@@ -0,0 +1,286 @@
|
||||
/* ============ WARLORD'S FATE — ink & parchment UI ============ */
|
||||
:root{
|
||||
--parch:#e8d9b5; --parch2:#dcc79a; --ink:#241a10; --ink2:#3a2c1c;
|
||||
--wood:#1d1410; --wood2:#2b1f16; --bronze:#a8874f; --bronze2:#c8a869;
|
||||
--seal:#a02c20; --gold:#d8b25f; --green:#6fa06a; --blue:#5b7fb4;
|
||||
--panel:#171009ee; --panel-line:#5a4527;
|
||||
--serif:'Noto Serif SC','Songti SC',Georgia,serif;
|
||||
--disp:'Cinzel','Noto Serif SC',serif;
|
||||
--brush:'Ma Shan Zheng','Noto Serif SC',cursive;
|
||||
}
|
||||
*{box-sizing:border-box;margin:0;padding:0}
|
||||
html,body{width:100%;height:100%;overflow:hidden;background:#0d0906}
|
||||
body{font-family:var(--serif);color:var(--parch);font-size:14px;-webkit-font-smoothing:antialiased}
|
||||
.hidden{display:none!important}
|
||||
#app{position:relative;width:100vw;height:100vh;overflow:hidden}
|
||||
|
||||
canvas#gl{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
|
||||
canvas#gl.picking{cursor:pointer}
|
||||
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
||||
|
||||
/* ---------- screens ---------- */
|
||||
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:50}
|
||||
#title-screen{background:
|
||||
radial-gradient(1200px 700px at 70% 15%, rgba(216,178,95,.13), transparent 60%),
|
||||
radial-gradient(900px 600px at 20% 85%, rgba(160,44,32,.12), transparent 60%),
|
||||
linear-gradient(180deg,#12100c 0%, #191209 40%, #0d0906 100%)}
|
||||
.title-ink{position:absolute;inset:0;opacity:.5;background:
|
||||
radial-gradient(600px 300px at 78% 30%, rgba(232,217,181,.07), transparent 70%),
|
||||
radial-gradient(500px 260px at 12% 60%, rgba(232,217,181,.05), transparent 70%)}
|
||||
.title-inner{position:relative;text-align:center;max-width:760px;padding:30px;z-index:2}
|
||||
.title-seal{position:absolute;top:-8px;right:-30px;width:96px;height:96px;border:3px solid var(--seal);
|
||||
color:var(--seal);font-family:var(--brush);font-size:30px;line-height:1.05;display:flex;align-items:center;justify-content:center;
|
||||
transform:rotate(6deg);border-radius:10px;background:rgba(160,44,32,.08);box-shadow:0 0 24px rgba(160,44,32,.35), inset 0 0 18px rgba(160,44,32,.25);opacity:.92}
|
||||
.game-title{font-family:var(--disp);font-weight:900;font-size:64px;letter-spacing:.14em;color:var(--parch);
|
||||
text-shadow:0 2px 0 #000,0 0 42px rgba(216,178,95,.28);margin-bottom:6px}
|
||||
.game-subtitle{font-size:17px;color:var(--gold);letter-spacing:.34em;margin-bottom:22px;font-weight:600}
|
||||
.title-tag{color:#cdbb93;line-height:1.75;margin-bottom:30px;font-size:15px}
|
||||
.title-menu{display:flex;flex-direction:column;gap:11px;align-items:center}
|
||||
.title-foot{margin-top:36px;color:#7d6c4e;font-size:12px;letter-spacing:.12em}
|
||||
|
||||
/* ---------- buttons ---------- */
|
||||
.btn{font-family:var(--disp);letter-spacing:.09em;font-size:14px;color:var(--parch);
|
||||
background:linear-gradient(180deg,#33261a,#211709);border:1px solid var(--panel-line);
|
||||
padding:11px 26px;border-radius:4px;cursor:pointer;min-width:280px;transition:.16s;position:relative}
|
||||
.btn:hover{border-color:var(--bronze2);color:#fff;box-shadow:0 0 18px rgba(200,168,105,.22);transform:translateY(-1px)}
|
||||
.btn-primary{border-color:var(--seal);background:linear-gradient(180deg,#5d2018,#38120c);color:#f5e6c8}
|
||||
.btn-primary:hover{box-shadow:0 0 22px rgba(160,44,32,.5)}
|
||||
.btn.small{min-width:0;padding:7px 14px;font-size:12px}
|
||||
.btn:disabled{opacity:.4;cursor:default;transform:none}
|
||||
|
||||
/* ---------- setup / faction pick ---------- */
|
||||
.setup-scroll,.end-scroll{max-height:92vh;overflow-y:auto;width:min(1060px,94vw);
|
||||
background:linear-gradient(180deg,#20170e 0%,#170f08 100%);
|
||||
border:1px solid var(--panel-line);border-radius:10px;padding:28px 34px;
|
||||
box-shadow:0 30px 80px rgba(0,0,0,.7), inset 0 0 80px rgba(0,0,0,.5)}
|
||||
.panel-title{font-family:var(--disp);font-size:26px;letter-spacing:.12em;color:var(--gold);margin-bottom:18px;text-align:center}
|
||||
.panel-title .cn{font-family:var(--brush);color:var(--seal);margin-left:10px;font-size:24px}
|
||||
.setup-section{margin-bottom:20px}
|
||||
.setup-section h3{color:var(--bronze2);letter-spacing:.14em;font-size:14px;font-weight:600;margin-bottom:10px;border-bottom:1px solid #3a2c18;padding-bottom:5px}
|
||||
.cn-small{font-family:var(--brush);opacity:.75;font-size:13px;margin-left:6px}
|
||||
.choice-row{display:flex;flex-wrap:wrap;gap:8px}
|
||||
.choice-row.small{gap:6px}
|
||||
.choice{padding:8px 14px;border:1px solid var(--panel-line);border-radius:4px;cursor:pointer;background:#1d150c;font-size:13px;transition:.15s}
|
||||
.choice:hover{border-color:var(--bronze2)}
|
||||
.choice.sel{border-color:var(--seal);background:linear-gradient(180deg,#4a1c14,#2a100a);color:#f2dfba;box-shadow:0 0 12px rgba(160,44,32,.4)}
|
||||
.hint-box{margin-top:10px;color:#c9b68d;font-size:12.5px;line-height:1.65;min-height:38px;padding:9px 12px;background:#140e07;border-left:3px solid var(--bronze);border-radius:2px}
|
||||
.setup-columns{display:grid;grid-template-columns:1fr 1.2fr;gap:26px}
|
||||
.setup-section label{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:#cdbb93;font-size:13px}
|
||||
.setup-section input[type=text],.setup-section select{flex:1;background:#120c06;border:1px solid var(--panel-line);color:var(--parch);padding:7px 10px;border-radius:3px;font-family:var(--serif);font-size:14px}
|
||||
.setup-section input[type=color]{width:52px;height:30px;background:none;border:1px solid var(--panel-line);border-radius:3px;padding:2px;cursor:pointer}
|
||||
.city-list,.faction-grid{display:flex;flex-wrap:wrap;gap:7px;max-height:180px;overflow-y:auto;padding-right:6px}
|
||||
.faction-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));max-height:56vh}
|
||||
.faction-card{border:1px solid var(--panel-line);border-radius:6px;padding:12px 14px;cursor:pointer;background:#191108;transition:.15s;position:relative;overflow:hidden}
|
||||
.faction-card:hover{transform:translateY(-2px);border-color:var(--bronze2)}
|
||||
.faction-card.sel{border-color:var(--gold);box-shadow:0 0 16px rgba(216,178,95,.3)}
|
||||
.faction-card .fc-banner{position:absolute;left:0;top:0;bottom:0;width:5px}
|
||||
.faction-card h4{font-size:16px;margin-bottom:3px;letter-spacing:.04em}
|
||||
.faction-card .fc-leader{color:var(--gold);font-size:12.5px;margin-bottom:6px}
|
||||
.faction-card p{font-size:11.5px;color:#b3a17c;line-height:1.55}
|
||||
.fc-cities{margin-top:6px;font-size:11px;color:#8d7c5c}
|
||||
.setup-actions{display:flex;gap:14px;justify-content:center;margin-top:22px}
|
||||
|
||||
/* ---------- HUD top ---------- */
|
||||
#game-screen{z-index:10}
|
||||
#hud-top{position:absolute;top:0;left:0;right:0;height:46px;display:flex;align-items:center;gap:8px;padding:0 12px;z-index:30;
|
||||
background:linear-gradient(180deg,rgba(13,9,5,.94) 0%,rgba(13,9,5,.82) 70%,transparent);
|
||||
border-bottom:1px solid rgba(90,69,39,.35)}
|
||||
.hud-block{display:flex;align-items:center;gap:6px;background:rgba(23,16,9,.72);border:1px solid rgba(90,69,39,.5);
|
||||
padding:4px 11px;border-radius:3px;font-size:13.5px;white-space:nowrap}
|
||||
.hud-block b{font-size:14.5px;letter-spacing:.03em}
|
||||
.res-ico{opacity:.85;font-size:13px}
|
||||
.delta{font-size:11px;color:#9aa87a}
|
||||
.delta.neg{color:#c96a5a}
|
||||
.hud-date b{color:var(--gold);letter-spacing:.05em}
|
||||
.hud-date span{color:#a5946f;font-size:11px;margin-right:7px;letter-spacing:.1em;text-transform:uppercase}
|
||||
.legit b{color:#d8845f}
|
||||
.hud-spacer{flex:1}
|
||||
.icon-btn{background:rgba(23,16,9,.8);border:1px solid var(--panel-line);color:var(--parch);border-radius:3px;
|
||||
width:32px;height:32px;cursor:pointer;font-size:15px;transition:.15s;pointer-events:auto}
|
||||
.icon-btn:hover{border-color:var(--bronze2);color:#fff}
|
||||
#btn-endturn{font-family:var(--disp);font-weight:700;letter-spacing:.1em;color:#f5e6c8;font-size:13.5px;cursor:pointer;
|
||||
background:linear-gradient(180deg,#7c2a1e 0%,#4c170e 100%);border:1px solid #b0552f;border-radius:4px;padding:8px 22px;transition:.18s;
|
||||
box-shadow:0 0 0 rgba(160,44,32,0)}
|
||||
#btn-endturn:hover{box-shadow:0 0 24px rgba(192,74,42,.55);transform:translateY(-1px)}
|
||||
#btn-endturn.busy{opacity:.5;pointer-events:none}
|
||||
|
||||
/* ---------- left objective ---------- */
|
||||
#hud-left{position:absolute;top:56px;left:12px;z-index:25;max-width:290px}
|
||||
.mini-note{background:rgba(23,16,9,.78);border:1px solid rgba(90,69,39,.5);border-left:3px solid var(--gold);
|
||||
border-radius:3px;padding:9px 12px;font-size:12px;line-height:1.6;color:#d6c49b;backdrop-filter:blur(3px)}
|
||||
|
||||
/* ---------- tabs & panel ---------- */
|
||||
#tab-bar{position:absolute;bottom:0;left:0;right:0;height:44px;display:flex;justify-content:center;gap:4px;z-index:30;
|
||||
background:linear-gradient(0deg,rgba(13,9,5,.95) 0%,rgba(13,9,5,.75) 70%,transparent);padding-top:10px}
|
||||
.tab-btn{font-family:var(--serif);font-size:13px;letter-spacing:.06em;color:#bda87e;background:rgba(23,16,9,.7);
|
||||
border:1px solid rgba(90,69,39,.5);border-bottom:none;border-radius:6px 6px 0 0;padding:7px 16px 12px;cursor:pointer;transition:.15s}
|
||||
.tab-btn:hover{color:var(--parch);border-color:var(--bronze2)}
|
||||
.tab-btn.active{color:#ffe9bd;background:linear-gradient(180deg,#33241a,#241a10);border-color:var(--bronze);box-shadow:0 -4px 14px rgba(0,0,0,.4)}
|
||||
#side-panel{position:absolute;top:52px;bottom:48px;right:0;width:min(430px,44vw);z-index:28;display:flex;flex-direction:column;
|
||||
background:linear-gradient(180deg,rgba(20,14,8,.97),rgba(14,9,5,.97));border-left:1px solid var(--panel-line);
|
||||
box-shadow:-18px 0 40px rgba(0,0,0,.5)}
|
||||
.panel-close{position:absolute;top:8px;right:8px;z-index:2}
|
||||
#panel-content{overflow-y:auto;padding:16px;flex:1}
|
||||
#panel-content::-webkit-scrollbar,.city-list::-webkit-scrollbar,.setup-scroll::-webkit-scrollbar{width:8px}
|
||||
#panel-content::-webkit-scrollbar-thumb,.city-list::-webkit-scrollbar-thumb{background:#3a2c18;border-radius:4px}
|
||||
.panel-h{font-family:var(--disp);font-size:17px;color:var(--gold);letter-spacing:.08em;margin-bottom:10px;border-bottom:1px solid #3a2c18;padding-bottom:6px}
|
||||
.sub-h{color:var(--bronze2);font-size:12.5px;letter-spacing:.12em;margin:14px 0 7px;font-weight:600}
|
||||
|
||||
/* general card */
|
||||
.gen-card{display:flex;gap:11px;background:#1a130a;border:1px solid #3a2c18;border-radius:6px;padding:10px;margin-bottom:9px;cursor:pointer;transition:.15s;position:relative}
|
||||
.gen-card:hover{border-color:var(--bronze2);background:#221809}
|
||||
.gen-portrait{width:58px;height:58px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
|
||||
font-family:var(--brush);font-size:26px;color:#fff;text-shadow:0 1px 3px #000;border:2.5px solid;box-shadow:inset 0 0 16px rgba(0,0,0,.55)}
|
||||
.gen-info{flex:1;min-width:0}
|
||||
.gen-name{font-size:15px;color:#f0dfba;letter-spacing:.04em}
|
||||
.gen-name .age{color:#8d7c5c;font-size:11.5px;margin-left:6px}
|
||||
.gen-title{font-size:11px;color:var(--gold);letter-spacing:.08em;margin:1px 0 5px}
|
||||
.stat-row{display:flex;gap:5px;flex-wrap:wrap}
|
||||
.stat-chip{font-size:10.5px;background:#120c06;border:1px solid #33271a;border-radius:3px;padding:2px 6px;color:#cbb88f}
|
||||
.stat-chip b{color:#efe0ba}
|
||||
.trait-tag{font-size:10px;border:1px solid #4a3a20;border-radius:3px;padding:1px 6px;color:#d8b25f;background:rgba(216,178,95,.07)}
|
||||
.loyalty-bar{height:5px;background:#0e0903;border-radius:3px;margin-top:6px;overflow:hidden}
|
||||
.loyalty-fill{height:100%;border-radius:3px;transition:width .4s}
|
||||
.gen-flags{position:absolute;top:8px;right:9px;display:flex;gap:5px;font-size:11px}
|
||||
.flag-wounded{color:#d86a4a}.flag-battle{color:#e8c66a}.flag-hidden{color:#7ab07a}
|
||||
.bar-wrap{display:flex;align-items:center;gap:8px;margin:3px 0;font-size:12px;color:#c9b68d}
|
||||
.bar-track{flex:1;height:7px;background:#0e0903;border:1px solid #292013;border-radius:4px;overflow:hidden}
|
||||
.bar-fill{height:100%;transition:width .5s}
|
||||
.btn-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
|
||||
.btn-tiny{font-family:var(--serif);font-size:11.5px;color:var(--parch);background:#241a10;border:1px solid #4a3a20;border-radius:3px;padding:5px 10px;cursor:pointer;transition:.15s}
|
||||
.btn-tiny:hover{border-color:var(--bronze2);background:#332415}
|
||||
.btn-tiny.warn{border-color:#7c3a2a;color:#eba890}
|
||||
.btn-tiny:disabled{opacity:.35;cursor:default}
|
||||
|
||||
/* city card */
|
||||
.city-card{background:#1a130a;border:1px solid #3a2c18;border-radius:6px;padding:11px;margin-bottom:9px}
|
||||
.city-head{display:flex;justify-content:space-between;align-items:baseline}
|
||||
.city-name{font-size:15.5px;color:#f0dfba}
|
||||
.city-name .prov{color:#8d7c5c;font-size:11px;margin-left:6px}
|
||||
.owner-dot{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px;vertical-align:baseline;border:1px solid rgba(255,255,255,.25)}
|
||||
.city-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 10px;margin:8px 0;font-size:11.5px;color:#c9b68d}
|
||||
.city-stats b{color:#eee0ba}
|
||||
.build-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
|
||||
.build-slot{background:#120c06;border:1px solid #33271a;border-radius:4px;padding:6px;text-align:center;font-size:11px;color:#c9b68d}
|
||||
.build-slot .lv{color:var(--gold);font-weight:700}
|
||||
.build-slot.up{border-color:#5a6b3a;cursor:pointer}
|
||||
.build-slot.up:hover{background:#1d1a0c;border-color:#8fa050}
|
||||
.build-slot.max{border-color:#3a4a2a;color:#9ab07a}
|
||||
|
||||
/* diplomacy */
|
||||
.diplo-row{display:flex;align-items:center;gap:9px;background:#1a130a;border:1px solid #3a2c18;border-radius:6px;padding:9px 11px;margin-bottom:8px}
|
||||
.diplo-flag{width:14px;height:22px;border-radius:2px;flex-shrink:0;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:9px}
|
||||
.diplo-name{flex:1;min-width:0}
|
||||
.diplo-name b{font-size:13.5px}
|
||||
.diplo-rel{font-size:11px;margin-top:2px}
|
||||
.rel-war{color:#e07a5a}.rel-alliance{color:#8fd07a}.rel-nap{color:#8fb0d0}.rel-trade{color:#d0c07a}.rel-peace{color:#b0a480}
|
||||
.trust-meter{width:64px;height:7px;background:#0e0903;border-radius:4px;position:relative;overflow:hidden;flex-shrink:0}
|
||||
.trust-meter::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:#5a4527}
|
||||
|
||||
/* journal */
|
||||
.journal-entry{border-left:3px solid #4a3a20;padding:7px 11px;margin-bottom:7px;background:#170f08;border-radius:0 4px 4px 0;font-size:12.5px;line-height:1.55;color:#d6c49b}
|
||||
.journal-entry.war{border-color:#a04a2a}.journal-entry.good{border-color:#6fa06a}.journal-entry.bad{border-color:#c05040}.journal-entry.epic{border-color:#d8b25f;background:#1c1508}
|
||||
.journal-entry .je-date{color:var(--gold);font-size:11px;letter-spacing:.08em;margin-right:8px}
|
||||
.chron-year{color:var(--seal);font-family:var(--brush);font-size:17px;margin:10px 0 4px}
|
||||
|
||||
/* hover card */
|
||||
#hover-card{position:absolute;z-index:40;pointer-events:none;max-width:270px;background:rgba(16,11,6,.95);
|
||||
border:1px solid var(--panel-line);border-radius:5px;padding:10px 12px;font-size:12px;line-height:1.5;color:#d6c49b;
|
||||
box-shadow:0 10px 30px rgba(0,0,0,.6)}
|
||||
#hover-card h4{color:#f0dfba;font-size:14px;margin-bottom:3px}
|
||||
#hover-card .hc-sub{color:var(--gold);font-size:11px;margin-bottom:5px}
|
||||
|
||||
/* map labels */
|
||||
.map-label{position:absolute;transform:translate(-50%,-100%);text-align:center;pointer-events:auto;cursor:pointer;transition:opacity .3s}
|
||||
.ml-name{font-size:12px;color:#f4e8cc;text-shadow:0 1px 2px #000,0 0 8px rgba(0,0,0,.9);letter-spacing:.06em;white-space:nowrap}
|
||||
.ml-sub{font-size:10px;color:#c9b184;text-shadow:0 1px 2px #000;white-space:nowrap}
|
||||
.army-label{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;
|
||||
background:rgba(16,11,6,.88);border:1px solid;border-radius:3px;padding:2px 7px;font-size:11px;white-space:nowrap;text-shadow:none}
|
||||
|
||||
/* province tooltip region highlight */
|
||||
.prov-banner{position:absolute;left:50%;top:54px;transform:translateX(-50%);z-index:24;text-align:center;pointer-events:none;opacity:0;transition:opacity .4s}
|
||||
.prov-banner.show{opacity:1}
|
||||
.prov-banner h3{font-family:var(--brush);font-size:26px;color:#f2e3bd;text-shadow:0 2px 6px #000;letter-spacing:.1em}
|
||||
.prov-banner p{font-size:12px;color:#cab98f;text-shadow:0 1px 3px #000}
|
||||
|
||||
/* event modal */
|
||||
.modal{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(5,3,2,.62);backdrop-filter:blur(2px)}
|
||||
.event-card{width:min(560px,92vw);background:linear-gradient(180deg,#221709 0%,#170f07 100%);
|
||||
border:1px solid var(--bronze);border-radius:8px;padding:26px 30px;box-shadow:0 30px 90px rgba(0,0,0,.8), inset 0 0 60px rgba(0,0,0,.45);
|
||||
animation:eventIn .35s ease-out}
|
||||
@keyframes eventIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
|
||||
.event-kind{font-family:var(--disp);font-size:11px;letter-spacing:.3em;color:var(--seal);margin-bottom:8px}
|
||||
.event-card h2{font-family:var(--disp);font-size:21px;color:var(--gold);letter-spacing:.05em;margin-bottom:12px;line-height:1.35}
|
||||
.event-art{font-size:44px;text-align:center;margin:6px 0 12px;filter:drop-shadow(0 4px 12px rgba(216,178,95,.25))}
|
||||
.event-card p{color:#d9c89f;line-height:1.8;font-size:13.5px;margin-bottom:18px;white-space:pre-line}
|
||||
.event-choice{display:block;width:100%;text-align:left;font-family:var(--serif);font-size:13.5px;color:var(--parch);
|
||||
background:#1e150b;border:1px solid #4a3a20;border-left:3px solid var(--bronze);border-radius:4px;padding:11px 15px;margin-bottom:9px;cursor:pointer;transition:.15s;line-height:1.5}
|
||||
.event-choice:hover{border-color:var(--bronze2);border-left-color:var(--seal);background:#2a1d0e;transform:translateX(3px)}
|
||||
.event-choice .ec-hint{display:block;font-size:11px;color:#97835b;margin-top:3px}
|
||||
|
||||
/* toasts */
|
||||
#toasts{position:absolute;right:14px;top:110px;z-index:45;display:flex;flex-direction:column;gap:8px;pointer-events:none}
|
||||
.toast{background:rgba(20,14,8,.94);border:1px solid var(--panel-line);border-left:3px solid var(--gold);color:#e5d5ac;
|
||||
padding:9px 14px;border-radius:4px;font-size:12.5px;max-width:320px;animation:toastIn .3s ease-out;box-shadow:0 8px 24px rgba(0,0,0,.5);line-height:1.5}
|
||||
.toast.bad{border-left-color:#c05040}.toast.good{border-left-color:#6fa06a}.toast.epic{border-left-color:#d8b25f;box-shadow:0 0 24px rgba(216,178,95,.3)}
|
||||
@keyframes toastIn{from{opacity:0;transform:translateX(24px)}to{opacity:1}}
|
||||
|
||||
/* turn banner */
|
||||
#turn-banner{position:absolute;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;pointer-events:none}
|
||||
#turn-banner-text{font-family:var(--brush);font-size:64px;color:#f2e3bd;text-shadow:0 4px 24px rgba(0,0,0,.9),0 0 60px rgba(216,178,95,.4);
|
||||
animation:turnFade 1.5s ease forwards;letter-spacing:.12em;text-align:center}
|
||||
@keyframes turnFade{0%{opacity:0;transform:scale(1.12)}18%{opacity:1;transform:scale(1)}75%{opacity:1}100%{opacity:0}}
|
||||
|
||||
/* vignette + grain */
|
||||
#vignette{position:absolute;inset:0;pointer-events:none;z-index:20;
|
||||
background:radial-gradient(ellipse at center, transparent 55%, rgba(8,5,2,.55) 100%)}
|
||||
|
||||
/* battle overlay */
|
||||
#battle-overlay{position:absolute;inset:0;z-index:58;background:#000}
|
||||
#battle-gl{position:absolute;inset:0;width:100%;height:100%}
|
||||
#battle-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:12px 18px;gap:20px;
|
||||
background:linear-gradient(180deg,rgba(10,6,3,.9),transparent)}
|
||||
.bh-side{flex:1;max-width:330px}
|
||||
.bh-right{text-align:right}
|
||||
.bh-name{font-family:var(--disp);font-size:15px;color:#f2e3bd;letter-spacing:.06em;margin-bottom:5px}
|
||||
.bh-bar{height:9px;background:rgba(0,0,0,.6);border:1px solid #5a4527;border-radius:5px;overflow:hidden}
|
||||
.bh-bar div{height:100%;border-radius:4px;transition:width .5s}
|
||||
#bh-att-morale{background:linear-gradient(90deg,#7ca050,#a8c878)}
|
||||
#bh-def-morale{background:linear-gradient(90deg,#c07850,#e0a878);float:right}
|
||||
.bh-troops{font-size:12px;color:#cab98f;margin-top:4px}
|
||||
.bh-center{text-align:center}
|
||||
#bh-round{font-family:var(--disp);font-size:19px;color:var(--gold);letter-spacing:.14em}
|
||||
#bh-terrain{font-size:12px;color:#a5946f;margin-top:3px;letter-spacing:.1em;text-transform:uppercase}
|
||||
#battle-callout{position:absolute;left:0;right:0;bottom:22%;text-align:center;pointer-events:none}
|
||||
.callout{display:inline-block;font-family:var(--brush);font-size:42px;color:#ffe9bd;text-shadow:0 3px 18px rgba(0,0,0,.95),0 0 40px rgba(216,178,95,.45);
|
||||
animation:calloutIn 2.2s ease forwards}
|
||||
@keyframes calloutIn{0%{opacity:0;transform:scale(1.4)}14%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0}}
|
||||
#battle-speed{position:absolute;right:14px;bottom:14px;width:42px;height:42px;font-size:16px}
|
||||
#battle-result{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(8,5,2,.72)}
|
||||
.br-card{width:min(520px,92vw);background:linear-gradient(180deg,#221709,#170f07);border:1px solid var(--bronze);border-radius:8px;padding:26px 30px;animation:eventIn .4s ease-out}
|
||||
.br-card h2{font-family:var(--disp);font-size:24px;letter-spacing:.1em;margin-bottom:14px;text-align:center}
|
||||
.br-victory{color:#a8d078;text-shadow:0 0 24px rgba(140,200,110,.4)}
|
||||
.br-defeat{color:#e07a5a;text-shadow:0 0 24px rgba(220,110,80,.4)}
|
||||
.br-lines{font-size:13px;line-height:1.9;color:#d9c89f;margin-bottom:16px}
|
||||
.prisoner-actions{display:flex;flex-direction:column;gap:8px;margin:10px 0}
|
||||
|
||||
/* end screen */
|
||||
#end-screen{background:radial-gradient(1000px 600px at 50% 20%, rgba(216,178,95,.1), transparent 60%),linear-gradient(180deg,#151009,#0b0704)}
|
||||
.dynasty-name{text-align:center;font-family:var(--brush);font-size:44px;color:var(--seal);margin:6px 0 18px;text-shadow:0 0 30px rgba(160,44,32,.4)}
|
||||
#end-chronicle{font-family:var(--serif);font-size:13.5px;line-height:2.05;color:#d9c89f;white-space:pre-wrap;margin-bottom:18px}
|
||||
#end-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:8px}
|
||||
.es-item{background:#191108;border:1px solid #3a2c18;border-radius:5px;padding:10px 12px;text-align:center}
|
||||
.es-item b{display:block;font-size:20px;color:var(--gold)}
|
||||
.es-item span{font-size:11px;color:#97835b;letter-spacing:.08em}
|
||||
|
||||
/* help */
|
||||
.help-cols{columns:2;column-gap:30px;font-size:12.5px;color:#cdbb93;line-height:1.7}
|
||||
.help-cols h4{color:var(--gold);margin:10px 0 4px;break-after:avoid}
|
||||
kbd{background:#2a1d0e;border:1px solid #4a3a20;border-radius:3px;padding:1px 6px;font-size:11px;font-family:monospace}
|
||||
|
||||
@media (max-width:900px){
|
||||
.setup-columns{grid-template-columns:1fr}
|
||||
.help-cols{columns:1}
|
||||
.game-title{font-size:42px}
|
||||
#side-panel{width:60vw}
|
||||
}
|
||||
Reference in New Issue
Block a user