/* =====================================================================
   IGAA Parlor — shared card face component (loaded after each game's
   inline <style> so it governs all card visuals in every game).
   Card size comes from the game's --card-w / --card-h; everything else
   scales from those, so cards stay crisp at any breakpoint.
   ===================================================================== */
/* One fluid card size for ALL games (overrides each game's own breakpoints),
   so cards scale identically on every screen. ~1.42 aspect, 4 fit across a phone. */
:root{
  /* size by width AND height so 3-row boards fit a screen without scrolling */
  --card-w:clamp(42px, min(16.5vw, 10.6vh), 100px);
  --card-h:calc(var(--card-w) * 1.42);
}
.card{
  width:var(--card-w,100px); height:var(--card-h,144px);
  background:#fdfdfb; border:1px solid #e4dfce; border-radius:12px;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.6);
  display:grid; grid-template-rows:auto 1fr auto; gap:2px;
  padding:calc(var(--card-h,144px)*0.055) calc(var(--card-w,100px)*0.07);
  position:relative; overflow:hidden; color:#24272e; user-select:none;
  --cc:#2f6fc0;
}
.card[data-color=blue]{--cc:#2f6fc0}
.card[data-color=yellow]{--cc:#c99105}
.card[data-color=green]{--cc:#2f9e4f}
.card[data-color=orange]{--cc:#e2701c}
.card[data-color=noon]{--cc:#c9432b; background:#fff8f4; border-color:#eccdbf}
.card[data-color=mail]{--cc:#7a5cc0; background:#f8f5fd; border-color:#ddd3ef}

/* mirrored value labels (top upright, bottom rotated — like a real card) */
.card .idx{
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; font-weight:800;
  font-size:calc(var(--card-h,144px)*0.082); letter-spacing:.015em; line-height:1;
  color:var(--cc); text-align:center; white-space:nowrap;
}
.card .idx.b{transform:rotate(180deg)}
/* color / type label sits at the bottom, upright and readable (accessibility) */
.card .idx.bottom{font-size:calc(var(--card-h,144px)*0.072); letter-spacing:.09em; opacity:.96}

.card .mid{position:relative; display:flex; align-items:center; justify-content:center; min-height:0; overflow:hidden}

/* vertical word (season name, or WEEKDAY / WEEKEND) */
.card .vword{
  font-family:"Fraunces","Georgia",serif; font-weight:600;
  writing-mode:vertical-rl; text-orientation:upright; letter-spacing:.04em;
  font-size:calc(var(--card-h,144px)*0.092); color:var(--cc); line-height:1; z-index:2;
  text-shadow:0 0 6px #fff, 0 0 6px #fff;
}
.card .vword.sm{font-size:calc(var(--card-h,144px)*0.076); letter-spacing:.02em}
/* day cards: WEEKEND / WEEKDAY are 7 upright letters — size + tighten so they
   sit centered inside the mid area and never clip the top/bottom label rows */
.card .vword.day{font-size:calc(var(--card-h,144px)*0.066); letter-spacing:.01em; font-weight:700}

/* seasonal motif: 3 rows x 2 columns of full-colour season art flanking the
   centered season word — the arrangement printed on the original cards */
.card .art{
  position:absolute; inset:5% 7%; display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,1fr); align-content:stretch; align-items:center;
  justify-items:center; column-gap:34%;
  row-gap:calc(var(--card-h,144px)*0.012);
  z-index:1; pointer-events:none;
}
/* vector art: no bitmap upscaling, so the motifs stay crisp at any size */
.card .art .sic{width:calc(var(--card-w,100px)*0.27); height:auto; display:block; overflow:visible}

/* clock (numbered dial + arrow hands) — radius scales from card width */
.card .clock{
  --r:calc(var(--card-w,100px)*0.37); width:calc(var(--r)*2); height:calc(var(--r)*2);
  border-radius:50%; border:calc(var(--r)*0.075) solid var(--cc); position:relative; box-sizing:border-box;
}
.card .clock .num{
  position:absolute; transform:translate(-50%,-50%); font-size:calc(var(--r)*0.26); font-weight:600;
  color:#333; font-family:"Archivo",sans-serif; line-height:1; z-index:1;
}
/* thin season-colored hands with slim arrowheads (match printed cards).
   min-height/padding/margin are pinned to 0 and display:block so a game's own
   hand-ZONE selector (.hand{min-height:…}) can't bleed into the clock hands
   (both share the class "hand") and stretch them past the dial. */
.card .clock .hand{position:absolute; left:50%; top:50%; transform-origin:bottom center; background:var(--cc); border-radius:2px; z-index:2; display:block; min-height:0; min-width:0; max-height:none; padding:0; margin:0; box-sizing:border-box}
.card .clock .hand.hr{width:calc(var(--r)*0.068); height:calc(var(--r)*0.48); transform:translate(-50%,-100%) rotate(var(--hrot))}
.card .clock .hand.mn{width:calc(var(--r)*0.055); height:calc(var(--r)*0.72); transform:translate(-50%,-100%)}
.card .clock .hand::after{
  content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-100%); width:0; height:0;
  border-left:calc(var(--r)*0.088) solid transparent; border-right:calc(var(--r)*0.088) solid transparent;
  border-bottom:calc(var(--r)*0.18) solid var(--cc);
}
.card .clock .pin{position:absolute; left:50%; top:50%; width:calc(var(--r)*0.11); height:calc(var(--r)*0.11); border-radius:50%; background:var(--cc); transform:translate(-50%,-50%); z-index:3}

/* mail card glyph */
.card .mailglyph{font-size:calc(var(--card-h,144px)*0.3); color:var(--cc); z-index:2; line-height:1}

/* ---- card BACK: premium navy stock, brass double frame, four-season
        medallion with an IGAA monogram ---- */
.cardback, .face.back{
  background:linear-gradient(150deg,#22303f,#0f1822) !important; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.cardback{
  position:relative; width:var(--card-w,100px); height:var(--card-h,144px); border-radius:12px; border:1px solid #0b131c;
  box-shadow:0 10px 22px -12px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.04);
}
.face.back{position:absolute; inset:0; border:none}
/* brass double frame */
.cardback::before, .face.back::before{
  content:""; position:absolute; inset:calc(var(--card-w,100px)*0.055);
  border:1px solid rgba(200,163,98,.6); border-radius:8px; z-index:2; pointer-events:none;
  box-shadow:inset 0 0 0 2.5px rgba(200,163,98,.14);
}
/* season-ring medallion */
.bk-medallion{
  width:calc(var(--card-w,100px)*0.52); height:calc(var(--card-w,100px)*0.52); border-radius:50%; z-index:1;
  background:conic-gradient(#3d78bf 0 25%, #e6b23a 0 50%, #45a06a 0 75%, #cf7620 0 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.25);
}
.bk-core{
  width:64%; height:64%; border-radius:50%; background:linear-gradient(150deg,#22303f,#0f1822);
  display:flex; align-items:center; justify-content:center;
  font-family:"Fraunces","Georgia",serif; font-weight:700; color:#e4c883; letter-spacing:.02em;
  font-size:calc(var(--card-w,100px)*0.125); border:1px solid rgba(200,163,98,.45);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.face.back{border:none}
.face.back .bt, .rows{display:none !important}

/* ---- Good News / Bad News (GNBN) card face — ADDITIVE (rendered by
        gnbnFaceHTML in cards.js). Ivory stock with an airmail-stripe frame;
        the target reads by words + a shape strip, never by color alone. ---- */
.card[data-color=gnbn]{--cc:#2f7f7a; background:#fbf8f0; border-color:#e3dcc8; --gk:#b8452f}
.card[data-color=gnbn][data-kind=ask]{--gk:#2f8a4c}
.card[data-color=gnbn][data-season=blue]{--cc:#2f6fc0}
.card[data-color=gnbn][data-season=yellow]{--cc:#c99105}
.card[data-color=gnbn][data-season=green]{--cc:#2f9e4f}
.card[data-color=gnbn][data-season=orange]{--cc:#e2701c}
.card.gnbn::before{
  content:""; position:absolute; inset:calc(var(--card-w,100px)*0.035); border-radius:8px; pointer-events:none; z-index:0;
  padding:calc(var(--card-w,100px)*0.028);
  background:repeating-linear-gradient(135deg,#2f7f7a 0 5px,transparent 5px 10px,#c8a362 10px 15px,transparent 15px 20px);
  -webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; opacity:.55;
}
.card.gnbn > *{position:relative; z-index:1}
.card.gnbn .idx{color:var(--gk); font-size:calc(var(--card-h,144px)*0.07); letter-spacing:.08em}
.card.gnbn .idx.bottom{color:#6b5a35; font-size:calc(var(--card-h,144px)*0.068)}
.card.gnbn .g-body{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--card-h,144px)*0.03); width:100%}
.card.gnbn .gwords{display:flex; flex-direction:column; align-items:center; line-height:.95; color:var(--cc);
  font-family:"Fraunces","Georgia",serif; font-weight:700; font-size:calc(var(--card-h,144px)*0.105); text-align:center}
.card.gnbn .gwords .gw.sm{font-family:"Archivo",sans-serif; font-weight:600; font-style:italic; font-size:.62em; color:#6e7480; margin:.08em 0}
.card.gnbn .gwords.season{font-size:calc(var(--card-h,144px)*0.1); letter-spacing:.03em}
.card.gnbn .g-sic .sic{width:calc(var(--card-w,100px)*0.44); height:auto; display:block; overflow:visible}
.card.gnbn .g-strip{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; width:96%}
.card.gnbn .g-strip i{font-style:normal; font-family:"Archivo",sans-serif; font-weight:700; text-align:center; line-height:1;
  font-size:calc(var(--card-h,144px)*0.05); padding:calc(var(--card-h,144px)*0.014) 0; border-radius:3px; color:#9aa0a8; background:#efeadd}
.card.gnbn .g-strip i.on{background:var(--cc); color:#fff}
.card.gnbn .g-strip.time i{font-size:calc(var(--card-h,144px)*0.044)}
/* a game can mark the LOSE / ASK FOR word as ignored (Priority Mail) */
.card.gnbn.kind-ignored .idx:not(.bottom){opacity:.38; text-decoration:line-through; text-decoration-thickness:1px}