html, body { height: 100%; overflow: hidden; }
body.run-page {
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 35%, rgba(90, 55, 30, .35), transparent 60%),
    radial-gradient(circle at 50% 50%, #1c120c, #050302 75%);
  touch-action: none; user-select: none; -webkit-user-select: none;
  --S: min(100dvh, 150vw); /* stage height */
}
body.run-page:has(.screen.on.codec) { background: radial-gradient(circle at 50% 45%, #061308, #000 70%); }
body.run-page:has(.screen.on.codec.mantis) { background: radial-gradient(circle at 50% 45%, #140302, #000 70%); }
body.run-page:has(.screen.on:is(.lol-anim, .victory, .video)) { background: radial-gradient(circle at 50% 40%, #0b2540, #010a13 70%); }
#stage {
  --ink: #1d120c;
  --paper: #eadcbc;
  --outline: .22cqh .22cqh 0 var(--ink), -.22cqh .22cqh 0 var(--ink), .22cqh -.22cqh 0 var(--ink), -.22cqh -.22cqh 0 var(--ink),
    0 .3cqh 0 var(--ink), 0 -.3cqh 0 var(--ink), .3cqh 0 0 var(--ink), -.3cqh 0 0 var(--ink), 0 .6cqh .4cqh rgba(0,0,0,.5);
  position: relative;
  height: min(100dvh, 150vw);
  aspect-ratio: 2 / 3;
  container-type: size;
  overflow: hidden;
  background: #120b07;
  box-shadow: 0 0 0 3px #000, 0 0 80px rgba(0, 0, 0, .9), 0 0 140px rgba(120, 60, 20, .25);
}
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* --- HUD (Isaac): pixel hearts, penny counter, floor name */
#hud {
  position: absolute; inset: 0 0 auto 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.8cqh 2.6cqw; pointer-events: none;
}
.hud-left { display: grid; gap: .7cqh; justify-items: start; }
#hearts { display: flex; flex-wrap: wrap; gap: .25cqh; max-width: 62cqw; }
#hearts .heart {
  height: 3.4cqh; width: auto; image-rendering: pixelated;
  filter: drop-shadow(0 .35cqh 0 rgba(0, 0, 0, .55));
}
#hearts.hurt .heart { animation: heartHurt .45s steps(2) 2; }
@keyframes heartHurt { 50% { filter: brightness(3) drop-shadow(0 0 .6cqh #fff); transform: scale(1.12); } }
#pesetas {
  display: flex; align-items: center; gap: .9cqw;
  font-family: var(--f-isaac); font-size: 2.9cqh; line-height: 1; color: #fff; text-shadow: var(--outline);
}
#pesetas .penny { height: 2.7cqh; width: auto; image-rendering: pixelated; filter: drop-shadow(0 .3cqh 0 rgba(0,0,0,.55)); }
#floor-label {
  font-family: var(--f-isaac); font-size: 2.5cqh; line-height: 1; color: #f3e9d2;
  text-shadow: var(--outline); transform: rotate(2deg); margin-top: .4cqh; letter-spacing: .05em;
}
#stage:has(.screen.on:is(.versus, .lol-anim, .victory, .video, .start, .death)) #hud { visibility: hidden; }
#overlay { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
#overlay > * { pointer-events: auto; }

/* in-floor shout: Isaac marker text */
#banner {
  position: absolute; left: 0; right: 0; top: 40%; z-index: 8;
  text-align: center; font-family: var(--f-isaac); font-size: 4.6cqh; line-height: 1.15;
  color: #fff; text-shadow: var(--outline);
  padding: 0 5cqw; pointer-events: none; opacity: 0;
}
#banner.show { animation: bannerPop 1.2s ease-out forwards; }
#banner:not(.style-isaac).show { animation-name: bannerFlat; }
@keyframes bannerFlat {
  0% { opacity: 0; transform: scale(1.15); }
  12% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-2cqh); }
}
@keyframes bannerPop {
  0% { opacity: 0; transform: scale(2.2) rotate(-6deg); }
  15% { opacity: 1; transform: scale(1) rotate(-3deg); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4cqh) rotate(-3deg); }
}
#stage.shake { animation: shake .3s; }
@keyframes shake {
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -4px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 4px); }
}

