/* Orbi Play 1.2 · todas as cores vêm dos tokens --o-* (orbi-theme.css), então os temas claro e escuro funcionam juntos.
   Medidas: o JS (fit) define --op-board (lado do tabuleiro), --op-h (altura útil) e data-layout em [data-op-fit]. */
.orbi-play{--op-gap:14px;max-width:1600px;margin:0 auto;padding:0 0 var(--op-dock-pad,0px);color:var(--o-text);background:none;container:oplay/inline-size;-webkit-tap-highlight-color:transparent}
.orbi-play *,.orbi-play *::before,.orbi-play *::after{box-sizing:border-box}
.orbi-play h1,.orbi-play h2,.orbi-play p{margin:0}
.orbi-play button{font-family:inherit}
.orbi-play :focus-visible{outline:2px solid var(--o-brand);outline-offset:2px}

/* barra do topo: marca, abas e ajustes */
.op-top{display:flex;align-items:center;gap:14px;margin:0 0 16px;min-width:0}
.op-brand{display:flex;align-items:center;gap:9px;flex:none;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--o-text-strong);white-space:nowrap}
.op-brand img{display:block;width:26px;height:26px}
.op-tabs{display:flex;gap:2px;min-width:0;padding:4px;overflow-x:auto;scrollbar-width:none;background:var(--o-surface);border:1px solid var(--o-line);border-radius:999px}
.op-tabs::-webkit-scrollbar{display:none}
.op-tabs{scroll-snap-type:x proximity;scroll-padding:0 24px}
.op-tabs [role=tab]{scroll-snap-align:start}
.op-tabs.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
.op-tabs.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px);mask-image:linear-gradient(90deg,transparent,#000 44px)}
.op-tabs.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 44px,#000 calc(100% - 44px),transparent)}
.op-tabs [role=tab]{appearance:none;flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--o-muted);font-size:14px;font-weight:650;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.op-tabs [role=tab]:hover{color:var(--o-text-strong);background:var(--o-hover)}
.op-tabs [role=tab][aria-selected=true]{background:var(--o-brand);color:var(--o-brand-ink)}
.op-tab-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--o-brand);color:var(--o-brand-ink);font-size:11px;font-weight:800;line-height:1}
.op-tabs [aria-selected=true] .op-tab-badge{background:var(--o-brand-ink);color:var(--o-brand)}
.op-tab-badge.dot{min-width:8px;width:8px;height:8px;padding:0}
.op-tab-badge[hidden]{display:none}
.op-settings-wrap{position:relative;flex:none;margin-left:auto}
.op-icon-btn{appearance:none;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:999px;border:1px solid var(--o-line);background:var(--o-surface);color:var(--o-muted);cursor:pointer;transition:background .15s,color .15s}
.op-icon-btn:hover,.op-icon-btn[aria-expanded=true]{color:var(--o-text-strong);background:var(--o-hover)}
.op-settings{position:absolute;top:calc(100% + 8px);right:0;z-index:40;display:grid;gap:14px;width:280px;padding:16px;background:var(--o-surface);border:1px solid var(--o-line-strong);border-radius:var(--o-radius);box-shadow:var(--o-shadow)}
.op-settings[hidden]{display:none}
.op-settings>strong{font-size:13px;color:var(--o-text-strong)}
.op-switch{position:relative;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--o-text);cursor:pointer}
.op-switch input{position:absolute;width:1px;height:1px;opacity:0}
.op-switch-ui{position:relative;flex:none;width:38px;height:22px;border-radius:999px;background:var(--o-surface-3);border:1px solid var(--o-line-strong);transition:background .15s}
.op-switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:var(--o-muted);transition:transform .15s,background .15s}
.op-switch input:checked+.op-switch-ui{background:var(--o-brand);border-color:transparent}
.op-switch input:checked+.op-switch-ui::after{transform:translateX(16px);background:var(--o-brand-ink)}
.op-switch input:focus-visible+.op-switch-ui{outline:2px solid var(--o-brand);outline-offset:2px}
.op-slider{display:grid;gap:6px;font-size:14px;color:var(--o-text)}
.op-slider input{width:100%;accent-color:var(--o-brand)}

/* peças comuns */
.op-page{display:grid;gap:var(--op-gap)}
.op-muted{color:var(--o-muted)}
.op-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.op-row.fill>.op-btn{flex:1 1 0}
.op-ico{flex:none}
.op-card{min-width:0;padding:18px;background:var(--o-surface);border:1px solid var(--o-line);border-radius:var(--o-radius)}
.op-card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.op-card-title h2{font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--o-text-strong)}
.op-link{appearance:none;padding:4px;border:0;background:none;color:var(--o-brand-text);font-size:13px;font-weight:700;cursor:pointer}
.op-link:hover{text-decoration:underline}
.op-empty-line{color:var(--o-muted);font-size:14px;line-height:1.5}
.op-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--o-radius-sm);border:1px solid var(--o-line-strong);background:var(--o-surface-2);color:var(--o-text-strong);font-size:14px;font-weight:700;line-height:1.1;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,transform .08s}
.op-btn:hover:not(:disabled){background:var(--o-hover);border-color:color-mix(in srgb,var(--o-brand) 45%,transparent)}
.op-btn:active:not(:disabled){transform:translateY(1px)}
.op-btn:disabled{opacity:.5;cursor:not-allowed}
.op-btn.primary{background:var(--o-brand);border-color:transparent;color:var(--o-brand-ink)}
.op-btn.primary:hover:not(:disabled){background:var(--o-brand-hover);border-color:transparent}
.op-btn.danger{background:transparent;color:var(--o-danger);border-color:color-mix(in srgb,var(--o-danger) 50%,transparent)}
.op-btn.danger:hover:not(:disabled){background:color-mix(in srgb,var(--o-danger) 12%,transparent);border-color:var(--o-danger)}
.op-btn.danger.strong{background:var(--o-danger);color:var(--o-danger-ink);border-color:transparent}
.op-btn.danger.strong:hover:not(:disabled){background:color-mix(in srgb,var(--o-danger) 88%,var(--o-text-strong));color:var(--o-danger-ink)}
.op-btn.sm{min-height:32px;padding:0 12px;font-size:13px}

