/* ============================================================
   Squarerigger Pub — poolstyles.css, full rewrite
   Loads AFTER uni.css and defines the authoritative widths for
   #Header/#Output/#Logbox etc. Every background-image url()
   pointing at superbrawl.com is gone — see uni.css's header
   comment for the full rationale. Semantic pick-result colors
   and data-row striping under #Report are unchanged in meaning.
   Widths: #Wrapper is now fluid (fills the site's .wrap, which
   maxes at 1180px) instead of a hardcoded 1000px canvas.
   #Header/#Output/#Logbox scale off that instead of fixed px.
   ============================================================ */

:root{
  --ink:#121316; --ink-2:#1B1C20; --walnut:#2B2019; --walnut-2:#332419;
  --brass:#C6995C; --brass-soft:rgba(198,153,92,.28); --amber:#E8A94F;
  --cream:#F3EBDD; --cream-dim:rgba(243,235,221,.68); --line:rgba(198,153,92,.18);
}

body {font:normal 100% 'Manrope', Verdana, sans-serif;} * input {outline:none;} * {margin:0;} img {border:none;} ul {margin-top: 0.2em; margin-bottom: 0.5em;} a:link, a:visited, a:active, a:hover	{text-decoration:none; color:var(--cream); font-family: 'Manrope', Verdana, sans-serif; outline:none;} a:hover		{text-decoration:underline; color:var(--amber);} div {padding:0px;}

#Browser {
  background:transparent; 
  position:absolute; top:0px; left:0px; width:99.9%; margin:0px 0px 40px 0px; padding:0px 0px 40px 0px;
  z-index:1;
}
#Wrapper {margin:5px 0 40px 0; padding:0px; width:100%; min-height:1200px; padding-bottom:40px; border:none; position:relative; top:0px; left:0px; box-sizing:border-box;}

#Marquee  {border:none; font:bold 160% 'Fraunces', Georgia, serif; color:var(--cream); width:100%; height:150px; padding:0px; position:absolute; top:1px; left:20px; z-index:3;}
#MarqueeS {border:none; font:bold 160% 'Fraunces', Georgia, serif; color:var(--cream); width:100%; height:150px; padding:0px; position:absolute; top:1px; left:20px; z-index:2;display:none;}

/* #Menu { color:var(--cream); border:none; font-size:80%; outline:none; padding:0px;
	position:absolute; top:173px; left:10px; z-index:3; background:transparent; height:20px; display:flex; gap:6px;} */
      #Menu {
         color: var(--cream);
         border: none;
         font-size: 80%;
         outline: none;
         padding: 0px;
         position: absolute;
         top: 70px;
         left: 10px;
         z-index: 3;
         background: transparent;
         height: 20px;
         display: flex;
         gap: 6px;
      }
#Menu div {float:left;}
#Menu div a:link, #Menu div a:visited, #Menu div a:active, #Menu div a:hover {text-decoration: none; color:var(--cream); outline:none;}
#Mlink {
  background:transparent; border:1px solid var(--brass-soft); border-radius:16px;
  padding:10px 16px; font-family:'IBM Plex Mono', monospace; line-height:1; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center;
  text-transform:uppercase; letter-spacing:1px; font-size:10px; transition:all .2s ease;
}
#Mlink:hover, #Mlink a:hover { background:var(--brass); border-color:var(--brass); color:var(--ink); }
#Rephead {
  background:transparent; border-bottom:1px solid var(--brass-soft); padding:6px 4px;
  font-family:'IBM Plex Mono', monospace; line-height:1; box-sizing:border-box;
  display:inline-flex; align-items:center;
  text-transform:uppercase; letter-spacing:.5px; font-size:10px;
}
#Msep { background:none; border-left:1px solid var(--line); width:1px; height:30px; padding:0px; }

.NFL .mlink	{ background:var(--brass); border-color:var(--brass); color:var(--ink); }
.NFL .mlink:hover	{ background:var(--amber); border-color:var(--amber); }

#Logbox {width:auto; max-width:500px; position:absolute; top:0px; right:2px; z-index:4;
	 color:var(--cream); font:normal 80% 'Manrope', Verdana, sans-serif; text-align:right;}

