.controller{position:relative;width:100%;min-width:0;margin:0 auto;padding:14px 16px 18px;border:2px solid #171410;border-radius:12px 12px 20px 20px;background:linear-gradient(105deg,#756c59,#aaa18b 45%,#68604e);box-shadow:inset 0 1px #d7ceb7,inset 0 -4px 7px #332f27,0 7px 13px #08070699;color:#181511;font:700 12px/1.1 Arial,sans-serif}.controller-brand{text-align:center;letter-spacing:.12em;margin-bottom:10px}.controller-brand small{font-size:8px;letter-spacing:.08em}.function-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.controller button{position:relative;min-height:31px;border:1px solid #181511;border-radius:5px;background:linear-gradient(#393730,#171613);box-shadow:inset 0 1px #69665b,0 3px 0 #0d0c0b,0 4px 4px #27221999;color:#eee7ce;font:700 13px Arial,sans-serif;cursor:pointer}.controller button:hover{background:linear-gradient(#4a473d,#211f1b)}.controller button:active,.controller button.pressed{transform:translateY(2px);box-shadow:inset 0 1px 3px #050504,0 1px 0 #0d0c0b}.controller button[aria-pressed=true]{color:#ffdf55}.controller button[data-tooltip]::after{position:absolute;z-index:10;left:50%;bottom:calc(100% + 10px);width:max-content;max-width:210px;padding:7px 9px;border:1px solid #b6aa8d;border-radius:3px;background:#171511;color:#f4ecd5;box-shadow:0 3px 8px #0009;content:attr(data-tooltip);font:12px/1.25 Arial,sans-serif;text-align:center;white-space:normal;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .12s,transform .12s}.controller button[data-tooltip]:hover::after,.controller button[data-tooltip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}