1585 lines
145 KiB
React
1585 lines
145 KiB
React
// src/pages/Rules.jsx
|
||
|
||
import { useState, useEffect } from 'react';
|
||
import Navbar from '../components/Navbar';
|
||
import { SectionContainer, SectionHeader, InfoBox, SectionDivider } from '../components/EffectComponents';
|
||
import {
|
||
RuleHeader, DescBox, Quote, FancierListItem, StepIcon, MilitaryChild,
|
||
ScienceTable, FlexRow, NavalTrack, FilledInfoBox
|
||
} from '../components/RulesComponents';
|
||
|
||
export default function Rules() {
|
||
const [showTopBtn, setShowTopBtn] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const handleScroll = () => {
|
||
setShowTopBtn(window.scrollY > 300);
|
||
};
|
||
window.addEventListener('scroll', handleScroll);
|
||
return () => window.removeEventListener('scroll', handleScroll);
|
||
}, []);
|
||
|
||
const scrollToTop = () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
};
|
||
|
||
return (
|
||
<div className="flex flex-col items-center flex-1 w-full pb-8 relative overflow-anchor-none">
|
||
<Navbar />
|
||
|
||
{/* Background Video */}
|
||
<video
|
||
id="background"
|
||
className="fixed top-0 left-0 min-w-full min-h-full object-cover -z-10 blur-md scale-105"
|
||
autoPlay
|
||
loop
|
||
muted={true}
|
||
playsInline
|
||
>
|
||
<source src="/assets/common/7-Wonders-video-header.mp4" type="video/mp4" />
|
||
</video>
|
||
|
||
{/* Title */}
|
||
<div className="h-125 shrink-0 flex items-center justify-center">
|
||
<h1 className="text-[min(70px,30vw)] text-center uppercase font-condensed font-black text-sev-gold drop-shadow-[0_5px_5px_rgba(43,43,43,0.6)] m-0">
|
||
Rules
|
||
</h1>
|
||
</div>
|
||
|
||
<div className="w-full flex flex-col items-center px-[min(10px,2vw)] z-10">
|
||
|
||
{/* --- BASE GAME --- */}
|
||
<SectionContainer id="7-wonders">
|
||
<SectionHeader logoSrc="/assets/logos/SEV_logo.svg" title="Rules" />
|
||
<Quote text="All good things of this earth flow into the city." author="Pericles" />
|
||
|
||
<div className="pt-50 px-2.5 pb-2.5 font-semibold bg-center bg-cover flex flex-col items-center" style={{ backgroundImage: 'url(/assets/banners/banner.png)' }}>
|
||
<hr className="bg-white border-none h-0.5 w-full" />
|
||
<p className="text-center text-white font-condensed font-normal italic text-lg my-1">You are a leader of one of the seven greatest cities in Antiquity.</p>
|
||
<p className="text-center text-white font-condensed font-normal italic text-lg my-1">Develop your city by increasing your scientific discoveries, military conquests, commercial agreements, and prestigious structures to lead your civilization to glory!</p>
|
||
<p className="text-center text-white font-condensed font-normal italic text-lg my-1">All the while, keep an eye on your neighbors’ progress since they share similar ambitions.</p>
|
||
<p className="text-center text-white font-condensed font-normal italic text-lg my-1">Will your wonder transcend the millennia to come?</p>
|
||
<hr className="bg-white border-none h-0.5 w-full" />
|
||
</div>
|
||
|
||
<RuleHeader title="OVERVIEW OF THE GAME" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">A game plays over 3 rounds, called Ages, during which you simultaneously play cards one by one to develop your City.</p>
|
||
<p className="text-center mb-4">These cards represent the different Buildings you can construct: resource production, civil, commercial, military, scientific, and guild Buildings.</p>
|
||
<hr className="bg-sev-brown border-none h-px w-full my-2" />
|
||
<p className="text-center mt-4">At the end of each Age, head to war with your two neighbors. At the close of 3 Ages, count your total victory points provided by your City, Wonder, military prowess, and Treasure. The player with the highest score wins the game.</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="CONTENTS" />
|
||
<DescBox className="items-center">
|
||
<ul className="list-disc pl-4.5 w-fit">
|
||
<li>7 Wonder boards</li>
|
||
<li>148 Age cards: 49 Age I cards, 49 Age II cards, and 50 Age III cards</li>
|
||
<li>78 Coins: 54 Coins worth 1 and 24 Coins worth 3</li>
|
||
<li>48 Military Conflict tokens: 24 Defeats and 24 Victories (8 per Age)</li>
|
||
<li>1 score pad</li>
|
||
<li>3 Description of Effects sheets</li>
|
||
<li>1 List of cards and chains sheet</li>
|
||
<li>The rulebook</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="ELEMENTS OF THE GAME" />
|
||
<DescBox>
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">AGE CARDS</h4>
|
||
<p className="mb-2">Age cards represent Buildings you can construct during the game. The back of each card indicates to which Age the card belongs (Age I, Age II, and Age III).</p>
|
||
<hr className="bg-sev-brown border-none h-px w-full my-2" />
|
||
<p className="mb-2">There are seven different types of cards:</p>
|
||
<ul className="list-disc pl-5 space-y-2 marker:font-bold">
|
||
<li><p><strong><span className="text-[#9e5138]">Brown</span> cards</strong> (Basic Materials) provide <strong>common resources</strong>:<br />Clay <img src="/assets/sev_effects/SEV_01.1.png" className="inline h-6 align-middle pb-0.5" alt="" />, Stone <img src="/assets/sev_effects/SEV_01.2.png" className="inline h-6 align-middle pb-0.5" alt="" />, Ore <img src="/assets/sev_effects/SEV_01.3.png" className="inline h-6 align-middle pb-0.5" alt="" />, and Wood <img src="/assets/sev_effects/SEV_01.4.png" className="inline h-6 align-middle pb-0.5" alt="" />.</p></li>
|
||
<li><p><strong><span className="text-[#818281]">Grey</span> cards</strong> (Manufactured Products) provide <strong>rare resources</strong>:<br />Glass <img src="/assets/sev_effects/SEV_01.5.png" className="inline h-6 align-middle pb-0.5" alt="" />, Cloth <img src="/assets/sev_effects/SEV_01.6.png" className="inline h-6 align-middle pb-0.5" alt="" />, and Papyrus <img src="/assets/sev_effects/SEV_01.7.png" className="inline h-6 align-middle pb-0.5" alt="" />.</p></li>
|
||
<li><strong><span className="text-[#0099d6]">Blue</span> cards</strong> (Civil Buildings) provide <strong>victory points</strong> <img src="/assets/sev_rules/victory_point.png" className="inline h-6 align-middle pb-0.5" alt="" />.</li>
|
||
<li><strong><span className="text-[#ee7307]">Yellow</span> cards</strong> (Commercial Buildings) provide <strong>commercial advantages</strong>.</li>
|
||
<li><strong><span className="text-[#c00306]">Red</span> cards</strong> (Military Buildings) increase your <strong>military strength</strong> <img src="/assets/sev_effects/SEV_04.png" className="inline h-6 align-middle pb-0.5" alt="" />.</li>
|
||
<li><strong><span className="text-[#007f37]">Green</span> cards</strong> (Science Buildings) provide <strong>scientific advancements</strong> in three domains: <img src="/assets/sev_effects/SEV_05.1.png" className="inline h-6 align-middle pb-0.5" alt="" />, <img src="/assets/sev_effects/SEV_05.2.png" className="inline h-6 align-middle pb-0.5" alt="" />, and <img src="/assets/sev_effects/SEV_05.3.png" className="inline h-6 align-middle pb-0.5" alt="" />.</li>
|
||
<li><strong><span className="text-[#894c86]">Purple</span> cards</strong> (Guilds) provide <strong>victory points</strong> <img src="/assets/sev_rules/victory_point.png" className="inline h-6 align-middle pb-0.5" alt="" /> according to certain conditions.</li>
|
||
</ul>
|
||
<hr className="bg-sev-brown border-none h-px w-full my-4" />
|
||
<p className="mb-4">On the front of each Age card is a cost zone, an effect, a name, a colorblind friendly symbol, possibly one or two chain symbols, and a minimum number of players required. On the back is the number of the Age and the direction for passing.</p>
|
||
<img src="/assets/sev_rules/age_cards.png" alt="" className="self-center max-h-100 max-w-[min(90vw,700px)] my-5" loading="lazy" />
|
||
|
||
<InfoBox>
|
||
<div className="flex flex-col sm:flex-row items-center pt-2.5">
|
||
<img src="/assets/sev_rules/colorblind/eye.svg" alt="" className="h-20 mr-2.5" loading="lazy" />
|
||
<div className="text-center sm:text-left">
|
||
<h4 className="text-[min(25px,9vw)] m-0 font-condensed font-bold">COLORBLIND FRIENDLY SYMBOLS</h4>
|
||
<p>To accommodate every type of colorblindness, each card color used in the game has a corresponding symbol.</p>
|
||
</div>
|
||
</div>
|
||
<hr className="bg-sev-brown border-none h-px w-full my-4" />
|
||
<div className="flex flex-wrap justify-center gap-x-8.75 gap-y-1.5">
|
||
{[
|
||
{ c: 'Brown', img: 'brown' }, { c: 'Grey', img: 'grey' }, { c: 'Blue', img: 'blue' },
|
||
{ c: 'Yellow', img: 'yellow' }, { c: 'Red', img: 'red' }, { c: 'Green', img: 'green' }, { c: 'Purple', img: 'purple' }
|
||
].map(item => (
|
||
<div key={item.c} className="flex flex-col items-center p-1.5 font-condensed font-bold">
|
||
<img src={`/assets/sev_rules/colorblind/${item.img}.svg`} alt="" className="h-7 mb-1" loading="lazy" />
|
||
{item.c}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</InfoBox>
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-8">WONDER BOARD</h4>
|
||
<p className="mb-4">Each board represents a Wonder you can construct during the game. Wonders have a Day side <img src="/assets/sev_rules/day.svg" className="inline h-6 align-middle" alt="" /> and a Night side <img src="/assets/sev_rules/night.svg" className="inline h-6 align-middle" alt="" /> showing two, three, or four different construction stages. Each construction stage has a cost and an effect. Your Wonder board will also provide you with a starting resource.</p>
|
||
<img src="/assets/sev_rules/wonder_board.png" alt="" className="self-center max-h-100 max-w-[min(90vw,700px)] my-5 drop-shadow-md" loading="lazy" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-8">MILITARY CONFLICT TOKENS</h4>
|
||
<p className="mb-2">Military Conflict tokens represent your Military Victories and Defeats.</p>
|
||
<hr className="bg-sev-brown border-none h-px w-full my-2" />
|
||
<p className="mb-4">There are four types of Military Conflict tokens:</p>
|
||
|
||
<div className="flex flex-wrap items-center gap-x-[100px] gap-y-2.5 my-4 ml-4">
|
||
<ul className="list-disc marker:font-bold">
|
||
<li>Military Defeat -1 tokens</li>
|
||
<li>Military Defeat +1 tokens</li>
|
||
<li>Military Defeat +3 tokens</li>
|
||
<li>Military Defeat +5 tokens</li>
|
||
</ul>
|
||
<div className="flex gap-2">
|
||
<img src="/assets/sev_rules/military_-1.png" alt="" className="max-h-[140px] max-w-[21vw]" loading="lazy" />
|
||
<img src="/assets/sev_rules/military_1.png" alt="" className="max-h-[140px] max-w-[21vw]" loading="lazy" />
|
||
<img src="/assets/sev_rules/military_3.png" alt="" className="max-h-[140px] max-w-[21vw]" loading="lazy" />
|
||
<img src="/assets/sev_rules/military_5.png" alt="" className="max-h-[140px] max-w-[21vw]" loading="lazy" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex flex-wrap items-end justify-between gap-x-[100px] gap-y-2.5 mt-8">
|
||
<div>
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline m-0">COINS</h4>
|
||
<p>Coins represent your Treasure. They are worth 1 or 3.</p>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<img src="/assets/sev_rules/coin_1.png" alt="" className="max-h-[95px] max-w-[50vw] drop-shadow-md" loading="lazy" />
|
||
<img src="/assets/sev_rules/coin_3.png" alt="" className="max-h-[95px] max-w-[50vw] drop-shadow-md" loading="lazy" />
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-[#005f7d] italic mt-4"><strong className="underline">Note:</strong> In these rules, when you see “x Coins,” the “x” corresponds to the total value of your Coins. In other words, “Take x Coins” means you take Coins worth a total of x.</p>
|
||
|
||
</DescBox>
|
||
|
||
<RuleHeader title="SETUP" />
|
||
<DescBox>
|
||
<ol className="list-none counter-reset-[mycounter] p-0 m-0">
|
||
<FancierListItem>
|
||
<p className="mb-2">Prepare the <strong>Age cards</strong>:</p>
|
||
<ul className="list-disc pl-5 space-y-2 marker:font-bold">
|
||
<li>Separate the Age cards into three decks: Age I, Age II, and Age III.</li>
|
||
<li>
|
||
Keep only the cards with a number <strong>less than or equal to</strong> the number of players. Put the rest back in the box.
|
||
<p className="text-sev-brown italic mt-1"><strong className="underline">Example:</strong> In a 5-player game, keep all cards with 3+, 4+, and 5+.</p>
|
||
</li>
|
||
<li>
|
||
In the Age III deck, randomly draw as many <strong className="text-[#894c86]">Purple</strong> cards as the <strong>number of players +2</strong>. Put the rest in the box.
|
||
<p className="text-sev-brown italic mt-1"><strong className="underline">Example:</strong> In a 5-player game, draw 7 Purple cards.</p>
|
||
</li>
|
||
<li>Shuffle each deck and put them face down in the middle of the table.</li>
|
||
</ul>
|
||
</FancierListItem>
|
||
<FancierListItem>
|
||
Each player randomly takes <strong>a Wonder Board</strong> and places it in front of themself, picking their preferred side (<img src="/assets/sev_rules/day.svg" className="inline h-6 align-middle" alt="" /> Day or <img src="/assets/sev_rules/night.svg" className="inline h-6 align-middle" alt="" /> Night).
|
||
<p className="text-[#005f7d] italic mt-2"><strong className="underline">Note:</strong> For your first few games, we recommend using the Day side.</p>
|
||
</FancierListItem>
|
||
<FancierListItem>
|
||
Take <strong>3 Coins</strong> (worth 1) and place them on your Wonder board. The rest form the <strong>Coin reserve</strong>.
|
||
</FancierListItem>
|
||
<FancierListItem>
|
||
Place all of the Military Conflict tokens in the middle of the table to make the <strong>reserve</strong>.
|
||
</FancierListItem>
|
||
</ol>
|
||
<img src="/assets/sev_rules/setup.png" alt="" className="self-center max-w-[min(95vw,100%)] my-5 drop-shadow-lg" loading="lazy" />
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAMEPLAY" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">A game plays over <strong>three successive rounds</strong>: Age I, Age II, then Age III. Each round plays in a similar fashion. Victory points are scored at the end of Age III.</p>
|
||
|
||
<div className="bg-[#f0ebe5] p-[15px] my-2.5 mx-1.5 flex flex-col self-center border-sev-brown w-full max-w-[800px]">
|
||
<p className="text-center font-bold text-xl mb-2">Definitions:</p>
|
||
<p className="text-center mb-1"><strong>Neighbors:</strong> The player directly on your left <strong className="underline">and</strong> the player directly on your right.</p>
|
||
<p className="text-center"><strong>City:</strong> Your developments, which includes your Wonder and constructed cards.</p>
|
||
</div>
|
||
|
||
<InfoBox>
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4">OVERVIEW OF AN AGE</h4>
|
||
<p className="text-center mb-2">At the start of each Age, take the corresponding deck of cards and randomly deal <strong>7 cards</strong> to each player face down.</p>
|
||
<p className="text-center mb-4">These cards will make up your <strong>starting hand</strong>.</p>
|
||
<p className="text-center mb-4">Each Age has <strong>6 turns</strong> during which you all play <strong>simultaneously</strong>. A turn is comprised of three stages:</p>
|
||
<p className="text-center font-bold text-xl">1. Choose a card</p>
|
||
<p className="text-center font-bold text-xl">2. Play this card</p>
|
||
<p className="text-center font-bold text-xl">3. Pass your hand</p>
|
||
</InfoBox>
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mt-6 mb-2">1. CHOOSE A CARD</h4>
|
||
<p>From your hand, choose 1 card and place it face down in front of you. Set the remaining cards aside face down.</p>
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mt-6 mb-2">2. PLAY THIS CARD</h4>
|
||
<p className="mb-2">When <strong>everyone</strong> has chosen a card, play them <strong>simultaneously</strong>. You can use it to complete <strong>one</strong> action:</p>
|
||
<ol className="list-[upper-alpha] text-sev-brown text-xl font-bold ml-8 mb-4 marker:font-bold space-y-1">
|
||
<li>Construct the Building on your card</li>
|
||
<li>Construct a stage of your Wonder</li>
|
||
<li>Sell the card</li>
|
||
</ol>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-6 mb-1">A. Construct the Building</h5>
|
||
<p>Pay any listed costs and place it face up above your Wonder board. The Building remains in your City until the end of the game.</p>
|
||
<p className="text-[#e3000b] italic mt-2"><strong className="underline">Important:</strong> You can never construct two identical Buildings.</p>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-6 mb-1">B. Construct a stage of your Wonder</h5>
|
||
<p>Pay <strong className="underline">only</strong> the cost shown on your <strong>Wonder board</strong>. Put your card face down under your board so half is covered by the stage. Construct stages from left to right. This is optional.</p>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-6 mb-1">C. Sell the card</h5>
|
||
<p>Discard your card face down into the discard pile and take <strong>3 Coins</strong> from the reserve.</p>
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mt-8 mb-2">3. PASS YOUR HAND</h4>
|
||
<p>Give your remaining hand to the neighbor on your left (Ages I and III) or right (Age II).</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="RESOLUTION OF MILITARY CONFLICTS" />
|
||
<DescBox>
|
||
<p className="mb-2"><strong>Each Age ends with the Resolution of Military Conflicts.</strong></p>
|
||
<p className="mb-4">Count all military symbols <img src="/assets/sev_effects/SEV_04.png" className="inline h-6 align-middle pb-0.5" alt="" /> to determine your<strong> military strength</strong>. Compare it with each neighbor:</p>
|
||
<ul className="list-disc pl-5 marker:font-bold space-y-1">
|
||
<li><strong>Equal:</strong> No token.</li>
|
||
<li><strong>Lower:</strong> Take a Military Defeat token (-1).</li>
|
||
<li><strong>Higher:</strong> Take the Victory token for the current Age (+1, +3, or +5).</li>
|
||
</ul>
|
||
|
||
<div className="flex flex-wrap items-end justify-evenly my-6 w-full max-w-[800px] mx-auto">
|
||
{[{ img: 'military_-1', text: 'Defeat' }, { img: 'military_1', text: 'Age I' }, { img: 'military_3', text: 'Age II' }, { img: 'military_5', text: 'Age III' }].map(item => (
|
||
<div key={item.text} className="flex flex-col items-center">
|
||
<img src={`/assets/sev_rules/${item.img}.png`} alt="" className="max-h-[120px] max-w-[21vw] drop-shadow-md" loading="lazy" />
|
||
<p className="italic mt-2">{item.text}</p>
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
<div className="flex justify-evenly my-[30px] gap-x-1.5 gap-y-[50px] flex-wrap w-full">
|
||
<MilitaryChild title="Neighbor on your left" img="/assets/sev_rules/military_conflict_1.png" strength="Military strength = 5" isEven={false} />
|
||
<MilitaryChild title="Your City in Age II" img="/assets/sev_rules/military_conflict_2.png" strength="Military strength = 4" isEven={true}>
|
||
<div className="flex flex-col items-center w-1/2">
|
||
<img src="/assets/sev_rules/military_-1.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic">Defeat</p>
|
||
</div>
|
||
<div className="flex flex-col items-center w-1/2">
|
||
<img src="/assets/sev_rules/military_3.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic">Victory</p>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Neighbor on your right" img="/assets/sev_rules/military_conflict_3.png" strength="Military strength = 2" isEven={false} />
|
||
</div>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="CONSTRUCTING IN 7 WONDERS" />
|
||
<DescBox>
|
||
<p className="mb-4">To construct, you must pay the construction cost shown on the card or Wonder stage.</p>
|
||
<ol className="list-[upper-alpha] text-sev-dark font-bold text-xl ml-8 space-y-1 marker:font-bold">
|
||
<li>No cost</li>
|
||
<li>Coin cost</li>
|
||
<li>Resource cost</li>
|
||
<li>Free cost through chains</li>
|
||
</ol>
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mt-6 mb-2">C. RESOURCE COST</h4>
|
||
<p className="mb-2">You can use resources produced by your City <strong>and/or</strong> buy resources from your neighbors.</p>
|
||
<p className="text-[#e3000b] italic font-bold mb-4"><strong className="underline">Important:</strong> Resources used for constructing are never lost and can be used on every turn of the entire game.</p>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-1">Buying resources from a neighboring City</h5>
|
||
<p className="mb-2">For each resource bought, give <strong>2 Coins</strong> to the owner. This player keeps their card and can still use the resource you just bought.</p>
|
||
<ul className="list-disc pl-5 italic text-[#005f7d] space-y-1">
|
||
<li>You cannot use Coins you receive from other players during the same turn to buy resources.</li>
|
||
<li>You can never prevent a player from buying your resources.</li>
|
||
<li>Both of your neighbors can buy the same resource from your City.</li>
|
||
</ul>
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mt-8 mb-2">D. FREE COST THROUGH CHAINS</h4>
|
||
<p>If you have previously constructed a card with the same symbol in the upper right corner, you can construct the new card <strong>for free</strong>.</p>
|
||
<img src="/assets/sev_rules/free_cost_chain.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] my-5 drop-shadow-md" loading="lazy" />
|
||
</DescBox>
|
||
|
||
<RuleHeader title="END OF THE GAME" />
|
||
<DescBox>
|
||
<p className="text-center mb-6">The game ends at the close of Age III. The player with the highest score wins the game.</p>
|
||
|
||
<h5 className="text-[min(24px,6vw)] font-condensed font-bold text-sev-dark mt-2 mb-1"><StepIcon num="1" />Wonder Board</h5>
|
||
<p className="mb-4">Add victory points from constructed stages of your Wonder.</p>
|
||
|
||
<h5 className="text-[min(24px,6vw)] font-condensed font-bold text-sev-dark mt-2 mb-1"><StepIcon num="2" />Treasure</h5>
|
||
<p className="mb-4">Earn 1 victory point for each <strong> complete set of 3 Coins</strong> in your Treasure.</p>
|
||
|
||
<h5 className="text-[min(24px,6vw)] font-condensed font-bold text-sev-dark mt-2 mb-1"><StepIcon num="3" />Military Conflicts</h5>
|
||
<p className="mb-4">Add the value of all your Military Defeat and Victory tokens.</p>
|
||
|
||
<h5 className="text-[min(24px,6vw)] font-condensed font-bold text-sev-dark mt-2 mb-1"><StepIcon num="4" /><span className="text-[#0099d6]">Blue</span> Cards</h5>
|
||
<p className="mb-4">Add victory points on <strong className="text-[#0099d6]">Blue</strong> cards in your City.</p>
|
||
|
||
<h5 className="text-[min(24px,6vw)] font-condensed font-bold text-sev-dark mt-2 mb-1"><StepIcon num="5" /><span className="text-[#ee7307]">Yellow</span> Cards</h5>
|
||
<p className="mb-4">Add any victory points on <strong className="text-[#ee7307]">Yellow</strong> cards.</p>
|
||
|
||
<h5 className="text-[min(24px,6vw)] font-condensed font-bold text-sev-dark mt-2 mb-1"><StepIcon num="6" /><span className="text-[#007f37]">Green</span> Cards</h5>
|
||
<p className="mb-2">These symbols provide victory points in two different ways which will be added together.</p>
|
||
<ul className="list-disc pl-5 marker:font-bold">
|
||
<li><strong>Identical symbols</strong>: Refer to the table below:</li>
|
||
</ul>
|
||
<ScienceTable limit={6} />
|
||
<ul className="list-disc pl-5 marker:font-bold mt-2 mb-4">
|
||
<li><strong>Sets of 3 different symbols</strong>: For each complete set of 3 different science symbols, gain <strong>7 victory points</strong>.</li>
|
||
</ul>
|
||
|
||
<h5 className="text-[min(24px,6vw)] font-condensed font-bold text-sev-dark mt-2 mb-1"><StepIcon num="7" /><span className="text-[#894c86]">Purple</span> Cards</h5>
|
||
<p className="mb-6">Add victory points on <strong className="text-[#894c86]">Purple</strong> cards in your City.</p>
|
||
|
||
<img src="/assets/sev_rules/end_of_game.png" alt="" className="self-center max-w-[min(95vw,100%)] my-5 drop-shadow-md" loading="lazy" />
|
||
</DescBox>
|
||
|
||
<SectionDivider />
|
||
</SectionContainer>
|
||
|
||
|
||
{/* --- ARMADA EXPANSION --- */}
|
||
<SectionContainer id="armada">
|
||
<SectionHeader logoSrc="/assets/logos/7AR_logo.svg" title="Rules" />
|
||
<Quote text="There are three sorts of people: those who are alive, those who are dead, and those who are at sea." author="Aristotle" />
|
||
|
||
<div className="h-[400px] bg-top bg-cover" style={{ backgroundImage: 'url(/assets/banners/armada.png)' }} />
|
||
|
||
<RuleHeader title="OVERVIEW" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">This expansion to <i className="italic">7 Wonders</i> lets you head out to conquer the sea with new individual boards: <strong>Shipyards</strong>.</p>
|
||
|
||
<p className="text-center mb-4">24 new Age cards and 27 new Island cards enhance the game and increase player interaction.</p>
|
||
|
||
<p className="text-center mb-4">The <i className="italic">Armada</i> expansion brings new rules to the <i className="italic">7 Wonders</i> base game, but the victory conditions remain the same.</p>
|
||
|
||
<p className="text-center mb-4">This expansion also offers a variant for playing in teams (4 or 6 players).</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="CONTENTS" />
|
||
<DescBox className="items-center">
|
||
<ul className="list-disc pl-[18px] w-fit marker:font-bold">
|
||
<li>1 Wonder board (Siracusa)</li>
|
||
<li>7 Shipyard boards</li>
|
||
<li>28 Fleet figures (7 x 4 colors)</li>
|
||
<li>40 Naval Conflict tokens:
|
||
<ul className="list-[circle] pl-5 mt-1">
|
||
<li>22 Naval Victory tokens</li>
|
||
<li>18 Naval Defeat tokens</li>
|
||
</ul>
|
||
</li>
|
||
<li>8 Military Conflict tokens:
|
||
<ul className="list-[circle] pl-5 mt-1">
|
||
<li>4 Military Victory tokens</li>
|
||
<li>4 Military Defeat tokens</li>
|
||
</ul>
|
||
</li>
|
||
<li>2 Boarding tokens</li>
|
||
<li>6 Coins worth 6</li>
|
||
<li>24 Armada cards (8 per Age)</li>
|
||
<li>27 Island cards (9 per level)</li>
|
||
<li>1 score pad</li>
|
||
<li>3 Description of New Effects sheets</li>
|
||
<li>The rulebook</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAME ELEMENTS" />
|
||
<DescBox>
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">WONDER BOARDS</h4>
|
||
<p className="mb-4"><strong>Siracusa</strong> is only used if playing with this expansion.</p>
|
||
<img src="/assets/armada_rules/siracusa.jpg" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] my-5 drop-shadow-md rounded" loading="lazy" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">SHIPYARD BOARDS</h4>
|
||
<p className="mb-4">Shipyard boards represent the progress of your Fleets during the game. Shipyards have 4 naval tracks (<strong className="text-[#c00306]">Red</strong>, <strong className="text-[#ee7307]">Yellow</strong>, <strong className="text-[#0099d6]">Blue</strong>, and <strong className="text-[#007f37]">Green</strong>) each divided into 7 spaces, most of which provide an effect. Each Shipyard board has a Wonder symbol <img src="/assets/armada_rules/wonder_stage.png" className="inline h-6 align-middle pb-0.5" alt="" /> on one of the naval tracks. Its position is different on each board.</p>
|
||
<img src="/assets/armada_rules/shipyard.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] my-5 drop-shadow-md" loading="lazy" />
|
||
<p className="text-[#005f7d] italic mb-4"><strong className="underline">Note:</strong> The effects of spaces are identical on each Shipyard board. Only the construction costs and placement of the Wonder symbol are different between boards.</p>
|
||
|
||
|
||
|
||
<FlexRow>
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">FLEET FIGURES</h4>
|
||
<p>Figures track the progress of your Fleets (<strong className="text-[#c00306]">Red</strong>, <strong className="text-[#ee7307]">Yellow</strong>, <strong className="text-[#0099d6]">Blue</strong>, and <strong className="text-[#007f37]">Green</strong>) on your Shipyard board.</p>
|
||
</div>
|
||
<div className="flex flex-row flex-wrap gap-2.5 items-baseline justify-center shrink-0">
|
||
<img src="/assets/armada_rules/ship_red.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/ship_yellow.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/ship_blue.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/ship_green.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
</div>
|
||
</FlexRow>
|
||
|
||
|
||
|
||
<FlexRow className="items-start">
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">ARMADA AGE CARDS</h4>
|
||
<p className="mb-4">Age cards in this expansion represent new Buildings with never before seen effects. They are added to the Age cards from the base game.</p>
|
||
|
||
<p className="text-[#005f7d] italic mt-2"><strong className="underline">Note:</strong> To help with sorting, Age cards from the Armada expansion all have this symbol <img src="/assets/armada_rules/armada.svg" className="inline w-[15px] h-[20px] align-middle" alt="" /> in the bottom-left corner.</p>
|
||
</div>
|
||
<div className="flex justify-center shrink-0">
|
||
<img src="/assets/armada_rules/age_cards.png" alt="" className="max-h-[200px] max-w-[50vw] drop-shadow-md" loading="lazy" />
|
||
</div>
|
||
</FlexRow>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">ISLAND CARDS</h4>
|
||
<p className="mb-2">Island cards are a new category of cards. They are not added to the Age cards and have a different back.</p>
|
||
<p className="mb-4">They are divided into 3 levels and each offer a unique effect.</p>
|
||
|
||
<div className="flex flex-row flex-wrap gap-2.5 items-end justify-center mb-6">
|
||
<div className="flex flex-col">
|
||
<p className="pl-[min(40px,5vw)] italic text-sev-brown text-[min(18px,5vw)]">Front</p>
|
||
<img src="/assets/armada_rules/card_front.png" alt="" className="h-[12vw] min-h-[80px] w-auto max-w-none rounded drop-shadow-md" loading="lazy" />
|
||
<p className="pl-[min(40px,5vw)] italic text-sev-brown text-[min(18px,5vw)]">Island</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/Islands_I.jpg" alt="" className="h-[12vw] min-h-[80px] w-auto max-w-none rounded drop-shadow-md" loading="lazy" />
|
||
<p className="italic text-sev-brown text-[min(18px,5vw)]">Level 1</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<p className="italic text-sev-brown text-[min(18px,5vw)]">Back</p>
|
||
<img src="/assets/armada_rules/Islands_II.jpg" alt="" className="h-[12vw] min-h-[80px] w-auto max-w-none rounded drop-shadow-md" loading="lazy" />
|
||
<p className="italic text-sev-brown text-[min(18px,5vw)]">Level 2</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/Islands_III.jpg" alt="" className="h-[12vw] min-h-[80px] w-auto max-w-none rounded drop-shadow-md" loading="lazy" />
|
||
<p className="italic text-sev-brown text-[min(18px,5vw)]">Level 3</p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<FlexRow>
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">NAVAL CONFLICT TOKENS</h4>
|
||
<p className="mb-2">Naval Conflict tokens represent Naval Victories and Defeats.</p>
|
||
<p className="mb-2">There are 2 types of Naval Conflict tokens:</p>
|
||
<ul className="list-disc pl-5 marker:font-bold">
|
||
<li>Naval Defeat tokens (worth -1, -2, and -3).</li>
|
||
<li>Naval Victory tokens (worth 1, 3, 5, and 7).</li>
|
||
</ul>
|
||
</div>
|
||
<div className="flex flex-col gap-2.5 justify-center shrink-0">
|
||
<div className="flex flex-row gap-2.5 items-baseline justify-center">
|
||
<img src="/assets/armada_rules/naval_token_-1.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/naval_token_-2.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/naval_token_-3.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
</div>
|
||
<div className="flex flex-row gap-2.5 items-baseline justify-center">
|
||
<img src="/assets/armada_rules/naval_token_1.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/naval_token_3.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/naval_token_5.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
<img src="/assets/armada_rules/naval_token_7.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
</div>
|
||
</div>
|
||
</FlexRow>
|
||
|
||
|
||
|
||
<FlexRow className="items-center">
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">BOARDING TOKENS</h4>
|
||
<p>Boarding tokens represent the new Boarding effect.</p>
|
||
</div>
|
||
<div className="flex justify-center shrink-0">
|
||
<img src="/assets/armada_rules/boarding.png" alt="" className="max-h-[80px] max-w-[21vw] drop-shadow-sm" loading="lazy" />
|
||
</div>
|
||
</FlexRow>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">SCORE PAD</h4>
|
||
<p className="mb-4">This score pad assists you in counting victory points gained through the <i className="italic">Leaders</i>, <i className="italic">Cities</i>, <i className="italic">Armada</i>, and <i className="italic">Edifice</i> expansions.</p>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">DESCRIPTION OF NEW EFFECTS SHEET</h4>
|
||
<p className="mb-4">These sheets provide a complete explanation of all the new symbols in the game.</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="SETUP" />
|
||
<DescBox>
|
||
<p className="mb-4">Setup follows the normal <i className="italic">7 Wonders</i> rules with the exception of the following adjustments:</p>
|
||
<ul className="list-disc pl-5 space-y-4 marker:font-bold">
|
||
<li>
|
||
Prepare the <strong>Age cards</strong>:
|
||
<ol className="list-decimal pl-5 space-y-2 mt-2 font-bold marker:font-bold">
|
||
<li><span className="font-normal">Separate the <strong>Age cards</strong> for this expansion into three decks (Age I, Age II, and Age III), then shuffle each deck.</span></li>
|
||
<p className="text-[#005f7d] italic font-normal"><strong className="underline">Note:</strong> For a 3-player game, remove the 5 Armada Age cards with the <strong><span className="text-black font-normal">4+</span></strong> symbol in the bottom-right corner.</p>
|
||
<li><span className="font-normal">For each Age, randomly take as many <strong>Armada cards</strong> as the <strong>number of players</strong>. The remaining cards are <strong>out of the game</strong>; they will not be used during the game.</span></li>
|
||
<li><span className="font-normal">Add the cards you kept to the corresponding decks of Age cards from the base game, then shuffle each deck.</span></li>
|
||
</ol>
|
||
</li>
|
||
<li>Separate the <strong>Island cards</strong> by level and shuffle each deck. Place them face down in the middle of the table.</li>
|
||
<li>Each player takes <strong>1 Shipyard board</strong> and places it vertically to the right of their Wonder board. Everyone also takes <strong>one Fleet figure in each color</strong> and places them on the starting space of the corresponding color on their Shipyard board.</li>
|
||
<li>Place the <strong>Naval Conflict</strong> and <strong>Boarding tokens</strong> in the middle of the table.</li>
|
||
<li><strong>Coins</strong> and extra <strong>Military Conflict</strong> tokens are added to their respective reserves from the base game.</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAMEPLAY" />
|
||
<DescBox>
|
||
<p className="mb-4">Gameplay follows the normal <i className="italic">7 Wonders</i> rules with the exception of five new rules:</p>
|
||
|
||
<ol className="list-[upper-alpha] text-sev-dark font-bold text-xl ml-8 space-y-1 marker:font-bold">
|
||
<li><strong>Extra Turn</strong></li>
|
||
<li><strong>Naval Construction</strong></li>
|
||
<li><strong>Resolution of Naval Conflicts</strong></li>
|
||
<li><strong>Boarding</strong></li>
|
||
<li><strong>Selling</strong></li>
|
||
</ol>
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">A. EXTRA TURN</h4>
|
||
<p className="mb-4">At the beginning of each Age, each player receives <strong>8 cards</strong> (instead of 7 as in the base game). During each Age, you will therefore play an extra turn.</p>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">B. NAVAL CONSTRUCTION</h4>
|
||
<p className="mb-4">Each time you construct a <strong className="text-[#c00306]">Red</strong>, <strong className="text-[#ee7307]">Yellow</strong>, <strong className="text-[#0099d6]">Blue</strong>, or <strong className="text-[#007f37]">Green</strong> Age card or a stage of your Wonder, you can, if you wish, undertake a <strong>Naval Construction</strong>.</p>
|
||
|
||
<p className="mb-2">Naval Construction allows you to upgrade your <strong>Fleets</strong>:</p>
|
||
<ul className="list-disc pl-5 marker:font-bold space-y-1 mb-6">
|
||
<li><strong className="text-[#c00306]">Red</strong> Fleet: Determines your naval strength during <strong>Naval Conflicts</strong>.</li>
|
||
<li><strong className="text-[#ee7307]">Yellow</strong> Fleet: Opens access to new <strong>commercial routes</strong>.</li>
|
||
<li><strong className="text-[#0099d6]">Blue</strong> Fleet: Grants extra <strong>victory points</strong>.</li>
|
||
<li><strong className="text-[#007f37]">Green</strong> Fleet: Allows you to explore <strong>undiscovered Islands</strong>.</li>
|
||
</ul>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-2">Age Card</h5>
|
||
<p className="mb-4">When you construct a <strong className="text-[#c00306]">Red</strong>, <strong className="text-[#ee7307]">Yellow</strong>, <strong className="text-[#0099d6]">Blue</strong>, or <strong className="text-[#007f37]">Green</strong> card, you can undertake a Naval Construction and upgrade <strong>the Fleet of the same color as the card</strong> you constructed.</p>
|
||
|
||
<p className="mb-4">To do this, you must <strong>pay, at the same time, the cost of the card </strong> <strong className="underline">and</strong> <strong>the cost of the Naval Construction</strong>. Then move the Fleet figure of this color forward one space on your Shipyard board.</p>
|
||
|
||
<p className="text-[#9e7d57] italic mb-4"><strong className="underline">Example:</strong> You construct a Blue card and can now undertake a Blue Naval Construction. The card costs 1 Stone and the Blue Naval Construction costs 1 Clay. You must therefore pay a total of 1 Stone <strong>and</strong> 1 Clay to complete both constructions.</p>
|
||
<img src="/assets/armada_rules/age_card_cost.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] my-4 drop-shadow-md" loading="lazy" />
|
||
<p className="text-[#e3000b] italic mb-4"><strong className="underline">Important:</strong> Constructing a Building (or a stage of a Wonder) and Naval Construction are <strong className="underline">always</strong> <strong>paid simultaneously</strong>. However, you <strong className="underline">always</strong> <strong>apply the effects of cards</strong> (or stages of a Wonder) <strong className="underline">before</strong> <strong>the effects of Naval Constructions</strong>.</p>
|
||
|
||
<p className="mb-4">When you construct a <strong className="text-[#c00306]">Red</strong>, <strong className="text-[#ee7307]">Yellow</strong>, <strong className="text-[#0099d6]">Blue</strong>, or <strong className="text-[#007f37]">Green</strong> card for free due to <strong>chains</strong> (or from Olympía), you can also undertake a Naval Construction by paying its cost following the previously described rules.</p>
|
||
|
||
<p className="text-[#e3000b] italic mb-6"><strong className="underline">Important:</strong> Cards built for free from the <strong> discard</strong> (Halikarnassós, Solomon…) <strong className="underline">never let you</strong> undertake a Naval Construction.</p>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-2">Wonder stage</h5>
|
||
<p className="mb-4">On each Shipyard board, there is a Wonder symbol <img src="/assets/armada_rules/wonder_stage.png" className="inline h-6 align-middle pb-0.5" alt="" /> on the starting space of <strong className="underline">one</strong> of the 4 naval tracks (<strong className="text-[#c00306]">Red</strong>, <strong className="text-[#ee7307]">Yellow</strong>, <strong className="text-[#0099d6]">Blue</strong>, or <strong className="text-[#007f37]">Green</strong>). This symbol indicates the <strong>Fleet associated with your Wonder</strong>.</p>
|
||
|
||
<p className="mb-4">When you construct a stage of your Wonder, you can also undertake a Naval Construction and advance the <strong>Fleet associated with your Wonder</strong>.</p>
|
||
|
||
<p className="mb-4">To do this, you must <strong>pay, at the same time, the cost of your Wonder stage</strong> <strong className="underline">and</strong> <strong>the cost of the Naval Construction</strong>. Then advance the <strong>Fleet figure associated with your Wonder</strong> by one space on your Shipyard board.</p>
|
||
|
||
<p className="text-[#9e7d57] italic mb-4"><strong className="underline">Example:</strong> You construct the first stage of your Wonder, which costs 2 Stones. You can then undertake a Naval Construction to advance your Red Fleet (associated with your Wonder), which costs 1 Wood. You must therefore pay a total of 2 Stones <strong>and</strong> 1 Wood to complete both constructions.</p>
|
||
<img src="/assets/armada_rules/wonder_stage_cost.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] my-4 drop-shadow-md" loading="lazy" />
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-8 mb-2">Description of the Shipyard boards</h5>
|
||
|
||
<NavalTrack img="/assets/armada_rules/red.svg" colorClass="text-[#c00306]" title="Red naval track">
|
||
<p className="m-0">The <strong className="text-[#c00306]">Red</strong> naval track grants naval symbols which increase your <strong>naval strength</strong>.</p>
|
||
</NavalTrack>
|
||
<p className="mb-4">To see out the naval strength provided by your <strong className="text-[#c00306]">Red</strong> Fleet, look at the value shown by the naval symbol <img src="/assets/armada_rules/naval_symbol.png" className="inline h-6 align-middle pb-0.5" alt="" /> on the space the figure is on.</p>
|
||
|
||
<p className="text-[#9e7d57] italic mb-4"><strong className="underline">Example:</strong> Your Red Fleet is on the third space of your Red naval track. Your <strong>naval strength</strong> is increased by 2.</p>
|
||
<img src="/assets/armada_rules/red_track.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-6 drop-shadow-md" loading="lazy" />
|
||
|
||
<NavalTrack img="/assets/armada_rules/yellow.svg" colorClass="text-[#ee7307]" title="Yellow naval track">
|
||
<p className="m-0">The <strong className="text-[#ee7307]">Yellow</strong> naval track shows your <strong>commercial level</strong>. It also grants <strong>Coins</strong> and raises <strong>Taxes</strong> that impact other players.</p>
|
||
</NavalTrack>
|
||
<h4 className="text-[min(25px,9vw)] font-condensed font-bold m-0 mb-2">COMMERCIAL LEVEL</h4>
|
||
<p className="mb-4">Your commercial level lets you prevent the loss of Coins. To see your <strong>commercial level</strong>, look at the value shown by the amphora symbol <img src="/assets/armada_rules/pot.png" className="inline h-6 align-middle pb-0.5" alt="" /> on the space your <strong className="text-[#ee7307]">Yellow</strong> Fleet is on.</p>
|
||
|
||
|
||
<h4 className="text-[min(25px,9vw)] font-condensed font-bold m-0 mt-4 mb-2">TAX</h4>
|
||
<p className="mb-4">When your <strong className="text-[#ee7307]">Yellow</strong> Fleet reaches a Tax space <img src="/assets/armada_rules/coin_pot.png" className="inline h-6 align-middle pb-0.5" alt="" />, you raise Taxes <strong>at the end of the turn</strong>. If this happens, all players <strong>except you</strong> lose the number of Coins indicated <strong className="underline">minus</strong> <strong>their respective commercial level</strong>. Coins are put back in the reserve.</p>
|
||
|
||
<p className="text-[#9e7d57] italic mb-4"><strong className="underline">Example:</strong> A player reaches the fifth space of the Yellow naval track with their Yellow Fleet; they raise Taxes by 2 at the end of the turn. Your Yellow Fleet is on the second space of the Yellow naval track; you therefore lose 1 Coin (Tax of 2 minus your commercial level of 1).</p>
|
||
<img src="/assets/armada_rules/yellow_track.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-6 drop-shadow-md" loading="lazy" />
|
||
<p className="text-[#005f7d] italic mb-6"><strong className="underline">Clarifications:</strong></p>
|
||
<ul className="list-disc pl-5 italic text-[#005f7d] space-y-1 mb-6">
|
||
<li>Taxes are always applied at the end of the turn. It is possible to lose Coins that you gained during the same turn.</li>
|
||
<li>If multiple Taxes are raised at the end of the same turn, only the highest Tax is applied (ignore all other Taxes).</li>
|
||
<li>If your commercial level is higher or equal than the Tax raised, nothing happens for you.</li>
|
||
</ul>
|
||
|
||
<NavalTrack img="/assets/armada_rules/blue.svg" colorClass="text-[#0099d6]" title="Blue naval track">
|
||
<p className="m-0">The <strong className="text-[#0099d6]">Blue</strong> naval track grants <strong>victory points</strong> that will be counted at the end of the game.</p>
|
||
</NavalTrack>
|
||
<p className="mb-4">To see the number of <strong>victory points</strong> gained from your <strong className="text-[#0099d6]">Blue</strong> Fleet, look at the value shown by the victory point symbol <img src="/assets/armada_rules/victory_point.png" className="inline h-6 align-middle pb-0.5" alt="" /> on the space the figure is on.</p>
|
||
|
||
<p className="text-[#9e7d57] italic mb-4"><strong className="underline">Example:</strong> At the end of the game, your Blue Fleet is on the third space of the Blue naval track. You therefore gain 2 victory points.</p>
|
||
<img src="/assets/armada_rules/blue_track.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-6 drop-shadow-md" loading="lazy" />
|
||
|
||
<NavalTrack img="/assets/armada_rules/green.svg" colorClass="text-[#007f37]" title="Green naval track">
|
||
<p className="m-0">The <strong className="text-[#007f37]">Green</strong> naval track lets you <strong>explore Islands</strong> in 3 levels.</p>
|
||
</NavalTrack>
|
||
<p className="mb-4">When your <strong className="text-[#007f37]">Green</strong> Fleet reaches an <strong>Island space</strong> <img src="/assets/armada_rules/islands.png" className="inline h-6 align-middle pb-0.5" alt="" />, you can explore a new Island <strong>of the level shown</strong> on this space, and as such benefit from its effect.</p>
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] my-[10px] flex flex-col w-full max-w-[800px] self-center mb-6">
|
||
<p className="font-bold mb-2">Two possibilities:</p>
|
||
<ul className="list-disc pl-5 space-y-2">
|
||
<li><strong>On this turn, you are the only player to explore an Island of this level.</strong> In this case, draw 4 Island cards of the corresponding level.</li>
|
||
<li><strong>On this turn, multiple players explore an Island of this level.</strong> In this case, share all of the Island cards of this level face down between players so that each player receives the same number. Any excess cards are not distributed.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p className="mb-4"><strong>From the cards you received, choose 1</strong> and place it under the right side of your Shipyard board, so that only the effect is visible. Return all of the unchosen cards to the corresponding deck and shuffle it.</p>
|
||
|
||
<p className="text-[#9e7d57] italic mb-4"><strong className="underline">Example:</strong> On the same turn, your and another player’s Green Fleets reach the third space of the Green naval track. You share all 9 level 1 Island cards between you, so you each receive 4 Island cards (the extra card is not distributed).</p>
|
||
<img src="/assets/armada_rules/green_track.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-4 drop-shadow-md" loading="lazy" />
|
||
<p className="text-[#005f7d] italic"><strong className="underline">Clarifications:</strong></p>
|
||
<ul className="list-disc pl-5 italic text-[#005f7d] space-y-1 mb-8">
|
||
<li>The levels of Island cards are <strong>independent of Ages</strong>: you can absolutely discover a level 2 Island during Age I and vice versa.</li>
|
||
<li>Resources from your Island cards cannot be bought by your neighbors.</li>
|
||
</ul>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">C. RESOLUTION OF NAVAL CONFLICTS</h4>
|
||
<p className="mb-4">At the end of each Age, <strong>after</strong> resolving Military Conflicts from the base game, you can then resolve a <strong>Naval Conflict</strong>.</p>
|
||
|
||
<p className="mb-4">To determine your naval strength, count all the <strong>naval symbols</strong> <img src="/assets/armada_rules/naval_symbol.png" className="inline h-6 align-middle pb-0.5" alt="" /> on cards you constructed, your <strong>Shipyard</strong>, your <strong>Islands</strong>, and your <strong>Wonder</strong>.</p>
|
||
|
||
<p className="mb-4">Then compare your naval strength with that of <strong>all</strong> other players.</p>
|
||
|
||
<p className="mb-4"><strong>Starting with the last</strong> (weakest naval strength), <strong>then the first</strong> (strongest naval strength), <strong>and finally the second</strong>, distribute Naval Conflict tokens according to players’ positions:</p>
|
||
|
||
<ul className="list-disc pl-5 marker:font-bold space-y-2 mb-4">
|
||
<li><strong>Last</strong>: 1 Naval <strong>Defeat</strong> token (-1, -2, or -3 according to the current Age).</li>
|
||
<li><strong>First</strong>: 1 Naval <strong>Victory</strong> token (3, 5, or 7 according to the current Age).</li>
|
||
<li><strong>Second</strong>: 1 Naval <strong>Victory</strong> token (1, 3, or 5 according to the current Age).</li>
|
||
</ul>
|
||
|
||
<p className="text-[#005f7d] italic mb-6"><strong className="underline">Clarifications:</strong> It is possible that certain players will not receive any tokens during the Resolution of Naval Conflicts.</p>
|
||
|
||
{/* The Specific Armada Naval Table */}
|
||
<div className="overflow-x-auto block border-none min-w-max my-5">
|
||
<table className="border-collapse w-max mx-auto text-center font-medium italic text-sev-brown border border-sev-gray shadow-md">
|
||
<tbody>
|
||
<tr>
|
||
<td className="p-1.5 h-[60px] text-right min-w-[60px] border border-sev-gray"></td>
|
||
<td className="p-1.5 h-[60px] border border-sev-gray"></td>
|
||
<th className="p-1.5 h-[60px] text-center min-w-[60px] border border-sev-gray">Last</th>
|
||
<th className="p-1.5 h-[60px] text-center min-w-[60px] border border-sev-gray">First</th>
|
||
<th className="p-1.5 h-[60px] text-center min-w-[60px] border border-sev-gray">Second</th>
|
||
</tr>
|
||
<tr>
|
||
<th className="p-1.5 h-[60px] text-right min-w-[60px] border border-sev-gray"></th>
|
||
<th className="p-1.5 h-[60px] w-[60px] border border-sev-gray"></th>
|
||
<th className="bg-[#f0ebe5] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_CH1.png" alt="" className="w-[90%] mx-auto block drop-shadow-sm" loading="lazy" /></th>
|
||
<th className="bg-[#f0ebe5] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_CH2.png" alt="" className="w-[90%] mx-auto block drop-shadow-sm" loading="lazy" /></th>
|
||
<th className="bg-[#f0ebe5] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_CH3.png" alt="" className="w-[90%] mx-auto block drop-shadow-sm" loading="lazy" /></th>
|
||
</tr>
|
||
<tr>
|
||
<th className="p-1.5 h-[60px] text-right min-w-[60px] border border-sev-gray">Age I</th>
|
||
<td className="bg-[#f0ebe5] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_RH1.png" alt="" className="w-[90%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_1x1.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_2x1.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_3x1.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
</tr>
|
||
<tr>
|
||
<th className="p-1.5 h-[60px] text-right min-w-[60px] border border-sev-gray">Age II</th>
|
||
<td className="bg-[#f0ebe5] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_RH2.png" alt="" className="w-[90%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_1x2.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_2x2.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_3x2.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
</tr>
|
||
<tr>
|
||
<th className="p-1.5 h-[60px] text-right min-w-[60px] border border-sev-gray">Age III</th>
|
||
<td className="bg-[#f0ebe5] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_RH3.png" alt="" className="w-[90%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_1x3.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_2x3.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
<td className="bg-[#e2d9ce] h-[60px] w-[60px] p-0 align-middle border border-sev-gray"><img src="/assets/armada_effects/table/7AR_3x3.png" alt="" className="w-[80%] mx-auto block drop-shadow-sm" loading="lazy" /></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] my-8 flex flex-col w-full max-w-[800px] self-center">
|
||
<h4 className="text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4 text-center">Ties</h4>
|
||
<ul className="list-disc pl-5 space-y-2 mb-4">
|
||
<li>In case of tie for the <strong>last position</strong>, concerned players each take 1 Naval Defeat token for the current Age.</li>
|
||
<li>In case of tie for the <strong>first position</strong>, concerned players each take <strong>1 Naval Victory token for the second position</strong>. Players in <strong>second position</strong> therefore don’t take <strong>any tokens</strong>.</li>
|
||
<li>In case of tie for the <strong>second position</strong>, concerned players don’t take <strong>any tokens</strong>.</li>
|
||
</ul>
|
||
|
||
<p className="text-center text-[#005f7d] italic"><strong className="underline">Clarifications:</strong> If all players have an equal naval strength, no player takes any Naval Defeat or Victory tokens.</p>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">D. BOARDING</h4>
|
||
<div className="flex items-center gap-2.5 mb-4">
|
||
<img src="/assets/armada_rules/boarding_conflict.png" alt="" className="max-h-[40px] drop-shadow-md" loading="lazy" />
|
||
<p className="m-0">Certain <strong className="text-[#c00306]">Red</strong> cards trigger Boardings that imposes the resolution of a <strong>third Military Conflict</strong>.</p>
|
||
</div>
|
||
|
||
<p className="mb-4">When you trigger a Boarding, immediately take a Boarding token (from the reserve) and give it to the player designated by the symbol. At the end of the Age, continue to the Resolution of Military Conflicts with your two neighbors, <strong>but also with the player who has your Boarding token</strong>, following the normal rules.</p>
|
||
|
||
<p className="mb-4">Once the Military Conflicts are resolved, <strong>discard</strong> the Boarding token and put it back in the reserve.</p>
|
||
|
||
<p className="text-[#005f7d] italic"><strong className="underline">Clarifications:</strong></p>
|
||
<ul className="list-disc pl-5 italic text-[#005f7d] space-y-1 mb-6">
|
||
<li>You can be the target of two Boardings in the same Age. In this case, you must resolve 4 Military Conflicts at the end of this Age.</li>
|
||
<li>Diplomacy tokens (Cities and Leaders expansions) have no effect on Boardings. All Boardings <strong>must</strong> be resolved.</li>
|
||
</ul>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">E. SELLING</h4>
|
||
<p className="mb-4">Each time you sell a card, apply one of these effects:</p>
|
||
<img src="/assets/armada_rules/selling.png" alt="" className="self-center max-h-[80px] max-w-[min(90vw,700px)] mb-4 drop-shadow-md" loading="lazy" />
|
||
<p className="text-center mb-1">Gain 3 Coins from the reserve.</p>
|
||
<p className="text-center font-bold underline mb-1">or</p>
|
||
<p className="text-center mb-6">Advance your <strong className="text-[#ee7307]">Yellow</strong> Fleet by one space without paying the Naval Construction cost.</p>
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] my-5 flex flex-col w-full max-w-[800px] self-center">
|
||
<p className="mb-4"><strong><span className="underline">If there are conflicts</span>, the turn is always resolved in this order:</strong></p>
|
||
<ol className="list-decimal pl-5 space-y-1 marker:font-bold">
|
||
<li>Pay construction costs <i className="italic">(card or Wonder and Naval Construction)</i></li>
|
||
<li>Advance Fleets</li>
|
||
<li>Apply effects of Age cards <i className="italic">(except losing Coins)</i></li>
|
||
<li>Apply effects of Shipyard <i className="italic">(except losing Coins)</i></li>
|
||
<li>Construct cards from the discard <i className="italic">(no Naval Construction)</i></li>
|
||
<li>Lose Coins</li>
|
||
</ol>
|
||
</div>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="END OF THE GAME" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">The game ends at the close of Age III, after the Resolution of Military and Naval Conflicts.</p>
|
||
|
||
<p className="text-center mb-6">Score victory points following the normal base game rules, with the exception that <strong>each <span className="text-[#894c86]">Purple</span> card is limited to 10 victory points maximum</strong>.</p>
|
||
<img src="/assets/armada_rules/score_counting.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-8 drop-shadow-md" loading="lazy" />
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] mt-[30px] mb-5 flex flex-col w-full max-w-[800px] self-center">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4">CLARIFICATION ON <span className="text-[#007f37]">GREEN</span> CARDS</h4>
|
||
<p className="text-center mb-4">In this expansion, it is possible to have more <strong>identical science symbols</strong> than in the base game.</p>
|
||
|
||
{/* The Extended Armada Science Table */}
|
||
<ScienceTable limit={9} showAsterisk={true} />
|
||
|
||
|
||
<p className="text-center italic text-sm mb-4">* Your victory points equal the number of identical symbols multiplied by itself (10 identical symbols equals 10 x 10 for a total of 100 victory points).</p>
|
||
|
||
</div>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="RULES FOR TEAM PLAY" />
|
||
<DescBox>
|
||
<p className="text-center mb-6">During 4- or 6-player games, you have the option of playing <i className="italic">7 Wonders</i> in teams. Make teams of 2 and sit <strong>next to your teammate</strong>. Gameplay follows the normal <i className="italic">Armada</i> rules with the exception of the following adjustments:</p>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">OVERVIEW OF AN AGE</h4>
|
||
<p className="mb-4">During the game, you can freely talk with your teammate and show each other your hand of cards (including Leader cards, if playing with that expansion).</p>
|
||
|
||
<FilledInfoBox className="mb-6">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4">RESTRICTIONS FOR EACH TEAM</h4>
|
||
<ul className="list-disc pl-5 space-y-1">
|
||
<li>You must always use your own resources before buying from your neighbors.</li>
|
||
<li>When constructing, you must always use chains if you have the corresponding symbol.</li>
|
||
<li>You cannot lend each other Coins.</li>
|
||
<li>You cannot exchange cards with each other.</li>
|
||
<li>When constructing a Building that triggers a loss of Coins, your teammate is also affected.</li>
|
||
</ul>
|
||
</FilledInfoBox>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">RESOLUTION OF MILITARY CONFLICTS</h4>
|
||
<p className="mb-4">During team play, <strong>you do not enter into conflict with your teammate</strong>. Compare your military strength with your <strong>opposing neighbor</strong> and gain <strong>double the Military Conflict tokens</strong>:</p>
|
||
|
||
<ul className="list-disc pl-5 marker:font-bold space-y-1 mb-4">
|
||
<li>If your military strengths are <strong>equal</strong>, do not gain <strong>any tokens</strong>.</li>
|
||
<li>If your military strength is <strong>lower</strong>, take <strong>2 Military Defeat tokens</strong>.</li>
|
||
<li>If your military strength is <strong>higher</strong>, take <strong>2 Military Victory tokens</strong> that correspond to the current Age.</li>
|
||
</ul>
|
||
|
||
<p className="text-[#9e7d57] italic mb-6"><strong className="underline">Example:</strong> At the end of Age II, you have a military strength of 2 and your opposing neighbor has a strength of 3. You take 2 Military Defeat tokens and your opposing neighbor takes 2 Military Victory tokens for Age II.</p>
|
||
|
||
<div className="flex justify-evenly my-[30px] gap-x-1.5 gap-y-[50px] flex-wrap w-full">
|
||
<MilitaryChild title="Your opposing neighbor" img="/assets/armada_rules/conflict_opposite.png" isEven={false}>
|
||
<div className="flex gap-5 justify-center w-full mt-2">
|
||
<div className="flex flex-col items-center"><img src="/assets/armada_rules/military_3.png" alt="" className="max-h-[80px]" loading="lazy" /><p className="italic mt-1">Victory</p></div>
|
||
<div className="flex flex-col items-center"><img src="/assets/armada_rules/military_3.png" alt="" className="max-h-[80px]" loading="lazy" /><p className="italic mt-1">Victory</p></div>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Your City in Age II" img="/assets/armada_rules/conflict.png" isEven={true}>
|
||
<div className="flex gap-5 justify-center w-full mt-2">
|
||
<div className="flex flex-col items-center"><img src="/assets/armada_rules/military_-1.png" alt="" className="max-h-[80px]" loading="lazy" /><p className="italic mt-1">Defeat</p></div>
|
||
<div className="flex flex-col items-center"><img src="/assets/armada_rules/military_-1.png" alt="" className="max-h-[80px]" loading="lazy" /><p className="italic mt-1">Defeat</p></div>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Your teammate" img="/assets/armada_rules/conflict_teammate.png" isEven={false} />
|
||
</div>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">RESOLUTION OF NAVAL CONFLICTS</h4>
|
||
<p className="mb-6">Naval Conflicts are resolved <strong>individually</strong> following the normal rules. Ties are also resolved normally, <strong>independent of teams</strong>.</p>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">TAXES AND PIRATES</h4>
|
||
<p className="mb-6">Taxes and loss of Coins triggered by these symbols <img src="/assets/armada_rules/coin_pot.png" className="inline h-6 align-middle mx-1 pb-0.5" alt="" /> <img src="/assets/armada_rules/pot_coin.png" className="inline h-6 align-middle mx-1 pb-0.5" alt="" /> apply to all players, <strong>independent of teams</strong>.</p>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">ARMADA CARDS</h4>
|
||
<p className="mb-4">During team play, cards that target the player to the right of the neighbor to your right <img src="/assets/armada_rules/dubble_arrow_right.png" className="inline h-6 align-middle pb-0.5" alt="" /> or the player to the left of the neighbor to your left <img src="/assets/armada_rules/dubble_arrow_left.png" className="inline h-6 align-middle pb-0.5" alt="" />, follow the normal rules, <strong>independent of teams</strong>.</p>
|
||
|
||
<p className="mb-6">Cards that trigger Boardings <img src="/assets/armada_rules/boarding.png" className="inline h-6 align-middle pb-0.5" alt="" /> follow the normal rules, <strong>independent of teams</strong>, but provide <strong>only 1</strong> Military Victory or Defeat token to the concerned players (instead of 2 as in standard team Military Conflicts).</p>
|
||
|
||
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">END OF THE GAME</h4>
|
||
<p className="mb-4">The game ends at the close of Age III, after the Resolution of Military and Naval Conflicts. Proceed to scoring victory points following the normal <i className="italic">Armada</i> rules.</p>
|
||
|
||
<p className="mb-6">Add your and your teammate’s scores. <strong>The team with the highest combined score wins the game</strong>. In case of tie, the team with the most total Treasure wins. If there is still a tie, tied teams share the victory.</p>
|
||
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] my-5 flex flex-col w-full max-w-[800px] self-center">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4 italic"><i className="italic">ARMADA</i> AND <i className="italic">CITIES</i> EXPANSIONS</h4>
|
||
<p className="text-center mb-4">If you are playing with the <i className="italic">Armada</i> and <i className="italic">Cities</i> expansions, at the beginning of each Age, each player receive 9 cards (instead of 7 as in the base game).</p>
|
||
<p className="text-center">Additionally, <strong>Debts</strong> apply for <strong>any Taxes raised and loss of Coins players do not resolve</strong>. In this case, if you cannot or don’t want to lose Coins, take <strong>1 Debt token per Coin you do not lose</strong>.</p>
|
||
</div>
|
||
</DescBox>
|
||
</SectionContainer>
|
||
|
||
|
||
{/* --- CITIES EXPANSION --- */}
|
||
<SectionContainer id="cities">
|
||
<SectionHeader logoSrc="/assets/logos/7CI_logo.svg" title="Rules" />
|
||
<Quote text="This city is what it is because our people are what they are." author="Plato" />
|
||
|
||
<div className="h-[500px] bg-center bg-cover" style={{ backgroundImage: 'url(/assets/banners/cities.png)' }} />
|
||
|
||
<RuleHeader title="OVERVIEW" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">Debt, pillaging, diplomacy… with this expansion to <i className="italic">7 Wonders</i>, discover another aspect of the great cities of Antiquity. 42 new Age cards along with 2 new Wonders will introduce never before seen effects.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-center mb-4">The <i className="italic">Cities</i> expansion brings new rules to the <i className="italic">7 Wonders</i> base game, but the victory conditions remain the same.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-center mb-4">This expansion also offers a variant for playing in teams (4 or 6 players).</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="CONTENTS" />
|
||
<DescBox className="items-center">
|
||
<ul className="list-disc pl-[18px] w-fit marker:font-bold">
|
||
<li>2 Wonder boards (Byzantium and Petra)</li>
|
||
<li>42 Cities cards (14 per Age)</li>
|
||
<li>4 Diplomacy tokens</li>
|
||
<li>26 Debt tokens (22 worth -1 and 4 worth -5)</li>
|
||
<li>6 Coins worth 6</li>
|
||
<li>1 score pad</li>
|
||
<li>3 Description of New Effects sheets</li>
|
||
<li>The rulebook</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAME ELEMENTS" />
|
||
<DescBox>
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">WONDER BOARDS</h4>
|
||
<p className="mb-4"><strong>Byzantium</strong> and <strong>Petra</strong> are only used if playing with this expansion.</p>
|
||
<div className="flex flex-col sm:flex-row justify-center items-center gap-5 my-4">
|
||
<img src="/assets/cities_rules/byzantium.jpg" alt="" className="max-h-[300px] drop-shadow-md rounded" loading="lazy" />
|
||
<img src="/assets/cities_rules/petra.png" alt="" className="max-h-[300px] drop-shadow-md rounded" loading="lazy" />
|
||
</div>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">CITIES CARDS</h4>
|
||
<p className="mb-4"><strong className="text-black">Black</strong> cards are a new category of Building. They are added to the Age cards from the base game.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mb-4"><strong className="underline">Note:</strong></p>
|
||
<ul className="list-disc pl-5 italic text-[#005f7d] space-y-2 mb-6">
|
||
<li>To help with sorting, Age cards from the Cities expansion all have this symbol <img src="/assets/leaders_effects/cities_leaders.svg" className="inline w-[15px] h-[20px] align-middle pb-0.5" alt="" /> in the bottom-left corner.</li>
|
||
<li>For colorblind players, Black cards all have this symbol <img src="/assets/cities_rules/dark.svg" className="inline w-[15px] h-[20px] align-middle pb-0.5" alt="" />.</li>
|
||
</ul>
|
||
<img src="/assets/cities_rules/age_cards.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-4 drop-shadow-md" loading="lazy" />
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<FlexRow>
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">DEBT TOKENS</h4>
|
||
<p>These tokens represent Debts contracted by players during the game. They have a negative value (-1 and -5).</p>
|
||
</div>
|
||
<div className="flex flex-row gap-5 items-baseline justify-center shrink-0">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-2.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-5.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
</div>
|
||
</div>
|
||
</FlexRow>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-4" />
|
||
|
||
<FlexRow className="items-center">
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">DIPLOMACY TOKENS</h4>
|
||
<p>These tokens represent the new Diplomacy effect.</p>
|
||
</div>
|
||
<div className="flex justify-center shrink-0">
|
||
<img src="/assets/cities_rules/diplomacy.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
</div>
|
||
</FlexRow>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-4" />
|
||
|
||
<FlexRow className="items-start">
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">COINS</h4>
|
||
<p className="mb-4">New Coins worth 6 are added to the reserve.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mt-2"><strong className="underline">Note:</strong> In these rules, when you see “x Coins,” the “x” corresponds to the total value of your Coins. In other words, “Take x Coins” means you take coins worth a total of x.</p>
|
||
</div>
|
||
<div className="flex justify-center shrink-0">
|
||
<img src="/assets/leaders_rules/coin_6.png" alt="" className="max-h-[80px] drop-shadow-md" loading="lazy" />
|
||
</div>
|
||
</FlexRow>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">SCORE PAD</h4>
|
||
<p className="mb-4">This score pad assists you in counting victory points gained through the <i className="italic">Leaders</i>, <i className="italic">Cities</i>, <i className="italic">Armada</i>, and <i className="italic">Edifice</i> expansions.</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">DESCRIPTION OF NEW EFFECTS SHEETS</h4>
|
||
<p className="mb-4">These sheets provide a complete explanation of all the new symbols in the game.</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="SETUP" />
|
||
<DescBox>
|
||
<p className="mb-4">Setup follows the normal <i className="italic">7 Wonders</i> rules with the exception of the following adjustments:</p>
|
||
<ul className="list-disc pl-5 space-y-4 marker:font-bold">
|
||
<li>
|
||
Prepare the <strong>Age cards</strong>:
|
||
<ol className="list-decimal pl-5 space-y-2 mt-2 font-bold marker:font-bold">
|
||
<li><span className="font-normal">Separate the <strong className="text-black">Black</strong> cards into three decks (Age I, Age II, and Age III), then shuffle each deck.</span></li>
|
||
<li><span className="font-normal">For each Age, randomly take as many <strong className="text-black">Black</strong> cards as the <strong>number of players</strong>. The remaining cards are put <strong>out of play</strong>; they will not be used during the game.</span></li>
|
||
<li><span className="font-normal">Shuffle the <strong className="text-[#894c86]">Purple</strong> cards from the base game, then draw as many cards as the <strong>number of players +2</strong>.</span></li>
|
||
<li><span className="font-normal">Add the selected <strong className="text-black">Black</strong> and <strong className="text-[#894c86]">Purple</strong> cards to the corresponding Age decks from the base game, then shuffle each deck of Age cards.</span></li>
|
||
</ol>
|
||
</li>
|
||
<li>Place the <strong>Debt</strong> and <strong>Diplomacy</strong> tokens in the middle of the table.</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAMEPLAY" />
|
||
<DescBox>
|
||
<p className="mb-4">Gameplay follows the normal <i className="italic">7 Wonders</i> rules with the exception of three new rules:</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<ol className="list-[upper-alpha] text-sev-dark font-bold text-xl ml-8 space-y-1 marker:font-bold">
|
||
<li><strong>Extra Turn</strong></li>
|
||
<li><strong>Losing Coins and Debts</strong></li>
|
||
<li><strong>Diplomacy</strong></li>
|
||
</ol>
|
||
|
||
<hr className="bg-sev-brown border-none h-[6px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">A. EXTRA TURN</h4>
|
||
<p className="mb-4">At the beginning of each Age, each player receives <strong>8 cards</strong> (instead of 7 as in the base game). During each Age, you will therefore play an extra turn.</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[6px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">B. LOSING COINS AND DEBTS</h4>
|
||
<p className="mb-4">Certain Black cards trigger a loss of Coins <img src="/assets/cities_rules/coin_loss.png" className="inline h-6 align-middle pb-0.5" alt="" /> for all other players. Players always lose these Coins <strong>at the end of the turn</strong>, after everyone has played a card and paid any construction costs.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">Each time you must lose Coins <img src="/assets/cities_rules/coin_loss.png" className="inline h-6 align-middle pb-0.5" alt="" /> (by putting them back in the reserve), <strong>you must take 1 Debt token worth -1 for each Coin you do not lose</strong>. You can choose to take Debts even if you have enough Coins in your Treasure. It is possible to resolve a loss by both losing Coins and taking Debts.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#e3000b] italic mb-4"><strong className="underline">Important:</strong></p>
|
||
<ul className="list-disc pl-5 italic text-[#e3000b] space-y-1 mb-4">
|
||
<li>Debts you gain can never be paid back.</li>
|
||
<li>Losing Coins always happens <strong className="underline">after</strong> gaining Coins.</li>
|
||
</ul>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-6"><strong>At the end of the game, you will lose the victory points shown on each Debt token you have.</strong></p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[6px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">C. DIPLOMACY</h4>
|
||
<p className="mb-4">Certain <strong className="text-black">Black</strong> cards, as well as the <strong>Byzantium</strong> Wonder, grant a Diplomacy token.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">With this token, during the Resolution of Military Conflicts, <strong>you do not participate in Conflicts</strong>. You do not take any Conflict tokens (neither Defeat nor Victory). Your neighbors are therefore considered to be adjacent to each other and their militaries will enter conflict following the normal <i className="italic">7 Wonders</i> rules.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">You are <strong>required</strong> to use the Diplomacy token during the Military Conflict of the same round you acquired it, even if your military strenght is higher than your neighbors’. Discard the Diplomacy token after you use it.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mb-4"><strong className="underline">Clarifications:</strong> You can accumulate multiple Diplomacy tokens, but you are required to discard 1 Diplomacy token at the end of each Resolution of Military Conflicts.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">If there are ever only 2 players participating in the Resolution of Military Conflicts, they only face each other once and only take a single Military Conflict token each.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#9e7d57] italic mb-6"><strong className="underline">Example:</strong> At the end of Age II, you have a military strength of 2. The neighbor to your left has a strength of 5 and the one to your right has a strength of 4. You have 1 Diplomacy token; you do not participate in any Conflicts and do not take any tokens. The neighbors to your left and right compare their military strenghts and take the corresponding Conflict tokens.</p>
|
||
|
||
<div className="flex justify-evenly my-[30px] gap-x-1.5 gap-y-[50px] flex-wrap w-full">
|
||
<MilitaryChild title="Neighbor to your left" img="/assets/cities_rules/military_neighbor_1.png" isEven={false}>
|
||
<div className="w-full flex flex-col items-center">
|
||
<img src="/assets/sev_rules/military_3.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Defeat</p>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Your City in Age II" img="/assets/cities_rules/military_diplomacy.png" isEven={true}>
|
||
<div className="w-full flex flex-col items-center">
|
||
<img src="/assets/cities_rules/diplomacy.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Neighbor to your right" img="/assets/cities_rules/military_neighbor_2.png" isEven={false}>
|
||
<div className="w-full flex flex-col items-center">
|
||
<img src="/assets/sev_rules/military_-1.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Defeat</p>
|
||
</div>
|
||
</MilitaryChild>
|
||
</div>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="END OF THE GAME" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">The game ends at the close of Age III, after the Resolution of Military Conflicts. Proceed to scoring victory points following the normal base game rules.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic text-center mb-6"><strong className="underline">Note:</strong> To make things simple, count your Debts in the “Coins” line of the score pad.</p>
|
||
|
||
<img src="/assets/cities_rules/score_counting.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-8 drop-shadow-md" loading="lazy" />
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] my-5 flex flex-col w-full max-w-[800px] self-center">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4">CLARIFICATION ON <span className="text-[#007f37]">GREEN</span> CARDS</h4>
|
||
<p className="text-center mb-4">In this expansion, it is possible to have more <strong>identical science symbols</strong> than in the base game.</p>
|
||
|
||
<ScienceTable limit={9} showAsterisk={true} />
|
||
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-4" />
|
||
<p className="text-center italic text-sm mb-2">* Your victory points equal the number of identical symbols multiplied by itself (10 identical symbols equals 10 x 10 for a total of 100 victory points).</p>
|
||
</div>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="RULES FOR TEAM PLAY" />
|
||
<DescBox>
|
||
<p className="text-center mb-6">During 4- or 6-player games, you have the option of playing <i className="italic">7 Wonders</i> in teams. Make teams of 2 and sit <strong>next to your teammate</strong>. Gameplay follows the normal <i className="italic">Cities</i> rules with the exception of the following adjustments:</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">OVERVIEW OF AN AGE</h4>
|
||
<p className="mb-4">During the game, you can freely talk with your teammate and show each other your hand of cards (including Leader cards, if playing with that expansion).</p>
|
||
|
||
<FilledInfoBox className="mb-6">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4">RESTRICTIONS FOR EACH TEAM</h4>
|
||
<ul className="list-disc pl-5 space-y-1">
|
||
<li>You must always use your own resources before buying from your neighbors.</li>
|
||
<li>When constructing, you must always use chains if you have the corresponding symbol.</li>
|
||
<li>You cannot lend each other Coins.</li>
|
||
<li>You cannot exchange cards with each other.</li>
|
||
<li>When constructing a Building that triggers a loss of Coins, your teammate is also affected.</li>
|
||
</ul>
|
||
</FilledInfoBox>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">RESOLUTION OF MILITARY CONFLICTS</h4>
|
||
<p className="mb-4">During team play, <strong>you do not enter into conflict with your teammate</strong>. Compare your military strength with your <strong>opposing neighbor</strong> and gain <strong>double the Military Conflict tokens</strong>:</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<ul className="list-disc pl-5 marker:font-bold space-y-1 mb-4">
|
||
<li>If your military strengths are <strong>equal</strong>, do not gain <strong>any tokens</strong>.</li>
|
||
<li>If your military strength is <strong>lower</strong>, take <strong>2 Military Defeat tokens</strong>.</li>
|
||
<li>If your military strength is <strong>higher</strong>, take <strong>2 Military Victory tokens</strong> that correspond to the current Age.</li>
|
||
</ul>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#9e7d57] italic mb-6"><strong className="underline">Example:</strong> At the end of Age II, you have a military strength of 2 while your opposing neighbor has a strength of 5. You take 2 Military Defeat tokens and your opposing neighbor takes 2 Age II Military Victory tokens.</p>
|
||
|
||
<div className="flex justify-evenly my-[30px] gap-x-1.5 gap-y-[50px] flex-wrap w-full">
|
||
<MilitaryChild title="Your opposing neighbor" img="/assets/cities_rules/military_neighbor_1.png" isEven={false}>
|
||
<div className="flex gap-5 justify-center w-full mt-2">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/military_3.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Victory</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/military_3.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Victory</p>
|
||
</div>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Your City in Age II" img="/assets/cities_rules/military_team.png" isEven={true}>
|
||
<div className="flex gap-5 justify-center w-full mt-2">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/military_-1.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Defeat</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/military_-1.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Defeat</p>
|
||
</div>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Your teammate" img="/assets/cities_rules/military_teammate.png" isEven={false} />
|
||
</div>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">RESOLUTION OF MILITARY CONFLICTS (WITH DIPLOMACY)</h4>
|
||
<p className="mb-4">During the Resolution of Military Conflicts, if you have a Diplomacy token, you must use its effect on yourself only, separate from your team, and then discard it. In this case, you still compare your military strength with your <strong>opposing neighbor</strong>, but you take <strong>only 1 Military Victory or Defeat token each</strong> (instead of 2).</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">If both you and your opposing neighbor use a Diplomacy token during the same Resolution of Military Conflicts, neither one of you takes <strong>any tokens</strong>.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#9e7d57] italic mb-6"><strong className="underline">Example:</strong> At the end of Age II, you have a military strength of 2 while your opposing neighbor has a strength of 5. You have 1 Diplomacy token; you still participate in the Conflict, but you and your opposing neighbor only take 1 Military Defeat and Victory token respectively (instead of 2 each).</p>
|
||
|
||
<div className="flex justify-evenly my-[30px] gap-x-1.5 gap-y-[50px] flex-wrap w-full">
|
||
<MilitaryChild title="Your opposing neighbor" img="/assets/cities_rules/military_neighbor_1.png" isEven={false}>
|
||
<div className="flex gap-5 justify-center w-full mt-2">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/military_3.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Victory</p>
|
||
</div>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Your City in Age II" img="/assets/cities_rules/military_team.png" isEven={true}>
|
||
<div className="flex gap-5 justify-center w-full mt-2">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/armada_rules/military_-1.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
<p className="italic mt-1">Defeat</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/cities_rules/diplomacy.png" alt="" className="max-h-[80px]" loading="lazy" />
|
||
</div>
|
||
</div>
|
||
</MilitaryChild>
|
||
<MilitaryChild title="Your teammate" img="/assets/cities_rules/military_teammate.png" isEven={false} />
|
||
</div>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">END OF THE GAME</h4>
|
||
<p className="mb-4">The game ends at the close of Age III, after the Resolution of Military Conflicts. Proceed to scoring victory points following the normal base game rules.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">Add your and your teammate’s scores. <strong>The team with the highest combined score wins the game</strong>. In case of tie, the team with the most total Treasure wins. If there is still a tie, tied teams share the victory.</p>
|
||
</DescBox>
|
||
</SectionContainer>
|
||
|
||
|
||
{/* --- EDIFICE EXPANSION --- */}
|
||
<SectionContainer id="edifice">
|
||
<SectionHeader logoSrc="/assets/logos/7ED_logo.svg" title="Rules" />
|
||
<Quote text="Give me a lever and a place to stand and I will move the Earth." author="Archimedes" />
|
||
|
||
<div className="h-[400px] bg-center bg-cover" style={{ backgroundImage: 'url(/assets/banners/edifice.png)' }} />
|
||
|
||
<RuleHeader title="OVERVIEW" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">This expansion to <i className="italic">7 Wonders</i> lets you participate in building communal edifices to turn a profit. You are not required to participate, although you will bear responsibility for any projects that fail. This expansion slightly changes the base rules to <i className="italic">7 Wonders</i>, but the victory conditions remain the same.</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="CONTENTS" />
|
||
<DescBox className="items-center">
|
||
<ul className="list-disc pl-[18px] w-fit marker:font-bold">
|
||
<li>2 Wonder boards</li>
|
||
<li>15 Edifice cards</li>
|
||
<li>24 Participation pawns</li>
|
||
<li>15 Debt tokens</li>
|
||
<li>12 Military Conflict tokens</li>
|
||
<li>3 Coins worth 6</li>
|
||
<li>1 score pad</li>
|
||
<li>3 Description of New Effects sheets</li>
|
||
<li>The rulebook</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAME ELEMENTS" />
|
||
<DescBox>
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">WONDER BOARDS</h4>
|
||
<p className="mb-4"><strong>Ur</strong> is only used if playing with this expansion.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4"><strong>Carthage</strong> adds a new way to build the stages of your Wonder. It can be used with the base game or any expansion.</p>
|
||
|
||
<div className="flex flex-col sm:flex-row justify-center items-center gap-5 my-4">
|
||
<img src="/assets/edifice_rules/ur.jpg" alt="" className="max-h-[300px] drop-shadow-md rounded" loading="lazy" />
|
||
<img src="/assets/edifice_rules/carthage.jpg" alt="" className="max-h-[300px] drop-shadow-md rounded" loading="lazy" />
|
||
</div>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<FlexRow>
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">PARTICIPATION PAWNS</h4>
|
||
<p>These pawns represent your participation in constructing Edifices. There are 3 types of pawns, each corresponding to a different Age.</p>
|
||
</div>
|
||
<div className="flex flex-row gap-5 items-baseline justify-center shrink-0">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/pawn_1.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1">Age I</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/pawn_2.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1">Age II</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/pawn_3.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1">Age III</p>
|
||
</div>
|
||
</div>
|
||
</FlexRow>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-4" />
|
||
|
||
<FlexRow>
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">DEBT TOKENS</h4>
|
||
<p>These tokens represent victory points that you might lose if an Edifice fails to be constructed. They have a negative value (-2, -3, and -5), each corresponding to a different Age.</p>
|
||
</div>
|
||
<div className="flex flex-row gap-5 items-baseline justify-center shrink-0">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-2.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1">Age I</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-3.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1">Age II</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-5.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1">Age III</p>
|
||
</div>
|
||
</div>
|
||
</FlexRow>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-4" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">MILITARY CONFLICT TOKENS AND COINS</h4>
|
||
<p className="mb-4">Additional Military Conflict tokens and Coins are added to the reserves.</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-4" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">SCORE PAD</h4>
|
||
<p className="mb-4">This score pad assists you in counting victory points gained through the <i className="italic">Leaders</i>, <i className="italic">Cities</i>, <i className="italic">Armada</i>, and <i className="italic">Edifice</i> expansions.</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-4" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">DESCRIPTION OF NEW EFFECTS SHEETS</h4>
|
||
<p className="mb-4">These sheets explain the new symbols in the game.</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-4" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">EDIFICE CARDS</h4>
|
||
<p className="mb-2">Edifice cards represent prestigious buildings that you can construct together during the game.</p>
|
||
<p className="mb-4">Each Edifice has a <strong>Project</strong> side and a <strong>Constructed</strong> side.</p>
|
||
<img src="/assets/edifice_rules/edifice_card.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-4 drop-shadow-md" loading="lazy" />
|
||
</DescBox>
|
||
|
||
<RuleHeader title="SETUP" />
|
||
<DescBox>
|
||
<p className="mb-4">Setup follows the normal <i className="italic">7 Wonders</i> rules with the exception of the following adjustments:</p>
|
||
<ul className="list-disc pl-5 space-y-4 marker:font-bold">
|
||
<li>Place the <strong>Debt tokens</strong> in the middle of the table.</li>
|
||
<li>
|
||
Prepare the <strong>Edifice cards</strong>:
|
||
<ol className="list-decimal pl-5 space-y-2 mt-2 font-bold marker:font-bold">
|
||
<li><span className="font-normal">Separate the Edifice cards into three decks (Age I, Age II, and Age III), then shuffle each deck separately.</span></li>
|
||
<li><span className="font-normal">Take <strong>1 random Edifice card per Age</strong> and place these 3 cards in the middle of the table, <strong>Project</strong> side up. The remaining cards are put back in the box; they will not be used this game.</span></li>
|
||
</ol>
|
||
</li>
|
||
<li>
|
||
<span className="font-normal">Consult the table below and take for each Age the corresponding number of <strong>Participation pawns</strong>.</span>
|
||
<div className="overflow-x-auto block border-none min-w-max my-5">
|
||
<table className="border-collapse min-w-max mx-auto shadow-sm">
|
||
<tbody>
|
||
<tr className="border-2 border-sev-brown">
|
||
<th className="text-right p-2.5 text-sev-brown italic font-normal">Number of players</th>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold bg-[#ebe2da]">3</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold">4</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold bg-[#ebe2da]">5</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold">6</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold bg-[#ebe2da]">7</td>
|
||
</tr>
|
||
<tr className="border-2 border-sev-brown">
|
||
<th className="text-right p-2.5 text-sev-brown italic font-normal">Number of Participation pawns (for each Age)</th>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold bg-[#ebe2da]">2</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold">3</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold bg-[#ebe2da]">3</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold">4</td>
|
||
<td className="text-center p-2.5 text-sev-brown w-[40px] font-bold bg-[#ebe2da]">5</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</li>
|
||
<li>Place the Participation pawns on the Edifice card of the matching Age. The remaining Participation pawns are put back in the box.</li>
|
||
</ul>
|
||
<img src="/assets/edifice_rules/setup.png" alt="" className="self-center max-w-[min(95vw,100%)] mt-6 mb-2 drop-shadow-md" loading="lazy" />
|
||
<p className="text-center italic text-sev-brown mb-4">Setup example for a 5-player game</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAMEPLAY" />
|
||
<DescBox>
|
||
<p className="mb-4">Gameplay follows the normal <i className="italic">7 Wonders</i> rules with the exception of two new rules:</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<ol className="list-[upper-alpha] text-sev-dark font-bold text-xl ml-8 space-y-1 marker:font-bold">
|
||
<li><strong>Participate in the project</strong></li>
|
||
<li><strong>Construct the Edifice</strong></li>
|
||
</ol>
|
||
|
||
<hr className="bg-sev-brown border-none h-[6px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-2">A. PARTICIPATE IN THE PROJECT</h4>
|
||
<p className="mb-4"><strong>Once per Age</strong>, when you construct a stage of your Wonder, if you wish, you can participate in the construction of the <strong>current Age’s Edifice</strong>. You can participate in the construction of the Edifice <strong>as long as there is at least 1 Participation pawn</strong> on the card.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">To do so, you must pay, <strong>at the same time</strong>, the cost of your Wonder stage (following the normal <i className="italic">7 Wonders</i> rules) <strong className="underline">and</strong> the project’s participation cost.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">Then take a <strong>Participation pawn</strong> from the Edifice card and place it on your Wonder board.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mb-4"><strong className="underline">Note:</strong> If multiple players participate in the construction of an Edifice on the same turn, and there are not enough Participation pawns, take pawns from the box so that each participant has one.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#9e7d57] italic mb-6"><strong className="underline">Example:</strong> In Age I, you construct the first stage of your Wonder and decide to participate in the construction of the Belvedere. The Wonder stage costs 2 Wood and the Belvedere costs 1 Coin. Therefore you pay a total of 2 Wood and 1 Coin. Your Wonder stage is constructed and you take 1 Participation pawn from the Belvedere card.</p>
|
||
|
||
<img src="/assets/edifice_rules/participation_cost.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-2 drop-shadow-md" loading="lazy" />
|
||
<p className="text-center text-[#9e7d57] italic mb-6">Total cost: Wonder stage + participation in the project</p>
|
||
|
||
<h4 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-2">B. CONSTRUCT THE EDIFICE</h4>
|
||
<p className="mb-4"><strong>Two possibilities:</strong></p>
|
||
<ul className="list-disc pl-5 space-y-4 marker:font-bold mb-4">
|
||
<li>
|
||
<p className="mb-2"><strong>During the Age, construction is finished:</strong></p>
|
||
<p className="m-0">As soon as the last Participation pawn is taken from the Edifice card, it is constructed. Flip the Edifice card over to its Constructed side. If you have <strong>a Participation pawn</strong> for this Edifice, <strong>immediately gain its Reward</strong>.</p>
|
||
</li>
|
||
<li>
|
||
<p className="mb-2"><strong>At the end of the Age, construction is not finished:</strong></p>
|
||
<p className="mb-4">Before the Resolution of Military Conflicts, if there is at least 1 Participation pawn left on the Edifice card, the construction fails and no one gains its Reward. If you do not have <strong>any Participation pawns</strong> for this Age, you must <strong>suffer the Penalty</strong>. If you have at least 1 Participation pawn, you do not suffer any Penalty.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-4" />
|
||
|
||
<FlexRow className="items-center">
|
||
<div className="flex-1">
|
||
<p className="m-0">If you cannot pay the <strong>full</strong> Penalty, do not lose anything. Instead, take a <strong>Debt token</strong> for the current Age.</p>
|
||
</div>
|
||
<div className="flex flex-row gap-5 items-baseline justify-center shrink-0">
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-2.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1 text-sm">Age I</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-3.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1 text-sm">Age II</p>
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<img src="/assets/edifice_rules/dept_-5.png" alt="" className="max-h-[80px] drop-shadow-sm" loading="lazy" />
|
||
<p className="italic mt-1 text-sm">Age III</p>
|
||
</div>
|
||
</div>
|
||
</FlexRow>
|
||
</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="END OF THE GAME" />
|
||
<DescBox>
|
||
<p className="mb-6 text-center">The game ends at the close of Age III, after the Resolution of Military Conflicts. Proceed to scoring victory points following the normal base game rules.</p>
|
||
|
||
<img src="/assets/edifice_rules/score_counting.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-8 drop-shadow-md" loading="lazy" />
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] my-5 flex flex-col w-full max-w-[800px] self-center">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4 italic"><i className="italic">EDIFICE</i> AND <i className="italic">ARMADA</i> EXPANSIONS</h4>
|
||
<p className="text-center m-0">If you are playing with the <i className="italic">Edifice</i> <strong>and</strong> <i className="italic">Armada</i> expansions, when you construct a stage of your Wonder, you can undertake a Naval Construction <strong className="underline">or</strong> participate in the construction of the Edifice. You cannot take both construction actions in the same turn.</p>
|
||
</div>
|
||
</DescBox>
|
||
</SectionContainer>
|
||
|
||
|
||
{/* --- LEADERS EXPANSION --- */}
|
||
<SectionContainer id="leaders">
|
||
<SectionHeader logoSrc="/assets/logos/7LE_logo.svg" title="Rules" />
|
||
<Quote text="Politics is the art of ruling free men." author="Aristotle" />
|
||
|
||
<div className="h-[400px] bg-top bg-cover" style={{ backgroundImage: 'url(/assets/banners/leaders.png)' }} />
|
||
|
||
<RuleHeader title="OVERVIEW" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">This expansion to <i className="italic">7 Wonders</i> lets you put great figures at the helm of your civilization: <strong>Leaders</strong>. Represented by 55 new cards, they will each influence the development of your City in their own way. This expansion slightly changes the base rules to <i className="italic">7 Wonders</i>, but the victory conditions remain the same.</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="CONTENTS" />
|
||
<DescBox className="items-center">
|
||
<ul className="list-disc pl-[18px] w-fit marker:font-bold">
|
||
<li>Wonder boards (Roma and Abu Simbel)</li>
|
||
<li>55 Leader cards separated into 3 decks:
|
||
<ul className="list-[circle] pl-5 mt-1 space-y-1">
|
||
<li>Standard (34 cards)</li>
|
||
<li>Expert <img src="/assets/leaders_effects/expert_leaders.svg" className="inline w-[20px] align-middle pb-0.5" alt="" loading="lazy" /> (15 cards)</li>
|
||
<li>Cities <img src="/assets/leaders_effects/cities_leaders.svg" className="inline w-[15px] h-[20px] align-middle pb-0.5" alt="" loading="lazy" /> (6 Bonus cards)</li>
|
||
</ul>
|
||
</li>
|
||
<li>18 Coins worth 6</li>
|
||
<li>1 score pad</li>
|
||
<li>3 Description of New Effects sheets</li>
|
||
<li>The rulebook</li>
|
||
</ul>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="ELEMENTS OF THE GAME" />
|
||
<DescBox>
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">WONDER BOARDS</h4>
|
||
<p className="mb-4"><strong>Roma</strong> and <strong>Abu Simbel</strong> are only used if playing with this expansion.</p>
|
||
<div className="flex flex-col sm:flex-row justify-center items-center gap-5 my-4">
|
||
<img src="/assets/leaders_rules/roma.png" alt="" className="max-h-[300px] drop-shadow-md rounded" loading="lazy" />
|
||
<img src="/assets/leaders_rules/abu_simbel.png" alt="" className="max-h-[300px] drop-shadow-md rounded" loading="lazy" />
|
||
</div>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">LEADER CARDS</h4>
|
||
<p className="mb-4"><strong>Leader</strong> cards each represent a unique leader. They are different than Age cards and show a new design on the back. Their cost must always be paid in Coins.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mb-6"><strong className="underline">Note:</strong> The 6 Bonus Cities cards can only be used if playing with both the Leaders and Cities expansions.</p>
|
||
|
||
<FlexRow className="items-start">
|
||
<div className="flex-1">
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 m-0">COINS</h4>
|
||
<p className="mb-4">New Coins worth 6 are added to the reserve.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mt-2"><strong className="underline">Note:</strong> In these rules, when you see “x Coins,” the “x” corresponds to the total value of your Coins. In other words, “Take x Coins” means you take coins worth a total of x.</p>
|
||
</div>
|
||
<div className="flex justify-center shrink-0">
|
||
<img src="/assets/leaders_rules/coin_6.png" alt="" className="max-h-[80px] drop-shadow-md" loading="lazy" />
|
||
</div>
|
||
</FlexRow>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">SCORE PAD</h4>
|
||
<p className="mb-4">This score pad assists you in counting victory points gained through the <i className="italic">Leaders</i>, <i className="italic">Cities</i>, <i className="italic">Armada</i>, and <i className="italic">Edifice</i> expansions.</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2">DESCRIPTION OF NEW EFFECTS SHEET</h4>
|
||
<p className="mb-4">These sheets provide a complete explanation of all the new symbols in the game.</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="SETUP" />
|
||
<DescBox>
|
||
<p className="text-center mb-4">Setup follows the normal <i className="italic">7 Wonders</i> rules with the single exception of players receiving <strong>6 Coins</strong> at the beginning of the game (instead of 3 as in the base game).</p>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="GAMEPLAY" />
|
||
<DescBox>
|
||
<p className="mb-4">Gameplay follows the normal <i className="italic">7 Wonders</i> rules with the exception of two new phases:</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="font-bold text-lg mt-2">A. Selection Phase (at the beginning of the game)</p>
|
||
<p className="font-bold text-lg mb-2">B. Recruitment Phase (at the beginning of each Age)</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">A. SELECTION PHASE</h4>
|
||
<p className="mb-4">Randomly and secretly deal <strong>4 Leader cards</strong> to each player. Remaining <strong>Leaders</strong> are put <strong>back in the box</strong>.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mb-4"><strong className="underline">Note:</strong> For your first few games with the Leaders expansion, we recommend only using the Standard Leader cards. When you are familiar with this expansion, shuffle the Expert cards with the other Leaders.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
|
||
<ul className="list-disc pl-5 space-y-2 marker:font-bold mb-4">
|
||
<li>Simultaneously and secretly choose <strong>1 Leader card</strong> from those in your hand and put it face down in front of you.</li>
|
||
<li>When all players have chosen their card, pass your hand of cards <strong>to the neighbor on your right</strong>, still keeping them face down.</li>
|
||
<li>Repeat the previous two steps until you receive and keep a single card from your neighbor.</li>
|
||
</ul>
|
||
|
||
<p className="mb-4"><strong>At the end of this phase</strong>, all players will have a hand of <strong>4 Leaders</strong>.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">Age I can now begin.</p>
|
||
|
||
<hr className="bg-sev-brown border-none h-[3px] w-full my-6" />
|
||
|
||
<h4 className="text-[min(30px,9vw)] font-condensed font-bold underline mb-2 mt-4">B. RECRUITMENT PHASE</h4>
|
||
<p className="mb-4">At the beginning of each Age, during this phase, simultaneously choose 1 of your <strong>Leaders</strong> and place them face down in front of you.</p>
|
||
|
||
<FilledInfoBox className="mb-6">
|
||
<p className="mb-2"><strong>Leader</strong> cards can be played in 3 ways:</p>
|
||
<ol className="list-[upper-alpha] text-sev-brown font-bold text-xl ml-8 space-y-1 marker:font-bold">
|
||
<li><strong>Recruit this Leader</strong></li>
|
||
<li><strong>Construct a stage of your Wonder</strong></li>
|
||
<li><strong>Sell this Leader</strong></li>
|
||
</ol>
|
||
</FilledInfoBox>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-2">A. Recruit this Leader</h5>
|
||
<p className="mb-4">To recruit this <strong>Leader</strong>, reveal your card and pay its cost in Coins (which are then returned to the reserve). Place your recruited <strong>Leader</strong> face up next to your Wonder board. From now on, you can benefit from its effect.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
|
||
<div className="flex items-center gap-4 my-4">
|
||
<img src="/assets/leaders_rules/coin_a.png" alt="" className="h-[50px] drop-shadow-md" loading="lazy" />
|
||
<div>
|
||
<p className="m-0">The cost of certain <strong>Leaders</strong> depends on <strong>the current Age</strong>.</p>
|
||
<p className="m-0">Therefore you will pay 1 Coin in Age I, 2 Coins in Age II, and 3 Coins in Age III.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="text-[#005f7d] italic mb-6"><strong className="underline">Note:</strong> To make things easier, we recommend putting Hannibal and Caesar with your Red cards (military buildings), and Euclide, Ptolemy, and Pythagoras with your Green cards (science buildings) with the corresponding symbol.</p>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-2">B. Construct a stage of your Wonder</h5>
|
||
<p className="mb-6">You can use your <strong>Leader</strong> to construct a stage of your Wonder following the normal <i className="italic">7 Wonders</i> rules.</p>
|
||
|
||
<h5 className="text-[min(25px,9vw)] font-condensed font-bold text-sev-brown mt-4 mb-2">C. Sell this Leader</h5>
|
||
<p className="mb-4">You can sell your <strong>Leader</strong> to take <strong>3 Coins</strong> from the reserve and add them to your Treasure following the normal <i className="italic">7 Wonders</i> rules.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-4">Once Recruitment is finished, the Age can begin following the normal <i className="italic">7 Wonders</i> rules.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-2" />
|
||
<p className="mb-6"><strong>Keep your remaining Leaders face down in front of you; you’ll use them during the next Recruitment phases.</strong></p>
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] my-5 flex flex-col w-full max-w-[800px] self-center">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4">RECRUITMENT IN AGE III</h4>
|
||
<p className="text-center mb-4">During Recruitment at the beginning of Age III, each player will have 2 <strong>Leader</strong> cards. <strong>Choose 1</strong> that you will play normally and return the unchosen <strong>Leader</strong> back in the box.</p>
|
||
<hr className="bg-sev-brown border-none h-[1px] w-full my-4" />
|
||
<p className="text-center text-[#005f7d] italic m-0"><strong className="underline">Note:</strong> If you’re playing with the Night side of the Roma Wonder, keep all of your Leaders in front of you, even the unchosen Leader in Age III.</p>
|
||
</div>
|
||
</DescBox>
|
||
|
||
<RuleHeader title="END OF THE GAME" />
|
||
<DescBox>
|
||
<p className="text-center mb-6">The game ends at the close of Age III, after the Resolution of Military Conflicts. Proceed to scoring victory points following the normal base game rules.</p>
|
||
|
||
<img src="/assets/leaders_rules/counting_score.png" alt="" className="self-center max-h-[400px] max-w-[min(90vw,700px)] mb-8 drop-shadow-md" loading="lazy" />
|
||
|
||
<div className="border-2 border-sev-brown p-[15px] sm:px-[30px] my-5 flex flex-col w-full max-w-[800px] self-center">
|
||
<h4 className="text-center text-[min(25px,9vw)] font-condensed font-bold m-0 mb-4">CLARIFICATION ON <span className="text-[#007f37]">GREEN</span> CARDS</h4>
|
||
<p className="text-center mb-4">In this expansion, it is possible to have more <strong>identical science symbols</strong> than in the base game. Check how many identical symbols you have for each type of symbol and refer to the table below to calculate your victory points:</p>
|
||
|
||
<ScienceTable limit={9} showAsterisk={false} />
|
||
</div>
|
||
</DescBox>
|
||
</SectionContainer>
|
||
|
||
</div>
|
||
|
||
{/* --- DOWNLOADS & SCROLL TOP --- */}
|
||
<div id="downloads" className="flex flex-col items-center gap-5 pb-[100px] mt-10 z-10">
|
||
<h1 className="text-[50px] text-center font-cinzel font-bold text-sev-gold m-0 drop-shadow-md">Printables Download links</h1>
|
||
<a target="_blank" href="/downloads/7_Wonders_Rules.pdf" rel="noreferrer" className="w-[min(400px,80vw)] hover:scale-105 transition-transform grayscale hover:grayscale-0">
|
||
<img src="/assets/logos/SEV_logo_small.png" alt="7 Wonders - Rules PDF" loading="lazy" />
|
||
</a>
|
||
<a target="_blank" href="/downloads/Armada_Rules.pdf" rel="noreferrer" className="w-[min(400px,80vw)] hover:scale-105 transition-transform grayscale hover:grayscale-0">
|
||
<img src="/assets/logos/7AR_logo_small.png" alt="Armada - Rules PDF" loading="lazy" />
|
||
</a>
|
||
<a target="_blank" href="/downloads/Cities_Rules.pdf" rel="noreferrer" className="w-[min(400px,80vw)] hover:scale-105 transition-transform grayscale hover:grayscale-0">
|
||
<img src="/assets/logos/7CI_logo_small.png" alt="Cities - Rules PDF" loading="lazy" />
|
||
</a>
|
||
<a target="_blank" href="/downloads/Edifice_Rules.pdf" rel="noreferrer" className="w-[min(400px,80vw)] hover:scale-105 transition-transform grayscale hover:grayscale-0">
|
||
<img src="/assets/logos/7ED_logo_small.png" alt="Edifice - Rules PDF" loading="lazy" />
|
||
</a>
|
||
<a target="_blank" href="/downloads/Leaders_Rules.pdf" rel="noreferrer" className="w-[min(400px,80vw)] hover:scale-105 transition-transform grayscale hover:grayscale-0">
|
||
<img src="/assets/logos/7LE_logo_small.png" alt="Leaders - Rules PDF" loading="lazy" />
|
||
</a>
|
||
</div>
|
||
|
||
<button
|
||
onClick={scrollToTop}
|
||
className={`fixed bottom-5 right-5 w-[50px] h-[50px] bg-sev-brown rounded-full cursor-pointer flex justify-center items-center shadow-[0_5px_5px_rgba(0,0,0,0.4)] transition-all duration-500 z-50 hover:bg-[#cf8e1e] hover:scale-110 active:scale-95 ${showTopBtn ? 'opacity-100 visible translate-y-0' : 'opacity-0 invisible translate-y-4'}`}
|
||
aria-label="Scroll to top"
|
||
>
|
||
<img src="/assets/common/arrow.svg" alt="Up" className="w-[35px] h-[35px]" />
|
||
</button>
|
||
|
||
</div>
|
||
);
|
||
} |