* {
    font-family: 'Times New Roman';
}

body {
    color: #DFDFDF;
    background-color: #202020;
    height: 100vh;
    overflow: hidden;
}

/* Split out of the rule above, which applied height:100vh to EVERY <p> on the page, making each
   paragraph as tall as the browser window. Invisible until something gave a <p> a visible edge -
   at which point a lobby game entry drew itself a full screen tall. Elements setting their own
   height (.lobbyPatchNotes) escaped it on specificity; ones that did not, did not. A paragraph is
   not a page: height belongs to body alone. */
p {
    color: #DFDFDF;
    background-color: #202020;
    overflow: hidden;
}

a:visited {
    color: #DCA9E9;
}

a {
    color: dodgerblue;
}

.background {
    background-color: #202020;
}

/* Monopoly theme colours (dark).  Monopoly's stylesheets are static, so these
 * variables are how they follow the light/dark toggle the same way Dominion
 * does -- this file (#pageColor) is swapped for Color.css on theme change, which
 * flips every var(--mono-*) reference in the Monopoly CSS. */
:root {
    --mono-border:     white;
    --mono-frame:      whitesmoke;
    --mono-card-bg:    #202020;
    --mono-card-fg:    #f2f2f2;
    --mono-faint-text: rgba(255, 255, 255, 0.3);
    --mono-gold-text:  #ffcc00;
}

input[type=button] {
    cursor: pointer;
    border: 1px inset #DFDFDF;
}

input[type="text"], input[type="password"], input[type="number"], textarea, option, select, optgroup, input[type="button"] {
    background-color: #202020;
    color: #DFDFDF;
}

/* Text fields and dropdowns were the same colour as the page (#202020) with no
 * border, so their edges were invisible in dark mode.  Give them a lighter fill,
 * a clear border, and a focus highlight so they read as editable controls. */
input[type="text"], input[type="password"], input[type="number"], textarea, select {
    background-color: #333333;
    color: #F2F2F2;
    border: 1px solid #8A8A8A;
    border-radius: 3px;
}

input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus {
    border-color: #88C4FF;
    box-shadow: 0 0 4px rgba(136, 196, 255, 0.6);
    outline: none;
}


hr {
    display: block;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}


.border {
    border: 1px solid #C0C0C0;
}

.red, .Red, .attack, .Attack, .knight, .Knight {
    color: #FF4040;
}

.redDark, .RedDark, .attackDark, .AttackDark, .knightdark, .knightDark, .KnightDark {
    background-color: #FF4040;
}

.green, .Green, .limegreen, .LimeGreen, .limeGreen, .victory, .Victory {
    color: #65DA65;
}

.greenDark, .GreenDark, .limegreenDark, .LimeGreenDark, .limeGreenDark, .victoryDark, .VictoryDark {
    background-color: #65DA65;
}

.gray, .Gray, .grey, .Grey, .lightgray, .action, .Action, .other, .Other, .guild, .Guild, .prize, .Prize {
    color: #B4B4B4;
}

.grayDark, .GrayDark, .greyDark, .GreyDark, .lightgrayDark, .actionDark, .ActionDark, .guildDark, .GuildDark, .otherDark, .OtherDark, .prizeDark, .PrizeDark, .LightGrayDark {
    background-color: #B4B4B4;
}

.gold, .Gold, .treasure, .Treasure, .potion, .Potion {
    color: #FFDF2B;
}

.goldDark, .GoldDark, .treasureDark, .TreasureDark, .potionDark, .PotionDark {
    background-color: #FFDF2B;
}

.blue, .Blue, .dodgerblue, .dodgerBlue, .DodgerBlue, .reaction, .Reaction {
    color: #88C4FF;
}

.blueDark, .BlueDark, .dodgerblueDark, .dodgerBlueDark, .DodgerBlueDark, .reactionDark, .ReactionDark {
    background-color: #88C4FF;
}

.defense, .Defense {
    color: dodgerblue;
}

.defenseDark, .DefenseDark {
    background-color: dodgerblue;
}

.pink, .Pink, .shelter, .Shelter {
    color: lightpink;
}

.pinkDark, .PinkDark, .shelterDark, .ShelterDark {
    background-color: lightpink;
}

.brown, .Brown, .ruin, .Ruin, .ruins, .Ruins, .looter, .Looter {
    color: #B62E2E;
}

.brownDark, .BrownDark, .ruinDark, .RuinDark, .ruinsDark, .RuinsDark, .looterDark, .LooterDark {
    background-color: #B62E2E;
}

.purple, .Purple, .mediumorchid, .Mediumorchid, .curse, .Curse {
    color: #DCA9E9;
}

