.dio-lancio { position: fixed; z-index: 12; top: 87px; right: 24px; min-width: 70px; color: #2b2515 !important; background: #e5bb71 !important; border-color: #f6d598 !important; box-shadow: 0 3px 18px #0005; }
.dio-dock { position: fixed; z-index: 22; left: 24px; bottom: 16px; display: flex; flex-wrap: nowrap; gap: 6px; padding: 6px; width: max-content; max-width: calc(100vw - 48px); border: 1px solid #5a85a45c; border-radius: 7px; background: #111d18f5; box-shadow: 0 6px 24px #0005; box-sizing: border-box; }
.dio-dock[hidden], .dio-dock [hidden] { display: none !important; }
.dio-dock .dio-potere { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 2px solid #4d89bd; border-radius: 4px; background: #1a303b; color: #b7dcf6; box-sizing: border-box; }
.dio-dock .dio-potere:hover, .dio-dock .dio-potere:focus-visible { border-color: #93c9ef; background: #244552; color: #e6f5ff; outline: none; }
.dio-dock .dio-potere.attivo { border-color: #e3c074; background: #413b24; color: #f4dca9; }
.dio-dock .dio-potere[data-potere="possesso"].controllo-attivo { border-color: #75e38f; background: #214c32; color: #b5f8bf; box-shadow: inset 0 0 12px #78e7921c; }
.dio-dock .dio-potere[data-potere="possesso"].in-attesa { background: #254757; }
.dio-potere-icona, .dio-potere-icona svg { display: block; width: 28px; height: 28px; pointer-events: none; }
.dio-potere-tooltip { position: absolute; left: 0; bottom: calc(100% + 12px); width: max-content; max-width: 230px; padding: 8px 10px; border: 1px solid #7799ae70; border-radius: 4px; background: #11201c; color: #e8f0e2; font: 11px/1.4 "Segoe UI", system-ui, sans-serif; box-shadow: 0 4px 16px #0005; text-align: left; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; }
.dio-potere:hover .dio-potere-tooltip, .dio-potere:focus-visible .dio-potere-tooltip { opacity: 1; transform: none; }
body:has(.dio-dock:not([hidden])) #aiuto-voxel { left: 550px; }
.dio-voxel { position: fixed; z-index: 23; bottom: 88px; left: 24px; width: 360px; max-width: calc(100vw - 32px); padding: 12px; border: 1px solid #e5bb7159; border-radius: 6px; background: #142019; box-shadow: 0 8px 28px #0004; color: #e5eddc; font: 12px/1.4 "Segoe UI", system-ui, sans-serif; }
.dio-voxel, .dio-voxel * { box-sizing: border-box; }
.dio-voxel[hidden], .dio-voxel [hidden] { display: none !important; }
.dio-voxel-testata { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dio-voxel-testata strong { color: #efd099; font-weight: 600; }
.dio-voxel-testata .dio-btn { min-height: 28px; padding: 4px 8px; }
.dio-voxel-form { display: grid; grid-template-columns: 78px minmax(0, 1fr) 76px; gap: 10px; align-items: end; }
.dio-voxel-form .dio-campo { margin: 0; font-size: 11px; }
.dio-voxel-form .dio-campo:first-child { grid-column: 1 / 3; }
.dio-voxel-form .dio-primario { grid-column: 2 / -1; }
.dio-voxel-anteprima { width: 78px; height: 52px; object-fit: contain; border: 1px solid #c5d2b620; border-radius: 4px; background: #0b1510; }
.dio-voxel-form > .dio-btn:not(.dio-primario) { grid-column: 1 / -1; }
.dio-voxel-messaggio { margin: 10px 0 0; color: #aec39f; font-size: 11px; }
.dio-voxel-messaggio.errore { color: #ffb2a0; }
.dio-voxel.in-puntamento { border-color: #e5bb71; }
.dio-voxel :focus-visible { outline: 2px solid #f4d29a; outline-offset: 2px; }
canvas.dio-mirino-voxel { cursor: crosshair !important; }
.dio-materiali { margin-bottom: 15px; min-width: 0; }
.dio-materiali-titolo { display: block; margin-bottom: 8px; color: #c9d4c2; font-size: 12px; font-weight: 550; }
.dio-materiali-griglia { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 5px; }
.dio-materiale.dio-btn { display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 62px; padding: 7px 2px; background: #112018; border-color: #92aa7738; }
.dio-materiale svg, .dio-materiale > span { display: block; width: 27px; height: 27px; }
.dio-materiale small { font-size: 9px; font-weight: 550; }
.dio-materiale[aria-checked="true"] { border-color: #d8c181; background: #51482a55; box-shadow: inset 0 0 0 1px #d8c18145; }
.dio-azione-icona.dio-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; min-height: 42px; padding: 0; }
.dio-azione-icona.dio-scegli-punto { width: 46px; height: 46px; }
.dio-azione-icona .dio-potere-icona, .dio-azione-icona .dio-potere-icona svg { width: 25px; height: 25px; }
.dio-azione-icona:hover .dio-potere-tooltip, .dio-azione-icona:focus-visible .dio-potere-tooltip { opacity: 1; transform: none; }
.dio-miniera-voxel { position: fixed; z-index: 24; left: 24px; bottom: 88px; width: 330px; max-width: calc(100vw - 32px); max-height: calc(100dvh - 195px); overflow-y: auto; padding: 16px; border: 1px solid #d6bb7477; border-radius: 7px; background: #15231cf5; box-shadow: 0 12px 45px #0008; color: #e2ead5; font: 12px/1.5 "Segoe UI", system-ui,sans-serif; }
.dio-miniera-voxel, .dio-miniera-voxel * { box-sizing: border-box; }
.dio-miniera-voxel[hidden],.dio-miniera-mirino[hidden],.dio-miniera-aiuto[hidden] { display: none !important; }
.dio-miniera-testata { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; color: #e5ce91; font-size: 15px; }
.dio-miniera-testata .dio-azione-icona { width: 32px; height: 32px; min-height: 32px; background: transparent; }
.dio-miniera-raggio { color: #93d9ef !important; font-size: 15px !important; }
.dio-miniera-azioni { display: flex; justify-content: flex-end; gap: 9px; margin-top: 14px; }
.dio-miniera-azioni .dio-potere-tooltip { left: auto; right: 0; }
.dio-miniera-profondita, .dio-miniera-coordinate { margin: 9px 0 0; color: #aebf9c; font-size: 10px; }
.dio-miniera-stato { margin: 13px 0 0; padding-top: 12px; border-top: 1px solid #aabd8b2b; color: #bad1a5; font-size: 11px; }
.dio-miniera-stato.errore { color: #ffb09d; }
.dio-miniera-voxel :focus-visible { outline: 2px solid #e5cf8e; outline-offset: 2px; }
.dio-miniera-mirino { position: fixed; z-index: 100; width: 27px; height: 27px; transform: translate(-50%,-50%); border: 2px solid #ff534d; border-radius: 50%; box-shadow: 0 0 0 1px #290d0dcc,0 0 9px #f0403655; pointer-events: none; }
.dio-miniera-mirino:before,.dio-miniera-mirino:after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #ff534d; box-shadow: 0 0 1px #270d0d; }
.dio-miniera-mirino:before { width: 37px; height: 2px; }.dio-miniera-mirino:after { width: 2px; height: 37px; }
canvas.dio-mirino-miniera { cursor: none !important; }
.dio-miniera-aiuto { position: fixed; z-index: 25; top: 142px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); margin: 0; padding: 12px 17px; color: #f9c1aa; background: #30231ce8; border: 1px solid #e66f5355; border-radius: 4px; font: 12px/1.4 "Segoe UI",system-ui,sans-serif; text-align: center; pointer-events: none; }
@media (max-width: 800px) { .dio-miniera-voxel { left: 10px; bottom: 80px; max-height: calc(100dvh - 190px); } }
@media (max-width: 800px) { .dio-dock { left: 10px; bottom: 16px; max-width: calc(100vw - 20px); gap: 5px; padding: 5px; } .dio-dock .dio-potere { flex-basis: 42px; width: 42px; height: 42px; min-height: 42px; } .dio-potere-icona, .dio-potere-icona svg { width: 25px; height: 25px; } .dio-voxel { left: 10px; bottom: 80px; width: 340px; max-width: calc(100vw - 20px); } }
@media (max-width: 800px) { body:has(.dio-dock:not([hidden])) .rts-filtri { bottom: 80px; } body:has(.dio-dock:not([hidden])) #rts-minimappa { top: var(--rts-hud-top,132px) !important; bottom: auto !important; } }
.dio-modifica-mondo{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 14px;padding:12px 14px;border:1px solid #e5bb7166;border-radius:6px;background:#e5bb7110}.dio-modifica-mondo>div{display:flex;flex-direction:column;gap:2px}.dio-modifica-mondo strong{color:#f0d493}.dio-modifica-mondo small{color:#aebaa5}.dio-campo-bottino{grid-column:1/-1}.dio-campo-bottino .bottino-editor{margin-top:8px}
@media (max-width: 370px) { .dio-dock { gap: 4px; } .dio-dock .dio-potere { flex-basis: 38px; width: 38px; height: 38px; min-height: 38px; } }
@media (max-height: 650px) { .dio-voxel { max-height: calc(100dvh - 165px); overflow-y: auto; } .dio-voxel-anteprima { height: 38px; } }
.dio-velo { position: fixed; z-index: 120; inset: 0; display: flex; justify-content: center; align-items: center; padding: 24px; background: #07100cba; backdrop-filter: blur(9px); }
.dio-dialogo { display: flex; flex-direction: column; width: min(1150px, 100%); height: min(850px, 94dvh); color: #f4f1e6; background: #162019; border: 1px solid #8a987150; border-radius: 9px; box-shadow: 0 24px 100px #0009; font: 13px/1.5 "Segoe UI", system-ui, sans-serif; overflow: hidden; }
.dio-dialogo *, .dio-lancio { box-sizing: border-box; }
.dio-velo[hidden], .dio-lancio[hidden], .dio-dialogo [hidden] { display: none !important; }
.dio-dialogo h2, .dio-dialogo h3, .dio-dialogo p { margin-top: 0; }
.dio-dialogo h2 { margin-bottom: 0; font-size: 24px; font-weight: 650; letter-spacing: -.03em; }
.dio-dialogo h3 { font-size: 16px; line-height: 1.35; margin-bottom: 12px; }
.dio-dialogo :focus-visible, .dio-lancio:focus-visible { outline: 2px solid #f4d29a; outline-offset: 3px; }
.dio-testata { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 25px; border-bottom: 1px solid #c5d2b61a; background: #1b281f; }
.dio-soprattitolo { color: #e5bb71; font: 10px/1.4 ui-monospace, Consolas, monospace; letter-spacing: .17em; margin-bottom: 8px; }
.dio-nav { display: flex; gap: 5px; flex-shrink: 0; padding: 12px 24px; border-bottom: 1px solid #c5d2b61a; background: #121c16; overflow-x: auto; }
.dio-nav .dio-btn { flex-shrink: 0; }
.dio-corpo { overflow: auto; flex: 1; padding: 24px; scrollbar-width: thin; scrollbar-color: #697c55 #162019; }
.dio-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 1px solid #c5d2b62b; border-radius: 4px; color: #d5decc; background: #253229; font: 600 11px/1.4 "Segoe UI", system-ui, sans-serif; cursor: pointer; transition: background .15s, border-color .15s; }
.dio-btn:hover { color: #fff; border-color: #d9e5ca77; background: #364635; }
.dio-btn:has(>.dio-comando-icona) { gap:8px; }
.dio-comando-icona,.dio-comando-icona svg { display:block; width:19px; height:19px; flex:0 0 19px; pointer-events:none; }
.dio-comando-testo { min-width:0; }
.dio-nav .dio-comando-icona,.dio-nav .dio-comando-icona svg { width:20px; height:20px; flex-basis:20px; }
.dio-forgia-azioni .dio-comando-icona { color:#d7c18b; }
.dio-fogli .dio-comando-icona,.dio-fogli .dio-comando-icona svg { width:21px; height:21px; flex-basis:21px; }
.dio-sezione .dio-btn.dio-pericolo .dio-comando-icona { color:#df9d89; }
@media(max-width:760px) { .dio-nav .dio-btn { padding:9px 10px; }.dio-nav .dio-comando-testo { max-width:120px; }.dio-btn:has(>.dio-comando-icona) { gap:6px; }.dio-fogli .dio-btn { padding:8px; } }
.dio-btn:disabled { opacity: .45; cursor: not-allowed; }
.dio-btn.dio-primario { background: #b9dc87; color: #1b2e19; border-color: #d0e8ad; }
.dio-btn.dio-primario:hover { background: #d0e8ad; }
.dio-btn.dio-pericolo { color: #efaf9d; border-color: #e08c7238; background: #382b26; }
.dio-btn.dio-pericolo:hover { background: #4d312a; }
.dio-btn.dio-discreto { background: transparent; }
.dio-btn.attivo { color: #f8d897; border-color: #e5bb7199; background: #433c25; }
.dio-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(275px, 100%), 1fr)); gap: 16px; align-items: start; }
.dio-sezione { padding: 18px; background: #202d235e; border: 1px solid #c5d2b61f; border-radius: 6px; margin-bottom: 16px; }
.dio-griglia > .dio-sezione { margin: 0; }
.dio-forgia-preset.dio-btn { display:flex; width:100%; min-height:84px; margin-top:9px; padding:4px 10px 4px 3px; gap:8px; text-align:left; justify-content:flex-start; background:#112019; }
.dio-forgia-preset-immagine { display:block; flex:0 0 112px; width:112px; height:80px; object-fit:contain; }
.dio-forgia-preset-icona { display:block; flex:0 0 58px; width:58px; height:54px; margin:10px 20px; color:#bdd491; }
.dio-forgia-preset > strong { font-size:12px; line-height:1.5; font-weight:600; overflow-wrap:anywhere; }
.dio-sezione > .dio-btn + .dio-btn { margin-left: 8px; }
.dio-nota { color: #adbba6; font-size: 12px; line-height: 1.65; margin-bottom: 15px; }
.dio-campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0 0 13px; color: #c9d4c2; font-size: 12px; }
.dio-campo > span { font-weight: 550; }
.dio-campo input, .dio-campo select { width: 100%; min-width: 0; height: 36px; padding: 7px 10px; color: #f4f1e6; background: #0e1913; border: 1px solid #bccdaa30; border-radius: 4px; font: inherit; }
.dio-campo input:focus, .dio-campo select:focus { border-color: #b9dc87; }
.dio-campo input[type="range"] { padding: 0; accent-color: #b9dc87; height: 26px; }
.dio-campo input[type="color"] { width: 100%; padding: 4px; height: 40px; cursor: pointer; }
.dio-campo:has(input[type="checkbox"]) { display: flex; justify-content: space-between; align-items: center; }
.dio-campo input[type="checkbox"] { width: 19px; height: 19px; accent-color: #b9dc87; }
.dio-campo output { font: 11px/1.3 ui-monospace, Consolas, monospace; color: #e5bb71; text-align: right; }
.dio-calcolo { padding: 12px; color: #e0d2a7; background: #e5bb710a; border: 1px solid #e5bb712b; border-radius: 3px; font-size: 11px; line-height: 1.7; }
.dio-btn.dio-scegli-punto { width: 100%; min-height: 42px; margin-top: 6px; font-size: 12px; }
.dio-azioni { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dio-azioni:last-child { margin-bottom: 0; }
.dio-riga { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid #c5d2b617; }
.dio-riga:last-child { border-bottom: none; }
.dio-riga .dio-azioni { margin: 0; flex-shrink: 0; }
.dio-riga-testo { min-width: 0; overflow-wrap: anywhere; }
.dio-riga strong, .dio-riga small { display: block; }
.dio-riga strong { font-size: 12px; font-weight: 600; }
.dio-riga small { color: #a6b49e; font-size: 10px; margin-top: 4px; }
.dio-messaggio { flex-shrink: 0; padding: 12px 24px; margin: 0 !important; min-height: 42px; color: #bedaa5; background: #111c15; border-top: 1px solid #c5d2b61a; font-size: 12px; }
.dio-messaggio.errore { color: #ffb2a0; }
.dio-conferma { flex-shrink: 0; padding: 18px 24px; color: #f2ceb4; background: #3a2b20; border-top: 1px solid #d8996155; }
.dio-conferma p { margin-bottom: 12px; }
.dio-forgia-layout { display: grid; grid-template-columns: minmax(260px, .95fr) minmax(320px, 1.05fr); gap: 25px; align-items: start; }
.dio-forgia-azioni { position: sticky; top: -24px; z-index: 3; padding: 12px 0; background: #162019; border-bottom: 1px solid #c5d2b626; }
.dio-catalogo-icona { object-fit: contain; flex-shrink: 0; background: #0e1913; border-radius: 5px; }
.dio-vetrina-colonna { position: sticky; top: 55px; }
.dio-vetrina { width: 100%; height: 330px; display: flex; align-items: center; justify-content: center; background: #17221d; border: 1px solid #b9cc9a3b; border-radius: 6px; overflow: hidden; margin-bottom: 12px; }
.dio-vetrina canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.dio-vetrina.trascina canvas { cursor: grabbing; }
.dio-vetrina:focus-visible { outline: 2px solid #d9b953; outline-offset: 3px; }
.dio-vetrina-comandi { color: #b7c7a7; font-size: 12px; margin: 0 0 12px; }
.dio-vetrina .dio-nota { padding: 24px; }
.dio-vetrina-colonna > .dio-nota { margin-top: 14px; }
.dio-fogli { display: flex; flex-wrap: wrap; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid #c5d2b626; margin-bottom: 18px; }
.dio-fogli .dio-btn { padding: 7px 10px; }
.dio-foglio { min-height: 280px; }
.dio-editor > .dio-azioni { margin-top: 20px; }
.dio-account-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.2fr); gap: 24px; }
.dio-account-layout > .dio-lista { align-self: start; }
.dio-account-scheda { padding: 20px; border: 1px solid #c5d2b62b; border-radius: 6px; background: #17231a; }
.dio-account-colore { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #c5d2b62b; }
.dio-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.dio-campione.dio-btn { width: 30px; min-height: 30px; padding: 0; background: var(--dio-colore); border: 2px solid #17231a; outline: 1px solid #c5d2b644; }
.dio-campione.dio-btn[aria-pressed="true"] { outline: 2px solid #f1eacb; }
.dio-account-scheda form > .dio-sezione { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 14px; }
.dio-account-scheda form > .dio-sezione h3 { grid-column: 1 / -1; }
.dio-pieno-testata { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.dio-pieno-testata .dio-btn { flex-shrink: 0; }
.dio-pieno-testata h3 { font-size: 22px; margin-bottom: 8px; }
.dio-pieno-testata .dio-nota { max-width: 650px; margin-bottom: 0; }
.dio-pieno-stato { color: #a7b79b; font-size: 11px; margin: 10px 0 20px; }
.dio-pieno-stato.errore, .dio-pieno-errore { color: #ffb2a0; }
.dio-pieno-riepilogo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; margin-bottom: 20px; }
.dio-pieno-principale, .dio-pieno-capienza { padding: 22px; border: 1px solid #b6cb9b30; border-radius: 6px; background: #1c2b20; }
.dio-pieno-dati h4 { margin: 0 0 12px; color: #bdcdb0; font-size: 12px; font-weight: 550; }
.dio-pieno-numero { display: block; color: #edf4e4; font: 600 clamp(32px, 4vw, 48px)/1.15 "Segoe UI", system-ui, sans-serif; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.dio-pieno-principale .dio-nota { margin: 0; }
.dio-pieno-righe { color: #d6e2cd; margin: 0 0 10px; font-size: 14px; }
.dio-pieno-percentuale { display: block; margin-bottom: 12px; font-size: 21px; font-weight: 600; color: #dcebd3; }
.dio-pieno-barra { height: 15px; border-radius: 3px; background: #0e1812; border: 1px solid #bed1aa26; overflow: hidden; }
.dio-pieno-riempimento { display: block; height: 100%; background: #67b477; border-radius: 2px; transition: width .3s ease; }
.dio-pieno-capienza.attenzione .dio-pieno-riempimento { background: #d9b953; }
.dio-pieno-capienza.critico .dio-pieno-riempimento { background: #de7565; }
.dio-pieno-capienza.attenzione .dio-pieno-soglia { color: #e7ca77; }
.dio-pieno-capienza.critico .dio-pieno-soglia { color: #ffb2a0; }
.dio-pieno-soglia { margin: 12px 0 0; color: #aed29c; font-size: 12px; line-height: 1.6; }
.dio-pieno-metriche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dio-pieno-metrica { padding: 18px; border: 1px solid #b6cb9b25; border-radius: 5px; background: #1c2b2080; }
.dio-pieno-metrica strong { display: block; color: #e7e8d8; font-size: 21px; font-weight: 550; font-variant-numeric: tabular-nums; }
.dio-pieno-metrica p { color: #a9b79f; font-size: 11px; line-height: 1.6; margin: 10px 0 0; }
.dio-pieno-errore { padding: 14px 18px; border: 1px solid #e8977040; border-radius: 5px; background: #56332335; font-size: 12px; }
@media (max-width: 760px) { .dio-pieno-testata { flex-direction: column; gap: 12px; } .dio-pieno-riepilogo { grid-template-columns: 1fr; gap: 14px; } .dio-pieno-metriche { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dio-pieno-principale, .dio-pieno-capienza { padding: 18px; } }
@media (max-width: 420px) { .dio-pieno-metriche { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .dio-velo { padding: 8px; }
  .dio-dialogo { height: 97dvh; }
  .dio-testata { padding: 15px; }
  .dio-dialogo h2 { font-size: 20px; }
  .dio-soprattitolo { font-size: 8px; }
  .dio-nav { padding: 10px 14px; }
  .dio-corpo { padding: 15px; }
  .dio-forgia-layout, .dio-account-layout { grid-template-columns: 1fr; }
  .dio-vetrina-colonna { position: static; }
  .dio-vetrina { height: 240px; }
  .dio-riga { flex-wrap: wrap; }
  .dio-lancio { right: 14px; top: 81px; }
}
@media (prefers-reduced-motion: reduce) { .dio-btn { transition: none; } }
@media (max-width: 420px) { .dio-dock { gap: 3px; } .dio-dock .dio-potere { flex-basis: 34px; width: 34px; height: 34px; min-height: 34px; } .dio-dock .dio-potere-icona, .dio-dock .dio-potere-icona svg { width: 22px; height: 22px; } }
@media (max-width: 340px) { .dio-dock { gap: 2px; } .dio-dock .dio-potere { flex-basis: 30px; width: 30px; height: 30px; min-height: 30px; } }
@media (max-width: 420px) { .dio-dock { gap: 2px; padding: 5px; } .dio-dock .dio-potere { flex-basis: 32px; width: 32px; height: 32px; min-height: 32px; } }
@media (max-width: 340px) { .dio-dock .dio-potere { flex-basis: 27px; width: 27px; height: 27px; min-height: 27px; } }

/* One creation workspace at a time, with real saved-model previews. */
.dio-mondo-categorie { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:24px; }
.dio-mondo-categoria.dio-btn { display:flex; min-width:0; min-height:132px; gap:14px; padding:15px; justify-content:flex-start; text-align:left; background:linear-gradient(145deg,#24392c,#14241c); border-color:#a9c58d38; border-radius:7px; }
.dio-mondo-categoria[aria-selected="true"] { border-color:#c6db91; box-shadow:inset 0 0 0 1px #c6db9140; background:linear-gradient(145deg,#35492d,#243722); }
.dio-mondo-icona { display:block; width:70px; height:70px; color:#dbca8d; flex:0 0 auto; }
.dio-mondo-icona svg { display:block; width:100%; height:100%; }
.dio-mondo-immagine { display:block; width:112px; height:85px; object-fit:contain; flex:0 0 auto; }
.dio-mondo-categoria-testo { min-width:0; }
.dio-mondo-categoria strong { display:block; font-size:18px; color:#f0eddb; margin-bottom:5px; }
.dio-mondo-categoria small { display:block; color:#b1c29f; font:11px/1.45 "Segoe UI",system-ui,sans-serif; }
.dio-mondo-pannelli > .dio-sezione { margin:0; padding:24px; background:#1c2b2180; }
.dio-mondo-form { display:grid; grid-template-columns:1fr 1fr; gap:0 20px; max-width:800px; }
.dio-mondo-form .dio-largo,.dio-mondo-form .dio-materiali,.dio-mondo-form .dio-calcolo,.dio-mondo-form .dio-mondo-azioni { grid-column:1/-1; }
.dio-mondo-form .dio-materiali-griglia { gap:12px; margin-bottom:8px; }
.dio-mondo-form .dio-materiale.dio-btn { min-height:92px; padding:12px; }
.dio-mondo-form .dio-materiale svg,.dio-mondo-form .dio-materiale > span { width:39px; height:39px; }
.dio-mondo-form .dio-materiale small { font-size:11px; }
.dio-campo-con-icona { display:flex; align-items:center; gap:10px; width:100%; }
.dio-campo-icona { display:block; width:31px; height:31px; flex:0 0 31px; color:#c1d2a7; }
.dio-campo-icona svg { display:block; width:100%; height:100%; }
.dio-mondo-azioni { display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:16px; padding-top:15px; border-top:1px solid #bad19b24; }
.dio-mondo-azioni > span { color:#b5c6a5; font-size:12px; }
.dio-mondo-azioni .dio-btn.dio-scegli-punto { width:48px; height:48px; min-height:48px; margin:0; flex:0 0 48px; }
.dio-mondo-azioni .dio-potere-tooltip { left:auto; right:0; }
.dio-npc-modi { display:flex; gap:12px; margin:0 0 20px; }
.dio-npc-modo.dio-btn { min-height:66px; gap:13px; padding:10px 18px; font-size:13px; }
.dio-npc-modo .dio-mondo-icona { width:38px; height:38px; }
.dio-npc-modo[aria-checked="true"] { border-color:#d0be7c; background:#52492a65; color:#f0dfa9; }
.dio-npc-impostazioni { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:16px; }
.dio-npc-densita { display:grid; grid-template-columns:auto minmax(100px,1fr); gap:8px 20px; padding:14px 16px; background:#14231a; border:1px solid #9dbe822e; border-radius:5px; margin:3px 0 22px; }
.dio-npc-densita strong { color:#cce4b2; font-size:12px; }.dio-npc-densita > span { grid-column:1/-1; color:#9eb68d; font-size:11px; }
.dio-npc-densita-barra { height:8px; border-radius:3px; align-self:center; overflow:hidden; background:#09170d; }
.dio-npc-densita-barra > span { display:block; height:100%; background:#92bf6b; transition:width .1s; }
.dio-npc-densita.errore { border-color:#dd866653; }.dio-npc-densita.errore strong,.dio-npc-densita.errore > span { color:#f4b499; }.dio-npc-densita.errore .dio-npc-densita-barra > span { background:#d9785a; }
.dio-npc-intestazione { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin:18px 0 12px; }
.dio-npc-intestazione h4 { margin:0; font-size:14px; color:#e3e8d8; }.dio-npc-intestazione > span { font-size:11px; color:#a9b99a; }
.dio-npc-galleria { display:grid; grid-template-columns:repeat(auto-fill,minmax(125px,1fr)); gap:10px; max-height:330px; overflow:auto; padding:2px; scrollbar-width:thin; }
.dio-npc-modello.dio-btn { position:relative; flex-direction:column; min-width:0; gap:4px; padding:10px 8px; border-radius:5px; background:#112018; }
.dio-npc-modello[aria-pressed="true"] { border-color:#b9d884; background:#293d2260; box-shadow:inset 0 0 0 1px #b9d88425; }
.dio-npc-modello[aria-pressed="true"]:after { content:'✓'; position:absolute; right:6px; top:5px; color:#d2eda6; font-size:13px; }
.dio-npc-modello > strong { display:block; max-width:100%; overflow-wrap:anywhere; font-size:12px; color:#e1e9d8; }
.dio-npc-modello > small { color:#93a587; font-size:10px; font-weight:400; }
.dio-npc-miniatura { display:block; width:96px; height:70px; object-fit:contain; flex:0 0 auto; }.dio-npc-miniatura svg { width:100%; height:100%; color:#adbd93; }
.dio-npc-vuoto { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; padding:24px; text-align:center; color:#aec09e; }
.dio-npc-vuoto p { margin:15px 0; }
.dio-npc-quote { display:grid; gap:8px; }
.dio-npc-quota { display:grid; grid-template-columns:66px minmax(0,1fr) 65px 36px; align-items:center; gap:13px; padding:10px 13px; background:#13221b; border:1px solid #adc29622; border-radius:5px; }
.dio-npc-quota > .dio-npc-miniatura { width:66px; height:50px; }
.dio-npc-quota-titolo { display:flex; align-items:center; justify-content:space-between; gap:12px; color:#d7e3cb; font-size:12px; margin-bottom:5px; }
.dio-npc-quota-titolo output { color:#d7c17f; font:600 14px/1.3 ui-monospace,monospace; }
.dio-npc-quota .dio-campo { margin:0; gap:0; }.dio-npc-quota .dio-campo > span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.dio-npc-quota-unita { font-size:11px; text-align:right; color:#a9be99; }
.dio-npc-quota.bloccata { border-color:#c6b87865; }.dio-npc-quota.bloccata input { opacity:.6; }
.dio-npc-lucchetto.dio-btn { width:34px; height:34px; min-height:34px; background:#23352a; border-color:#a3b48b38; }.dio-npc-lucchetto[aria-pressed="true"] { color:#eed49c; background:#4f442a60; border-color:#c5ae6d80; }
.dio-npc-lucchetto .dio-potere-icona,.dio-npc-lucchetto .dio-potere-icona svg { width:19px; height:19px; }.dio-npc-lucchetto .dio-potere-tooltip { left:auto; right:0; }
.dio-npc-totale { margin:12px 0 0; text-align:right; color:#c4d7ac; font:12px ui-monospace,monospace; }
@media(max-width:1000px) { .dio-mondo-categoria.dio-btn { flex-direction:column; gap:8px; text-align:center; padding:13px; }.dio-mondo-immagine { height:73px; }.dio-mondo-categoria strong { font-size:16px; } }
@media(max-width:760px) { .dio-mondo-categorie { gap:8px; margin-bottom:16px; }.dio-mondo-categoria.dio-btn { padding:10px 5px; min-height:126px; }.dio-mondo-icona { width:48px; height:48px; }.dio-mondo-immagine { width:78px; height:57px; }.dio-mondo-categoria strong { font-size:13px; }.dio-mondo-categoria small { display:none; }.dio-mondo-pannelli > .dio-sezione { padding:15px; }.dio-mondo-form { gap:0 12px; }.dio-mondo-form .dio-materiali-griglia { gap:5px; }.dio-mondo-form .dio-materiale.dio-btn { padding:8px 2px; min-height:78px; }.dio-mondo-form .dio-materiale svg,.dio-mondo-form .dio-materiale > span { width:31px; height:31px; }.dio-npc-impostazioni { grid-template-columns:1fr 1fr; gap:12px; }.dio-npc-impostazioni > .dio-campo:first-child { grid-column:1/-1; }.dio-npc-modi { gap:8px; }.dio-npc-modo.dio-btn { flex:1; padding:9px 7px; gap:8px; font-size:11px; }.dio-npc-modo .dio-mondo-icona { width:28px; height:28px; }.dio-npc-galleria { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:370px; }.dio-npc-densita { grid-template-columns:1fr; }.dio-npc-quota { grid-template-columns:43px minmax(0,1fr) 32px; gap:8px; padding:8px; }.dio-npc-quota > .dio-npc-miniatura { width:43px; height:38px; }.dio-npc-quota-unita { grid-column:2; grid-row:2; text-align:left; }.dio-npc-lucchetto { grid-column:3; grid-row:1/3; }.dio-npc-quota-titolo { font-size:11px; gap:5px; }.dio-mondo-azioni > span { font-size:11px; }.dio-mondo-citta { grid-template-columns:1fr; } }