/* avisos dentro das páginas */
.op-callouts{display:grid;gap:10px}
.op-callouts:empty{display:none}
.op-callout{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 16px;padding:14px 16px;border-radius:var(--o-radius);border:1px solid var(--o-line);background:var(--o-surface)}
.op-callout.hot{border-color:color-mix(in srgb,var(--o-brand) 55%,transparent);background:linear-gradient(90deg,var(--o-brand-soft),transparent 75%),var(--o-surface)}
.op-callout strong{display:block;font-size:15px;color:var(--o-text-strong)}
.op-callout span{font-size:13px;color:var(--o-muted)}
.op-callout b{color:var(--o-text-strong);font-variant-numeric:tabular-nums}

/* visão geral */
.op-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--op-gap);align-items:start}
.op-list{display:grid;margin:0;padding:0;list-style:none}
.op-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--o-line)}
.op-list li:first-child{padding-top:0;border-top:0}
.op-list li:last-child{padding-bottom:0}
.op-grow{flex:1;min-width:0;display:grid;gap:2px;font-weight:650;color:var(--o-text-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-grow b{overflow:hidden;text-overflow:ellipsis}
.op-grow small{font-size:12px;font-weight:500;color:var(--o-muted);overflow:hidden;text-overflow:ellipsis}
.op-avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid color-mix(in srgb,var(--o-brand) 40%,transparent);background:var(--o-brand-soft);color:var(--o-brand-text);font-size:14px;font-weight:800}
.op-avatar.sm{width:24px;height:24px;margin-left:-6px;font-size:11px}
.op-result{flex:none;min-width:74px;padding:4px 10px;border-radius:999px;background:var(--o-surface-3);color:var(--o-muted);font-size:12px;font-weight:800;text-align:center}
.op-result.win{background:color-mix(in srgb,var(--o-success) 16%,transparent);color:var(--o-success)}
.op-result.loss{background:color-mix(in srgb,var(--o-danger) 14%,transparent);color:var(--o-danger)}
.op-delta{font-size:13px;font-weight:800;color:var(--o-muted);font-variant-numeric:tabular-nums}
.op-delta.up{color:var(--o-success)}
.op-delta.down{color:var(--o-danger)}
.op-table-wrap{overflow-x:auto}
.op-table{width:100%;border-collapse:collapse;font-size:14px}
.op-table th{padding:8px 10px;border-bottom:1px solid var(--o-line-strong);color:var(--o-muted);font-size:12px;font-weight:700;text-align:left;white-space:nowrap}
.op-table td{padding:9px 10px;border-bottom:1px solid var(--o-line);color:var(--o-text)}
.op-table tr:last-child td{border-bottom:0}
.op-table .num{text-align:right;font-variant-numeric:tabular-nums}
.op-table tr.me td{background:var(--o-brand-soft);color:var(--o-text-strong);font-weight:700}
.op-pos{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--o-surface-2);color:var(--o-muted);font-size:12px;font-weight:800}
.op-pos.p1{background:var(--o-brand);color:var(--o-brand-ink)}
.op-pos.p2,.op-pos.p3{background:var(--o-brand-soft);color:var(--o-brand-text)}
.op-foot{margin-top:10px!important;font-size:12px}

/* xadrez: sala de convites */
.op-lobby{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);gap:var(--op-gap);align-items:start}
.op-lobby-side{display:grid;gap:var(--op-gap)}
.op-field{display:grid;gap:8px;margin-bottom:16px}
.op-label{font-size:13px;font-weight:700;color:var(--o-text-strong)}
.op-chips{display:flex;flex-wrap:wrap;gap:8px}
.op-chip{appearance:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--o-line-strong);background:var(--o-surface-2);color:var(--o-text);font-size:14px;font-weight:650;cursor:pointer;transition:border-color .15s,background .15s}
.op-chip:hover{border-color:color-mix(in srgb,var(--o-brand) 60%,transparent)}
.op-chip[aria-checked=true]{background:var(--o-brand-soft);border-color:var(--o-brand);box-shadow:inset 0 0 0 1px var(--o-brand);color:var(--o-text-strong)}
.op-chip img{width:24px;height:24px;margin-left:-6px}
.op-dice{width:16px;height:16px;border-radius:50%;border:1px solid var(--o-line-strong);background:linear-gradient(90deg,var(--o-board-light) 50%,var(--o-brand-ink) 50%)}
.op-setup-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:14px;border-top:1px solid var(--o-line)}
.op-setup-foot p{font-size:14px}
.op-invites{display:grid;gap:10px}
.op-invite{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px;padding:12px;border-radius:var(--o-radius-sm);border:1px solid var(--o-line);background:var(--o-surface-2)}
.op-invite.in{border-color:color-mix(in srgb,var(--o-brand) 55%,transparent);background:linear-gradient(90deg,var(--o-brand-soft),transparent 85%),var(--o-surface-2)}
.op-invite-body{display:grid;gap:2px;min-width:0}
.op-invite-body strong{font-size:14px;color:var(--o-text-strong)}
.op-invite-body span{font-size:13px;color:var(--o-muted)}
.op-invite-body small,.op-pop-body small{font-size:12px;color:var(--o-muted)}
.op-invite-body small b,.op-pop-body small b{color:var(--o-text);font-variant-numeric:tabular-nums}
.op-invite .op-row{grid-column:2}

