/* CM 26/27 site. Colours sampled from the game's main menu (title bar, menu tiles, "Please Select" bar). */
@font-face { font-family: 'CM Pixel'; src: url('fonts/ms_sans_serif.woff2') format('woff2'); font-weight: 400; }
@font-face { font-family: 'CM Pixel'; src: url('fonts/ms_sans_serif_bold.woff2') format('woff2'); font-weight: 700; }

:root {
  --cm-bar: #004000;          /* title bar green */
  --cm-bar-edge: #002800;
  --cm-title: #fcfe02;        /* title bar text yellow */
  --cm-tile-edge: #0627ac;    /* menu tile border navy */
  --cm-tile: rgba(0, 0, 10, .38);
  --cm-tile-hover: rgba(6, 39, 172, .45);
  --cm-panel: rgba(4, 6, 22, .82);
  --cm-grey: #666466;         /* "Please Select" bar */
  --cm-grey-hi: #8c8a8c;
  --cm-grey-lo: #3a393a;
  --cm-tag: #7f797a;          /* date tag */
  --cm-text: #ffffff;
  --cm-muted: #c9cbd6;
  --cm-good: #5fe07a;
  --cm-bad: #ff6a5f;
  --game: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Verdana, sans-serif;
  --pixel: 'CM Pixel', 'MS Sans Serif', Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font: 14px/1.5 var(--game); color: var(--cm-text); background: #0b0d10; padding-bottom: 56px; }
a { color: var(--cm-title); }
/* Background: a floodlit pitch drawn in CSS (mown stripes, halfway line and centre circle), no photos */
#bg { position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 255, 255, .06), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 640' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='3'%3E%3Crect x='40' y='40' width='920' height='560'/%3E%3Cline x1='500' y1='40' x2='500' y2='600'/%3E%3Ccircle cx='500' cy='320' r='90'/%3E%3Crect x='40' y='190' width='140' height='260'/%3E%3Crect x='820' y='190' width='140' height='260'/%3E%3C/g%3E%3C/svg%3E") center/cover no-repeat,
    repeating-linear-gradient(90deg, #15491f 0 7.14%, #11401b 7.14% 14.28%); }
#bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55)); }

/* Title bar: the date in yellow, a small date tag top right, as in the game */
.titlebar { position: sticky; top: 0; z-index: 10; background: var(--cm-bar); border-bottom: 2px solid var(--cm-bar-edge);
  box-shadow: inset 0 1px 0 #1d5a1d, 0 2px 0 #000; padding: 10px 120px; text-align: center; }
.longdate { display: inline-block; font: 700 26px/1.1 var(--game); color: var(--cm-title); text-shadow: 2px 2px 0 #000; letter-spacing: .5px; text-decoration: none; }
.datetag { position: absolute; top: 4px; right: 6px; font: 11px var(--pixel); color: #000; background: var(--cm-tag); padding: 1px 6px;
  box-shadow: inset 1px 1px 0 #b9b5b6, inset -1px -1px 0 #3d3a3b; }

main { max-width: 1000px; margin: 0 auto; padding: 0 16px 24px; }
.screen-title { text-align: center; font: 700 28px/1.2 var(--game); margin: 4px 0 18px; text-shadow: 2px 2px 0 #000; }
.screen-sub { text-align: center; margin: -12px auto 20px; max-width: 620px; font-size: 15px; text-shadow: 1px 1px 0 #000; }
.screen-sub:first-child { margin-top: 6px; font-size: 17px; max-width: 900px; }

/* Menu tiles, as on the game's main screen */
.tile { font: 19px/1.15 var(--game); color: var(--cm-text); text-shadow: 2px 2px 0 #000; background: var(--cm-tile); text-decoration: none;
  border: 2px solid var(--cm-tile-edge); min-height: 150px; padding: 10px; display: flex; align-items: center; justify-content: center;
  text-align: center; cursor: pointer; }
.tile:hover, .tile:focus-visible { background: var(--cm-tile-hover); outline: none; }
.tile.go { color: var(--cm-title); }
.menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-width: 860px; margin: 0 auto 26px; }
.menu.row2 { grid-template-columns: repeat(3, 1fr); max-width: 645px; margin-top: -22px; }
.minimenu { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; padding: 18px 16px 20px; }
.minimenu .tile { min-height: 0; font-size: 14px; padding: 7px 14px; }
.minimenu .tile.on { background: var(--cm-tile-edge); }
.page-home .minimenu { display: none; }
.page-home main { padding-top: 18px; }

/* "Please Select" bar: says what's under the pointer (on Play, the game's save status) */
.status { position: fixed; left: 8px; right: 8px; bottom: 6px; z-index: 10; background: var(--cm-grey); color: #fff; text-align: center;
  font: 17px/1 var(--game); padding: 9px 12px 8px; text-shadow: 1px 1px 0 #000;
  box-shadow: inset 2px 2px 0 var(--cm-grey-hi), inset -2px -2px 0 var(--cm-grey-lo), 0 0 0 1px #000; }
.status.ok { color: var(--cm-good); }
.status.busy { color: var(--cm-bad); animation: busy 1.2s ease-in-out infinite alternate; }
@keyframes busy { to { color: #ffb4ad; } }
@media (prefers-reduced-motion: reduce) { .status.busy { animation: none; } }

.tile.off, .btn.off { color: var(--cm-muted); opacity: .6; cursor: not-allowed; }
.tile.off { flex-direction: column; }
.tile.off small { display: block; font-size: 12px; margin-top: 6px; color: var(--cm-title); }
.btn.off small { margin-left: 6px; font-size: 11px; color: var(--cm-title); }
.touchnote { margin: auto; max-width: 520px; padding: 18px 20px; text-align: center; }
.touchnote h2 { color: var(--cm-title); font-size: 20px; margin-bottom: 8px; }
.touchnote p { margin-bottom: 12px; }
.touchnote-links { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.touchnote-links .tile { min-height: 0; font-size: 15px; padding: 9px 14px; }
.touchnote .muted a { color: var(--cm-title); text-decoration: underline; }

/* Panels */
.grid { display: grid; gap: 14px; grid-template-columns: repeat(12, 1fr); }
.s12 { grid-column: span 12; } .s6 { grid-column: span 6; } .s8 { grid-column: span 8; } .s7 { grid-column: span 7; } .s5 { grid-column: span 5; } .s4 { grid-column: span 4; }
.col { display: grid; gap: 14px; align-content: start; }
.s8.center { grid-column: 3 / span 8; }
.panel { background: var(--cm-panel); border: 2px solid var(--cm-tile-edge); scroll-margin-top: 70px; }
.panel > h2 { margin: 0; padding: 5px 10px; font: 700 15px var(--game); color: var(--cm-title); background: var(--cm-bar);
  text-shadow: 1px 1px 0 #000; border-bottom: 2px solid var(--cm-tile-edge); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.panel > h2 small, .panel > h2 a.small { font: 11px var(--pixel); color: #e6f2e6; text-shadow: none; }
.body { padding: 12px 14px; }
.body p { margin: 0 0 10px; } .body p:last-child { margin-bottom: 0; }
.body h3 { font: 700 14px var(--game); color: var(--cm-title); margin: 16px 0 4px; }
.body h3:first-child { margin-top: 0; }
.muted { color: var(--cm-muted); font-size: 12px; }

.btn { font: 14px var(--game); color: #fff; background: var(--cm-grey); border: 0; padding: 6px 14px; cursor: pointer; text-shadow: 1px 1px 0 #000;
  text-decoration: none; display: inline-block;
  box-shadow: inset 2px 2px 0 var(--cm-grey-hi), inset -2px -2px 0 var(--cm-grey-lo), 0 0 0 1px #000; }
.btn:active { box-shadow: inset 2px 2px 0 var(--cm-grey-lo), inset -2px -2px 0 var(--cm-grey-hi), 0 0 0 1px #000; }
.btn.go { background: var(--cm-bar); color: var(--cm-title); box-shadow: inset 2px 2px 0 #1d6a1d, inset -2px -2px 0 #001c00, 0 0 0 1px #000; }
.btn.sm { font-size: 12px; padding: 2px 8px; }
.btn:disabled { opacity: .55; cursor: default; }

.badge { display: inline-block; font: 11px var(--pixel); padding: 1px 6px; background: var(--cm-tile-edge); color: #fff; text-shadow: none; }
.badge.ng { background: #9a1018; }
.badge.inv { background: var(--cm-title); color: #000; }

table.cm { width: 100%; border-collapse: collapse; }
table.cm th, table.cm td { text-align: left; padding: 5px 8px; border-bottom: 1px solid rgba(6, 39, 172, .7); vertical-align: top; }
table.cm th { color: var(--cm-title); font-weight: 700; white-space: nowrap; }
table.cm th.n { text-align: right; }
table.cm td.n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Player info, in club colours */
.strip { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px; font-weight: 700; text-shadow: none; border: 1px solid #000; }
.pdl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 10px 0; }
.pdl dt { color: var(--cm-title); } .pdl dd { margin: 0; }
.attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 13px; }
.attr { display: grid; grid-template-columns: 86px 1fr 20px; align-items: center; gap: 6px; }
.bar { height: 8px; background: #22252e; border: 1px solid var(--cm-tile-edge); }
.bar i { display: block; height: 100%; background: var(--cm-good); }
.attr b { text-align: right; }

/* News */
.inbox { display: grid; grid-template-columns: 270px 1fr; gap: 10px; }
.inbox ul { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; border: 1px solid var(--cm-tile-edge); }
.inbox li { padding: 6px 8px; cursor: pointer; border-bottom: 1px solid rgba(6, 39, 172, .6); font-size: 13px; }
.inbox li .d { display: block; font: 11px var(--pixel); color: var(--cm-muted); }
.inbox li.on { background: var(--cm-tile-edge); }
.inbox li:not(.on):hover { background: rgba(6, 39, 172, .35); }
.read h3 { margin: 0 0 6px !important; font-size: 17px !important; }
.read .meta { margin-bottom: 10px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.read ul { margin: 0; padding-left: 18px; } .read li { margin-bottom: 10px; }
.read li .badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 3px; }
.newsrow { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(6, 39, 172, .6); font-size: 13px; color: var(--cm-text); text-decoration: none; }
.newsrow:hover b { color: var(--cm-title); }
.issue { padding: 5px 0; border-bottom: 1px solid rgba(6, 39, 172, .6); }

ol.steps { margin: 0; padding-left: 20px; } ol.steps li { margin-bottom: 9px; }
ol.steps ul { margin: 6px 0 0; padding-left: 18px; } ol.steps ul li { margin-bottom: 4px; }
.faq details { border: 2px solid var(--cm-tile-edge); background: var(--cm-tile); margin-bottom: 6px; }
.faq summary { cursor: pointer; padding: 7px 10px 7px 30px; position: relative; list-style: none; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: '+'; position: absolute; left: 11px; color: var(--cm-title); }
.faq details[open] summary::before { content: '\2212'; }
.faq summary:hover, .faq summary:focus-visible { background: var(--cm-tile-hover); outline: none; }
.faq details p { margin: 0; padding: 2px 12px 10px 30px; }
.faq h3 { margin-top: 18px; }
code { font: 12px ui-monospace, Menlo, monospace; background: #000; color: var(--cm-good); padding: 1px 4px; border: 1px solid var(--cm-tile-edge); }

form .f { margin-bottom: 12px; }
form .l { display: block; color: var(--cm-title); font-weight: 700; margin-bottom: 4px; }
form input[type=text], form textarea { width: 100%; font: 14px var(--game); padding: 6px 8px; color: #000; background: #fff; border: 0;
  box-shadow: inset 2px 2px 0 var(--cm-grey-lo), inset -1px -1px 0 var(--cm-grey-hi); }
form textarea { min-height: 110px; resize: vertical; }
.radios { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auto { font: 11px var(--pixel); background: #000; border: 1px solid var(--cm-tile-edge); padding: 5px 8px; color: var(--cm-muted); }
.err { color: var(--cm-bad); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Play: the game fills the screen; the status bar carries the save status */
body.page-play { height: 100vh; display: flex; flex-direction: column; padding-bottom: 0; }
.page-play .titlebar { position: static; }
.page-play .minimenu { padding: 8px 16px; }
.page-play .minimenu :is([data-page=see-the-game], [data-page=database], [data-page=changes], [data-page=play]) { display: none; }   /* keep the game screen's menu short */
.page-play main { flex: 1; min-height: 0; max-width: none; width: 100%; padding: 0 8px; display: flex; flex-direction: column; }
.page-play #dos { flex: 1; min-height: 0; border: 2px solid var(--cm-tile-edge); background: #000; }
.page-play .foot { margin: 0 0 8px; }
.home-foot { margin: 14px 0 28px; }
.page-play .status { position: static; margin: 6px 8px; }

/* 404: the game's termination screen */
.term { background: #000; color: #aaa; font: 16px/1.6 ui-monospace, Menlo, monospace; padding: 24px; border: 2px solid #333; max-width: 820px; margin: 0 auto; }
.term .hi { color: #fff; }

/* See the Game */
.still { margin: 0; }
.still img { display: block; width: 100%; height: auto; border-bottom: 2px solid var(--cm-tile-edge); }
.still figcaption { padding: 8px 12px 10px; font-size: 14px; }
.still figcaption b { color: var(--cm-title); margin-right: 4px; }
.still-cta { display: flex; flex-direction: column; }
.still-cta .body { flex: 1; display: flex; flex-direction: column; justify-content: center; font-size: 15px; }

.cta { text-align: center; margin: 20px 0 0; }
.foot { text-align: center; color: var(--cm-muted); font-size: 12px; text-shadow: 1px 1px 0 #000; margin-top: 20px; }
[hidden] { display: none !important; }

@media (max-width: 760px) {
  .titlebar { padding: 18px 10px 8px; } .longdate { font-size: 17px; }
  .screen-title { font-size: 22px; }
  .menu, .menu.row2 { grid-template-columns: 1fr 1fr; margin-top: 0; }
  .menu:has(+ .menu.row2) { margin-bottom: 4px; }          /* the two home menus read as one grid */
  .menu.row2 .tile:last-child:nth-child(odd) { grid-column: span 2; }   /* no lone half-width tile */
  .tile { min-height: 92px; font-size: 16px; }
  .s8, .s8.center, .s7, .s6, .s5, .s4 { grid-column: span 12; }
  table.cm .wide { display: none; }
  table.cm th, table.cm td { padding: 5px 4px; }
  .inbox { grid-template-columns: 1fr; } .inbox ul { max-height: 190px; }
  .two, .attrs { grid-template-columns: 1fr; }
  .status { font-size: 14px; }
}
@media (max-width: 480px) {
  table.cm.stack th, table.cm.stack td { display: block; border: 0; padding: 2px 0; }
  table.cm.stack tr { display: block; padding: 6px 0; border-bottom: 1px solid rgba(6, 39, 172, .7); }
  .longdate { font-size: 15px; }
}