.purpleDark, .PurpleDark, .mediumorchidDark, .MediumorchidDark, .curseDark, .CurseDark {
    background-color: #DCA9E9;
}

.orange, .Orange, .duration, .Duration {
    color: #FFCB6A;
}

.orangeDark, .OrangeDark, .durationDark, .DurationDark {
    background-color: #FFCB6A;
}

.teal, .Teal, .AncientOne, .ancientone, .ancient_one, .Ancient_One {
    color: #00EAEA;
}

.tealDark, .TealDark, .AncientOneDark, .ancientoneDark, .ancient_oneDark, .Ancient_OneDark {
    background-color: #00EAEA;
}

.growth, .Growth {
    /* Gradient TEXT, not a gradient background: background-clip:text paints the glyphs
       themselves, so this reads as a font color and works on the dark theme. The *Dark twin
       below stays a real background — that one is for Monopoly card faces. */
    background: linear-gradient(to bottom right, #00ffff 30%, #009900 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.growthDark, .GrowthDark {
    background: linear-gradient(to bottom right, #00ffff 30%, #009900 70%);
}

.event, .Event {
    color: #b35900;
}

.eventDark, .EventDark {
    background-color: #b35900;
}

.other, .Other {
    /* Gradient TEXT, not a gradient background: background-clip:text paints the glyphs
       themselves, so this reads as a font color and works on the dark theme. The *Dark twin
       below stays a real background — that one is for Monopoly card faces. */
    background: linear-gradient(to bottom right, #cc0000 30%, #000099 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.otherDark, .OtherDark {
    background: linear-gradient(to bottom right, #cc0000 30%, #000099 70%);
}

.awesome, .Awesome, .black, .Black {
    /*background: linear-gradient(to bottom right, #ffffff 0%, #000000 100%);*/
    color: black;
}

.awesomeDark, .AwesomeDark, .blackDark, .BlackDark {
    /*background: linear-gradient(to bottom right, #ffffff 0%, #000000 100%);*/
    background-color: black;
}

.monopolyWhiteDark, .MonopolyWhiteDark, .whiteDark, .WhiteDark {
    background-color: whitesmoke;
}

.white, .White{
    color: whitesmoke;
}



.settingsColorSelected {
    border: 3px solid ghostwhite;
}


.domCardClickable {
    cursor: pointer;
    text-decoration: none;
    color: #DFDFDF;
}

.openedTab {
    color: black;
    background-color: #B4B4B4;;
}

#keywordTooltip {
    background: #1a1a1a;
    color: #e8e8e8;
    border-color: #555;
    box-shadow: 2px 3px 8px rgba(0,0,0,0.6);
}

/* ── Sign in with Google, dark theme ─────────────────────────────────────────────────────────
   Google publishes a dark variant of the button and these are its exact values: background
   #131314, 1px #8E918F border, #E3E3E3 text (developers.google.com/identity/branding-guidelines).
   The white light-theme button was legible on a dark page but looked like a foreign object
   punched into it.

   This lives here rather than in the settings/login stylesheets because the theme is switched by
   swapping THIS file in for Color.css, which is the only signal CSS gets about which mode is
   active. It loads after both, so these win on equal specificity.

   The "G" itself is untouched on purpose: Google's guidelines allow the button's colours to change
   but require the logo stay the standard full-colour mark. */
#loginGoogleButton,
#settingsLinkGoogleButton {
    background: #131314;
    border-color: #8E918F;
    color: #E3E3E3;
}

#loginGoogleButton:hover,
#settingsLinkGoogleButton:hover {
    background: #1E1F20;
}


/* ===== Rainbow username (level 14) ==========================================
   Built server-side as one span per letter (TextColor.RainbowText) because a CSS
   gradient positions its stops by percentage of element WIDTH, so with a
   proportional font the color changes fall mid-glyph. These are foreground
   colors, so they work on either theme. */
.rainbowLetter {
    font-weight: bold;
}

.rainbow0 { color: #ff4040; }
.rainbow1 { color: #ff9c33; }
.rainbow2 { color: #ffe14d; }
.rainbow3 { color: #4ddb63; }
.rainbow4 { color: #4db8ff; }
.rainbow5 { color: #9a7bff; }
.rainbow6 { color: #ff6ad5; }

/* Rainbow username swatch (dark theme). Same gradient; the *Dark class is the one the swatch uses. */
.rainbowDark, .RainbowDark, .rainbow, .Rainbow {
    background: linear-gradient(90deg, #ff4040, #ff9c33, #ffe14d, #4ddb63, #4db8ff, #9a7bff, #ff6ad5);
}