/* Authoritative #Output rule. Width now matches the two-column
   proportion of the old 1000px/700px canvas (70%), but scales
   with #Wrapper's fluid width — which fills the site's .wrap
   (max 1180px) instead of a hardcoded 1000px box. */
/* #Output {
  position:absolute; top:210px; left:0px; padding:16px; box-sizing:border-box;
  border:1px solid var(--brass); background:var(--ink-2); border-radius:8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(198,153,92,0.08);
  color:var(--cream); width:70%; min-height:500px; font:normal 80% 'Manrope', Verdana, sans-serif; z-index:6;
} */
#Output {
   position: absolute;
   top: 130px;
   left: 0px;
   padding: 16px;
   box-sizing: border-box;
   /* border: 1px solid var(--brass); */
   /* background: var(--ink-2); */
   border-radius: 8px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(198, 153, 92, 0.08);
   color: var(--cream);
   width: 100%;
   min-height: 500px;
   font: normal 80% 'Manrope', Verdana, sans-serif;
   z-index: 6;
}
#Output a:link, #Output a:visited, #Output a:active, #Output a:hover	{background:transparent; text-decoration: none; color:var(--cream); font-family: 'Manrope', Verdana, sans-serif;}
#Output .link1, #Output .link1b, #Output a:hover		{text-decoration:underline; color:var(--amber);}
#Widget {position:absolute; top:210px; right:0; padding:1px; border:none; color:var(--cream); font:normal 80% 'Manrope', Verdana, sans-serif; z-index:2; width:28%;}

#Gmnu {height:25px; z-index:4; position:relative; top:-8px; left:-1px;}

/* Authoritative #Header rule — flat gradient banner, fluid width. */
#Header {
  width:100%; height:140px; background:linear-gradient(135deg, var(--walnut) 0%, var(--ink) 100%);
  background-repeat:no-repeat; padding:0px; box-sizing:border-box;
  position:absolute; top:30px; left:0px;
  border:1px solid var(--line); border-radius:10px; z-index:1;
  display:flex; align-items:center; justify-content:center;
  display: none
}
.BASEhd, .NFLhd {
  background:transparent; color:var(--cream); border:none; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.BASEhd::before, .NFLhd::before {
  content:"The Squarerigger Pub \2014 NFL Pool";
  font-family:'Fraunces', Georgia, serif; font-weight:500; font-size:1.9rem;
  letter-spacing:.5px; color:var(--brass); text-align:center;
}


.link1, .link1b {text-decoration:none; color:var(--cream); outline:none; font-weight:normal;}
.link1b {font-weight:bold;}

#Report {width:99%; margin:10px auto; font-size:110%;}
#Report table {border:1px solid var(--line); margin:0 auto; border-collapse:collapse;}
#Report .NFL .rephd	{background:var(--ink); border-radius:4px 4px 0 0;}
#Report .NFL .rephd	 td {color:var(--cream);}

#Report th {color:var(--cream); background:var(--ink);}
#Report td {color:#000;}
#Report td .link1 {color:#000; font-weight:normal;}
#Report th .link1 {color:var(--cream); font-weight:normal;}

#Report tr.r1 td {background:#FFF; color:#000; border-bottom:1px solid #000;}
#Report tr.r2 td {background:#CCC; color:#000; border-bottom:1px solid #000;}
#Report tr.r3 td {background:#0F0; color:#000; border-bottom:1px solid #000;}

#Report tr.match td, #Report .match, #Report table td .match  {background:#FC3; color:#000;}

#Report tr.spotlight td {background:#F09; color:#000; border-bottom:1px solid #000;}

#Report .win {background:#F09; color:#FFF;}
#Report .vis  	{color:#FFF; background:#025BC0;}						/* visitor */
#Report .viss  	{color:#FFF; background:#025BC0;}						/* vis score */
#Report .hom  	{color:#FFF; background:#0000A3;}						/* home */
#Report .homs 	{color:#FFF; background:#00007C;}						/* home score */
#Report .cpik 	{color:#000; background:#FC3;}							/* correct pick */
#Report .win  	{color:#000; background:#FC3;}							/* win */
#Report .cov  	{color:#000; background:#0C0;}							/* cover */
#Report .fav  	{color:#FFF; background:#007C00;}						/* favorite */
#Report .spr  	{color:#FFF; background:#007C00;}						/* spread */
#Report .dog  	{color:#FFF; background:#007C00;}						/* underdog */
#Report .ou  		{color:#FFF; background:#000;}							/* over under */
#Report .ouo 		{color:#FFF; background:#CA0000;}						/* over under over */
#Report .ouu 		{color:#FFF; background:#A3A300;}						/* over under -under */
#Report .sh 			{color:#FFF; background:#002; border:none; font-size:90%;} /* small header spots */
#Report .res  		{color:#FFF; background:#F00;}							/* game results style */

/* Delete/action icons: flat glyph buttons replacing
   trashsprite1.png's 4 sprite states (normal/hover/pressed/off) */
#Report .th1, #Report .th2, #Report .th3, #Report .th4 {
  background:var(--ink-2); color:var(--cream-dim); text-align:center; cursor:pointer;
  border-radius:3px; transition:all .2s ease;
}
#Report .th1::before, #Report .th2::before, #Report .th3::before, #Report .th4::before { content:"\00D7"; font-weight:bold; }
#Report .th3, #Report .th1:hover, #Report .th2:hover { background:var(--brass); color:var(--ink); }
#Report .thp {background:var(--brass); color:var(--ink);}
#Report .th1 .link1, #Report .th1 .link1b, #Report .th2 .link1, #Report .th2 .link1b {text-decoration:none; color:var(--cream); outline:none; font-weight:normal;}



