/* The Harbour raid (raid/raid.js): the boss with its shared HP bar, the attack, the trophy, the damage ladder, the claim. */
.raidx { width: min(1100px, 100%); margin: 14px 0 110px; text-align: left; --gold: #ffd23f; }
.raidx .empty-line { color: var(--muted); font-size: 13px; padding: 12px 4px; text-align: center; list-style: none; }
.rx-boss, .rx-panel, .rx-claim { border: 1px solid rgba(255, 120, 200, .22); border-radius: 18px; background: linear-gradient(180deg, rgba(30, 12, 52, .92), rgba(16, 8, 32, .92)); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.rx-boss { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; gap: 22px; align-items: center; padding: 16px 20px 16px 16px;
  background: radial-gradient(circle at 20% 60%, rgba(34, 228, 217, .16), transparent 55%), linear-gradient(180deg, rgba(14, 26, 54, .95), rgba(16, 8, 32, .95)); }
.rx-art { position: relative; border-radius: 14px; background: linear-gradient(180deg, #0b1630, #071022 70%, #0d2a3e); overflow: hidden; }
.rx-art img { display: block; width: 100%; height: auto; transform-origin: 50% 80%; animation: rx-breathe 4s ease-in-out infinite; }
@keyframes rx-breathe { 50% { transform: scale(1.025); } }
.rx-art.hit img { animation: rx-hit .26s; }
@keyframes rx-hit { 30% { filter: brightness(2.2) saturate(0); transform: translateX(-8px); } 60% { transform: translateX(8px); } }
.rx-boss.down .rx-art img { filter: grayscale(1) brightness(.55); animation: none; }
.rx-pop { position: absolute; left: 50%; top: 32%; translate: -50% 0; font: 700 34px var(--head, Oswald), sans-serif; color: #fff; text-shadow: 0 2px 6px #000; opacity: 0; pointer-events: none; z-index: 1; }
.rx-pop.show { animation: rx-pop .5s ease-out; } .rx-pop.crit { color: var(--gold); font-size: 44px; }
@keyframes rx-pop { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 25% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-30px); } }
.rx-week { color: #9fe8ff; font-size: 12px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.rx-info h2 { margin: 4px 0 10px; font: 700 32px var(--head, Oswald), sans-serif; letter-spacing: 1.5px; color: #fff; text-shadow: 0 0 18px rgba(34, 228, 217, .35); }
.rx-hp { position: relative; height: 24px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rx-hp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #ff3a3a, #ff8a3d); box-shadow: 0 0 14px rgba(255, 90, 60, .6); transition: width .5s; }
.rx-hp span { position: relative; display: block; text-align: center; font: 700 12px/24px Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; letter-spacing: .5px; }
.rx-sub { margin: 6px 0 12px; color: var(--muted); font-size: 12.5px; }
.rx-trophy { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 210, 63, .07); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .3); }
.rx-tart { display: grid; place-items: center; width: 54px; height: 54px; } .rx-tart svg { width: 100%; height: 100%; }
.rx-trophy small { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.rx-trophy b { color: var(--gold); font: 700 18px var(--head, Oswald), sans-serif; letter-spacing: 1px; } .rx-trophy em { display: block; font-style: normal; color: var(--muted); font-size: 12px; }
.rx-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 13.5px; } .rx-act b { color: #fff; }
.rx-go { height: 46px; padding: 0 30px; font-size: 16px; } .rx-go:disabled { opacity: .45; cursor: not-allowed; }
.rx-panel { padding: 14px; margin-top: 12px; }
.rx-panel h3 { margin: 0 0 8px; font: 600 14px var(--head, Oswald), sans-serif; letter-spacing: 1.6px; text-transform: uppercase; color: #ff9ad5; }
.rx-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.rx-ladder li { display: grid; grid-template-columns: 30px 1fr auto 80px; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .22); font-size: 13.5px; }
.rx-ladder li.top span { color: var(--gold); font-weight: 900; } .rx-ladder li.me { box-shadow: inset 0 0 0 1px var(--gold); }
.rx-ladder em { font-style: normal; color: var(--muted); font-size: 12px; } .rx-ladder strong { text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
.rx-hint { margin: 10px 2px 0; color: var(--muted); font-size: 12.5px; }
.rx-claim { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 12px; box-shadow: 0 0 0 1px rgba(255, 210, 63, .5), 0 0 24px rgba(255, 190, 40, .15); }
.rx-claim div { flex: 1; } .rx-claim small { display: block; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.rx-claim b { display: block; color: #fff; } .rx-claim span { color: var(--muted); font-size: 13px; } .rx-claim em { font-style: normal; color: var(--gold); }
@media (max-width: 680px) { .rx-boss { grid-template-columns: 1fr; } .rx-info h2 { font-size: 26px; } .rx-ladder li { grid-template-columns: 26px 1fr 70px; } .rx-ladder em { display: none; } }
@media (prefers-reduced-motion: reduce) { .rx-art img { animation: none; } }
.rx-ladder li.empty-line { display: block; background: none; }

/* One screen on a computer (styles.css): the boss on the left, the damage ladder beside it down to the dock (the
   ladder scrolls inside its panel); last week's claim stays on top while it waits. */
@media (min-width: 1041px) and (min-height: 560px) {
  .room.fit .raidx {
    flex: 1 1 auto; min-height: 0; margin: 10px 0 0;
    display: grid; gap: 12px; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "claim claim" "boss ladder" "msg msg";
  }
  .room.fit .rx-claim { grid-area: claim; margin: 0; }
  /* the boss is the room: its picture fills the column, HP, trophy and Attack under it (design review, 5 Nov 2026) */
  .room.fit .rx-boss { grid-area: boss; align-self: stretch; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; padding: 14px; }
  .room.fit .rx-art { min-height: 0; height: 100%; }
  .room.fit .rx-art img { height: 100%; object-fit: cover; object-position: 50% 40%; }
  .room.fit .rx-info h2 { font-size: 36px; margin: 2px 0 10px; }
  .room.fit .rx-trophy { padding: 8px 10px; }
  .room.fit .rx-act { margin-top: 10px; }
  .room.fit .rx-panel { grid-area: ladder; margin: 0; min-height: 0; display: flex; flex-direction: column; }
  .room.fit .rx-ladder { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; }
  .room.fit .rx-ladder li { grid-template-columns: 26px minmax(0, 1fr) auto 70px; }
  .room.fit .raidx > .cx-msg { grid-area: msg; margin: 0; }
  .room.fit .raidx > .cx-msg:empty { display: none; }
}

/* An attack (raid.js): a slash across the boss, the HP taken flying off where it hit (a crit in gold with sparks), the
   HP bar draining with the chunk taken flashing white first, then the total over the boss. */
.rx-hp .rx-ghost { position: absolute; inset: 0 auto 0 0; background: #fff; opacity: .85; transition: width .45s ease-in .05s; }
.rx-hp i { transition: width .18s ease-out; }
.rx-slash { position: absolute; width: 150px; height: 6px; margin: -3px 0 0 -75px; border-radius: 50%; background: linear-gradient(90deg, transparent, #fff 40%, #fff 60%, transparent);
  box-shadow: 0 0 14px #9fe8ff; transform: rotate(var(--r)) scaleX(0); pointer-events: none; z-index: 2; animation: rx-slash .32s ease-out forwards; }
.rx-slash.crit { height: 9px; background: linear-gradient(90deg, transparent, #fff6c0 35%, #ffd23f 50%, #fff6c0 65%, transparent); box-shadow: 0 0 20px #ffd23f; }
@keyframes rx-slash { 40% { transform: rotate(var(--r)) scaleX(1); opacity: 1; } 100% { transform: rotate(var(--r)) scaleX(1.2); opacity: 0; } }
.rx-dmg { position: absolute; z-index: 3; pointer-events: none; translate: -50% -50%; font: 700 30px var(--head, Oswald), sans-serif; color: #fff; -webkit-text-stroke: 1.5px #3a0a14;
  text-shadow: 0 3px 0 #8a1020, 0 0 12px rgba(255, 58, 58, .8); animation: rx-dmg 1.05s cubic-bezier(.2, .9, .3, 1) forwards; }
.rx-dmg.crit { font-size: 44px; color: #ffd23f; text-shadow: 0 3px 0 #8a5a00, 0 0 18px rgba(255, 210, 63, .9); }
.rx-dmg[data-tag]::before { content: attr(data-tag); position: absolute; left: 50%; bottom: 92%; translate: -50% 0; font-size: 15px; letter-spacing: 3px; -webkit-text-stroke: 0; color: #fff; text-shadow: 0 0 8px #ff3a3a; }
@keyframes rx-dmg {
  0% { opacity: 0; transform: translate(0, 10px) scale(.4); }
  18% { opacity: 1; transform: translate(calc(var(--dx) * .3), -18px) scale(1.25); }
  35% { transform: translate(calc(var(--dx) * .5), -30px) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), -80px) scale(.9); }
}
.rx-spark { position: absolute; z-index: 2; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 8px #ff8a3d; pointer-events: none; animation: rx-spark .6s ease-out forwards; }
@keyframes rx-spark { from { transform: rotate(var(--a)) translateX(0); opacity: 1; } to { transform: rotate(var(--a)) translateX(var(--d)); opacity: 0; } }
.rx-total { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; text-align: center; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(8, 4, 20, .7), transparent 70%); animation: rx-total 2.6s ease forwards; }
.rx-total b { font: 700 clamp(44px, 7vw, 64px)/1 var(--head, Oswald), sans-serif; color: #ff5a5a; -webkit-text-stroke: 2px #3a0a14; text-shadow: 0 4px 0 #8a1020, 0 0 26px rgba(255, 58, 58, .9); font-variant-numeric: tabular-nums; }
.rx-total small { margin-top: 6px; color: #fff; font: 700 12px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 3px #000; }
@keyframes rx-total { 0% { opacity: 0; transform: scale(.6); } 12% { opacity: 1; transform: scale(1.08); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .rx-slash, .rx-spark { display: none; } .rx-dmg, .rx-total { animation-duration: .01s; } }

/* The fight with the boss (raid.js fight): you and the boss face each other over the harbour, both HP bars, the turns
   played out, then the HP you took. */
.rf { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 18px; padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(34, 228, 217, .18), rgba(5, 10, 30, .96) 60%); backdrop-filter: blur(4px); animation: rf-in .35s ease both; }
@keyframes rf-in { from { opacity: 0; } }
.rf-ring { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); align-items: end; gap: 22px; width: min(900px, 100%); }
.rf-side { position: relative; text-align: center; transition: transform .14s ease-out; }
.rf-side p { margin: 8px 0 6px; font: 700 20px var(--head, Oswald), sans-serif; letter-spacing: 1px; color: #fff; }
.rf-pic { position: relative; display: grid; place-items: end center; }
.rf-side.me .rf-pic { height: clamp(200px, 34vh, 300px); }
.rf-side.me .rf-pic svg { height: 100%; width: auto; filter: drop-shadow(0 0 16px rgba(255, 62, 165, .45)); }
.rf-side.boss .rf-pic img { width: 100%; height: auto; display: block; border-radius: 16px;
  -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 52%, #000 55%, transparent 76%); mask-image: radial-gradient(ellipse 52% 52% at 50% 52%, #000 55%, transparent 76%); }
.rf-side.me.lunge { animation: rf-lunge-r .3s ease-out; }
.rf-side.boss.lunge { animation: rf-lunge-l .3s ease-out; }
@keyframes rf-lunge-r { 40% { transform: translateX(34px) scale(1.04); } }
@keyframes rf-lunge-l { 40% { transform: translateX(-34px) scale(1.04); } }
.rf-pic.hit > svg, .rf-pic.hit > img { animation: rx-hit .26s; }
.rf-pic.dodge > svg, .rf-pic.dodge > img { animation: rf-dodge .4s ease-out; }
@keyframes rf-dodge { 40% { transform: translateX(-26px) skewX(-6deg); opacity: .6; } }
.rf-side.me.down .rf-pic svg { transform: rotate(-80deg) translate(-30%, 10%); transition: transform .5s ease-in; filter: grayscale(.6); }
.rf-hp { position: relative; height: 20px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.rf-hp i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, #ff3a5c, #ffd23f 60%, #7dff6a); transition: width .2s ease-out; }
.rf-hp.boss i { background: linear-gradient(90deg, #ff3a3a, #ff8a3d); box-shadow: 0 0 12px rgba(255, 90, 60, .6); }
.rf-hp .rf-ghost { position: absolute; inset: 0 auto 0 0; background: #fff; opacity: .85; transition: width .45s ease-in .05s; }
.rf-hp span { position: relative; display: block; font: 700 11.5px/20px Inter, sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
.rf-vs { align-self: center; font: 700 clamp(36px, 6vw, 60px)/1 var(--head, Oswald), sans-serif; color: #ffd23f; text-shadow: 0 0 20px rgba(255, 210, 63, .6), 0 4px 0 #8a5a00; }
.rx-dmg.miss { color: #9fe8ff; font-size: 24px; letter-spacing: 2px; text-shadow: 0 0 12px rgba(80, 200, 255, .8); -webkit-text-stroke: 0; }
.rx-dmg.block { color: #ffb36b; text-shadow: 0 0 12px rgba(255, 140, 60, .8); }
.rf-class { display: block; margin: -4px 0 6px; font-size: 12px; color: var(--muted); }
.rf-result { min-height: 150px; text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.rf-result.show { opacity: 1; transform: none; }
.rf-result p { margin: 0; font: 700 clamp(26px, 4vw, 40px) var(--head, Oswald), sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.rf-result p.won { color: #7dff6a; text-shadow: 0 0 18px rgba(125, 255, 106, .6); }
.rf-result p.lost { color: #ff5c8a; text-shadow: 0 0 18px rgba(255, 92, 138, .6); }
.rf-result b { display: block; margin-top: 4px; font: 700 clamp(44px, 7vw, 64px)/1 var(--head, Oswald), sans-serif; color: #ffd23f; -webkit-text-stroke: 2px #3a2400; text-shadow: 0 4px 0 #8a5a00, 0 0 26px rgba(255, 210, 63, .7); font-variant-numeric: tabular-nums; }
.rf-tip { display: block; max-width: 420px; margin: 8px auto 0; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .35); color: #ffe9a8; font: italic 600 13px/1.4 Inter, sans-serif; }
.rf-result small { display: block; margin: 6px 0 14px; color: #fff; font: 700 12px Inter, sans-serif; letter-spacing: 2px; text-transform: uppercase; }
.rf-skip { position: fixed; right: 18px; bottom: 18px; }
@media (max-width: 680px) { .rf-ring { grid-template-columns: 1fr auto 1.2fr; gap: 8px; } .rf-side p { font-size: 15px; } .rf-side.me .rf-pic { height: 150px; } }
@media (prefers-reduced-motion: reduce) { .rf-side, .rf-pic > * { animation: none !important; } }