@import url('./veste23.css');
@import url('./carte-botteghe23.css');
/* La veste grafica: stessi pannelli, stessi slot e attributi dell'interfaccia di Claude. */
:root {
  --pergamena-img: url('./materiali/pergamena.svg');
  --legno-img: url('./materiali/legno.svg');
  --cuoio-img: url('./materiali/cuoio.svg');
  --titolo: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --testo: Georgia, 'Palatino Linotype', serif;
  --oro: #b99857; --oro-chiaro: #ebd4a0; --oro-scuro: #856133;
  --cornice: 3px; --raggio: 6px;
}
.ui { font-size: 14px; }
.pannello {
  min-width: 0;
  border-color: #392b20;
  background: linear-gradient(115deg,#f4e6c56b,#d0b4772b 45%,#8e652729),var(--pergamena-img);
  background-size: auto,160px 160px;
  box-shadow: 0 12px 36px #0009,0 0 0 1px #a18755,inset 0 0 28px #4b290f52;
}
.pannello::before { inset: 4px; border-color:#80633780; }
.pannello::after {
  background:
    linear-gradient(135deg,#e4cf96 0 3px,#826339 4px 8px,transparent 9px) top left/24px 24px no-repeat,
    linear-gradient(225deg,#e4cf96 0 3px,#826339 4px 8px,transparent 9px) top right/24px 24px no-repeat,
    linear-gradient(45deg,#e4cf96 0 3px,#826339 4px 8px,transparent 9px) bottom left/24px 24px no-repeat,
    linear-gradient(315deg,#e4cf96 0 3px,#826339 4px 8px,transparent 9px) bottom right/24px 24px no-repeat;
}
.pannello .intestazione { border-bottom:1px solid #7658326b; padding-bottom:10px; }
.pannello .intestazione h2 { font-size:18px; text-shadow:0 1px #fff5d8; }
.pannello .intestazione .fregio { height:8px; background:linear-gradient(90deg,transparent,#96744780,transparent); clip-path:polygon(0 45%,45% 45%,50% 0,55% 45%,100% 45%,100% 55%,55% 55%,50% 100%,45% 55%,0 55%); }
.chiudi { flex-shrink:0; background:linear-gradient(145deg,#d4b677,#987446); color:#392317; box-shadow:inset 0 0 0 1px #efce8a,0 2px 3px #3d271d50; }
.bottone { background:linear-gradient(180deg,#9877463b,#1c151661),var(--legno-img); background-size:auto,192px 96px; border-color:#8b6b3c; border-radius:4px; box-shadow:inset 0 0 0 1px #d4b17742,0 3px 0 #271915,0 5px 10px #0006; }
.bottone:focus-visible,.chiudi:focus-visible,.casella:focus-visible { outline:2px solid #f4d98a; outline-offset:3px; }
.bottone.oro { background:linear-gradient(150deg,#eed398,#b29354 55%,#805b2e); }
.bottone.pericolo { background:linear-gradient(180deg,#a3544155,#451e25b3),var(--legno-img); }
.contenitore { grid-template-columns:repeat(6,minmax(0,1fr)); width:100%; gap:5px; padding:8px; background:linear-gradient(#130e1754,#120d1594),var(--cuoio-img); background-size:auto,80px 80px; border:2px solid #39281e; border-radius:5px; scrollbar-width:thin; scrollbar-color:#92713c #261d1c; }
.contenitore .casella { width:100%; height:auto; aspect-ratio:1; min-width:0; }
.casella { border:1px solid #8b6b3f; border-radius:4px; background:radial-gradient(ellipse at 40% 20%,#92734a52,#110f199c),var(--cuoio-img); box-shadow:inset 0 0 0 2px #21161d8c,inset 0 0 12px #0007,0 1px 1px #b9955350; }
.casella:hover { border-color:#f0d391; background-color:#ab854332; }
.casella.vuota { opacity:.55; }
.casella .icona svg { width:92%; height:92%; filter:drop-shadow(0 2px 2px #08080bbe); }
.casella .quanti { top:auto; bottom:1px; right:3px; font:700 11px Georgia,serif; text-shadow:0 1px 1px #000,1px 0 #000,-1px 0 #000; z-index:2; }
.casella.rotto { border:2px solid #b44b41; }
.casella.rotto .icona { filter:grayscale(.6); }
.casella .goccia { top:3px; right:3px; width:10px; height:13px; border:1px solid #d5ffa5; box-shadow:0 0 5px #61d948; }
.casella .ombra { color:#e0c797b0; }
.due { gap:12px; }
.due > div { flex:1 1 290px; min-width:0; }
.riga { min-width:0; gap:8px; padding-inline:4px; }
.riga .cresce { min-width:0; }
.riga .prezzo { font-size:12px; }
.riga .icona.grande { display:block; width:38px; flex:0 0 38px; }
.icona.grande svg { width:36px; height:36px; }
.riga .mat svg { width:22px; height:22px; }
.riuscita .sigillo { background-color:#b79b57; box-shadow:inset 0 0 0 2px #efd59c70,0 2px 3px #61401c50; }
.vetrina { height:300px; background:radial-gradient(ellipse at 50% 30%,#92754b36,transparent 60%),linear-gradient(180deg,#202124,#121015); overflow:hidden; }
.vetrina canvas { cursor:grab; touch-action:none; }
.vetrina canvas:active { cursor:grabbing; }
.addosso .casella { background:linear-gradient(#1c172167,#1b111982); border-color:#b59b647d; box-shadow:inset 0 0 6px #100b1677; }
.addosso .casella:hover { background:#30242abc; }
.fila-ampolle { --slot-hud:43px; --orb-hud:106px; --gap-hud:4px; gap:12px; max-width:100%; padding:0 7px; }
.ampolla { width:var(--orb-hud,106px); height:var(--orb-hud,106px); background:conic-gradient(from 0deg,#ecce87,#766045 12%,#2d2830 25%,#b6985a 36%,#382b2b 50%,#927445 65%,#343039 77%,#c5a16a 91%,#ecce87); box-shadow:0 4px 9px #000a,0 0 0 2px #17121a,inset 0 0 0 2px #e1ba685e,inset 0 0 0 5px #2b242aa6; }
.ampolla::before { content:''; position:absolute; inset:-8px -5px; pointer-events:none; background:linear-gradient(115deg,#dbc38b,#6e5140 44%,#34232d 57%,#bd9a65); clip-path:polygon(4% 26%,15% 34%,22% 20%,35% 9%,50% 0,65% 9%,78% 20%,85% 34%,96% 26%,91% 49%,100% 65%,83% 62%,78% 82%,62% 92%,50% 100%,38% 92%,22% 82%,17% 62%,0 65%,9% 49%,4% 26%,18% 37%,20% 65%,32% 85%,50% 92%,68% 85%,80% 65%,82% 37%,69% 16%,50% 8%,31% 16%,18% 37%); filter:drop-shadow(0 2px 1px #100c12); }
.ampolla::after { content:''; position:absolute; left:43%; top:-6%; width:14%; height:14%; border:1px solid #e6c17b; transform:rotate(45deg); background:radial-gradient(ellipse at 30% 20%,#ffe6ab,#99713f 55%,#3c2d29); box-shadow:0 1px 4px #000; pointer-events:none; }
.ampolla .pozzo { inset:7px; background:radial-gradient(ellipse at 40% 28%,#201f2d,#08070d 70%); }
.ampolla .vetro { inset:7px; border:1px solid #d8e4e133; background:radial-gradient(ellipse 31% 21% at 28% 22%,#ffffff8c,#ffffff12 50%,transparent 72%); box-shadow:inset 0 0 13px #000b,inset 0 -7px 10px #0005,inset 0 1px 3px #fff4; }
.ampolla .liquido::before { animation:ondeggia 4.8s ease-in-out infinite alternate; transform-origin:50% 50%; }
.ampolla .liquido::after { animation:ondeggia 4.8s ease-in-out infinite alternate-reverse; }
.ampolla.mana .liquido::before,.ampolla.mana .liquido::after { animation-delay:-2.2s; }
.ampolla .liquido[style*="height:0%"] { visibility:hidden; }
.ampolla.vita .liquido { background:radial-gradient(ellipse at 40% 25%,#eb344144,transparent 65%),linear-gradient(#c01b35,#780d28 50%,#360519); }
.ampolla.mana .liquido { background:radial-gradient(ellipse at 40% 25%,#6dc4fc44,transparent 65%),linear-gradient(#228ddd,#144287 50%,#071533); }
.ampolla .numero { font-size:15px; font-variant-numeric:tabular-nums; }
@keyframes ondeggia { from{transform:translateX(-2%) rotate(-4deg)} to{transform:translateX(2%) rotate(4deg)} }
#hud .gruppo-barre { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
#hud .barra-abilita { gap:var(--gap-hud); padding:7px; background:linear-gradient(#30233288,#100d15b3),var(--legno-img); border:2px solid #8b6940; flex-shrink:0; }
#hud .barra-abilita::before { border-color:#c1a16540; inset:2px; }
#hud .barra-abilita::after { background:none; }
#hud .barra-abilita.autocast { border-color:#7657a7; background:linear-gradient(#35214b9c,#100d15c4),var(--legno-img); box-shadow:0 0 13px #8b62cb38,inset 0 0 0 1px #c8a9ef2e; }
#hud .nome-barra { margin-bottom:-7px; z-index:2; padding:1px 8px; border:1px solid #8e70b6; border-radius:8px; background:#171020e8; color:#d9c4f4; font:700 9px Georgia,serif; letter-spacing:.12em; }
#hud .nome-barra span { color:#ad9abd; font-weight:400; letter-spacing:0; }
#hud .casella { width:var(--slot-hud); height:var(--slot-hud); flex:0 0 var(--slot-hud); }
#hud .tasto { z-index:2; font-family:Georgia,serif; font-weight:bold; background:#130c1b80; padding:0 2px; left:1px; }
#hud .alterna-shift161 {position:absolute;left:0;bottom:-25px;height:22px;min-width:38px;padding:0 5px;border:1px solid #8b6940;border-radius:4px;background:#17121bed;color:#e9d49b;font:700 10px system-ui;}
#hud .alterna-shift161[aria-expanded="true"] {border-color:#e2c780;background:#413321;}
#hud .shift161 {align-self:flex-start;}
#hud .configura-barre { position:absolute; right:-26px; bottom:3px; width:23px; height:23px; padding:0; border:1px solid #8b6940; border-radius:50%; background:#17121bdc; color:#d8bd7a; box-shadow:0 2px 5px #0008; }
.casella.spenta { opacity:.32; filter:grayscale(1); cursor:not-allowed; }
.palette-barre { display:grid; grid-template-columns:repeat(6,52px); gap:6px; margin:7px 0 14px; }
.palette-barre .casella { width:52px; height:52px; }
@media(max-width:800px) { .fila-ampolle { --orb-hud:82px; --slot-hud:clamp(24px,calc((100vw - 245px)/12),43px); gap:9px; } }
@media(max-width:540px) { .fila-ampolle { --orb-hud:53px; --slot-hud:clamp(18px,calc((100vw - 138px)/12),33px); --gap-hud:2px; gap:7px; padding:0 3px; } #hud .barra-abilita { padding:4px; } .ampolla .numero { font-size:11px; } .ampolla .pozzo,.ampolla .vetro { inset:5px; } #hud .tasto { font-size:7px; } #hud .configura-barre{right:0;bottom:-25px}.pannello { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .ampolla .liquido::before,.ampolla .liquido::after { animation:none; } .ampolla .liquido,.barra>i { transition:none; } }

/* Fase 7: stessi comandi e dati della card, con miniature del catalogo comune. */
.card-creatura .intestazione h2,.card-scelta-creatura .intestazione h2 { overflow-wrap:anywhere; }
.creatura-identita { display:flex; align-items:center; gap:15px; padding:3px 0 14px; }
.creatura-ritratto { width:108px; height:108px; flex:0 0 108px; border:3px solid #775832; border-radius:50%; background:radial-gradient(ellipse at 45% 28%,#655847,#242522 72%); box-shadow:inset 0 0 0 2px #cab17c,0 3px 6px #513b2466; }
.creatura-ritratto svg { display:block; width:100%; height:100%; filter:drop-shadow(0 4px 3px #0009); }
.creatura-dati { flex:1; min-width:0; }
.creatura-categoria { color:#6f5336; font-variant:small-caps; font-size:12px; letter-spacing:.08em; }
.creatura-livello { margin:3px 0 8px; font-size:16px; }
.creatura-livello b { color:#4a341e; font-size:22px; }
.creatura-dati .barra { height:17px; }
.creatura-dati .barra span { font-size:11px; }
.creatura-stato { display:inline-flex; gap:5px; align-items:center; margin-top:8px; font-size:12px; color:#416044; }
.creatura-stato::before { content:''; display:block; width:6px; height:6px; background:currentColor; border-radius:50%; box-shadow:0 0 0 2px #fff4cd6b; }
.creatura-stato.ferma { color:#76512c; }
.creatura-stato.ferma::before { border-radius:0; }
.creatura-comandi { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:11px 0 14px; border-top:1px solid #8264395c; }
.creatura-comandi:empty { display:none; }
.creatura-comandi .bottone { min-width:0; padding:9px 8px; font-size:13px; }
.creatura-comandi .bottone:first-child { background:linear-gradient(180deg,#aa7f4359,#2519148f),var(--legno-img); }
.creatura-comandi .bottone.piccolo { font-size:12px; }
.creatura-comandi .bottone:last-child:nth-child(odd) { grid-column:1 / -1; }
.creatura-nota { padding:9px 10px; margin-top:7px; border-left:3px solid #9a7641; background:#85653b16; font-size:12px; font-weight:bold; }
.creatura-nota span { display:block; margin-top:3px; font-size:12px; font-weight:normal; color:#614d33; }
.creatura-nota.arcana { border-color:#846b98; background:#66547814; }
.creatura-sella { display:flex; align-items:center; gap:10px; padding:7px 10px; margin:4px 0 11px; border:1px solid #83663b60; background:#f7e7c034; }
.creatura-sella>span { flex:0 0 38px; height:38px; }
.creatura-sella svg { display:block; width:38px; height:38px; }
.creatura-sella b { font-size:13px; }
.creatura-sella small { display:block; margin-top:2px; color:#655038; font-size:11px; }
.creatura-sella.assente>span { opacity:.42; filter:grayscale(1); }
.creatura-bag-titolo { display:flex; align-items:baseline; justify-content:space-between; margin:5px 0 7px; font-size:14px; font-weight:bold; }
.creatura-bag-titolo>span { color:#6b583e; font-size:11px; font-weight:normal; letter-spacing:.03em; }
.creatura-bag-griglia { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; max-height:183px; overflow-y:auto; padding:7px; background:linear-gradient(#130e1754,#120d1594),var(--cuoio-img); border:1px solid #61492e; border-radius:4px; }
.creatura-bag-griglia>.sottotitolo { grid-column:1 / -1; padding:8px; color:#deccaa; }
.creatura-bag-oggetto { position:relative; aspect-ratio:1; min-width:0; border:1px solid #a5865580; background:#19131c6b; border-radius:3px; }
.creatura-bag-oggetto svg { width:100%; height:100%; display:block; filter:drop-shadow(0 2px 2px #0008); }
.creatura-bag-oggetto>span { position:absolute; bottom:1px; right:3px; font-size:11px; font-weight:bold; color:#fff0cb; text-shadow:0 1px 2px #000,1px 0 1px #000; }
.scelta-creatura-intro { margin:3px 0 13px; color:#654e31; font-size:13px; }
.scelta-creatura-elenco { display:grid; gap:8px; max-height:min(560px,62vh); overflow-y:auto; padding:1px 2px 4px; scrollbar-width:thin; scrollbar-color:#9b7e4e #c3ae8270; }
.scelta-creatura-opzione.riga { padding:8px; gap:10px; border:1px solid #96734366; border-radius:4px; background:linear-gradient(105deg,#fff2d146,#9a734021); box-shadow:0 2px 3px #694b1914; }
.scelta-creatura-opzione .cresce { min-width:0; }
.scelta-creatura-opzione .cresce>b { display:block; overflow-wrap:anywhere; font-size:14px; }
.scelta-creatura-opzione .sottotitolo { display:block; margin-top:4px; font-size:12px; }
.scelta-creatura-opzione .bottone { flex:0 0 auto; padding:8px 11px; font-size:12px; }
.scelta-creatura-ritratto { flex:0 0 66px; width:66px; height:66px; border:1px solid #8d6d4270; border-radius:4px; background:radial-gradient(ellipse at 50% 30%,#70634f,#2a2924); }
.scelta-creatura-ritratto svg { display:block; width:100%; height:100%; filter:drop-shadow(0 3px 2px #0008); }
.scelta-creatura-opzione.bloccata { background:#766b5d19; border-color:#6e655445; }
.scelta-creatura-opzione.bloccata .scelta-creatura-ritratto { filter:grayscale(1); opacity:.55; }
.scelta-creatura-opzione.bloccata .cresce { color:#736b5f; }
.scelta-creatura-limite { display:block; margin-top:5px; font-size:11px; color:#706558; }
.scelta-creatura-sigillo { color:#827665; font-size:28px; flex:0 0 28px; text-align:center; }
.scelta-creatura-vuota { margin:0; padding:25px 16px; text-align:center; color:#6f583c; font-style:italic; }
@media(max-width:540px) { .creatura-ritratto{width:88px;height:88px;flex-basis:88px}.creatura-identita{gap:12px}.creatura-bag-griglia{grid-template-columns:repeat(5,minmax(0,1fr))}.scelta-creatura-ritratto{width:55px;height:55px;flex-basis:55px}.scelta-creatura-opzione.riga{gap:8px;padding:6px}.scelta-creatura-opzione .bottone{padding:8px}.scelta-creatura-opzione .cresce>b{font-size:13px} }

/* (4 ottobre sera, Opus; Manuel: «mettilo al centro la x») LA X DI CHIUSURA AL CENTRO DEL CERCHIO: il carattere ✕/× veniva da un altro font,
   con le sue misure, e cadeva fuori centro. Ora la X la disegnano due tratti centrati sul bottone; il carattere resta nella pagina (per chi
   legge con la voce) ma non si vede. */
.chiudi { position:relative; font-size:0!important; line-height:0!important; padding:0!important; }
.chiudi::before,.chiudi::after { content:''; position:absolute; left:50%; top:50%; width:50%; height:1.6px; border-radius:1px; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); pointer-events:none; }
.chiudi::after { transform:translate(-50%,-50%) rotate(-45deg); }