/* Club socials: rounders on the beach, and the barbecue and quiz night (public/js/socials.js) */
.soc { z-index: 40; }
.soc-rounders { padding: 0; place-items: stretch; overflow: hidden; background: rgba(14, 22, 40, 0.97); height: 100%; grid-template-rows: minmax(0, 1fr); }
.soc-frame { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; width: 100%; max-width: 1100px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px); gap: 10px; box-sizing: border-box; }
.soc-head { display: flex; align-items: center; gap: 14px; }
.soc-title { display: grid; gap: 4px; margin-right: auto; }
.soc-title b { font: 600 24px/1.1 var(--f-title); }
.soc-score { font: 600 15px/1.2 var(--f-display); letter-spacing: 0.04em; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-variant-numeric: tabular-nums; }
.soc-canvas { width: 100%; height: 100%; min-height: 0; border-radius: 12px; touch-action: none; cursor: pointer; display: block; }
.soc-foot { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 64px; }
.soc-log p { margin: 0; font: 400 15px/1.4 var(--f-voice); color: var(--ink-faint); }
.soc-log p.now { color: var(--ink); font-size: 16.5px; }
.soc-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.soc-btns button { min-height: 48px; min-width: 96px; }
@media (max-width: 640px) {
  .soc-head { flex-wrap: wrap; gap: 8px; }
  .soc-title b { font-size: 20px; }
  .soc-score { font-size: 13px; padding: 6px 10px; }
  .soc-foot { grid-template-columns: 1fr; }
  .soc-btns { justify-content: stretch; }
  .soc-btns button { flex: 1 1 40%; }
}
/* The quiz and the barbecue */
.soc-sheet { width: min(760px, 100%); }
.soc-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.soc-board li { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: baseline; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.soc-board li.me { border-color: var(--accent); background: rgba(210, 164, 70, 0.08); }
.soc-board b { font: 600 17px/1.2 var(--f-display); letter-spacing: 0.02em; }
.soc-board span { font-size: 13.5px; color: var(--ink-soft); }
.soc-board i { font: 600 22px/1 var(--f-mono); font-style: normal; font-variant-numeric: tabular-nums; }
.soc-grill { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; padding: 16px; border-radius: 14px;
  background: repeating-linear-gradient(90deg, #2b2b2b 0 6px, #474747 6px 9px), #333; box-shadow: inset 0 0 30px rgba(255, 120, 40, 0.35); }
.soc-food { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--ink); min-height: 120px; }
.soc-food svg { width: 88px; height: 88px; }
.soc-food .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 7; }
.soc-food .ring-ok { fill: none; stroke: rgba(143, 211, 155, 0.35); stroke-width: 9; }
.soc-food .ring { fill: none; stroke-width: 6; transform: rotate(-90deg); transform-origin: 50px 50px; stroke-linecap: round; }
.soc-food .food { fill: #c86e64; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2; }
.soc-food.sausage .food { r: 18; }
.soc-food span { font: 600 13px/1 var(--f-display); letter-spacing: 0.06em; text-transform: uppercase; }
.soc-food.waiting { opacity: 0.35; }
.soc-food.off { opacity: 0.3; }
.soc-food.smoke { animation: soc-smoke 0.6s ease-in-out infinite alternate; }
@keyframes soc-smoke { from { filter: drop-shadow(0 -2px 4px rgba(200, 200, 200, 0.2)); } to { filter: drop-shadow(0 -8px 10px rgba(220, 220, 220, 0.6)); } }
@media (pointer: coarse) { .soc-food { min-height: 132px; } }