/* PixelHotel - kit UI in stile Sunflower Land (riproduce src/components/ui di SFL).
   Misure copiate dal sorgente SFL: PIXEL_SCALE = 2.625, bordi 9-slice "20%" (2px su immagini 10x10),
   bottoni "3 3 4 3 fill" con bordi 8/8/10/8 px, font "Basic" (Hint.ttf) a 30px. */

@font-face { font-family: "SflBasic"; src: url("/sfl/fonts/Hint.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "SflSecondary"; src: url("/sfl/fonts/Secondary.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "SflTeeny"; src: url("/sfl/fonts/Teeny.otf") format("opentype"); font-display: block; }

:root {
  --sfl-px: 2.625px;                        /* PIXEL_SCALE */
  --sfl-xxs: 20px; --sfl-xxs-lh: 12px;
  --sfl-xs: 24px;  --sfl-xs-lh: 14px;
  --sfl-sm: 30px;  --sfl-sm-lh: 20px;
  --sfl-base: 36px; --sfl-base-lh: 26px;
  --sfl-lg: 42px;
  --sfl-text: #3e2731;
  --sfl-outer-bg: #c28569;
  --sfl-inner-bg: #e4a672;
  --sfl-box-bg: #b96f50;
}

/* ---------- font ---------- */
.sfl-font, .sfl-font button, .sfl-font input {
  font-family: "SflBasic", sans-serif;
  font-size: var(--sfl-sm);
  line-height: var(--sfl-sm-lh);
  color: var(--sfl-text);
  -webkit-font-smoothing: antialiased;
  font-weight: normal;
  letter-spacing: 0;
}
.sfl-font *, .sfl-font *::before, .sfl-font *::after { box-sizing: border-box; }
.sfl-font img { image-rendering: pixelated; -webkit-user-drag: none; }
.sfl-font { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sfl-font input, .sfl-font textarea { user-select: auto; -webkit-user-select: auto; }
.sfl-pixel-font { font-family: "SflSecondary", monospace; }
.sfl-xxs { font-size: var(--sfl-xxs); line-height: var(--sfl-xxs-lh); }
.sfl-xs  { font-size: var(--sfl-xs);  line-height: var(--sfl-xs-lh); }
.sfl-sm  { font-size: var(--sfl-sm);  line-height: var(--sfl-sm-lh); }
.sfl-base{ font-size: var(--sfl-base); line-height: var(--sfl-base-lh); }
.sfl-lg  { font-size: var(--sfl-lg);  line-height: var(--sfl-sm-lh); }

/* ---------- bordo pixel comune (pixelizedBorderStyle) ---------- */
.sfl-panel, .sfl-inner, .sfl-outer, .sfl-tab.on, .sfl-label, .sfl-box-slot, .sfl-bar-track, .sfl-color {
  border-style: solid;
  border-width: calc(var(--sfl-px) * 2);
  image-rendering: pixelated;
  border-image-repeat: stretch;
  border-radius: calc(var(--sfl-px) * 5);
}

/* OuterPanel: bordo scuro, fondo marrone */
.sfl-outer, .sfl-panel {
  border-image: url("/sfl/ui/dark_border.png") 20%;
  border-image-repeat: stretch;
  background: var(--sfl-outer-bg);
  padding: var(--sfl-px);
  color: var(--sfl-text);
}
.sfl-outer.has-tabs, .sfl-panel.has-tabs { padding-top: calc(var(--sfl-px) * 15); }

/* InnerPanel: bordo chiaro, fondo arancio */
.sfl-inner {
  border-image: url("/sfl/ui/light_border.png") 20%;
  border-image-repeat: stretch;
  background: var(--sfl-inner-bg);
  padding: var(--sfl-px);
}

/* ---------- modale (Modal + CloseButtonPanel) ---------- */
.sfl-modal { position: fixed; inset: 0; z-index: 5000; display: block; pointer-events: auto; }
.sfl-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); animation: sfl-fade .3s ease-out; }
.sfl-modal-scroll { position: fixed; inset: 0; overflow-y: auto; }
.sfl-modal-center { display: flex; min-height: 100%; align-items: center; justify-content: center; padding: 8px; }
.sfl-dialog { position: relative; width: 100%; max-width: 500px; animation: sfl-fade .3s ease-out; }
.sfl-dialog.sm { max-width: 300px; }
.sfl-dialog.lg { max-width: 800px; }
.sfl-modal.closing .sfl-modal-backdrop { animation: sfl-fade-out .2s ease-in forwards; }
.sfl-modal.closing .sfl-dialog { animation: sfl-fade-out .075s ease-out forwards; }
@keyframes sfl-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfl-fade-out { from { opacity: 1; } to { opacity: 0; } }

