.gt-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 0 10px; }
.gt-home { background: #2a2540; padding: 8px 12px; border-radius: 12px; font-weight: 800; }
.gt-title { font-weight: 800; opacity: .8; font-size: .95rem; text-align: right; }
.pot { text-align: center; background: #231d3a; border-radius: 16px; padding: 10px; margin-bottom: 10px; }
.pot b { display: block; font-size: 2.4rem; color: #ffcf3f; line-height: 1.1; } .pot.locked b { color: #3cff9a; font-size: 1.4rem; }
.wordbox { background: #231d3a; border: 2px dashed #5b4bff; border-radius: 14px; padding: 10px; text-align: center; margin-bottom: 10px; width: 100%; color: inherit; font-weight: 700; }
.wordbox .word { font-size: 1.6rem; }
.seats { display: grid; gap: 8px; margin-bottom: 10px; }
.seat { background: #1c1730; border-radius: 14px; padding: 10px 12px; text-align: left; display: grid; gap: 6px; border: 2px solid transparent; width: 100%; }
.seat.turn { border-color: #ffcf3f; } .seat.sel { border-color: #ff3c7a; background: #2e2752; } .seat.me { opacity: .9; background: #18142a; }
.seat .nm { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.seat .tagx { font-size: .75rem; opacity: .6; font-weight: 600; }
.seat .chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.lockpop { background: #5b4bff; border-radius: 999px; padding: 2px 8px; font-size: .8rem; animation: pop .35s ease-out; } @keyframes pop { from { transform: scale(2); opacity: 0; } }
.mylock { background: #ff3c7a; border-radius: 999px; padding: 2px 8px; font-size: .8rem; }
.holdbtn { position: relative; overflow: hidden; background: #ff3c7a; color: #fff; padding: 24px 16px; min-height: 76px; font-size: 1.3rem; font-weight: 900; width: 100%; border-radius: 18px; border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(255,60,122,.35); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.holdbtn .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.45); }
.holdbtn.holding .fill { width: 100%; transition: width 1s linear; } /* 1s = HOLD_MS in gt.js */
.holdbtn .holdlabel { position: relative; }
.holdbtn.holding { transform: scale(.98); }
.holdhint { text-align: center; font-size: .85rem; opacity: .8; margin: 6px 0 4px; }
.impline { text-align: center; font-size: .9rem; opacity: .85; margin: 4px 0; }
.status { text-align: center; font-weight: 800; padding: 10px; border-radius: 12px; background: #1c1730; margin-bottom: 10px; }
.status.mine { background: #ff3c7a; }
.myhand { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.result { text-align: center; background: #231d3a; border-radius: 18px; padding: 16px; display: grid; gap: 6px; margin-bottom: 10px; }
.result .pts { font-size: 2.6rem; font-weight: 900; color: #ffcf3f; } .result.win { border: 3px solid #3cff9a; animation: pop .5s ease-out; } .result.lose { border: 3px solid #ff3c7a; }
.strip { background: #1c1730; border-radius: 16px; padding: 12px; margin-bottom: 10px; }
.bars { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; align-items: end; height: 110px; margin: 10px 0 4px; }
.bar { display: flex; flex-direction: column-reverse; gap: 1px; height: 100%; position: relative; }
.bar i { display: block; background: #3cff9a; border-radius: 3px 3px 0 0; } .bar i.w { background: #ff3c7a; border-radius: 0; }
.bar.you::after { content: "▲ you"; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: .65rem; white-space: nowrap; color: #ffcf3f; font-weight: 800; }
.axis { display: grid; grid-template-columns: repeat(11, 1fr); font-size: .65rem; opacity: .6; text-align: center; margin-top: 18px; }
.crowdline { font-size: 1.15rem; font-weight: 800; text-align: center; margin: 8px 0; }
.ghostlocks { display: grid; gap: 4px; font-size: .9rem; }
.steps2 { padding-left: 20px; display: grid; gap: 6px; text-align: left; max-width: 340px; }
.note { font-size: .8rem; opacity: .7; text-align: center; }