/* ATLANTE — Neo-Memphis */

@font-face {
  font-family: 'Archivo Black';
  src: url('../vendor/fonts/archivo-black-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../vendor/fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../vendor/fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../vendor/fonts/inter-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  --crema: #FFF8E7;
  --giallo: #FFD43B;
  --rosa: #FF6B9D;
  --azzurro: #4DABF7;
  --verde: #51CF66;
  --nero: #1A1A1A;
  --bianco: #FFFFFF;
  --ombra: 8px 8px 0 var(--nero);
  --ombra-sm: 4px 4px 0 var(--nero);
  --display: 'Archivo Black', sans-serif;
  --sans: 'Inter', sans-serif;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--sans);
  color: var(--nero);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; color: inherit; }
:focus-visible { outline: 3px dashed var(--rosa); outline-offset: 2px; }

/* ============ viewport & world ============ */
#viewport {
  position: fixed; inset: 0;
  background-color: var(--crema);
  background-image: radial-gradient(circle, rgba(26,26,26,.16) 1.4px, transparent 1.6px);
  background-size: 28px 28px;
  cursor: default;
  touch-action: none;
  overflow: hidden;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
#viewport.tool-hand { cursor: grab; }
#viewport.panning { cursor: grabbing !important; }
#viewport.tool-note, #viewport.placing { cursor: crosshair; }

#world {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
  transform-origin: 0 0;
  will-change: transform;
}
#cards, #labels { position: absolute; top: 0; left: 0; }
#arrows { position: absolute; top: 0; left: 0; width: 10px; height: 10px; overflow: visible; }

/* ============ coriandoli Neo-Memphis ============ */
#confetti { position: absolute; top: 0; left: 0; pointer-events: none; }
#confetti svg { position: absolute; overflow: visible; }

/* ============ carte ============ */
.card {
  position: absolute; top: 0; left: 0;
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}
.card-tilt {
  position: relative;
  width: 100%;
  border: 3px solid var(--nero);
  background: var(--bianco);
  box-shadow: var(--ombra);
  transform: rotate(var(--rot, 0deg));
  transition: box-shadow .15s ease, transform .3s var(--ease-pop);
}
.card.dragging { z-index: 999 !important; }
.card.dragging .card-tilt { box-shadow: 14px 18px 0 rgba(26,26,26,.85); transition: box-shadow .15s ease; }
.card.landed .card-tilt { animation: land .5s var(--ease-pop); }
@keyframes land {
  0%   { transform: rotate(var(--rot, 0deg)) scale(1.05); }
  55%  { transform: rotate(var(--rot, 0deg)) scale(.982); }
  100% { transform: rotate(var(--rot, 0deg)) scale(1); }
}
.card.entering .card-tilt { animation: enter .42s var(--ease-pop); }
@keyframes enter {
  0% { transform: rotate(var(--rot, 0deg)) scale(.55); opacity: 0; }
  100% { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
}
.card.chomped { pointer-events: none; }
.card.chomped .card-tilt { animation: chomp .45s cubic-bezier(.5,-.3,.8,.4) forwards; }
@keyframes chomp {
  0%   { transform: rotate(var(--rot, 0deg)) scale(1); opacity: 1; }
  60%  { transform: rotate(calc(var(--rot, 0deg) + 14deg)) scale(.55) translateY(30px); opacity: .9; }
  100% { transform: rotate(calc(var(--rot, 0deg) + 80deg)) scale(.02) translateY(200px); opacity: 0; }
}
#btn-trash.chewing { animation: chew .5s ease; }
@keyframes chew {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-14deg) scale(1.25); }
  50% { transform: rotate(10deg) scale(.9); }
  75% { transform: rotate(-6deg) scale(1.1); }
}