#Logbox .ti {
  font:normal 85% 'Manrope', Verdana, sans-serif; height:1.0em; background:var(--ink-2);
  color:var(--cream); border:1px solid var(--brass-soft); border-radius:3px; padding:3px 6px;
}
#Logbox a:link, #Logbox a:visited, #Logbox a:active, #Logbox a:hover	{text-decoration: none; color:var(--cream); font-family: 'Manrope', Verdana, sans-serif;}
#Logbox a:hover		{color:var(--amber);}
#Logbox td {padding-right:8px; height:36px; background:transparent;}
#Logbox .left, #Logbox .right {background:transparent; width:6px; padding:0px;}
#Logbox .button {margin:4px 2px 3px 2px; padding:4px 11px 7px 11px; height:1.8em; outline:none;}

#Logbox .profile div, #Logbox .logout div, #Logbox .tools div {
  background:transparent; width:30px; height:30px; padding:0px; border:1px solid var(--brass-soft);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:var(--cream); font-size:14px; transition:all .2s ease;
}
#Logbox .profile div:hover, #Logbox .logout div:hover, #Logbox .tools div:hover {
  border-color:var(--brass); color:var(--brass); background:rgba(198,153,92,.08);
}
#Logbox .profile div::before { content:"\1F464"; }
#Logbox .tools div::before   { content:"\2699";  }
#Logbox .logout div::before  { content:"\23FB";  }

input[type="button"]::-moz-focus-inner     {            border : 0px;     }


#Fdiv {position:absolute; top:0px; left:0px; width:100%; height:130%; border:none; z-index:98;}

#Xdiv {position:relative; margin:35px; border:3px solid var(--brass); color:var(--cream); padding:3px; background:var(--ink-2); border-radius:10px; box-shadow:0 8px 28px rgba(0,0,0,0.5);}
#Xdiv a:link, #Xdiv a:visited, #Xdiv a:active {color:var(--brass); text-decoration:none;}
#Xdiv a:hover		{ color:var(--amber);}
#Xdiv .ti {font:normal 75% 'Manrope', Verdana, sans-serif; height:1.2em;}
#Xdiv th {background:var(--ink); color:var(--cream); font-size:85%; padding:2px 5px;}
#Xdiv .button {font-size:85%;}
#Xdiv tr.r1 td {background:#FFF; color:#000;}
#Xdiv tr.r2 td {background:#CCC; color:#000;}
#Xdiv .link1 {color:var(--cream); text-decoration:none; outline:none; font-weight:normal;}

