Ajoute une page de règlement pour le site
This commit is contained in:
@@ -195,6 +195,7 @@
|
|||||||
<button class="button secondary" id="loadDemoButton" type="button">
|
<button class="button secondary" id="loadDemoButton" type="button">
|
||||||
Charger une démo
|
Charger une démo
|
||||||
</button>
|
</button>
|
||||||
|
<a class="button ghost" href="reglement.html">Consulter le règlement</a>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</section>
|
</section>
|
||||||
@@ -233,6 +234,8 @@
|
|||||||
<span class="micro-label">Sources</span>
|
<span class="micro-label">Sources</span>
|
||||||
<strong>Règlements intégrés</strong>
|
<strong>Règlements intégrés</strong>
|
||||||
<p>
|
<p>
|
||||||
|
<a href="reglement.html">Page règlement du site</a>
|
||||||
|
<br />
|
||||||
<a href="ChessCubing_Twice_Reglement_Officiel_V2-1.pdf" target="_blank"
|
<a href="ChessCubing_Twice_Reglement_Officiel_V2-1.pdf" target="_blank"
|
||||||
>Règlement ChessCubing Twice</a
|
>Règlement ChessCubing Twice</a
|
||||||
>
|
>
|
||||||
|
|||||||
352
reglement.html
Normal file
352
reglement.html
Normal file
@@ -0,0 +1,352 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Page règlement officielle du site ChessCubing Arena avec synthèse des formats Twice et Time."
|
||||||
|
/>
|
||||||
|
<title>ChessCubing Arena | Règlement officiel</title>
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body class="rules-body">
|
||||||
|
<div class="ambient ambient-left"></div>
|
||||||
|
<div class="ambient ambient-right"></div>
|
||||||
|
|
||||||
|
<div class="rules-shell">
|
||||||
|
<header class="hero hero-rules">
|
||||||
|
<div class="hero-copy">
|
||||||
|
<p class="eyebrow">Référentiel officiel</p>
|
||||||
|
<h1>Règlement ChessCubing</h1>
|
||||||
|
<p class="lead">
|
||||||
|
Cette page reprend les règles officielles en vigueur du
|
||||||
|
ChessCubing Twice et du ChessCubing Time pour offrir une lecture
|
||||||
|
rapide, claire et directement exploitable en club, en démonstration
|
||||||
|
ou en arbitrage.
|
||||||
|
</p>
|
||||||
|
<div class="hero-pills">
|
||||||
|
<span>Twice V2</span>
|
||||||
|
<span>Time V1</span>
|
||||||
|
<span>Entrée en vigueur le 4 février 2026</span>
|
||||||
|
<span>Fin uniquement par mat ou abandon</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a class="button primary" href="index.html">Retour à l'application</a>
|
||||||
|
<a class="button secondary" href="#formats">Comparer les formats</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<aside class="hero-preview">
|
||||||
|
<div class="preview-card">
|
||||||
|
<p class="micro-label">Repères rapides</p>
|
||||||
|
<div class="rule-metrics">
|
||||||
|
<article class="metric-chip">
|
||||||
|
<span>Block</span>
|
||||||
|
<strong>180 s</strong>
|
||||||
|
</article>
|
||||||
|
<article class="metric-chip">
|
||||||
|
<span>Cube</span>
|
||||||
|
<strong>Obligatoire</strong>
|
||||||
|
</article>
|
||||||
|
<article class="metric-chip">
|
||||||
|
<span>Quotas</span>
|
||||||
|
<strong>6 / 8 / 10</strong>
|
||||||
|
</article>
|
||||||
|
<article class="metric-chip">
|
||||||
|
<span>Chrono cube</span>
|
||||||
|
<strong>Cap 120 s en Time</strong>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-banner">
|
||||||
|
<span class="mini-chip">Deux formats</span>
|
||||||
|
<strong>Même structure, effets différents</strong>
|
||||||
|
<p>
|
||||||
|
Le mode Twice donne l'initiative au gagnant du cube et peut
|
||||||
|
déclencher un double coup. Le mode Time ajuste les chronos sur
|
||||||
|
des blocs - et des blocs +, sans priorité ni double coup.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="rules-grid">
|
||||||
|
<section class="panel panel-wide">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Vue d'ensemble</p>
|
||||||
|
<h2>Le match en 4 temps</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">
|
||||||
|
Les deux règlements partagent la même colonne vertébrale : un
|
||||||
|
match en blocks successifs, interrompus par une phase cube
|
||||||
|
obligatoire.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rules-stage-grid">
|
||||||
|
<article class="stage-card">
|
||||||
|
<span class="micro-label">1. Avant le match</span>
|
||||||
|
<strong>Installation et tirage</strong>
|
||||||
|
<p>
|
||||||
|
L'arbitre contrôle le matériel, les cubes, les caches, les
|
||||||
|
mélanges, puis le tirage au sort qui attribue Blancs ou Noirs.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="stage-card">
|
||||||
|
<span class="micro-label">2. Block chess</span>
|
||||||
|
<strong>180 secondes de jeu</strong>
|
||||||
|
<p>
|
||||||
|
Chaque block comporte une phase d'échecs limitée par une durée
|
||||||
|
fixe et par un quota de coups selon le format FAST, FREEZE ou
|
||||||
|
MASTERS.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="stage-card">
|
||||||
|
<span class="micro-label">3. Phase cube</span>
|
||||||
|
<strong>Un cube identique par joueur</strong>
|
||||||
|
<p>
|
||||||
|
L'application désigne le numéro du cube, les deux joueurs
|
||||||
|
résolvent le même mélange, et le résultat influe ensuite selon
|
||||||
|
le mode choisi.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="stage-card">
|
||||||
|
<span class="micro-label">4. Fin de partie</span>
|
||||||
|
<strong>Jamais au temps</strong>
|
||||||
|
<p>
|
||||||
|
La partie se termine uniquement par échec et mat ou abandon,
|
||||||
|
jamais par simple chute au temps ou dépassement d'un block.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel panel-half">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Matériel commun</p>
|
||||||
|
<h2>Base officielle</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="rule-list">
|
||||||
|
<li>Un échiquier et un jeu de pièces réglementaires.</li>
|
||||||
|
<li>Huit Rubik's Cubes 3x3, soit quatre par joueur.</li>
|
||||||
|
<li>Des caches opaques numérotés de 1 à 4.</li>
|
||||||
|
<li>Des mélanges strictement identiques pour chaque numéro.</li>
|
||||||
|
<li>L'application officielle ChessCubing.</li>
|
||||||
|
<li>Un arbitre pour piloter le match et les transitions.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel panel-half">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Arbitrage</p>
|
||||||
|
<h2>Check-list terrain</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="rule-list">
|
||||||
|
<li>Vérifier la présence des huit cubes et des caches numérotés.</li>
|
||||||
|
<li>Confirmer des mélanges identiques sous chaque numéro.</li>
|
||||||
|
<li>Préparer l'échiquier et la variante dans l'application.</li>
|
||||||
|
<li>Contrôler le tirage au sort avant le premier block.</li>
|
||||||
|
<li>Déclencher chaque phase cube au bon moment.</li>
|
||||||
|
<li>Surveiller le respect du plafond de 120 s en mode Time.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel panel-wide" id="formats">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Formats officiels</p>
|
||||||
|
<h2>Twice et Time, côte à côte</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">
|
||||||
|
Les deux formats partagent les blocks et la phase cube, mais leur
|
||||||
|
logique d'avantage diffère complètement.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="rules-compare">
|
||||||
|
<article class="format-card twice-card">
|
||||||
|
<div class="format-head">
|
||||||
|
<span class="mini-chip">Version V2</span>
|
||||||
|
<h3>ChessCubing Twice</h3>
|
||||||
|
<p>
|
||||||
|
Le gagnant du cube obtient l'initiative sur le block suivant,
|
||||||
|
avec une règle de double coup encadrée.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-badges">
|
||||||
|
<span>Block : 180 s</span>
|
||||||
|
<span>Temps par coup : 20 s max</span>
|
||||||
|
<span>FAST / FREEZE / MASTERS : 6 / 8 / 10</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-section">
|
||||||
|
<h4>Début et fin des blocks</h4>
|
||||||
|
<ul class="rule-list compact">
|
||||||
|
<li>Les Blancs commencent le block 1.</li>
|
||||||
|
<li>Aucun double coup n'est possible au block 1.</li>
|
||||||
|
<li>Un block s'arrête à 180 s ou quand les deux quotas sont atteints.</li>
|
||||||
|
<li>Il est interdit de finir un block avec un roi en échec.</li>
|
||||||
|
<li>
|
||||||
|
Si le dernier coup donne échec, les coups nécessaires pour
|
||||||
|
parer sont joués hors quota.
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-section">
|
||||||
|
<h4>Phase cube</h4>
|
||||||
|
<ul class="rule-list compact">
|
||||||
|
<li>Le numéro du cube est désigné par l'application.</li>
|
||||||
|
<li>Les deux joueurs reçoivent un mélange identique.</li>
|
||||||
|
<li>Le joueur le plus rapide gagne la phase cube.</li>
|
||||||
|
<li>En cas d'égalité parfaite, la phase cube est rejouée.</li>
|
||||||
|
<li>Le gagnant du cube commence le block suivant.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="callout">
|
||||||
|
<span class="micro-label">Double coup V2</span>
|
||||||
|
<strong>Condition stricte</strong>
|
||||||
|
<p>
|
||||||
|
Le gagnant du cube ne doit pas avoir joué le dernier coup du
|
||||||
|
block précédent. Le premier coup est gratuit, non compté,
|
||||||
|
peut capturer mais ne peut pas donner échec. Le second compte
|
||||||
|
comme premier coup du block, peut donner échec, mais ne peut
|
||||||
|
capturer qu'un pion ou une pièce mineure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-section">
|
||||||
|
<h4>Temps par coup et fin de partie</h4>
|
||||||
|
<ul class="rule-list compact">
|
||||||
|
<li>Chaque coup doit être joué en 20 secondes maximum.</li>
|
||||||
|
<li>En dépassement, le coup est perdu et compté dans le quota.</li>
|
||||||
|
<li>Sur le premier coup d'un double coup, le dépassement annule l'avantage.</li>
|
||||||
|
<li>Sur le second coup d'un double coup, le coup est perdu et comptabilisé.</li>
|
||||||
|
<li>La partie se termine uniquement par mat ou abandon.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="format-card time-card">
|
||||||
|
<div class="format-head">
|
||||||
|
<span class="mini-chip">Version V1</span>
|
||||||
|
<h3>ChessCubing Time</h3>
|
||||||
|
<p>
|
||||||
|
Ici, la phase cube n'offre pas l'initiative mais modifie les
|
||||||
|
chronos selon une alternance bloc - puis bloc +.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-badges">
|
||||||
|
<span>Temps initial : 10 min / joueur</span>
|
||||||
|
<span>Block : 180 s</span>
|
||||||
|
<span>Cap cube pris en compte : 120 s</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-section">
|
||||||
|
<h4>Structure temporelle</h4>
|
||||||
|
<ul class="rule-list compact">
|
||||||
|
<li>La structure des blocks est identique à celle du Twice.</li>
|
||||||
|
<li>Les quotas de coups restent les mêmes : 6, 8 ou 10.</li>
|
||||||
|
<li>Chaque block est suivi d'une phase cube obligatoire.</li>
|
||||||
|
<li>Le trait est conservé après la phase cube.</li>
|
||||||
|
<li>Aucun système de priorité ou de double coup n'existe.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="split-callouts">
|
||||||
|
<article class="split-card minus-card">
|
||||||
|
<span class="micro-label">Block impair</span>
|
||||||
|
<strong>Bloc -</strong>
|
||||||
|
<p>
|
||||||
|
Le temps de résolution du cube est retiré du chrono du
|
||||||
|
joueur concerné, avec un plafond de 120 secondes.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="split-card plus-card">
|
||||||
|
<span class="micro-label">Block pair</span>
|
||||||
|
<strong>Bloc +</strong>
|
||||||
|
<p>
|
||||||
|
Le temps de résolution du cube est ajouté au chrono adverse,
|
||||||
|
lui aussi plafonné à 120 secondes.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-section">
|
||||||
|
<h4>Exemples officiels</h4>
|
||||||
|
<ul class="rule-list compact">
|
||||||
|
<li>Bloc - : 35 s retire 35 s à son propre chrono.</li>
|
||||||
|
<li>Bloc - : 110 s retire 110 s à son propre chrono.</li>
|
||||||
|
<li>Bloc + : 25 s ajoute 25 s au chrono adverse.</li>
|
||||||
|
<li>Bloc + : 150 s ajoute 120 s au chrono adverse.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="callout">
|
||||||
|
<span class="micro-label">Reprise du jeu</span>
|
||||||
|
<strong>Pas de coup pendant le cube</strong>
|
||||||
|
<p>
|
||||||
|
Aucun coup ne peut être joué pendant la phase cube. Dès que
|
||||||
|
les deux résolutions sont terminées, les chronos sont ajustés
|
||||||
|
et la partie reprend immédiatement.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="format-section">
|
||||||
|
<h4>Fin de partie et vigilance</h4>
|
||||||
|
<ul class="rule-list compact">
|
||||||
|
<li>La partie s'arrête uniquement par mat ou abandon volontaire.</li>
|
||||||
|
<li>L'arbitre surveille le chronométrage exact et le plafond de 120 s.</li>
|
||||||
|
<li>L'absence de priorité et de double coup fait partie des points clés du mode.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="panel panel-wide">
|
||||||
|
<div class="section-heading">
|
||||||
|
<div>
|
||||||
|
<p class="eyebrow">Sources</p>
|
||||||
|
<h2>Documents officiels</h2>
|
||||||
|
</div>
|
||||||
|
<p class="section-copy">
|
||||||
|
Cette synthèse reprend les versions officielles actuellement
|
||||||
|
embarquées dans l'application.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="source-grid">
|
||||||
|
<a class="source-card" href="ChessCubing_Twice_Reglement_Officiel_V2-1.pdf" target="_blank">
|
||||||
|
<span class="micro-label">PDF officiel</span>
|
||||||
|
<strong>ChessCubing Twice V2</strong>
|
||||||
|
<p>Version entrée en vigueur le 4 février 2026.</p>
|
||||||
|
</a>
|
||||||
|
<a class="source-card" href="ChessCubing_Time_Reglement_Officiel_V1-1.pdf" target="_blank">
|
||||||
|
<span class="micro-label">PDF officiel</span>
|
||||||
|
<strong>ChessCubing Time V1</strong>
|
||||||
|
<p>Version entrée en vigueur le 4 février 2026.</p>
|
||||||
|
</a>
|
||||||
|
<a class="source-card" href="index.html">
|
||||||
|
<span class="micro-label">Application</span>
|
||||||
|
<strong>Retour à ChessCubing Arena</strong>
|
||||||
|
<p>Revenir à la configuration du match et à l'arbitrage mobile.</p>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
262
styles.css
262
styles.css
@@ -142,6 +142,9 @@ p {
|
|||||||
|
|
||||||
.button {
|
.button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
border-radius: 18px;
|
border-radius: 18px;
|
||||||
padding: 0.95rem 1.15rem;
|
padding: 0.95rem 1.15rem;
|
||||||
@@ -156,6 +159,7 @@ p {
|
|||||||
box-shadow 160ms ease,
|
box-shadow 160ms ease,
|
||||||
border-color 160ms ease;
|
border-color 160ms ease;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:hover {
|
.button:hover {
|
||||||
@@ -772,6 +776,241 @@ textarea:focus {
|
|||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rules-shell {
|
||||||
|
position: relative;
|
||||||
|
width: min(1220px, calc(100% - 2rem));
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.2rem 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-rules h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(2.8rem, 6vw, 4.7rem);
|
||||||
|
line-height: 0.94;
|
||||||
|
text-shadow:
|
||||||
|
0 0 12px rgba(30, 214, 255, 0.18),
|
||||||
|
0 0 30px rgba(30, 214, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-metrics {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-chip,
|
||||||
|
.stage-card,
|
||||||
|
.format-card,
|
||||||
|
.split-card,
|
||||||
|
.source-card {
|
||||||
|
position: relative;
|
||||||
|
border-radius: 24px;
|
||||||
|
border: 1px solid var(--panel-border-soft);
|
||||||
|
background:
|
||||||
|
linear-gradient(160deg, rgba(10, 31, 47, 0.96), rgba(3, 13, 21, 0.96));
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 1px rgba(30, 214, 255, 0.03),
|
||||||
|
0 0 22px rgba(30, 214, 255, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-chip,
|
||||||
|
.stage-card,
|
||||||
|
.format-card,
|
||||||
|
.split-card,
|
||||||
|
.source-card {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-chip {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-chip span,
|
||||||
|
.stage-card p,
|
||||||
|
.format-head p,
|
||||||
|
.source-card p,
|
||||||
|
.split-card p {
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.metric-chip strong {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(12, minmax(0, 1fr));
|
||||||
|
gap: 1.2rem;
|
||||||
|
margin-top: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-wide {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-half {
|
||||||
|
grid-column: span 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-third {
|
||||||
|
grid-column: span 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-stage-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rules-compare {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 1rem;
|
||||||
|
padding-top: 1.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-card::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--cool), transparent);
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.twice-card {
|
||||||
|
border-color: rgba(117, 242, 255, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-card {
|
||||||
|
border-color: rgba(125, 247, 189, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-head h3,
|
||||||
|
.format-section h4,
|
||||||
|
.source-card strong {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-head {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.45rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-badges {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-badges span {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.48rem 0.78rem;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid var(--panel-border-soft);
|
||||||
|
background: linear-gradient(180deg, rgba(7, 26, 40, 0.88), rgba(2, 13, 22, 0.92));
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.format-section {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-list {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 1.2rem;
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-list li + li {
|
||||||
|
margin-top: 0.55rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rule-list.compact li + li {
|
||||||
|
margin-top: 0.42rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.45rem;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 22px;
|
||||||
|
border: 1px solid rgba(30, 214, 255, 0.18);
|
||||||
|
background:
|
||||||
|
linear-gradient(145deg, rgba(30, 214, 255, 0.11), rgba(24, 217, 127, 0.08)),
|
||||||
|
linear-gradient(180deg, rgba(3, 14, 23, 0.96), rgba(2, 10, 16, 0.96));
|
||||||
|
}
|
||||||
|
|
||||||
|
.callout p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-callouts {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
gap: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.split-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.minus-card {
|
||||||
|
border-color: rgba(117, 242, 255, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.plus-card {
|
||||||
|
border-color: rgba(125, 247, 189, 0.22);
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-card {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.4rem;
|
||||||
|
color: var(--text);
|
||||||
|
text-decoration: none;
|
||||||
|
transition:
|
||||||
|
transform 160ms ease,
|
||||||
|
border-color 160ms ease,
|
||||||
|
box-shadow 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.source-card:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
text-decoration: none;
|
||||||
|
border-color: rgba(30, 214, 255, 0.34);
|
||||||
|
box-shadow: 0 0 22px rgba(30, 214, 255, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
0%,
|
0%,
|
||||||
100% {
|
100% {
|
||||||
@@ -793,10 +1032,19 @@ textarea:focus {
|
|||||||
.mode-grid,
|
.mode-grid,
|
||||||
.preset-grid,
|
.preset-grid,
|
||||||
.timing-grid,
|
.timing-grid,
|
||||||
.faceoff-board {
|
.faceoff-board,
|
||||||
|
.rules-compare,
|
||||||
|
.rules-stage-grid,
|
||||||
|
.split-callouts,
|
||||||
|
.source-grid {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.panel-half,
|
||||||
|
.panel-third {
|
||||||
|
grid-column: span 12;
|
||||||
|
}
|
||||||
|
|
||||||
.phase-header {
|
.phase-header {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -814,7 +1062,8 @@ textarea:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.setup-shell,
|
.setup-shell,
|
||||||
.phase-shell {
|
.phase-shell,
|
||||||
|
.rules-shell {
|
||||||
width: min(100% - 1rem, 100%);
|
width: min(100% - 1rem, 100%);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -871,6 +1120,11 @@ textarea:focus {
|
|||||||
gap: 0.45rem;
|
gap: 0.45rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rules-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
.opponent-zone .mirrored-mobile {
|
.opponent-zone .mirrored-mobile {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
@@ -930,6 +1184,10 @@ textarea:focus {
|
|||||||
justify-self: end;
|
justify-self: end;
|
||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
|
|||||||
Reference in New Issue
Block a user