/* jackafur.com/nonstop: the same look as the 2025 page (black, scrolling hats, dark rounded
   cards, gold labels, light-blue values), tidied and made to fit a phone. */
body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #000;
    background-image: url('images/hats.png');
    background-repeat: repeat;
    background-size: 384px 384px;
    margin: 0;
    padding: 20px;
    color: #ddd;
    animation: moveHats 30s linear infinite;
}
/* the hats drift up and to the right, always, like the 2025 page (no reduced-motion exception:
   the owner wants them moving) */
@keyframes moveHats {
    0% { background-position: 0 0; }
    100% { background-position: 384px -384px; }
}
h1 {
    color: #fff;
    text-shadow: 2px 2px 4px #000;
}
h2 {
    color: #fff;
    text-shadow: 2px 2px 4px #000;
    margin: 0 0 10px;
}
h3 {
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    margin: 20px 0;
    text-shadow: 1px 1px 2px #000;
}
p {
    font-size: 1.2em;
    color: #ddd;
    margin: 5px 0;
}
a {
    color: #4fc3f7;
    text-decoration: none;
}
a:hover { text-decoration: underline; }
hr {
    border: 1px solid #333;
    margin: 10px 0;
}

.card, .download-box, .stream-box, .discord-box {
    border-radius: 8px;
    padding: 20px;
    display: block;
    margin: 20px auto 0;
    width: 80%;
    max-width: 600px;
    box-sizing: border-box;
}
.card, .stream-box, .discord-box {
    background-color: rgba(0, 0, 0, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.card.wide { max-width: 900px; }
@media (max-width: 640px) {
    body { padding: 12px; }
    .card, .download-box, .stream-box, .discord-box { width: 100%; padding: 14px; }
    p { font-size: 1.05em; }
    h1 { font-size: 1.6em; }
}

/* labels and values, as before */
code {
    font-size: 1.1em;
    font-weight: bold;
    color: #4fc3f7;
    background-color: #333;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 5px;
    line-height: 1.3;
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
}
.label { color: #ffeb3b; }
.status-green { color: #4caf50; font-weight: bold; }
.status-red { color: #f44336; font-weight: bold; }
.status-amber { color: #ffb300; font-weight: bold; }
.muted { color: #999; font-size: 0.95em; }
.small { font-size: 0.9em; }
.countdown { font-weight: bold; color: #4fc3f7; }
.server-image {
    max-width: 100%;
    height: auto;
    margin-top: 10px;
}
.mods {
    color: #bbb;
    font-size: 1em;
    margin: 8px 0 0;
}

/* buttons */
button, .button {
    padding: 12px 24px;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    cursor: pointer;
    display: inline-block;
    margin: 12px auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
    text-decoration: none;
}
button:hover, .button:hover {
    transform: scale(1.05);
    background-color: #45a049;
    text-decoration: none;
}
.button.small { padding: 8px 16px; font-size: 15px; }
.button.more { display: block; margin: 12px auto 0; }   /* "Show top 50" under a player list */
.button.support { background-color: #ff5e5b; }        /* Ko-fi's colour, so it isn't taken for a download */
.button.support:hover { background-color: #e8504d; }
.links { text-align: center; margin: 4px 0 14px; font-size: 1.05em; }
#support-download { margin-top: 4px; }
#support-download .button { margin-bottom: 4px; }
.kofi {
    display: inline-block;
    margin: 6px auto 2px;
    line-height: 0;
}
.kofi img {
    height: 48px;
    width: auto;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}
.kofi:hover img { transform: scale(1.05); }

/* the compact support line at the foot of the server card (supportSpot "status") */
.support-line { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 12px; }
.support-line p { margin: 0; }
.kofi.small { margin: 0; }
.kofi.small img { height: 40px; }

/* the download box */
.download-box .instructions {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 5px;
    margin: 20px 0 0;
}
.download-box ol {
    text-align: left;
    padding-left: 20px;
    margin: 0;
    list-style-type: none;
}
.download-box li {
    margin: 8px 0;
    background-color: #333;
    padding: 5px 10px;
    border-radius: 4px;
    color: #ddd;
}
.download-box li span.step {
    color: #ffeb3b;
    font-weight: bold;
}

/* the 24 h player graph */
.spark {
    width: 100%;
    height: 56px;
    display: block;
    margin-top: 10px;
}
.spark .bar { fill: #4fc3f7; }
.spark .bar.zero { fill: #2a2a2a; }
.spark .base { stroke: #333; stroke-width: 1; }

/* honorable mentions rows */
.awards {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    text-align: left;
}
.awards li {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 4px 10px;
    padding: 6px 8px;
    border-bottom: 1px solid #222;
    align-items: baseline;
}
.awards li:last-child { border-bottom: none; }
.awards .title { color: #ebebeb; font-weight: bold; letter-spacing: 0.02em; }
/* rarities, the in-game panel's loot ladder: common white, rare blue, legendary gold shimmer, mythic red flash */
.title.common, table.board .gold.common, .catalog .title.common { color: #ebebeb; }
.title.rare, .catalog .title.rare, table.board .gold.rare { color: #5ae1ff; }
.title.legendary, .catalog .title.legendary, table.board .gold.legendary { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.55); }
/* the cross-round awards: green, like their rows under the in-game panel, with the same light sweep through it (owner
   2026-10-05: "make them shimmer"); the tier heading stays plain */
.catalog-tier h3.cross { color: #6ee678; }
.title.cross, .catalog .title.cross {
    background: linear-gradient(90deg, #6ee678, #3cbe55, #6ee678, #d7ffd7, #6ee678);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cross-shimmer 3s linear infinite;
}
@keyframes cross-shimmer { to { background-position: -200% 0; } }
.title.mythic, .catalog .title.mythic, table.board .gold.mythic { color: #ff5252; animation: mythic 1s steps(2, end) infinite; }
@keyframes mythic { 50% { color: #fff; } }
/* the tier above mythic: rainbow across the letters, like the in-game panel */
.title.secret, .catalog .title.secret, table.board .gold.secret, .catalog-tier h3.secret {
    background: linear-gradient(90deg, #ff4d4d, #ffa040, #ffe93d, #4dff6a, #4da3ff, #c04dff, #ff4d4d);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    animation: rainbow 3s linear infinite;
}
@keyframes rainbow { to { background-position: 200% 0; } }
/* MICROWAVE COOKING FOR ONE, the clown's hidden award (item 27): goofier than the secret tier's smooth rainbow, like its
   in-game row: every letter its own loud color, hopping to the next, and bobbing out of step */
.catalog .title.clown span {
    display: inline-block;
    white-space: pre;
    color: #ff283c;
    animation: clown-colors 1s steps(1, end) infinite, clown-bob 0.9s ease-in-out infinite;
    animation-delay: calc(var(--i) * -0.17s), calc(var(--i) * -0.13s);
}
@keyframes clown-colors {
    0% { color: #ff283c; } 17% { color: #ffe600; } 33% { color: #00dcff; }
    50% { color: #ff7800; } 67% { color: #78ff28; } 83% { color: #ff3cdc; }
}
@keyframes clown-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
    .title.cross, .catalog .title.cross { animation: none; background: none; color: #6ee678; }
    .catalog .title.clown span { animation: none; }
    .catalog .title.clown span:nth-child(6n+2) { color: #ffe600; }
    .catalog .title.clown span:nth-child(6n+3) { color: #00dcff; }
    .catalog .title.clown span:nth-child(6n+4) { color: #ff7800; }
    .catalog .title.clown span:nth-child(6n+5) { color: #78ff28; }
    .catalog .title.clown span:nth-child(6n) { color: #ff3cdc; }
}
.rarity { font-size: 0.72em; color: #888; margin-left: 5px; text-transform: uppercase; letter-spacing: 0.06em; }
.awards .name { color: #fff; text-align: right; }
.awards .detail { grid-column: 1 / -1; color: #aaa; font-size: 0.9em; }
@media (min-width: 480px) {
    .awards li { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
    .awards .name { text-align: left; }
    .awards .detail { grid-column: auto; text-align: right; }
}

/* stream + discord boxes */
.stream-box iframe {
    width: 100%;
    height: 337px;
    border: none;
}
.discord-box iframe {
    width: 100%;
    max-width: 350px;
    height: 500px;
    border: none;
}
.hidden { display: none !important; }

/* awards page */
.tabs { margin: 10px 0; }
.tabs button {
    background: #222;
    color: #ddd;
    font-size: 15px;
    padding: 8px 18px;
    margin: 4px;
    box-shadow: none;
}
.tabs button.active { background: #4CAF50; color: #fff; }
.tabs button:hover { transform: none; }
table.board {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 1.05em;
}
table.board th {
    color: #ffeb3b;
    font-weight: bold;
    padding: 6px 8px;
    border-bottom: 1px solid #444;
}
table.board td {
    padding: 6px 8px;
    border-bottom: 1px solid #222;
    vertical-align: top;
}
table.board tr:last-child td { border-bottom: none; }
table.board .num { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
    table.board .wide { display: none; }   /* the chatty columns go on phones */
    table.board { font-size: 0.95em; }
    table.board th, table.board td { padding: 6px 4px; }
    .card { overflow-x: auto; }
}
table.board .rank { color: #999; width: 2em; }
table.board .gold { color: #ffd200; font-weight: bold; }
.bars {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    gap: 2px;
    align-items: end;
    height: 90px;
    margin-top: 12px;
}
.bars div {
    background: #4fc3f7;
    border-radius: 2px 2px 0 0;
    min-height: 2px;
    position: relative;
}
.bars div.dim { background: #2a2a2a; }
.bars-labels {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    font-size: 0.7em;
    color: #888;
    margin-top: 4px;
}
.bars-labels span:nth-child(3n+2), .bars-labels span:nth-child(3n) { visibility: hidden; }
.days {
    display: grid;
    grid-auto-flow: column;
    gap: 3px;
    align-items: end;
    height: 70px;
    margin-top: 12px;
}
.days div { background: #ffd200; border-radius: 2px 2px 0 0; min-height: 2px; }
.days div.dim { background: #2a2a2a; }
.rounds {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
    text-align: left;
}
.rounds > li {
    padding: 8px 0;
    border-bottom: 1px solid #222;
}
.rounds > li:last-child { border-bottom: none; }
.rounds .when { color: #4fc3f7; font-weight: bold; }
.catalog {
    text-align: left;
    columns: 2;
    column-gap: 24px;
    padding: 0;
    margin: 10px 0 0;
    list-style: none;
}
@media (max-width: 640px) { .catalog { columns: 1; } }
.catalog li { break-inside: avoid; margin-bottom: 8px; }
.catalog-tier { margin-top: 16px; }
.catalog-tier h3 {
    text-align: left; font-size: 1.05em; margin: 0 0 6px; padding-bottom: 4px;
    border-bottom: 1px solid #333; text-transform: uppercase; letter-spacing: 0.08em;
}
.catalog-tier h3.common { color: #ebebeb; }
.catalog-tier h3.rare { color: #5ae1ff; }
.catalog-tier h3.legendary { color: #ffd700; text-shadow: 0 0 8px rgba(255, 215, 0, 0.55); }
.catalog-tier h3.mythic { color: #ff5252; animation: mythic 1s steps(2, end) infinite; }
.catalog-tier.new h3 { color: #888; }
.catalog .title { color: #ffd200; font-weight: bold; }
.footer { margin-top: 24px; color: #888; font-size: 0.95em; }

/* levels (Hide & Seek+ XP): a small gold tag next to a name */
/* the badge column next to the player's name (Standings, Regulars): as narrow as the badge */
table.board .lvcol { width: 1%; white-space: nowrap; padding-left: 0; }
table.board .name { width: 1%; white-space: nowrap; }   /* as wide as the longest name, the rest for Favourites */
.lv {
    display: inline-block;
    font-size: 0.72em;
    font-weight: bold;
    color: #ffd200;
    border: 1px solid rgba(255, 210, 0, 0.55);
    border-radius: 4px;
    padding: 0 4px;
    vertical-align: 1px;
    white-space: nowrap;
    text-shadow: none;
}
/* MICROWAVE COOKING FOR ONE (the mod's xpOneWindow): a clown in the same box as the Lv badge while the clown month
   runs, and the record's card on the player page, set apart but calm (amber, like the site's other warnings) */
/* the emoji a little bigger than the badge's letters, in a box of the same height and line (measured in Chrome) */
.lv.clown { font-size: 0.85em; line-height: 1; vertical-align: 0; padding: 0 2px; border-color: rgba(255, 179, 0, 0.55); cursor: help; }
.card.shame { border: 1px solid rgba(255, 179, 0, 0.35); }
.card.shame h2 { color: #ffb300; letter-spacing: 0.02em; }

/* player names link to their page (player?name=...), in the colour of wherever they are */
a.player { color: inherit; border-bottom: 1px dotted rgba(255, 255, 255, 0.35); }
a.player:hover { text-decoration: none; border-bottom: 1px solid currentColor; }

/* "Find a player" in the Standings card: the found player's row and the ones around them */
.find { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 10px; }
.find input {
    flex: 1 1 180px;
    max-width: 280px;
    min-width: 0;
    font-size: 16px;   /* 16px keeps phones from zooming in on the box */
    padding: 8px 10px;
    color: #eee;
    background: #111;
    border: 1px solid #444;
    border-radius: 5px;
}
.find input:focus { outline: none; border-color: #4fc3f7; }
.find .button { margin: 0; }
.find-note .button { margin: 6px auto 10px; }
.find-note p { margin: 4px 0; }
button.pick {
    background: none; box-shadow: none; padding: 0; margin: 0; border-radius: 0;
    color: #4fc3f7; font-size: inherit; font-family: inherit;
}
button.pick:hover { background: none; transform: none; text-decoration: underline; }
table.board tr.me td { background: rgba(79, 195, 247, 0.16); }

/* the player page */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.tile { background: rgba(255, 255, 255, 0.05); border-radius: 6px; padding: 10px 6px; }
.tile .v { display: block; font-size: 1.5em; font-weight: bold; color: #4fc3f7; }
.tile .k { display: block; font-size: 0.85em; color: #ffeb3b; margin-top: 2px; }
.ranks { margin-top: 12px; }
.big { font-size: 1.6em; font-weight: bold; color: #4fc3f7; }
.meter { height: 10px; margin: 8px auto; max-width: 420px; background: #2a2a2a; border-radius: 5px; overflow: hidden; }
.meter div { height: 100%; background: #ffd200; border-radius: 5px; }
.catalog .title.missing { color: #555; font-weight: normal; }
.catalog-tier h3.other { color: #888; }
.rec { color: #ffd200; margin-left: 6px; }

/* achievements on the player page: one tile per goal, dots for its steps */
.achievements {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}
.achievements li { background: rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 8px 10px; }
.achievements li div.small { margin-top: 3px; }
/* the player page's "This name" card: the lock and the Discord link */
.protect code, #yourname code { background: rgba(255, 255, 255, 0.08); border-radius: 4px; padding: 1px 5px; }
.protect .linked { color: #8be28b; font-weight: bold; margin-right: 6px; }
#yourname p, #yourname ol { text-align: left; }
#yourname ol { margin: 4px 0 8px 24px; padding: 0; }
#yourname li { margin: 4px 0; }
#yourname code, #yourname .keep { white-space: nowrap; }
.ach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ach-name { font-weight: bold; letter-spacing: 0.02em; color: #888; }
.achievements li.got .ach-name { color: #ffd200; }
.pips { white-space: nowrap; }
.pips span { display: inline-block; width: 7px; height: 7px; margin-left: 3px; border-radius: 50%; background: #333; }
.pips span.on { background: #ffd200; }
.meter.thin { height: 5px; margin: 6px 0 0; max-width: none; }