#xcon {display:none; width:160px; height:100px; padding:0px; position:fixed; top:0px; left:0px; font:80% normal Verdana; border:0px solid #F00; background:transparent; color:#FF0; z-index:90;}
#Xdiv .xcon th {background:transparent; color:#0F0;}

/* --- Secondary report/leaderboard table. Rounded corner
       end-caps (rndleft/rndright/rndleftb/rndrightb.png) are
       replaced with plain CSS border-radius on the actual
       header/footer cells. --- */
#Report1 {font-family:'Manrope', "Verdana", Sans-Serif;font-size: 12px;	margin:2px 20px;	min-width:300px; text-align:left;	border-collapse:collapse;}
#Report1 table {border:none; border-collapse:collapse;}
#Report1 thead th.tl {background: var(--ink); padding-left:8px; min-width:6px; border:none; border-radius:6px 0 0 0;}
#Report1 thead th.tr {background: var(--ink); padding-right:8px; min-width:6px; border:none; border-radius:0 6px 0 0;}
#Report1 th {background: var(--ink); white-space:nowrap; padding:3px; font-size:95%; color:var(--cream); border:none;}
#Report1 td {white-space:nowrap;padding:3px;	background: #e8edff;	border-top:1px solid #fff; color:#669;}
#Report1 tr.r1 td {padding:3px;	background: #ccc;	border-top:1px solid #fff; color:#000;}
#Report1 tr.r2 td {padding:3px;	background: #fff;	border-top:1px solid #fff; color:#000;}
#Report1 .it2 {width:150px;}
#Report1 tfoot td.bl {color:var(--cream); background:var(--ink); border-radius:0 0 0 6px;}
#Report1 tfoot td.br {color:var(--cream); background:var(--ink); border-radius:0 0 6px 0;}
#Report1 tbody tr:hover td {background: rgba(198,153,92,.15); color:#000}
#Report1 .link1, #Report1 .link1b, #Report1 a:hover {color:#000}

/* #Box {border:1px solid var(--line); margin:auto; color:var(--cream); padding:10px; background:var(--ink-2);} */
#Box {
   border: 1px solid var(--line);
   margin: auto;
   color: var(--cream);
   padding: 10px;
   background: var(--ink-2);
   width: 100% !important;
}
#Box th {background:transparent; white-space:nowrap; padding:3px; font-size:140%;}
#Box table {margin:0 auto;}
#Box td {white-space:nowrap;padding:3px;}
#Box td .link1 {color:#F00;}

#Forms {width:99%;}
#Forms table {margin:0 auto; border:1px solid var(--line); border-collapse:collapse;}
#Forms thead th {padding:3px 4px 3px 4px; height:16px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--cream);}
#Forms tbody th {background:var(--ink); color:var(--cream); font-weight:normal; font-size:90%;}
#Forms tbody td {font-weight:normal; font-size:90%;}

#strMarquee {width:600px; margin:1px; border:none; color:var(--cream); font:bold 120% 'Fraunces', Georgia, serif;}
#strTops, #strImages, #strVideo {width:300px; padding:0px; margin:2px 0px; border:none; text-align:center; color:var(--cream);}

#strTops table {width:300px; background:var(--ink); border-collapse:collapse; border:1px solid var(--line); margin:0 auto;}
#strTops th.head {background:var(--ink); color:var(--cream); padding:2px 5px; font-size:90%; text-align:center; border-bottom:1px solid var(--line);}
#strTops th {background:var(--brass); color:var(--ink); padding:2px 5px; font-size:90%; text-align:center; border-bottom:1px solid var(--line);}
#strTops td {background:var(--ink); color:var(--cream); padding:1px;}

#strImages {background:var(--ink-2);}
#strImages img {border:1px solid var(--line);}

#strColumn {text-align:left; width:375px; margin:2px; border:none; color:var(--cream); padding:2px 2px 30px 2px;}

