/* Big-screen table. Sized in vmin/vh so it fills any TV or laptop. */
html, body { overflow: hidden; }
.room { position: fixed; inset: 0; display: flex; flex-direction: column; }
.top { position: relative; z-index: 2; display: flex; align-items: center; gap: 2vmin; padding: 1.6vmin 2.4vmin;
  background: linear-gradient(180deg, rgba(11,22,36,.92), rgba(11,22,36,.6)); border-bottom: 1px solid rgba(255,198,41,.25); }
.logo { font-size: 5vmin; }
.status { flex: 1; text-align: center; font-weight: 700; font-size: 2.4vmin; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-2); }
.iconbtn { background: var(--panel); border: 1px solid var(--line); color: #fff; border-radius: 10px; width: 5vmin; height: 5vmin; min-width: 40px; min-height: 40px; font-size: 2.4vmin; }
.joinmini { display: flex; align-items: center; gap: 1.2vmin; background: rgba(11,22,36,.85); padding: .6vmin 1.4vmin .6vmin .6vmin; border-radius: 10px; border: 1px solid var(--line); }
.joinmini img { width: 6.5vmin; height: 6.5vmin; border-radius: 6px; background: #fff; }
.joinmini .lbl { font-size: 1.5vmin; color: var(--grey); text-transform: uppercase; letter-spacing: .15em; }
.codemini { font-weight: 900; font-size: 3.4vmin; letter-spacing: .18em; color: var(--gold); line-height: 1; }

/* Lobby */
.lobby { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1.25fr 1fr; gap: 4vmin; align-items: center; padding: 4vmin 6vmin; }
.joinbox { display: flex; align-items: center; gap: 4vmin; background: rgba(11,22,36,.85); border: 1px solid var(--line);
  border-radius: 2.4vmin; padding: 3.5vmin; box-shadow: 0 0 0 1px rgba(255,198,41,.15), 0 3vmin 6vmin rgba(0,0,0,.4); }
.qrwrap { background: #fff; padding: 1.6vmin; border-radius: 1.6vmin; flex: none; box-shadow: 0 0 0 .6vmin var(--gold); }
.qrwrap img { width: 34vmin; height: 34vmin; display: block; }
.joininfo .step { color: #cfd6e2; font-size: 2.4vmin; margin: .6vmin 0; }
.joininfo .url { font-weight: 800; font-size: 3.4vmin; color: #fff; word-break: break-all; }
.bigcode { font-weight: 900; font-size: 13vmin; letter-spacing: .14em; line-height: 1; color: var(--gold);
  text-shadow: 0 .6vmin 0 #7a5208, 0 1.4vmin 3vmin rgba(0,0,0,.5); }
.lobbyplayers h2 { margin: 0 0 2vmin; font-size: 3.6vmin; text-transform: uppercase; letter-spacing: .08em; }
.lobbyplayers h2 span { color: var(--gold); }
.plist { list-style: none; margin: 0 0 2vmin; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vmin; }
.plist li { display: flex; align-items: center; gap: 1.4vmin; background: rgba(11,22,36,.8); border: 1px solid var(--line);
  border-radius: 1.4vmin; padding: 1.2vmin 1.6vmin; font-weight: 700; font-size: 2.8vmin; animation: pop .35s cubic-bezier(.2,.9,.3,1.4); }
.plist li .wins { margin-left: auto; color: var(--gold-2); font-size: 2vmin; }
.plist li.off { opacity: .5; }
.plist li .kick { margin-left: .6vmin; background: none; border: 0; color: var(--grey); font-size: 2.2vmin; padding: .4vmin; }
.avatar { width: 4.4vmin; height: 4.4vmin; border-radius: 50%; display: grid; place-items: center; font-weight: 900; color: var(--navy);
  font-size: 2.2vmin; flex: none; box-shadow: inset 0 -.4vmin 0 rgba(0,0,0,.2); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.hint { color: #cfd6e2; font-size: 2.2vmin; }
.lobbyplayers .btn { font-size: 2.8vmin; padding: 1.6vmin 4vmin; }

/* Game */
.game { position: relative; z-index: 1; flex: 1; display: grid; grid-template-columns: 1fr minmax(0, auto); gap: 2.4vmin; padding: 2.4vmin; min-height: 0; }
.playarea { display: flex; flex-direction: column; min-height: 0; }
.turnbar { display: flex; align-items: center; justify-content: space-between; gap: 2vmin; margin-bottom: 2vmin; }
.who { display: flex; align-items: center; gap: 1.6vmin; font-size: 4.4vmin; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.who .avatar { width: 7vmin; height: 7vmin; font-size: 3.4vmin; box-shadow: 0 0 0 .5vmin rgba(255,255,255,.85), 0 0 3vmin currentColor; }
.who small { display: block; font-size: 2vmin; color: var(--gold-2); letter-spacing: .14em; font-weight: 700; }
.who.away::after { content: "AWAY"; font-size: 1.8vmin; background: var(--red); color: #fff; border-radius: 99px; padding: .5vmin 1.2vmin; letter-spacing: .12em; }
.rolls { display: flex; gap: 1vmin; align-items: center; font-weight: 800; font-size: 2.2vmin; text-transform: uppercase; letter-spacing: .1em; color: var(--gold-2); }
.rolls i { width: 2.6vmin; height: 2.6vmin; border-radius: .6vmin; background: var(--gold); box-shadow: 0 .3vmin 0 #7a5208; }
.rolls i.used { background: rgba(255,255,255,.15); box-shadow: none; }

.tray { flex: 1; min-height: 0; position: relative; border-radius: 4vmin; padding: 2vmin;
  background: linear-gradient(160deg, var(--wood-2), var(--wood) 60%, #3b1d0c);
  box-shadow: inset 0 .4vmin 0 rgba(255,255,255,.18), 0 3vmin 6vmin rgba(0,0,0,.45), 0 0 0 .4vmin rgba(255,198,41,.35); }
.tray-inner { position: absolute; inset: 2vmin; border-radius: 3vmin; display: flex; align-items: center; justify-content: center; gap: 3.4vmin;
  background: radial-gradient(ellipse at 50% 35%, #1a8a5c, var(--felt) 55%, #08331f);
  box-shadow: inset 0 1.4vmin 3vmin rgba(0,0,0,.55), inset 0 0 0 .3vmin rgba(255,230,128,.25); padding-bottom: 3vmin; }
.tray-inner::before { content: "DICELLO"; position: absolute; font-weight: 900; font-style: italic; font-size: 16vmin; letter-spacing: .08em;
  color: rgba(255,230,128,.06); pointer-events: none; }
.trayhint { position: absolute; left: 0; right: 0; bottom: 3.6vmin; text-align: center; font-size: 2.2vmin; color: rgba(255,255,255,.75); letter-spacing: .08em; }
.lastmove { min-height: 6vmin; margin-top: 1.6vmin; display: flex; align-items: center; justify-content: center; font-size: 2.8vmin; font-weight: 700; color: #fff; text-align: center; }
.lastmove b { color: var(--gold); }

.board { min-height: 0; overflow: hidden; display: flex; }
.scores { border-collapse: separate; border-spacing: 0; background: rgba(11,22,36,.92); border: 1px solid var(--line); border-radius: 1.6vmin;
  overflow: hidden; font-size: 1.95vmin; align-self: flex-start; box-shadow: 0 2vmin 4vmin rgba(0,0,0,.4); }
.scores th, .scores td { padding: .55vmin 1.1vmin; text-align: center; white-space: nowrap; border-bottom: 1px solid rgba(38,64,95,.6); }
.scores th:first-child, .scores td:first-child { text-align: left; color: #dfe5ee; font-weight: 600; }
.scores thead th { padding: 1vmin 1.1vmin; font-weight: 800; font-size: 1.9vmin; max-width: 11vmin; overflow: hidden; text-overflow: ellipsis; border-bottom: 2px solid var(--line); }
.scores thead th .dot { margin-right: .5vmin; }
.scores td.cur, .scores th.cur { background: rgba(255,198,41,.12); }
.scores th.cur { color: var(--gold); box-shadow: inset 0 .5vmin 0 var(--gold); }
.scores td.opt { color: rgba(255,230,128,.55); font-style: italic; }
.scores td.opt.zero { color: rgba(255,255,255,.25); }
.scores td.val { font-weight: 800; }
.scores td.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { background: var(--gold); color: var(--navy); } 100% { } }
.scores tr.sub td { color: var(--grey); font-size: 1.7vmin; }
.scores tr.bonus td { color: var(--green); }
.scores tr.total td { font-weight: 900; font-size: 2.5vmin; color: var(--gold); border-bottom: 0; background: rgba(255,198,41,.07); }
.scores tr.sep td { border-bottom: 2px solid var(--line); }
.scores td.left { opacity: .4; }

/* Results */
.results { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(5,10,18,.72); backdrop-filter: blur(4px); }
.resbox { text-align: center; background: rgba(11,22,36,.95); border: 1px solid var(--gold); border-radius: 3vmin; padding: 4vmin 6vmin; min-width: 60vmin;
  box-shadow: 0 0 6vmin rgba(255,198,41,.25), 0 4vmin 8vmin rgba(0,0,0,.6); }
.restitle { font-size: 3vmin; font-weight: 800; letter-spacing: .25em; text-transform: uppercase; color: var(--gold-2); }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 2vmin; margin: 3vmin 0 2vmin; }
.pod { width: 18vmin; display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
.pod .avatar { width: 8vmin; height: 8vmin; font-size: 4vmin; }
.pod .nm { font-weight: 800; font-size: 2.6vmin; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .blk { width: 100%; border-radius: 1.2vmin 1.2vmin 0 0; display: grid; place-items: center; font-weight: 900; font-size: 4vmin; color: var(--navy);
  background: linear-gradient(180deg, var(--gold-2), var(--gold-3)); }
.pod.p1 .blk { height: 20vmin; } .pod.p2 .blk { height: 14vmin; background: linear-gradient(180deg, #f1f4f8, #9aa3b2); } .pod.p3 .blk { height: 10vmin; background: linear-gradient(180deg, #e6a36b, #92400E); }
.pod .pts { font-size: 2.2vmin; color: var(--gold-2); font-weight: 700; }
.restable { list-style: none; padding: 0; margin: 0 auto 3vmin; max-width: 50vmin; text-align: left; font-size: 2.2vmin; counter-reset: r 3; }
.restable li { display: flex; gap: 1.4vmin; padding: .6vmin 0; border-bottom: 1px solid var(--line); counter-increment: r; }
.restable li::before { content: counter(r) "."; color: var(--grey); width: 3vmin; }
.restable li b { margin-left: auto; color: var(--gold); }
.resbox .btn { font-size: 2.8vmin; padding: 1.6vmin 5vmin; }

.reactions { position: absolute; inset: 0; pointer-events: none; z-index: 30; overflow: hidden; }
.react { position: absolute; bottom: 4vh; font-size: 8vmin; animation: floatup 3s ease-out forwards; text-align: center; }
.react span { display: block; font-size: 2vmin; font-weight: 800; color: #fff; text-shadow: 0 2px 6px #000; }
@keyframes floatup { 0% { transform: translateY(0) scale(.5); opacity: 0; } 15% { opacity: 1; transform: translateY(-6vh) scale(1.1); } 100% { transform: translateY(-70vh) scale(1); opacity: 0; } }

@media (max-aspect-ratio: 1/1) {
  .lobby { grid-template-columns: 1fr; }
  .game { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .board { justify-content: center; }
}