/* xadrez: partida */
.op-game{display:grid;gap:10px var(--op-gap);justify-content:center;align-items:stretch}
.op-game[data-layout=wide]{height:var(--op-h);grid-template-columns:var(--op-board) minmax(280px,380px) minmax(280px,380px);grid-template-rows:auto minmax(0,1fr) auto auto;grid-template-areas:"board opp chat" "board moves chat" "board actions chat" "board me chat"}
.op-game[data-layout=mid]{height:var(--op-h);grid-template-columns:var(--op-board) minmax(300px,440px);grid-template-rows:auto minmax(125px,1fr) auto auto minmax(150px,1fr);grid-template-areas:"board opp" "board moves" "board actions" "board me" "board chat"}
.op-game[data-layout=stack]{grid-template-columns:minmax(0,var(--op-board));grid-template-areas:"opp" "board" "me" "actions" "moves" "chat"}
.op-board-wrap{grid-area:board;position:relative;align-self:start;width:var(--op-board);height:var(--op-board)}
.op-player.opp{grid-area:opp}
.op-player.me{grid-area:me}
.op-moves-card{grid-area:moves}
.op-actions{grid-area:actions}
.op-chat{grid-area:chat}

.op-board{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));width:100%;height:100%;overflow:hidden;border-radius:12px;box-shadow:var(--o-shadow),0 0 0 1px var(--o-line-strong);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.op-sq{appearance:none;position:relative;display:block;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--o-board-light);cursor:default}
.op-sq.d{background:var(--o-board-dark)}
.op-sq.own{cursor:grab}
.op-sq.own:active{cursor:grabbing}
.op-sq.last{background:color-mix(in srgb,var(--o-brand) 50%,var(--o-board-light))}
.op-sq.d.last{background:color-mix(in srgb,var(--o-brand) 55%,var(--o-board-dark))}
.op-sq.sel{background:color-mix(in srgb,var(--o-brand) 72%,var(--o-board-light));box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--o-brand-ink) 40%,transparent)}
.op-sq.d.sel{background:color-mix(in srgb,var(--o-brand) 72%,var(--o-board-dark))}
.op-sq.check{background-image:radial-gradient(circle,var(--o-danger) 0%,color-mix(in srgb,var(--o-danger) 70%,transparent) 32%,transparent 72%)}
.op-sq:focus-visible{outline:3px solid var(--o-brand-ink);outline-offset:-3px;z-index:3}
.op-pc{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none;transition:opacity .1s}
.op-pc.op-lifted{opacity:.28}
.op-sq.dest::after{content:"";position:absolute;left:50%;top:50%;z-index:2;width:30%;height:30%;transform:translate(-50%,-50%);border-radius:50%;background:color-mix(in srgb,var(--o-brand-ink) 34%,transparent);pointer-events:none}
.op-sq.cap::after{content:"";position:absolute;inset:3%;z-index:2;border-radius:50%;border:calc(var(--op-board,480px) * .011) solid color-mix(in srgb,var(--o-brand-ink) 38%,transparent);pointer-events:none}
.op-sq.dest:hover::after{width:38%;height:38%}
.op-sq.hover{box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--o-brand-ink) 55%,transparent)}
.op-cr,.op-cf{position:absolute;z-index:1;font-size:clamp(9px,calc(var(--op-board,480px) * .022),13px);font-weight:800;line-height:1;pointer-events:none}
.op-cr{left:5%;top:5%}
.op-cf{right:6%;bottom:5%}
.op-sq.l .op-cr,.op-sq.l .op-cf{color:color-mix(in srgb,var(--o-board-dark) 55%,#000)}
.op-sq.d .op-cr,.op-sq.d .op-cf{color:var(--o-brand-ink);text-shadow:none}
.op-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;will-change:transform;filter:drop-shadow(0 8px 10px color-mix(in srgb,var(--o-brand-ink) 45%,transparent))}

.op-promo-layer{position:absolute;inset:0;z-index:6;display:none}
.op-promo-layer.open{display:grid;place-items:center}
.op-promo-scrim{position:absolute;inset:0;border-radius:12px;background:color-mix(in srgb,var(--o-bg) 55%,transparent);backdrop-filter:blur(2px)}
.op-promo{position:relative;display:grid;justify-items:center;gap:12px;max-width:calc(100% - 20px);padding:16px;border-radius:var(--o-radius);border:1px solid var(--o-line-strong);background:var(--o-surface);box-shadow:var(--o-shadow)}
.op-promo strong{font-size:15px;color:var(--o-text-strong)}
.op-promo-row{display:flex;gap:8px}
.op-promo-btn{appearance:none;display:grid;justify-items:center;gap:4px;padding:8px 8px 7px;border-radius:var(--o-radius-sm);border:1px solid var(--o-line);background:var(--o-surface-2);color:var(--o-text);font-size:12px;font-weight:700;cursor:pointer}
.op-promo-btn:hover,.op-promo-btn:focus-visible{border-color:var(--o-brand);background:var(--o-brand-soft);color:var(--o-text-strong)}
.op-promo-btn img{width:clamp(40px,calc(var(--op-board,480px) / 8),60px);height:clamp(40px,calc(var(--op-board,480px) / 8),60px)}

.op-player{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px 8px 6px;border-radius:var(--o-radius);border:1px solid var(--o-line);background:var(--o-surface);transition:border-color .2s}
.op-player:has(.op-clock.turn){border-color:color-mix(in srgb,var(--o-brand) 55%,transparent)}
.op-pm{flex:none;display:grid;place-items:center;width:64px;height:64px}
.op-game[data-layout=wide] .op-pm{width:80px;height:80px}
.op-game[data-layout=wide] .op-pm .orbi-mascot{--m-size:80px!important;--m-box:80px!important}
.op-game[data-layout=stack] .op-pm,.op-game[data-short] .op-pm{width:48px;height:48px}
.op-game[data-layout=stack] .op-pm .orbi-mascot,.op-game[data-short] .op-pm .orbi-mascot{--m-size:48px!important;--m-box:48px!important}
.op-game[data-short] .op-player{padding:5px 8px 5px 4px}
/* Alturas baixas (1280x720): painéis e botões mais compactos para a lista de lances caber com pelo menos 3 linhas inteiras */
.op-game[data-short]:not([data-layout=stack]) .op-pm{width:40px;height:40px}
.op-game[data-short]:not([data-layout=stack]) .op-pm .orbi-mascot{--m-size:40px!important;--m-box:40px!important}
.op-game[data-short]:not([data-layout=stack]) .op-card-head{min-height:30px;padding-top:3px;padding-bottom:3px}
.op-game[data-short]:not([data-layout=stack]) .op-actions .op-btn{min-height:34px}
.op-game[data-layout=mid][data-short]{grid-template-rows:auto minmax(125px,1fr) auto auto minmax(120px,.9fr)}
.op-game[data-layout=mid][data-short].op-spectate{grid-template-rows:auto minmax(96px,1fr) auto auto}
.op-game[data-short] .op-clock{min-width:88px;padding:7px 10px;font-size:22px}
.op-pinfo{flex:1;min-width:0;display:grid;gap:4px}
.op-pname{display:flex;align-items:center;gap:7px;min-width:0}
.op-pname strong{min-width:0;overflow:hidden;font-size:15px;color:var(--o-text-strong);white-space:nowrap;text-overflow:ellipsis}
.op-side{flex:none;width:12px;height:12px;border-radius:50%;border:1px solid var(--o-line-strong)}
.op-side.w{background:var(--o-board-light)}
.op-side.b{background:var(--o-brand-ink)}
.op-tag{flex:none;padding:2px 7px;border-radius:999px;background:var(--o-surface-3);color:var(--o-muted);font-size:11px;font-weight:700}
.op-tag.warn{background:color-mix(in srgb,var(--o-warning) 18%,transparent);color:var(--o-warning)}
.op-pmeta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0;font-size:12px}
.op-captured{display:inline-flex;align-items:center;min-height:20px}
.op-cap-group{display:inline-flex;margin-right:3px}
.op-cap-group img{width:19px;height:19px;margin-right:-9px}
.op-cap-group img:last-child{margin-right:0}
.op-adv{margin-left:5px;color:var(--o-text-strong);font-size:12px;font-weight:800}
.op-clock{flex:none;min-width:100px;padding:9px 12px;border-radius:var(--o-radius-sm);border:1px solid var(--o-line);background:var(--o-surface-2);color:var(--o-muted);font:800 26px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-align:center;transition:background .2s,color .2s}
.op-clock.turn{color:var(--o-text-strong);border-color:color-mix(in srgb,var(--o-brand) 50%,transparent)}
.op-clock.run{background:var(--o-brand);border-color:transparent;color:var(--o-brand-ink);box-shadow:0 0 0 4px var(--o-brand-soft)}
.op-clock.low{color:var(--o-danger)}
.op-clock.run.low{background:var(--o-danger);color:var(--o-danger-ink);animation:op-pulse .9s ease-in-out infinite alternate}
@keyframes op-pulse{to{box-shadow:0 0 0 7px color-mix(in srgb,var(--o-danger) 22%,transparent)}}