#sBlog {width:300px; height:300px; margin:2px 0px; border:1px solid var(--line); background:var(--ink-2);}
#sBlog #title {width:300px; height:23px; margin:0 auto; color:var(--cream); font-weight:bold;}
#sBlog #bContent {width:285px; height:250px; margin:0 auto; font-size:90%; border:1px dotted #FFF; color:#000; background:#FFF; overflow:hidden; text-align:left;}
#sBlog #down, #sBlog #up, #sBlog #add {
  background:transparent; width:20px; height:20px; border:1px solid var(--brass-soft); border-radius:3px;
  outline:none; margin:1px; display:flex; align-items:center; justify-content:center; color:var(--cream); font-size:11px; cursor:pointer;
}
#sBlog #down::before { content:"\25BC"; }
#sBlog #up::before   { content:"\25B2"; }
#sBlog #add::before  { content:"+"; }
#sBlog .subject {background:var(--ink); color:var(--cream);}
#sBlog .message {background:#CCC; color:#000;}

#sPoll {width:300px; height:300px; margin:2px 0px; border:1px solid var(--line); background:var(--ink-2); color:#000;}
#sPoll #title {width:300px; height:23px; margin:0 auto; color:var(--cream); font-weight:bold; padding:2px;}
#sPoll .question {padding:5px 2px 10px 2px; text-align:left; font-size:85%;}
#sPoll .answer {padding:5px; text-align:left;}
#sPoll #pai {
  background:transparent; width:30px; height:30px; border:1px solid var(--brass-soft); border-radius:50%;
  outline:none; margin:1px; display:flex; align-items:center; justify-content:center; color:var(--cream); cursor:pointer;
}
#sPoll #pai::before { content:"+"; }

/* ============================================================
   Site-integration polish: generic buttons/inputs inside the
   widget with previously no coverage at all. See earlier note —
   the login form (rendered by preLogin() into #Output) uses
   class="button" with nothing to style it before this.

   Sizing is deliberately generous — matching the site's own
   .field input convention (padding:15px 16px, ~.96rem font)
   rather than the vendor's cramped defaults — so this reads as
   part of the site, not a bolted-on utility widget. Every input
   and button below shares the same padding/line-height/border
   width/box-sizing on purpose: that's what keeps them all on
   the same visual baseline regardless of type= differences.
   ============================================================ */
#Output, #Xdiv {
  font-size: 15px;
}

input[type="button"].button,
input[type="submit"].button,
#Output input[type="button"],
#Xdiv input[type="button"] {
  font-family: 'IBM Plex Mono', 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  line-height: 1;
  padding: 13px 22px;
  border: 1px solid var(--brass);
  box-sizing: border-box;
  vertical-align: middle;
  background: var(--brass);
  color: var(--ink);
  border-radius: 4px;
  cursor: pointer;
}
input[type="button"].button:hover,
input[type="submit"].button:hover,
#Output input[type="button"]:hover,
#Xdiv input[type="button"]:hover {
  background: var(--amber);
  border-color: var(--amber);
}

#Output input[type="text"],
#Output input[type="password"],
#Xdiv input[type="text"],
#Xdiv input[type="password"],
#Logbox input[type="text"],
#Logbox input[type="password"] {
  font-family: 'Manrope', Verdana, sans-serif;
  font-size: 14px;
  line-height: 1;
  padding: 13px 14px;
  border: 1px solid var(--brass-soft);
  box-sizing: border-box;
  vertical-align: middle;
  background: var(--ink-2);
  color: var(--cream);
  border-radius: 4px;
}
#Output input[type="text"]:focus,
#Output input[type="password"]:focus,
#Xdiv input[type="text"]:focus,
#Xdiv input[type="password"]:focus,
#Logbox input[type="text"]:focus,
#Logbox input[type="password"]:focus {
  outline: none;
  border-color: var(--brass);
}

/* #Output td, #Logbox td, #Xdiv td {
  vertical-align: middle;
} */


