:root{
  --paper: #efe3c8;
  --sepia: #4b2f1e;
  --ink: #231815;
  --muted: #6f5a45;
  --accent: #a86f35;
  --card-w: 34vmin;
  --card-h: 42vmin;
  --edge-dark: rgba(0,0,0,0.07);
  --stain: rgba(110,70,30,0.06);
  --tear: rgba(0,0,0,0.06);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#board{height:100%}
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital,wght@0,400;0,700&family=Sorts+Mill+Goudy:wght@400;700&family=Great+Vibes&family=Cormorant+Garamond:wght@400;600;700&display=swap');

body{
  font-family: "IM Fell English", "Sorts Mill Goudy", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  /* prominent fixed manuscript backdrop using the project asset */
  background:
    url('/page.png') center center / cover no-repeat fixed,
    radial-gradient(1400px 700px at 8% 6%, rgba(0,0,0,0.04), transparent 20%),
    linear-gradient(180deg,#fbf3e6 0%, #efe0c6 100%);
  background-blend-mode: normal, multiply, normal;
  background-size: cover, cover, 1800px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3.5vmin;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:var(--ink);
}

/* faux book spine and subtle shadowing for the board */
#board{
  width:100%;
  max-width:1240px;
  background: linear-gradient(180deg, rgba(255,255,250,0.94), rgba(255,248,236,0.90));
  border:1px solid rgba(0,0,0,0.06);
  padding:2.8vmin;
  border-radius:14px;
  box-shadow: 0 36px 100px rgba(20,12,6,0.34), inset 0 1px 0 rgba(255,255,255,0.6);
  display:flex;
  flex-direction:column;
  gap:1vmin;
  height:100%;
  outline: 16px solid rgba(30,20,10,0.035);
  background-clip: padding-box;
  position:relative;
  overflow:visible;
}

/* left "spine" band */
#board::before{
  content:'';
  position:absolute;
  left:-20px;
  top:28px;
  bottom:28px;
  width:42px;
  background: linear-gradient(180deg, rgba(80,50,30,0.14), rgba(80,50,30,0.06));
  border-radius:6px;
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.05), 0 12px 28px rgba(0,0,0,0.10);
  transform:skewY(-2deg);
  pointer-events:none;
}

/* small subtitle under the title to reinforce old style */
header{display:flex;flex-direction:column;align-items:center;justify-content:center; padding-top:6px}
.teams{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:12px;
}
.team{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 18px;
  border-radius:12px;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.04);
  background: linear-gradient(180deg, rgba(255,250,240,0.95), rgba(245,235,220,0.90));
  min-width:130px;
  box-shadow: 0 10px 28px rgba(20,12,6,0.08);
  transition:transform .12s, box-shadow .12s;
}
.team:hover{ transform: translateY(-5px) }
.team .team-name{ font-weight:900; color:var(--sepia); font-size:15px; letter-spacing:0.6px }
.team .team-score{ font-weight:900; font-size:28px; color:var(--ink); margin-top:8px; padding:2px 6px; background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,250,240,0.2)); border-radius:6px; }
.team.active{ box-shadow: 0 18px 44px rgba(90,60,30,0.16); outline: 5px solid rgba(168,111,70,0.06) }
.vs{ color:var(--muted); font-weight:800; letter-spacing:2px }
#resetScores{
  background:linear-gradient(180deg, rgba(255,250,240,0.98), rgba(245,235,220,0.95));
  border:1px solid rgba(0,0,0,0.06);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  margin-left:10px;
  font-weight:800;
  box-shadow: 0 8px 20px rgba(20,12,6,0.08);
  font-size:15px;
}
h1{
  font-family: "Great Vibes", "Cormorant Garamond", serif;
  font-size:clamp(36px,7vmin,110px);
  letter-spacing:1px;
  color:var(--sepia);
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
  padding:10px 28px;
  border-radius:10px;
  border:1px dashed rgba(0,0,0,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,250,240,0.55));
  box-shadow: inset 0 -10px 30px rgba(255,255,255,0.22);
}

/* decorative subtitle */
.subtitle{
  font-family: "EB Garamond", Georgia, serif;
  color:var(--muted);
  font-size:15px;
  margin-top:6px;
  letter-spacing:0.6px;
  opacity:0.98;
  text-transform:uppercase;
  font-weight:800;
  color:rgba(70,45,30,0.95);
}

/* grid tuned for larger, manuscript-like cards (three-per-row layout) */
#grid{
  flex:1;
  display:grid;
  /* ensure wider card columns while still allowing responsive shrink */
  grid-template-columns: repeat(3, minmax(320px, 1fr));
  grid-auto-rows: 1fr;
  gap:26px;
  align-items:stretch;
  justify-items:stretch;
  padding:14px;
}

