/* Approved SpriteCook skins, applied to native controls without changing behaviour. */
.locale-control {display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:nowrap;max-width:100%;font-family:var(--font-body);color:var(--ui-muted)}
.locale-flag {width:28px;height:20px;object-fit:contain;flex:none}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action),.ui-control {
 --skin-normal:var(--ui-secondary-normal);--skin-over:var(--ui-secondary-over);--skin-down:var(--ui-secondary-down);--skin-off:var(--ui-secondary-off);--control-skin:var(--skin-normal);--skin-brightness:1;
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:var(--ui-space-2);
 min-height:var(--ui-control-height);max-width:100%;padding:10px 20px;border:1px solid transparent;border-radius:2px;
 background:none;color:var(--ui-text);font:var(--weight-action) 16px/1.35 var(--font-body);
 text-align:center;text-decoration:none;cursor:pointer;box-shadow:none;text-shadow:0 1px 3px #000b;transform:none;
 overflow-wrap:anywhere;transition:color var(--ui-duration);
}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action)::before,.ui-control::before {
 content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;background:transparent;
 border:16px solid transparent;border-image:var(--control-skin) 28 32 fill / 16px / 0 stretch;filter:brightness(var(--skin-brightness));
}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action)::after,.ui-control::after {
 content:'';position:absolute;inset:2px;z-index:-1;pointer-events:none;background:transparent;
 clip-path:polygon(var(--ui-cut) 0,calc(100% - var(--ui-cut)) 0,100% var(--ui-cut),100% calc(100% - var(--ui-cut)),calc(100% - var(--ui-cut)) 100%,var(--ui-cut) 100%,0 calc(100% - var(--ui-cut)),0 var(--ui-cut));
}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .primary,.ui-control.primary {--skin-normal:var(--ui-primary-normal);--skin-over:var(--ui-primary-over);--skin-down:var(--ui-primary-down);--skin-off:var(--ui-primary-off);color:var(--ui-text)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .primary::after,.ui-control.primary::after {inset:5px;background:#06040180}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .danger,.ui-control.danger {color:var(--ui-danger)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .danger::after,.ui-control.danger::after {box-shadow:inset 0 0 0 2px var(--ui-danger)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .quiet {--skin-normal:none;--skin-over:none;--skin-down:none;--skin-off:none;color:var(--ui-muted);padding-inline:10px;text-shadow:none}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .compact {min-height:var(--ui-control-compact);padding:6px 12px;font-size:14px}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .large {min-height:var(--ui-control-large);font-size:20px}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action):not(:disabled):not([aria-disabled=true]):hover,.ui-control:not(:disabled):hover {--control-skin:var(--skin-over);color:var(--ui-text)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .danger:not(:disabled):hover {color:var(--ui-danger)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action):not(:disabled):not([aria-disabled=true]):active,.ui-control:not(:disabled):active {--control-skin:var(--skin-down)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) [aria-pressed=true]::after {background:#123a3de8;box-shadow:inset 0 0 0 2px var(--ui-selected)}
.selection-mark {display:none;position:absolute;right:5px;top:4px;color:var(--ui-selected);font:var(--weight-action) 12px/1 var(--font-body);border:1.5px solid currentColor;border-radius:50%;width:17px;height:17px;line-height:14px;text-align:center;background:var(--ui-selected-bg)}
[aria-pressed=true]>.selection-mark {display:block}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action):disabled,:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) [aria-disabled=true],.ui-control:disabled {--control-skin:var(--skin-off);color:var(--ui-disabled-text);opacity:1;cursor:not-allowed}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action):disabled::after,.ui-control:disabled::after {background:#060b1399}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .quiet:disabled::after {background:transparent}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) [aria-busy=true] {cursor:progress}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,a,input,select,textarea):focus-visible,.ui-control:focus-visible {outline:3px solid var(--ui-focus);outline-offset:3px}
/* Language controls show only the flag; keep the invisible touch target and keyboard focus. */
:where(.game-shell,.ui-catalog) .locale-option {appearance:none;min-width:44px;width:44px;min-height:44px;height:44px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-shadow:none}
:where(.game-shell,.ui-catalog) .locale-option::before,:where(.game-shell,.ui-catalog) .locale-option::after {content:none}
.ui-icon {width:var(--ui-icon-size);height:var(--ui-icon-size);object-fit:contain;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--ui-gold)}
.action-label {min-width:0}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {
 box-sizing:border-box;min-height:var(--ui-control-height);max-width:100%;min-width:0;padding:10px 12px;
 border:1px solid var(--ui-border);border-radius:3px;background:var(--ui-canvas);color:var(--ui-text);
 font:var(--weight-body) 17px/1.5 var(--font-body);box-shadow:none;border-image:none;
}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) textarea {width:100%;resize:vertical;min-height:110px}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(input,textarea)::placeholder {color:var(--ui-muted);opacity:1}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(input,select,textarea):disabled {color:var(--ui-disabled-text);border-color:var(--ui-disabled-border);background-color:var(--ui-disabled);opacity:1;cursor:not-allowed}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(input,select,textarea)[aria-invalid=true] {border-color:var(--ui-danger);outline:2px solid var(--ui-danger);outline-offset:1px}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input:is([type=checkbox],[type=radio]) {
 appearance:none;position:relative;display:inline-grid;place-content:center;width:24px;height:24px;min-width:24px;margin:0;flex:none;
 border:1px solid var(--ui-border);border-radius:3px;background:var(--ui-canvas);cursor:pointer;vertical-align:middle;
}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=radio] {border-radius:50%}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input:is([type=checkbox],[type=radio]):checked {border-color:var(--ui-selected);background:var(--ui-selected-bg)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=checkbox]:checked::after {content:'✓';color:var(--ui-selected);font:700 18px/1 var(--font-body)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=radio]:checked::after {content:'';width:10px;height:10px;border-radius:50%;background:var(--ui-selected)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=range] {appearance:none;width:210px;max-width:100%;height:36px;padding:0;background:transparent;cursor:pointer}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=range]::-webkit-slider-runnable-track {height:8px;border:1px solid var(--ui-border);border-radius:4px;background:linear-gradient(to right,var(--ui-gold) var(--range-fill,50%),var(--ui-canvas) var(--range-fill,50%))}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=range]::-moz-range-track {height:6px;border:1px solid var(--ui-border);border-radius:4px;background:linear-gradient(to right,var(--ui-gold) var(--range-fill,50%),var(--ui-canvas) var(--range-fill,50%))}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=range]::-webkit-slider-thumb {appearance:none;width:20px;height:24px;margin-top:-9px;border:2px solid var(--ui-primary-border);border-radius:3px;background:var(--ui-panel)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) input[type=range]::-moz-range-thumb {width:16px;height:20px;border:2px solid var(--ui-primary-border);border-radius:3px;background:var(--ui-panel)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) progress {appearance:none;width:100%;height:12px;border:1px solid var(--ui-border);border-radius:3px;background:var(--ui-canvas);overflow:hidden}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) progress::-webkit-progress-bar {background:var(--ui-canvas)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) progress::-webkit-progress-value {background:var(--ui-selected)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) progress::-moz-progress-bar {background:var(--ui-selected)}
@media(prefers-reduced-motion:reduce){:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action,input,select,textarea), .ui-control {transition:none;animation:none}}

:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .with-chevron{padding-inline:58px}
.with-chevron>.ui-icon:first-child{position:absolute;left:22px}.action-chevron{position:absolute;right:20px;display:flex}.action-chevron .ui-icon{width:22px;height:22px}.ui-icon.icon-play{color:#f8e5ad}.ui-icon.icon-warning{color:#ffa234}.ui-icon.icon-trash{color:var(--ui-danger)}
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) .quiet::after{box-shadow:none}
/* Confirmed navigation selection: same skin, semantic marker shared by hosts. */
/* Author display rules must preserve the native hidden attribute. */
:where(#screen,.game-shell,.ux-dialog,.ui-catalog,.ranked-indicator) :is(button,.action)[hidden],.ui-control[hidden]{display:none}
