/* =========================================
   Mikey's Lotto Picker
   Apple Style / Aqua Inspired Theme
   ========================================= */

:root{
  --bgTop:#dfe7ef;
  --bgBottom:#c9d4df;

  --panel:#f5f6f7;
  --panelInner:#eceff3;

  --border:#aeb7c2;
  --borderDark:#8f98a3;
  --borderLight:#ffffff;

  --text:#1f2933;
  --muted:#5b6673;

  --buttonTop:#fcfdff;
  --buttonBottom:#d9dee5;
  --buttonHoverTop:#ffffff;
  --buttonHoverBottom:#cfd6df;
  --buttonPressedTop:#c7d0db;
  --buttonPressedBottom:#eef2f6;

  --highlightTop:#b8d7ff;
  --highlightBottom:#7fb2f0;

  --titleTop:#8fb6e8;
  --titleBottom:#4e84c4;

  --inputBg:#ffffff;
  --outputBg:#fbfcfd;

  --winGreen:#1f7a1f;
  --winGreenBg:#dff3df;
  --matchBg:#f3f7fb;
}

/* base */

*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
}

/* desktop background */

body{
  font-family:Helvetica, Arial, sans-serif;
  color:var(--text);
  text-align:center;
  padding:24px;

  background:linear-gradient(to bottom,var(--bgTop),var(--bgBottom));
}

/* =========================================
   APP WRAP
   ========================================= */

.appWrap{
  display:inline-block;
  margin:0 auto;
  text-align:left;
}

.appWrap h1{
  text-align:center;
}

/* header */

.appHeader{
  display:flex;
  align-items:center;
  gap:12px;

  padding:12px 16px;
  margin:0 0 14px 0;

  background:linear-gradient(#fdfefe,#d8dde5);
  border:1px solid var(--borderDark);
  border-radius:14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(0,0,0,.15);
}

.appIcon{
  width:26px;
  height:26px;
  border-radius:7px;

  background:linear-gradient(#79a9e8,#3b6fb8);
  border:1px solid #5a6f8f;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(0,0,0,.18);
}

.appTitle{
  font-size:18px;
  font-weight:bold;
}

/* title */

h1{
  font-size:28px;
  margin:0 0 16px 0;
  color:#1f2933;
}

/* window */

#pickerContainer{
  display:inline-block;
  margin:0 auto;
  padding:20px;
  padding-top:54px;

  background:linear-gradient(#f9fafb,#eceff3);
  border:1px solid var(--borderDark);
  border-radius:16px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 18px rgba(0,0,0,.16);

  position:relative;
}

/* title bar */

#pickerContainer::before{
  content:"Mikey's Lotto Picker";

  position:absolute;
  top:0;
  left:0;
  right:0;

  height:34px;

  background:linear-gradient(var(--titleTop),var(--titleBottom));
  color:#fff;

  font-weight:bold;
  font-size:14px;
  line-height:34px;
  text-align:center;

  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

/* mac traffic lights - rounded mini squares */

#pickerContainer::after{
  content:"";
  position:absolute;
  top:10px;
  left:12px;
  width:52px;
  height:12px;

  background:
    linear-gradient(#ff9f97,#d95c53) 0 0/12px 12px no-repeat,
    linear-gradient(#ffe48b,#d2a93d) 20px 0/12px 12px no-repeat,
    linear-gradient(#9be68f,#4ea94b) 40px 0/12px 12px no-repeat;

  border-radius:3px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 1px rgba(0,0,0,.15);
}

/* number grid */

.grid{
  display:grid;
  grid-template-columns:repeat(9,50px);
  gap:8px;
  justify-content:center;
  margin:18px 0;
}

/* number tiles */

.num{
  position:relative;

  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:15px;
  font-weight:bold;
  cursor:pointer;

  background:linear-gradient(var(--buttonTop),var(--buttonBottom));
  border:1px solid var(--border);
  border-radius:12px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(0,0,0,.12);
}

.num:hover{
  background:linear-gradient(var(--buttonHoverTop),var(--buttonHoverBottom));
}

.num input{
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
}

.num span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  border-radius:12px;
}

.num input:checked + span{
  background:linear-gradient(var(--highlightTop),var(--highlightBottom));
  color:#0f2f57;
}

/* controls */

select,
input{
  padding:7px 10px;
  font-size:14px;

  background:var(--inputBg);
  border:1px solid var(--border);
  border-radius:10px;
}

/* buttons */

button{
  min-height:34px;
  padding:7px 16px;
  font-size:14px;
  font-weight:bold;

  background:linear-gradient(var(--buttonTop),var(--buttonBottom));
  border:1px solid var(--borderDark);
  border-radius:11px;

  cursor:pointer;
}

button:hover{
  background:linear-gradient(var(--buttonHoverTop),var(--buttonHoverBottom));
}

/* counter */

.counter{
  display:inline-block;
  padding:7px 12px;
  margin-top:6px;

  background:linear-gradient(#ffffff,#edf1f5);
  border:1px solid var(--border);
  border-radius:11px;

  font-weight:bold;
}

/* controls grid */

.controlsRow{
  display:grid;
  grid-template-columns:repeat(2,max-content);
  gap:12px 24px;

  justify-content:center;
  justify-items:start;

  margin-top:14px;
  padding:14px;

  background:linear-gradient(#f3f5f8,#e6eaf0);
  border:1px solid var(--border);
  border-radius:14px;
}

.controlGroup{
  display:flex;
  align-items:center;
  gap:8px;
}

/* notes */

.smallNote{
  font-size:13px;
  color:var(--muted);

  text-align:left;
  white-space:pre-line;
  line-height:1.45;

  max-width:860px;

  margin:12px auto;
  padding:12px;

  background:linear-gradient(#ffffff,#f3f6f9);
  border:1px solid var(--border);
  border-radius:12px;
}

/* output */

.output{
  margin-top:16px;
  padding:16px;

  background:var(--outputBg);
  border:1px solid var(--border);
  border-radius:14px;

  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

/* meta */

.metaBox{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
}

.metaBox span{
  padding:6px 10px;

  background:linear-gradient(#ffffff,#edf1f5);
  border:1px solid var(--border);
  border-radius:10px;
}

/* results rows */

.lineRow{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}

/* FIXED CENTERING */

.lineRow .numBox{
  width:40px;
  height:40px;

  margin:3px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:bold;

  background:linear-gradient(var(--buttonTop),var(--buttonBottom));
  border:1px solid var(--border);
  border-radius:10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 2px rgba(0,0,0,.1);
}

.lineRow:nth-child(even) .numBox{
  background:linear-gradient(#fdfefe,#e8edf3);
}

.numBox.highlight{
  background:linear-gradient(var(--highlightTop),var(--highlightBottom));
  color:#0f2f57;
}

/* match highlight */

.numBox.match{
  background:linear-gradient(#ecfaec,var(--winGreenBg));
  color:var(--winGreen);
}

/* line label */

.lineLabel{
  width:42px;
  text-align:right;
  margin-right:6px;
  font-weight:bold;

  display:flex;
  align-items:center;
  justify-content:flex-end;
}

.lineRowWrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:4px;
}

/* hidden copy */

.copySource{
  position:absolute;
  left:-9999px;
}

/* mobile */

@media (max-width:640px){

  .grid{
    grid-template-columns:repeat(6,46px);
  }

  .controlsRow{
    grid-template-columns:1fr;
    justify-items:center;
  }

  .controlGroup{
    justify-content:center;
    flex-wrap:wrap;
  }

  .lineRow .numBox{
    width:34px;
    height:34px;
  }

  .lineLabel{
    width:34px;
  }
}