/* --- full-stage screens */
.screen { display: none; }
.screen.on {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4cqh; padding: 5cqh 6cqw; text-align: center;
  background: rgba(10, 6, 4, .9);
}
.screen .btn { font-size: 2cqh; }
.screen .btn.big { font-size: 2.5cqh; }
.btn-row { display: flex; gap: 3cqw; flex-wrap: wrap; justify-content: center; align-items: center; }

/* Isaac streak: paper scroll */
.streak {
  width: 96cqw; aspect-ratio: 460 / 120; flex: none;
  display: grid; place-content: center; gap: .2cqh; padding: 0 9cqw;
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 1cqh 1.2cqh rgba(0, 0, 0, .6));
  animation: unroll 2s cubic-bezier(.3, .8, .3, 1) both;
}
.streak-title {
  font-family: var(--f-isaac); font-size: 4.4cqh; line-height: 1.05; color: var(--ink);
  transform: rotate(-1.5deg); animation: inkIn .3s .22s both;
}
.streak-sub { font-family: var(--f-isaac-body); font-size: 2.6cqh; line-height: 1.1; color: #5a3a22; animation: inkIn .3s .35s both; }
@keyframes unroll {
  0% { clip-path: inset(0 50% 0 50%); }
  18% { clip-path: inset(0 0 0 0); }
  86% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 50% 0 50%); opacity: .6; }
}
@keyframes inkIn { from { opacity: 0; transform: scale(1.06) rotate(-3deg); } }

