:root{
    --wood-dark:#211812;
    --wood-mid:#33241a;
    --wood-line:rgba(0,0,0,.18);
    --cream:#f3e8ce;
    --cream-dim:#d9c9a3;
    --amber-deep:#b9761c;
    --cup-red:#c23b2e;
    --felt:#2e6b4c;
    --felt-bright:#3f9468;
    --ball:#ff8a3d;
    --ink:#1c130d;
    --card:#2b1e15;
    --card-border:#4a3524;
    --font-display:'Bebas Neue', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'Space Mono', monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      repeating-linear-gradient(180deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 22px, var(--wood-line) 23px),
      radial-gradient(ellipse at 50% -10%, #3e2a1a 0%, var(--wood-dark) 55%);
    color:var(--cream);
    font-family:var(--font-body);
    min-height:100vh;
    display:flex;
    justify-content:center;
  }
  #app-shell{
    width:100%;
    max-width:460px;
    min-height:100vh;
    background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.28));
    position:relative;
    padding-bottom:40px;
  }
  a{color:inherit;text-decoration:none;}
  button{font-family:var(--font-body);cursor:pointer;}

  /* ---- top bar ---- */
  .topbar{
    display:flex;align-items:center;gap:10px;
    padding:16px 20px 6px;
  }
  .topbar .back{
    width:34px;height:34px;border-radius:50%;
    background:var(--card);border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;color:var(--cream-dim);
    flex-shrink:0;
  }
  .topbar .user-chip{
    margin-left:auto;font-family:var(--font-mono);font-size:11px;
    background:var(--card);border:1px solid var(--card-border);
    padding:6px 10px;border-radius:20px;color:var(--ball);
    display:flex;align-items:center;gap:6px;
  }

  h1.page-title{
    font-family:var(--font-display);
    font-size:44px;letter-spacing:1px;
    color:var(--ball);
    margin:6px 20px 18px;
    text-shadow:0 2px 0 rgba(0,0,0,.4);
    line-height:.95;
  }
  h1.page-title small{
    display:block;font-family:var(--font-mono);font-size:11px;
    color:var(--cream-dim);letter-spacing:2px;text-transform:uppercase;margin-top:6px;
  }

  .content{padding:0 20px;}

  /* ---- generic card ---- */
  .card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:14px;
    overflow:hidden;
  }

  /* ---- INDEX ---- */
  .idx-hero{
    display:block;position:relative;height:150px;border-radius:16px;overflow:hidden;
    border:1px solid var(--card-border);
    background:
      radial-gradient(circle at 20% 120%, rgba(221,154,46,.5), transparent 60%),
      linear-gradient(160deg, #3a2a1c 0%, #241811 100%);
  }
  .idx-hero .cups{position:absolute;right:14px;bottom:-6px;display:flex;gap:6px;opacity:.9;}
  .idx-hero .cup{width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:30px solid var(--cup-red);opacity:.85;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4));}
  .idx-hero .cup:nth-child(2){transform:translateY(-4px);}
  .idx-hero .label{
    position:absolute;left:18px;top:16px;
  }
  .idx-hero .eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:2px;color:var(--ball);text-transform:uppercase;}
  .idx-hero .title{font-family:var(--font-display);font-size:32px;color:var(--cream);letter-spacing:.5px;margin-top:4px;}
  .idx-hero .cta{position:absolute;left:18px;bottom:14px;font-family:var(--font-mono);font-size:11px;color:var(--ball);letter-spacing:1px;}

  .idx-row{display:grid;grid-template-columns:100px 1fr;gap:10px;margin-top:14px;height:96px;}
  .idx-row.reverse{grid-template-columns:1fr 100px;}
  .idx-tile{
    background:var(--card);border:1px solid var(--card-border);border-radius:14px;
    display:flex;align-items:center;justify-content:center;
  }
  .idx-tile.icon svg{width:40px;height:40px;}
  .idx-tile.big{
    flex-direction:column;align-items:flex-start;justify-content:center;padding:16px 18px;
  }
  .idx-tile.big .title{font-family:var(--font-display);font-size:24px;color:var(--cream);letter-spacing:.5px;}
  .idx-tile.big .sub{font-family:var(--font-mono);font-size:10px;color:var(--ball);letter-spacing:1px;margin-top:4px;text-transform:uppercase;}

  /* ---- NEXT DATE table ---- */
  .date-row{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    padding:14px 16px;border-bottom:1px solid var(--card-border);
    gap:10px;transition:background .25s ease;
  }
  .date-row:last-child{border-bottom:none;}
  .date-row.locked{background:linear-gradient(90deg, rgba(63,148,104,.25), rgba(63,148,104,.08));}
  .date-info .date{font-family:var(--font-mono);font-size:12px;color:var(--ball);letter-spacing:1px;}
  .date-info .name{font-family:var(--font-display);font-size:19px;color:var(--cream);letter-spacing:.3px;margin-top:2px;}
  .date-info .desc{font-size:11px;color:var(--cream-dim);margin-top:2px;}
  .vote-btn{
    display:flex;flex-direction:column;align-items:center;gap:2px;
    background:var(--wood-mid);border:1px solid var(--card-border);
    border-radius:10px;padding:8px 12px;color:var(--cream);
    font-size:11px;font-family:var(--font-mono);
  }
  .vote-btn .count{font-family:var(--font-mono);font-size:15px;color:var(--ball);font-weight:700;}
  .vote-btn.on{background:var(--felt);border-color:var(--felt-bright);color:#fff;}
  .vote-btn.on .count{color:#fff;}
  .vote-btn:disabled{opacity:.55;cursor:default;}

  /* ---- VOTE page (signup list) ---- */
  .signup-row{
    display:grid;grid-template-columns:1fr auto;align-items:center;
    padding:16px;border-bottom:1px solid var(--card-border);
  }
  .signup-row:last-child{border-bottom:none;}
  .signup-row .name{font-family:var(--font-display);font-size:20px;color:var(--cream);}
  .signup-row .date{font-family:var(--font-mono);font-size:11px;color:var(--cream-dim);margin-top:2px;}
  .btn-amber{
    background:linear-gradient(180deg, var(--ball), var(--amber-deep));
    color:#241708;font-weight:700;border:none;border-radius:10px;
    padding:10px 16px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;
  }

  /* ---- SIGNIN tabs ---- */
  .tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--card-border);border-radius:12px;overflow:hidden;margin-bottom:22px;}
  .tab{padding:14px;text-align:center;font-family:var(--font-display);font-size:18px;letter-spacing:1px;background:var(--wood-mid);color:var(--cream-dim);}
  .tab.active{background:var(--ball);color:#241708;}
  .field{margin-bottom:16px;}
  .field label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:1px;color:var(--ball);text-transform:uppercase;margin-bottom:6px;}
  .field input{
    width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--card-border);
    background:var(--wood-mid);color:var(--cream);font-family:var(--font-body);font-size:14px;
  }
  .field input:focus{outline:2px solid var(--ball);outline-offset:1px;}
  .invite-box{
    background:var(--wood-mid);border:1px dashed var(--amber-deep);border-radius:10px;
    padding:12px 14px;font-family:var(--font-mono);font-size:12px;color:var(--ball);
    word-break:break-all;margin-top:6px;
  }
  .btn-block{width:100%;padding:14px;margin-top:6px;border-radius:12px;}

  /* ---- SCOREBOARD ---- */
  .board-row{
    display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:10px;
    padding:12px 14px;border-bottom:1px solid var(--card-border);
  }
  .board-row:last-child{border-bottom:none;}
  .rank{font-family:var(--font-display);font-size:22px;color:var(--ball);width:26px;}
  .avatar{width:34px;height:34px;border-radius:50%;background:var(--wood-mid);border:1px solid var(--card-border);display:flex;align-items:center;justify-content:center;}
  .avatar svg{width:18px;height:18px;fill:var(--cream-dim);}
  .who{display:flex;align-items:center;gap:8px;overflow:hidden;}
  .who .uname{font-family:var(--font-body);font-weight:700;font-size:13px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .flip{
    font-family:var(--font-mono);font-weight:700;font-size:13px;
    background:var(--ink);color:var(--ball);border:1px solid #000;border-radius:6px;
    padding:5px 7px;min-width:30px;text-align:center;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  }
  .details-link{font-family:var(--font-mono);font-size:10px;color:var(--ball);border:1px solid var(--amber-deep);border-radius:8px;padding:6px 8px;text-transform:uppercase;letter-spacing:.5px;}
  .col-caption{
    display:grid;grid-template-columns:auto 1fr auto auto auto;gap:10px;padding:0 14px 6px;
    font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--cream-dim);
  }

  /* ---- SCOREBOARD DETAIL ---- */
  .game-row{
    display:grid;grid-template-columns:1.2fr .9fr .7fr 1fr;gap:8px;align-items:center;
    padding:12px 14px;border-bottom:1px solid var(--card-border);font-size:12px;
  }
  .game-row:last-child{border-bottom:none;}
  .game-row.head{
    font-family:var(--font-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--cream-dim);
    background:var(--wood-mid);
  }
  .pill{padding:3px 8px;border-radius:20px;font-size:11px;font-weight:700;display:inline-block;}
  .pill.win{background:rgba(63,148,104,.25);color:var(--felt-bright);}
  .pill.loss{background:rgba(194,59,46,.25);color:#ff8b7b;}

  .stat-strip{display:flex;gap:10px;margin-bottom:20px;}
  .stat{
    flex:1;background:var(--card);border:1px solid var(--card-border);border-radius:12px;
    padding:12px;text-align:center;
  }
  .stat .flip{font-size:20px;display:inline-block;margin-bottom:4px;}
  .stat .lbl{font-family:var(--font-mono);font-size:9px;color:var(--cream-dim);text-transform:uppercase;letter-spacing:1px;}

  .empty{
    text-align:center;padding:40px 20px;color:var(--cream-dim);font-size:13px;
  }
  .loading{text-align:center;padding:30px;color:var(--cream-dim);font-family:var(--font-mono);font-size:12px;}

  /* username modal */
  .modal-backdrop{
    position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;
  }
  .modal{
    background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:24px;max-width:340px;width:100%;
  }
  .modal h2{font-family:var(--font-display);font-size:26px;color:var(--ball);margin:0 0 6px;letter-spacing:.5px;}
  .modal p{font-size:12px;color:var(--cream-dim);margin:0 0 16px;line-height:1.5;}

  .footer-nav{
    display:flex;justify-content:space-around;padding:22px 20px 4px;
  }
  .footer-nav a{font-family:var(--font-mono);font-size:10px;color:var(--cream-dim);letter-spacing:1px;text-transform:uppercase;}

  /* =================================================================
     DESKTOP / WIDE VIEWPORTS
     Mobile layout (above) stays the default. From ~780px up we widen
     the shell and let tiles/tables breathe instead of stacking full width.
  ================================================================= */
  @media (min-width: 780px){
    body{padding:40px 20px;align-items:flex-start;}
    #app-shell{
      max-width:880px;
      border-radius:22px;
      border:1px solid var(--card-border);
      box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
      padding-bottom:56px;
    }
    .topbar{padding:22px 36px 6px;}
    h1.page-title{font-size:60px;margin:6px 36px 26px;}
    .content{padding:0 36px;}

    /* index: hero stays full width, the two lower rows sit side by side */
    .idx-hero{height:190px;}
    .idx-hero .title{font-size:42px;}
    .idx-hero .eyebrow{font-size:11px;}
    .idx-below{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px;}
    .idx-row{margin-top:0;height:120px;}
    .idx-row.reverse{grid-template-columns:100px 1fr;}
    .idx-row.reverse .idx-tile.icon{order:1;}
    .idx-row.reverse .idx-tile.big{order:2;}
    .idx-tile.big .title{font-size:28px;}

    /* tables get more air + slightly larger type */
    .date-row, .signup-row, .board-row, .game-row{padding:16px 24px;}
    .col-caption{padding:0 24px 8px;}
    .date-info .name, .signup-row .name{font-size:22px;}
    .board-row{grid-template-columns:auto 1.4fr auto auto auto;}
    .flip{font-size:14px;padding:6px 10px;}

    /* forms get a comfortable centered width instead of edge-to-edge */
    .tabs, #signinForm, .stat-strip{max-width:480px;}

    .footer-nav{padding:26px 36px 4px;}
  }

  @media (min-width: 1100px){
    #app-shell{max-width:1040px;}
  }