/* Generated fine-pen frames, nine-sliced so handwriting stays thin at any size. */
:root{--ui-paper:#fafafa;--ui-ink:#282828;--ui-rule:#777}
.product-ui .product-flow-panel,.product-ui .relic-cache-panel,.product-ui .spellbook-shell,
.product-ui .status-dock,.product-ui .tap-inspect-panel,.product-ui .quick-spell-dock,
.product-ui .message-panel,.product-ui .action-sidebar,.product-ui .system-menu-panel{
  border:1px solid transparent!important;
  border-image: url('frame-window.png') 56 / 15px / 0 stretch!important;
  border-radius:0!important;background:var(--ui-paper)!important;
  color:var(--ui-ink)!important;box-shadow:none!important;
  backdrop-filter:none!important;
}
.product-ui .product-flow-panel::before{display:none!important}
.product-ui .product-header,.product-ui .product-footer,
.product-ui .sidebar-tab-rail,.product-ui .sidebar-summary,.product-ui .sidebar-subtabs,
.product-ui .sidebar-list,.product-ui .sidebar-detail,.product-ui .spellbook-head,
.product-ui .spellbook-attribute-pages{background:#f8f8f8!important;box-shadow:none!important;color:#333!important;border-color:#b0b0b0!important}
.product-ui .product-map-region,.product-ui.world-village .product-map-region{background:#f4f4f4!important}
.product-ui .product-map-region::before,.product-ui .product-map-region::after{filter:grayscale(1)!important;opacity:.07!important}
.product-ui .canvas-wrap{border-image:url('frame-window.png') 56 / 12px / 0 stretch!important;border-radius:0!important;box-shadow:none!important}
.product-ui .status-dock-meta span,.product-ui .hud-chip,.product-ui .product-setting-row,
.product-ui .dungeon-select-card,.product-ui .inspect-block{
  border:1px solid transparent!important;border-image:url('frame-inset.png') 56 / 7px / 0 stretch!important;
  border-radius:0!important;background:#fafafa!important;box-shadow:none!important;
}
.product-ui button,.product-ui .sidebar-row,.product-ui .product-header summary{
  border:1px solid transparent!important;border-image:url('button-idle.png') 56 / 8px / 0 stretch!important;
  background:#fafafa!important;background-image:none!important;
  color:#303030!important;border-radius:0!important;box-shadow:none!important;
  text-shadow:none!important;transition:background-color .12s ease,color .12s ease;
}
.product-ui button:not(:disabled):hover,.product-ui button.active,.product-ui button.selected,
.product-ui button[aria-selected='true'],.product-ui button[aria-pressed='true'],
.product-ui button.controller-selected,.product-ui .sidebar-row.selected,
.product-ui .dungeon-select-card.controller-selected,.product-ui .product-flow-primary:not(:disabled){
  border-image-source:url('button-selected.png')!important;background:#f0f0f0!important;color:#151515!important;
}
.product-ui button:not(:disabled):active{background:#ddd!important}
.product-ui button:disabled{opacity:.42!important;cursor:default}
.product-ui button:focus-visible,.product-ui summary:focus-visible,.product-ui input:focus-visible,.product-ui select:focus-visible{
  outline:2px dashed #292929!important;outline-offset:3px!important;
}
.product-ui .product-flow-actions button::before,.product-ui .result-bank button::before{display:none!important}
.product-ui .product-flow-actions button,.product-ui .result-bank button{padding:13px 18px!important;min-height:54px;gap:6px}
.product-ui .product-flow-panel{padding:34px 38px!important}
.product-ui .product-flow-panel h1{font-size:clamp(32px,4vw,50px)!important;font-weight:400!important;letter-spacing:.18em!important;margin-bottom:14px!important}
.product-ui .product-flow-kicker{letter-spacing:.2em;color:#737373!important}
.product-ui .product-flow-actions button span{font-size:16px!important}
.product-ui .product-flow-actions button small{font-size:11px!important;line-height:1.4!important;color:#676767!important}
.product-ui .status-meter i{border:1px solid #999!important;border-radius:0!important;background:#e9e9e9!important;box-shadow:none!important}
.product-ui .status-meter i u{background:repeating-linear-gradient(110deg,#555 0 2px,#777 2px 3px)!important}
.product-ui .product-setting-row strong,.product-ui .product-setting-range strong{color:#333!important;font-weight:600!important}
.product-ui .product-setting-row small{color:#626262!important}
.product-ui .product-setting-range{border:1px solid transparent!important;border-image:url('frame-inset.png') 56 / 7px / 0 stretch!important;border-radius:0!important;background:#fafafa!important}
.product-ui .message-panel{padding:8px 12px!important}
.product-ui .status-dock,.product-ui .tap-inspect-panel,.product-ui .quick-spell-dock{padding:10px!important}
@media(pointer:coarse) and (orientation:landscape){
  .product-ui .status-dock,.product-ui .tap-inspect-panel,.product-ui .quick-spell-dock{padding:6px!important;border-image-width:9px!important}
  .product-ui .message-panel{padding:5px 8px!important;border-image-width:9px!important}
  .product-ui .product-flow-panel{padding:18px 22px!important}
  .product-ui .product-flow-actions button{padding:8px 12px!important;min-height:40px}
  .product-ui .product-flow-actions button span{font-size:13px!important}
  .product-ui .product-flow-actions button small{font-size:10px!important}
  .product-ui .touch-actions button,.product-ui .touch-dpad button{border-image-width:7px!important}
}
@media(prefers-reduced-motion:reduce){.product-ui button{transition:none}}
/* Orientation guidance belongs to the same readable ink-and-paper shell. */
.product-ui .landscape-gate{background:#f4f4f4!important;color:#282828!important}
.product-ui .landscape-gate>div{border:1px solid transparent!important;border-image:url('frame-window.png') 56 / 15px / 0 stretch!important;border-radius:0!important;background:#fafafa!important;box-shadow:none!important;padding:26px 20px}
.product-ui .landscape-gate strong{color:#282828!important}
.product-ui .landscape-gate span{color:#555!important}
.product-ui .product-flow-overlay{background:rgba(246,246,246,.97)!important}
.product-ui .product-flow-overlay::before,.product-ui .product-flow-overlay::after{border-color:#d6d6d6!important}
