.play{padding:88px 0 64px;min-height:100vh}
.play-grid{display:grid;grid-template-columns:1fr 352px;gap:16px;align-items:start}
.board-card{min-height:640px;display:flex;flex-direction:column;position:relative;isolation:isolate}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 0}
.board-top .right{display:flex;gap:8px;align-items:center}
.board{flex:1;position:relative;padding:24px 16px;display:flex;align-items:center;justify-content:center}
.board::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:32px 32px;mask:radial-gradient(ellipse at center,#000 30%,transparent 75%);pointer-events:none}
.board-beam{position:absolute;inset:0;background:url(../assets/img/beam-features.png) center/cover;opacity:.45;pointer-events:none;z-index:-1}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;width:100%;position:relative}
.tile{position:relative;aspect-ratio:1;border-radius:14px;background:var(--glass);box-shadow:inset 0 1px 0 var(--line-2);backdrop-filter:blur(6px);padding:12px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;opacity:0;transform:scale(.7) translateY(12px);transition:box-shadow .2s,background .2s,opacity .5s var(--ease),transform .6s var(--ease)}
.tile.in{opacity:1;transform:none}
.tile .avatar{width:34px;height:34px}
.tile b{font-weight:500;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile small{display:block;font:400 10px/1 var(--mono);color:var(--fg-3);margin-top:4px}
.tile.hot{background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 28px rgba(255,255,255,.18)}
.tile.win{background:rgba(250,128,57,.28);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 40px rgba(250,128,57,.45);transform:scale(1.06)}
.tile.mine{box-shadow:inset 0 0 0 1px var(--blue)}
.tile.removed{opacity:.35;filter:grayscale(1)}
.tile.removed::after{content:"removed";position:absolute;right:8px;top:8px;font:400 9px/1 var(--mono);color:var(--red)}
.board-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;color:var(--fg-2);pointer-events:none}
.board-empty b{color:var(--fg);font-weight:500}
.board-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 16px;font:400 12px/1 var(--mono);color:var(--fg-3)}
.board-foot .ic{display:flex;gap:6px}
.icobtn{width:32px;height:32px;border-radius:10px;background:var(--glass);box-shadow:inset 0 1px 0 var(--line);display:grid;place-items:center;color:var(--fg-2);transition:background .2s,color .2s}
.icobtn:hover,.icobtn.on{background:var(--glass-2);color:var(--fg)}
.icobtn svg{width:16px;height:16px}

.side{display:flex;flex-direction:column;gap:16px}
.round-card{padding:16px}
.round-card .hd{display:flex;justify-content:space-between;align-items:center;font:400 12px/1 var(--mono);text-transform:uppercase;color:var(--fg-2);margin-bottom:12px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv div{padding:14px;border-radius:12px;background:rgba(0,0,0,.35);box-shadow:inset 0 1px 0 var(--line)}
.kv small{display:block;font:400 11px/1 var(--mono);text-transform:uppercase;color:var(--fg-2)}
.kv b{display:block;font:300 30px/1.1 var(--num);margin-top:8px;letter-spacing:-.02em}
.kv b i{font:400 12px/1 var(--mono);color:var(--fg-2);font-style:normal;margin-left:4px}
.kv .hot{background:rgba(250,128,57,.14);box-shadow:inset 0 0 0 1px rgba(250,128,57,.5)}
.odds{margin-top:12px;font-size:13px;color:var(--fg-2);display:flex;justify-content:space-between}
.odds b{color:var(--fg);font-weight:500}
.entry-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.entry-card .hd{font:400 12px/1 var(--mono);text-transform:uppercase;color:var(--fg-2)}
.entry-card .btn.solid{width:100%;justify-content:space-between}
.entry-card .hint{font-size:12px;color:var(--fg-3)}
.find{display:flex;gap:8px}
.find .input{flex:1}
.find-result{font-size:13px;color:var(--fg-2);padding:10px 12px;border-radius:10px;background:rgba(0,0,0,.3);display:none}
.find-result.show{display:block}.find-result.ok{color:var(--green)}.find-result.err{color:var(--fg-2)}
.mini-acc .acc-item{background:transparent;box-shadow:none}
.mini-acc .acc-q{padding:0;height:36px;font-weight:400;color:var(--fg-2)}
.mini-acc .acc-a p{padding:0 0 8px;font-size:14px}
.mini-acc .acc-a ol{padding:0 0 8px 18px;color:var(--fg-2);font-size:14px;display:flex;flex-direction:column;gap:6px}
.feed-card{padding:16px;display:flex;flex-direction:column;gap:12px;min-height:280px}
.feed-card .hd{display:flex;justify-content:space-between;align-items:center;font:400 12px/1 var(--mono);text-transform:uppercase;color:var(--fg-2)}
.feed{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto;scrollbar-width:thin}
.feed .it{display:grid;grid-template-columns:32px 1fr;gap:10px;padding:10px;border-radius:12px;background:rgba(0,0,0,.3);box-shadow:inset 0 1px 0 var(--line-soft);animation:feedin .5s var(--ease)}
@keyframes feedin{from{opacity:0;transform:translateY(-8px)}}
.feed .it b{font-weight:500;font-size:13px}.feed .it span{font-size:11px;color:var(--fg-3);margin-left:6px;font-family:var(--mono)}
.feed .it p{font-size:13px;color:var(--fg-2);line-height:1.4;margin-top:4px}
.feed .it .amt{font:300 14px/1 var(--num);color:var(--fg);margin-top:4px}
.feed-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--fg-2);font-size:14px;padding:24px 0}
.feed-empty b{color:var(--fg);font-weight:500}
.feed-empty .ico{width:32px;height:32px;border-radius:8px;background:var(--glass);display:grid;place-items:center;margin-bottom:8px}

.banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:12px;background:rgba(250,128,57,.12);box-shadow:inset 0 0 0 1px rgba(250,128,57,.4);font-size:14px;margin-bottom:16px}
.banner.demo{background:rgba(0,153,255,.12);box-shadow:inset 0 0 0 1px rgba(0,153,255,.4)}
.banner .btn{height:32px;padding:0 14px;font-size:14px}

/* winner overlay */
.winner{position:fixed;inset:0;z-index:70;display:grid;place-items:center;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.winner.show{opacity:1;visibility:visible}
.winner .box{width:min(480px,92vw);padding:32px;border-radius:20px;background:#0d0d0d;box-shadow:inset 0 1px 0 var(--line-2),0 40px 120px rgba(0,0,0,.7);text-align:center;transform:translateY(24px);transition:transform .6s var(--ease)}
.winner.show .box{transform:none}
.winner .avatar{width:72px;height:72px;margin:0 auto 16px;font-size:20px}
.winner h2{font-size:32px}
.winner .pot{font:300 44px/1 var(--num);margin:16px 0 4px;color:var(--accent)}
.winner blockquote{color:var(--fg-2);margin:16px 0;font-size:15px;line-height:1.45}
.winner .meta{font:400 12px/1.6 var(--mono);color:var(--fg-3)}
.winner .acts{display:flex;justify-content:center;gap:8px;margin-top:20px}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:6px;height:10px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}
@media (max-width:1000px){.play-grid{grid-template-columns:1fr}.board-card{min-height:480px}.tiles{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}}