/* Trial of the Throne */
.chip.back { text-decoration: none; }
.chip.back:hover { background: rgba(255, 255, 255, .07); }
.lobby { position: fixed; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(860px, calc(100% - 28px)); max-height: calc(100vh - 110px); overflow: auto; padding: clamp(20px, 3vw, 34px); }
.lobby h1 { margin: 10px 0 10px; font-family: var(--serif); font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.1; }
.lobby h1 em, .wait h2 em { font-style: normal; background: linear-gradient(180deg, #ffd2a8, #ff5a2b 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lobby .lead { color: var(--dim); line-height: 1.6; margin: 0 0 20px; max-width: 640px; }
.tables { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tbl { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .035); box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.tbl.hot { box-shadow: 0 0 0 1px rgba(255, 120, 80, .5) inset, 0 16px 40px -20px rgba(255, 77, 46, .8); }
.tbl small { font-family: var(--serif); letter-spacing: .2em; font-size: .6rem; color: var(--mute); text-transform: uppercase; }
.tbl b { font-family: var(--serif); font-size: 1.35rem; color: var(--gold2); }
.tbl .dots { display: flex; gap: 5px; }
.tbl .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.tbl .dots i.on { background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.tbl .btn { width: 100%; padding: .7em .6em; font-size: .66rem; }
.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.rules div { padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); font-size: .8rem; color: var(--dim); }
.rules b { display: block; font-family: var(--serif); color: var(--ink); font-size: .9rem; margin-bottom: 2px; }
.recent { margin-top: 16px; font-size: .78rem; color: var(--mute); display: grid; gap: 4px; }
.recent b { color: var(--dim); font-weight: 600; }
.recent em { font-style: normal; color: var(--ember2); }
@media (max-width: 760px) { .tables { grid-template-columns: repeat(2, 1fr); } .tables .tbl:first-child { grid-column: 1 / -1; } .rules { grid-template-columns: 1fr 1fr; } .lobby { top: 64px; transform: translateX(-50%); max-height: calc(100dvh - 78px); } }

.wait { position: fixed; z-index: 12; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 28px)); padding: 26px; text-align: center; }
.wait h2 { margin: 8px 0 16px; font-family: var(--serif); }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.seat { padding: 14px 6px 10px; border-radius: 12px; background: rgba(255, 255, 255, .035); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent) inset; font-size: .72rem; color: var(--dim); }
.seat img { width: 44px; height: 44px; display: block; margin: 0 auto 6px; }
.seat.empty img { opacity: .15; filter: grayscale(1); }
.seat.empty span { animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .35; } }

.plates { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.plate { position: absolute; display: flex; align-items: center; gap: 10px; padding: 9px 14px 9px 9px; border-radius: 14px; min-width: 190px; background: rgba(14, 10, 18, .82); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent) inset; transition: box-shadow .3s, transform .3s; }
.plate img { width: 38px; height: 38px; }
.plate b { display: block; font-size: .86rem; }
.plate span { font-size: .72rem; color: var(--mute); }
.plate .pw { margin-left: auto; display: flex; gap: 4px; }
.plate .pw i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--c) inset; }
.plate .pw i.home { background: var(--c); box-shadow: 0 0 8px var(--c); }
.plate.on { box-shadow: 0 0 0 2px var(--c) inset, 0 0 40px -6px var(--c); transform: scale(1.04); }
.plate.me b { color: var(--ok); }
.plate .sd { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.plate.p0 { left: 18px; bottom: 92px; } .plate.p1 { left: 18px; top: 74px; } .plate.p2 { right: 18px; top: 74px; } .plate.p3 { right: 18px; bottom: 92px; }
@media (max-width: 760px) { .plate { min-width: 0; padding: 6px 10px 6px 6px; } .plate img { width: 28px; height: 28px; } .plate span { display: none; } .plate.p0, .plate.p3 { bottom: 150px; } .plate.p0 { left: 8px; } .plate.p3 { right: 8px; } .plate.p1 { left: 8px; top: 62px; } .plate.p2 { right: 8px; top: 62px; } }

.actbar { position: fixed; z-index: 11; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(420px, calc(100% - 28px)); display: grid; gap: 10px; justify-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(14, 10, 18, .85); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px var(--line2) inset, 0 20px 60px rgba(0, 0, 0, .7); }
.turn { font-family: var(--serif); font-size: 1rem; letter-spacing: .04em; text-align: center; }
.timer { width: 100%; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff4d2e, #f7dca0); transform-origin: left; }
.roll { width: 100%; font-size: .9rem; padding: 1.05em; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 1px rgba(255, 180, 140, .5) inset, 0 10px 50px -6px rgba(255, 77, 46, 1), 0 0 80px -10px rgba(255, 77, 46, 1); } }
.pick { display: flex; gap: 8px; width: 100%; }
.pick .btn { flex: 1; }
.glog { position: fixed; z-index: 9; right: 18px; bottom: 92px; width: 260px; padding: 12px 12px 6px; display: none; }
.glog .stk { font-size: .7rem; color: var(--gold2); font-family: var(--serif); letter-spacing: .1em; }
.glog ol { list-style: none; margin: 0; padding: 0; }
.glog li { padding: 5px 2px; font-size: .76rem; color: var(--dim); border-top: 1px solid rgba(255, 255, 255, .04); display: flex; gap: 8px; }
.glog li i { flex: none; width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; background: var(--c); }
@media (min-width: 1100px) { .glog:not([hidden]) { display: block; } .plate.p3 { bottom: 300px; } }
.endc { text-align: center; }
.endc .crown { font-size: 2.6rem; }
.endc .who { display: flex; justify-content: center; gap: 12px; align-items: center; margin: 12px 0; }
.endc .owed { margin: 14px 0; padding: 14px; border-radius: 12px; background: rgba(255, 60, 40, .12); box-shadow: 0 0 0 1px rgba(255, 90, 60, .45) inset; color: #ffb39a; }

.modes { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); }
.modes button { border: 0; cursor: pointer; padding: 8px 16px; border-radius: 9px; background: none; color: var(--mute); font-family: var(--serif); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; }
.modes button.on { background: rgba(255, 255, 255, .08); color: var(--gold2); }
.live { margin-top: 16px; display: grid; gap: 6px; }
.live .lh { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.live .lh b { font-family: var(--serif); font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.live .lh b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); vertical-align: 1px; }
.live .lh span { font-size: .78rem; color: var(--mute); }
.lg { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.lg .st { font-size: .78rem; color: var(--dim); font-weight: 600; }
.lg .pl { display: flex; gap: 6px; }
.lg .pl i { position: relative; flex: 1; height: 8px; border-radius: 9px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.lg .pl i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); box-shadow: 0 0 8px var(--c); }
@media (max-width: 760px) { .lg { grid-template-columns: 74px 1fr auto; } }