/* Raids: windows in sequence (raid → difficulty and ticket → stage) and the live stage.
   Bestiary Arena skin only: pf-panel/pf-head sections, the ba-outcome window for the
   confirmation and the result, 1px #111 borders with the #6a6a6a bevel, and colours the
   rest of the game already uses. */
.raid-modal{width:min(880px,96vw);max-height:92dvh;padding:0;overflow:hidden}
/* ba.css sizes every dialog.window to 420 px: the raid windows need the stronger selector. */
dialog.window.raid-modal{width:min(760px,calc(100vw - 12px));max-height:calc(100dvh - 12px)}
dialog.window.raid-modal.raid-modal--config{width:min(880px,calc(100vw - 12px))}
dialog.window.raid-modal.raid-modal--stage{width:min(1200px,calc(100vw - 8px));height:calc(100dvh - 8px);max-height:none}
.raid-modal #raid-body{padding:6px;overflow:auto;max-height:calc(100dvh - 40px);box-sizing:border-box}
.raid-modal--stage #raid-body{height:calc(100% - 4px);max-height:none}
.raid-modal #raid-message{min-height:14px;margin:4px 0;color:#e4ca78}
.raid-modal #raid-message:empty{display:none}
.raid-modal .pf-tabs{flex-wrap:wrap}
.raid-modal .pf-tabs button{flex:1 1 auto}
.raid-modal .pf-head small{margin-left:auto}
.raid-modal button.primary:disabled{filter:grayscale(1)}
.raid-modal button.active,.raid-modal button[aria-pressed="true"]{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.raid-panel-body{padding:6px}
.raid-footer{display:flex;justify-content:flex-end;align-items:center;gap:4px;padding-top:4px;flex-wrap:wrap}
.raid-config-button{margin-right:auto}
.raid-setup-head{display:flex;align-items:center;gap:6px;margin-bottom:6px;color:#fff}

/* Tickets: the client's scroll in an item slot, the tier colour and a native DAT effect. */
.raid-ticket{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px;min-height:66px;overflow:hidden;isolation:isolate;border:1px solid var(--ticket-color);background:#262626;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a;color:var(--ticket-color)}
.raid-ticket img{width:32px;height:32px;image-rendering:pixelated;z-index:1}
.raid-ticket small{z-index:3;color:var(--ticket-color);text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000}
.raid-ticket i{position:absolute;right:4px;top:1px;z-index:3;font-style:normal}
.raid-ticket .raid-fx{position:absolute;left:50%;top:50%;z-index:2;width:64px;height:64px;margin:-36px 0 0 -32px;pointer-events:none;image-rendering:pixelated}
.raid-ticket-count{position:absolute;left:2px;top:0;z-index:3;font:bold 11px/12px 'Tibia Pixel',Verdana,sans-serif;color:#fff;text-shadow:1px 0 #000,-1px 0 #000,0 1px #000,0 -1px #000,1px 1px #000,-1px -1px #000}
.raid-ticket.is-selected{box-shadow:inset 0 0 0 1px var(--ticket-color),inset 0 0 8px var(--ticket-color)}
.raid-ticket.is-empty{filter:grayscale(.9) brightness(.55)}
.raid-ticket[class*="ticket-effect-"]:not(.ticket-effect-none)::after{content:"";position:absolute;inset:-100%;z-index:0;background:linear-gradient(110deg,transparent 40%,var(--ticket-color) 49%,transparent 58%);opacity:.18;animation:ticket-shine calc(var(--ticket-duration) + 2s) ease-in-out infinite;pointer-events:none}
.ticket-effect-diamond i,.ticket-effect-platinum i{animation:ticket-spark 2s alternate infinite}
.raid-wallet-items{display:flex;flex-wrap:wrap;gap:4px}
.raid-wallet .raid-ticket{min-width:56px;min-height:60px}
.raid-wallet .pf-note{margin:4px 0 0}
.raid-tickets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.raid-tickets>button{display:flex;flex-direction:column;align-items:center;gap:3px;height:auto;padding:5px;white-space:normal}
.raid-tickets>button.is-off{opacity:.55}
.raid-tickets small{color:#a9a9a9}
.raid-tickets .raid-ticket-balance{color:#fff}
.raid-convert{margin-top:6px;color:#c0c0c0}

/* Raid cards and difficulties are client buttons; the chosen one has the gold outline. */
.raid-cards{display:grid;gap:4px}
.raid-card{display:flex;align-items:center;gap:10px;height:auto;padding:8px;text-align:left;white-space:normal}
.raid-card .raid-card-art{position:static;flex:0 0 64px;width:64px;height:64px;image-rendering:pixelated}
.raid-card-text{display:grid;flex:1;gap:3px;min-width:0}
.raid-card-text strong{color:#fff;font-size:13px}
.raid-card-text small{color:#a9a9a9}
.raid-card-stages{display:flex;flex-wrap:wrap;gap:3px}
.raid-card-stages i{padding:1px 5px;font-style:normal;font-size:11px;color:#c0c0c0;background:#262626;border:1px solid #111;box-shadow:1px 1px #6a6a6a}
.raid-card-text em{font-style:normal;color:#e4ca78}
.raid-card-go{color:#e8c547;white-space:nowrap}
.raid-card.is-locked .raid-card-art{filter:grayscale(.8)}
.raid-difficulties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.raid-difficulties button{display:grid;gap:3px;height:auto;padding:6px 8px;text-align:left;white-space:normal}
.raid-difficulties strong{color:#fff}
.raid-difficulties small{color:#a9a9a9}
.raid-difficulties button.is-locked{opacity:.7}
.raid-difficulties .raid-diff-state{color:#e4ca78}
.raid-reward-summary{display:flex;align-items:center;gap:10px;padding:6px}
.raid-reward-summary>div{display:grid;gap:3px}
.raid-reward-summary strong{color:#fff}
.raid-reward-summary small{color:#a9a9a9}
.raid-reward-summary strong+small{display:block}
.raid-exchanges{margin:0 6px 6px;width:calc(100% - 12px)}
.raid-exchanges td:first-child{gap:4px}
.raid-exchanges td:last-child{width:auto}

/* The stage: header, stage tracker, the board and the side panels, like the main screen. */
.raid-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto auto minmax(0,1fr);gap:6px;height:100%}
.raid-stage-bar{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0}
.raid-stage-name{display:flex;align-items:center;gap:6px;min-width:0;margin-right:auto}
.raid-stage-name>span{display:grid}
.raid-stage-name strong{color:#fff}
.raid-stage-name small{color:#a9a9a9}
.raid-stage-bar .raid-ticket{min-width:52px;min-height:54px}
.raid-tracker{grid-column:1/-1;display:flex;gap:2px;margin:0;padding:0;list-style:none}
.raid-tracker li{display:flex;flex:1;align-items:center;gap:5px;min-width:0;min-height:22px;padding:2px 6px;font-size:11px;color:#a9a9a9;background:#2f2f2f;border:1px solid #111;box-shadow:inset 1px 1px #5e5e5e}
.raid-tracker li b{flex:0 0 auto;color:#c0c0c0}
.raid-tracker li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.raid-tracker li.is-active{color:#fff;border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.raid-tracker li.is-active b{color:#e8c547}
.raid-tracker li.is-done,.raid-tracker li.is-done b{color:#5fc85f}
.raid-board-wrap{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;background:#1c1c1c;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.raid-board-wrap canvas{display:block;width:auto;height:auto;max-width:100%;max-height:100%;image-rendering:pixelated;touch-action:none}
.raid-hud{position:absolute;left:6px;top:6px;max-width:calc(100% - 12px);padding:2px 6px;font-size:11px;color:#e4ca78;background:#1c1c1c;border:1px solid #0d0d0d;box-shadow:1px 1px #6a6a6a;pointer-events:none}
.raid-hud:empty{display:none}
.raid-banner{position:absolute;left:50%;top:14%;padding:6px 16px;white-space:nowrap;opacity:0;pointer-events:none;transform:translateX(-50%);font:bold 16px/18px 'Tibia Pixel',Verdana,sans-serif;color:#f4d35e;text-shadow:2px 0 #000,-2px 0 #000,0 2px #000,0 -2px #000;background:#1c1c1c;border:1px solid #0d0d0d;box-shadow:1px 1px #6a6a6a,inset 0 0 12px #000}
.raid-banner.show{animation:raid-banner 2s ease-out}
.raid-side{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0;overflow:auto}
.raid-side .pf-panel{margin:0}
.raid-team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px}
.raid-team-slot{display:grid;justify-items:center;gap:2px;min-width:0;padding:3px 2px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.raid-team-slot.is-selected{border-color:#c5b47c;box-shadow:inset 0 0 0 1px #c5b47c}
.raid-team-slot.is-empty{place-content:center;min-height:80px;color:#6f6f6f}
.raid-team-slot.is-empty span{text-align:center;font-size:18px}
.raid-team-slot>small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#c0c0c0}
.raid-stage .ba-slot{flex:0 0 48px;width:48px;height:48px;max-width:none}
.raid-team-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.raid-team-actions button{min-height:18px;height:18px;padding:0 4px;font-size:10px;line-height:12px}
.raid-team-tools{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:4px}
.raid-team-tools input,.raid-team-tools select{width:100%;min-width:0}
/* The collection fills its width: no empty column at the right. */
.raid-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));align-content:start;gap:3px;min-height:52px;max-height:30dvh;overflow:auto;padding:3px;background:#262626;border:1px solid #111;box-shadow:inset 1px 1px #000,1px 1px #6a6a6a}
.raid-stage .raid-roster .ba-slot{width:100%;height:auto;aspect-ratio:1;flex:none}
.raid-roster .pf-empty{grid-column:1/-1}
.raid-start-button{display:grid;flex:0 0 auto;gap:2px;width:100%;min-height:44px;font-size:14px}
.raid-start-button small{font-size:10px;opacity:.85}
.raid-controls{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.raid-speed{display:flex;gap:2px;margin-right:auto}
/* Live panels while the raid plays: life bars and damage, like the replay's damage meter. */
.raid-live{display:grid;gap:2px}
.raid-live-row{display:grid;grid-template-columns:minmax(0,1fr) 70px 44px;align-items:center;gap:6px;padding:1px 4px;background:#1c1c1c}
.raid-live-row:not(:has(.raid-hp)){grid-template-columns:minmax(0,1fr) auto}
.raid-live-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c0c0c0}
.raid-live-row b{text-align:right;color:#fff}
.raid-live-row.is-down span{color:#8a8a8a;text-decoration:line-through}
.raid-live .pf-note{margin:2px 0 0}
.raid-hp{position:relative;display:block;height:6px;background:#262626;border:1px solid #111}
.raid-hp i{position:absolute;left:0;top:0;bottom:0}
.raid-hp.is-ally i{background:#5fc85f}
.raid-hp.is-foe i{background:#e8756c}
/* Confirmation and result use the arena's result window (ba-outcome in ba.css). */
.raid-outcome .ba-outcome-window{width:min(360px,100%)}
.raid-outcome .ba-outcome-banner .raid-ticket{margin-bottom:4px}
.raid-outcome .pf-note{margin:0 0 6px;text-align:center}
.raid-outcome .ba-outcome-actions+.ba-outcome-actions{margin-top:4px}
.raid-loot{margin:0 0 6px}
.raid-loot td:first-child{gap:4px}
.raid-loot .raid-ticket{min-width:36px;min-height:40px}
.raid-loot .raid-ticket img{width:24px;height:24px}

/* Configuration: the account tab adds tickets for testing. */
.raid-config-body{max-height:62dvh;overflow:auto;padding:6px}
.raid-config-body details{margin-bottom:6px;padding:6px;background:#3d3d3d url('/assets/ui/classic/panel-texture.png') repeat;border:1px solid #111;box-shadow:1px 1px #6a6a6a,inset 1px 1px #6a6a6a}
.raid-config-body .editor-form{grid-template-columns:repeat(2,minmax(0,1fr))}
.raid-json{width:100%;height:40dvh;font:12px monospace;box-sizing:border-box}
.raid-grant{display:grid;margin-bottom:6px;background:#2b2b2b;border:1px solid #111;box-shadow:1px 1px #5e5e5e}
.raid-grant-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:4px 6px;border-bottom:1px solid #1a1a1a}
.raid-grant-row:nth-child(even){background:#323232}
.raid-grant-row label{display:grid;gap:3px;color:#c0c0c0}
.raid-grant-quick{display:flex;gap:2px}
.raid-live{padding:4px;color:#e4ca78}
.raid-standard-label{color:#e4ca78}

@keyframes ticket-shine{0%,45%{transform:translateX(-40%)}100%{transform:translateX(40%)}}
@keyframes ticket-spark{to{opacity:.3;transform:scale(.7)}}
@keyframes raid-banner{0%{opacity:0;transform:translate(-50%,-8px)}15%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.raid-ticket::after,.raid-ticket i,.raid-banner.show{animation:none!important}.raid-banner.show{opacity:1}}
@media(max-width:760px){
 dialog.window.raid-modal.raid-modal--stage{height:auto;max-height:calc(100dvh - 8px)}
 .raid-modal--stage #raid-body{height:auto;max-height:calc(100dvh - 40px)}
 .raid-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto}
 .raid-board-wrap canvas{max-height:52dvh}
 .raid-tracker li{padding:2px 4px}
 .raid-difficulties{grid-template-columns:1fr}
 .raid-tickets{grid-template-columns:repeat(3,minmax(0,1fr))}
 .raid-config-body .editor-form{grid-template-columns:1fr}
 .raid-card-go{display:none}
 .raid-grant-row{grid-template-columns:auto 1fr}
 .raid-grant-quick{grid-column:1/-1}
}