.op-moves-card,.op-chat{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border-radius:var(--o-radius);border:1px solid var(--o-line);background:var(--o-surface)}
.op-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:5px 12px;border-bottom:1px solid var(--o-line);color:var(--o-text-strong);font-size:13px;font-weight:800}
.op-status{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px}
.op-pill{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--o-surface-3);color:var(--o-text);font-size:12px;font-weight:800;white-space:nowrap}
.op-pill.brand{background:var(--o-brand);color:var(--o-brand-ink)}
.op-pill.danger{background:var(--o-danger);color:var(--o-danger-ink)}
/* Lista de lances: linhas de altura fixa (28px). O JS (alignMoves) ajusta o espaço de baixo para a altura útil ser um número inteiro de linhas,
   assim a linha de cima nunca aparece cortada quando a lista rola até o último lance. */
.op-moves{--mrow:28px;flex:1;min-height:0;display:grid;grid-template-columns:34px minmax(0,1fr) minmax(0,1fr);grid-auto-rows:minmax(var(--mrow),auto);align-content:start;gap:0 4px;padding:6px 10px;overflow-y:auto;font-size:14px;font-variant-numeric:tabular-nums}
.op-moves .n,.op-moves .m{display:flex;align-items:center;min-width:0;white-space:nowrap}
.op-moves .n{height:var(--mrow);padding:0 4px 0 0;justify-content:flex-end;color:var(--o-muted)}
.op-moves .m{height:calc(var(--mrow) - 4px);margin:2px 0;padding:0 8px;border-radius:6px;color:var(--o-text);font-weight:650}
.op-moves .m.cur{background:var(--o-brand-soft);color:var(--o-text-strong);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--o-brand) 45%,transparent)}
.op-moves-empty{grid-column:1/-1;padding:4px 2px;color:var(--o-muted);font-size:13px;line-height:1.45}
.op-game[data-layout=stack] .op-moves{max-height:160px}
.op-game[data-layout=stack] .op-chat{height:320px}

