/* RoyalSans capitals span -13..752 units in a 1000-unit em.
   These button-only metrics centre that visible range in the line box. */
@font-face{
 font-family:RoyalButtonCaps;
 src:url("assets/fonts/royal-sans-bold.woff") format("woff");
 font-weight:700 900;
 font-display:swap;
 ascent-override:87%;
 descent-override:13%;
 line-gap-override:0%;
}
/* Royal UI: material and ornament only. Existing screen geometry is retained.
   Every corner is drawn at a fixed size, independently of the surface width. */
:root{
 --royal-edge:#a88a60;
 --royal-highlight:#e6c58b;
 --royal-shadow:#100b17;
}
#app :is(button,label).royal-button,#app :is(.room-panel,.dialog,.menu-panel,.chest-loot-panel,.creation-form,.balance-dialog,.crafting-sidebar,.dev-panel){
 --royal-corners:
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) left 3px top 3px/8px 1px no-repeat,
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) left 3px top 3px/1px 8px no-repeat,
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) right 3px top 3px/8px 1px no-repeat,
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) right 3px top 3px/1px 8px no-repeat,
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) left 3px bottom 3px/8px 1px no-repeat,
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) left 3px bottom 3px/1px 8px no-repeat,
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) right 3px bottom 3px/8px 1px no-repeat,
  linear-gradient(var(--royal-highlight),var(--royal-highlight)) right 3px bottom 3px/1px 8px no-repeat;
}
#app :is(button,label).royal-button{
 --royal-highlight:#d3b37b80;
 border-color:var(--royal-edge);
 border-style:solid;
 border-radius:5px;
 background:var(--royal-corners),linear-gradient(180deg,#493344f5,#2c1e32f5 52%,#24182cf5);
 color:#f4e3c5;
 box-shadow:inset 0 0 0 1px #160f1d,inset 0 2px 0 #fff0cd12,inset 0 -2px 0 #100b1766,0 2px 4px #0003;
 text-shadow:0 1px 2px #100917;
 transition:border-color .15s,filter .15s,box-shadow .15s;
 touch-action:manipulation;
}
#app :is(button,label).royal-button.cta{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 text-align:center;
 line-height:1.2;
 font-family:RoyalButtonCaps,RoyalSans,"Helvetica Neue",Arial,sans-serif!important;
 --royal-edge:#d1ae70;
 --royal-highlight:#ffefbd9c;
 background:var(--royal-corners),linear-gradient(180deg,#f1d69c,#d5b276 48%,#bb9055);
 color:#33202b;
 border-bottom-width:1px;
 box-shadow:inset 0 0 0 1px #6e482e,inset 0 2px 0 #fff3ce70,inset 0 -2px 0 #83533350,0 2px 5px #0004;
 text-shadow:0 1px #ffecc44d;
}
#app :is(button,label).royal-button:is(.selected,.active,[aria-selected="true"]){
 --royal-edge:#e5c18a;
 --royal-highlight:#ebce968f;
 background:var(--royal-corners),linear-gradient(180deg,#604347,#3e2939);
 color:#ffe9bf;
 box-shadow:inset 0 0 0 1px #241521,inset 0 2px 0 #ffe8b31a,0 0 8px #dfb86a12;
}
#app :is(button,label).royal-button:focus-visible{outline:2px solid #ffe0a1;outline-offset:2px}
@media(hover:hover){
 #app :is(button,label).royal-button:hover:not(:disabled){filter:brightness(1.13);border-color:#f1d09b}
}
#app :is(button,label).royal-button:active:not(:disabled){filter:brightness(.94);box-shadow:inset 0 2px 5px #160c2266}
#app :is(button,label).royal-button:disabled{opacity:.45;cursor:default;text-shadow:none;filter:saturate(.55)}
/* Small icons and tabs use the same metal edge without crowded corner details. */
#app :is(button,label).royal-button:is(.icon,.item-close,.craft-slot-clear,.atlas-map-arrow){
 background:linear-gradient(180deg,#47313ff5,#261b2ef5);
 --royal-edge:#a88a608c;
 border-width:1px;
}
#app :is(.bottom-tabs,.craft-browse-tabs) .royal-button{
 --royal-highlight:#d3b37b40;
 --royal-edge:#a88a6038;
 box-shadow:inset 0 1px 0 #fff0cd0c;
 background:linear-gradient(180deg,#3c293d8c,#21172d66);
}
#app :is(.bottom-tabs,.craft-browse-tabs) .royal-button[aria-selected="true"]{
 --royal-edge:#d2ac72;
 background:var(--royal-corners),linear-gradient(180deg,#624443,#352435);
 box-shadow:inset 0 -2px 0 #c7a06470,inset 0 1px 0 #ffe7b31c;
}
/* Shared window frame, including confirmation, loot, creation and dev dialogs. */
#app :is(.room-panel,.dialog,.menu-panel,.chest-loot-panel,.creation-form,.balance-dialog,.crafting-sidebar,.dev-panel){
 --royal-highlight:#dbbc8470;
 border:1px solid var(--royal-edge);
 border-radius:7px;
 background:
  url("assets/ui/window-corner-tl.svg") left 1px top 1px/16px 16px no-repeat,
  url("assets/ui/window-corner-tr.svg") right 1px top 1px/16px 16px no-repeat,
  url("assets/ui/window-corner-bl.svg") left 1px bottom 1px/16px 16px no-repeat,
  url("assets/ui/window-corner-br.svg") right 1px bottom 1px/16px 16px no-repeat,
  url("assets/ui/window-fillet.svg") center top 1px/84px 6px no-repeat,
  url("assets/ui/window-fillet.svg") center bottom 1px/84px 6px no-repeat,
  radial-gradient(ellipse at 50% 0,#66435122,transparent 70%),linear-gradient(160deg,#2a1c30f5,#191321f5);
 box-shadow:inset 0 0 0 3px #100b174d,inset 0 0 0 4px #d1af6926,0 6px 20px #0c071650;
 min-width:0;
}
#app .balance-dialog.balance-fullscreen{border:0;border-radius:0;background:#100c18;box-shadow:none}
/* Item windows have their own jewel-like corners and rarity-tinted inner fillet.
   !important here replaces the established .rarity-item material, not layout. */
