/* =========================================================
   TonightInMTL — Responsive GameShark UI (CSS-only fix)
   - NO JS changes needed
   - Uses clamp() for auto-scaling sizes
   - Calendar adapts across desktop/tablet/mobile/wide-mobile
   ========================================================= */

:root{
  --bg0:#0c0c0c;
  --bg1:#101010;

  --panel:#e6e6e6;
  --panel2:#d2d2d2;
  --panel3:#bfbfbf;

  --bevelLight:#ffffff;
  --bevelDark:#7a7a7a;
  --edge:#2a2a2a;

  --text:#111;
  --text2:#2b2b2b;

  --hi:#e6ea4c;
  --hiText:#244bff;

  --mono: ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* fluid sizing */
  --wrap: min(1100px, 100vw - clamp(14px, 3vw, 28px));
  --pad: clamp(12px, 1.8vw, 18px);
  --gap: clamp(10px, 1.4vw, 14px);

  --border: 3px;
  --shadowLift: 0 10px 0 rgba(0,0,0,0.45);

  --fontXS: clamp(11px, 1.8vw, 12px);
  --fontS:  clamp(12px, 2.2vw, 13px);
  --fontM:  clamp(13px, 2.6vw, 14px);
  --fontL:  clamp(16px, 2.8vw, 18px);
  --fontXL: clamp(22px, 3.6vw, 30px);

  --btnPadY: clamp(10px, 2.2vw, 12px);
  --btnPadX: clamp(12px, 2.6vw, 14px);

  --radius: 0px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--mono);
  color:var(--text);
  background:
    repeating-linear-gradient(45deg,
      rgba(255,255,255,0.03) 0px,
      rgba(255,255,255,0.03) 2px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 10px
    ),
    linear-gradient(var(--bg0), var(--bg1));
  padding-bottom: clamp(72px, 8vh, 90px);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}
button,input{font:inherit}

.wrap{
  width: var(--wrap);
  margin:0 auto;
  padding: var(--pad);
}

/* =========================
   Panels / cards
   ========================= */

.card, .brand{
  background:var(--panel);
  border:var(--border) solid var(--edge);
  box-shadow:
    inset 3px 3px 0 var(--bevelLight),
    inset -3px -3px 0 var(--bevelDark),
    var(--shadowLift);
  padding: var(--pad);
  margin-bottom: var(--gap);
}

.brand{ padding: calc(var(--pad) + 2px); }

.brand .sig{
  display:block;
  font-weight:900;
  letter-spacing: clamp(1px, .35vw, 2px);
  text-transform:uppercase;
  background:#f5f5f5;
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: clamp(8px, 2.2vw, 10px) clamp(10px, 2.6vw, 12px);
  margin-bottom: var(--gap);
}

.brand h1{
  margin:0 0 6px;
  font-size: var(--fontXL);
  letter-spacing: 1px;
}

.tagline{
  margin:0;
  font-size: var(--fontM);
  line-height: 1.35;
  color:#1f1f1f;
  opacity:0.85;
}

/* links row */
.links{
  display:flex;
  gap: var(--gap);
  flex-wrap:wrap;
  margin-top: var(--gap);
}

.link{
  display:inline-block;
  background:var(--panel2);
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: var(--btnPadY) var(--btnPadX);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing: 1px;
  font-size: var(--fontS);
}
.link:hover{background:var(--panel3)}
.link:active{transform:translateY(1px)}

/* =========================
   Controls (views/tools)
   ========================= */

.nav{
  display:flex;
  gap: var(--gap);
  flex-wrap:wrap;
  margin: var(--gap) 0;
}

.tools{
  display:flex;
  gap: var(--gap);
  flex-wrap:wrap;
  align-items:center;
  margin: 0 0 var(--gap);
}

.tab, .btn{
  background:var(--panel2);
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: var(--btnPadY) var(--btnPadX);
  font-family:var(--mono);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing: 1px;
  cursor:pointer;
  color:#111;
  font-size: var(--fontS);
  line-height: 1;
  white-space: nowrap;
}

.tab:hover, .btn:hover{background:var(--panel3)}
.tab:active, .btn:active{transform:translateY(1px)}
.tab.is-active{background:var(--hi); color:var(--hiText)}
.tab.has-events-today{outline:4px solid rgba(230,234,76,0.35)}

input, select{
  background:#f5f5f5;
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: var(--btnPadY) var(--btnPadX);
  font-family:var(--mono);
  font-weight:700;
  font-size: var(--fontM);
  flex: 1 1 240px;
  min-width: 0;
}

/* let buttons wrap nicely */
.tools .btn, .nav .tab{
  flex: 1 1 160px;
}
@media (min-width: 900px){
  .tools .btn, .nav .tab{ flex: 0 0 auto; }
}

/* meta bar */
.meta{
  margin: var(--gap) 0;
  padding: clamp(10px, 2vw, 12px) clamp(12px, 2.4vw, 14px);
  background:rgba(0,0,0,0.55);
  border:var(--border) solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.08), inset -2px -2px 0 rgba(0,0,0,0.65);
  color:#f2f2a8;
  font-weight:900;
  letter-spacing: 1px;
  font-size: var(--fontS);
}

/* =========================
   Event list layout
   ========================= */