.op-actions{display:grid;gap:8px;min-width:0}
.op-actions:empty{display:none}
.op-banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;padding:10px 12px;border-radius:var(--o-radius-sm);border:1px solid var(--o-line);background:var(--o-surface-2);color:var(--o-text);font-size:13px;line-height:1.4}
.op-banner b{color:var(--o-text-strong);font-variant-numeric:tabular-nums}
.op-banner.brand{border-color:color-mix(in srgb,var(--o-brand) 55%,transparent);background:var(--o-brand-soft)}
.op-banner.warn{border-color:color-mix(in srgb,var(--o-warning) 50%,transparent);background:color-mix(in srgb,var(--o-warning) 14%,var(--o-surface))}
.op-confirm{display:grid;gap:10px;padding:12px;border-radius:var(--o-radius-sm);border:1px solid color-mix(in srgb,var(--o-danger) 50%,transparent);background:color-mix(in srgb,var(--o-danger) 8%,var(--o-surface));color:var(--o-text-strong);font-size:13px;font-weight:650}
.op-end{display:grid;gap:10px;padding:12px 14px;border-radius:var(--o-radius);border:1px solid var(--o-line-strong);background:linear-gradient(135deg,var(--o-brand-soft),transparent 70%),var(--o-surface)}
.op-end.win{border-color:color-mix(in srgb,var(--o-success) 50%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--o-success) 15%,transparent),transparent 70%),var(--o-surface)}
.op-end.loss{border-color:color-mix(in srgb,var(--o-danger) 45%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--o-danger) 12%,transparent),transparent 70%),var(--o-surface)}
.op-end-text{display:grid;gap:3px}
.op-end-text strong{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--o-text-strong)}
.op-end.win .op-end-text strong{color:var(--o-success)}
.op-end.loss .op-end-text strong{color:var(--o-danger)}
.op-end-text span{font-size:14px;color:var(--o-muted)}
.op-end-text .op-delta{font-size:13px}
.op-end-note{padding:8px 10px;border-radius:var(--o-radius-sm);background:var(--o-brand-soft);border:1px solid color-mix(in srgb,var(--o-brand) 45%,transparent);color:var(--o-text);font-size:13px;line-height:1.4}
.op-end-note b{color:var(--o-text-strong);font-variant-numeric:tabular-nums}
.op-end-text .op-delta.up{color:var(--o-success)}
.op-end-text .op-delta.down{color:var(--o-danger)}

.op-chat-log{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:10px 12px;overflow-y:auto}
.op-chat-empty{margin:auto 0!important;color:var(--o-muted);font-size:13px;text-align:center}
.op-msg{align-self:flex-start;display:grid;gap:1px;max-width:88%;padding:6px 10px;border-radius:12px 12px 12px 4px;background:var(--o-surface-2);border:1px solid var(--o-line);color:var(--o-text);font-size:13px;line-height:1.38;overflow-wrap:anywhere}
.op-msg b{color:var(--o-brand-text);font-size:11px}
.op-msg.mine{align-self:flex-end;border-radius:12px 12px 4px 12px;border-color:color-mix(in srgb,var(--o-brand) 35%,transparent);background:var(--o-brand-soft)}
.op-msg.mine b{color:var(--o-muted)}
.op-chat-form{display:flex;gap:8px;padding:8px;border-top:1px solid var(--o-line)}
.op-input{flex:1;min-width:0;height:38px;padding:0 12px;border-radius:var(--o-radius-sm);border:1px solid var(--o-line-strong);background:var(--o-bg-2);color:var(--o-text-strong);font:inherit;font-size:14px;transition:border-color .15s,box-shadow .15s}
.op-input::placeholder{color:var(--o-faint)}
.orbi-play .op-input:focus,.orbi-play .op-input:focus-visible{outline:none;border-color:var(--o-brand);box-shadow:0 0 0 3px var(--o-brand-soft)}
.op-chat-form .op-btn{min-height:38px}

/* campo minado: orbi-mines.css */

/* estados de carregamento e erro */
.op-state{display:grid;justify-items:center;gap:14px;padding:60px 20px;color:var(--o-muted);text-align:center}

/* avisos flutuantes (convites e partidas fora do Play) */
.op-pops{position:fixed;right:20px;bottom:20px;z-index:80;display:grid;gap:10px;width:min(390px,calc(100vw - 32px))}
.op-pop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:var(--o-radius);border:1px solid color-mix(in srgb,var(--o-brand) 50%,transparent);background:var(--o-surface);box-shadow:var(--o-shadow);color:var(--o-text);animation:op-pop-in .25s ease-out}
.op-pop-img{width:44px;height:44px}
.op-pop-body{display:grid;gap:2px;min-width:0;font-size:13px}
.op-pop-body strong{color:var(--o-text-strong);font-size:14px}
.op-pop-body span{color:var(--o-muted)}
.op-pop-actions{display:flex;align-items:center;gap:4px}
.op-pop-x{appearance:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--o-muted);cursor:pointer}
.op-pop-x:hover{background:var(--o-hover);color:var(--o-text-strong)}
.op-pops .op-btn{font-family:inherit}
@keyframes op-pop-in{from{opacity:0;transform:translateY(10px)}}