/* ============================================================
   "Switch Game" dropdown. Only the CLOSED select box can be
   styled cross-browser — the opened options list is native OS
   chrome (confirmed macOS Safari in the screenshot) and cannot
   be restyled with CSS on that platform, full stop. The `option`
   rule below has partial effect on Chrome/Firefox/Windows and
   zero effect on Safari/macOS — included as a harmless best-
   effort, not a guarantee.
   ============================================================ */
#Wrapper select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--ink-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23C6995C' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  border: 1px solid var(--brass-soft);
  border-radius: 20px;
  color: var(--cream);
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  line-height: 1;
  padding: 10px 34px 10px 16px;
  box-sizing: border-box;
  cursor: pointer;
  transition: border-color .2s ease;
}
#Wrapper select:hover, #Wrapper select:focus {
  border-color: var(--brass);
  outline: none;
}
#Wrapper select option {
  background: var(--ink-2);
  color: var(--cream);
}

/* ============================================================
   Contact form (and similar plain-table templates rendered into
   #Output) come back with the vendor's original white/black
   table styling — no class to hook, just plain <table>/<td>.
   This recolors them, while explicitly excluding anything
   inside #Report, since #Report's light striped rows are an
   intentional legibility choice, not something to override.
   ============================================================ */
#Output :is(table, th, td):not(#Report):not(#Report *) {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--line);
}
#Output table:not(#Report):not(#Report *) {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px;

}
#Output :is(table, th, td):not(#Report):not(#Report *) b,
#Output :is(table, th, td):not(#Report):not(#Report *) strong {
  color: var(--brass);
}

#Output h1, #Output h2, #Output h3, #Output h4,
#Xdiv h1, #Xdiv h2, #Xdiv h3, #Xdiv h4 {
  color: var(--brass) !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

/* ============================================================
   Defensive font override.
   Reordering index.php's <link> tags (this file now loads AFTER
   epoch_styles.css) should be the real fix for body text
   inheriting Superbrawl's own font instead of ours. This rule
   is a belt-and-suspenders backstop scoped ONLY to our widget's
   own containers — it cannot leak out and affect the rest of
   the site — in case anything else in Epoch's stylesheet still
   wins a tie somewhere. Placed AFTER the heading rule above so
   headings still resolve to Fraunces, not this. ============ */
#Wrapper, #Wrapper *, #Xdiv, #Xdiv * {
  font-family: 'Manrope', Verdana, sans-serif !important;
}
#Wrapper h1, #Wrapper h2, #Wrapper h3, #Wrapper h4,
#Xdiv h1, #Xdiv h2, #Xdiv h3, #Xdiv h4 {
  font-family: 'Fraunces', Georgia, serif !important;
}

#Marquee {
  display: none;
}

#gameid {
  width: 13em !important;
}

#password {
  width: 13em !important;
}

#strImages {
  display: none !important;
}

#strColumn {
  font-size: 0;
  /* collapse original text so it doesn't show/take space */
  line-height: 0;
  width: 100% !important;
}

#strColumn>* {
  display: none;
  /* hide the <font> and <ul> entirely */
}

#strColumn::before {
  content: "Welcome to The Squarerigger Pub Pick 'Em pool 2026\A\A If you were in the pool last you will still be registered. If you had multiple teams for the playoffs please let me know which ones you would like deleted. Password is rigger to enter the pool for the first time you are back to the site. If you are new to the pool hit the Join button and use the password rigger to enter. Remember that everything is case sensitive and symbols are not accepted.\A\A The cost is $100 and includes the loser pool.\A Cameron\A\A If you have any questions please email me at theriggerpub@gmail.com";
  white-space: pre-wrap;
  font-size: 16px;
  line-height: 1.5;
  display: block;
  width: 100% !important;
}


/* ==========================================================================
   Mobile override for the pick'em pool page
   Add this AFTER the site's existing stylesheet so it takes priority.
   ========================================================================== */