/* nota */
.card.note .card-tilt {
  border-radius: 16px 4px 14px 6px;
  padding: 14px 16px;
}
.card.note .card-body {
  font-size: 15px; line-height: 1.42; font-weight: 600;
  overflow-wrap: break-word;
  min-height: 1.4em;
  cursor: inherit;
}
.card.note .card-body:focus { outline: none; cursor: text; user-select: text; -webkit-user-select: text; }
.card.editing .card-tilt { box-shadow: var(--ombra), 0 0 0 4px rgba(77,171,247,.5); }

/* titolo */
.card.title .card-tilt {
  border-radius: 6px 22px 6px 22px;
  border-width: 4px;
  padding: 18px 26px 20px;
  box-shadow: 12px 12px 0 var(--nero);
}
.card.title .card-body {
  font-family: var(--display);
  font-size: 34px; line-height: 1.06;
  text-transform: uppercase; letter-spacing: .5px;
}

/* colori carta */
.card.col-giallo  .card-tilt { background: var(--giallo); }
.card.col-rosa    .card-tilt { background: var(--rosa); }
.card.col-azzurro .card-tilt { background: var(--azzurro); }
.card.col-verde   .card-tilt { background: var(--verde); }
.card.col-crema   .card-tilt { background: var(--bianco); }

/* sticker */
.card.sticker .card-tilt {
  border-radius: 50% 46% 52% 48%;
  width: 96px; height: 96px;
  display: grid; place-items: center;
  background: var(--bianco);
  box-shadow: 6px 6px 0 var(--nero);
}
.card.sticker .card-body { font-size: 52px; line-height: 1; }

/* swatch */
.card.swatch .card-tilt { border-radius: 4px 14px 4px 14px; padding: 10px; background: var(--bianco); }
.card.swatch .swatch-block {
  height: 74px; border: 3px solid var(--nero); border-radius: 3px 10px 3px 10px;
}
.card.swatch .card-body {
  font-family: var(--display); font-size: 13px; letter-spacing: .4px;
  padding: 8px 2px 2px; text-transform: uppercase;
}
.card.swatch .swatch-hex { font-family: var(--sans); font-weight: 600; font-size: 11px; opacity: .55; padding: 0 2px; }

/* selezione */
.card.selected .card-tilt {
  box-shadow: var(--ombra), 0 0 0 3px var(--crema), 0 0 0 6px var(--rosa);
}
.card.arrow-target .card-tilt {
  box-shadow: var(--ombra), 0 0 0 3px var(--crema), 0 0 0 7px var(--azzurro);
}

/* porte per le frecce */
.port {
  position: absolute; width: 16px; height: 16px;
  border: 3px solid var(--nero); border-radius: 50%;
  background: var(--azzurro);
  opacity: 0; transform: scale(.4);
  transition: opacity .14s ease, transform .18s var(--ease-pop);
  cursor: crosshair;
  z-index: 5;
}
.card:hover .port, .card.selected .port { opacity: 1; transform: scale(1); }
.port:hover { background: var(--giallo); transform: scale(1.35) !important; }
.port.n { top: -11px; left: calc(50% - 8px); }
.port.s { bottom: -11px; left: calc(50% - 8px); }
.port.w { left: -11px; top: calc(50% - 8px); }
.port.e { right: -11px; top: calc(50% - 8px); }
#viewport.tool-hand .port { display: none; }

/* ============ frecce ============ */
.arrow-path { fill: none; stroke: var(--nero); stroke-width: 3.5; stroke-linecap: round; }
.arrow-hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; pointer-events: stroke; }
.arrow-head { fill: var(--nero); stroke: none; }
g.arrow.selected .arrow-path { stroke: var(--rosa); stroke-width: 4.5; }
g.arrow.selected .arrow-head { fill: var(--rosa); }
g.arrow.drawing .arrow-path {
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: draw .5s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.temp-arrow .arrow-path { stroke-dasharray: 8 8; }

.arrow-label {
  position: absolute; top: 0; left: 0;
  transform: translate(-50%, -50%);
  background: var(--bianco); border: 2.5px solid var(--nero);
  border-radius: 999px;
  padding: 3px 12px 4px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--nero);
  cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.arrow-label:empty { display: none; }
.arrow-label input {
  font: inherit; border: none; outline: none; background: transparent;
  width: 12ch; text-align: center;
}

/* ============ marquee ============ */
#marquee {
  position: absolute;
  border: 3px dashed var(--nero);
  background: rgba(255,212,59,.18);
  border-radius: 6px;
  pointer-events: none;
  z-index: 40;
}