/* larguras menores (pelo tamanho da área do Play, não da janela) */
@container oplay (max-width:900px){
  .op-lobby{grid-template-columns:minmax(0,1fr)}
}
@container oplay (max-width:760px){
  .op-grid{grid-template-columns:minmax(0,1fr)}
  .op-brand span{display:none}
}
@container oplay (max-width:620px){
  .op-top{gap:8px;margin-bottom:12px}
  .op-brand{display:none}
  .op-tabs{flex:1}
  .op-tabs [role=tab]{height:34px;padding:0 13px;font-size:13px}
  .op-icon-btn{width:40px;height:40px}
  .op-table .hide-sm{display:none}
  .op-clock{min-width:86px;font-size:22px;padding:8px 10px}
  .op-card{padding:16px}
  .op-invite .op-row{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .op-pop,.op-clock.run.low,.op-live-dot,.op-challenge{animation:none!important}
  .orbi-play *{transition:none!important}
}

/* ---------- 1.3: assistir partidas, partidas em andamento, ranking por servidor e desafio pela sala de voz ---------- */
.op-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.op-live .op-list li{padding:9px 0}
.op-live .op-grow b.op-vs{display:flex;gap:.4em;min-width:0}
.op-live .op-grow b.op-vs>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@container oplay (max-width:620px){.op-live .op-grow b.op-vs{display:grid;gap:0}}
.op-live-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--o-success);box-shadow:0 0 0 0 color-mix(in srgb,var(--o-success) 55%,transparent);animation:op-live 1.8s ease-out infinite}
@keyframes op-live{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
.op-live .op-btn .op-ico{margin-left:-2px}
.op-pill.eye{display:inline-flex;align-items:center;gap:5px}
.op-banner-eye{display:inline-flex;align-items:center;gap:8px}
.op-spectate[data-layout=mid]{grid-template-rows:auto minmax(96px,1fr) auto auto;grid-template-areas:"board opp" "board moves" "board actions" "board me"}
.op-spectate[data-layout=stack]{grid-template-areas:"opp" "board" "me" "actions" "moves"}
.op-spec-ava{width:44px;height:44px;margin:0 2px 0 4px;font-size:17px}
.op-game[data-short] .op-spec-ava{width:38px;height:38px;font-size:15px}
.op-sq.ro{cursor:default}

/* botão no lugar da pessoa na sala de voz */
.op-seat-btn{--sz:30px;appearance:none;display:inline-flex;align-items:center;gap:6px;margin-top:7px;min-height:var(--sz);padding:3px 11px 3px 7px;border-radius:999px;border:1px solid var(--o-line-strong);background:var(--o-surface-2);color:var(--o-text-strong);font-family:inherit;font-size:12px;font-weight:700;line-height:1.1;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s}
.op-seat-btn:hover{background:var(--o-brand-soft);border-color:color-mix(in srgb,var(--o-brand) 60%,transparent)}
.op-seat-btn:focus-visible{outline:2px solid var(--o-brand);outline-offset:2px}
.op-seat-btn .op-knight,.ctx-item .op-knight{flex:none;display:block}
/* Lugares estreitos (várias pessoas na sala): só o ícone do cavalo, com o nome acessível e a dica "Desafiar no xadrez". */
.seat-info{container:opseat/inline-size}
@container opseat (max-width:158px){
  .op-seat-btn{position:relative;justify-content:center;width:var(--sz);height:var(--sz);padding:0}
  .op-seat-btn span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
.modal-foot.op-has-chess{flex-wrap:wrap;align-items:center;justify-content:center}
.op-profile-chess{flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 0 2px}
.op-profile-chess>span{color:var(--o-muted);font-size:13px}

/* janelinha "Desafiar": tempo e cor */
.op-challenge{position:fixed;z-index:95;display:grid;gap:14px;width:min(340px,calc(100vw - 24px));padding:16px;border-radius:var(--o-radius);border:1px solid var(--o-line-strong);background:var(--o-surface);box-shadow:var(--o-shadow);color:var(--o-text);animation:op-pop-in .18s ease-out}
.op-challenge.sheet{left:12px;right:12px;bottom:12px;top:auto;width:auto}
.op-challenge button{font-family:inherit}
.op-challenge :focus-visible{outline:2px solid var(--o-brand);outline-offset:2px}
.op-challenge .op-field{margin:0}
.op-ch-title{font-size:15px;color:var(--o-text-strong)}
@media (pointer:coarse){.op-seat-btn{--sz:40px}}
@media (prefers-reduced-motion:reduce){.op-seat-btn{transition:none}}

/* ---------- 1.7: redesign do Orbi Play ----------
   Tokens: no tema escuro, a paleta própria do Orbi Play (superfícies #17181C/#1D1F24, bordas #2B2D33, texto #F4F4F5/#A1A1AA) por cima dos --o-*,
   então xadrez, campo minado e Orbit herdam juntos. Âmbar só em ação importante e item selecionado. O tema claro continua com os --o-* dele.
   Escala: título da página 28px, seção 16px, texto 13-14px, legenda 12px, números 22-28px. Navegação 54px, cartão 18px de respiro, raio 12px, botão 38px. */
html:not([data-theme=light]) .orbi-play{--o-bg:#101114;--o-bg-2:#141519;--o-surface:#17181C;--o-surface-2:#1D1F24;--o-surface-3:#25272D;--o-hover:#23252B;--o-active:#2B2D33;--o-line:#2B2D33;--o-line-strong:#383B43;--o-text:#E4E4E7;--o-text-strong:#F4F4F5;--o-muted:#A1A1AA;--o-faint:#8B8B94}
html[data-theme=light] .orbi-play{--o-hover:var(--o-surface-3)}
.orbi-play{--o-radius:12px;--o-radius-sm:10px;--op-gap:14px;--op-nav:54px}

/* navegação: mesma posição e tamanho em todas as páginas */
.op-top{height:var(--op-nav);gap:20px;margin:0 0 22px;padding:0 2px;border-bottom:1px solid var(--o-line)}
.op-brand{font-size:15px;font-weight:750}
.op-brand img{width:24px;height:24px}
.op-tabs{flex:1;align-self:stretch;gap:2px;padding:0;background:none;border:0;border-radius:0}
.op-tabs [role=tab]{position:relative;height:100%;padding:0 14px;border-radius:0;background:none;font-size:14px;font-weight:600}
.op-tabs [role=tab]:hover{background:none;color:var(--o-text-strong)}
.op-tabs [role=tab][aria-selected=true]{background:none;color:var(--o-text-strong)}
.op-tabs [role=tab][aria-selected=true]::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px;background:var(--o-brand)}
.op-tabs [aria-selected=true] .op-tab-badge{background:var(--o-brand);color:var(--o-brand-ink)}
.op-icon-btn{width:38px;height:38px;border-radius:var(--o-radius-sm)}

/* página, cabeçalho e cartões */
.op-page{gap:16px}
.op-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;min-height:40px}
.op-head h1{font-size:28px;font-weight:750;line-height:1.15;letter-spacing:-.02em;color:var(--o-text-strong)}
.op-head-side{display:flex;flex-wrap:wrap;gap:8px}
.op-card{padding:18px;border-radius:var(--o-radius)}
.op-card-title{margin-bottom:14px;min-height:24px}
.op-card-title h2,.op-sec-h{font-size:16px;font-weight:700;letter-spacing:-.005em;color:var(--o-text-strong)}
.op-sec-h{margin:0 0 12px}
.op-count{font-size:12px;font-variant-numeric:tabular-nums}
.op-kicker{display:block;color:var(--o-brand-text);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.op-empty-line{font-size:13px}
.op-link{padding:2px 0;color:var(--o-muted);font-size:13px;font-weight:600}
.op-link:hover{color:var(--o-text-strong);text-decoration:none}

/* botões */
.op-btn{min-height:38px;padding:0 14px;border-radius:var(--o-radius-sm);font-size:13.5px;font-weight:650}
.op-btn:hover:not(:disabled){border-color:var(--o-line-strong);background:var(--o-hover)}
.op-btn.primary:hover:not(:disabled){background:var(--o-brand-hover)}
.op-btn.sm{min-height:32px;padding:0 12px;font-size:13px}

/* número com legenda */
.op-num{display:grid;align-content:start;gap:4px;min-width:0}
.op-num>span{font-size:12px;font-weight:550;color:var(--o-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-num>strong{font-size:22px;font-weight:750;line-height:1.1;letter-spacing:-.02em;color:var(--o-text-strong);font-variant-numeric:tabular-nums}
.op-num.accent>strong,.op-num.hero>strong{color:var(--o-brand-text)}
.op-num.hero>strong{font-size:28px}
.op-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:14px 16px}

/* avisos: sem degradê, só a borda */
.op-callout{padding:12px 16px}
.op-callout.hot{background:var(--o-surface);border-color:color-mix(in srgb,var(--o-brand) 50%,transparent)}
.op-callout strong{font-size:14px}

/* listas de pessoas */
.op-list li{padding:10px 0}
.op-avatar{width:32px;height:32px;border:1px solid var(--o-line-strong);background:var(--o-surface-3);color:var(--o-text-strong);font-size:13px;font-weight:700}
.op-grow{font-size:14px;font-weight:600}
.op-presence{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--o-muted)}
.op-presence::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--o-success)}
.op-presence.busy::before{background:var(--o-brand)}
.op-result{min-width:68px;padding:3px 10px}
.op-last{display:flex;align-items:center;gap:12px;min-width:0}