/* manuscript-style card */
.card{
  position:relative;
  overflow:visible;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  /* increased padding to give a wider, more manuscript-like layout */
  padding:36px 36px 26px 36px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.94),
    inset 0 -46px 140px rgba(0,0,0,0.03),
    0 26px 80px rgba(20,12,6,0.26);
  cursor:pointer;
  /* larger minimum height to match wider card proportions */
  min-height:420px;
  background-color:transparent;
  /* stronger parchment texture & aged edge */
  background-image:
    linear-gradient(180deg, rgba(255,255,246,0.96), rgba(252,243,227,0.90)),
    url('page.png'),
    radial-gradient(900px 320px at 10% 10%, rgba(255,250,240,0.76), transparent 34%);
  background-size: 100% 100%, 1400px, cover;
  background-position: center, 8% 12%, 12% 12%;
  border:2px solid rgba(80,60,40,0.06);
  transition:transform .18s cubic-bezier(.2,.9,.25,1), box-shadow .18s, filter .18s;
  outline-offset:10px;
  --stitch: linear-gradient(90deg, rgba(0,0,0,0.06) 0 1px, transparent 1px 100%);
  filter: contrast(0.99) saturate(0.95);
  transform-origin: center;
}

/* torn paper top/bottom illusion */
.card::before{
  content:'';
  position:absolute;
  left:-10px;
  right:-10px;
  top:-14px;
  height:30px;
  background:
    radial-gradient(12px 10px at 10% 80%, rgba(0,0,0,0.05), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.04));
  border-radius:60%;
  transform:translateY(-8px) rotate(-0.6deg);
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:0.94;
}
.card::after{
  content:'';
  position:absolute;
  left:-14px;
  top:12px;
  bottom:12px;
  width:8px;
  border-radius:4px;
  background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0));
  transform:rotate(-1deg);
  pointer-events:none;
  opacity:0.7;
}

/* ink blotches and old stains layer */
.card .paper-stain{
  pointer-events:none;
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(58% 30% at 8% 14%, rgba(110,70,30,0.06), transparent 25%),
    radial-gradient(40% 20% at 78% 72%, rgba(90,50,20,0.04), transparent 25%),
    linear-gradient(90deg, rgba(255,255,255,0.02), transparent 40%);
  mix-blend-mode:multiply;
  opacity:1;
  border-radius:14px;
  filter: blur(.6px) contrast(0.98);
}

/* hover/tap lift and gentle tilt */
.card:hover, .card:focus{
  transform: translateY(-12px) rotateX(1.6deg) rotate(-0.6deg) scale(1.022);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.94),
    0 56px 120px rgba(18,12,8,0.40);
  z-index:6;
  filter: saturate(1.05);
}

/* tactile active press */
.card:active{
  transform: translateY(-6px) rotateX(1deg) rotate(-0.2deg) scale(1.015);
}

/* provide a subtle inner stitched border */
.card .inner-stitch{
  pointer-events:none;
  position:absolute;
  inset:14px;
  border-radius:12px;
  background-image: var(--stitch);
  opacity:0.28;
  mix-blend-mode:overlay;
  transform:rotate(-0.4deg);
}

/* inked title with larger drop cap */
.card .title{
  font-weight:700;
  font-size:clamp(26px,5.2vmin,40px);
  color:var(--ink);
  text-transform:none;
  letter-spacing:0.6px;
  font-style:italic;
  margin-bottom:14px;
  line-height:1.02;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  position:relative;
  z-index:2;
  font-family: "Sorts Mill Goudy", "Cormorant Garamond", "EB Garamond", serif;
}
.card .title::first-letter{
  float:left;
  font-size:6.2rem;
  line-height:0.82;
  margin-right:18px;
  font-weight:900;
  color:var(--accent);
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  padding-top:2px;
  transform:translateY(6px) rotate(-2deg);
  text-shadow: 0 2px 0 rgba(255,255,255,0.55);
  letter-spacing: -1px;
  border-right:1px dashed rgba(0,0,0,0.05);
  padding-right:16px;
}

/* description as a neat handwritten-ish note */
.card .desc{
  font-size:clamp(17px,2.1vmin,21px);
  color:var(--muted);
  line-height:1.6;
  opacity:0.98;
  margin-top:10px;
  font-style:normal;
  font-family: "EB Garamond", Palatino, "Times New Roman", serif;
  white-space:normal;
  text-shadow: 0 0 0 rgba(0,0,0,0);
  z-index:2;
  letter-spacing:0.15px;
}

