/* Attraversamento Animeli: interfaccia «cozy» sopra il canvas */
.an-root [hidden] { display: none !important; }
.an-root { --an-cream: #fff8e6; --an-ink: #4a3426; --an-wood: #8a5a32; --an-leaf: #5aa860; --an-sun: #f6c84a;
  max-width: 1100px; margin: 0 auto; color: var(--an-ink); font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; }
.an-root:fullscreen { max-width: none; background: #1e2a1e; display: flex; flex-direction: column; justify-content: center; padding: 8px; }
.an-root:fullscreen .an-box { width: min(100%, calc((100vh - 80px) * 16 / 9)); margin: 0 auto; }
.an-box { position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 14px; border: 4px solid var(--an-wood);
  background: #2a3a2a; container-type: inline-size; box-shadow: 0 6px 0 #5a3a22; user-select: none; -webkit-user-select: none; touch-action: none; }
.an-canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }

.an-hud { position: absolute; top: 1.4cqw; left: 1.4cqw; right: 1.4cqw; display: flex; gap: .8cqw; flex-wrap: wrap; pointer-events: none; }
.an-chip { background: var(--an-cream); border: .35cqw solid var(--an-wood); border-radius: 99px; padding: .35cqw 1.3cqw; font-size: 1.75cqw; font-weight: 700; box-shadow: 0 .3cqw 0 rgba(0,0,0,.25); }
.an-chip:empty { display: none; }
.an-hud button.an-chip { font: inherit; font-size: 1.75cqw; font-weight: 700; color: var(--an-ink); pointer-events: auto; cursor: pointer; }
.an-tool { margin-left: auto; background: #e8f6d8; }
.an-menu { background: var(--an-sun); }
.an-menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.an-menu-grid .an-btn { padding: 10px 14px; }

/* pagina tutta per il gioco: il riquadro 16:9 riempie lo schermo */
html:has(body.an-standalone), body.an-standalone { margin: 0; height: 100%; background: #1e2a1e; overflow: hidden; overscroll-behavior: none; }
.an-loading { color: #fff8e6; font: 16px system-ui, sans-serif; text-align: center; padding-top: 40vh; margin: 0; }
.an-root.an-full { position: fixed; inset: 0; max-width: none; display: grid; place-items: center; background: #1e2a1e;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.an-full .an-box { width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 16 / 9)); border-radius: 0; border: 0; box-shadow: none; }
@media (min-width: 900px) and (min-height: 560px) { .an-full .an-box { width: min(96%, calc(96dvh * 16 / 9)); border-radius: 14px; border: 4px solid var(--an-wood); box-shadow: 0 6px 0 #5a3a22; } }

.an-at-title .an-hud, .an-at-title .an-wip, .an-at-title .tc-ghost { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  .an-full::after { content: "Gira il telefono in orizzontale per giocare meglio"; position: absolute; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    text-align: center; color: #fff8e6; font: 600 14px system-ui, sans-serif; opacity: .8; pointer-events: none; }
}

/* comandi touch (src/touch.js) */
.tc-on { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.tc-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.tc-base { position: absolute; width: 112px; height: 112px; margin: -56px 0 0 -56px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,230,.16) 0 55%, rgba(255,248,230,.26) 56% 100%); border: 3px solid rgba(255,248,230,.6); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.tc-knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,248,230,.92);
  border: 3px solid rgba(138,90,50,.9); box-shadow: 0 3px 0 rgba(0,0,0,.25); transform: translate(-50%, -50%); }
.tc-ghost { position: absolute; left: calc(28px + env(safe-area-inset-left, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); width: 92px; height: 92px;
  border-radius: 50%; border: 3px dashed rgba(255,248,230,.5); }
.tc-ghost::after { content: ""; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px; border-radius: 50%; background: rgba(255,248,230,.35); }
.tc-base[hidden], .tc-ghost[hidden] { display: none; }
.an-wip { position: absolute; left: 1.4cqw; bottom: 1.4cqw; background: repeating-linear-gradient(-45deg, #f6c84a 0 1cqw, #2a2018 1cqw 2cqw); color: #fff;
  font: 900 1.35cqw/1 monospace; letter-spacing: .1em; padding: .5cqw .9cqw; border-radius: .4cqw; text-shadow: 0 0 .3cqw #000, 0 0 .3cqw #000; pointer-events: none; }

.an-dialog { position: absolute; left: 6cqw; right: 6cqw; bottom: 2cqw; background: var(--an-cream); border-radius: 3cqw; padding: 2.4cqw 3cqw 2cqw;
  font-size: 2.3cqw; line-height: 1.4; box-shadow: 0 .6cqw 0 rgba(0,0,0,.25); border: .4cqw solid #e8d6b0; min-height: 11cqw; }
.an-name { position: absolute; top: -2.2cqw; left: 3cqw; background: var(--an-sun); color: var(--an-ink); font-weight: 800; padding: .3cqw 1.8cqw; border-radius: 99px; font-size: 2cqw; transform: rotate(-2deg); }
.an-next { position: absolute; right: 2.4cqw; bottom: 1cqw; font-size: 1.8cqw; color: #e0782c; animation: an-bob .6s infinite alternate; }
@keyframes an-bob { to { transform: translateY(.5cqw); } }
.an-choices { display: flex; flex-wrap: wrap; gap: .8cqw; margin-top: 1cqw; justify-content: flex-end; }
.an-choice { font: inherit; font-size: 2cqw; border: .3cqw solid #e8d6b0; background: #fff; color: var(--an-ink); border-radius: 99px; padding: .4cqw 1.6cqw; cursor: pointer; }
.an-choice.sel, .an-choice:hover { background: var(--an-sun); border-color: #c89a2a; }
.an-choice.sel::before { content: "▶ "; }

.an-toast { position: absolute; left: 50%; top: 6cqw; transform: translate(-50%, -1cqw); opacity: 0; transition: .25s; background: rgba(74,52,38,.92); color: #fff;
  border-radius: 99px; padding: .6cqw 2cqw; font-size: 1.8cqw; pointer-events: none; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.an-toast.on { opacity: 1; transform: translate(-50%, 0); }

.an-panel { position: absolute; inset: 5cqw 7cqw; background: var(--an-cream); border-radius: 2.4cqw; border: .5cqw solid var(--an-wood); display: flex; flex-direction: column;
  box-shadow: 0 .8cqw 0 rgba(0,0,0,.3); font-size: max(13px, 1.8cqw); }
.an-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 2cqw; background: var(--an-leaf); color: #fff; border-radius: 1.8cqw 1.8cqw 0 0; }
.an-panel-head h3 { margin: 0; font-size: max(15px, 2.2cqw); }
.an-x { font: inherit; background: none; border: 0; color: #fff; font-size: max(16px, 2.4cqw); cursor: pointer; }
.an-panel-body { padding: 1.4cqw 2cqw; overflow: auto; flex: 1; }
.an-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.an-slot { position: relative; aspect-ratio: 1; background: #f2e2bc; border: 2px solid #e0c890; border-radius: 10px; padding: 0; cursor: pointer; display: grid; place-items: center; }
.an-slot:disabled { cursor: default; opacity: .6; }
.an-slot img { width: 80%; height: auto; image-rendering: pixelated; }
.an-unknown img { filter: brightness(0) opacity(.35); }
.an-n { position: absolute; right: 3px; bottom: 1px; font-weight: 800; font-size: 12px; }
.an-star { position: absolute; right: 3px; top: 0; color: #e0a020; font-size: 14px; }
.an-info { display: flex; gap: 10px; align-items: center; margin-top: 10px; min-height: 52px; }
.an-info img, .an-row img { image-rendering: pixelated; flex: none; }
.an-muted { color: #8a7660; }
.an-ok { color: #3a8a3a; font-weight: 700; }
.an-list { display: grid; gap: 6px; margin-top: 8px; }
.an-row { display: flex; align-items: center; gap: 10px; background: #f6ead0; border-radius: 10px; padding: 4px 8px; }
.an-row > div { flex: 1; }
.an-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.an-tab { font: inherit; border: 2px solid #e0c890; background: #f6ead0; border-radius: 99px; padding: 3px 12px; cursor: pointer; color: var(--an-ink); }
.an-tab.sel { background: var(--an-sun); border-color: #c89a2a; font-weight: 700; }
.an-hats { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.an-code { width: 100%; box-sizing: border-box; font: 12px/1.3 monospace; border-radius: 8px; border: 2px solid #e0c890; padding: 6px; background: #fff; color: var(--an-ink); }
.an-row-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.an-help { margin: 0; padding-left: 1.2em; line-height: 1.6; }

.an-btn { font: inherit; font-weight: 700; background: var(--an-cream); color: var(--an-ink); border: 2px solid var(--an-wood); border-radius: 99px; padding: 5px 14px; cursor: pointer; box-shadow: 0 2px 0 var(--an-wood); }
.an-btn:hover:not(:disabled) { background: #fff; }
.an-btn:disabled { opacity: .5; cursor: default; }
.an-btn.an-primary { background: var(--an-sun); }

.an-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6cqw; padding: 2cqw; text-align: center; overflow: auto; }
.an-logo { width: min(62cqw, 600px); height: auto; image-rendering: pixelated; filter: drop-shadow(0 .6cqw 0 rgba(0,0,0,.2)); }
.an-tape { background: repeating-linear-gradient(-45deg, #f6c84a 0 1.2cqw, #2a2018 1.2cqw 2.4cqw); color: #fff; font: 900 max(11px, 1.8cqw)/1 monospace; letter-spacing: .12em;
  padding: .7cqw 2cqw; transform: rotate(-2deg); text-shadow: 0 0 .4cqw #000, 0 0 .4cqw #000; box-shadow: 0 .4cqw 0 rgba(0,0,0,.3); }
.an-title-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: max(13px, 1.8cqw); }
.an-title-note { margin: 0; font-size: max(11px, 1.5cqw); background: rgba(255,248,230,.85); border-radius: 99px; padding: .3cqw 1.6cqw; }
.an-form { display: grid; gap: 8px; background: var(--an-cream); border: 3px solid var(--an-wood); border-radius: 16px; padding: 12px 16px; text-align: left; max-width: 420px; }
.an-form label { display: grid; gap: 4px; font-weight: 700; }
.an-form input, .an-form textarea { font: inherit; padding: 6px 10px; border-radius: 10px; border: 2px solid #e0c890; background: #fff; color: var(--an-ink); }
.an-swatches { display: flex; gap: 6px; align-items: center; font-weight: 700; }
.an-swatches span { min-width: 4.5em; }
.an-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #e0c890; cursor: pointer; padding: 0; }
.an-swatches button.sel { box-shadow: 0 0 0 3px var(--an-ink); }
.an-warn { margin: 0; color: #a8402a; font-weight: 700; font-size: .9em; }