/* visão geral */
.op-gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--op-gap)}
.op-gcard{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:16px 12px;min-width:0;padding:18px;border:1px solid var(--o-line);border-radius:var(--o-radius);background:var(--o-surface);color:var(--o-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.op-gcard:hover{border-color:var(--o-line-strong);background:var(--o-surface-2)}
.op-gcard{grid-template-areas:"name name" "num cta"}
.op-gcard>.op-num{grid-area:num}
.op-gcard-cta{grid-area:cta}
.op-gcard-name{grid-area:name;font-size:16px;font-weight:700;color:var(--o-text-strong)}
.op-gcard-cta{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:var(--o-radius-sm);background:var(--o-brand);color:var(--o-brand-ink);font-size:13.5px;font-weight:700}
.op-gcard:hover .op-gcard-cta{background:var(--o-brand-hover)}
.op-ov-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--op-gap);align-items:start}
.op-ov-online{grid-row:span 2}

/* xadrez: nova partida */
.op-lobby{grid-template-columns:minmax(0,1.25fr) minmax(320px,1fr)}
.op-field{gap:8px;margin-bottom:18px}
.op-label{font-size:12px;font-weight:600;color:var(--o-muted)}
.op-seg{display:flex;flex-wrap:wrap;justify-self:start;width:fit-content;max-width:100%;gap:2px;padding:3px;border:1px solid var(--o-line);border-radius:var(--o-radius-sm);background:var(--o-surface-2)}
.op-seg .op-chip{height:32px;padding:0 12px;border:0;border-radius:7px;background:none;box-shadow:none;color:var(--o-muted);font-size:13px;font-weight:600}
.op-seg .op-chip:hover{color:var(--o-text-strong);background:var(--o-hover)}
.op-seg .op-chip[aria-checked=true],.op-seg .op-chip[aria-selected=true]{background:var(--o-brand-soft);color:var(--o-brand-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--o-brand) 55%,transparent)}
.op-pick{display:grid;gap:6px;max-height:320px;overflow-y:auto}
.op-pick-row{appearance:none;display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:8px 12px;border:1px solid var(--o-line);border-radius:var(--o-radius-sm);background:var(--o-surface-2);color:var(--o-text);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.op-pick-row:hover{border-color:var(--o-line-strong)}
.op-pick-row[aria-checked=true]{border-color:color-mix(in srgb,var(--o-brand) 65%,transparent);background:var(--o-brand-soft)}
.op-radio{flex:none;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--o-line-strong)}
.op-pick-row[aria-checked=true] .op-radio{border:5px solid var(--o-brand)}
.op-setup-foot{padding-top:16px}
.op-setup-foot p{font-size:13px}
.op-invite{grid-template-columns:auto minmax(0,1fr);padding:12px}
.op-invite.in{background:var(--o-surface-2);border-color:color-mix(in srgb,var(--o-brand) 45%,transparent)}
.op-invite-body strong{font-size:14px}
.op-invite-body span{font-size:12.5px}
.op-perf .op-nums{grid-template-columns:repeat(6,minmax(0,1fr));gap:0}
.op-perf .op-num{padding:0 16px;border-left:1px solid var(--o-line)}
.op-perf .op-num:first-child{padding-left:0;border-left:0}

