/* Shared product tokens and controls. Existing game canvases keep their layouts. */
:root{--ui-pine:#245b4c;--ui-pine-hover:#184738;--ui-berry:#96536b;--ui-paper:#fffaf0;--ui-ink:#273f39;--ui-muted:#52675d;--ui-line:#d6ded4;--ui-radius:16px;--ui-shadow:0 12px 40px #10282018;--ui-focus:#317968;--ui-success:#245b4c;--ui-warning:#79520b;--ui-error:#9c3040;--ui-font:"Segoe UI",Arial,system-ui,sans-serif}
.ui-panel{background:var(--ui-paper);color:var(--ui-ink);border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:var(--ui-shadow);padding:24px}
.ui-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}.ui-heading h2,.ui-heading h3{margin:0}.ui-heading p{margin:6px 0 0;color:var(--ui-muted);line-height:1.5}
.ui-badge{display:inline-flex;gap:5px;align-items:center;width:fit-content;padding:5px 9px;border-radius:8px;font-size:.75rem;font-weight:700;line-height:1.3;background:#edf2ec;color:var(--ui-pine);border:1px solid #cbd9ce;white-space:normal}.ui-badge[data-tone=warning]{background:#fff0ce;color:var(--ui-warning);border-color:#e5d39b}.ui-badge[data-tone=error]{background:#fbe6e8;color:var(--ui-error);border-color:#e6bfc5}.ui-badge[data-tone=muted]{background:#edf0ef;color:#52605b;border-color:#d1d9d5}
.ui-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid #c8d6cb;border-radius:11px;background:#eff3ed;color:var(--ui-pine);font:700 .88rem var(--ui-font);cursor:pointer;touch-action:manipulation;text-decoration:none}.ui-button.primary{color:#fff;background:var(--ui-pine);border-color:var(--ui-pine);box-shadow:none}.ui-button:hover:not(:disabled){background:#dce8df}.ui-button.primary:hover:not(:disabled){background:var(--ui-pine-hover)}.ui-button:active:not(:disabled){transform:translateY(1px)}.ui-button:disabled{opacity:.6;cursor:default}
.ui-search-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:18px}.ui-search-row input{flex:1;min-width:140px}.ui-search-row select{width:auto;max-width:100%}.ui-empty{padding:30px 20px;border:1px dashed #c9d5cd;border-radius:12px;color:var(--ui-muted);background:#f5f6ef;text-align:center;line-height:1.6}.ui-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:16px}.ui-card{min-width:0;padding:20px;border:1px solid var(--ui-line);background:#fffdf7;border-radius:14px;display:flex;flex-direction:column;gap:12px}.ui-card h3,.ui-card p{margin:0}.ui-card p,.ui-card small{color:var(--ui-muted);line-height:1.5}.ui-card .ui-button{margin-top:auto}.ui-list{display:grid;gap:10px}.ui-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--ui-line);border-radius:12px;background:#fffdf7;min-width:0}.ui-row>div{min-width:0}.ui-row strong{display:block}.ui-row small{display:block;color:var(--ui-muted);margin-top:5px;line-height:1.4;overflow-wrap:anywhere}.ui-actions{display:flex;flex-wrap:wrap;gap:8px}.ui-stat{padding:19px;background:#edf3ed;border:1px solid #d1dfd4;border-radius:14px}.ui-stat strong{display:block;font-size:1.7rem;margin:7px 0;color:var(--ui-pine);font-variant-numeric:tabular-nums}.ui-stat span,.ui-stat small{color:var(--ui-muted);font-size:.8rem}.ui-progress{width:100%;height:8px;border:0;border-radius:20px;overflow:hidden;accent-color:var(--ui-pine)}.ui-progress::-webkit-progress-bar{background:#dce5dc}.ui-progress::-webkit-progress-value{background:var(--ui-pine);border-radius:20px}
.ui-dialog{color:var(--ui-ink);background:var(--ui-paper);border:1px solid var(--ui-line);border-radius:20px;padding:24px;width:min(940px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;box-shadow:0 24px 80px #07142188;font-family:var(--ui-font)}.ui-dialog::backdrop{background:#07151cbd;backdrop-filter:blur(5px)}.ui-dialog :is(h2,h3){color:var(--ui-ink)}.ui-dialog .ui-heading{position:sticky;top:-24px;background:var(--ui-paper);z-index:2;padding:18px 0;border-bottom:1px solid var(--ui-line)}
.ui-confirm{width:min(490px,calc(100vw - 28px))}.ui-confirm p{line-height:1.6}.ui-confirm .ui-actions{justify-content:flex-end;margin-top:24px}.ui-confirm[data-danger=true]{border-top:5px solid var(--ui-error)}.ui-confirm .danger{background:var(--ui-error);color:white;border:0;min-height:44px;padding:10px 16px;border-radius:11px;font-weight:700}.ui-feedback{padding:12px 16px;border-radius:12px;line-height:1.5;background:#e8f3e9;color:#245b4c;border:1px solid #c9ddcc}.ui-feedback:empty{display:none}.ui-feedback.error{color:var(--ui-error);background:#fbe6e8;border-color:#e6bfc5}.ui-busy{opacity:.7;pointer-events:none}
.ui-skip{position:fixed;top:-100px;left:16px;z-index:1000;padding:12px 18px;background:#fff;color:#245b4c;border-radius:10px}.ui-skip:focus{top:12px}
.ui-panel :is(input,select,textarea),.ui-dialog :is(input:not([type=checkbox]):not([type=range]),select,textarea){font:inherit;background:#fffdf7;color:var(--ui-ink);border:1px solid #b9cbbb;border-radius:10px;min-height:44px;padding:9px 12px;max-width:100%}.ui-dialog label{color:var(--ui-ink)}
:where(.ui-button,.ui-dialog,.ui-panel,.app-nav,.admin-ui) :focus-visible,:where(.ui-button):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}
@media(max-width:600px){.ui-panel,.ui-dialog{padding:18px}.ui-heading{align-items:flex-start;gap:12px}.ui-heading h2{font-size:1.3rem}.ui-row{align-items:flex-start;flex-wrap:wrap;padding:13px}.ui-row>.ui-actions{width:100%}.ui-stat{padding:14px}.ui-dialog .ui-heading{top:-18px}.ui-card{padding:16px}}
@media(prefers-reduced-motion:reduce){.ui-dialog,.ui-button{animation:none!important;transition:none!important}}