.sfl-dialog > .sfl-outer { position: relative; max-height: 90vh; overflow-y: auto; overflow-x: hidden; }

/* titolo con X a destra (quando non ci sono schede) */
.sfl-title-row { display: flex; text-align: center; }
.sfl-title { flex-grow: 1; margin-bottom: 12px; font-size: var(--sfl-lg); line-height: var(--sfl-sm-lh); }
.sfl-title-side { flex: none; width: calc(var(--sfl-px) * 11); }

/* X di chiusura (SUNNYSIDE.icons.close, 11x11 * PIXEL_SCALE) */
.sfl-close {
  display: block; flex: none; cursor: pointer;
  width: calc(var(--sfl-px) * 11); height: calc(var(--sfl-px) * 11);
  background: url("/sfl/ui/close.png") center / 100% 100% no-repeat;
  image-rendering: pixelated; border: 0; padding: 0;
}
.sfl-close:hover { filter: brightness(.9); }
.sfl-close.floating { position: absolute; top: 12px; right: 12px; z-index: 20; }

/* ---------- schede (Tab) ---------- */
.sfl-tabs {
  position: absolute; display: flex; z-index: 50;
  top: var(--sfl-px); left: 0; right: var(--sfl-px);
}
.sfl-tabs-scroll { display: flex; overflow-x: auto; margin-right: auto; -ms-overflow-style: none; scrollbar-width: none; }
.sfl-tabs-scroll::-webkit-scrollbar { display: none; }
.sfl-tabs > .sfl-close {
  margin-top: var(--sfl-px); margin-left: calc(var(--sfl-px) * 2); margin-right: var(--sfl-px);
}
.sfl-tab {
  position: relative; display: flex; align-items: center; flex: none;
  margin-right: 4px; cursor: pointer; z-index: 50;
  height: calc(var(--sfl-px) * 16);
  padding-left: calc(var(--sfl-px) * 2); padding-right: calc(var(--sfl-px) * 2);
  /* bordo trasparente della stessa misura: la scheda attiva non cambia larghezza */
  border: calc(var(--sfl-px) * 2) solid transparent;
}
.sfl-tab.on {
  cursor: default;
  border-image: url("/sfl/ui/tab_border_middle.png") 20%;
  border-image-repeat: stretch;
  border-radius: calc(var(--sfl-px) * 5) calc(var(--sfl-px) * 5) 0 0;
  background: var(--sfl-inner-bg);
}
.sfl-tab.on.first { border-image: url("/sfl/ui/tab_border_start.png") 20%; border-image-repeat: stretch; }
.sfl-tab.disabled { opacity: .5; cursor: not-allowed; }
.sfl-tab .sfl-tab-icon { width: calc(var(--sfl-px) * 7); height: calc(var(--sfl-px) * 7); }
.sfl-tab .sfl-tab-text {
  margin-left: 4px; white-space: nowrap; text-overflow: ellipsis;
  font-size: var(--sfl-xs); line-height: var(--sfl-xs-lh);
}
@media (min-width: 640px) {
  .sfl-tab .sfl-tab-text { font-size: var(--sfl-sm); line-height: var(--sfl-sm-lh); }
}

/* icona quadrata (SquareIcon): contenitore NxN, immagine scalata in JS */
.sfl-sq { display: flex; justify-content: center; align-items: center; flex: none; }
.sfl-sq > img { position: relative; display: block; max-width: none; image-rendering: pixelated; }

