/* Dodgeball Showdown — builds on Last Tile Standing's studio look (/tiles/tiles.css). */
:root { --blue: #2f8bff; --red2: #ff4a4a; }
.dtv .tstage { background-image: url(/art/dodge/arena.jpg); }
.thead .dtitle img { height: 15vh; display: block; filter: drop-shadow(0 .6vh 1.4vh rgba(0,0,0,.55)); }
.dtv .tpanel .plogo-big { height: 15vh; }
.dphone { background-image: url(/art/dodge/arena.jpg); background-position: center; }
.dphone .dlogo { width: min(300px, 80vw); }

/* the teams down each side */
.dteam { position: absolute; top: 24vh; bottom: 3vh; width: 18vw; display: flex; flex-direction: column; gap: .8vh; padding: 1.4vh 1vw; border-radius: 1.6vh;
  background: rgba(6,12,52,.86); overflow: hidden; }
.dteam.blue { left: 1.6vw; border: .3vh solid var(--blue); box-shadow: 0 0 2vh rgba(47,139,255,.5); }
.dteam.red { right: 1.6vw; border: .3vh solid var(--red2); box-shadow: 0 0 2vh rgba(255,74,74,.5); }
.dteam h3 { margin: 0; padding: .6vh .5vw; border-radius: 1vh; font: 900 2.1vh Nunito, sans-serif; text-align: center; white-space: nowrap; }
.dteam.blue h3 { background: linear-gradient(#2f8bff, #1452b8); }
.dteam.red h3 { background: linear-gradient(#ff5a5a, #b81414); }
.dteam .rows { display: grid; gap: .45vh; }
.dteam .prow .st { margin-left: auto; }
.dtv .thost { bottom: 9.4vh; left: auto; right: calc(1.6vw + 18vw + 1.2vw); width: 13vh; height: 13vh; }
.dtv .thostname { left: auto; right: calc(1.6vw + 18vw + 1.2vw); width: 14vh; bottom: 6.4vh; font-size: 1.3vh; }
.dtv .tclock { right: auto; left: calc(50% + 15vw); }
.dtv .dchip { left: calc(1.6vw + 18vw + 1.2vw); top: auto; bottom: 2.4vh; }

/* the court: Red's half far away, Blue's half near, 5 lanes each, tipped back in 3D */
.dcourtwrap { position: absolute; left: 21vw; right: 21vw; top: 24vh; bottom: 12vh; perspective: 110vh; perspective-origin: 50% 0%; }
.dcourt { position: absolute; left: 50%; bottom: 0; width: 64vh; height: 66vh; transform-origin: 50% 100%; transform: translateX(-50%) rotateX(48deg); transform-style: preserve-3d;
  display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: 1fr 1fr; gap: 1vh; row-gap: 5vh;
  padding: 1.6vh; border-radius: 2vh; background: rgba(10,20,80,.55); box-shadow: 0 0 4vh rgba(58,160,255,.5), inset 0 0 0 .4vh rgba(255,255,255,.35); }
.dcourt::after { content: ''; position: absolute; left: 2%; right: 2%; top: 50%; height: .7vh; margin-top: -.35vh; background: #fff; border-radius: 1vh; box-shadow: 0 0 2vh #fff; }
.dcell { position: relative; border-radius: 1vh; transform-style: preserve-3d; }
.dcell.t1 { background: linear-gradient(rgba(47,139,255,.45), rgba(20,70,200,.65)); border: .35vh solid rgba(140,190,255,.9); }
.dcell.t2 { background: linear-gradient(rgba(255,74,74,.4), rgba(170,20,20,.6)); border: .35vh solid rgba(255,170,170,.9); }
.dcell .lane { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 5vh Fredoka, sans-serif; color: rgba(255,255,255,.28); }
.dcell .toks { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: .4vh; transform-style: preserve-3d; padding-bottom: 12%; }
.dtok { display: grid; justify-items: center; transform-origin: 50% 100%; transform: rotateX(-48deg); animation: dpop .45s ease-out; transition: filter .4s; }
.dtok .face { width: 5.6vh; height: 5.6vh; border-radius: 50%; display: grid; place-items: center; font-size: 3.6vh; line-height: 1; background: #fff; box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.5); }
.dtok.t1 .face { border: .45vh solid var(--blue); } .dtok.t2 .face { border: .45vh solid var(--red2); }
.dtok .nm { margin-top: .2vh; padding: .1vh .5vw; border-radius: 99px; background: rgba(6,10,44,.9); font: 900 1.35vh Nunito, sans-serif; white-space: nowrap; max-width: 10vh; overflow: hidden; text-overflow: ellipsis; }
.dtok.hit { filter: grayscale(1) brightness(.7); animation: dhit .6s ease-out; }
.dtok.hit::after { content: '✕'; position: absolute; top: -1vh; font: 900 6vh/1 Nunito, sans-serif; color: #ff3448; text-shadow: 0 0 1vh #000; }
.dtok.caught .face { box-shadow: 0 0 2.6vh #2cff6a, 0 .6vh 1.2vh rgba(0,0,0,.5); border-color: #2cff6a; }
.dtok.caught::before { content: '🧤'; position: absolute; top: -3.4vh; font-size: 3.6vh; animation: dpop .5s; }
@keyframes dpop { 0% { transform: rotateX(-48deg) scale(.3); } 70% { transform: rotateX(-48deg) scale(1.15); } 100% { transform: rotateX(-48deg) scale(1); } }
@keyframes dhit { 0% { transform: rotateX(-48deg) rotate(0); } 40% { transform: rotateX(-48deg) rotate(-25deg) translateX(-1vh); } 100% { transform: rotateX(-48deg) rotate(0); } }

/* the balls flying */
.dballs { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.dball { position: absolute; left: -2.6vh; top: -2.6vh; width: 5.2vh; height: 5.2vh; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffb3a8, #ff3b2f 40%, #a60f0a 100%); box-shadow: 0 .8vh 1.6vh rgba(0,0,0,.5); }
.dball.pop { animation: bpop .5s forwards; }
@keyframes bpop { to { opacity: 0; filter: blur(2px); } }

.dlobbyteams { display: flex; gap: 2vw; }
.dlobbyteams .lt { min-width: 18vw; padding: 1vh 1vw; border-radius: 1.4vh; display: grid; gap: .5vh; justify-items: center; }
.dlobbyteams .lt.blue { background: rgba(47,139,255,.22); border: .3vh solid var(--blue); }
.dlobbyteams .lt.red { background: rgba(255,74,74,.2); border: .3vh solid var(--red2); }
.dlobbyteams .lt b { font: 700 2.6vh Fredoka, sans-serif; }
.dlobbyteams .lt span { font-weight: 800; font-size: 2vh; }

/* ============================== PHONE ============================== */
.dphone .pmain { gap: 10px; }
.dphone .dsteps { width: 100%; max-width: 420px; display: grid; gap: 12px; }
.dstep { padding: 12px; border-radius: 16px; background: rgba(6,10,44,.86); border: 3px solid rgba(58,160,255,.6); display: grid; gap: 8px; }
.dstep.done { border-color: var(--green); box-shadow: 0 0 14px rgba(44,255,106,.5); }
.dstep h2 { margin: 0; font: 700 20px Fredoka, sans-serif; text-align: left; }
.dstep h2 small { font: 800 13px Nunito, sans-serif; color: #cbd8ff; margin-left: 6px; }
.dlanes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dlanes button { aspect-ratio: .8; border-radius: 12px; border: 3px solid rgba(255,255,255,.8); font: 700 26px Fredoka, sans-serif; color: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: transform .1s; }
.dlanes button:active { transform: scale(.92); }
.dlanes.mine button { background: linear-gradient(rgba(47,139,255,.5), rgba(20,70,200,.8)); }
.dlanes.mine.red button { background: linear-gradient(rgba(255,74,74,.5), rgba(170,20,20,.8)); }
.dlanes.theirs button { background: linear-gradient(rgba(255,74,74,.5), rgba(170,20,20,.8)); }
.dlanes.theirs.blue button { background: linear-gradient(rgba(47,139,255,.5), rgba(20,70,200,.8)); }
.dlanes button.on { border-color: #ffd84a; box-shadow: 0 0 16px #ffd84a; transform: scale(1.06); }
.dcatch { border: 3px solid #fff; border-radius: 14px; padding: 12px; font: 800 18px Nunito, sans-serif; color: #2b1600; background: linear-gradient(#a8ffc4, #2cd36a); cursor: pointer; }
.dcatch.on { border-color: #ffd84a; box-shadow: 0 0 16px #ffd84a; }
.dphone .tpick { display: flex; gap: 8px; justify-content: center; }
.dphone .tpick button { flex: 1; max-width: 160px; padding: 14px; border-radius: 14px; border: 3px solid rgba(255,255,255,.5); font: 800 18px Nunito, sans-serif; color: #fff; cursor: pointer; }
.dphone .tpick .b1 { background: #1452b8; } .dphone .tpick .b2 { background: #b81414; }
.dphone .tpick button.on { border-color: #ffd84a; box-shadow: 0 0 14px #ffd84a; }
.dphone .teampill.t1 { background: #1452b8; } .dphone .teampill.t2 { background: #b81414; }

/* ---- the duels (Kita's one-on-one rules) ---- */
.duels { position: absolute; left: 21vw; right: 21vw; top: 24vh; bottom: 13vh; display: grid; grid-template-columns: repeat(var(--n, 2), 1fr); gap: 1.4vh 1vw; align-content: center; }
.duel { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto auto; align-items: center; gap: .6vh .6vw;
  padding: 1.2vh 1vw; border-radius: 1.8vh; background: rgba(6,12,52,.88); border: .3vh solid rgba(255,255,255,.35); box-shadow: 0 0 2vh rgba(0,0,0,.4); animation: tpopin .45s backwards; }
.duel.t1 { border-color: var(--blue); } .duel.t2 { border-color: var(--red2); }
.duel.ko { box-shadow: 0 0 2.4vh rgba(255,52,72,.7); } .duel.safe { box-shadow: 0 0 2.4vh rgba(44,255,106,.6); }
.duel .side { display: grid; justify-items: center; gap: .2vh; position: relative; }
.duel .side .f { font-size: 5.4vh; line-height: 1; width: 7.6vh; height: 7.6vh; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.duel.t1 .thrower .f, .duel.t2 .dodger .f { box-shadow: 0 0 0 .45vh var(--blue); }
.duel.t2 .thrower .f, .duel.t1 .dodger .f { box-shadow: 0 0 0 .45vh var(--red2); }
.duel .side .n { font: 900 1.9vh Nunito, sans-serif; max-width: 12vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duel .side small { font: 900 1.25vh Nunito, sans-serif; letter-spacing: .1em; color: #cbd8ff; }
.duel .dots { display: flex; gap: .4vw; }
.duel .dots i { width: 1.8vh; height: 1.8vh; border-radius: 50%; background: rgba(255,255,255,.18); border: .2vh solid rgba(255,255,255,.4); }
.duel .dots i.hit { background: #ff3448; border-color: #ffb3bb; box-shadow: 0 0 1vh #ff3448; }
.duel .dots i.dodge { background: #2cff6a; border-color: #b6ffcb; box-shadow: 0 0 1vh #2cff6a; }
.duel .rdy { position: absolute; top: -1vh; right: 0; font-style: normal; font-size: 2.6vh; }
.duel .vs { font: 700 3vh Fredoka, sans-serif; color: var(--gold); }
.duel .spots { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6vw; }
.duel .spot { position: relative; height: 7vh; border-radius: 1vh; display: grid; place-items: center; background: rgba(255,255,255,.07); border: .25vh dashed rgba(255,255,255,.35); }
.duel .spot > span { font: 700 3.2vh Fredoka, sans-serif; color: rgba(255,255,255,.35); }
.duel .spot .dtk { position: absolute; font-size: 4.6vh; line-height: 1; color: #fff; filter: drop-shadow(0 .4vh .6vh rgba(0,0,0,.6)); }
.duel .spot .dtk.jump { animation: djump .7s ease-out; }
.duel .spot .dbl { position: absolute; width: 3.6vh; height: 3.6vh; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #ffb3a8, #ff3b2f 40%, #a60f0a 100%); box-shadow: 0 .5vh 1vh rgba(0,0,0,.5); right: 12%; top: 10%; }
.duel .spot .dbl.fly { animation: dfly 1s cubic-bezier(.3,.1,.6,1); }
.duel .spot.hitspot { background: rgba(255,52,72,.45); border: .3vh solid #ff3448; }
.duel .spot.missspot { background: rgba(255,255,255,.1); }
.duel .result { grid-column: 1 / -1; text-align: center; font: 900 2.4vh Nunito, sans-serif; min-height: 3vh; }
.duel .result.hit { color: #ff6b7a; } .duel .result.dodge { color: #5dff9a; }
@keyframes djump { 0% { transform: translateY(0) scale(.6); opacity: .3; } 50% { transform: translateY(-3vh) scale(1.1); opacity: 1; } 100% { transform: none; } }
@keyframes dfly { 0% { transform: translate(-30vw, -12vh) scale(.5); opacity: 0; } 20% { opacity: 1; } 100% { transform: none; } }
.bench { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%); padding: .6vh 1.4vw; border-radius: 99px; background: rgba(6,10,44,.85); font: 800 1.9vh Nunito, sans-serif; white-space: nowrap; }
/* phone: pick a number */
.dnum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; }
.dnum button { aspect-ratio: .9; border-radius: 18px; border: 4px solid rgba(255,255,255,.85); font: 700 52px Fredoka, sans-serif; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dnum.throw button { background: linear-gradient(#ff6a5a, #b81414); } .dnum.dodge button { background: linear-gradient(#5aa8ff, #1452b8); }
.dnum button small { display: block; font: 800 13px Nunito, sans-serif; }
.dnum button.on { border-color: #ffd84a; box-shadow: 0 0 22px #ffd84a; transform: scale(1.06); }
.dvs { display: flex; align-items: center; gap: 10px; justify-content: center; font: 800 18px Nunito, sans-serif; padding: 8px 14px; border-radius: 14px; background: rgba(6,10,44,.86); }
.dvs .f { font-size: 34px; } .dvs .sc { color: #ffd84a; font: 700 20px Fredoka, sans-serif; }

/* ---- the spotlight: one matchup at a time, two boards of boxes facing each other ---- */
.arena { position: absolute; left: 21vw; right: 21vw; top: 23vh; height: 50vh; display: grid; justify-items: center; align-content: start; gap: 1.6vh; }
.avs { display: flex; align-items: center; gap: 1.6vw; font: 900 3vh Nunito, sans-serif; padding: .8vh 2vw; border-radius: 99px; background: rgba(6,10,44,.9); white-space: nowrap; }
.avs b { font: 700 3.6vh Fredoka, sans-serif; color: var(--gold); }
.boards { display: flex; align-items: center; gap: 2vw; }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1vh; padding: 1.2vh; border-radius: 2vh; background: rgba(6,12,52,.85); }
.board.t1 { border: .4vh solid var(--blue); box-shadow: 0 0 2.4vh rgba(47,139,255,.6); }
.board.t2 { border: .4vh solid var(--red2); box-shadow: 0 0 2.4vh rgba(255,74,74,.6); }
.board .box { position: relative; width: 10vh; height: 10vh; border-radius: 1.2vh; display: grid; place-items: center; background: rgba(255,255,255,.08); border: .3vh solid rgba(255,255,255,.35); transition: background .3s, box-shadow .3s; }
.board .box span { font: 700 3.4vh Fredoka, sans-serif; color: rgba(255,255,255,.3); }
.board .box .who { position: absolute; font-style: normal; font-size: 6vh; line-height: 1; filter: drop-shadow(0 .5vh .8vh rgba(0,0,0,.6)); }
.board .box .who.jump { animation: djump .7s ease-out; }
.board .box .who.ko { animation: dko .7s forwards; }
.board .box.hit { background: rgba(255,52,72,.6); box-shadow: 0 0 3vh #ff3448; border-color: #ffb3bb; }
.board .box.miss { background: rgba(255,255,255,.18); box-shadow: 0 0 2vh rgba(255,255,255,.5); }
.arena .mid { font-size: 5vh; }
@keyframes dko { to { transform: rotate(-80deg) translateY(2vh); filter: grayscale(1); opacity: .6; } }
.aresult { font: 900 3.6vh Nunito, sans-serif; min-height: 5vh; padding: .6vh 2vw; border-radius: 99px; background: rgba(6,10,44,.85); }
.aresult.hit { color: #ff6b7a; box-shadow: 0 0 0 .3vh #ff3448; } .aresult.miss { color: #5dff9a; box-shadow: 0 0 0 .3vh #2cff6a; }
.aball { position: fixed; left: -2.8vh; top: -2.8vh; width: 5.6vh; height: 5.6vh; border-radius: 50%; z-index: 30; pointer-events: none;
  background: radial-gradient(circle at 32% 30%, #ffb3a8, #ff3b2f 40%, #a60f0a 100%); box-shadow: 0 .8vh 1.6vh rgba(0,0,0,.5); }
.aball.pop { animation: bpop .5s forwards; }
.matchups { position: absolute; left: 21vw; right: 21vw; bottom: 14.5vh; display: flex; flex-wrap: wrap; justify-content: center; gap: .8vh .6vw; }
.matchups .mu { display: grid; padding: .6vh 1vw; border-radius: 1.2vh; background: rgba(6,10,44,.88); border: .25vh solid rgba(255,255,255,.3); }
.matchups .mu b { font: 900 1.7vh Nunito, sans-serif; white-space: nowrap; } .matchups .mu small { font: 800 1.5vh Nunito, sans-serif; color: #cbd8ff; }
.matchups .mu.on { border-color: var(--gold); box-shadow: 0 0 1.6vh var(--gold); }
.matchups .mu.ko { border-color: #ff3448; } .matchups .mu.draw { border-color: #8899cc; }
.dtv .bench { bottom: 21vh; }
/* phone: your board of boxes */
.pboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; padding: 12px; border-radius: 18px; }
.pboard.mine { background: rgba(20,70,200,.35); border: 3px solid #5aa8ff; } .pboard.mine.red { background: rgba(170,20,20,.35); border-color: #ff6a5a; }
.pboard.theirs { background: rgba(170,20,20,.35); border: 3px solid #ff6a5a; } .pboard.theirs.blue { background: rgba(20,70,200,.35); border-color: #5aa8ff; }
.pboard button { aspect-ratio: 1; border-radius: 14px; border: 3px solid rgba(255,255,255,.8); background: rgba(255,255,255,.12); color: #fff; font: 700 34px Fredoka, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pboard button.on { border-color: #ffd84a; background: rgba(255,216,74,.35); box-shadow: 0 0 18px #ffd84a; transform: scale(1.05); }
.pboard button.hit { background: rgba(255,52,72,.7); border-color: #ffb3bb; } .pboard button.me { background: rgba(255,255,255,.35); }

.dphone .tpick button:disabled { opacity: .45; }
.dphone .tpick button small { font-size: 12px; }

/* the boards lie flat on the arena floor (Kita 2026-10-05: "more interactive, like on the floor") */
.arena { top: 22vh; height: 56vh; }
.arena .boards { gap: 0; transform: perspective(100vh) rotateX(44deg); transform-origin: 50% 70%; transform-style: preserve-3d; margin-top: 2vh; }
.arena .board { transform-style: preserve-3d; padding: 1.4vh; background: rgba(6,12,52,.55); }
.arena .board .box { width: 13vh; height: 13vh; transform-style: preserve-3d; background: rgba(255,255,255,.1); border-width: .4vh; }
.arena .board.t1 .box { background: linear-gradient(145deg, rgba(47,139,255,.45), rgba(20,70,200,.65)); border-color: rgba(150,200,255,.9); box-shadow: 0 0 1.4vh rgba(47,139,255,.7), inset 0 0 1.2vh rgba(150,200,255,.4); }
.arena .board.t2 .box { background: linear-gradient(145deg, rgba(255,74,74,.4), rgba(170,20,20,.65)); border-color: rgba(255,180,180,.9); box-shadow: 0 0 1.4vh rgba(255,74,74,.7), inset 0 0 1.2vh rgba(255,180,180,.4); }
.arena .board .box span { font-size: 4.4vh; color: rgba(255,255,255,.35); }
/* players stand up off the floor */
.arena .board .box .who { font-size: 8vh; transform-origin: 50% 100%; transform: rotateX(-44deg) translateY(-2vh); bottom: 30%; }
.arena .board .box .who.jump { animation: djump3 .7s ease-out; }
.arena .board .box .who.ko { animation: dko3 .8s forwards; }
@keyframes djump3 { 0% { transform: rotateX(-44deg) translateY(-8vh) scale(.6); opacity: .2; } 60% { transform: rotateX(-44deg) translateY(-4vh) scale(1.1); opacity: 1; } 100% { transform: rotateX(-44deg) translateY(-2vh); } }
@keyframes dko3 { to { transform: rotateX(-44deg) translateY(0) rotate(-85deg); filter: grayscale(1); opacity: .6; } }
/* the court's centre line between the two boards */
.arena .mid { width: 3vw; align-self: stretch; margin: 0 1vw; background: linear-gradient(90deg, transparent 44%, #fff 44%, #fff 56%, transparent 56%); filter: drop-shadow(0 0 1.2vh #fff); font-size: 0; }
/* the red ball in the thrower's hands, and where it lands */
.arena .box .held { position: absolute; width: 4.4vh; height: 4.4vh; border-radius: 50%; right: 8%; top: 8%; transform: rotateX(-44deg) translateY(-5vh);
  background: radial-gradient(circle at 32% 30%, #ffb3a8, #ff3b2f 40%, #a60f0a 100%); box-shadow: 0 .6vh 1.2vh rgba(0,0,0,.5); animation: hold 1s ease-in-out infinite alternate; }
@keyframes hold { to { transform: rotateX(-44deg) translateY(-6.5vh); } }
.arena .box .splat { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(255,59,47,.85), rgba(255,59,47,0) 70%); animation: splat .6s ease-out; }
.arena .box.miss .splat { background: radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%); }
@keyframes splat { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: .8; } }
.arena .board .box.hit { background: rgba(255,52,72,.75); box-shadow: 0 0 4vh #ff3448; }
.aresult { position: relative; z-index: 3; }

/* the shrinking floor: fallen boxes drop away */
.arena .board .box { transition: transform 1s cubic-bezier(.5,0,.9,.4), opacity 1s, background .3s; }
.arena .board .box.gone { transform: translateZ(-14vh); opacity: 0; }

/* phone: throwing or dodging — impossible to mix up */
.prole { width: 100%; max-width: 420px; display: grid; justify-items: center; gap: 2px; padding: 10px 12px; border-radius: 20px; color: #fff; animation: rolein .4s; }
.prole .ic { font-size: 40px; line-height: 1; }
.prole b { font: 700 28px/1.05 Fredoka, sans-serif; letter-spacing: .02em; }
.prole small { font: 800 14px Nunito, sans-serif; opacity: .95; text-align: center; }
.prole.throw { background: linear-gradient(#ff5a4a, #b3120c); box-shadow: 0 0 26px rgba(255,60,40,.8); border: 3px solid #ffd0c8; }
.prole.dodge { background: linear-gradient(#3aa0ff, #0d3fa8); box-shadow: 0 0 26px rgba(58,160,255,.8); border: 3px solid #cfe6ff; }
@keyframes rolein { from { transform: scale(.7); opacity: 0; } }
body.mode-throw { box-shadow: inset 0 0 0 8px #ff3b2f; }
body.mode-throw::before, body.mode-dodge::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body.mode-throw::before { background: radial-gradient(circle at 50% 30%, rgba(255,40,30,.35), rgba(120,0,0,.55)); }
body.mode-dodge::before { background: radial-gradient(circle at 50% 30%, rgba(40,140,255,.35), rgba(0,30,120,.55)); }
body.mode-dodge { box-shadow: inset 0 0 0 8px #2f8bff; }
.dphone .pmain { position: relative; z-index: 1; }
.pboard button { display: grid; place-items: center; gap: 0; }
.pboard button .n { font: 700 30px Fredoka, sans-serif; } .pboard button .i { font-size: 22px; }
.pboard.aim button { background: rgba(255,80,60,.25); } .pboard.hide button { background: rgba(60,140,255,.25); }
.pboard button.gone { opacity: .15; background: #05081e !important; border-color: rgba(255,255,255,.15); font-size: 22px; }
.dphone .dlogo { width: min(220px, 60vw); }
.dphone .pclock { width: 72px; height: 72px; } .dphone .pclock b { font-size: 30px; }