/* ============ brand ============ */
#brand { position: fixed; top: 18px; left: 96px; z-index: 60; pointer-events: none; }
#brand h1 {
  font-family: var(--display);
  font-size: 40px; letter-spacing: 2px; line-height: 1;
  color: var(--giallo);
  -webkit-text-stroke: 2px var(--nero);
  text-shadow: 4px 4px 0 var(--nero);
  transform: rotate(-1.5deg);
}
#boardname {
  display: inline-block;
  margin: 8px 0 0 4px;
  background: var(--bianco); border: 3px solid var(--nero);
  border-radius: 3px 12px 3px 12px;
  box-shadow: var(--ombra-sm);
  padding: 4px 14px 5px;
  font-weight: 800; font-size: 13.5px; letter-spacing: .3px;
  transform: rotate(-.6deg);
}

/* ============ badge salvataggio ============ */
#savebadge {
  position: fixed; top: 22px; right: 22px; z-index: 60;
  display: flex; align-items: center; gap: 8px;
  background: var(--bianco); border: 3px solid var(--nero);
  border-radius: 999px; padding: 6px 14px 7px;
  font-weight: 800; font-size: 12.5px;
  box-shadow: var(--ombra-sm);
  transform: rotate(.8deg);
  transition: background .25s ease;
}
#savebadge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--verde); border: 2px solid var(--nero); }
#savebadge.saving { background: var(--giallo); }
#savebadge.saving .dot { background: var(--rosa); }

/* ============ dock ============ */
#dock {
  position: fixed; left: 18px; top: 50%; transform: translateY(-50%);
  z-index: 70;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 10px;
}
.dock-spine {
  position: absolute; top: 6px; bottom: 6px; left: calc(50% - 5px);
  width: 10px; background: var(--nero); border-radius: 999px;
  z-index: -1;
}
.dock-gap { height: 6px; }
.dockbtn {
  width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid var(--nero);
  background: var(--bianco);
  box-shadow: var(--ombra-sm);
  display: grid; place-items: center;
  cursor: pointer; position: relative;
  transition: transform .16s var(--ease-pop), background .16s ease, box-shadow .16s ease;
}
.dockbtn:nth-child(odd) { transform: rotate(-3deg); }
.dockbtn:nth-child(even) { transform: rotate(3deg); }
.dockbtn:hover { transform: scale(1.12) rotate(0deg); }
.dockbtn:active { transform: scale(.95); box-shadow: 2px 2px 0 var(--nero); }
.dockbtn.small { width: 42px; height: 42px; }
.dockbtn svg { width: 24px; height: 24px; fill: none; stroke: var(--nero); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dockbtn.small svg { width: 20px; height: 20px; }
.dockbtn.active { background: var(--giallo); box-shadow: var(--ombra-sm), 0 0 0 3px var(--crema), 0 0 0 6px var(--nero); }
.dockbtn.on { background: var(--verde); }
.dockbtn:disabled { cursor: default; background: var(--bianco); box-shadow: var(--ombra-sm); }
.dockbtn:disabled svg { opacity: .25; }
.dockbtn:disabled:hover { transform: rotate(0deg) scale(1); }
#btn-menu circle { fill: var(--nero); stroke: none; }

/* tooltip */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) scale(.8);
  background: var(--nero); color: var(--crema);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 5px 10px; border-radius: 8px 2px 8px 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s var(--ease-pop);
  z-index: 100;
}
[data-tip]:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
#zoomdock [data-tip]::after, #ctxbar [data-tip]::after {
  left: 50%; top: auto; bottom: calc(100% + 10px);
  transform: translateX(-50%) scale(.8);
}
#zoomdock [data-tip]:hover::after, #ctxbar [data-tip]:hover::after { transform: translateX(-50%) scale(1); }

