/* Native controls keep their input targets; all decorative layers ignore input. */
[data-combat-skin=forge] {
  --cc-iron:url('../assets/ui/combat-controls-v1/iron.png');
  --cc-iron-hover:url('../assets/ui/combat-controls-v1/iron-hover.png');
  --cc-iron-down:url('../assets/ui/combat-controls-v1/iron-down.png');
  --cc-bronze:url('../assets/ui/combat-controls-v1/bronze.png');
  --cc-bronze-hover:url('../assets/ui/combat-controls-v1/bronze-hover.png');
  --cc-bronze-down:url('../assets/ui/combat-controls-v1/bronze-down.png');
  --cc-metal:url('../assets/ui/combat-controls-v1/brass.png');
  --cc-hide:url('../assets/ui/combat-controls-v1/leather.png');
}
#touch-root[data-combat-skin=forge] .act-btn,
#touch-root[data-combat-skin=forge] #btn-say,
#touch-root[data-combat-skin=forge] #btn-stance,
#hud[data-combat-skin=forge] .cc-control {
  --cc-frame:var(--cc-iron); --cc-hover:var(--cc-iron-hover); --cc-down:var(--cc-iron-down);
  box-sizing:border-box; isolation:isolate; border:0; border-radius:3px;
  color:#e9dfbd; background:#151a16; box-shadow:0 3px 0 #030604,0 5px 8px #0009;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