#app .item-dialog{
 --royal-highlight:color-mix(in srgb,var(--item-color,#d9bd86) 65%,#f4debb);
 border:1px solid var(--item-color,#c8a36c);
 border-radius:7px;
 background:
  linear-gradient(135deg,transparent 43%,var(--royal-highlight) 44% 56%,transparent 57%) left 3px top 3px/9px 9px no-repeat,
  linear-gradient(45deg,transparent 43%,var(--royal-highlight) 44% 56%,transparent 57%) right 3px top 3px/9px 9px no-repeat,
  linear-gradient(45deg,transparent 43%,var(--royal-highlight) 44% 56%,transparent 57%) left 3px bottom 3px/9px 9px no-repeat,
  linear-gradient(135deg,transparent 43%,var(--royal-highlight) 44% 56%,transparent 57%) right 3px bottom 3px/9px 9px no-repeat,
  radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--item-color,#c8a36c) 12%,transparent),transparent 70%),
  linear-gradient(160deg,color-mix(in srgb,var(--item-background,#292031) 92%,#39283a),#18121f) !important;
 box-shadow:inset 0 0 0 3px #100b1780,inset 0 0 0 4px color-mix(in srgb,var(--item-color,#c8a36c) 35%,transparent),0 10px 30px #0008;
 min-width:0;
}
#app .item-popup-header{border-bottom:1px solid color-mix(in srgb,var(--item-color,#c8a36c) 30%,transparent);padding-bottom:8px}
#app .item-dialog .item-close{border-color:var(--item-color,#c8a36c);color:var(--item-color,#f4e3c5)}
#app :is(.room-panel,.dialog,.menu-panel,.chest-loot-panel,.balance-dialog,.item-popup-scroll){scrollbar-width:thin;scrollbar-color:#9d805b #1a1323;overscroll-behavior:contain}
#app :is(.room-panel,.dialog,.item-dialog) h2{overflow-wrap:anywhere}
#app :is(.creation-form,.settings-panel,.balancing-panel) :is(input:not([type="range"]):not([type="checkbox"]),select){
 border-color:#9d805b80;border-radius:4px;background:#16101fe6;box-shadow:inset 0 1px 3px #0005;color:#f4e3c5;
}
#app :is(input,select):focus-visible{outline:2px solid #d9b77c;outline-offset:1px}
@media(prefers-reduced-motion:reduce){#app :is(button,label).royal-button{transition:none}}

/* Popup actions share the same box; the old primary margin offset the label. */
#app .item-actions>button{margin:0;line-height:1.2;text-align:center}