hint-confirm{position:fixed;inset:0;z-index:11;display:grid;place-items:center;padding:1.25rem;background:color-mix(in srgb,var(--color-scrim) 45%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:1;transition:opacity .25s var(--ease-emphasized)}hint-confirm[open=false]{opacity:0;pointer-events:none}hint-card{display:flex;flex-direction:column;align-items:center;gap:.7rem;width:min(100%,360px);padding:1.7rem 1.4rem 1.3rem;background:var(--color-surface-container-lowest);border:var(--frame-width) solid var(--frame-color);box-shadow:8px 8px 0 var(--shadow-ink);text-align:center;transition:transform .45s var(--ease-spring)}hint-confirm[open=false] hint-card{transform:translateY(30px) scale(.9)}hint-icon{display:grid;place-items:center;width:60px;height:60px;background:var(--color-tertiary-container);color:var(--color-on-tertiary-container);border:var(--frame-width) solid var(--frame-color)}hint-icon m-symbol{font-size:32px;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}hint-title{font-family:var(--font-serif);font-weight:640;font-variation-settings:"WONK" 1,"SOFT" 0;font-size:1.35rem}hint-cost{display:flex;align-items:baseline;justify-content:center;gap:.5rem;width:100%;padding:.6rem .8rem;background:var(--color-error-container);color:var(--color-on-error-container);border:var(--frame-width) solid var(--color-error);font-weight:700;font-size:.85rem}cost-value{font-family:var(--font-serif);font-weight:640;font-size:1.4rem;font-variant-numeric:tabular-nums}hint-note{font-size:.82rem;line-height:1.45;color:var(--color-on-surface-variant)}hint-actions{display:flex;gap:.6rem;width:100%;margin-top:.3rem}hint-actions button{display:flex;align-items:center;justify-content:center;gap:.45rem;flex:1;height:48px;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;transition:transform .25s var(--ease-spring),box-shadow .25s var(--ease-spring)}hint-actions button[kind=filled]{background:var(--color-primary);color:var(--color-on-primary);border:var(--frame-width) solid var(--color-primary);box-shadow:4px 4px 0 var(--color-tertiary-container)}hint-actions button[kind=tonal]{background:var(--color-surface-container-lowest);color:var(--color-on-surface);border:var(--frame-width) solid var(--frame-color);box-shadow:4px 4px 0 var(--shadow-ink)}hint-actions button:hover{transform:translate(-1px,-1px)}hint-actions button:active{transform:translate(3px,3px);box-shadow:none}hint-actions m-symbol{font-size:19px;font-variation-settings:"FILL" 1,"wght" 400,"GRAD" var(--icon-grade),"opsz" 24}