/* ============ zoom dock ============ */
#zoomdock {
  position: fixed; left: 96px; bottom: 22px; z-index: 60;
  display: flex; align-items: stretch;
  border: 3px solid var(--nero); border-radius: 14px 4px 14px 4px;
  background: var(--bianco); box-shadow: var(--ombra-sm);
  overflow: visible;
  transform: rotate(-.5deg);
}
#zoomdock button {
  border: none; background: transparent; cursor: pointer;
  font-weight: 800; font-size: 17px; padding: 7px 13px;
}
#zoomdock button + button { border-left: 3px solid var(--nero); }
#zoomdock button:hover { background: var(--giallo); }
#zoom-level { font-family: var(--display); font-size: 12.5px; min-width: 74px; letter-spacing: .5px; }

/* ============ minimappa ============ */
#minimap-wrap {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  border: 3px solid var(--nero); border-radius: 4px 16px 4px 16px;
  background: var(--bianco); box-shadow: var(--ombra);
  transform: rotate(.6deg);
  padding: 6px;
}
#minimap-label {
  position: absolute; top: -14px; left: 14px;
  background: var(--rosa); border: 2.5px solid var(--nero);
  color: var(--nero); font-family: var(--display); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 1.2px;
  padding: 2px 10px 3px; border-radius: 999px;
  box-shadow: 2px 2px 0 var(--nero);
}
#minimap { display: block; cursor: pointer; border-radius: 2px 10px 2px 10px; }

