/* R28: engraved details stay within the R27 control bounds. No extra hit targets. */
#hud .toolbar .text-button,#hud .speed-action,#hud .bell-action,#hud .wave-action{
 --rim:#d8b46b;--rim-light:#ffe3a480;--rim-dark:#291c17b3;
 overflow:hidden;isolation:isolate;text-shadow:0 1px 1px #20170dcc;
 box-shadow:inset 0 1px 0 #ffe4ab66,inset 0 -3px 0 #20190e66,inset 2px 0 4px #f9cb6330,inset -2px 0 4px #20160e66;
}
#hud .toolbar .text-button,#hud .bell-action,#hud .wave-action{position:relative}
#hud .toolbar .text-button::before,#hud .speed-action::before,#hud .bell-action::before,#hud .wave-action::before{
 content:"";position:absolute;inset:3px;pointer-events:none;border:1px solid var(--rim-light);border-radius:3px;
 background:linear-gradient(var(--rim),var(--rim)) left top/7px 1px no-repeat,linear-gradient(var(--rim),var(--rim)) left top/1px 7px no-repeat,linear-gradient(var(--rim),var(--rim)) right top/7px 1px no-repeat,linear-gradient(var(--rim),var(--rim)) right top/1px 7px no-repeat,linear-gradient(var(--rim),var(--rim)) left bottom/7px 1px no-repeat,linear-gradient(var(--rim),var(--rim)) left bottom/1px 7px no-repeat,linear-gradient(var(--rim),var(--rim)) right bottom/7px 1px no-repeat,linear-gradient(var(--rim),var(--rim)) right bottom/1px 7px no-repeat;
 box-shadow:0 0 0 1px var(--rim-dark),inset 0 1px 0 #fff0b31a;
}
#hud .toolbar .text-button,#hud .speed-action{
 border-color:#d0a25d;color:#ffe6ad;
 background:repeating-linear-gradient(177deg,transparent 0 5px,#f6c27408 6px,#26190f0d 7px,transparent 8px 13px),linear-gradient(100deg,#50321f,#79522e 48%,#4c301d);
}
#hud .toolbar .text-button{display:flex;align-items:center;justify-content:center;gap:5px;padding:0}
#hud .toolbar .text-button::after{
 content:"";order:-1;flex:0 0 13px;width:13px;height:15px;pointer-events:none;background:currentColor;opacity:.85;
}
#hud [data-action="journal"]::after{
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cg fill='none' stroke='black' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M8 4C6 2 3 2 1 3v12c3-1 5-1 7 1 2-2 4-2 7-1V3c-2-1-5-1-7 1v12M3 6h2M3 9h2M11 6h2M11 9h2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
#hud [data-action="fullscreen"]::after{
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18'%3E%3Cpath d='M6 3H2v4m8-4h4v4M2 11v4h4m4 0h4v-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
#hud .speed-action::after{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:radial-gradient(ellipse at center,#f2d398 0 1px,#6a441e 1.5px 2px,transparent 2.5px) 5px center/5px 5px no-repeat,radial-gradient(ellipse at center,#f2d398 0 1px,#6a441e 1.5px 2px,transparent 2.5px) right 5px center/5px 5px no-repeat;
}
#hud .speed-action[data-speed="4"]{--rim:#ffe091;--rim-light:#ffe3a4b3;background:repeating-linear-gradient(177deg,transparent 0 5px,#f6c2740d 6px,transparent 7px 13px),linear-gradient(100deg,#75431c,#996827 48%,#75431c);border-color:#ffe091}
#hud .bell-action,#hud .wave-action{--rim-light:#ffe3a480;border-style:solid;border-width:3px}
#hud .bell-action{
 --rim:#a6d9d8;--rim-light:#c7f0e780;--rim-dark:#113943b3;
 border-color:#b1b997;color:#efffe5;
 background:radial-gradient(ellipse at 30% 0,#93d1ce33,transparent 65%),repeating-linear-gradient(150deg,transparent 0 10px,#bbf0e608 11px,transparent 12px 20px),linear-gradient(#376f7b,#204a5d);
}
#hud .bell-action::before,#hud .wave-action::before{inset:4px;border-radius:4px;background:none}
#hud .bell-action::after,#hud .wave-action::after{
 content:"";position:absolute;inset:5px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23edcf88' stroke-width='1'%3E%3Cpath d='M2 14V4q0-2 2-2h10M3 3q9 0 9 9M5 4q0 5 5 5M4 5q5 0 5 5'/%3E%3Cpath d='m4 12 2-2 2 2-2 2Z' fill='%23edcf88'/%3E%3C/g%3E%3C/svg%3E") left top/17px 17px no-repeat;
}
#hud .bell-action::after{
 opacity:.8;background:linear-gradient(45deg,transparent 42%,#b9e2d999 44% 56%,transparent 58%) left top/9px 9px no-repeat,linear-gradient(-45deg,transparent 42%,#b9e2d999 44% 56%,transparent 58%) right top/9px 9px no-repeat,linear-gradient(-45deg,transparent 42%,#b9e2d999 44% 56%,transparent 58%) left bottom/9px 9px no-repeat,linear-gradient(45deg,transparent 42%,#b9e2d999 44% 56%,transparent 58%) right bottom/9px 9px no-repeat;
}
#hud .wave-action{
 border-color:#d4a55d;color:#fff0bc;
 background:radial-gradient(ellipse at 50% 0,#edbd6c33,transparent 65%),repeating-linear-gradient(176deg,transparent 0 5px,#ffcf7109 6px,#421f140b 7px,transparent 8px 13px),linear-gradient(#a3592f,#783b25);
}
#hud .wave-action::after{
 background-repeat:no-repeat;background-position:left top,right bottom;background-size:17px 17px;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' stroke='%23edcf88' stroke-width='1'%3E%3Cpath d='M2 14V4q0-2 2-2h10M3 3q9 0 9 9M5 4q0 5 5 5M4 5q5 0 5 5'/%3E%3Cpath d='m4 12 2-2 2 2-2 2Z' fill='%23edcf88'/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg transform='rotate(180 10 10)' fill='none' stroke='%23edcf88' stroke-width='1'%3E%3Cpath d='M2 14V4q0-2 2-2h10M3 3q9 0 9 9M5 4q0 5 5 5M4 5q5 0 5 5'/%3E%3Cpath d='m4 12 2-2 2 2-2 2Z' fill='%23edcf88'/%3E%3C/g%3E%3C/svg%3E");
}
#hud .bell-action.active{border-color:#e8f5cf;background:radial-gradient(ellipse at 50% 20%,#79b3b6,#326575);box-shadow:inset 0 0 0 2px #d9f6db88,inset 0 -3px 0 #173f4b}
#hud .wave-action:disabled{opacity:.7;border-color:#a68b5a;background:linear-gradient(#6e563b,#514331);color:#f3e4bb}
#hud .wave-action:disabled::after{opacity:.45}
@media(hover:hover){
 #hud .toolbar .text-button:hover,#hud .speed-action:hover,#hud .bell-action:hover,#hud .wave-action:not(:disabled):hover{filter:brightness(1.14)}
}
#hud .toolbar .text-button:active,#hud .speed-action:active,#hud .bell-action:active,#hud .wave-action:not(:disabled):active{box-shadow:inset 0 2px 6px #17120db3,inset 0 0 0 1px #f6d18488}
#hud .toolbar .text-button:focus-visible,#hud .speed-action:focus-visible,#hud .bell-action:focus-visible,#hud .wave-action:focus-visible{outline:2px solid #edf9da;outline-offset:-3px}
.compact #hud .speed-action::before{inset:5px}
.compact #hud .bell-action::after{background-size:12px 12px}
.compact #hud .wave-action::after{background-size:22px 22px}