.title-card { background: radial-gradient(circle at 50% 48%, #3a2416 0%, #140b06 45%, #000 80%) !important; gap: 1.4cqh !important; }
.tc-floor { font-family: var(--f-isaac); font-size: 3.4cqh; color: #e9dcc2; text-shadow: var(--outline); letter-spacing: .1em; animation: inkIn .4s both; }
.tc-of { font-family: var(--f-isaac-body); font-size: 2.4cqh; color: #a8927a; animation: inkIn .4s .3s both; }

/* treasure room */
.item-room { background: transparent !important; padding: 0 !important; display: block !important; }
.pedestal {
  position: absolute; width: 34.2cqw; height: 42cqh; padding: 0; margin: 0;
  background: none; border: 0; cursor: pointer; color: var(--ink);
  display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch;
  -webkit-tap-highlight-color: transparent;
}
.ped-note {
  height: 15.3cqh; padding: 1.6cqh 3cqw 1cqh; display: grid; align-content: center; gap: .4cqh;
  background: center / 100% 100% no-repeat; transform: rotate(var(--tilt, 0deg));
  filter: drop-shadow(0 .8cqh .8cqh rgba(0, 0, 0, .55)); transition: transform .15s;
}
.ped-name { font-family: var(--f-isaac); font-size: 2.5cqh; line-height: 1.05; }
.ped-desc { font-family: var(--f-isaac-body); font-size: 2.2cqh; line-height: 1.05; color: #4a3220; }
.pedestal:hover .ped-note, .pedestal:focus-visible .ped-note { transform: rotate(0deg) translateY(-.8cqh) scale(1.04); }
.pedestal:focus-visible { outline: none; }
.pedestal:focus-visible .ped-note { outline: .4cqh dashed #ffd75a; outline-offset: .4cqh; }
.pickup-streak { position: absolute; left: 2cqw; top: 10.5cqh; animation-duration: 1.9s; }

/* death note */
.death {
  background: radial-gradient(circle at 50% 40%, rgba(60, 10, 10, .85), rgba(5, 2, 2, .96) 70%) !important;
  gap: 2cqh !important; padding: 3cqh 4cqw !important;
}
.death-note {
  width: 88cqw; height: auto; display: block;
  filter: drop-shadow(0 1.2cqh 1.6cqh rgba(0, 0, 0, .7));
  animation: noteDrop .55s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes noteDrop { from { transform: translateY(-60cqh) rotate(-14deg); } to { transform: rotate(-1.5deg); } }
.screen .btn.scrap {
  font-family: var(--f-isaac); font-size: 3cqh; line-height: 1; color: var(--ink);
  background: #efe3c6; border: 0; box-shadow: none; padding: 1.6cqh 5cqw 1.4cqh;
  clip-path: polygon(2% 8%, 20% 0, 46% 6%, 70% 1%, 98% 5%, 100% 50%, 97% 94%, 74% 100%, 50% 95%, 24% 100%, 1% 93%, 3% 50%);
  filter: drop-shadow(0 .5cqh 0 rgba(0, 0, 0, .5)); transform: rotate(-2deg);
  animation: inkIn .3s .5s both;
}
.screen .btn.scrap.alt { font-size: 2.4cqh; background: #d8ccb0; color: #4a3220; transform: rotate(2deg); }
.screen .btn.scrap:hover, .screen .btn.scrap:focus-visible { background: #fff6dc; outline: none; }
.screen .btn.scrap:active { transform: translateY(.4cqh) rotate(-2deg); }

/* title screen */
.start { padding: 0 !important; background: #140b06 !important; }
.st-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-menu {
  position: absolute; left: 19cqw; width: 62cqw; top: 73cqh; height: 24cqh;
  background: center / 100% 100% no-repeat; transform: rotate(-2deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2cqh;
  filter: drop-shadow(.6cqh 1cqh .8cqh rgba(0, 0, 0, .55));
}
.st-menu::before {
  content: ''; position: absolute; top: -1.2cqh; left: 50%; width: 14cqw; height: 3cqh; transform: translateX(-50%) rotate(3deg);
  background: rgba(240, 230, 190, .7); box-shadow: 0 .2cqh .4cqh rgba(0, 0, 0, .25);
}
.screen .btn.st-go {
  position: relative; font-family: var(--f-isaac); font-size: 4.6cqh; line-height: 1.1; color: var(--ink);
  background: none; border: 0; box-shadow: none; padding: 0 1cqw;
}
.st-go::before {
  content: ''; position: absolute; right: 100%; top: 50%; width: 9cqw; height: 4cqh; margin-top: -2cqh;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cpath d='M3 13 C13 10 22 14 33 12 M24 4 L35 12 L25 20' fill='none' stroke='%231d120c' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: nudge .7s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateX(1.4cqw); } }
.screen .btn.st-go:hover, .screen .btn.st-go:focus-visible { color: #8e0d14; outline: none; }
.screen .btn.st-go:active { transform: translateY(.3cqh); box-shadow: none; }
.st-item { font-family: var(--f-isaac); font-size: 3cqh; line-height: 1.15; }
.st-item.off { color: rgba(29, 18, 12, .4); text-decoration: line-through .35cqh rgba(142, 13, 20, .75); }
.st-hint { font-family: var(--f-isaac-body); font-size: 2cqh; color: #6b4e36; margin-top: .4cqh; }
.st-dev { position: absolute; top: 2cqh; right: 4cqw; font-family: var(--f-isaac); font-size: 2cqh; color: #ffd75a; text-shadow: var(--outline); }

/* canvas-driven sequences (VS, PENTAKILL, VICTORY): tap to skip */
.versus, .lol-anim { background: transparent !important; padding: 0 !important; cursor: pointer; }

/* --- League of Legends end of game */
.victory { background: linear-gradient(transparent 40%, rgba(1, 10, 19, .55)) !important; justify-content: flex-end !important; padding-bottom: 7cqh !important; }
.victory.final { padding-bottom: 3cqh !important; }
/* final stats: compact enough for a full license strip and still clear the floating head */
.final .lol-panel { padding: 2.6cqh 5cqw 2.4cqh; gap: 1.1cqh; }
.final .lol-kicker { font-size: 1.7cqh; }
.final .lol-title { font-size: 3.7cqh; }
.final .lol-stat { padding: .6cqh 0; }
.final .lol-stat .v { font-size: 2.6cqh; }
.final .lol-slot { width: 8.4cqw; }
.final .lol-sub { font-size: 2.1cqh; line-height: 1.25; }
.final .lol-sub.small { font-size: 1.8cqh; }
.final .ff12-strip { margin-top: 0; width: 100%; }
.final .ff12-strip-row { gap: .5cqh; padding-top: .6cqh; }
.final .ff12-chip { font-size: 1.45cqh; padding: .25cqh .7cqh .25cqh .3cqh; }
.final .ff12-chip canvas { width: 2.4cqh; height: 2.4cqh; }
.final .btn-row { flex-wrap: nowrap; gap: 2.4cqw; margin-top: .4cqh; }
.screen.final .btn.lol-btn { font-size: 1.9cqh; letter-spacing: .1em; padding: 1.4cqh 3.4cqw; white-space: nowrap; }
.screen.final .btn.lol-btn.primary { font-size: 2.1cqh; }
.lol-panel {
  position: relative; width: 88cqw; padding: 3.6cqh 6cqw 3.4cqh;
  display: grid; gap: 1.6cqh; justify-items: center;
  background: linear-gradient(180deg, rgba(9, 20, 40, .94), rgba(1, 10, 19, .96));
  border: 2px solid #c8aa6e; box-shadow: 0 0 0 1px #463714, 0 0 0 5px rgba(1, 10, 19, .8), 0 0 0 6px #785a28, 0 2cqh 5cqh rgba(0, 0, 0, .7);
  animation: lolIn .5s cubic-bezier(.2, .9, .3, 1.1) both;
}
.lol-panel::before { content: ''; position: absolute; inset: .7cqh; border: 1px solid rgba(200, 170, 110, .35); pointer-events: none; }
@keyframes lolIn { from { opacity: 0; transform: translateY(3cqh) scale(.96); } }
.lol-corner {
  position: absolute; width: 2.4cqh; height: 2.4cqh; transform: rotate(45deg);
  background: linear-gradient(135deg, #f0e6d2, #c8aa6e 50%, #785a28); border: 1px solid #1a1206;
}
.lol-corner.tl { left: -1.3cqh; top: -1.3cqh; } .lol-corner.tr { right: -1.3cqh; top: -1.3cqh; }
.lol-corner.bl { left: -1.3cqh; bottom: -1.3cqh; } .lol-corner.br { right: -1.3cqh; bottom: -1.3cqh; }
.lol-kicker { font-family: var(--f-lol); font-size: 1.9cqh; letter-spacing: .32em; color: #c8aa6e; }
.lol-title {
  font-family: var(--f-lol); font-size: 4.3cqh; line-height: 1.1; letter-spacing: .04em;
  background: linear-gradient(180deg, #fff6dc 10%, #c8aa6e 55%, #9a7634 75%, #e8cf8e); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .3cqh 0 rgba(0, 0, 0, .8));
}
.lol-rule { position: relative; width: 70%; height: 1px; background: linear-gradient(90deg, transparent, #c8aa6e, transparent); }
.lol-rule::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 1.2cqh; height: 1.2cqh; transform: translate(-50%, -50%) rotate(45deg);
  background: #0ac8ff; border: 1px solid #c8aa6e; box-shadow: 0 0 1cqh #0ac8ff;
}
.lol-sub { font-family: var(--f-lol); font-size: 2.4cqh; line-height: 1.3; color: #f0e6d2; }
.lol-sub.dim { color: #a09b8c; }
.lol-sub.small { font-size: 1.9cqh; }
.lol-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 2cqw; }
.lol-stat { padding: 1cqh 0; border-top: 1px solid #463714; border-bottom: 1px solid #463714; }
.lol-stat .k { font-family: var(--f-lol); font-size: 1.5cqh; letter-spacing: .15em; color: #a09b8c; }
.lol-stat .v { font-family: var(--f-lol); font-size: 2.9cqh; color: #f0e6d2; }
.lol-items { display: flex; gap: 1.2cqw; justify-content: center; }
.lol-slot {
  width: 9.6cqw; aspect-ratio: 1; padding: .4cqh; background: radial-gradient(circle, #0a1a2a, #010a13);
  border: 2px solid #785a28; box-shadow: inset 0 0 1cqh #000, 0 0 0 1px #1a1206;
}
.lol-slot img { width: 100%; height: 100%; display: block; }
.screen .btn.lol-btn {
  font-family: var(--f-lol); font-size: 2.2cqh; letter-spacing: .14em; line-height: 1; color: #cdbe91;
  background: linear-gradient(180deg, #1e2328, #10151a); padding: 1.6cqh 5cqw;
  border: 2px solid transparent; border-image: linear-gradient(180deg, #c8aa6e, #785a28) 1; box-shadow: 0 0 0 1px #010a13;
  transition: color .15s, box-shadow .15s;
}
.screen .btn.lol-btn.primary {
  font-size: 2.6cqh; color: #f0e6d2;
  background: linear-gradient(180deg, #1b6f84, #0a323c 70%); box-shadow: 0 0 2cqh rgba(10, 200, 255, .35), 0 0 0 1px #010a13;
}
.screen .btn.lol-btn:hover, .screen .btn.lol-btn:focus-visible {
  color: #f0e6d2; outline: none; box-shadow: 0 0 2.4cqh rgba(240, 230, 210, .35), 0 0 0 1px #010a13;
}
.screen .btn.lol-btn:active { transform: translateY(.3cqh); }
.video { background: radial-gradient(circle at 50% 45%, #0b2540, #010a13 75%) !important; }
.lol-video {
  position: relative; width: auto; max-width: 100%; padding: 1cqh; background: #000;
  border: 2px solid #c8aa6e; box-shadow: 0 0 0 1px #463714, 0 0 4cqh rgba(10, 200, 255, .25);
}
.lol-video video { display: block; width: auto; max-width: 100%; max-height: 64cqh; background: #000; }

.stub-box { position: absolute; inset: 0; display: grid; place-content: center; gap: 3cqh; }

@media (prefers-reduced-motion: reduce) {
  .streak, .streak-title, .streak-sub, .death-note, .st-go::before, .lol-panel, #stage.shake { animation: none; }
}

/* touch controls */
.touch-controls { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.stick-zone { position: absolute; left: 0; bottom: 0; width: 60%; height: 55%; display: none; touch-action: none; }
.stick-zone.on { display: block; pointer-events: auto; }
.stick-base {
  position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px;
  border-radius: 50%; border: 3px solid rgba(243, 233, 210, .55);
  background: radial-gradient(circle, rgba(0, 0, 0, .1) 40%, rgba(0, 0, 0, .38));
  box-shadow: 0 0 0 2px rgba(29, 18, 12, .5), inset 0 0 0 2px rgba(29, 18, 12, .35);
  display: none;
}
.stick-base.on { display: block; }
.stick-knob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #fff8e6, rgba(234, 220, 188, .9) 55%, rgba(176, 152, 116, .9));
  border: 3px solid rgba(29, 18, 12, .85); box-shadow: 0 4px 0 rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
}
.roll-btn {
  position: absolute; right: 5cqw; bottom: 6cqh; width: 18cqw; height: 18cqw; border-radius: 50%; padding: 0;
  font-family: var(--f-isaac); font-size: 2.5cqh; letter-spacing: .04em; color: #f3e9d2;
  background: radial-gradient(circle at 50% 30%, rgba(78, 58, 40, .82), rgba(22, 14, 9, .86) 70%);
  border: .45cqh solid rgba(243, 233, 210, .8);
  box-shadow: 0 0 0 .3cqh rgba(29, 18, 12, .7), 0 .6cqh 0 rgba(0, 0, 0, .45), inset 0 .5cqh 0 rgba(255, 255, 255, .1);
  display: none; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.roll-btn:active { transform: translateY(.4cqh); background: radial-gradient(circle at 50% 30%, rgba(120, 92, 62, .9), rgba(40, 26, 16, .9) 70%); }
.roll-btn.on { display: block; pointer-events: auto; }

/* --- v3: per-game banner styles, SH2 examine text, toasts below the HUD */
#banner.style-gungeon { font-family: var(--f-gungeon); font-weight: 400; letter-spacing: .04em; color: #fff; text-shadow: 3px 3px 0 #2a1430; }
#banner.style-hk { font-family: var(--f-trajan); font-weight: 400; letter-spacing: .12em; color: #f2f4ff; text-shadow: 0 0 1.2cqh rgba(170,200,255,.7); }
#banner.style-mgs { font-family: 'VT323', monospace; font-size: 5.4cqh; color: #8dff5a; text-shadow: 0 0 .8cqh rgba(110,255,60,.75), 0 2px 0 #072a05; }
#banner.style-ff12 { font-family: "Helvetica Neue", Arial, sans-serif; font-weight: 700; font-size: 3.4cqh; letter-spacing: .03em; color: #eef3ff; text-shadow: 0 0 .6cqh rgba(80,140,255,.9), 0 2px 0 #0a1640; }
.ped-examine { margin-top: .4cqh; font-family: var(--f-isaac-body); font-size: 1.7cqh; line-height: 1.15; color: #5a4632; font-style: italic; }
.run-page .ach-toasts {
  top: calc((100dvh - var(--S)) / 2 + var(--S) * .098); bottom: auto; right: auto; left: 50%; transform: translateX(-50%);
  width: min(340px, var(--S) * 2 / 3 - 24px); max-width: none; align-items: stretch; gap: 6px; transition: top .3s ease;
}
/* full-stage screens hide the HUD: toasts ride the top edge instead */
body.run-page:has(.screen.on:not(.item-room)) .ach-toasts { top: calc((100dvh - var(--S)) / 2 + var(--S) * .012); }
/* treasure room: the HUD and the pickup streak own the top, the floor by the door is free */
body.run-page:has(.screen.on.item-room) .ach-toasts { top: auto; bottom: calc((100dvh - var(--S)) / 2 + var(--S) * .015); flex-direction: column-reverse; }
.run-page .ach-toast { width: 100%; gap: calc(var(--S) * .012); padding: 5px 10px 5px 5px; animation-name: achDrop; }
.run-page .ach-icon { width: max(30px, var(--S) * .05); height: max(30px, var(--S) * .05); font-size: max(18px, var(--S) * .029); }
.run-page .ach-head { font-size: max(9px, var(--S) * .0125); line-height: 1.2; }
.run-page .ach-title { font-size: max(11px, var(--S) * .0165); line-height: 1.2; }
.run-page .ach-desc { font-size: max(10px, var(--S) * .0145); line-height: 1.2; }
.run-page .ach-toast.out { transform: translateY(-140%); }
@keyframes achDrop { from { transform: translateY(-140%); opacity: 0; } }
.lol-sub.balthier { font-style: italic; color: #c8aa6e; }
.lol-licenses:empty { display: none; }
.ped-note { height: auto; min-height: 15.3cqh; gap: .3cqh; padding: 1.6cqh 3.6cqw 1.5cqh; }
.ped-note .ped-examine { margin-top: 0; font-size: 1.65cqh; line-height: 1.05; }
body.run-page:has(.screen.on.item-room) .ach-toast { animation-name: achRise; }
body.run-page:has(.screen.on.item-room) .ach-toast.out { transform: translateY(140%); }
@keyframes achRise { from { transform: translateY(140%); opacity: 0; } }