/* ============ barra contestuale ============ */
#ctxbar {
  position: fixed; z-index: 65;
  display: flex; align-items: center; gap: 8px;
  background: var(--bianco); border: 3px solid var(--nero);
  border-radius: 999px; padding: 7px 12px;
  box-shadow: var(--ombra-sm);
}
.ctx-colors { display: flex; gap: 6px; }
.ctx-chip {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--nero); cursor: pointer;
  transition: transform .14s var(--ease-pop);
}
.ctx-chip:hover { transform: scale(1.3); }
.ctx-chip[data-color="giallo"] { background: var(--giallo); }
.ctx-chip[data-color="rosa"] { background: var(--rosa); }
.ctx-chip[data-color="azzurro"] { background: var(--azzurro); }
.ctx-chip[data-color="verde"] { background: var(--verde); }
.ctx-chip[data-color="crema"] { background: var(--bianco); }
.ctx-sep { width: 3px; height: 22px; background: var(--nero); border-radius: 2px; }
.ctx-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2.5px solid var(--nero); background: var(--bianco);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .14s var(--ease-pop), background .14s ease;
}
.ctx-btn:hover { transform: scale(1.15); background: var(--giallo); }
.ctx-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--nero); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ============ popover ============ */
.popover {
  position: fixed; z-index: 80;
  background: var(--bianco); border: 3px solid var(--nero);
  border-radius: 4px 18px 4px 18px;
  box-shadow: var(--ombra);
  padding: 14px;
  animation: pop-in .22s var(--ease-pop);
}
@keyframes pop-in { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pop-title {
  font-family: var(--display); font-size: 12px; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 10px;
}
.sticker-grid { display: grid; grid-template-columns: repeat(4, 46px); gap: 8px; }
.sticker-grid button {
  width: 46px; height: 46px; font-size: 26px; line-height: 1;
  border: 2.5px solid var(--nero); border-radius: 12px 4px 12px 4px;
  background: var(--crema); cursor: pointer;
  transition: transform .14s var(--ease-pop), background .14s ease;
}
.sticker-grid button:hover { transform: scale(1.18) rotate(-5deg); background: var(--giallo); }
.swatch-grid { display: grid; grid-template-columns: repeat(3, 54px); gap: 8px; }
.swatch-grid button {
  height: 54px; border: 3px solid var(--nero); border-radius: 4px 12px 4px 12px;
  cursor: pointer; transition: transform .14s var(--ease-pop);
}
.swatch-grid button:hover { transform: scale(1.14) rotate(3deg); }
.menu-item {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; cursor: pointer;
  font-size: 14px; font-weight: 600;
  padding: 9px 10px; border-radius: 8px 2px 8px 2px;
}
.menu-item:hover { background: var(--giallo); }
.menu-item.danger:hover { background: var(--rosa); }

/* ============ help ============ */
#helpwrap {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(26,26,26,.45);
  display: grid; place-items: center;
}
#helppanel {
  position: relative;
  width: min(720px, calc(100vw - 80px));
  background: var(--giallo);
  border: 4px solid var(--nero);
  border-radius: 6px 28px 6px 28px;
  box-shadow: 14px 14px 0 var(--nero);
  padding: 34px 38px 26px;
  transform: rotate(-.8deg);
  animation: pop-in .28s var(--ease-pop);
}
#helppanel h2 {
  font-family: var(--display); font-size: 30px; text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 18px;
  text-shadow: 3px 3px 0 var(--bianco);
}
#helppanel h3 {
  font-family: var(--display); font-size: 13px; text-transform: uppercase;
  letter-spacing: 1.5px; margin: 16px 0 8px;
}
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; }
#helppanel dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3.5px 0; }
#helppanel dt { font-weight: 800; font-size: 13px; white-space: nowrap; }
#helppanel dd { font-size: 13px; text-align: right; }
#helppanel kbd {
  display: inline-block; background: var(--bianco);
  border: 2px solid var(--nero); border-radius: 6px;
  box-shadow: 2px 2px 0 var(--nero);
  font-family: var(--sans); font-weight: 800; font-size: 11.5px;
  padding: 1px 6px; margin: 0 1px;
}
.help-foot { margin-top: 18px; font-size: 12.5px; font-weight: 600; opacity: .75; }
#help-close {
  position: absolute; top: -16px; right: -16px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--nero); background: var(--rosa);
  font-size: 18px; font-weight: 800; cursor: pointer;
  box-shadow: var(--ombra-sm);
  transition: transform .15s var(--ease-pop);
}
#help-close:hover { transform: scale(1.15) rotate(90deg); }

/* ============ hint ============ */
#hint {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(-.4deg);
  z-index: 55;
  display: flex; align-items: center; gap: 10px;
  background: var(--nero); color: var(--crema);
  border-radius: 999px; padding: 8px 8px 8px 18px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .2px;
  box-shadow: 4px 4px 0 rgba(26,26,26,.25);
}
#hint button {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--crema); background: transparent; color: var(--crema);
  font-size: 11px; font-weight: 800; cursor: pointer;
  transition: transform .15s var(--ease-pop), background .15s ease;
}
#hint button:hover { background: var(--rosa); border-color: var(--rosa); color: var(--nero); transform: scale(1.15); }

/* cursore custom Neo-Memphis per il canvas */
#viewport {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24"><path d="M5 3l14 8-6.5 1.5L15 19l-3 1.4-2.4-6.6L5 17V3z" fill="%23FFD43B" stroke="%231A1A1A" stroke-width="2" stroke-linejoin="round"/></svg>') 5 3, default;
}

/* ============ credits ============ */
#credits {
  position: fixed; left: 20px; bottom: 20px; z-index: 55;
  display: flex; gap: 7px; align-items: center;
  font-size: 11.5px; font-weight: 600; opacity: .75;
}
#credits a { color: var(--nero); text-decoration: none; border-bottom: 2px solid var(--rosa); }
#credits a:hover { background: var(--rosa); }
#credits .sig { font-family: var(--display); letter-spacing: .5px; }

/* ============ responsive ============ */
@media (max-width: 1160px) {
  #brand h1 { font-size: 30px; }
  #zoomdock { left: 88px; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}