/* ---------- bottoni (Button) ---------- */
.sfl-btn {
  --sfl-btn-img: url("/sfl/ui/light_button.png");
  --sfl-btn-pressed: url("/sfl/ui/light_button_pressed.png");
  display: flex; justify-content: center; align-items: center; width: 100%;
  padding: 4px; margin: 0; cursor: pointer; background: none;
  font-family: "SflBasic", sans-serif; font-size: var(--sfl-sm); line-height: var(--sfl-sm-lh); color: var(--sfl-text);
  border-style: solid; border-width: 8px 8px 10px 8px;
  border-image: var(--sfl-btn-img) 3 3 4 3 fill;
  border-image-repeat: stretch;
  image-rendering: pixelated;
  border-radius: calc(var(--sfl-px) * 5);
  transition: transform .15s;
  outline: none;
}
.sfl-btn > .sfl-btn-in { margin-bottom: 4px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 4px; }
.sfl-btn > .sfl-btn-in > img { height: calc(var(--sfl-px) * 7); image-rendering: pixelated; }
.sfl-btn.auto { width: auto; }
.sfl-btn:hover { filter: brightness(.9); }
.sfl-btn:active { border-image: var(--sfl-btn-pressed) 3 3 4 3 fill; transform: scale(.99); }
.sfl-btn.secondary { --sfl-btn-img: url("/sfl/ui/secondary_button.png"); --sfl-btn-pressed: url("/sfl/ui/secondary_button.png"); }
.sfl-btn.primary { --sfl-btn-img: url("/sfl/ui/light_button.png"); }
.sfl-btn.disabled, .sfl-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.sfl-btn.disabled:active, .sfl-btn:disabled:active { border-image: var(--sfl-btn-img) 3 3 4 3 fill; transform: none; }
.sfl-btns { display: flex; gap: 4px; }
.sfl-btns > .sfl-btn { flex: 1 1 0; }

/* pannello-bottone (ButtonPanel), p.es. schede di un negozio */
.sfl-btn-panel {
  --sfl-btn-img: url("/sfl/ui/light_button.png");
  --sfl-btn-pressed: url("/sfl/ui/light_button_pressed.png");
  position: relative; padding: var(--sfl-px); color: #674544;
  border-style: solid; border-width: 8px 8px 10px 8px;
  border-image: var(--sfl-btn-img) 3 3 4 3 fill; border-image-repeat: stretch;
  image-rendering: pixelated; border-radius: calc(var(--sfl-px) * 5);
}
.sfl-btn-panel.secondary { --sfl-btn-img: url("/sfl/ui/used_button.png"); --sfl-btn-pressed: url("/sfl/ui/used_button.png"); }
.sfl-btn-panel.card { --sfl-btn-img: url("/sfl/ui/card_button.png"); --sfl-btn-pressed: url("/sfl/ui/used_button.png"); }
.sfl-btn-panel.selected { --sfl-btn-img: url("/sfl/ui/selected_button.png"); --sfl-btn-pressed: url("/sfl/ui/selected_button.png"); }
.sfl-btn-panel.click { cursor: pointer; }
.sfl-btn-panel.click:hover { filter: brightness(.9); }
.sfl-btn-panel.click:active { border-image: var(--sfl-btn-pressed) 3 3 4 3 fill; transform: scale(.997); }
.sfl-btn-panel.disabled { opacity: .5; }

