/* Eights styles */
#eights { background: radial-gradient(circle at 50% 22%, #1f3a6b 0%, #0f1f3f 55%, #070e1f 100%); }
#eights .event-pop { top: calc(env(safe-area-inset-top, 0px) + 60px); }
#eights .hand-area { background: linear-gradient(180deg, rgba(7,14,31,0) 0%, rgba(7,14,31,.92) 30%); }

/* Opponents row */
.e8-opps { display: flex; gap: 6px; overflow-x: auto; padding: 8px var(--gutter-r) 4px var(--gutter-l); scrollbar-width: none; flex: 0 0 auto; justify-content: flex-start; }
.e8-opps::-webkit-scrollbar { display: none; }
.e8-opps > :first-child { margin-left: auto; } .e8-opps > :last-child { margin-right: auto; }
.e8-seat { flex: 0 0 auto; min-width: 86px; max-width: 150px; background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.12); border-radius: 14px; padding: 7px 8px 6px; display: grid; gap: 3px; justify-items: center; text-align: center; font-size: 12px; line-height: 1.2; position: relative; transition: border-color .2s, box-shadow .2s; }
.e8-seat b { font-size: 12px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e8-seat.turn { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(246,196,83,.3), 0 0 18px rgba(246,196,83,.35); background: rgba(246,196,83,.1); }
.e8-seat.off { opacity: .5; filter: grayscale(.6); }
.e8-seat.bog { background: rgba(120,160,255,.08); }
.e8-seat.won { border-color: var(--good); box-shadow: 0 0 18px rgba(74,209,124,.5); }
.e8-seat .avatar { width: 32px; height: 32px; font-size: 13px; }
.e8-seat-top { display: flex; align-items: center; gap: 6px; }
.e8-count { background: var(--card); color: var(--card-ink); font-family: var(--display); font-weight: 700; font-size: 15px; min-width: 26px; height: 34px; border-radius: 5px; display: grid; place-items: center; box-shadow: 0 2px 5px rgba(0,0,0,.4), 2px 2px 0 #cfc7b4, 4px 4px 0 #b9b19e; }
.e8-count.one { background: var(--bad); color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 14px var(--bad); animation: e8pulse 1s infinite; }
.e8-seat-tags { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; min-height: 14px; align-items: center; }
.e8-seat-tags .tag { padding: 2px 6px; font-size: 10px; }
.tag.e8-bog { background: #cfe3ff; color: #0c2c5c; }
.tag.e8-pen { background: var(--bad); color: #fff; animation: e8pulse .9s infinite; }
.tag.e8-last { background: var(--brass); color: #2a1d05; }
.e8-spec-dots { color: var(--brass); font-size: 8px; letter-spacing: 2px; }
.e8-exposed { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; margin-top: 2px; }
.e8-exposed .card.sm { width: 26px; height: 38px; }
.e8-exposed .card.sm .big { font-size: 13px; } .e8-exposed .card.sm .corner { font-size: 7px; top: 2px; left: 3px; } .e8-exposed .card.sm .corner small { font-size: 6px; }

/* Table */
.e8-table { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 4px var(--gutter-r) 4px var(--gutter-l); }
.e8-dir-row { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.e8-dir { font-size: 30px; line-height: 1; color: var(--brass); display: inline-block; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.e8-dir.spin { animation: e8spin .9s cubic-bezier(.3, 1.3, .4, 1); }
@keyframes e8spin { from { transform: rotate(0deg) scale(1); } 50% { transform: rotate(360deg) scale(1.6); } to { transform: rotate(720deg) scale(1); } }
.e8-whose { color: var(--ink-dim); font-size: 14px; font-weight: 700; }
.e8-penalty { background: var(--bad); color: #fff; font-family: var(--display); font-weight: 700; font-size: 16px; border-radius: 999px; padding: 6px 14px; box-shadow: 0 0 0 0 rgba(255,107,90,.6); }
.e8-penalty.pulse { animation: e8pen 1s infinite; }
@keyframes e8pen { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,107,90,.6); } 60% { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(255,107,90,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,107,90,0); } }
@keyframes e8pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.e8-piles { display: flex; align-items: center; justify-content: center; gap: 28px; }
.e8-draw { background: none; border: 0; padding: 0; display: grid; justify-items: center; gap: 4px; color: var(--ink); font-family: var(--body); cursor: pointer; position: relative; }
.e8-draw:disabled { cursor: default; opacity: .75; }
.e8-draw .card.back { width: 64px; height: 92px; }
.e8-draw.legal .card.back { box-shadow: 0 0 0 3px #fff, 0 0 18px rgba(255,255,255,.55); animation: pulse 1.2s infinite; }
.e8-draw.eat .card.back { box-shadow: 0 0 0 3px var(--bad), 0 0 18px rgba(255,107,90,.6); }
.e8-draw-lbl { font-weight: 800; font-size: 13px; }
.e8-draw small { color: var(--ink-dim); font-size: 11px; margin-top: -3px; }
.e8-discard { position: relative; display: grid; place-items: center; padding-bottom: 22px; }
.e8-discard .card.lg { width: 74px; height: 106px; box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.e8-discard .card.lg .big { font-size: 40px; }
.e8-suit-big { position: absolute; right: -34px; top: -8px; width: 58px; height: 58px; border-radius: 50%; background: var(--card); color: var(--card-ink); display: grid; place-items: center; font-size: 30px; line-height: 1; font-family: var(--display); font-weight: 700; box-shadow: 0 0 0 3px var(--brass), 0 6px 16px rgba(0,0,0,.5); animation: e8pop .3s ease-out; }
.e8-suit-big.red { color: var(--red); }
.e8-suit-big small { font-size: 8px; text-transform: uppercase; letter-spacing: .05em; margin-top: -4px; }
@keyframes e8pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#eights .ticker { padding: 2px 0 4px; }

/* Hand area */
.e8-hand-area { gap: 6px; }
.e8-chips { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; min-height: 30px; }
.e8-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid rgba(246,196,83,.35); background: rgba(246,196,83,.1); color: var(--ink); border-radius: 999px; padding: 5px 12px 5px 8px; font-weight: 800; font-size: 12px; font-family: var(--body); cursor: pointer; opacity: .6; transition: opacity .2s, transform .15s; }
.e8-chip span { font-size: 15px; }
.e8-chip.ok { opacity: 1; border-color: var(--brass); background: linear-gradient(180deg, rgba(246,196,83,.35), rgba(246,196,83,.15)); box-shadow: 0 0 14px rgba(246,196,83,.35); animation: e8pulse 1.4s infinite; }
.e8-chip:active { transform: scale(.96); }
.e8-hand { justify-content: flex-start; min-height: 100px; padding-top: 16px; }
.e8-hand > :first-child { margin-left: auto; } .e8-hand > :last-child { margin-right: auto; }
.e8-hand .card.e8-ok { box-shadow: 0 0 0 3px #fff, 0 0 16px rgba(255,255,255,.5); transform: translateY(-6px); }
.e8-hand .card.e8-drawn { outline: 3px dashed var(--brass); outline-offset: 2px; }
.e8-hand.crowded .card { margin-left: -16px; }
.e8-hand.crowded > :first-child { margin-left: auto; }
.e8-red { color: #ff8a8a; }

/* Sheets */
.e8-suits { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.e8-suit-btn { background: var(--card); color: var(--card-ink); border: 0; border-radius: 14px; padding: 16px; font-size: 44px; line-height: 1; display: grid; place-items: center; gap: 6px; font-family: var(--display); font-weight: 700; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.e8-suit-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.e8-suit-btn.red { color: var(--red); }
.e8-suit-btn small { font-size: 13px; color: var(--card-ink); }
.e8-targets { display: grid; gap: 8px; }
.e8-target { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.18); color: var(--ink); border-radius: 12px; padding: 10px 12px; text-align: left; font-family: var(--body); font-size: 15px; cursor: pointer; }
.e8-target:active { background: rgba(246,196,83,.2); }
.e8-target span { color: var(--ink-dim); font-size: 13px; }

/* Blasts */
.taunt-blast.e8-last { background: rgba(246,196,83,.96); color: #1d1a14; }
.taunt-blast.e8-last .tb-text { color: #1d1a14; text-shadow: 0 6px 0 rgba(0,0,0,.15); }
.taunt-blast.e8-shame { background: rgba(20,30,70,.97); }
.e8-shame-hand { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0 12px; max-width: 340px; }
.e8-mini { background: var(--card); color: var(--card-ink); font-family: var(--display); font-weight: 700; font-size: 18px; border-radius: 6px; padding: 8px 6px; min-width: 40px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.4); animation: e8pop .3s ease-out; }
.e8-mini.red { color: var(--red); }