#touch-root[data-combat-skin=forge] .act-btn::before {
  content:''; position:absolute; inset:3px; z-index:0; pointer-events:none;
  background:linear-gradient(#34382b9c,#080e0be8),var(--cc-hide) center/96px;
  box-shadow:inset 0 1px #d9ce9b2b,inset 0 -4px #0008; image-rendering:pixelated;
}
#hud[data-combat-skin=forge] .cc-control { position:relative; }
#touch-root[data-combat-skin=forge] .cc-control::after,
#hud[data-combat-skin=forge] .cc-control::after {
  content:''; position:absolute; inset:0; z-index:6; pointer-events:none;
  border:6px solid transparent; border-image:var(--cc-frame) 16 / 6px / 0 stretch;
  image-rendering:pixelated;
}
#touch-root[data-combat-skin=forge] .cc-control:focus-visible,
#hud[data-combat-skin=forge] .cc-control:focus-visible { outline:2px solid #edd293; outline-offset:3px; }
@media (hover:hover) {
  #touch-root[data-combat-skin=forge] .cc-control:hover::after,
  #hud[data-combat-skin=forge] .cc-control:hover::after { border-image-source:var(--cc-hover); }
}
#touch-root[data-combat-skin=forge] .cc-control:is(:active,.cc-held)::after,
#hud[data-combat-skin=forge] .cc-control:is(:active,.cc-held)::after { border-image-source:var(--cc-down); }
#touch-root[data-combat-skin=forge] .act-btn:is(:active,.cc-held)::before { filter:brightness(.7); box-shadow:inset 0 3px 5px #000b; }
#touch-root[data-combat-skin=forge] .act-btn:is(:active,.cc-held) .cc-weapon-icon { transform:translate(-50%,-50%) translateY(1px); }
#touch-root[data-combat-skin=forge] .act-btn > .abyss-skill-icon {
  inset:6px; width:calc(100% - 12px)!important; height:calc(100% - 12px)!important; z-index:1;
  image-rendering:pixelated; object-fit:cover; border-radius:0;
}
#touch-root[data-combat-skin=forge] .skill-btn.has-art .act-label {
  left:6px; right:6px; bottom:6px; z-index:5; margin:0; padding:10px 1px 2px;
  font-size:10px; line-height:1.2; color:#f8edce; background:linear-gradient(#05090600,#050906e6 70%);
}
#touch-root[data-combat-skin=forge] .cd-mask { inset:6px; z-index:3; background:#030603bc; }
#touch-root[data-combat-skin=forge] .chg-mask { inset:6px; z-index:4; background:linear-gradient(0deg,#e8b75bab,#eedaa329); }
#touch-root[data-combat-skin=forge] .cd-num {
  inset:6px; z-index:8; font-size:21px; font-weight:700; color:#fff2cf;
  text-shadow:0 2px #000,1px 0 #000,-1px 0 #000,0 -1px #000;
}
#touch-root[data-combat-skin=forge] .act-btn.charging { box-shadow:0 0 0 1px #d4b270,0 0 12px #dfa32b55; }
#touch-root[data-combat-skin=forge] .cc-cooling .act-label { opacity:.62; }
#touch-root[data-combat-skin=forge] .cc-empty { opacity:.55; }
#touch-root[data-combat-skin=forge] .cc-empty::before { background:repeating-linear-gradient(135deg,#ffffff04 0 1px,transparent 1px 5px),#0e1411; }
#touch-root[data-combat-skin=forge] #btn-attack {
  --cc-frame:var(--cc-bronze); --cc-hover:var(--cc-bronze-hover); --cc-down:var(--cc-bronze-down);
  width:88px; height:88px; color:#fce5af; background:#2c2211;
}
#touch-root[data-combat-skin=forge] #btn-attack::before {
  background:linear-gradient(#b58235cc,#5b3519e6),var(--cc-metal) center/88px;
  box-shadow:inset 0 2px #ffe6aa55,inset 0 -5px #0a0907a8;
}
#touch-root[data-combat-skin=forge] #btn-attack::after,
#touch-root[data-combat-skin=forge] #btn-interact::after { border-width:7px; border-image-slice:20; border-image-width:7px; }
#touch-root[data-combat-skin=forge] .cc-weapon-icon {
  position:absolute; left:50%; top:43%; width:65%; height:65%; z-index:2;
  transform:translate(-50%,-50%); object-fit:contain; image-rendering:pixelated; pointer-events:none;
  filter:drop-shadow(0 2px 1px #000a);
}
#touch-root[data-combat-skin=forge] #btn-attack.cc-has-weapon > .act-label { visibility:hidden; }
#touch-root[data-combat-skin=forge] .cc-attack-caption {
  position:absolute; bottom:9px; left:6px; right:6px; z-index:5; pointer-events:none;
  font-family:inherit; font-weight:700; font-size:11px; line-height:1.1;
  text-align:center; color:#ffe6b5; text-shadow:0 1px 2px #000;
}
#touch-root[data-combat-skin=forge] #btn-potion::before { background:linear-gradient(#653a3c99,#1c1117d9),var(--cc-hide) center/80px; }
#touch-root[data-combat-skin=forge] #btn-potion .potion-main-icon { inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); z-index:1; image-rendering:pixelated; }
#touch-root[data-combat-skin=forge] #potion-count,
#touch-root[data-combat-skin=forge] .qc-cnt {
  top:auto; right:6px; bottom:5px; z-index:8; min-width:14px; padding:1px 2px;
  background:#0a100be6; border:1px solid #77633e; border-radius:0;
  font-size:11px; line-height:1.05; text-align:center; color:#f7daa1; pointer-events:none;
}
#touch-root[data-combat-skin=forge] .qc-btn::before { background:linear-gradient(#263e2d99,#0b130cd9),var(--cc-hide) center/80px; }
#touch-root[data-combat-skin=forge] .qc-btn .qc-ico { position:relative; z-index:2; }
#touch-root[data-combat-skin=forge] .qc-btn .qc-ico img { width:30px; height:30px; image-rendering:pixelated; }
#touch-root[data-combat-skin=forge] .qc-empty .qc-ico { color:#998a69; font-size:22px; }
#touch-root[data-combat-skin=forge] .qc-out .qc-cnt { color:#e3a498; border-color:#7a5143; }
#touch-root[data-combat-skin=forge] #btn-mode .act-label { margin:0; padding:5px 6px; font-size:10px; color:#d7c49e; }
#touch-root[data-combat-skin=forge] .kb {
  right:5px; top:5px; bottom:auto; z-index:9; min-width:13px; height:14px; padding:0 2px;
  border:1px solid #8b7953; border-radius:0; background:#10150fea; color:#f5d694; font-size:9px;
}
#touch-root[data-combat-skin=forge] #btn-interact {
  --cc-frame:var(--cc-bronze); --cc-hover:var(--cc-bronze-hover); --cc-down:var(--cc-bronze-down);
  border:0; border-radius:2px; padding:13px 20px; color:#f4e6c3;
  background:linear-gradient(#403a26,#151a13); box-shadow:0 3px 0 #020503,0 5px 10px #0008;
}
#touch-root[data-combat-skin=forge] #joy-base { background:#10191238; border-color:#a48b5b70; box-shadow:inset 0 0 0 2px #060a07aa,0 2px 5px #0006; }
#touch-root[data-combat-skin=forge] #joy-knob { background:linear-gradient(#6d6856a6,#242b24c9); border-color:#cbb786a3; box-shadow:inset 0 1px #eee0af55,0 2px 5px #0008; }
#touch-root[data-combat-skin=forge] #joy-knob::after { content:''; position:absolute; width:4px; height:4px; top:50%; left:50%; transform:translate(-50%,-50%); background:#d2c39b99; pointer-events:none; }
body.touch-mode #touch-root[data-combat-skin=forge] #btn-mode { width:48px; height:44px; right:156px; bottom:74px; }
body.touch-mode #touch-root[data-combat-skin=forge] #btn-skill2 { right:94px; bottom:80px; }
body.touch-mode #touch-root[data-combat-skin=forge] #btn-potion { width:48px; height:48px; right:114px; bottom:142px; }
body.touch-mode #touch-root[data-combat-skin=forge] .qc-btn { width:48px; height:48px; }
body.touch-mode #touch-root[data-combat-skin=forge] :is(#btn-say,#btn-stance) { width:44px; height:44px; }
body.touch-mode #touch-root[data-combat-skin=forge] #btn-mount { width:48px; height:48px; right:180px; bottom:0; }
body.pc-mode #touch-root[data-combat-skin=forge] #action-cluster {
  padding:10px 12px; gap:8px; isolation:isolate; border:1px solid #776344;
  background:linear-gradient(#141a14ee,#0a100af5); box-shadow:inset 0 1px #c7ae6c44,0 5px 16px #000b;
}
body.pc-mode #touch-root[data-combat-skin=forge] #action-cluster::before { content:''; position:absolute; inset:3px; border:1px solid #94815b33; pointer-events:none; z-index:-1; }
body.pc-mode #touch-root[data-combat-skin=forge] .act-btn { width:60px; height:60px; border-radius:2px; }
body.pc-mode #touch-root[data-combat-skin=forge] #btn-attack { width:72px; height:72px; }
body.pc-mode #touch-root[data-combat-skin=forge] #btn-potion { width:54px; height:54px; }
body.pc-mode #touch-root[data-combat-skin=forge] .qc-btn { width:48px; height:48px; }
body.pc-mode #touch-root[data-combat-skin=forge] #quick-consum { gap:4px; }
body.pc-mode #touch-root[data-combat-skin=forge] #btn-mode { width:48px; height:48px; }
body.pc-mode #touch-root[data-combat-skin=forge] #btn-mount { width:52px; height:52px; }
body.pc-mode #touch-root[data-combat-skin=forge] #btn-say { left:calc(50% + 238px); bottom:calc(env(safe-area-inset-bottom) + 116px); }
body.pc-mode #touch-root[data-combat-skin=forge] .skill-btn.has-art .act-label { font-size:9px; padding-bottom:2px; }
@media (max-width:680px) {
  body.pc-mode #touch-root[data-combat-skin=forge] #action-cluster { width:calc(100vw - 28px); box-sizing:border-box; flex-wrap:wrap; justify-content:center; gap:5px; padding:7px; }
  body.pc-mode #touch-root[data-combat-skin=forge] .act-btn { width:48px; height:48px; }
  body.pc-mode #touch-root[data-combat-skin=forge] #btn-attack { width:58px; height:58px; }
  body.pc-mode #touch-root[data-combat-skin=forge] #btn-potion { width:48px; height:48px; }
  body.pc-mode #touch-root[data-combat-skin=forge] #btn-say { left:auto; right:14px; bottom:calc(env(safe-area-inset-bottom) + 152px); }
  body.pc-mode #touch-root[data-combat-skin=forge] #btn-stance { left:auto; right:14px; bottom:calc(env(safe-area-inset-bottom) + 204px); }
}
@media (orientation:landscape) and (max-height:420px) {
  body.touch-mode #hud[data-combat-skin=forge] #minimap { width:80px; height:80px; }
  body.touch-mode #touch-root[data-combat-skin=forge] #btn-mode { width:52px; height:48px; bottom:72px; }
}
@media (max-width:375px) and (orientation:portrait) {
  body.touch-mode #touch-root[data-combat-skin=forge] #joy-base.joy-idle { width:88px; height:88px; left:clamp(54px,calc(100vw - 266px),109px)!important; }
  body.touch-mode #touch-root[data-combat-skin=forge] #joy-base.joy-idle #joy-knob { left:50%!important; top:50%!important; }
}
@media (max-width:350px) and (orientation:portrait) {
  body.touch-mode #hud[data-combat-skin=forge] .hud-row>.gold-chip { position:fixed; left:calc(env(safe-area-inset-left) + 10px); top:calc(env(safe-area-inset-top) + 84px); }
}
@media (orientation:portrait) {
  body.touch-mode:has(#btn-skill4:not(.hidden)) #touch-root[data-combat-skin=forge] #joy-base.joy-idle { width:104px; height:104px; left:calc(100vw - 294px)!important; }
}
@media (max-width:350px) and (orientation:portrait) {
  body.touch-mode:has(#btn-skill4:not(.hidden)) #touch-root[data-combat-skin=forge] #joy-base.joy-idle { width:72px; height:72px; left:calc(100vw - 278px)!important; }
}
@media (prefers-reduced-motion:reduce) {
  #touch-root[data-combat-skin=forge] .act-btn { animation:none!important; transition:none!important; }
}
/* Selection replaces the visible dock while the native potion layer owns pointer input. */
body:has(#potion-aim.aiming) #touch-root[data-combat-skin=forge] .act-btn:not(.cc-held):not(:focus-visible),
body:has(#potion-aim.aiming) #touch-root[data-combat-skin=forge] :is(#joy-base,#btn-say,#btn-stance,#btn-interact) { opacity:.08; }
body:has(#potion-aim.aiming).pc-mode #touch-root[data-combat-skin=forge] #action-cluster { background:transparent; border-color:transparent; box-shadow:none; }
body:has(#potion-aim.aiming).pc-mode #touch-root[data-combat-skin=forge] #action-cluster::before { opacity:0; }
#potion-aim .potion-aim-actions {
  box-sizing:border-box; bottom:calc(env(safe-area-inset-bottom) + 124px); padding:12px; gap:10px;
  border:8px solid transparent; border-image:url('../assets/ui/combat-controls-v1/iron.png') 16 / 8px / 0 stretch;
  background:#111913f7; box-shadow:0 5px 20px #000a; color:#eee1bf;
  font-family:inherit; font-size:13px; line-height:1.4;
}
#potion-aim .potion-aim-actions small { color:#bfbba4; font-size:11px; }
#potion-aim .potion-aim-actions button {
  box-sizing:border-box; min-height:44px; padding:6px 14px;
  border:6px solid transparent; border-image:url('../assets/ui/combat-controls-v1/iron.png') 16 / 6px / 0 stretch;
  background:linear-gradient(#343b2b,#171f16); color:#f4e6c4; font-family:inherit; font-size:13px;
}
#potion-aim .potion-aim-actions button::before { display:none; }
#potion-aim .potion-aim-actions button[data-potion-confirm] { border-image-source:url('../assets/ui/combat-controls-v1/bronze.png'); border-image-slice:20; background:linear-gradient(#987238,#4c351c); }
#potion-aim .potion-aim-actions button:active { border-image-source:url('../assets/ui/combat-controls-v1/iron-down.png'); }
#potion-aim .potion-aim-actions button[data-potion-confirm]:active { border-image-source:url('../assets/ui/combat-controls-v1/bronze-down.png'); }
@media (max-width:600px) and (orientation:portrait) {
  #potion-aim .potion-aim-actions { bottom:calc(env(safe-area-inset-bottom) + 16px); display:grid; grid-template-columns:1fr 1fr; }
  #potion-aim .potion-aim-actions>div { grid-column:1 / -1; }
  body.pc-mode #potion-aim .potion-aim-actions { bottom:calc(env(safe-area-inset-bottom) + 168px); }
}
@media (orientation:landscape) and (max-height:500px) {
  #potion-aim .potion-aim-actions { left:12px; right:auto; transform:none; width:min(360px,calc(100% - 270px)); bottom:calc(env(safe-area-inset-bottom) + 12px); padding:8px; flex-wrap:wrap; }
  #potion-aim .potion-aim-actions>div { flex-basis:100%; }
  #potion-aim .potion-aim-actions button { flex:1; }
}
/* User correction: mobile controls and their artwork are full-bleed circles. */
body.touch-mode #touch-root[data-combat-skin=forge] .act-btn { border-radius:50%; overflow:hidden; }
body.touch-mode #touch-root[data-combat-skin=forge] .act-btn::before { inset:0; border-radius:50%; }
body.touch-mode #touch-root[data-combat-skin=forge] .act-btn::after {
  border:2px solid #87734c!important; border-image:none!important; border-radius:50%;
  box-shadow:inset 0 1px #e8d6a14d,inset 0 -1px #080b08c9;
}
body.touch-mode #touch-root[data-combat-skin=forge] #btn-attack::after { border-color:#c5a35c!important; }
body.touch-mode #touch-root[data-combat-skin=forge] .act-btn>.abyss-skill-icon,
body.touch-mode #touch-root[data-combat-skin=forge] #btn-potion .potion-main-icon {
  inset:0; width:100%!important; height:100%!important; border-radius:50%; object-fit:cover;
}
body.touch-mode #touch-root[data-combat-skin=forge] .cc-weapon-icon {
  top:50%; width:100%; height:100%; border-radius:50%; object-fit:cover;
}
body.touch-mode #touch-root[data-combat-skin=forge] .qc-btn .qc-ico {
  position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; border-radius:50%; overflow:hidden;
}
body.touch-mode #touch-root[data-combat-skin=forge] .qc-btn .qc-ico img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
body.touch-mode #touch-root[data-combat-skin=forge] .skill-btn.has-art .act-label { bottom:8px; }
body.touch-mode #touch-root[data-combat-skin=forge] #btn-mode { width:44px; height:44px; }
@media (orientation:landscape) and (max-height:420px) {
  body.touch-mode #touch-root[data-combat-skin=forge] #btn-mode { width:48px; height:48px; }
}