.grid{
  display:grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.grid > *{
  grid-column: span 12;
}

/* Responsive columns: phone=1, tablet=2, desktop=3 */
@media (min-width: 720px){
  .grid > *{ grid-column: span 6; }
}
@media (min-width: 1040px){
  .grid > *{ grid-column: span 4; }
}

.card h3{
  margin:0 0 var(--gap);
  font-size: var(--fontL);
  letter-spacing: 1px;
  text-transform:uppercase;
}

.small{
  font-size: var(--fontS);
  line-height: 1.45;
  color: var(--text2);
}

.eventTitle{
  font-weight:900;
  margin:0 0 8px;
  letter-spacing: 0.5px;
  font-size: var(--fontL);
}
.eventMeta{
  font-size: var(--fontS);
  color:var(--text2);
  margin:0 0 6px;
}
.eventMeta strong{color:#111}
.eventActions{
  display:flex;
  gap: var(--gap);
  flex-wrap:wrap;
  margin-top: var(--gap);
}
.hr{height:1px;background:rgba(0,0,0,0.25);margin: var(--gap) 0}
.dayItem{padding: var(--gap) 0}

/* =========================
   Calendar
   ========================= */

.calWrap{}

/* header row */
.calHeader{
  display:flex;
  gap: var(--gap);
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin-bottom: var(--gap);
}

.calButtons{
  display:flex;
  gap: var(--gap);
  flex-wrap:wrap;
}

.calTitle{
  font-weight:900;
  letter-spacing: 1px;
  text-transform:uppercase;
  background:#f5f5f5;
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: clamp(8px, 2vw, 10px) clamp(10px, 2.4vw, 12px);
  font-size: var(--fontS);
}

/* DOW header */
.calHead{
  display:grid;
  grid-template-columns:repeat(7, minmax(0, 1fr));
  gap: var(--gap);
  margin: var(--gap) 0;
}

.calDow{
  background:var(--panel2);
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: clamp(8px, 2vw, 10px);
  font-size: var(--fontXS);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing: 1px;
  text-align:center;
}

/* calendar grid */
.calGrid{
  display:grid;
  gap: var(--gap);
  grid-template-columns:repeat(7, minmax(0, 1fr));
}

/* Day button cards */
.calCell{
  background:var(--panel2);
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: clamp(10px, 2.2vw, 12px);
  min-height: clamp(88px, 11vw, 108px);
  cursor:pointer;
  text-align:left;
  font-family:var(--mono);
  width:100%;
}

.calCell:hover{background:var(--panel3)}
.calCell:active{transform:translateY(1px)}
.calCell.blank{
  background:transparent;
  border:0;
  box-shadow:none;
  cursor:default;
}

.calNum{
  font-weight:900;
  margin-bottom: clamp(6px, 1.3vw, 8px);
  font-size: var(--fontM);
}

.calPills{display:flex; flex-direction:column; gap: clamp(6px, 1.2vw, 8px);}

.calPill{
  background:#f5f5f5;
  border:var(--border) solid var(--edge);
  box-shadow: inset 2px 2px 0 var(--bevelLight), inset -2px -2px 0 var(--bevelDark);
  padding: clamp(6px, 1.6vw, 8px) clamp(8px, 1.8vw, 10px);
  font-size: clamp(11px, 2.2vw, 12px);
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.calMore{font-size: var(--fontXS); font-weight:900; opacity:0.85}

.calCell.today{outline:4px solid rgba(230,234,76,0.35)}
.calCell.selected{background:var(--hi); color:var(--hiText)}

.dayPanel{margin-top: var(--gap);}

/* =========================
   Mobile/Wide-Mobile calendar modes
   - prevents cramped 7-col grid
   ========================= */

/* phones: 2 columns, hide DOW */
@media (max-width: 640px){
  .calHead{display:none}
  .calGrid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .calCell.blank{display:none}
  .calCell{min-height: 110px;}
}

/* wide phones / small tablets: 3 columns */
@media (min-width: 641px) and (max-width: 860px){
  .calHead{display:none}
  .calGrid{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .calCell.blank{display:none}
}

/* =========================
   Fixed status bar
   ========================= */

.statusBar{
  position:fixed;
  left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.78);
  border-top:var(--border) solid #000;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,0.08), inset -2px -2px 0 rgba(0,0,0,0.65);
  color:#f2f2a8;
  font-weight:900;
  letter-spacing: 1px;
  padding: clamp(10px, 2vw, 12px);
}

.statusInner{
  width: var(--wrap);
  margin:0 auto;
  display:flex;
  gap: clamp(10px, 2vw, 12px);
  flex-wrap:wrap;
  align-items:center;
  font-size: var(--fontS);
}

.sbSep{opacity:0.65}

/* =========================
   Small quality-of-life tweaks
   ========================= */

/* prevent long text from blowing cards up */
.card, .meta, .eventTitle, .eventMeta, .small{
  overflow-wrap:anywhere;
}

/* keep tap targets comfy */
@media (pointer: coarse){
  .btn, .tab{ padding: calc(var(--btnPadY) + 2px) calc(var(--btnPadX) + 2px); }
  .calCell{ padding: clamp(12px, 2.6vw, 14px); }
}