/* ---------- etichette (Label) ---------- */
.sfl-label {
  position: relative; display: inline-flex; width: fit-content; justify-content: center; align-items: center;
  font-size: var(--sfl-xs); line-height: var(--sfl-xs-lh);
  padding-left: 3px; padding-right: 3px; white-space: nowrap;
  border-image: url("/sfl/ui/gray_border.png") 20%; border-image-repeat: stretch;
  background: #c0cbdc; color: #181425;
}
.sfl-label.has-icon { padding-left: 14px; padding-right: 4px; margin-left: 12px; }
.sfl-label > .sfl-label-icon {
  position: absolute; top: 50%; transform: translateY(-50%); left: -12px;
  width: calc(var(--sfl-px) * 9); height: 24px;
}
.sfl-label.default  { border-image-source: url("/sfl/ui/gray_border.png");    background: #c0cbdc; color: #181425; }
.sfl-label.success  { border-image-source: url("/sfl/ui/green_border.png");   background: #3e8948; color: #ffffff; }
.sfl-label.danger   { border-image-source: url("/sfl/ui/danger_border.png");  background: #e43b44; color: #ffffff; }
.sfl-label.warning  { border-image-source: url("/sfl/ui/orange_border.png");  background: #f09100; color: #3e2731; }
.sfl-label.info     { border-image-source: url("/sfl/ui/blue_border.png");    background: #1e6dd5; color: #ffffff; }
.sfl-label.vibrant  { border-image-source: url("/sfl/ui/vibrant_border.png"); background: #b65389; color: #ffffff; }
.sfl-label.chill    { border-image-source: url("/sfl/ui/calm_border.png");    background: #e4a672; color: #3e2731; }
.sfl-label.formula  { border-image-source: url("/sfl/ui/formula_border.png"); background: #3c4665; color: #ffffff; }
.sfl-label.transparent { border-image: none; border-color: transparent; background: none; color: #181425; }

/* ColorPanel: pannello con i colori delle etichette */
.sfl-color { border-image: url("/sfl/ui/gray_border.png") 20%; border-image-repeat: stretch; background: #c0cbdc; color: #181425; padding: var(--sfl-px); }
.sfl-color.success { border-image-source: url("/sfl/ui/green_border.png"); background: #3e8948; color: #fff; }
.sfl-color.danger  { border-image-source: url("/sfl/ui/danger_border.png"); background: #e43b44; color: #fff; }
.sfl-color.warning { border-image-source: url("/sfl/ui/orange_border.png"); background: #f09100; color: #3e2731; }
.sfl-color.info    { border-image-source: url("/sfl/ui/blue_border.png"); background: #1e6dd5; color: #fff; }
.sfl-color.vibrant { border-image-source: url("/sfl/ui/vibrant_border.png"); background: #b65389; color: #fff; }

/* ---------- casella oggetto (Box) ---------- */
.sfl-box { position: relative; flex: none; }
.sfl-box-slot {
  position: relative; background: var(--sfl-box-bg);
  border-image: url("/sfl/ui/dark_border.png") 20%; border-image-repeat: stretch;
  width: calc(var(--sfl-px) * 17.7); height: calc(var(--sfl-px) * 17.7);
  margin: calc(var(--sfl-px) * 3) calc(var(--sfl-px) * 3) calc(var(--sfl-px) * 2) calc(var(--sfl-px) * 2);
}
.sfl-box.missing .sfl-box-slot { background: #945542; }
.sfl-box.click .sfl-box-slot { cursor: pointer; }
.sfl-box.disabled .sfl-box-slot { cursor: not-allowed; opacity: .75; }
.sfl-box.locked .sfl-box-img { opacity: .75; }
.sfl-box-img { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.sfl-box-img > .sfl-sq { width: calc(var(--sfl-px) * 13.7); height: calc(var(--sfl-px) * 13.7); }
.sfl-box-count { position: absolute; right: calc(var(--sfl-px) * -5); top: calc(var(--sfl-px) * -5); z-index: 10; pointer-events: none; }
.sfl-box-count > .sfl-label { height: 24px; }
.sfl-box:hover .sfl-box-count { z-index: 20; }
.sfl-box-lock { position: absolute; z-index: 20; right: calc(var(--sfl-px) * -6); top: calc(var(--sfl-px) * -6); width: calc(var(--sfl-px) * 11); }
.sfl-box-sel { position: absolute; pointer-events: none; width: calc(var(--sfl-px) * 8); display: none; }
.sfl-box-sel.tl { top: var(--sfl-px); left: 0; }
.sfl-box-sel.tr { top: var(--sfl-px); left: calc(var(--sfl-px) * 13.7); }
.sfl-box-sel.bl { top: calc(var(--sfl-px) * 13.7); left: 0; }
.sfl-box-sel.br { top: calc(var(--sfl-px) * 13.7); left: calc(var(--sfl-px) * 13.7); }
.sfl-box.click.selected .sfl-box-sel { display: block; }
@media (hover: hover) { .sfl-box.click:hover .sfl-box-sel { display: block; } }
.sfl-boxes { display: flex; flex-wrap: wrap; }

/* ---------- barra di avanzamento (ResizableBar) ---------- */
.sfl-bar { display: flex; align-items: center; gap: 6px; }
.sfl-bar-track {
  position: relative; flex: none;
  border-image: url("/sfl/ui/progress_bar_border.png") 20% 20% 30%; border-image-repeat: stretch;
  border-width: calc(var(--sfl-px) * 2) calc(var(--sfl-px) * 2) calc(var(--sfl-px) * 3);
  width: calc(var(--sfl-px) * 15); height: calc(var(--sfl-px) * 7);
  background: #193c3e;
}
.sfl-bar.wide { width: 100%; }
.sfl-bar.wide .sfl-bar-track { flex: 1 1 auto; width: auto; }
.sfl-bar-fill { position: relative; height: 100%; background: #63c74d; transition: width .5s; }
.sfl-bar.health  .sfl-bar-track { background: #0d2f6d; } .sfl-bar.health  .sfl-bar-fill { background: #0099db; }
.sfl-bar.error   .sfl-bar-track { background: #3e2731; } .sfl-bar.error   .sfl-bar-fill { background: #e43b44; }
.sfl-bar.buff    .sfl-bar-track { background: #193c3e; } .sfl-bar.buff    .sfl-bar-fill { background: #b65389; }
.sfl-bar.quantity .sfl-bar-track { background: #543a2b; } .sfl-bar.quantity .sfl-bar-fill { background: #ffb01e; }
.sfl-bar-text { font-size: var(--sfl-xs); line-height: var(--sfl-xs-lh); white-space: nowrap; }

/* ---------- varie ---------- */
.sfl-scroll::-webkit-scrollbar, .sfl-dialog > .sfl-outer::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 10px; border-radius: 5px; }
.sfl-scroll::-webkit-scrollbar-track, .sfl-dialog > .sfl-outer::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #f5f5f5; border: 2.625px solid black; border-radius: 5px; }
.sfl-scroll::-webkit-scrollbar-thumb, .sfl-dialog > .sfl-outer::-webkit-scrollbar-thumb { border-radius: 5px; border: 2.625px solid black; background-color: #eea368; }
.sfl-p { margin: 0 0 8px; font-size: var(--sfl-xs); line-height: var(--sfl-xs-lh); }
.sfl-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sfl-col { display: flex; flex-direction: column; gap: 4px; }
.sfl-divider { height: var(--sfl-px); background: #c28569; margin: 6px 0; border: 0; }
.sfl-input {
  width: 100%; font-family: "SflBasic", sans-serif; font-size: var(--sfl-sm); line-height: var(--sfl-sm-lh);
  color: var(--sfl-text); background: #ead4aa; padding: 2px 6px; outline: none;
  border-style: solid; border-width: calc(var(--sfl-px) * 2); border-image: url("/sfl/ui/dark_border.png") 20%;
  border-image-repeat: stretch; image-rendering: pixelated; border-radius: calc(var(--sfl-px) * 5);
}

/* ---------- SplitScreenView: griglia a sinistra, dettagli a destra (in colonna su telefono) ---------- */
.sfl-split { display: flex; flex-direction: column-reverse; }
.sfl-split > .sfl-split-content { width: 100%; height: fit-content; padding: 4px; display: flex; flex-wrap: wrap; align-content: flex-start;
  overflow-y: auto; overflow-x: hidden; max-height: 14rem; margin-top: 4px; }
.sfl-split > .sfl-split-panel { width: 100%; height: fit-content; }
@media (min-width: 640px) {
  .sfl-split { flex-direction: row; }
  .sfl-split > .sfl-split-content { width: 60%; max-height: 24rem; margin-top: 0; margin-right: 4px; }
  .sfl-split > .sfl-split-panel { width: 40%; }
}