@media (max-width: 600px) {

  /* ---- Overall wrapper ---- */
  #Wrapper,
  #Browser {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
  }

  /* ---- Marquee title ---- */
  #Marquee,
  #MarqueeS {
    font-size: 1.1em !important;
    white-space: normal !important;
    text-align: center;
    padding: 4px;
  }

  /* ---- Login box ---- */
  #Logbox {
    float: none !important;
    width: 100% !important;
    display: block;
    margin: 0 0 8px 0;
  }

  #Logbox table {
    width: 100% !important;
  }

  #Logbox table,
  #Logbox tbody,
  #Logbox tr,
  #Logbox td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box;
  }

  #Logbox td.left,
  #Logbox td.right {
    display: none !important;
    /* spacer cells not needed when stacked */
  }

  #Logbox td {
    padding: 4px 0 !important;
  }

  #Logbox input[type="text"],
  #Logbox input[type="password"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    font-size: 16px;
    /* prevents iOS auto-zoom on focus */
  }

  #Logbox input[type="button"] {
    width: 100%;
    margin: 4px 0;
  }

  /* ---- Top menu / nav ---- */
  #Menu {
    display: flex !important;
    flex-wrap: wrap;
    width: 100% !important;
    box-sizing: border-box;
    top: 240px;
    padding-right: 20px;
  }

  #Menu #Mlink,
  #Menu .mlink {
    flex: 1 1 auto;
    text-align: center;
    padding: 6px 4px !important;
  }

  #Menu #Msep {
    display: none !important;
    /* decorative separators just eat space */
  }

  #Gmnu select {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* ---- Main content area ---- */
  #Output {
    width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
    top: 290px;
  }

  #Output table {
    width: 100% !important;
  }

  /* The strColumn / strImages two-column layout stacks on mobile */
  #Output table,
  #Output tbody,
  #Output tr,
  #Output td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #strColumn,
  #strImages {
    width: 100% !important;
    box-sizing: border-box;
    padding: 4px 0;
  }

  #strColumn img,
  #strImages img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ---- Ad banner: absolutely positioned, will overlap content on mobile ---- */
  #banner {
    position: static !important;
    width: 100% !important;
    max-width: 320px;
    height: auto !important;
    margin: 8px auto !important;
    display: block;
  }

  /* ---- Diagnostic / processing boxes: keep off-screen on mobile, never show over content ---- */
  #Diag,
  #Proc {
    max-width: 90vw;
  }

}

/* ==========================================================================
   Mobile override for the Player Registration ("join") form
   Add this AFTER the site's existing stylesheet so it takes priority.
   ========================================================================== */

@media (max-width: 600px) {

  #join {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* The table has a fixed width="300" attribute — override it */
  #join table {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Stack every row/cell instead of the 3-column (label | field | field) layout */
  #join table,
  #join thead,
  #join tbody,
  #join tr,
  #join td,
  #join th {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left !important;
  }

  #join th {
    text-align: center !important;
    font-size: 1.1em;
    padding: 8px 0 !important;
  }

  /* Row labels ("Names:", "Login Info:", "Email:") */
  #join td[align="right"] {
    text-align: left !important;
    font-weight: bold;
    padding-top: 10px !important;
  }

  #join td {
    padding: 4px 0 !important;
  }

  /* Inputs full width and touch-friendly */
  #join input[type="text"],
  #join input[type="password"] {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    font-size: 16px;
    /* prevents iOS auto-zoom on focus */
    padding: 6px 4px;
    margin-top: 2px;
  }

  /* Join code field is narrow by nature but should still stretch */
  #join input#joincode {
    width: 100% !important;
  }

  /* Terms checkbox row: keep checkbox and text readable inline */
  #join input[type="checkbox"] {
    width: auto !important;
    vertical-align: top;
    margin-right: 6px;
  }

  /* Register button full width and easy to tap */
  #join input[type="button"].button {
    width: 100%;
    padding: 10px 0;
    font-size: 1em;
    margin-top: 8px;
  }

  /* Terms list: keep readable margins, no overflow */
  #join ul {
    padding-left: 20px !important;
    margin: 6px 0;
  }

  #join li {
    margin-bottom: 6px;
    line-height: 1.4;
  }

  /* "(more info)" links: give them a bit of tap spacing */
  #join a font.link1 {
    display: inline-block;
    padding: 2px 0;
  }

}