/* Shared match presentation for Bot Fight, Daily Challenge and Campaign. */

.match-shell-active{background:#07111c}
.match-shell-active .site-header,.match-shell-active .site-footer{display:none!important}
.match-shell-active.play-page .play-intro,.match-shell-active.play-page #gameConfig{display:none!important}
.match-shell-active[data-daily-root] .daily-hero,.match-shell-active[data-daily-root] .daily-grid{display:none!important}
.match-shell-active .site-main{padding-top:0!important}

/* Reserve enough vertical room for the common HUD plus the compact Bot restart control. */
.unified-match-shell:not([hidden]){--match-shell-board-size:min(900px,calc(100vh - 245px));display:block!important;width:min(900px,calc(100% - 28px));margin:0 auto;padding:12px 0 34px}
@supports (height:100dvh){.unified-match-shell:not([hidden]){--match-shell-board-size:min(900px,calc(100dvh - 245px))}}
#gameApp.unified-match-shell:not([hidden]){display:block!important}
#gameApp.unified-match-shell .game-card{width:100%;padding:0;border:0;background:transparent;box-shadow:none}

.match-shell-topbar{position:relative!important;display:grid!important;grid-template-columns:minmax(110px,1fr) minmax(220px,auto) minmax(110px,1fr)!important;align-items:start!important;min-height:94px!important;margin:0 0 10px!important;padding:6px 4px!important;border:0!important;background:transparent!important;box-shadow:none!important}
.match-shell-back{grid-column:1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:#9fc3dc;font:inherit;font-size:12px;font-weight:850;text-decoration:none;cursor:pointer}
.match-shell-back:hover{background:rgba(255,255,255,.05);color:#eff8ff}
.match-shell-center{grid-column:2;text-align:center;min-width:220px}
.match-shell-title{margin:0;color:#f2f8fc;font-size:18px;font-weight:950;letter-spacing:.11em;line-height:1.15;text-transform:uppercase;white-space:nowrap}
.match-shell-score{margin-top:7px;color:#eef8ff;font-size:16px;font-weight:950;font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.match-shell-meta{display:flex;justify-content:center;align-items:center;gap:10px;min-height:28px;margin-top:4px}
.match-shell-limit{color:#9fc3dc;font-size:12px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:.04em;white-space:nowrap}
.match-shell-timer{min-width:52px;padding:4px 8px;border:1px solid rgba(255,208,106,.32);border-radius:999px;background:rgba(255,208,106,.09);color:#ffd06a;font-size:18px;line-height:1;font-weight:950;font-variant-numeric:tabular-nums;white-space:nowrap}
.match-shell-timer.is-warning{box-shadow:0 0 18px rgba(255,208,106,.16)}
.match-shell-timer.is-critical{transform:scale(1.06);box-shadow:0 0 22px rgba(255,112,112,.24);color:#ff9292;border-color:rgba(255,112,112,.42)}
.match-shell-actions{grid-column:3;justify-self:end;display:flex;align-items:center;gap:8px}
.match-shell-sound-toggle{display:inline-grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;margin:0!important;padding:0!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:12px!important;background:rgba(255,255,255,.045)!important;color:#eef8ff!important;font:inherit!important;font-size:18px!important;cursor:pointer!important}
.match-shell-sound-toggle:hover{background:rgba(255,255,255,.08)!important}

.match-shell-bot .brand,.match-shell-bot .status,.match-shell-bot .legend{display:none!important}
.match-shell-bot .side{display:flex!important;flex-direction:row;justify-content:center;align-items:center;gap:8px;margin:10px auto 0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;width:auto!important}
.match-shell-bot .side .section{display:none!important}
.match-shell-bot .side .sound-row{display:none!important}
.match-shell-bot #restart{display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;width:auto!important;margin:0!important;padding:8px 12px!important}
.match-shell-daily .daily-game-head{display:none!important}
.match-shell-daily .daily-side{display:contents!important}
.match-shell-daily .daily-side>:not(.daily-result){display:none!important}
.match-shell-daily .daily-result{margin-top:14px}
.match-shell-campaign .campaign-play-panel{display:none!important}
.match-shell-daily .daily-play-layout,.match-shell-campaign .campaign-play-layout{display:block!important}
.match-shell-campaign .campaign-play-content{padding-top:0!important}
.match-shell-campaign .campaign-play-boosters{margin-bottom:10px}

.match-shell-board-wrap{position:relative!important;margin-inline:auto!important;isolation:isolate}
.match-shell-bot .match-shell-board-wrap,.match-shell-campaign .match-shell-board-wrap{width:min(100%,var(--match-shell-board-size))!important}
.match-shell-daily .match-shell-board-wrap{width:min(100%,calc(var(--match-shell-board-size) + 22px))!important;padding:10px!important}
.match-shell-board{width:100%!important;max-width:none!important;aspect-ratio:1/1!important;border-radius:18px;overflow:hidden;box-shadow:0 18px 52px rgba(0,0,0,.22),0 0 0 1px rgba(119,188,255,.06)}

/* The equipped avatar is one persistent overlay that follows the actual blue pawn cell. */
.match-shell-board-avatar{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 8px 18px rgba(0,0,0,.32));transition:left .18s cubic-bezier(.2,.8,.2,1),top .18s cubic-bezier(.2,.8,.2,1)}
.match-shell-avatar{position:relative;width:var(--match-avatar-cell-size,58px);height:var(--match-avatar-cell-size,58px);display:grid;place-items:center;overflow:hidden;border:4px solid #5ea9dc;border-radius:50%;background:radial-gradient(circle at 35% 25%,#173653,#0a1b2a 72%);box-shadow:0 0 0 3px rgba(5,12,20,.78);color:#eef8ff;font-size:20px;font-weight:950;isolation:isolate;transition:width .16s,height .16s}
.match-shell-avatar img{width:100%;height:100%;display:block;object-fit:cover;border-radius:inherit}
.match-shell-avatar-initial{line-height:1}
.match-shell-avatar[data-frame="frame-founder"]{border-color:#ffd06a;box-shadow:0 0 18px rgba(255,208,106,.42),0 0 0 3px #291d08}
.match-shell-avatar[data-frame="frame-unbeatable"]{border-color:#b790ff;box-shadow:0 0 19px rgba(183,144,255,.52),0 0 0 3px #170b2b}
.match-shell-avatar[data-frame="frame-primal-forces"],.match-shell-avatar[data-frame="frame-campaign-forest-guardians"]{border-color:#b9df82;box-shadow:0 0 18px rgba(185,223,130,.42),0 0 0 3px #102116}
.match-shell-board-avatar.is-moving .match-shell-avatar{animation:match-shell-move-pop .24s cubic-bezier(.2,.8,.2,1)}

/* Match results must cover every live board marker, including the profile avatar. */
.match-shell-bot .overlay.show{z-index:30}

/* Replace the legacy blue pawn with the player's avatar while retaining it in the DOM as the state anchor. */
.unified-match-shell .pawn.blue,.unified-match-shell .daily-pawn.blue-pawn{opacity:0!important}
.unified-match-shell .daily-pawn.red-pawn.move-pop,.unified-match-shell .pawn.red.move-pop{animation:match-shell-move-pop .24s cubic-bezier(.2,.8,.2,1)}
.match-shell-board.capture-burst{animation:match-shell-capture-burst .34s ease-out}

@keyframes match-shell-move-pop{0%{transform:scale(.72)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes match-shell-capture-burst{0%{filter:brightness(1)}45%{filter:brightness(1.16)}100%{filter:brightness(1)}}

/* Keep the legacy Unbeatable timer source available to the shared HUD while its row stays hidden. */
.unbeatable-active #turnPill{font-size:22px!important}

@media(max-width:620px){
  .unified-match-shell:not([hidden]){--match-shell-board-size:min(900px,calc(100vh - 205px));width:calc(100% - 12px);padding-top:6px}
  @supports (height:100dvh){.unified-match-shell:not([hidden]){--match-shell-board-size:min(900px,calc(100dvh - 205px))}}
  .match-shell-topbar{grid-template-columns:82px minmax(0,1fr) 82px!important;min-height:86px!important;margin-bottom:6px!important;padding:2px 0!important}
  .match-shell-back{min-width:44px;min-height:44px;padding:6px;font-size:10px}
  .match-shell-center{min-width:0}
  .match-shell-title{font-size:13px;letter-spacing:.07em}
  .match-shell-score{margin-top:5px;font-size:14px}
  .match-shell-meta{gap:6px;min-height:24px;margin-top:2px}
  .match-shell-limit{font-size:10px;letter-spacing:0}
  .match-shell-timer{min-width:46px;padding:3px 6px;font-size:16px}
  .match-shell-sound-toggle{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
  .match-shell-daily .match-shell-board-wrap{width:min(100%,calc(var(--match-shell-board-size) + 10px))!important;padding:4px!important}
  .match-shell-avatar{border-width:3px;font-size:16px;box-shadow:0 0 0 2px rgba(5,12,20,.78)}
}

@media(max-width:390px){
  .match-shell-topbar{grid-template-columns:76px 1fr 76px!important}
  .match-shell-title{font-size:11px;letter-spacing:.05em}
  .match-shell-score{font-size:13px}
  .match-shell-back{max-width:76px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}