/* ranking */
.op-seg-tabs{background:var(--o-surface)}
.op-seg-tabs .op-chip{height:34px;padding:0 16px;font-size:13.5px}
.op-rank-card{padding:6px 18px 8px}
.op-rank-card>.op-empty-line{padding:12px 0}
.op-rank th{padding:12px 12px 10px;font-size:12px;font-weight:600}
.op-rank td{padding:11px 12px}
.op-rank .op-pos-cell{width:48px;padding-left:0}
.op-table td.strong{color:var(--o-text-strong);font-weight:700}
.op-who{color:var(--o-text-strong);font-weight:600;white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis}
.op-pos{background:none;color:var(--o-muted)}
.op-pos.p1,.op-pos.p2,.op-pos.p3{background:var(--o-surface-3);color:var(--o-text-strong)}
.op-pos.p1{color:var(--o-brand-text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--o-brand) 55%,transparent)}

/* Orbizinho: o seu à esquerda (30%), a coleção à direita (70%) */
.op-orbi-grid{display:grid;grid-template-columns:minmax(260px,3fr) minmax(0,7fr);gap:var(--op-gap);align-items:start}
.op-orbi-me{display:grid;justify-items:center;text-align:center}
.op-orbi-me .op-card-title{justify-self:stretch;text-align:left}
.op-orbi-stage{display:grid;place-items:center;width:100%;max-width:280px;aspect-ratio:1;border-radius:var(--o-radius);background:var(--o-surface-2)}
.op-orbi-name{display:grid;justify-items:center;gap:8px;margin-top:14px}
.op-orbi-name strong{font-size:16px;color:var(--o-text-strong)}
.op-orbi-note{margin-top:10px!important;font-size:12px;line-height:1.45}
.op-skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.op-skin{display:grid;grid-template-rows:auto auto 1fr auto;justify-items:center;gap:6px;min-width:0;padding:14px 12px;border:1px solid var(--o-line);border-radius:var(--o-radius);background:var(--o-surface-2);text-align:center}
.op-skin.on{border-color:color-mix(in srgb,var(--o-brand) 60%,transparent)}
.op-skin-art{display:grid;place-items:center;width:112px;height:112px}
.op-skin.locked .op-skin-art{filter:saturate(.2) brightness(.72);opacity:.8}
.op-skin-name{font-size:14px;color:var(--o-text-strong)}
.op-skin-sub{align-self:start;font-size:12px;line-height:1.4;color:var(--o-muted)}
.op-skin-status{margin-top:4px}
.op-skin-lock,.op-skin-on{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:650}
.op-skin-lock{background:var(--o-surface-3);color:var(--o-muted)}
.op-skin-on{background:var(--o-brand-soft);color:var(--o-brand-text)}
.op-skin.soon{grid-template-rows:auto auto;align-content:center;border-style:dashed;background:none}
.op-skin.soon .op-skin-art{width:76px;height:76px;margin:18px 0;border-radius:50%;background:var(--o-surface-2)}
.op-skin.soon .op-skin-name{color:var(--o-muted);font-weight:600}

/* faixa curta (Orbit) */
.op-strip{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:12px 18px;border:1px solid var(--o-line);border-radius:var(--o-radius);background:var(--o-surface)}

/* telas médias e celular: menos colunas, nada rola de lado (as tabelas rolam dentro do cartão) */
@container oplay (max-width:820px){
  .op-perf .op-nums{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 0}
  .op-perf .op-num:nth-child(4){padding-left:0;border-left:0}
}
@container oplay (max-width:900px){
  .op-ov-grid,.op-orbi-grid,.op-lobby{grid-template-columns:minmax(0,1fr)}
  .op-ov-online{grid-row:auto}
  .op-orbi-stage{max-width:220px}
}
@container oplay (max-width:700px){
  .op-gcards{grid-template-columns:minmax(0,1fr)}
  .op-gcard{grid-template-areas:"name cta" "num cta";align-items:center;gap:6px 12px;padding:14px 16px}
  .op-gcard>.op-num{grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:8px}
  .op-gcard>.op-num>strong{font-size:20px}
}
@container oplay (max-width:620px){
  .op-top{height:48px;margin-bottom:16px}
  .op-tabs [role=tab]{height:100%;padding:0 12px}
  .op-head h1{font-size:24px}
  .op-card{padding:16px}
  .op-rank-card{padding:4px 14px 6px}
  .op-perf .op-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-perf .op-num,.op-perf .op-num:nth-child(4){padding:0 12px;border-left:1px solid var(--o-line)}
  .op-perf .op-num:nth-child(odd){padding-left:0;border-left:0}
  .op-skins{grid-template-columns:repeat(2,minmax(0,1fr))}
  .op-skin-art{width:96px;height:96px}
  .op-skin-art .orbi-mascot{--m-size:96px!important;--m-box:96px!important}
  .op-last{flex-wrap:wrap}
}
.op-table tr.me td{background:color-mix(in srgb,var(--o-brand) 8%,transparent)}