/* ink flourish behind small 'Plot' label */
.card .meta-plot{
  position:relative;
  z-index:2;
  font-size:14px;
  color:rgba(0,0,0,0.45);
  margin-top:14px;
  text-align:right;
  letter-spacing:0.8px;
  font-weight:800;
}

/* footer and controls */
footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:6px;
}
#shuffle{
  background:linear-gradient(180deg,var(--sepia),#8a4f2a);
  color:#fff;
  border:none;
  padding:14px 18px;
  border-radius:8px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(91,63,34,0.26);
  letter-spacing:0.8px;
}
#shuffle:active{transform:translateY(2px)}

/* legend as small aged tabs */
#legend{font-size:15px;color:var(--muted);display:flex;gap:10px;align-items:center}
.group{
  padding:6px 10px;border-radius:8px;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(230,220,200,0.6));
  border:1px solid rgba(0,0,0,0.04);
  font-weight:800;
  color:var(--muted);
}
.g1{background:linear-gradient(180deg,#fff7f0,#fbefe6);color:#61301a}
.g2{background:linear-gradient(180deg,#fff8f2,#fdf0ea);color:#7b3b2a}
.g3{background:linear-gradient(180deg,#f7fff6,#eefdf0);color:#255b3a}
.g4{background:linear-gradient(180deg,#f6f9ff,#eef4ff);color:#20385f}

/* revealed state simulates an ink highlight and slight lift */
.card.revealed{
  transform:translateY(-10px) scale(1.02) rotate(-0.6deg);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.8),
    0 38px 96px rgba(12,8,6,0.34);
  outline: 10px solid rgba(120,80,40,0.06);
  transition:transform .18s, box-shadow .18s, filter .18s;
  filter: saturate(1.06) contrast(1.03);
}

/* group toggle hint: subtle under-ink */
.card.g1.revealed{box-shadow: 0 26px 76px rgba(110,60,40,0.14)}
.card.g2.revealed{box-shadow: 0 26px 76px rgba(120,50,50,0.14)}
.card.g3.revealed{box-shadow: 0 26px 76px rgba(25,80,45,0.10)}
.card.g4.revealed{box-shadow: 0 26px 76px rgba(30,45,80,0.10)}

@media (max-width:1200px){
  /* keep three columns but allow a slightly smaller minimum on narrower large screens */
  #grid{ grid-template-columns: repeat(3, minmax(280px, 1fr)) }
}
@media (max-width:780px){
  /* switch to two columns for tablet/large-phone; keep comfortable card width */
  #grid{grid-template-columns: repeat(2, minmax(240px, 1fr))}
  .card{padding:20px;min-height:300px}
  .card .thumb{width:56px;height:56px}
}

/* dice control */
#diceWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin-left:10px;
}
#rollDice{
  background:linear-gradient(180deg,#fff8f0,#f2e5d3);
  border:1px solid rgba(0,0,0,0.06);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(20,12,6,0.08);
  font-weight:900;
  font-size:20px;
  color:var(--sepia);
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#rollDice:active{ transform:translateY(2px) }
#dieFace{ font-weight:900; font-size:24px; font-family: "Cormorant Garamond", serif; color:var(--sepia) }
.dice-label{ font-size:13px; color:var(--muted); font-weight:900 }

/* number badge on each card */
.card .num{
  position:absolute;
  left:18px;
  top:18px;
  z-index:6;
  background:linear-gradient(180deg, #fff9f2, #f5ead2);
  color:var(--sepia);
  border:1px solid rgba(0,0,0,0.06);
  padding:10px 12px;
  border-radius:10px;
  font-weight:900;
  font-size:18px;
  box-shadow: 0 8px 18px rgba(20,12,6,0.06);
  letter-spacing:0.6px;
}

/* small pulse highlight for dice selection */
.card.highlight-roll{
  outline: 12px solid rgba(180,120,60,0.08);
  transform:translateY(-14px) scale(1.02) rotate(-0.4deg);
  transition:transform .12s ease;
}

/* answer reveal button and answer text */
.card .answer-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,0.06);
  background:linear-gradient(180deg, rgba(255,250,240,0.96), rgba(245,230,210,0.96));
  color:var(--sepia);
  padding:10px 12px;
  border-radius:8px;
  font-weight:800;
  font-size:14px;
  letter-spacing:0.4px;
  box-shadow: 0 6px 18px rgba(20,12,6,0.12);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  align-self:flex-end;
  margin-top:14px;
}
.card .answer-btn:active{ transform: translateY(2px) }
.card .answer-text{
  margin-top:12px;
  padding:12px 14px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(255,255,250,0.98), rgba(250,245,235,0.98));
  border:1px solid rgba(0,0,0,0.04);
  color:var(--ink);
  font-size:15px;
  line-height:1.45;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
  display:none;
  z-index:3;
}
.card .answer-text.visible{ display:block; }

/* full-screen answer overlay */
.answer-overlay{
  position:fixed;
  inset:0;
  background: linear-gradient(180deg, rgba(20,12,6,0.66), rgba(10,6,4,0.56));
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1200;
  padding:6vmin;
  backdrop-filter: blur(4px) brightness(.75);
}
.answer-overlay .overlay-inner{
  width:100%;
  max-width:900px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.96), rgba(248,240,225,0.96));
  box-shadow: 0 40px 120px rgba(10,6,4,0.6);
  padding:28px;
  position:relative;
  border:1px solid rgba(0,0,0,0.06);
}
.overlay-close{
  position:absolute;
  right:12px;
  top:12px;
  background:transparent;
  border:none;
  font-size:34px;
  color:var(--sepia);
  line-height:1;
  cursor:pointer;
  padding:6px 10px;
  border-radius:8px;
}
.overlay-content{ padding:18px 8px 8px 8px; text-align:left }
.overlay-title{
  font-family: "Great Vibes", "Cormorant Garamond", serif;
  font-size:36px;
  color:var(--sepia);
  margin-bottom:12px;
}
.overlay-answer{
  font-family: "EB Garamond", Georgia, serif;
  font-size:22px;
  color:var(--ink);
  line-height:1.6;
  background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2));
  padding:18px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.04);
}
@media (max-width:780px){
  .answer-overlay .overlay-inner{ padding:16px; max-width:92vw; border-radius:10px }
  .overlay-title{ font-size:28px }
  .overlay-answer{ font-size:18px; padding:14px }
}

