#riftView .rift-scroll.action-game { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.rift-action-shell {
  display:flex; flex-direction:column; flex:1 1 0; min-width:0; min-height:0; width:100%;
  max-width:1440px; margin-inline:auto; padding:8px 12px calc(6px + env(safe-area-inset-bottom)); gap:7px;
}
.rift-action-top { display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0; }
.rift-action-top>div:first-child { flex:1; min-width:0; }
.rift-action-top strong { display:block; font-size:14px; }
.rift-action-top small { display:block; color:var(--rift-dim); font-size:11px; line-height:1.35; }
.rift-action-life { width:clamp(100px,23vw,250px); }
.rift-action-life>span { display:block; font-size:12px; white-space:nowrap; margin-bottom:4px; }
#riftActionMeter { height:7px; border-radius:4px; overflow:hidden; background:#4d514b; }
#riftActionMeter i { display:block; height:100%; background:#a8c29b; transition:width .1s; }
.rift-action-top>button { min-height:36px; padding:5px 9px; font-size:12px; }
.rift-action-stage {
  position:relative; flex:1 1 0; min-height:150px; min-width:0; overflow:hidden;
  border:1px solid #65746e; border-radius:8px; background:#25323a; container:rift-stage / inline-size;
}
#riftCanvas { display:block; width:100%; height:100%; position:absolute; inset:0; touch-action:none; }
#riftCanvas:focus { outline:none; }
.rift-action-controls { position:absolute; inset:0; z-index:1; pointer-events:none; user-select:none; -webkit-user-select:none; }
.rift-view .rift-action-controls button {
  pointer-events:auto; touch-action:none; -webkit-touch-callout:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-width:0; min-height:0; padding:0; border-radius:50%; font:inherit;
}
.rift-view .rift-joystick {
  position:absolute; left:max(12px,env(safe-area-inset-left)); bottom:14px;
  width:clamp(74px,25cqi,132px); aspect-ratio:1; height:auto;
  border:2px solid #98cbde75;
  background:radial-gradient(circle,#7ba5bd24 0 35%,#1c354b78 36% 65%,#85c2db1a 66% 70%,#0a1d3255 71%);
  box-shadow:inset 0 0 15px #b5dfff1f,0 2px 15px #07111d50;
}
.rift-stick-arrows { color:#c6dce59c; position:absolute; inset:0; display:grid; place-items:center; font-size:26px; letter-spacing:6px; }
.rift-stick-thumb {
  position:absolute; width:43%; height:43%; left:calc(50% + var(--stick-x,0%)); top:calc(50% + var(--stick-y,0%));
  transform:translate(-50%,-50%); border-radius:50%;
  border:2px solid #b1d9ecb0; background:radial-gradient(circle at 35% 26%,#9abfd5d9,#315b7dc9 72%);
  box-shadow:0 2px 12px #08142390,inset 0 0 5px #d6f5ff55;
}
.rift-joystick>small { position:absolute; top:102%; color:#d2e6eea3; font-size:9px; }
.rift-joystick.pressed { border-color:#d6f1ff!important; }
.rift-joystick.pressed .rift-stick-thumb { box-shadow:0 0 15px #80d8ff60; }
.rift-abilities {
  position:absolute; right:max(12px,env(safe-area-inset-right)); bottom:10px;
  width:clamp(128px,40cqi,196px); aspect-ratio:1.14; pointer-events:none;
}
.rift-view .rift-abilities button {
  position:absolute; border:2px solid #92bce8a8; color:#e7f3ff;
  background:radial-gradient(circle at 37% 25%,#4e81a9d9,#132b45dd 72%);
  box-shadow:inset 0 0 0 3px #091a3160,inset 0 0 14px #93d7ff2b,0 3px 10px #06101c80;
}
.rift-view .rift-abilities .rift-skill { width:31%; aspect-ratio:1; }
.rift-view .rift-abilities .rift-action-attack {
  width:47%; aspect-ratio:1; right:0; bottom:0;
  border-color:#ecd29bd6; border-width:3px; color:#fff1c4;
  background:radial-gradient(circle at 35% 20%,#c19b53e8,#6d4f24eb 60%,#372c1fea);
  box-shadow:inset 0 0 0 3px #ffdb8b24,inset 0 0 15px #ffe3a12b,0 0 18px #efd69c22,0 4px 10px #07101da0;
}
.rift-skill-jump { right:10%; top:0; }
.rift-skill-dodge { left:3%; top:25%; }
.rift-view .rift-abilities .rift-skill-heal { width:25%; left:19%; bottom:0; border-color:#9bceb080; color:#d4ffe4; background:radial-gradient(circle at 30% 25%,#497c6cd9,#183c36e8); }
.rift-abilities svg { width:42%; height:42%; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.rift-abilities b { font-size:clamp(9px,2.4cqi,13px); line-height:1.1; font-weight:650; z-index:1; }
.rift-abilities small { font-size:8px; line-height:1; opacity:.55; }
.rift-abilities .rift-action-attack svg { width:48%; height:48%; filter:drop-shadow(0 0 5px #ffe4b344); }
.rift-abilities .rift-action-attack b { font-size:clamp(12px,3cqi,17px); }
.rift-view .rift-abilities button.pressed { filter:brightness(1.3); box-shadow:inset 0 0 17px #c6efff50,0 0 16px #9bdcff55; }
.rift-view .rift-abilities .rift-action-attack.pressed { box-shadow:inset 0 0 18px #fff0b567,0 0 24px #ffcb615c; }
.rift-cooldown { position:absolute; inset:0; border-radius:50%; display:grid; place-items:center; pointer-events:none; background:conic-gradient(#061426c9 calc(var(--cooldown,0) * 360deg),transparent 0); font-size:17px; color:#fff; text-shadow:0 1px 3px #000; }
.rift-potion-count { position:absolute; top:0; right:-3px; min-width:17px; height:17px; padding:1px 3px; border-radius:9px; background:#1d3629; border:1px solid #99be9f; font-size:10px; line-height:13px; color:#d8f7df; }
.rift-view .rift-abilities button:disabled { opacity:.4; }
.rift-action-message { min-height:16px; margin:0; color:var(--rift-dim); font-size:11px; line-height:1.4; flex-shrink:0; }
.rift-action-overlay { position:absolute; inset:0; z-index:3; display:grid; place-items:center; overflow:auto; padding:12px; background:#17202799; }
.rift-action-overlay[hidden] { display:none; }
.rift-action-overlay section { width:min(100%,350px); padding:18px; border:1px solid #7f7f69; border-radius:10px; background:#293239f5; text-align:center; }
.rift-action-overlay h2 { font-size:22px; margin:0 0 7px; color:#ebd9b8; }
.rift-action-overlay p { font-size:12px; line-height:1.6; color:#d3d8c9; margin:0 0 10px; }
.rift-action-overlay button { margin:3px; }
.rift-action-overlay button[hidden] { display:none; }
.rift-view:fullscreen { height:100dvh; width:100vw; max-height:100dvh; background:#20242a; }
.rift-view:fullscreen .rift-action-shell { max-width:none; }
.rift-action-route { display:flex; align-items:center; gap:12px; padding:3px 8px 7px; flex-shrink:0; }
.rift-action-route small { flex:none; color:var(--rift-dim); font-size:10px; }
.rift-action-route>div { flex:1; height:3px; position:relative; margin-right:22px; background:#697266; }
.rift-action-route i { position:absolute; top:-2px; width:6px; height:7px; background:#cc8e75; }
.rift-action-route i.cleared { background:#586253; opacity:.5; }
.rift-action-route b { position:absolute; top:-3px; width:7px; height:9px; background:#ecdfac; border:1px solid #222; transform:translateX(-3px); }
.rift-action-route span { position:absolute; right:-27px; top:-6px; font-size:9px; color:#c8d2bd; }
.rift-action-equipment { display:none; }
@media(max-width:600px) {
  .rift-action-shell { padding:6px 6px calc(4px + env(safe-area-inset-bottom)); gap:5px; }
  .rift-action-top { flex-wrap:wrap; gap:5px 8px; }
  .rift-action-top>div:first-child { min-width:135px; }
  .rift-action-life { width:auto; flex:1; min-width:100px; }
  .rift-action-top>button { min-height:32px; font-size:11px; padding-inline:7px; }
  .rift-action-message { font-size:10px; min-height:14px; }
  .rift-abilities small { display:none; }
}
@media(max-width:355px) {
  .rift-action-top strong { font-size:12px; }
  .rift-action-top small { font-size:10px; }
  .rift-action-life { flex:none; width:97px; min-width:0; }
  .rift-action-top>div:first-child { min-width:108px; }
}
@media(orientation:portrait) {
  .rift-action-shell { justify-content:flex-start; }
  .rift-action-stage { flex:0 1 auto; height:calc(100cqi * .95); max-height:60svh; }
  .rift-action-equipment { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding-block:6px; margin-block:auto; }
  .rift-action-equipment>div { display:grid; justify-items:center; gap:3px; padding:8px 4px; background:#2a3235; border:1px solid #505e54; border-radius:7px; min-width:0; }
  .rift-action-equipment img { width:36px; height:36px; image-rendering:pixelated; }
  .rift-action-equipment span { font-size:10px; color:#e5ddc9; overflow-wrap:anywhere; }
  .rift-action-equipment b { font-size:10px; color:#a6b79e; }
}
@media(max-height:680px) { .rift-action-equipment { display:none; } .rift-action-route { padding-block:1px 3px; } }
@media(max-height:540px) and (orientation:landscape) {
  #riftView .rift-header { padding-block:2px; }
  .rift-action-shell { padding-top:4px; gap:4px; }
  .rift-action-top strong { font-size:12px; }
  .rift-action-top small { display:none; }
  .rift-action-top button { min-height:30px; padding-block:3px; }
  .rift-action-message,.rift-action-route { display:none; }
  .rift-action-stage { min-height:120px; }
  .rift-view .rift-joystick { width:80px; bottom:8px; }
  .rift-abilities { width:135px; bottom:6px; }
  .rift-action-overlay section { padding:10px; }
  .rift-action-overlay h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { #riftActionMeter i { transition:none; } }
/* Active skills float above the attack cluster, without reserving any floor area. */
.rift-spellbar { position:absolute; right:max(12px,env(safe-area-inset-right)); bottom:clamp(136px,37cqi,190px); display:flex; gap:7px; pointer-events:none; }
.rift-view .rift-spellbar button { position:relative; width:clamp(38px,11cqi,54px); aspect-ratio:1; border:1px solid var(--skill-color); background:radial-gradient(circle at 40% 25%,#44617bd9,#102437bf); color:var(--skill-color); box-shadow:inset 0 0 12px #bde3ff1c,0 0 8px #091724; }
.rift-spellbar button>span { font-size:21px; line-height:1; }
.rift-spellbar b { font-size:9px; font-weight:500; z-index:1; white-space:nowrap; }
.rift-spellbar small { position:absolute; left:2px; top:0; font-size:8px; }
.rift-spellbar .rift-no-mana { opacity:.6; }
.rift-boss-hud { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:min(65%,340px); pointer-events:none; text-align:center; text-shadow:0 1px 3px #000; z-index:1; }
.rift-boss-hud[hidden] { display:none; }
.rift-boss-hud strong { font-size:12px; color:#ffe0b0; }
.rift-boss-hud>div { height:7px; margin:3px 0; background:#221a1a; border:1px solid #e4a97c66; border-radius:3px; overflow:hidden; }
.rift-boss-hud i { display:block; height:100%; background:linear-gradient(90deg,#b53c4b,#e89f72); }
.rift-boss-hud small { font-size:10px; color:#ffe3bf; background:#14212c99; padding:1px 4px; }
.rift-action-life { width:clamp(160px,28vw,320px); }

/* Portrait and three compact resource bars share the battlefield coordinate space. */
.rift-vital-hud { position:absolute; z-index:2; left:10px; top:10px; width:min(340px,calc(100% - 20px)); display:flex; align-items:flex-start; pointer-events:none; filter:drop-shadow(0 2px 2px #0008); }
.rift-action-equipment { grid-template-columns:repeat(4,minmax(0,1fr)); }
.rift-vital-portrait { position:relative; z-index:1; flex:none; width:72px; height:72px; border:5px solid #8b4d24; border-radius:50%; background:radial-gradient(circle,#e6a84b,#6d361e); box-shadow:0 0 0 2px #30201b,inset 0 0 0 2px #f1c576; }
.rift-vital-portrait::before { content:"◆"; position:absolute; top:-17px; left:calc(50% - 9px); color:#ffe09a; font-size:18px; text-shadow:0 2px #5e391c; z-index:2; }
.rift-vital-portrait img { width:100%; height:100%; object-fit:contain; border-radius:50%; }
.rift-vital-portrait>b { position:absolute; left:50%; bottom:-10px; transform:translateX(-50%); min-width:23px; padding:1px 3px; color:#ffe3a0; text-shadow:0 1px #2f1b14; text-align:center; background:#693a20; border:1px solid #d9a148; border-radius:3px; font:800 10px/1.1 system-ui; }
.rift-vital-bars { min-width:0; flex:1; padding-top:1px; margin-left:6px; }
.rift-vital-hud .rift-vital-bar,.rift-vital-hud #riftActionMeter { height:23px; display:flex; align-items:center; justify-content:space-between; gap:4px; position:relative; border:2px solid #251d1d; border-radius:6px; overflow:hidden; background:#28364a; box-shadow:inset 0 0 0 1px #617080; color:#fff4c6; padding:0 6px; text-shadow:1px 1px 1px #352922; white-space:nowrap; }
.rift-vital-hud .rift-vital-bar>i { position:absolute; inset:0 auto 0 0; width:0; height:100%; transition:width .12s linear; box-shadow:inset 0 2px 2px #fff5,inset 0 -2px 2px #0004; }
.rift-vital-hud #riftActionMeter>i { background:linear-gradient(#e86442,#c23324 55%,#9e201a); }
.rift-vital-hud .mp>i { background:linear-gradient(#62d9eb,#26aacb 55%,#15809e); }
.rift-vital-hud .exp>i { background:linear-gradient(#f1c86b,#dba64b 55%,#b88234); }
.rift-vital-hud .rift-vital-bar>:is(span,b) { position:relative; z-index:1; font:700 11px/1 system-ui; }
.rift-vital-hud .exp { width:92%; height:18px; }
.rift-vital-hud .exp>:is(span,b) { font-size:10px; }
.rift-boss-hud { top:90px; width:min(65%,380px); }
.rift-boss-hud>div { height:12px; border:2px solid #302023; border-radius:8px; background:#2a183d; box-shadow:0 0 0 1px #a07855; }
.rift-boss-hud i { background:linear-gradient(#57e8cf,#19aeaa 60%,#107b88); }
@container rift-stage (min-width:900px) { .rift-boss-hud { top:12px; left:65%; width:33%; max-width:420px; } }
@container rift-stage (max-width:480px) {
 .rift-vital-hud { width:min(272px,calc(100% - 16px)); left:8px; top:8px; }
 .rift-vital-portrait { width:57px; height:57px; border-width:4px; }
 .rift-vital-hud .rift-vital-bar,.rift-vital-hud #riftActionMeter { height:19px; padding-inline:4px; }
 .rift-vital-hud .rift-vital-bar>:is(span,b) { font-size:9px; }
 .rift-vital-hud .exp { height:16px; }
 .rift-boss-hud { top:76px; width:76%; }
}
.rift-skill-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.rift-skill-cards article { border:1px solid var(--skill-color); background:linear-gradient(140deg,#344454,#202c37); padding:20px; border-radius:10px; }
.rift-skill-cards h2 { font-size:20px; margin-block:10px; }
.rift-skill-cards h2 span { color:var(--skill-color); font-size:14px; }
.rift-skill-cards p { color:#c5ced5; font-size:13px; line-height:1.6; }
.rift-skill-emblem { width:58px; height:58px; display:grid; place-items:center; border:1px solid var(--skill-color); color:var(--skill-color); box-shadow:inset 0 0 25px #9acde722; font-size:35px; margin-bottom:12px; border-radius:50%; }
.rift-banner>button { margin-right:8px; margin-bottom:6px; }
.rift-item small,.rift-boss-preview { color:var(--rift-dim); font-size:11px; line-height:1.5; }
@media(max-width:600px) {
  .rift-skill-cards { grid-template-columns:1fr; }
  .rift-action-life { flex-basis:100%; order:1; }
  .rift-action-life>span { font-size:10px; }
}
@media(max-height:540px) and (orientation:landscape) {
  .rift-spellbar { bottom:128px; gap:5px; }
  .rift-view .rift-spellbar button { width:37px; }
  .rift-spellbar button>span { font-size:16px; }
  .rift-spellbar b { font-size:8px; }
  .rift-action-life { flex-basis:auto; order:0; }
}
.rift-view .rift-action-controls .rift-dive-button { position:absolute; left:max(22px,env(safe-area-inset-left)); bottom:clamp(103px,29cqi,162px); width:44px; height:44px; border:1px solid #a4e5f2aa; background:#1c4f6dbb; color:#e2faff; }
.rift-dive-button b { font-size:19px; line-height:1; }
.rift-dive-button small { font-size:8px; }
@media(max-height:540px) and (orientation:landscape){.rift-view .rift-action-controls .rift-dive-button { bottom:99px; width:38px; height:38px; }}

/* v12: a five-layer boss life bar with dark spear ornamentation. */
@font-face { font-family:RiftDamageHand; src:url('fonts/RiftBattleLatin-v13.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
.rift-boss-hud { text-align:left; padding-right:38px; box-sizing:border-box; }
.rift-boss-hud strong { display:block; padding-left:9px; color:#e78bff; font:900 15px/1.2 system-ui; -webkit-text-stroke:.5px #291430; text-shadow:1px 2px #180f22,0 0 7px #28003e; }
.rift-boss-hud>.rift-boss-track { position:relative; height:18px; margin:5px 0 4px; padding:2px 3px; border:2px solid #080d17; border-radius:25% 12px 12px 25%; background:linear-gradient(#a33cff,#622cc5 65%,#41198f); box-shadow:0 0 0 1px #8e91a3,inset 0 2px 2px #140627; overflow:visible; }
.rift-boss-track::before { content:''; position:absolute; z-index:2; left:-25px; top:-9px; width:51px; height:35px; background:linear-gradient(160deg,#526171,#0a0e16 40%,#03060b 75%,#616a72); clip-path:polygon(0 45%,32% 33%,16% 0,51% 21%,85% 13%,70% 35%,100% 46%,71% 60%,89% 86%,49% 76%,21% 100%,30% 63%); filter:drop-shadow(0 1px 1px #000); }
.rift-boss-track::after { content:''; position:absolute; right:-10px; top:1px; width:16px; height:12px; background:linear-gradient(#646376,#10121e 50%,#03060c); clip-path:polygon(0 0,70% 20%,100% 50%,70% 80%,0 100%,18% 50%); }
.rift-boss-track>i { min-width:0; border-radius:8px; background:linear-gradient(#62eddf,#20c4bd 55%,#0c8b9a); box-shadow:inset 0 1px #c0fff5,inset 0 -2px #006779; }
.rift-boss-hud[data-layers="1"]>.rift-boss-track { background:#2b203b; }
.rift-boss-hud>.rift-boss-layers { position:absolute; right:0; top:19px; color:#ffb56b; font:700 26px/1 RiftDamageHand,cursive; -webkit-text-stroke:1px #34211b; text-shadow:1px 2px #1b1116; }
.rift-boss-hud small { display:block; width:fit-content; max-width:100%; padding:2px 5px; border-radius:3px; font-size:10px; line-height:1.3; }
@container rift-stage (max-width:480px) { .rift-boss-hud strong { font-size:12px; } .rift-boss-hud>.rift-boss-layers { font-size:23px; top:17px; } .rift-boss-hud>.rift-boss-track { height:16px; } }

@font-face { font-family:RiftDamageHand; src:url('fonts/RiftBattleChinese-v13.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; unicode-range:U+51FB,U+66B4,U+95EA,U+907F,U+6765,U+88AD; }

/* Raster scenery and a screen-edge cue between complete encounter waves. */
.rift-forward { position:absolute; z-index:3; right:max(8px,env(safe-area-inset-right)); top:50%; transform:translateY(-50%); width:60px; text-align:center; pointer-events:none; user-select:none; animation:rift-forward-pulse 1.05s ease-in-out infinite; }
.rift-forward[hidden],.rift-art-loading[hidden] { display:none!important; }
.rift-forward img { display:block; width:60px; height:36px; object-fit:contain; filter:drop-shadow(0 2px 3px #392211); }
.rift-forward span { display:block; color:#fff1ab; font:900 16px/1.25 system-ui; text-shadow:0 2px 2px #332015,1px 0 #332015,-1px 0 #332015; }
@keyframes rift-forward-pulse { 0%,100% { transform:translate(-4px,-50%); } 50% { transform:translate(2px,-50%); } }
.rift-art-loading { position:absolute; z-index:6; left:50%; top:48%; transform:translate(-50%,-50%); background:#142330ed; border:1px solid #b8c7d0; border-radius:10px; padding:14px 20px; color:#eef4f7; font-size:14px; text-align:center; box-shadow:0 8px 30px #0005; }
.rift-art-loading button { display:block; margin:10px auto 0; }
@media(max-height:540px) and (orientation:landscape) { .rift-forward { width:42px; top:28%; } .rift-forward img { width:42px; height:25px; } .rift-forward span { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .rift-forward { animation:none; } }

.rift-art-loading button[hidden] { display:none!important; }