/* Match polish: turn cues, tactile hand cards, changing counters and the result banner. polish.js sets the body data attributes. */
/* Dragging and tapping never select board text or open the touch callout. */
#board-view,.topbar{-webkit-user-select:none;user-select:none}
#board-view :is(input,textarea),#board-view select{-webkit-user-select:auto;user-select:auto}
#board-view [data-match-piece],#board-view img{-webkit-touch-callout:none;-webkit-user-drag:none}

/* Whose turn: the phase pill takes the active side's colour. */
.phase-pill{transition:border-color .3s,box-shadow .3s,background .3s}
body[data-turn=you] .phase-pill{border-color:#ffc96d;box-shadow:0 0 0 1px #ffc96d33,0 0 22px #ffb84030,0 2px 10px #0003;background:#1d2b2ccf}
body[data-turn=ai] .phase-pill{border-color:#7fd8d2a6;box-shadow:0 0 0 1px #7fd8d222,0 2px 10px #0003}
body[data-turn=you] .phase-pill>strong{color:#ffdc96}

/* The amber button breathes while the decision is yours. */
@keyframes your-move{0%,100%{box-shadow:0 3px 9px #06162344,0 0 0 0 #ffc24d00}50%{box-shadow:0 3px 9px #06162344,0 0 0 5px #ffc24d2e,0 0 26px #ffb33a44}}
body[data-priority=you]:not(.is-dragging) #advance:enabled{animation:your-move 2.6s ease-in-out infinite}

/* Hand cards lift toward the player; the hand keeps room above so the lift is never clipped. */
.hand{padding-top:8px!important}
.hand-card{transition:transform .18s cubic-bezier(.2,.8,.3,1.2),filter .18s}
.hand-card:hover,.hand-card:focus-visible{transform:translateY(-6px)}
.hand-card:active{transform:translateY(-2px) scale(.98)}
body.is-dragging .hand-card:not(.drag-origin){transform:none}
.hand-card .piece--hand{transition:border-color .18s,box-shadow .18s}
.hand-card:hover .piece--hand{box-shadow:inset 0 0 0 1px #ffcb6955,0 10px 22px #02101b88,0 0 16px #ffbf4533}

/* Counters pop when they change: gains glow gold, losses flash red. */
@keyframes count-up{0%{transform:scale(1)}35%{transform:scale(1.28);color:#ffe19a;text-shadow:0 0 14px #ffc24d}100%{transform:scale(1)}}
@keyframes count-down{0%{transform:scale(1)}35%{transform:scale(1.22);color:#ff9d8a;text-shadow:0 0 14px #ff5d47aa}100%{transform:scale(1)}}
[data-bump]{display:inline-block}
[data-bump=up]{animation:count-up .6s ease-out}
[data-bump=down]{animation:count-down .6s ease-out}

/* Drag guidance appears under the toolbar, clear of the hand the drag starts from. */
.drag-feedback{bottom:auto!important;top:calc(132px * var(--app-zoom,1))}
@media(max-width:600px) and (orientation:portrait){.drag-feedback{top:calc(108px * var(--app-zoom,1))}}
@media(max-height:520px) and (orientation:landscape){.drag-feedback{top:calc(94px * var(--app-zoom,1))}}

/* The battlefield note sits inside its field instead of under the turn banner. */
.own-battlefield .zone-heading>span:not(:empty){top:4px!important;z-index:4}

/* Result banner over the final board, which dims behind it. */
body[data-result] .combat-lines{opacity:0;transition:opacity .3s}
@keyframes result-in{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.result-banner{position:absolute;z-index:30;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));padding:28px 30px 24px;text-align:center;border-radius:18px;border:1px solid #ffd27a88;background:radial-gradient(ellipse at 50% 0,#ffbd4530,transparent 70%),#112530f2;box-shadow:0 24px 80px #020b14d9,0 0 0 1px #ffd27a22 inset,0 0 0 200vmax #06121d8c;animation:result-in .45s cubic-bezier(.2,.8,.3,1.1) both}
.result-banner[data-result=loss]{border-color:#8fc6cf77;background:radial-gradient(ellipse at 50% 0,#69d6d61f,transparent 70%),#112530f2}
.result-banner .eyebrow{letter-spacing:.08em;margin-bottom:6px}
.result-banner h2{margin:0 0 8px;font-size:54px;letter-spacing:-2px;line-height:1;background:linear-gradient(180deg,#fff3cf,#ffbe4d);-webkit-background-clip:text;background-clip:text;color:transparent}
.result-banner[data-result=loss] h2{background:linear-gradient(180deg,#eaf6f4,#8fd2d3);-webkit-background-clip:text;background-clip:text}
.result-banner-reason{color:#c7dadd;font-size:14px;margin:0 0 20px;min-height:1em}
.result-banner-actions{display:flex;gap:10px}
.result-banner-actions .primary{margin:0}
.result-banner-actions .quiet{flex:none}
@media(max-width:600px){.result-banner{padding:22px 18px 18px}.result-banner h2{font-size:42px}.result-banner-actions{flex-direction:column}}

@media(prefers-reduced-motion:reduce){
  body[data-priority=you] #advance:enabled,[data-bump],.result-banner{animation:none}
  .hand-card,.hand-card:hover,.hand-card:focus-visible,.hand-card:active{transform:none;transition:none}
}
/* A drawn match: neither gold nor teal. */
.result-banner[data-result=draw]{border-color:#c9c3b077;background:radial-gradient(ellipse at 50% 0,#d8d0b81a,transparent 70%),#15232cf2}
.result-banner[data-result=draw] h2{background:linear-gradient(180deg,#f3efe2,#bdb59c);-webkit-background-clip:text;background-clip:text}