:root {
--card-width: 750px;
--card-height: 1050px;
--font-scale: 1.3; /* global scale multiplier */
--title-text-max-font-size: calc(2.5rem * var(--font-scale));
--rules-text-max-font-size: calc(3.22rem * var(--font-scale));
--bible-verse-font-max-font-size: calc(1.85rem * var(--font-scale));
--fun-text-max-font-size: calc(1.95rem * var(--font-scale));
--cost-text-max-font-size: calc(7rem * var(--font-scale));
--copyright-text-max-font-size: calc(1.1rem * var(--font-scale));
--weblink-text-max-font-size: calc(1.35rem * var(--font-scale));
--cardnuminfo-text-max-font-size: calc(0.95rem * var(--font-scale));
--rules-text-font-family: Tahoma;
--rules-text-min-font-size: calc(0.8rem * var(--font-scale));
--rules-text-icon-min-font-size: calc(2rem * var(--font-scale)); /*was 2.2rem 37.96px*/
--costbox-inline-max-font-size: calc(0.9rem * var(--font-scale));
--humility-text-max-font-size: calc(2.2rem * var(--font-scale));
--humility-text-small-icon-font-size: calc(1.7rem * var(--font-scale));
--art-y: 0;
--text-shadow-outline-value:
-1px -1px 0 #d6d6d6,
1px -1px 0 #000,
-1px 1px 0 #7e7e7e,
1px 1px 0 #000;
--text-shadow-outline-on-raw-border-value:
-1px -1px 0 #202020,
2px -2px 0 #000,
-2px 2px 0 #7e7e7e,
1px 1px 0 #000;
--bg-Unction: #ffda67;
--bg-Instant: var(--bg-Unction);
--bg-Maturity: #c8f4b0;
--bg-Resistance: #cacaca;
/*--bg-Habitual_Good: rgb(223, 182, 122);*/
--bg-Habitual_Good: rgb(175, 136, 79);
--bg-Habitual_Evil: #fabc96;
--bg-Temptation: #ffb2b2;
--bible-verse-font-family: var(--fun-font-family);
--art-background-color: rgba(255, 255, 255, 0.75);
--rules-background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.6));
--title-background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
/*rgba(255, 255, 255, 0.75); */
--cost-wrap-top: 5px; /* how far down the wrap “starts” */
--cost-badge-size: 140px; /* match .cost-badge width/height */
--cost-badge-offset-x: 10px; /* same as .cost-badge left */
--cost-badge-offset-y: 10px; /* same as .cost-badge bottom */
/* ============================
SERIF FONTS
============================ */
--font-serif-1: "Cinzel", serif;
--font-serif-2: "Merriweather", serif;
--font-serif-3: "Playfair Display", serif;
--font-serif-4: "Cormorant Garamond", serif;
--font-serif-5: "Old Standard TT", serif;
--font-serif-6: "Libre Baskerville", serif;
--font-serif-7: "Lora", serif;
--font-serif-8: "PT Serif", serif;
--font-serif-9: "Crimson Pro", serif;
--font-serif-10: "Garamond", serif;
/* ============================
SANS-SERIF FONTS
============================ */
--font-sans-1: "Nunito Sans", sans-serif;
--font-sans-2: "Montserrat", sans-serif;
--font-sans-3: "Lato", sans-serif;
--font-sans-4: "Roboto", sans-serif;
--font-sans-5: "Open Sans", sans-serif;
--font-sans-6: "Poppins", sans-serif;
--font-sans-7: "Ubuntu", sans-serif;
--font-sans-8: "Josefin Sans", sans-serif;
--font-sans-9: "Oswald", sans-serif;
--font-sans-10: "Raleway", sans-serif;
/* ============================
DISPLAY / TITLE FONTS
============================ */
--font-display-1: "Bebas Neue", sans-serif;
--font-display-2: "Anton", sans-serif;
--font-display-3: "Cinzel Decorative", serif;
--font-display-4: "Uncial Antiqua", serif;
--font-display-5: "Staatliches", sans-serif;
--font-display-6: "IM Fell English SC", serif;
--font-display-7: "MedievalSharp", cursive;
--font-display-8: "Black Ops One", sans-serif;
--font-display-9: "Squada One", sans-serif;
--font-display-10: "Fjalla One", sans-serif;
/* ============================
CONDENSED FONTS
============================ */
--font-condensed-1: "Oswald", sans-serif;
--font-condensed-2: "Bebas Neue", sans-serif;
--font-condensed-3: "Roboto Condensed", sans-serif;
--font-condensed-4: "Anton", sans-serif;
--font-condensed-5: "PT Sans Narrow", sans-serif;
/* ============================
SCRIPT / CALLIGRAPHY
============================ */
--font-script-1: "Dancing Script", cursive;
--font-script-2: "Great Vibes", cursive;
--font-script-3: "Allura", cursive;
--font-script-4: "Satisfy", cursive;
--font-script-5: "Parisienne", cursive;
/* ============================
HANDWRITTEN
============================ */
--font-hand-1: "Shadows Into Light", cursive;
--font-hand-2: "Indie Flower", cursive;
--font-hand-3: "Patrick Hand", cursive;
--font-hand-4: "Caveat", cursive;
--font-hand-5: "Architects Daughter", cursive;
/* ============================
FANTASY / THEMATIC
============================ */
--font-fantasy-1: "MedievalSharp", cursive;
--font-fantasy-2: "Uncial Antiqua", serif;
--font-fantasy-3: "Cinzel Decorative", serif;
--font-fantasy-4: "Trade Winds", cursive;
--font-fantasy-5: "Rye", cursive;
/* ============================
MONOSPACE (just in case)
============================ */
--font-mono-1: "Source Code Pro", monospace;
--font-mono-2: "Roboto Mono", monospace;
--font-mono-3: "Fira Code", monospace;
--font-mono-4: "Courier Prime", monospace;
--font-mono-5: "JetBrains Mono", monospace;
--font-perfect: "BEAGLB", serif;
--primary-card-font-family: var(--font-perfect);
--secondary-card-font-family: "Bebas Neue", serif;
--fun-font-family: var(--font-perfect);
}
body {
margin: 0;
padding: 16px;
font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
background: #222;
color: #eee;
display: flex;
gap: 16px;
box-sizing: border-box;
}
h1 {
margin-top: 0;
font-family: var(--primary-card-font-family);
}
.layout {
display: flex;
gap: 24px;
width: 100%;
}
.design button {
font-size: smaller;
max-width: 50px;
}
.field {
margin-bottom: 10px;
}
.field label {
display: block;
font-size: 0.86rem;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 3px;
color: #ccc;
}
.field input[type="text"],
.field input[type="number"],
.field textarea,
.field select {
width: 100%;
box-sizing: border-box;
border-radius: 4px;
border: 1px solid #555;
padding: 6px 8px;
font-size: 0.9rem;
background: #222;
color: #f5f5f5;
}
.field textarea {
resize: vertical;
min-height: 60px;
}
.field-hflex {
display: flex;
gap: 8px;
}
button {
padding: 8px 14px;
border-radius: 4px;
border: none;
background: #3ba96c;
color: white;
font-weight: 600;
cursor: pointer;
margin-top: 6px;
}
button:hover {
background: #2f8855;
}
/* Right: card preview */
.preview-wrapper {
flex: 1;
display: flex;
/*justify-content: center;*/
align-items: flex-start;
overflow: auto;
}
.preview-wrapper {
justify-content: flex-start !important;
}
#card-preview {
position: relative;
width: var(--card-width);
height: calc(var(--card-height) + 50px);
box-sizing: border-box;
background-size: cover;
background-position: center;
border-radius: 40px;
box-shadow: 0 0 25px rgba(0,0,0,0.8);
color: #000;
font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
}
#card-preview-alt {
position: relative;
width: var(--card-width);
height: calc(var(--card-height) + 50px);
box-sizing: border-box;
background-size: cover;
background-position: center;
border-radius: 40px;
box-shadow: 0 0 25px rgba(0,0,0,0.8);
color: #000;
font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
}
/* Inner frame */
.card-inner {
position: absolute;
inset: 24px;
border-radius: 28px;
box-sizing: border-box;
padding: 18px 22px 22px 22px;
}
/* Title bar */
.card-title-bar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
margin-top: -15px;
}
.card-title-pill {
background: var(--title-background);
border-radius: 16px;
padding: 6px 18px;
font-family: var(--primary-card-font-family);
font-size: var(--title-text-max-font-size);
font-weight: 600;
box-shadow: 0 2px 0 rgba(0,0,0,0.25);
max-width: 82%;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.long-title-gt50 {
font-size: 1.4em;
}
.long-title-gt30 {
font-size: 1.7em;
}
.long-title-gt20 {
font-size: 2.1em;
}
.card-subtype-tag {
position: absolute;
right: 0;
top: 20px;
background: #c68a8a;
color: white;
padding: 4px 10px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
.card-type-tag {
position: absolute;
right: 0;
top: 0;
background: #ffffff;
padding: 4px 10px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
/* box-shadow: 0 2px 0 rgba(0,0,0,0.25); */
}
/* Art area */
.card-art {
position: relative;
height: 500px;
margin-bottom: 10px;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.12);
}
.card-art img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-art img {
width: 100%;
height: 100%;
object-fit: cover;
/* TRUE transparency fade-out */
mask-image: linear-gradient(to bottom,
black 0%,
black 60%,
transparent 100%
);
-webkit-mask-image: linear-gradient(to bottom,
black 0%,
black 60%,
transparent 100%
);
}
.card-art {
position: relative;
height: 500px;
margin-bottom: 10px;
border-radius: 14px;
overflow: hidden;
/* no white fill, just the border */
background: transparent;
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.12);
}
/* remove the white overlay entirely */
.card-art::after {
content: none;
}
.card-art-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.1rem;
color: #666;
}
/* Art stays where it is (you can adjust height if you want more art) */
.card-art {
position: relative;
height: 520px; /* a bit taller so art covers more */
margin-bottom: 0; /* no hard gap below the art */
border-radius: 14px;
overflow: hidden;
background: transparent;
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.12);
z-index: 1;
}
/* Rules box overlaps the art and has top padding for breathing room */
.card-rules {
position: relative;
z-index: 2; /* above the art */
margin-top: -80px; /* pull rules box up over the art */
border-radius: 14px;
padding: 60px 16px 12px; /* ⬅ top padding so text doesn't start right away */
height: calc(100% - 20px);
max-height: calc(100% - 20px);
/* subtle translucent background so art still peeks through at top */
background: linear-gradient(
to bottom,
rgba(255,255,255,0.0) 0%,
rgba(255,255,255,0.5) 30%,
rgba(255,255,255,0.8) 100%
);
}
.card-inner {
position: absolute;
inset: 24px;
border-radius: 28px;
box-sizing: border-box;
padding: 18px 22px 22px 22px;
display: flex;
flex-direction: column;
}
.card-rules {
background: var(--rules-background);
border-radius: 14px;
padding: 12px 16px;
height: calc(100% - 10px);
max-height: calc(100% - 160px);
min-height: calc(100% - 350px);
}
.fulltext .card-art{
height: 0;
}
.fulltext .card-rules{
margin-top: 45px;
height: 100%;
max-height: 100%;
}
.tallart .card-art{
height: 100% !important;
max-height: 1000px !important;
}
/* if the height of the image changes then the scale of the width changes too... */
.tallart #previewArt{
height: 150% !important;
max-height: 1000px !important;
}
/* Make tallart actually give most of the card to the art */
/* Make sure tallart is added to #card-preview (or another ancestor of .card-art/.card-rules) */
.tallart .card-inner {
display: flex;
flex-direction: column;
}
/* Let the art eat most of the vertical space */
.tallart .card-art {
flex: 1 1 auto;
height: auto !important;
max-height: none !important;
margin-bottom: 6px; /* small gap before rules */
}
/* Let the rules shrink to just their content */
.tallart .card-rules {
flex: 0 0 auto;
margin-top: 0;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
padding-top: 8px; /* adjust as you like */
}
.rules-text {
margin-bottom: 6px;
font-family: var(--rules-text-font-family);
font-size: var(--rules-text-max-font-size); /* important */
}
.bible-verse {
font-family: var(--bible-verse-font-family);
font-style: italic;
font-size: var(--bible-verse-font-max-font-size);
margin-top: 10px;
overflow: hidden;
color: #420000;
text-shadow: 0 0 2px #fff;
}
.fun-text {
margin-top: 4px;
font-family: var(--fun-font-family);
font-size: var(--fun-text-max-font-size);
font-style: italic;
color: #190000;
text-shadow: 0 0 2px #fff;
}
/* SQUARE badge: equal width/height for single digits ("1", "2", "X") with
* near-square corners; longer content (e.g. "10") widens but keeps the
* height, so all rules-text boxes sit on the same square rhythm. */
.rules-text-icon{
display: inline-block;
box-sizing: border-box;
border-radius: 0.18em;
font-size: var(--rules-text-icon-min-font-size);
padding-left: 0.22em;
padding-right: 0.22em;
color: white;
box-shadow: 0 0 0 3px #ffffff, 0 3px 0 rgba(0, 0, 0, 0.3);
font-weight: bold;
min-width: 1.35em;
height: 1.35em;
line-height: 1.35em;
text-align: center;
}
.tilde-box.tilde-BB .desc::before {
/*content: 'Boosts below...';*/
}
.tilde-box.tilde-BB{
background: rgba(208, 250, 249, 0.75);
padding: 3px;
display: inline-block;
margin-top: 7px;
width: 99%;
}
/* U~bob~ */
.tilde-box.tilde-U {
background: #abecc5;
color: black;
}
.tilde-box {
margin-bottom: 1px;
}
.card-type-tag {
background: transparent !important;
border: none !important;
}
.card-type-tag:has(.cimgref-Unction) {
background: var(--bg-Unction);
}
.card-type-tag:has(.cimgref-Maturity) {
background: var(--bg-Maturity);
}
.card-type-tag:has(.cimgref-Resistance) {
background: var(--bg-Resistance);
}
.card-type-tag:has(.cimgref-Habitual_Good) {
background-color: var(--bg-Habitual_Good);
}
.card-type-tag:has(.cimgref-Habitual_Evil) {
background-color: var(--bg-Habitual_Evil);
}.card-type-tag:has(.cimgref-Temptation) {
background-color: var(--bg-Temptation);
}
#previewType{
transform: rotate(45deg) scale(1.1);
margin-top: 20px;
border: 1px solid darkgray;
}
/* Per-ICON tilt exceptions (kept in sync with game.css): the kittens cat
tower is a building — keep it upright instead of the 45° tag tilt. */
#previewType:has(.cimgref-Habitual_Good_kittens){
transform: rotate(0deg) scale(1.1);
}
#previewTypeAlt {
margin-top: 0px;
margin-right: 10px;
border: 1px solid darkgray;
}
#previewTypeAlt:has(.cimgref-Temptation_romanwar){
transform: rotate(90deg) scale(1.1);
margin-top: 40px;
margin-right: 35px;
}
#previewTypeAlt:has(.cimgref-Resistance_romanwar){
transform: scale(0.9); /* this is a bit big, lets scale it down*/
margin-top: 15px;
margin-right: -40px;
}
.fulltext.tallart .rules-text{
margin-top: 25px;
}
#previewTypeAlt:has(.cimgref-Maturity){
margin-top: 23px;
margin-right: -45px;
}
#previewType:has(.cimgref-Habitual_Evil){
margin-top: -15px;
margin-right: 20px;
}
img.ctype.ctype-Maturity {
transform: rotate(-20deg);
margin-top: -58px;
margin-left: -27px;
height: auto;
width: 128px;
}
img.ctype.ctype-Unction {
transform: rotate(-20deg);
margin-top: -40px;
margin-left: 10px;
}
.alt-preview img.ctype.ctype-Unction {
transform: rotate(0deg);
margin-top: -20px;
margin-left: 20px;
margin-right: -20px;
}
img.ctype.ctype-Temptation {
margin-top: -62px;
margin-left: -29px;
width: 128px;
height: auto;
transform: rotate(-90deg);
}
img.ctype.ctype-Resistance {
margin-top: -40px;
margin-left: -25px;
width: 120px;
height: auto;
}
#previewType:has(img.ctype) {
width: 70px;
text-align: center;
}
img.ctype {
height: 100px;
width: auto;
background: transparent !important;
mix-blend-mode: normal !important;
isolation: isolate;
}
img.ctype.ctype-Habitual {
margin-top: -45px;
margin-left: -10px;
}
.discard-from-cost-zone-box {
background: #958f8f;
}
.humility-box {
background: #8ee6a8;
}
.humility-box {
all: unset;
position: relative;
display: inline-block;
width: 0;
height: 0;
border-left: 28px solid transparent;
border-right: 28px solid transparent;
border-bottom: 40px solid #05d587; /* triangle */
top: -8px;
vertical-align: middle;
}
.humility-box .humility-text {
all: unset;
position: absolute;
left: 50%;
top: 25px;
transform: translate(-50%, -50%);
font-size: var(--humility-text-max-font-size);
font-weight: bold;
color: white;
-webkit-text-stroke: 1px #005a27;
text-shadow: 0 0 3px #000000, 0 0 6px #292828;
}
.middle-icon .humility-box .humility-text {
font-size: calc(var(--humility-text-small-icon-font-size) * 0.55);
-webkit-text-stroke: 0.5px #005a27;
text-shadow: 0 0 2px #000000, 0 0 4px #292828;
top: 13px; /* optional: adjust vertical position for smaller size */
}
.small-icon .humility-box .humility-text {
font-size: calc(var(--humility-text-small-icon-font-size) * 0.55);
-webkit-text-stroke: 0.5px #005a27;
text-shadow: 0 0 2px #000000, 0 0 4px #292828;
top: 13px; /* optional: adjust vertical position for smaller size */
}
.humility-box {
position: relative;
display: inline-block;
width: 0;
height: 0;
/* inner triangle (your current green one) */
border-left: 26px solid transparent;
border-right: 26px solid transparent;
border-bottom: 36px solid #05d587; /* inner fill */
}
/* OUTLINE BEHIND (slightly larger triangle) */
.humility-box::before {
content: "";
position: absolute;
width: 0;
height: 0;
/* outline size = inner size + outline thickness */
border-left: 30px solid transparent; /* matching expansion */
border-right: 30px solid transparent;
border-bottom: 41px solid #004c2b; /* outline color */
top: 0px; /* MUST equal difference between outline & inner */
left: -33px; /* MUST be centered offset */
z-index: -1; /* places outline behind inner triangle */
}
.humility-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
/* outline size = inner size + outline thickness */
border-left: 30px solid transparent; /* matching expansion */
border-right: 30px solid transparent;
border-bottom: 41px solid #004c2b; /* outline color */
top: -10px; /* MUST equal difference between outline & inner */
left: -30px; /* MUST be centered offset */
z-index: -1; /* places outline behind inner triangle */
}
/* SMALLER INNER TRIANGLE — only inside .small-icon */
.small-icon .humility-box {
position: relative;
display: inline-block;
width: 0;
height: 0;
/* inner triangle */
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 18px solid #05d587; /* green fill */
}
/* OUTLINE LAYERS — only inside .small-icon */
.small-icon .humility-box::before,
.small-icon .humility-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
/* outline slightly larger than inner triangle */
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 24px solid #004c2b;
z-index: -1;
}
/* bottom outline */
.small-icon .humility-box::before {
top: -3px;
left: -20px;
}
/* top/upper outline */
.small-icon .humility-box::after {
top: -5px;
left: -20px;
}
/* TINY INNER TRIANGLE — only inside .tiny-icon */
.tiny-icon .humility-box {
position: relative;
display: inline-block;
width: 0;
height: 0;
/* inner triangle (smaller) */
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 12px solid #05d587; /* green fill */
}
/* OUTLINE LAYERS — only inside .tiny-icon */
.tiny-icon .humility-box::before,
.tiny-icon .humility-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
/* outline slightly larger than inner */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 14px solid #004c2b;
z-index: -1;
}
/* bottom outline */
.tiny-icon .humility-box::before {
top: -1px;
left: -10px;
}
/* top/upper outline */
.tiny-icon .humility-box::after {
top: -2px;
left: -10px;
}
/* MIDDLE INNER TRIANGLE — between .small-icon and .tiny-icon */
.middle-icon .humility-box {
position: relative;
display: inline-block;
width: 0;
height: 0;
/* inner triangle (mid-size) */
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 15px solid #05d587; /* green fill */
}
/* OUTLINE LAYERS — only inside .middle-icon */
.middle-icon .humility-box::before,
.middle-icon .humility-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
/* outline slightly larger than inner */
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 18px solid #004c2b;
z-index: -1;
}
/* bottom outline */
.middle-icon .humility-box::before {
top: -2px;
left: -14px;
}
/* top/upper outline */
.middle-icon .humility-box::after {
top: -3px;
left: -14px;
}
.draw-to-hand-box{
background-color: #2892ff;
}
.tilde-box.tilde-D{
background-color: #2892ff;
color: white;
}
.cost-box {
background: #22a12a;
box-shadow: 0 0 0 3px #5a5a5a, 0 3px 0 rgba(0, 0, 0, 0.3);
}
.card-graphics-img.Any-Boost{
width: 60px;
height: auto;
vertical-align: -14.46px;
}
.card-graphics-img.Self-Boost{
width: 60px;
height: auto;
vertical-align: -14.46px;
}
.card-graphics-img.Brotherly-Boost{
width: 60px;
height: auto;
vertical-align: -14.46px;
}
/* A# IS ORANGE, NOT RED — it was too close to R# to tell apart.
The two chips carry different questions: A is an amount taken away, R is what
an opponent pays to answer this card. Both were red — #a12222 and #7d1420 —
and measured 23 apart under protanopia, which is not a difference, it is two
dark red squares. Orange is 93 away from R under every kind of vision.
Burnt rather than bright: a lighter orange lands on the green cost chip once
red-green vision is simulated, and this one keeps white text at 4.7x. */
.negative-box{
background: #b85a10;
}
/* R# — THE COUNTER/RESIST COST, WRITTEN INSIDE A RULE.
The card already carries this value as a badge in its corner: on an evil
card what Righteous pays to resist it, on a righteous one what Evil pays to
counter it. So the inline chip wears the badge's own colours — #7d1420 with
the pale ring, the same pair resistCostDefaults() in layouts.php dresses the
box with — and a reader meets one thing twice rather than two things once.
The negative box was #a12222 and near enough to this to be unreadable at a
glance — 23 units apart under protanopia — so A# is burnt orange now and the
counter cost keeps the badge's red. An attack and a counter cost are
different numbers; telling them apart should not require remembering which
red is which. */
.resist-box {
background: #7d1420;
box-shadow: 0 0 0 3px #f0d3d3, 0 3px 0 rgba(0, 0, 0, 0.3);
}
.cost-colon {
font-size: 2.8rem;
font-weight: bold;
margin-left: 2px;
}
/* A note explaining an attribute begins on the attribute's own line. A
tilde-box is inline-block and so cannot break, which pushed the whole note
below "Reversal 1" and made it read as a separate rule rather than as the
explanation of the chip above it. box-decoration-break:clone keeps the
padding and rounded ends on each line fragment once it does wrap. Scoped to
a note directly following an attribute chip, so every other N~ ~ keeps the
block it was proofed with. Stated in layouts.php too, for the printed face. */
.ccg-attr + .tilde-box.tilde-N {
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.tilde-box {
font-size: smaller;
background: lightgoldenrodyellow;
border-radius: 10px;
display: inline-block;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 5px;
}
.boost-keywords {
font-weight: bold;
font-size: 0.9em;
}
/* Cost badge bottom-left */
.cost-badge {
position: absolute;
left: -13px;
bottom: -13px;
width: 140px;
height: 140px;
border-radius: 16px;
border: 1px solid black;
background: #22a12a;
box-shadow:
0 6px 14px rgba(0, 0, 0, 0.55), /* main soft shadow */
0 2px 4px rgba(0, 0, 0, 0.45); /* subtle closer shadow */
display: flex;
align-items: center;
justify-content: center;
font-size: var(--cost-text-max-font-size);
font-weight: 700;
color: #fff;
font-family: var(--primary-card-font-family);
}
/* Copyright & link bottom center */
.copyright-line {
position: absolute;
left: 135px;
bottom: 0px;
font-family: var(--primary-card-font-family);
font-size: var(--copyright-text-max-font-size);
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: var(--text-shadow-outline-value);
}
.fulltext.tallart #previewCopyrightText {
font-size: var(--copyright-text-max-font-size);
}
.fulltext.tallart .card-footer{
text-align: right;
}
.fulltext.tallart .copyright-line {
position: static;
display: inline-block;
text-align: right;
left: 136px;
bottom: 50px;
font-family: var(--primary-card-font-family);
font-size: var(--copyright-text-max-font-size);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: var(--text-shadow-outline-value);
text-shadow: var(--text-shadow-outline-on-raw-border-value);
color: black;
}
.copyright-line span {
white-space: nowrap;
}
/* Card info bottom-right */
.card-info-block {
position: absolute;
right: 55px;
bottom: 5px;
font-size: var(--cardnuminfo-text-max-font-size);
text-align: right;
}
/* Icon slot (top right of text box) */
.card-icon-slot {
position: absolute;
right: 6px;
bottom: 6px;
width: 40px;
height: 40px;
border-radius: 10px;
border: 1px solid rgba(0,0,0,0.2);
background: rgba(255,255,255,0.7);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
text-align: center;
padding: 4px;
box-sizing: border-box;
z-index: 10;
}
.card-icon-slot img {
width: 100%;
height: 100%;
/* object-fit: contain;*/
}
/* Default neutral background (replace with your own) */
#card-preview.gold {
background-image: url("../../../sets/back_FireGrassIceStone4.png");
background-color: #d6aa4c;
}
#card-preview.fire {
background-image: url("../../../sets/back_Fire2.png");
}
#card-preview.firehabitual {
background-image: url("../../../CardBorders/back_fire_habitual7.png");
}
#card-preview.grass {
background-image: url("../../../sets/back_Grass3.png");
}
#card-preview.ice {
background-image: url("../../../sets/back_Ice4.png");
}
#card-preview.stone {
background-image: url("../../../sets/back_Stone5.png");
}
.card-footer {
position: absolute;
bottom: 25px;
width: 635px; /* calc(30px - var(--card-width)); */
height: 100px;
margin-top: 6px;
padding: 10px 12px 12px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.6);
font-size: 0.96rem;
line-height: 1.3;
max-height: 35px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
z-index: 999;
}
/* Inner frame becomes a flex column */
.card-inner {
position: absolute;
inset: 24px;
border-radius: 28px;
box-sizing: border-box;
padding: 18px 22px 22px 22px;
display: flex;
flex-direction: column;
}
/* Make sure footer / cost float above if ever overlapping */
.cost-badge,
.copyright-line,
.card-info-block {
z-index: 5;
}
.card-graphics-img {
/* --glyph-x: the size factor from "#unction-1.5x#", 1 when not given.
1.04em, and the number still comes from the coin it stands beside: that
coin is 1.35em tall in its own em at font-size .70em — 0.945em here —
and its white ring is drawn OUTSIDE that, so what the eye measures is
0.945 + 2 × 0.07 × 0.70 = 1.04em. The earlier 1.22 was the same sum with
the coin at .82em; both numbers moved down together because the question
was never "how big is the coin" but "how big is the capital letter" —
a cap is about 0.70em, and a mark three quarters taller than the letter
beside it reads as a picture in the line rather than a symbol in it.
Matching the box and ignoring its ring leaves the glyph visibly short,
which is the shape of getting the arithmetic right and the question
wrong — so keep counting the ring. */
height: calc(0.96em * var(--glyph-x, 1));
width: auto; /* keep aspect ratio */
margin-right: 0.15em; /* spacing that also scales with font size */
display: inline-block;
/* The mark's MIDDLE on the cap's middle: -0.17em = 0.35 - 1.04/2. Sat on
the baseline (the old -0.1em, near enough to none) a tall mark can only
grow upward, so the words looked lifted off the icons beside them. */
vertical-align: -0.17em;
}
.card-graphics-img.rotate {
transform: translateY(2px);
display: inline-block;
}
/* THE TOKEN BODY IS PARCHMENT, so the tap glyph is not inverted here.
It used to be, and the rule said why: the glyph is dark and vanished against
the token's dark body. The body became a parchment mini-card -- the gradient
is a few lines below this -- and the inversion stayed, so "created already
spent" printed as a black disc with a white arrow: the one place on the card
showing a negative of the symbol used everywhere else. The plain glyph
already carries its own pale plate and dark ring, which is what makes it
readable on any background, including this one. */
/* Inline COUNTER glyph (theme-neutral clock icon with an optional sign/number
overlaid on the face). Mirrors the board's game.css so the standalone
CardRenderer (view-card.php, _card_render.php) shows the overlay centered. */
/* A COUNTER VALUE TOO LONG FOR THE COIN sits beside it instead of over it.
"+2" fits on the face; "+X+1" ran past both edges and printed over the words
either side. Same mark, read left to right, and it keeps its size with the
text around it rather than shrinking until it is not readable. */
.counter-glyph.counter-glyph-wide { margin-right: 0.1em; }
.counter-glyph .counter-glyph-beside {
margin-left: 0.12em;
font-weight: 800;
font-size: 0.86em;
white-space: nowrap;
vertical-align: baseline;
}
.counter-glyph {
position: relative;
/* Its own stacking context, so the value's z-index is measured against the
dial beside it and not against whatever the card happens to be doing. */
isolation: isolate;
display: inline-block;
vertical-align: -0.13em;
line-height: 1;
margin-right: 0.15em;
}
.counter-glyph img.card-graphics-img.counter {
/* 0.96em: the one height every inline mark shares — chip, coin, wedge and
glyph — so a line holding several of them sits straight. At 1.15 the dial
stood above the boxes beside it. Stated in layouts.php too; move both. */
height: 0.96em;
width: auto;
margin-right: 0;
vertical-align: middle;
display: inline-block;
}
.counter-glyph-overlay {
position: absolute;
/* 57%, not 50%: the dial is a clock face whose clear centre sits below the
middle of its box — above it are the rim and the twelve o'clock tick — so
arithmetic centring left the value riding high against that tick. Stated
in layouts.php as well, which is the copy the printed face obeys. */
top: 57%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Cinzel', serif;
/* DARK TYPE ON A LIGHT DIAL, WHICH NEEDS NO OUTLINE AT ALL.
icon_counter.svg is a pale clock face — #edf5ff inside a #6aa9ff rim — and
the value was set WHITE on it. White on near-white cannot be read, so it
was given a 0.16em black stroke to survive, and at weight 900 that
outline was thicker than the strokes it outlined: "+X" set as a black
lozenge with a white crack through it.
The outline was solving a problem the colour made. Navy on the pale face
reads on its own — it is the colour of the dial's own tick marks — so
there is nothing to outline, and what is left is a value rather than a
blot. The faint light halo is only for the case where a tall glyph
touches the rim. */
font-weight: 800;
font-size: 0.92em; /* the per-length rules below set the real size */
letter-spacing: -0.01em;
line-height: 1;
color: #ffffff;
/* ABOVE THE DIAL, NOT IN IT. The icon is an ![]()
in the same stacking
context; without this the value can be painted under it depending on
source order, which reads as a counter with nothing on it. */
z-index: 2;
/* WHITE INSIDE A HARD BLUE EDGE. The dial has hands and tick marks under
it, so the value needs something of its own — but a plate covers the
clock and an outline does not, which is the difference asked for.
The blue is the rim's own colour, darkened, so the edge belongs to the
icon rather than being a black line drawn on it.
0.17em at weight 800 — 18% of the glyph's height, where the lozenge
began at 20%, so it is as hard as it goes with a margin rather than a
hope. The tracking opens by the same amount it thickens: a wider outline
needs somewhere to put itself, and two characters set tight will meet
through their strokes long before the letters touch. the first attempt was 0.16em at weight 900 and the two characters'
outlines met in the middle. The dial's ticks and hands were greyed at the
same time — half this problem was behind the letters, not around them,
and a heavier outline alone would have gone back to the lozenge trying to
out-shout them. */
-webkit-text-stroke: 0.17em #14245e;
paint-order: stroke fill;
/* A GROUND OF ITS OWN, WHICH IS WHAT THE OTHER MARKS HAVE.
Dark ink on the pale dial was still hard to read, and the reason is that
the dial is not a flat colour: it has hands and twelve tick marks, and a
"-1" sitting across a hand is a "-1" with a line through it. A halo
cannot fix that — it softens the edge of the letter, it does not hide
what is behind it.
Every other mark on a card already solves this the same way: the cost
coin, the X chip and the -1 triangle are all dark-or-white ink on a
SOLID shape. So the counter's value gets one too — a small pale plate in
the dial's own face colour, which reads as part of the clock rather than
as something stuck on it, with a hairline ring so it does not dissolve
into the lighter parts of the face. */
/* A whisper of a shadow, for engines that ignore -webkit-text-stroke —
not a halo: the stroke is the contrast. */
text-shadow: 0 1px 1px rgba(10,16,44,.45);
white-space: nowrap;
pointer-events: none;
}
.counter-glyph-overlay.cg-len1 { font-size: 0.94em; -webkit-text-stroke-width: 0.17em; }
.counter-glyph-overlay.cg-len2 { font-size: 0.72em; letter-spacing: 0.035em;
-webkit-text-stroke-width: 0.13em; }
.counter-glyph-overlay.cg-len3 { font-size: 0.58em; letter-spacing: 0.025em;
-webkit-text-stroke-width: 0.105em; }
#card-preview {
background-size: contain; /* <— ALWAYS SHOW FULL BACKGROUND */
background-repeat: no-repeat;
background-position: center;
}
.alt-preview-wrap { margin-top: 18px; }
.footer-link {
font-family: var(--primary-card-font-family);
font-size: var(--weblink-text-max-font-size);
}
#previewCopyrightText {
display: block;
}
.card-scale-wrapper {
width: 100%;
max-width: 750px;
margin: 0 auto;
transform-origin: top left;
}
#card-preview {
border-radius: 20px;
}
#card-preview {
background-size: cover !important;
background-repeat: no-repeat;
background-position: center;
}
/* Optional: style the toggle button */
#toggleCardScaleBtn {
margin-top: 10px;
background: #498df0;
border-radius: 6px;
color: #fff;
font-weight: 600;
}
#toggleCardScaleBtn:hover {
background: #3a6fbe;
}
#card-preview {
transition: transform 0.25s ease;
}
/* Base (1 digit) */
.cost-badge {
font-size: var(--cost-text-max-font-size);
}
/* 2 digits */
.cost-badge.len-2 {
font-size: calc(var(--cost-text-max-font-size) * 0.75);
}
/* 3 digits (or 2 chars like "5X") */
.cost-badge.len-3 {
font-size: calc(var(--cost-text-max-font-size) * 0.55);
}
/* 4+ chars ("10X", "0–50", etc.) */
.cost-badge.len-4 {
font-size: calc(var(--cost-text-max-font-size) * 0.60);
}
.cost-badge {
z-index: 1000;
}
.card-title-bar {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
width: max(100%, calc( var(--card-width) - 60px) );
text-align: left;
justify-content: left;
}
#cardArtDropZone {
cursor: pointer;
outline: none;
}
#cardArtDropZone:focus {
box-shadow: inset 0 0 0 2px rgba(0,0,0,0.35);
}
#rulesText {
height: 250px;
}
.btnFieldSave, .btnOptSave{
font-size: 0.75rem;
padding: 2px;
display: inline-block;
float: right;
}
[data-unsaved="true"] {
background-color: rgba(243, 227, 144, 0.2) !important;
color: black;
}
.math-symbol-let-x {
font-weight: bold;
text-transform: uppercase;
}
.math-symbol{
font-weight: bold;
font-size:1.3em;
}
.placeholder-wrap-container{
position: relative;
line-height: 1.2;
white-space: normal; /* ensures wrapping */
overflow-wrap: break-word;
word-break: break-word;
}
/* This is the invisible anchor the text wraps around */
.placeholder-div {
width: 80px; /* should match your cost box width */
shape-outside: inset(0); /* required for wrapping */
pointer-events: none;
}
.gdimage-preview {
/*position: absolute;
bottom: 0;*/
}
.gdimage-preview img {
display: block;
}
.top-bottom-flex {
flex: 1; /* this column grows */
display: flex;
flex-direction: column;
gap: 20px;
}
/* override old rule */
.preview-wrapper {
flex: 0 0 auto; /* don't stretch vertically */
display: flex;
align-items: flex-start;
overflow: visible; /* or auto, your choice */
}
.gdimage-preview {
flex: 0 0 auto; /* also just its natural height */
}
.rounded.down{
font-size: smaller;
}
/** this doesn't work right now **/
.boost-summary {
display: none;
font-size: 0.6em;
font-style: italic;
background: #d0faf9;
padding: 3px;
}
.rules-text h1, h2, h3, h4, h5, h6 {
margin: 0;
margin-bottom: 3px;
}
.rules-text ul {
list-style-type: none;
padding-left: 0;
}
button.down {
background: #456a3c;
}
/* container holding form + preview */
.field-hflex.card-layout { /* or whatever wrapper you use */
display: flex;
align-items: flex-start;
}
/* LEFT COLUMN: Card Designer form */
.card-form {
flex: 0 0 420px; /* or whatever width you like */
max-width: 420px;
/* IMPORTANT: remove fixed height/own scroll */
height: auto;
max-height: none;
overflow: visible; /* no inner scrollbar */
}
/* ============================
FULLTEXT MODE: text over art
============================ */
/* Make sure fulltext is on #card-preview or an ancestor of .card-art/.card-rules */
/* e.g. $('#card-preview').toggleClass('fulltext'); */
.fulltext.tallart .card-inner {
position: relative; /* anchor for overlaying things */
}
/* Restore art height (don’t hide it) */
.fulltext.tallart .card-art {
height: 520px !important; /* or whatever your normal art height is */
max-height: none !important;
margin-bottom: 0;
position: relative;
z-index: 1;
}
/* Rules box overlays the bottom of the art with a dark gradient */
.fulltext.tallart .card-rules {
position: relative;
z-index: 2;
/* pull it up so it sits on top of the lower portion of the art */
margin-top: -220px; /* tweak this to taste */
/* let it size by content */
height: auto !important;
max-height: none !important;
min-height: 0 !important;
padding: 24px 16px 16px;
/* dark gradient for readability */
background: linear-gradient(
to bottom,
rgba(0,0,0,0.0),
rgba(0,0,0,0.75)
);
color: #fff;
text-shadow: 0 0 4px rgba(0,0,0,0.9);
}
/* Optional: paragraphs/verse/fun text slightly tighter for overlay mode */
.fulltext.tallart .rules-text,
.fulltext.tallart .bible-verse,
.fulltext.tallart .fun-text {
margin-bottom: 4px;
}
.noart .card-art {
display: none;
}
/* ============================
FULLTEXT + TALLART overlay
============================ */
/* In this mode, treat card-inner as a positioned box, not a flex column */
.fulltext.tallart .card-inner {
position: relative;
display: block;
left: -30px;
height: 1020px;
}
/* Art fills the inner card and sits behind the overlay */
.fulltext.tallart .card-art {
position: relative;
z-index: 1;
height: 620px !important; /* tweak to taste */
height: calc(100% - 120px) !important; /* tweak to taste */
margin-bottom: 0;
}
/* Rules/verse/fun text as a band over the lower part of the art. The dark
backing now reaches ALL the way down to the footer (bottom:92px, matching
the art-split band) and goes fully opaque near its base so rules text stays
legible over busy/light art right down to the last line — no mid-card
fade-out that leaves the lower art un-darkened. The top keeps a little
art bleed-through for the classic text-over-art look; the separate top
scrim (.card-art::after, below) protects the title. */
.fulltext.tallart .card-rules {
position: absolute;
top: 35px;
left: 0; /* span full inner width */
right: 0;
bottom: 92px; /* reach the footer/copyright bar (was 130px) */
margin: 0;
vertical-align: middle;
box-sizing: border-box;
/* Horizontal padding baked with --rules-inset-x (Card Designer; default 0)
so the rules block can be narrowed without clobbering the base padding. */
padding: 24px calc(22px + var(--rules-inset-x, 0px)) 18px calc(22px + var(--rules-inset-x, 0px));
height: auto !important;
max-height: none !important; /* fill down to the footer */
min-height: 0 !important;
overflow: hidden;
border-radius: 14px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.30) 0%,
rgba(0,0,0,0.66) 26%,
rgba(0,0,0,0.82) 55%,
rgba(0,0,0,0.88) 100%
);
color: #fff;
text-shadow: 0 0 4px rgba(0,0,0,0.9);
z-index: 2;
}
.card-rules.vert-align {
/* NEW: vertical centering of inner content */
display: flex;
flex-direction: column;
justify-content: center; /* vertical align */
align-items: flex-start; /* keep text left-aligned */
}
/* Slightly tighter text inside overlay band */
.fulltext.tallart .rules-text,
.fulltext.tallart .bible-verse,
.fulltext.tallart .fun-text {
margin-bottom: 4px;
color: white;
}
.fulltext.tallart #previewArt {
opacity: 0.5;
}
.fulltext.tallart .card-footer{
/* Pin to the bottom of .card-inner so the copyright never floats up
into the title area. The flex-column layout of .tallart .card-inner
means a `position: static` footer would just take its turn in the
flow — for cards with short rules (e.g. Tokens) that landed the
footer next to the title pill. Absolute + bottom-anchored gives the
same result as the legacy non-tallart layout. */
position: absolute;
left: 0;
right: 0;
bottom: 25px;
width: auto;
height: auto;
text-align: right;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
background: none;
}
.fulltext.tallart .card-footer .copyright-line {
color: black;
text-shadow: 0 0 6px #a1a1a1;
/* Flow the copyright + card number inline, right-aligned, ending just to
the LEFT of the type-icon slot (right:6px, 40px wide) so nothing covers
or clips "© Kinsman Software LLC". */
position: static;
display: inline;
white-space: nowrap;
}
/* Card number rides inline right after the copyright (was absolutely
positioned at right:55px, which floated on top of "…LLC"). The 50px right
margin clears the corner type-icon. */
.fulltext.tallart .card-footer .card-info-block {
position: static;
display: inline;
right: auto;
bottom: auto;
margin-left: 6px;
margin-right: 50px;
}
.fulltext.tallart .card-footer .card-info-block br { display: none; }
/* ================================================================
ADJUSTABLE ART/TEXT SPLIT (per-card, per-theme — opt-in)
----------------------------------------------------------------
CardRenderer adds `.has-art-split` + a `--art-split` custom prop
(the ART region's share of the card height, from the top) when a
card carries a saved split for the current theme. The picture is
pinned to the TOP `--art-split` slice (crisp, cover-fit) and the
rules/text band fills everything BELOW it down to the footer — so
a smaller split → smaller art + a taller text band (autoFit grows
the font to fill it). No class = the default text-over-full-bleed
layout above stays exactly as-is (back-compat).
================================================================ */
.fulltext.tallart.has-art-split .card-art {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: calc(100% * var(--art-split, 0.55)) !important;
max-height: none !important;
margin: 0 !important;
overflow: hidden !important;
border-radius: 14px 14px 0 0;
z-index: 1;
}
.fulltext.tallart.has-art-split .card-art img {
width: 100% !important;
height: 100% !important;
max-height: none !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: center; /* per-card kittens framing overrides this inline */
opacity: 1 !important; /* dedicated art region → show it crisply */
}
.fulltext.tallart.has-art-split .card-rules {
top: calc(100% * var(--art-split, 0.55)) !important;
bottom: 92px !important; /* clear the footer / copyright bar */
left: 0 !important;
right: 0 !important;
height: auto !important;
max-height: none !important;
min-height: 0 !important;
overflow: hidden;
border-radius: 0 0 14px 14px;
/* Solid, readable band that reaches ALL the way down to the footer
(no mid-card fade-out). */
background: linear-gradient(to bottom,
rgba(0,0,0,0.66) 0%,
rgba(0,0,0,0.82) 14%,
rgba(0,0,0,0.86) 100%) !important;
display: flex !important;
flex-direction: column;
justify-content: center; /* vertically centre the fitted text in the band */
align-items: stretch;
z-index: 2;
}
/* The green cost badge must always paint ON TOP of the footer/copyright bar
(which follows it in DOM order) — and above the art in split mode. */
.fulltext.tallart .cost-badge { z-index: 6; }
/* ── TOP SCRIM ────────────────────────────────────────────────────────────
A soft dark gradient over the very top of the art so the card TITLE (and
the top-right type tag) stay legible over busy/light art. Tasteful, not
heavy — fades out well before the rules band. Painted inside .card-art so
it sits above the picture but below the title bar (lifted below) and the
rules band. Works in both the default full-bleed layout and the art-split
layout (where .card-art is just the top slice — the scrim still crowns it).
───────────────────────────────────────────────────────────────────────── */
.fulltext.tallart .card-art { position: relative; }
.fulltext.tallart .card-art::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 165px;
background: linear-gradient(
to bottom,
rgba(0,0,0,0.52) 0%,
rgba(0,0,0,0.26) 45%,
rgba(0,0,0,0.0) 100%
);
border-radius: 14px 14px 0 0;
pointer-events: none;
z-index: 3;
}
/* Keep the title above the scrim + art so the top darkening backs it, not
covers it. (Type/subtype tags ride along in the same bar.) */
.fulltext.tallart .card-title-bar { position: relative; z-index: 5; }
.fulltext.tallart .tilde-box.tilde-BB{
color: black;
text-shadow: 0 0 2px #aeaeae;
}
#card-qrcode{
bottom: 5px;
z-index: 999999;
}
:root{
--qr-width: 125px;
}
.fulltext.tallart #card-qrcode img{
margin-left: 365px;
margin-top: 10px;
z-index: 999999;
width: var(--qr-width);
height: var(--qr-width);
overflow: auto;
}
#card-qrcode img{
margin-left: 392px;
margin-top: -38px; /*-15 was too low*/
z-index: 999999;
width: var(--qr-width);
height: var(--qr-width);
overflow: auto;
}
.previewLinkTextLine2 {
text-align: center;
}
.fulltext.tallart .card-graphics-img.rotate {
filter: invert(1);
}
.fulltext.tallart .tilde-box {
color: black;
}
.rules-text {
}
#statusMessage {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.rules-text h1, .rules-text h2, .rules-text h3, .rules-text h4, .rules-text h5, .rules-text h6 {
margin: 0;
padding: 0;
}
.rules-text h1, .rules-text h2, .rules-text h3, .rules-text h4, .rules-text h5, .rules-text h6{
margin-top: -15px !important;
}
.rules-text p {
margin: 0;
padding: 0;
}
.rules-text #card-qrcode{
bottom: 5px;
z-index: 999999;
}
#cardSortButtons button {
padding: 1px;
font-size: 0.8em;
}
.card-legend {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 0.65rem; /* small-card friendly */
line-height: 1.2;
background: rgba(255, 255, 255, 0.85);
border-radius: 8px;
padding: 6px 7px;
border: 1px solid rgba(0, 0, 0, 0.25);
box-sizing: border-box;
max-width: 100%; /* fit inside card */
/* Optional: constrain width if you want a column look */
/* max-width: 260px; */
}
.card-legend-title {
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.6rem;
margin-bottom: 4px;
}
.card-legend-list {
list-style: none;
padding-left: 0;
margin: 0;
}
.card-legend-list li {
margin: 0 0 2px;
}
/* Slight visual separation between sections */
.card-legend-divider {
border-top: 1px solid rgba(0, 0, 0, 0.25);
margin: 4px 0;
}
/* Optional: slightly dim less-important sentences */
.card-legend-types li,
.card-legend-actions li {
/* tweak if needed */
}
/* If you need it even tighter for tiny cards, use this helper class */
.card-legend.card-legend-tight {
font-size: 0.6rem;
line-height: 1.1;
padding: 4px 5px;
}
/* HTML tags */
.hwt-tag {
color: #268bd2; /* blue */
font-weight: 600;
}
/* HTML attributes */
.hwt-attr {
color: #b58900; /* amber */
}
/* Attribute values */
.hwt-string {
color: #2aa198; /* teal */
}
/* Comments */
.hwt-comment {
color: #93a1a1; /* gray */
font-style: italic;
}
/* Custom keywords */
.hwt-keyword {
color: #dc322f; /* red */
font-weight: 600;
}
/* code mirror */
.cm-wrapper {
height: 340px;
border: 2px solid #2c6bed;
border-radius: 10px;
background: #1e1e1e;
}
/* 1) Give BOTH previews the same base sizing/positioning */
#card-preview,
#card-preview-alt {
position: relative;
width: var(--card-width);
height: calc(var(--card-height) + 50px);
box-sizing: border-box;
border-radius: 40px;
box-shadow: 0 0 25px rgba(0,0,0,0.8);
color: #000;
font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
/* keep your background behavior consistent */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
/* 2) Your existing background image rules only target #card-preview..
Duplicate them for #card-preview-alt. */
#card-preview.gold,
#card-preview-alt.gold {
background-image: url("../../../sets/back_FireGrassIceStone4.png");
background-color: #d6aa4c;
}
#card-preview.fire,
#card-preview-alt.fire {
background-image: url("../../../sets/back_Fire2.png");
}
#card-preview.firehabitual,
#card-preview-alt.firehabitual {
background-image: url("../../../CardBorders/back_fire_habitual7.png");
}
#card-preview.grass,
#card-preview-alt.grass {
background-image: url("../../../sets/back_Grass3.png");
}
#card-preview.ice,
#card-preview-alt.ice {
background-image: url("../../../sets/back_Ice4.png");
}
#card-preview.stone,
#card-preview-alt.stone {
background-image: url("../../../sets/back_Stone5.png");
}
/* 3) If you want the alt preview NOT to stretch its wrapper: */
.alt-preview-wrap {
width: var(--card-width);
max-width: var(--card-width);
margin: 18px 0 0 0; /* left aligned under first */
}
.preview-wrapper {
display: flex;
flex-direction: column; /* stack previews */
align-items: flex-start;
gap: 18px;
}
/* preview-wrapper already contains: card, alt card, gd preview */
.preview-wrapper{
display: flex;
flex-direction: column; /* default = stacked */
align-items: flex-start;
gap: 18px;
}
/* When side-by-side mode is on */
.preview-wrapper.side-by-side{
flex-direction: row;
align-items: flex-start;
gap: 18px;
flex-wrap: wrap; /* allows gd preview to drop below if not enough width */
}
/* Make sure both cards keep card size (don’t expand to 100%) */
.preview-wrapper .card-scale-wrapper{
width: var(--card-width);
max-width: var(--card-width);
margin: 0;
}
/* Optional: in side-by-side mode, put gd preview on its own row */
.preview-wrapper.side-by-side .gdimage-preview{
flex-basis: 100%;
}
#card-preview,
#card-preview-alt{
width: var(--card-width);
height: calc(var(--card-height) + 50px);
position: relative;
}
/* ===== FINAL AUTHORITY: preview layout ===== */
/* default (stacked) */
.top-bottom-flex .preview-wrapper{
display: flex !important;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
/* side-by-side mode */
.top-bottom-flex .preview-wrapper.side-by-side{
flex-direction: row !important;
align-items: flex-start;
gap: 18px;
flex-wrap: wrap; /* allow wrap if window too narrow */
}
/* CRITICAL: don't let the card wrappers be width:100% in flex-row */
.top-bottom-flex .preview-wrapper .card-scale-wrapper{
width: var(--card-width) !important;
max-width: var(--card-width) !important;
flex: 0 0 var(--card-width);
margin: 0 !important; /* kill auto-centering */
}
/* your alt wrapper has margin-top for stacked view; remove it in side-by-side */
.top-bottom-flex .preview-wrapper.side-by-side .alt-preview-wrap{
margin-top: 0 !important;
}
/* optional: push GD preview to full row under both cards */
.top-bottom-flex .preview-wrapper.side-by-side .gdimage-preview{
flex: 0 0 100%;
}
/* ====== DEFAULT (stacked) ====== */
.preview-wrapper{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 18px;
}
/* Only in stacked mode do we allow "center + max-width" wrappers */
.preview-wrapper:not(.side-by-side) .card-scale-wrapper{
width: 100%;
max-width: var(--card-width);
margin: 0 auto;
}
/* ====== SIDE-BY-SIDE MODE ====== */
.preview-wrapper.side-by-side{
flex-direction: row;
flex-wrap: nowrap; /* IMPORTANT: never wrap to next line */
align-items: flex-start;
gap: 18px;
overflow-x: auto; /* scroll horizontally if screen is too narrow */
overflow-y: hidden;
}
/* In side-by-side, each card wrapper must be a fixed card-width column */
.preview-wrapper.side-by-side .card-scale-wrapper{
flex: 0 0 var(--card-width);
width: var(--card-width);
max-width: var(--card-width);
margin: 0;
}
/* don’t push the alt down in side-by-side */
.preview-wrapper.side-by-side .alt-preview-wrap{
margin-top: 0;
}
/* optional: keep the GD preview below (or remove if you want it inline) */
.preview-wrapper.side-by-side .gdimage-preview{
flex: 0 0 100%;
}
/* Default = middle, but controllable per-card via --art-y */
.card-art img{
object-position: 50% var(--art-y, 50%);
}
img.ctype-Habitual {
margin-top: 5px;
margin-right: -50px;
}
img.ctype.cimgref-Habitual_Evil_romanwar {
margin-top: -25px;
margin-right: -40px;
}
img.ctype.cimgref-Habitual_Good_romanwar {
margin-top: 5px;
margin-right: -50px;
}
/* Kittens EVIL Habitual — the "mouse-hole" corner glyph sat too LOW with the
generic Habitual offset (margin-top:-45px), dropping into the title row
while the Good-Habitual tower + other kittens type icons crown the corner.
Lift it so it sits higher/cleaner in the top-right. Scoped to the evil
kittens ref so Good Habitual (tower), other types and other themes are
unaffected. The .ch-card-root variant out-specifies game.css's generic
`.ch-card-root img.ctype.ctype-Habitual` (which loads after this file). */
img.ctype.cimgref-Habitual_Evil_kittens,
.ch-card-root img.ctype.ctype-Habitual.cimgref-Habitual_Evil_kittens {
margin-top: -78px;
}
.keyword {
font-weight: bold;
}
.keyword.cost-zone{
display: inline-flex;
align-items: center;
gap: 0.15em;
}
/* the CZ coin itself — SQUARE token (matches the rules-text number boxes) */
.keyword.cost-zone .coin{
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: auto;
height: 1.35em;
min-width: 1.35em;
padding: 0 0.22em;
white-space: nowrap; /* keep "CZ" on one line (token, not stacked) */
line-height: 1;
border-radius: 0.18em;
/* refined gold coin */
background:
radial-gradient(circle at 30% 28%,
rgba(255,255,255,.95) 0%,
rgba(255,255,255,.45) 20%,
rgba(255,255,255,0) 42%
),
linear-gradient(145deg,
#ffe39a 0%,
#f2c35a 22%,
#c98a2f 52%,
#f0c96a 78%,
#fff0b8 100%
);
box-shadow:
inset 0 0 0 2px rgba(92,61,10,.45), /* rim */
inset 0 -2px 3px rgba(0,0,0,.28), /* depth */
0 1px 1px rgba(0,0,0,.3); /* lift */
font-size: 0.82em; /* fit "CZ" on one line inside the pill */
font-weight: 900;
letter-spacing: 0.02em;
font-family: var(--font-display-2, system-ui);
color: #5c3d0a;
text-shadow:
0 1px 0 rgba(255,255,255,.55),
0 -1px 0 rgba(0,0,0,.35);
vertical-align: -0.08em;
}
/*:not(.tilde-BB) */.card-graphics-img{
border-radius: 15px;
padding-left: 2px;
padding-right: 2px;
padding-top: 1px;
padding-bottom: 1px;
border: 1px solid black;
}
/* ── THE TYPE GLYPHS, ON PLATES OF THEIR OWN TYPE'S COLOUR ────────────────
*
* Six glyphs stand in the rules text where a word would, and every one of them
* is a bright drawing: a yellow bolt, a green face, a pale fist. Four had a
* BRIGHT plate and two had none at all -- so the bolt on a light card
* disappeared, and the ones that were dressed were dressed in a colour close to
* the glyph sitting on it.
*
* ONE RULE FOR ALL SIX: a DARK plate in that type's own hue. Dark, because
* these drawings are light and a light drawing needs somewhere dark to stand;
* in the type's hue, because the plate should still say which type this is
* without being read -- an orange one is a Habitual before anybody looks at the
* picture. And the same treatment across all six, so a sentence with three of
* them in it reads as three marks rather than as three accidents.
*
* A PALE RIM RATHER THAN A BLACK ONE. The base rule outlines every glyph in
* black, which was right against a bright plate and vanishes against a dark one
* -- and against dark art it took the plate's edge with it, so the mark lost
* its shape exactly where it most needed one.
*/
/* ONE PLATE WIDTH FOR ALL SIX, because the artwork is not one shape. Measured
off the files: the bolt is 15x25 — a tall, narrow drawing — the middle four
are square, and the evil Habitual is 533x369, half again as wide as it is
tall. Sized by height alone the bolt's plate came out a sliver two fifths the
width of its neighbours' and the evil Habitual's a long slab, so a sentence
with three of them read as three different kinds of mark.
Brought to one width with side padding rather than by sizing the image:
padding widens the box without touching the drawing, and the alternative — a
fixed width with object-fit — is not drawn by the rasteriser that photographs
these cards, so it would look right on screen and print stretched. */
.card-graphics-img.plated.unction,
.card-graphics-img.plated.maturity,
.card-graphics-img.plated.resistance,
.card-graphics-img.plated.temptation,
.card-graphics-img.plated.habitual_good,
.card-graphics-img.plated.habitual_evil,
.card-graphics-img.plated.resistance_romanwar,
.card-graphics-img.plated.temptation_romanwar,
.card-graphics-img.plated.habitual_good_romanwar,
.card-graphics-img.plated.habitual_evil_romanwar {
padding: 0.06em 0.20em;
box-sizing: content-box;
border-radius: 0.28em;
}
/* NO PER-GLYPH SIZE HERE ANY MORE. These were paddings measured by hand off
each file, and they broke the first time a picture was replaced: the rule
shrinking the evil Habitual was measured against the wide Christian drawing,
and the Roman one is square, so the two came out different sizes side by
side. A stylesheet cannot see the file. CardRenderer's fitTypePlates()
measures each drawing and fits it inside one fixed box, so nothing is
stretched and every plate is the same rectangle. The padding above is the
starting point it refines. */
/* ONLY ON A GLYPH BEING DRAWN AS AN INLINE MARK — the .plated class, which
fitTypePlates adds to exactly the ones it sizes as marks. Without it these
painted every glyph of that type anywhere on the card, and the corner type
badge came out as a pale sliver of plate with the drawing lost inside it.
One decision, made in one place: what gets a mark's size gets a mark's paint.
THE PLATE COLOURS, MEASURED OFF THE STROKES — which is the second time this
has been measured and the first time against the right thing.
The round before this sampled each glyph's MEAN luminance and gave the three
that averaged light a dark plate. But these are line drawings: the mean is
dominated by the pale fill inside them, while what anybody reads is the dark
outline. Sampled properly — the 25th percentile of the opaque pixels, which
is the ink — every one of the six is dark art, 0.00 to 0.08. On dark plates
the handcuffs measured 1.98 and the temptation 1.25: not a colour that is
hard to see, ink on ink.
So all six get a PALE plate in the type's own hue with a dark rim. One rule
for all six, which is what this wanted to be from the start; it only needed
the right measurement to be true. 4.7x at worst, 15x at best.
The evil pair are warm on purpose as well as by measurement: a reddish plate
under a temptation and a light brown under the handcuffs say whose card this
is before the drawing is read. The _romanwar variants carry the same colours
— the other game's art is a different drawing of the same idea. */
.card-graphics-img.plated.unction { background: #f6dfa0; } /* 15.1x */
.card-graphics-img.plated.maturity { background: #c7e9bb; } /* 10.5x */
.card-graphics-img.plated.resistance,
.card-graphics-img.plated.resistance_romanwar { background: #ccd6ea; } /* 9.4x */
.card-graphics-img.plated.temptation,
.card-graphics-img.plated.temptation_romanwar { background: #f0b3a6; } /* 11.7x */
.card-graphics-img.plated.habitual_evil,
.card-graphics-img.plated.habitual_evil_romanwar { background: #e8bb8e; } /* 4.7x */
.card-graphics-img.plated.habitual_good,
.card-graphics-img.plated.habitual_good_romanwar { background: #bcd8f0; } /* 14.2x */
/* THE STONE GETS NO PLATE, having briefly had one. Giving it its own blue
rectangle made it a separate chip sitting OUTSIDE the boost band — two blues
in a row, one of them the wrong shape. It is not a type being named here; it
is a qualifier on the boost beside it, so it belongs inside that band on the
band's own ground, at the size of the other marks on the line. */
.card-graphics-img.plated.unction,
.card-graphics-img.plated.maturity,
.card-graphics-img.plated.resistance,
.card-graphics-img.plated.resistance_romanwar,
.card-graphics-img.plated.temptation,
.card-graphics-img.plated.temptation_romanwar,
.card-graphics-img.plated.habitual_evil,
.card-graphics-img.plated.habitual_evil_romanwar,
.card-graphics-img.plated.habitual_good,
.card-graphics-img.plated.habitual_good_romanwar { border: 1px solid rgba(0, 0, 0, 0.55); }
.tilde-BB .card-graphics-img {
height: 49px;
}
/* The righteous Habitual's plate is set with the other five above. This rule
used to give it its own, brighter one from further down the file -- two
places deciding one colour, and the later one winning by accident of order. */
.fulltext.tallart .bible-verse {
margin-top: 10px;
opacity: 85%;
}
.fulltext.tallart .fun-text {
margin-top: 14px;
opacity: 85%;
}
.citations {
font-size: 0.6em;
font-style: italic;
opacity: 70%;
}
#card-qrcode {
display: none !important; /* forget about qr code, not important, just more work */
}
/* ── Kittens theme: photo-forward art ──────────────────────────────────
The chr frame backgrounds (sets/back_*.png) carry an embossed emblem
(open hand / tree / rock motif on gold, heavy textures on the colors).
Base tallart CSS renders the art ![]()
at opacity .5 so that motif
shows through the art — intended for chr, but it muddies the kitten
photos badly. Under the renderer's .theme-kittens scope the photo is
fully opaque (emblem hidden behind it) and the rules band keeps a
lighter, even scrim so white rules text stays readable without
darkening the open art above it. Other themes are untouched. */
.ch-card-root.theme-kittens .card-art img {
/* Photo fully opaque AND un-masked so it covers the whole art box top to
bottom. The base .card-art img fades its lower ~40% to transparent
(mask-image) — intended so the chr frame emblem/texture bleeds into the
art — but for kittens that let the color-frame's leaf/emboss texture
(e.g. sets/back_Grass3.png on grass cards) show THROUGH the lower half of
the kitten photo. Kill the fade + force opacity so the photo reads clean
on EVERY surface (board tile, view-card, inspector/pin, dialogs). */
opacity: 1 !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
/* Drop the color-frame's leaf/emboss BACKGROUND-IMAGE (sets/back_*.png) for
kittens so nothing textured can bleed into or around the photo; the solid
per-color background-color stays, so the card border still reads as its
color (grass = green, fire = red, …). Scoped to kittens — chr / romanwar /
plantlover / blockbuilding frame textures are untouched. Beats view-card.php
inline `.ch-card-root.` and game.css `.ch-card-root.` rules. */
.ch-card-root.theme-kittens {
background-image: none !important;
}
.ch-card-root.fulltext.tallart.theme-kittens .card-rules {
/* Just enough dark scrim behind the rules text for readability over the
now-opaque photo — the open art above stays crisp. */
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.30),
rgba(0, 0, 0, 0.72)
);
}
/* ── Inline Humility/Power triangle: scale WITH the rules text ─────────────
The base .humility-box (and game.css's .ch-card-root copy) draws the green
triangle with FIXED px borders, so after autoFitRulesText picks a large
font the badge reads as a minuscule glyph next to the words ("Gain ▲3").
Inside a rendered card's rules text, rebuild it in em units so it tracks
the fitted font-size exactly, like every other inline glyph
(.card-graphics-img height:1em). Scoped to .ch-card-root .rules-text —
the designer preview (#card-preview) and print pipeline are untouched.
Higher specificity (0,3,0) than game.css's .ch-card-root .humility-box
(0,2,0), so it wins regardless of stylesheet order. */
.ch-card-root .rules-text .humility-box {
all: unset;
/* explicit: .rules-text-icon pins font-size to a fixed 2rem var and the
browser keeps it despite the all:unset above — restate the inherit so
the em borders below track the autofitted rules font. */
font-size: inherit;
position: relative;
display: inline-block;
width: 0;
height: 0;
/* Visibility pass 2: the badge still read weak next to the C/D/S chips —
grow the whole triangle (~25%) and darken the fill a step so the white
digit carries real contrast. */
border-left: 0.62em solid transparent;
border-right: 0.62em solid transparent;
border-bottom: 0.90em solid #04b371;
/* The 0.62em borders already give the triangle its visual width; only a
hair of margin is needed so it hugs the surrounding words like the cost
pill / D-box / counter do (was 0.72/0.68em → big floating gaps). */
margin: 0 0.1em;
vertical-align: -0.16em;
}
.ch-card-root .rules-text .humility-box::before,
.ch-card-root .rules-text .humility-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
/* A TRIANGLE HAS ROOM ONLY AT THE BOTTOM, so it has to be wider than it
looks to hold two characters. "-2" and "+1" are two glyphs in a shape
that narrows to nothing, and at the old size they were squeezed into the
middle where the shape is half as wide as the base. */
border-left: 0.86em solid transparent;
border-right: 0.86em solid transparent;
border-bottom: 1.22em solid #013d22;
left: -0.86em;
z-index: -1;
}
.ch-card-root .rules-text .humility-box::before { top: 0; }
.ch-card-root .rules-text .humility-box::after { top: -0.24em; }
.ch-card-root .rules-text .humility-box .humility-text {
all: unset;
position: absolute;
left: 50%;
/* LOW IN THE TRIANGLE, where it is widest. Every hundredth of an em further
down is width the number can use. */
top: 0.78em;
transform: translate(-50%, -50%);
/* THE NUMBER IS THE POINT OF THE MARK. The triangle says "humility" and the
number says how much, and it was set smaller than the digits in the cost
chip next to it -- a value printed at two thirds the size of the values
around it reads as a footnote to them. */
font-size: 0.92em;
font-weight: 900;
color: #fff;
/* A THIN, DARK OUTLINE AND A TIGHT SHADOW. The old stroke was heavy enough
at this size to close up the counter of a 2 and thicken a minus sign into
the digit beside it; the shadow does the separating instead. */
-webkit-text-stroke: 0.025em #00190d;
text-shadow: 0 0 0.05em #00190d, 0 0.03em 0.05em #000, 0 0 0.16em #000;
white-space: nowrap;
letter-spacing: -0.04em;
}
/* Inline number boxes (C#, D#, S#, A#) inside a rendered card's rules text.
autoFitRulesText pins .rules-text-icon font-size to a FIXED fraction
(~0.62em) of the fitted rules font, so the pill rendered noticeably SMALLER
than the #rot#/#ctr# graphics glyphs (height:1em / 1.15em) and the words on
the same line ("C3 #rot#: #ctr+1#"). Track the fitted rules font instead so
every inline element sits at the same visual height. !important beats the
inline px pin the autofit writes; scoped to .ch-card-root .rules-text so the
designer preview (#card-preview) and the print/fcimage pipeline are untouched. */
/* THE SAME BOXES ON THE PRINTED FACE, WHICH HAS A DIFFERENT DOM.
This rule is what makes CX, SX and AX sit at the same height as #rot# and
#ctr#, and it was scoped to .ch-card-root .rules-text — the board's markup.
layouts.php builds its own card out of .slot elements and never matches that
selector, so on the printed face the boxes kept their full 1.35em while the
glyphs beside them stayed at 1em: a coin a third taller than the symbol it
shares a line with.
The editor's own preview panel marks itself .letx-scope rather than using
slots, so it is listed too — the same reason letx.css lists both. */
.ch-card-root .rules-text .cost-box,
.ch-card-root .rules-text .draw-to-hand-box,
.ch-card-root .rules-text .discard-from-cost-zone-box,
.ch-card-root .rules-text .resist-box,
.ch-card-root .rules-text .negative-box,
.slot .cost-box,
.slot .draw-to-hand-box,
.slot .discard-from-cost-zone-box,
.slot .resist-box,
.slot .negative-box,
.letx-scope .cost-box,
.letx-scope .draw-to-hand-box,
.letx-scope .discard-from-cost-zone-box,
.letx-scope .resist-box,
.letx-scope .negative-box {
/* 0.70em: box height = 1.35em x 0.70em = 0.945em, plus the 0.07em ring on
each side = 1.04em outer — the same outer edge the glyph beside it now
has in layouts.php. Changing one of these two without the other is what
makes a coin look a third taller than the symbol it shares a line with,
so the numbers are stated in both places and have to be moved together. */
/* The multiplier is inside the value because this is !important: a later
rule could not beat it, and "D2{3x}" would do nothing. */
font-size: calc(0.70em * var(--mark-x, 1)) !important;
/* CENTRED ON THE CAP, not sat on the baseline. The layout box is 0.945em
and the cap's middle is 0.35em up, so -0.12em = 0.35 - 0.945/2. The ring
is box-shadow and sits outside layout, evenly on both sides, so centring
the box centres what the eye sees too. */
vertical-align: -0.12em;
}
/* AND THE RING SCALES WITH THE BOX. The white rim was a flat 3px, which is a
fixed thickness around a box measured in em — so the smaller the rules text
got, the heavier the rim looked, and at the size a full card sets it read as
a thick white border rather than an edge. */
.slot .rules-text-icon,
.letx-scope .rules-text-icon {
box-shadow: 0 0 0 0.07em #ffffff, 0 0.07em 0 rgba(0, 0, 0, 0.3);
}
/* ── Kittens: per-card art credit in the footer ────────────────────────────
Populated by CardRenderer from theme-kittens-images/art_credits.json for
theme=kittens only; empty (display:none) everywhere else, so chr and the
other themes render byte-identically. Tiny + low-opacity so it never
competes with the copyright/number line. */
.card-footer .art-credit:empty { display: none; }
.card-footer .art-credit {
position: absolute;
left: 0;
right: 0;
bottom: -1.5em;
text-align: center;
font-size: 0.85rem;
opacity: 0.55;
line-height: 1;
pointer-events: none;
}
/* ══════════════════════════════════════════════════════════════════════════
CARD FRAME DECORATIONS (Task #26 — design + render; editor picker deferred)
───────────────────────────────────────────────────────────────────────────
Three restrained, self-contained (pure-CSS + inline-SVG data-URI) treatments
applied as sensible DEFAULTS to every rendered card face, on BOTH render
roots: .ch-card-root (board / view-card / catalog / html2canvas export) and
#card-preview (designer live preview). No third-party assets; no JS.
A. Inset metallic frame line + bevel + soft inner glow, ELEMENT-TINTED
(gold / fire-ember / grass / ice / stone). Lives entirely in the 24px
frame margin, so it never touches art, rules text, cost badge or footer.
B. A refined title-plate hairline/sheen under the title bar.
C. Two top-corner metallic flourishes, THEME-KEYED (chr cross-stud,
kittens paw, romanwar laurel, plantlover leaf, blockbuilding hex-bolt).
Only the TOP corners are decorated: the bottom-left corner is owned by
the cost badge and the bottom band by the footer. The flourishes sit at
z-index 2 — BELOW the title bar (z3), cost badge (z3) and footer (z999) —
so those always paint on top and legibility can never regress.
Everything coexists with the per-theme art/text split (.has-art-split /
--art-split, 5847a667) and the bottom-band + top scrim + cost-badge z-index
work (632eefa8): the frame line sits under .card-inner content and the
flourishes sit under the title/cost/footer, so none of that is disturbed.
══════════════════════════════════════════════════════════════════════════ */
/* ── Element/colour accent palette (drives frame line + glow tint) ────────── */
.ch-card-root, #card-preview {
--frame-accent: #cda63a; /* default: warm gold */
--frame-hi: rgba(255,246,214,0.75); /* top bevel highlight */
--frame-lo: rgba(45,30,0,0.42); /* bottom bevel shadow */
--frame-glow: rgba(205,166,58,0.22); /* soft inner glow */
--corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 3 L37 20 L20 37 L3 20 Z' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M20 9 V31 M9 20 H31' stroke='%23f7edc4' stroke-width='3.2' stroke-linecap='round' opacity='0.9'/%3E%3Cpath d='M20 9 V31 M9 20 H31' stroke='%235a3f0a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"); /* default motif = cross-stud */
}
.ch-card-root.gold, #card-preview.gold {
--frame-accent:#dcb845; --frame-hi:rgba(255,248,216,.82); --frame-lo:rgba(70,48,0,.48); --frame-glow:rgba(220,184,69,.26); }
.ch-card-root.fire, #card-preview.fire,
.ch-card-root.firehabitual, #card-preview.firehabitual {
--frame-accent:#c9633a; --frame-hi:rgba(255,212,178,.72); --frame-lo:rgba(52,8,0,.55); --frame-glow:rgba(198,72,40,.26); }
.ch-card-root.grass, #card-preview.grass {
--frame-accent:#3f9e4a; --frame-hi:rgba(214,246,206,.72); --frame-lo:rgba(6,44,10,.5); --frame-glow:rgba(70,168,80,.24); }
.ch-card-root.ice, #card-preview.ice {
--frame-accent:#4a86d6; --frame-hi:rgba(206,228,255,.75); --frame-lo:rgba(0,26,60,.5); --frame-glow:rgba(74,134,214,.24); }
.ch-card-root.stone, #card-preview.stone {
--frame-accent:#b3bcc6; --frame-hi:rgba(244,248,252,.8); --frame-lo:rgba(24,30,38,.5); --frame-glow:rgba(179,188,198,.22); }
/* ── A + B. Inset metallic frame line, bevel, inner glow ────────────────────
No z-index → paints UNDER .card-inner, so it shows only in the frame margin
and can never wash over art or text. Coordinates are the 750×1100 card
space; scales down cleanly with --ch-scale on the board (invisibly small on
thumbnails, which is fine). */
.ch-card-root::before,
#card-preview::before {
content: "";
position: absolute;
inset: 13px;
border-radius: 33px;
pointer-events: none;
/* --frame-deco-opacity: per-theme Card Designer frame-line strength (default 1). */
opacity: var(--frame-deco-opacity, 1);
/* --frame-thickness: per-theme Card Designer rule-width multiplier (default 1). */
box-shadow:
inset 0 0 0 calc(2px * var(--frame-thickness, 1)) var(--frame-accent), /* crisp metallic rule */
inset 0 0 0 calc(3.5px * var(--frame-thickness, 1)) rgba(0,0,0,0.28), /* thin shadow just out */
inset 0 2.5px 5px var(--frame-hi), /* top bevel highlight */
inset 0 -3px 7px var(--frame-lo), /* bottom bevel shadow */
inset 0 0 24px var(--frame-glow); /* soft element inner glow*/
}
/* B. Title-plate refinement — a hairline + faint sheen directly under the
title bar so the name sits on a subtle plate. Kept inside the title bar's
own box (which already has z-index 3), purely decorative. */
.ch-card-root .card-title-bar::after,
#card-preview .card-title-bar::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: -6px;
height: 3px;
border-radius: 3px;
pointer-events: none;
background: linear-gradient(90deg,
rgba(0,0,0,0) 0%,
var(--frame-accent) 22%,
var(--frame-hi) 50%,
var(--frame-accent) 78%,
rgba(0,0,0,0) 100%);
opacity: 0.7;
}
/* ── C. Two top-corner metallic flourishes (theme-keyed) ────────────────────
Same symmetric SVG placed in both top corners. z-index 2 keeps it below the
title bar / cost badge / footer, so it only ever shows in the corner gaps. */
.ch-card-root::after,
#card-preview::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
/* --corner-deco-opacity: per-theme Card Designer corner-flourish strength (default 1). */
opacity: var(--corner-deco-opacity, 1);
background-image: var(--corner-flourish), var(--corner-flourish);
background-repeat: no-repeat, no-repeat;
background-size: 52px 52px, 52px 52px;
background-position: top 11px left 11px, top 11px right 11px;
}
/* Theme-keyed corner motif (root carries theme-; #card-preview → chr default) */
.ch-card-root.theme-kittens::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='20' cy='25' rx='9.5' ry='8' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.3'/%3E%3Ccircle cx='10.5' cy='15' r='3.5' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3Ccircle cx='16.5' cy='9.5' r='3.6' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3Ccircle cx='23.5' cy='9.5' r='3.6' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3Ccircle cx='29.5' cy='15' r='3.5' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3C/svg%3E"); }
.ch-card-root.theme-romanwar::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 36 C10 33 6.5 21 12 8'/%3E%3Cpath d='M20 36 C30 33 33.5 21 28 8'/%3E%3C/g%3E%3Cg fill='url(%23g)' stroke='%236b4e12' stroke-width='0.6'%3E%3Cellipse cx='9.5' cy='16' rx='3.1' ry='1.7' transform='rotate(-40 9.5 16)'/%3E%3Cellipse cx='11' cy='24' rx='3.1' ry='1.7' transform='rotate(-15 11 24)'/%3E%3Cellipse cx='15' cy='31' rx='3.1' ry='1.7' transform='rotate(20 15 31)'/%3E%3Cellipse cx='30.5' cy='16' rx='3.1' ry='1.7' transform='rotate(40 30.5 16)'/%3E%3Cellipse cx='29' cy='24' rx='3.1' ry='1.7' transform='rotate(15 29 24)'/%3E%3Cellipse cx='25' cy='31' rx='3.1' ry='1.7' transform='rotate(-20 25 31)'/%3E%3C/g%3E%3C/svg%3E"); }
.ch-card-root.theme-plantlover::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 4 C31 13 31 28 20 37 C9 28 9 13 20 4 Z' fill='url(%23g)' stroke='%233f5a1e' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M20 7 V34' stroke='%233f5a1e' stroke-width='1.3'/%3E%3Cpath d='M20 15 L14 12 M20 15 L26 12 M20 22 L13 18 M20 22 L27 18 M20 29 L15 26 M20 29 L25 26' stroke='%233f5a1e' stroke-width='1'/%3E%3C/svg%3E"); }
.ch-card-root.theme-blockbuilding::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 5 L32.9 12.5 L32.9 27.5 L20 35 L7.1 27.5 L7.1 12.5 Z' fill='url(%23g)' stroke='%234a4a4a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='20' r='5.4' fill='none' stroke='%234a4a4a' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%234a4a4a'/%3E%3C/svg%3E"); }
/* ══════════════════════════════════════════════════════════════════════════
ADMIN-SELECTABLE FRAME OVERRIDES (Task #32 — editor Frame picker)
───────────────────────────────────────────────────────────────────────────
The default frame treatment above is AUTOMATIC (element-tinted metallic rule
+ theme-keyed corner flourishes). An admin can OVERRIDE it per theme via the
card editor's Frame picker; the choice is stored in opts.frame_style /
opts.frame_corner ({ "": "" } maps) and CardRenderer.build adds
`frame-style-` / `frame-corner-` to `.ch-card-root`. Absent /
"auto" → the automatic default (back-compat). These rules sit AFTER the
theme-keyed motif block so an explicit corner choice always wins. They only
touch the ::before frame rule and ::after corner layer (both pointer-events
none, in the frame margin / corners) — never art, rules text, cost badge or
footer, so legibility can't regress. ────────────────────────────────────── */
/* Minimal / none — a clean face: drop the metallic rule, corner flourishes and
title-plate sheen entirely. */
.ch-card-root.frame-style-none::before { box-shadow: none; }
.ch-card-root.frame-style-none::after { background-image: none; }
.ch-card-root.frame-style-none .card-title-bar::after { display: none; }
/* Metallic (element) — keep the element-tinted rule + bevel + glow, but drop
the corner flourishes for a cleaner metallic-only look. */
.ch-card-root.frame-style-metallic::after { background-image: none; }
/* Gold ornate — force the warm-gold accent regardless of element colour, a
richer double rule, and the gold cross-diamond corners. The vars sit at the
same specificity as the .fire/.grass/… element tints but come later, so they
win; the corner override below re-supplies the motif. */
.ch-card-root.frame-style-gold {
--frame-accent:#dcb845; --frame-hi:rgba(255,248,216,.85);
--frame-lo:rgba(70,48,0,.5); --frame-glow:rgba(220,184,69,.30);
}
.ch-card-root.frame-style-gold::before {
box-shadow:
inset 0 0 0 2px var(--frame-accent), /* inner crisp gold rule */
inset 0 0 0 3.5px rgba(0,0,0,0.30), /* shadow gap */
inset 0 0 0 5px var(--frame-accent), /* outer gold rule (double)*/
inset 0 2.5px 6px var(--frame-hi), /* top bevel highlight */
inset 0 -3px 8px var(--frame-lo), /* bottom bevel shadow */
inset 0 0 26px var(--frame-glow); /* soft gold inner glow */
}
.ch-card-root.frame-style-gold::after {
background-image: var(--corner-flourish), var(--corner-flourish);
--corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 3 L37 20 L20 37 L3 20 Z' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M20 9 V31 M9 20 H31' stroke='%23f7edc4' stroke-width='3.2' stroke-linecap='round' opacity='0.9'/%3E%3Cpath d='M20 9 V31 M9 20 H31' stroke='%235a3f0a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* ── Corner motif override (independent of the frame-style choice) ────────────
Re-asserts the ::after background so a motif shows even when a frame style
(metallic / none) suppressed it; frame-corner-none forces the corners off. */
.ch-card-root.frame-corner-cross::after,
.ch-card-root.frame-corner-paw::after,
.ch-card-root.frame-corner-laurel::after,
.ch-card-root.frame-corner-leaf::after,
.ch-card-root.frame-corner-hex::after {
background-image: var(--corner-flourish), var(--corner-flourish);
}
.ch-card-root.frame-corner-none::after { background-image: none; }
.ch-card-root.frame-corner-cross::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 3 L37 20 L20 37 L3 20 Z' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M20 9 V31 M9 20 H31' stroke='%23f7edc4' stroke-width='3.2' stroke-linecap='round' opacity='0.9'/%3E%3Cpath d='M20 9 V31 M9 20 H31' stroke='%235a3f0a' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ch-card-root.frame-corner-paw::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='20' cy='25' rx='9.5' ry='8' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.3'/%3E%3Ccircle cx='10.5' cy='15' r='3.5' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3Ccircle cx='16.5' cy='9.5' r='3.6' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3Ccircle cx='23.5' cy='9.5' r='3.6' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3Ccircle cx='29.5' cy='15' r='3.5' fill='url(%23g)' stroke='%236b4e12' stroke-width='1.1'/%3E%3C/svg%3E"); }
.ch-card-root.frame-corner-laurel::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url(%23g)' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M20 36 C10 33 6.5 21 12 8'/%3E%3Cpath d='M20 36 C30 33 33.5 21 28 8'/%3E%3C/g%3E%3Cg fill='url(%23g)' stroke='%236b4e12' stroke-width='0.6'%3E%3Cellipse cx='9.5' cy='16' rx='3.1' ry='1.7' transform='rotate(-40 9.5 16)'/%3E%3Cellipse cx='11' cy='24' rx='3.1' ry='1.7' transform='rotate(-15 11 24)'/%3E%3Cellipse cx='15' cy='31' rx='3.1' ry='1.7' transform='rotate(20 15 31)'/%3E%3Cellipse cx='30.5' cy='16' rx='3.1' ry='1.7' transform='rotate(40 30.5 16)'/%3E%3Cellipse cx='29' cy='24' rx='3.1' ry='1.7' transform='rotate(15 29 24)'/%3E%3Cellipse cx='25' cy='31' rx='3.1' ry='1.7' transform='rotate(-20 25 31)'/%3E%3C/g%3E%3C/svg%3E"); }
.ch-card-root.frame-corner-leaf::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 4 C31 13 31 28 20 37 C9 28 9 13 20 4 Z' fill='url(%23g)' stroke='%233f5a1e' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M20 7 V34' stroke='%233f5a1e' stroke-width='1.3'/%3E%3Cpath d='M20 15 L14 12 M20 15 L26 12 M20 22 L13 18 M20 22 L27 18 M20 29 L15 26 M20 29 L25 26' stroke='%233f5a1e' stroke-width='1'/%3E%3C/svg%3E"); }
.ch-card-root.frame-corner-hex::after { --corner-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='32%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23fbf1c9'/%3E%3Cstop offset='0.5' stop-color='%23d9b64a'/%3E%3Cstop offset='1' stop-color='%238f6e1c'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 5 L32.9 12.5 L32.9 27.5 L20 35 L7.1 27.5 L7.1 12.5 Z' fill='url(%23g)' stroke='%234a4a4a' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='20' cy='20' r='5.4' fill='none' stroke='%234a4a4a' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='20' r='2.2' fill='%234a4a4a'/%3E%3C/svg%3E"); }
/* ══════════════════════════════════════════════════════════════════════════
CARD DESIGNER — THEME-WIDE FRAME STYLES + THICKNESS (Task #49 P4)
───────────────────────────────────────────────────────────────────────────
Applied as `frame-dsg-