/* Three opt-in proposals. No style is applied without data-pad-variant. */
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-pad{position:absolute;right:12px;bottom:10px;width:210px;height:210px;z-index:8;touch-action:none;user-select:none;isolation:isolate}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key{position:absolute;display:block;box-sizing:border-box;margin:0;padding:0;min-width:0;min-height:0;width:64px;height:64px;border:1px solid #dbc796a6;border-radius:50%;background:#080d13b8;color:#fff;cursor:pointer;touch-action:none;transition:transform .1s,background-color .1s,border-color .1s;overflow:visible;clip-path:circle(50%)}
.dragon-ui #stage[data-pad-variant] #touch .command-lettering{position:absolute;top:9px;left:1px;width:calc(100% - 2px);height:32px;display:block;pointer-events:none;overflow:hidden}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key kbd{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);min-width:0;min-height:0;display:block;border:0;border-radius:0;box-shadow:none;padding:0;background:transparent;color:#f5e7c0;font:600 11px/1 'MF Sans',sans-serif;pointer-events:none}
.dragon-ui #stage[data-pad-variant] #touch .action-jump kbd{font-size:9px}
.dragon-ui #stage[data-pad-variant] #touch .action-special{left:73px;top:0;right:auto;bottom:auto}
.dragon-ui #stage[data-pad-variant] #touch .action-context{left:73px;top:73px;right:auto;bottom:auto}
.dragon-ui #stage[data-pad-variant] #touch .action-summon{left:0;top:73px;right:auto;bottom:auto}
.dragon-ui #stage[data-pad-variant] #touch .action-attack{left:146px;top:73px;right:auto;bottom:auto}
.dragon-ui #stage[data-pad-variant] #touch .action-jump{left:73px;top:146px;right:auto;bottom:auto}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key:hover:not(:disabled){background:#25231ddd;border-color:#ffe7b1}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key:active:not(:disabled),.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key.held{transform:scale(.95);background:#715623e8;border-color:#ffe2a1}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key:disabled{background:#080b1073;border-color:#c4c0b257;cursor:default}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key:disabled .command-lettering{filter:grayscale(1);opacity:.42}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key:disabled kbd{opacity:.55}
.dragon-ui #stage[data-pad-variant] #touch .action-unavailable{position:absolute;top:auto;bottom:8px;left:0;right:0;padding:0;background:none;font:500 9px/1 'MF Sans',sans-serif;color:#f3efe5;text-align:center;pointer-events:none}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key:disabled kbd{bottom:20px;font-size:8px}
.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key:focus-visible{outline:none;border:3px solid #fff7df}
/* A: five equal glass-black circles, one familiar cardinal layout. */
.dragon-ui #stage[data-pad-variant="A"] #touch .dragon-action-key{background:#050a108c;border-color:#ead59cb3}
.dragon-ui #stage[data-pad-variant="A"] #touch .action-context{background:#05080c66;border-color:#b6b6ac80}
/* B: a bigger attack surface, four smaller controls orbit the primary action. */
.dragon-ui #stage[data-pad-variant="B"] #touch .dragon-action-key{width:60px;height:60px;background:#10151cdb;border:2px solid #8e969e;box-shadow:inset 0 0 0 3px #05070a}
.dragon-ui #stage[data-pad-variant="B"] #touch .command-lettering{top:7px;height:30px}
.dragon-ui #stage[data-pad-variant="B"] #touch .action-special{left:75px;top:0}
.dragon-ui #stage[data-pad-variant="B"] #touch .action-summon{left:0;top:75px}
.dragon-ui #stage[data-pad-variant="B"] #touch .action-context{left:150px;top:75px}
.dragon-ui #stage[data-pad-variant="B"] #touch .action-jump{left:75px;top:150px}
.dragon-ui #stage[data-pad-variant="B"] #touch .action-attack{left:66px;top:66px;width:78px;height:78px;border:2px solid #efd181;background:#201b13ed;box-shadow:inset 0 0 0 4px #090b0c}
.dragon-ui #stage[data-pad-variant="B"] #touch .action-attack .command-lettering{top:12px;height:39px}
.dragon-ui #stage[data-pad-variant="B"] #touch .action-attack kbd{bottom:11px;font-size:13px}
/* C: five equal buttons around an open center, metallic rims and wider diagonal gaps. */
.dragon-ui #stage[data-pad-variant="C"] #touch .dragon-action-pad:before{content:'';position:absolute;inset:36px;border:1px solid #d5d7d352;border-radius:50%;pointer-events:none;z-index:-1}
.dragon-ui #stage[data-pad-variant="C"] #touch .dragon-action-key{border:2px solid #c5ccd0;background:radial-gradient(circle at 36% 23%,#344351d9,#070c12e8 70%);box-shadow:inset 0 0 0 3px #111923}
.dragon-ui #stage[data-pad-variant="C"] #touch .action-special{left:73px;top:0}
.dragon-ui #stage[data-pad-variant="C"] #touch .action-context{left:144px;top:55px}
.dragon-ui #stage[data-pad-variant="C"] #touch .action-attack{left:117px;top:140px;border-color:#e2c27b}
.dragon-ui #stage[data-pad-variant="C"] #touch .action-jump{left:29px;top:140px}
.dragon-ui #stage[data-pad-variant="C"] #touch .action-summon{left:2px;top:55px}
@container(max-height:420px){.dragon-ui #stage[data-pad-variant] #touch .dragon-action-pad{bottom:6px}.dragon-ui #stage[data-pad-variant] #touch .dragon-enemy-card:last-child{margin-bottom:0}}
@media(prefers-reduced-motion:reduce){.dragon-ui #stage[data-pad-variant] #touch .dragon-action-key{transition:none}}

/* Selected ink layout: generous rectangular hit regions with no visible circle/panel. */
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-pad{width:256px;height:223px;right:10px;bottom:10px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key{width:104px;height:66px;clip-path:none;border:0!important;border-radius:3px;background:transparent!important;box-shadow:none!important;overflow:visible;transition:transform 90ms ease-out}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-special{left:57px;top:0;width:142px;height:67px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-summon{left:0;top:75px;width:109px;height:67px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-attack{left:125px;top:76px;width:131px;height:76px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-context{left:13px;top:155px;width:100px;height:65px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-jump{left:134px;top:166px;width:111px;height:57px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .command-lettering{top:0;left:0;width:100%;height:calc(100% - 16px);transition:filter 90ms ease-out;filter:drop-shadow(0 2px 1px #000)}
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key kbd{bottom:0;left:50%;font-size:11px;line-height:17px;min-width:22px;padding:0 4px;border:1px solid #a89862;border-radius:3px;background:#080b12d9}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-attack kbd{font-size:13px;line-height:19px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key:disabled kbd{bottom:10px;font-size:9px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-unavailable{bottom:-3px;color:#fff;background:#080b12ad;font-size:9px;line-height:12px;border-radius:2px;padding:0 3px;width:max-content;max-width:100%;left:50%;transform:translateX(-50%)}
.dragon-ui #stage[data-pad-variant="ink"] #touch .action-unavailable:empty{display:none}
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key:focus-visible{outline:2px solid #fff0b2;outline-offset:2px}
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key:is(.pressed,.held,.key-pressed,:active):not(:disabled){transform:translateY(3px) scale(.94)}
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key:is(.pressed,.held,.key-pressed,:active):not(:disabled) .command-lettering{filter:brightness(1.45) drop-shadow(0 0 3px #ffe39c)}
.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key.ink-burst:not(:disabled)::after{content:""!important;display:block;position:absolute;inset:4px -5px 15px;pointer-events:none;background:linear-gradient(15deg,transparent 45%,#ffe779 47% 49%,transparent 51%),linear-gradient(-16deg,transparent 45%,#fff2c2 47% 49%,transparent 51%);animation:ink-key-burst 180ms ease-out both;z-index:-1}
@keyframes ink-key-burst{from{opacity:.9;transform:scale(.78)}to{opacity:0;transform:scale(1.24)}}
@container(max-height:420px){.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-pad{bottom:7px}}
@media(prefers-reduced-motion:reduce){.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key,.dragon-ui #stage[data-pad-variant="ink"] #touch .command-lettering{transition:none}.dragon-ui #stage[data-pad-variant="ink"] #touch .dragon-action-key.ink-burst::after{animation:none;opacity:.5;transform:none}}