/* small turn announcer shown above the teams */
.announce{
  font-size:15px;
  color:var(--sepia);
  background:linear-gradient(180deg, rgba(255,250,240,0.98), rgba(248,240,225,0.98));
  border:1px solid rgba(0,0,0,0.04);
  padding:8px 12px;
  border-radius:10px;
  box-shadow: 0 8px 18px rgba(20,12,6,0.06);
  font-weight:800;
  margin-bottom:8px;
  text-align:center;
}

/* Expanded card overlay shown after a dice roll */
.card-expanded-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1300;
  padding:6vmin;
  background: linear-gradient(180deg, rgba(10,8,6,0.56), rgba(6,4,3,0.64));
  backdrop-filter: blur(4px) brightness(.65);
}
.card-expanded-overlay .expanded-inner{
  width:100%;
  max-width:960px;
  border-radius:14px;
  background:
    linear-gradient(180deg, rgba(255,250,240,0.98), rgba(248,240,225,0.98));
  box-shadow: 0 48px 160px rgba(8,6,4,0.7);
  padding:28px;
  position:relative;
  border:1px solid rgba(0,0,0,0.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.expanded-close{
  position:absolute;
  right:14px;
  top:12px;
  background:transparent;
  border:none;
  font-size:36px;
  color:var(--sepia);
  cursor:pointer;
  padding:6px 10px;
  border-radius:8px;
}
.expanded-body{
  display:flex;
  gap:28px;
  align-items:center;
  width:100%;
  justify-content:space-between;
  flex-wrap:wrap;
}
.expanded-num{
  font-family: "Great Vibes", "Cormorant Garamond", serif;
  font-size:120px;
  color:var(--accent);
  line-height:0.9;
  text-shadow: 0 6px 0 rgba(255,255,255,0.6);
  padding:6px 12px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,250,0.98), rgba(250,245,235,0.98));
  border:1px solid rgba(0,0,0,0.04);
  box-shadow: 0 18px 48px rgba(20,12,6,0.12);
  flex: 0 0 auto;
}
.expanded-title{
  font-size:34px;
  font-weight:800;
  color:var(--sepia);
  font-family: "Cormorant Garamond", "EB Garamond", serif;
  margin-bottom:8px;
}
.expanded-desc{
  font-size:18px;
  color:var(--muted);
  line-height:1.5;
  max-width:560px;
}
.expanded-actions{ display:flex; gap:12px; align-items:center; margin-top:12px; }

/* ensure good mobile scaling */
@media (max-width:780px){
  .expanded-inner{ padding:18px; max-width:92vw; border-radius:10px }
  .expanded-body{ gap:12px; flex-direction:column; align-items:center; text-align:center }
  .expanded-num{ font-size:62px; padding:8px 10px }
  .expanded-title{ font-size:22px }
  .expanded-desc{ font-size:16px; max-width:92vw }
  .expanded-close{ font-size:28px; right:8px; top:8px }
}