/* La tavola · la famiglia */
:root {
    --dani: #1f8bff; --dani-soft: #8cc6ff;
    --ome: #9b3cff;  --ome-soft: #cfa6ff;
    --both: linear-gradient(100deg, #06b6ff, #424dff 50%, #b625ff);
    --lamp: #ffc477;
    --room: #120e18; --wall: #1a1524;
    --text: #f1ecf8; --dim: #aaa2bf; --paper: #fff6d8;
  }
body { margin: 0; color: var(--text); font: 17px/1.6 Rubik, system-ui, sans-serif; overflow-x: hidden;
    background: radial-gradient(60% 50% at 50% 30%, rgb(255 180 100 / .14), transparent 70%), var(--room); }
.intro { text-align: center; padding: 70px 0 30px; }
.kicker { font: 600 .82rem "JetBrains Mono", monospace; color: var(--lamp); margin: 0 0 12px; }
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; margin: 0 0 16px; font-weight: 900; letter-spacing: -.02em; }
h1 em { font-style: normal; background: var(--both); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro p { color: var(--dim); max-width: 38em; margin: 0 auto; font-size: 1.1rem; }
/* ========== LA TAVOLA ========== */
.dining { position: relative; padding: 40px 0 20px; }
.chandelier { position: absolute; left: 50%; top: -40px; width: 70%; height: 420px; transform: translateX(-50%); pointer-events: none;
    background: radial-gradient(closest-side, rgb(255 196 119 / .22), transparent); }
.scene { display: grid; grid-template-columns: 110px 1fr 120px; grid-template-rows: auto auto auto; gap: 0 10px; align-items: center; }
.seats { display: flex; justify-content: space-around; gap: 6px; grid-column: 2; }
.seats--top { grid-row: 1; }
.seats--bottom { grid-row: 3; }
.table {
    grid-column: 2; grid-row: 2; height: 210px; border-radius: 110px; position: relative;
    background:
      repeating-linear-gradient(90deg, rgb(0 0 0 / .07) 0 3px, transparent 3px 34px),
      radial-gradient(70% 90% at 50% 40%, #6e4a32, #4a3122);
    box-shadow: 0 30px 60px rgb(0 0 0 / .55), inset 0 3px 0 rgb(255 255 255 / .08), 0 0 0 10px #2d1f16;
  }
.table::after { /* tovaglia runner */
    content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 46px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, rgb(255 246 216 / .11) 0 14px, rgb(255 246 216 / .06) 14px 28px); border-radius: 6px;
  }
.candle { position: absolute; top: 50%; width: 10px; height: 26px; border-radius: 3px; background: #f3ead6; transform: translate(-50%, -70%); z-index: 1; }
.candle::after { content: ""; position: absolute; left: 50%; top: -12px; width: 8px; height: 12px; transform: translateX(-50%); border-radius: 50% 50% 40% 40%; background: #ffcf6e; box-shadow: 0 0 16px 6px rgb(255 190 90 / .55); animation: flicker 2.6s infinite; }
@keyframes flicker { 30% { transform: translateX(-50%) scale(.9, 1.1); } 60% { transform: translateX(-52%) scale(1.05, .95); } }
/* posto a tavola */
.seat { --c: #8a7fa8; position: relative; display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 6px 2px; cursor: pointer; color: var(--text); font: inherit; width: 100%; max-width: 128px; }
.seat--b { --c: var(--dani); }
.seat--v { --c: var(--ome); }
.chair { width: 64px; height: 26px; border-radius: 12px 12px 6px 6px; background: #2b2238; border: 2px solid #3a2f4c; transition: border-color .3s, box-shadow .3s; }
.seats--bottom .seat { grid-template-areas: "card" "plate" "chair"; }
.seats--bottom .chair { order: 3; border-radius: 6px 6px 12px 12px; }
.plate {
    width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem;
    background: radial-gradient(circle, #fbf7ee 52%, #e6dcc8 54%, #f3ecdc 70%); box-shadow: 0 6px 14px rgb(0 0 0 / .45);
    transition: transform .3s, box-shadow .3s;
  }
.plate b { font: 900 1.7rem Rubik, sans-serif; color: var(--c); }
.placecard { font: 700 1rem Kalam, cursive; color: #2b2233; background: var(--paper); padding: 1px 12px; border-radius: 3px; box-shadow: 0 4px 10px rgb(0 0 0 / .35); white-space: nowrap; transform: rotate(-2deg); }
.seat:nth-child(even) .placecard { transform: rotate(2deg); }
.seat:hover .plate, .seat:focus-visible .plate, .seat[aria-pressed="true"] .plate { transform: scale(1.08); box-shadow: 0 0 0 4px var(--c), 0 0 28px var(--c); }
.seat:hover .chair, .seat[aria-pressed="true"] .chair { border-color: var(--c); box-shadow: 0 0 14px var(--c); }
.seat:focus-visible { outline: none; }
.seats--top .seat { margin-bottom: -26px; z-index: 2; }
.seats--bottom .seat { margin-top: -26px; z-index: 2; }
/* testate: la stanza dei bimbi e il tuo posto */
.end { display: grid; justify-items: center; gap: 8px; text-align: center; grid-row: 2; }
.end--kids { grid-column: 1; }
.end--you { grid-column: 3; }
.end small { font: .95rem/1.25 Kalam, cursive; color: var(--paper); }
.end a { text-decoration: none; }
.kids-sign { font: 700 .82rem "JetBrains Mono", monospace; color: var(--lamp); border: 1px dashed var(--lamp); border-radius: 8px; padding: 8px 10px; transition: background .3s; }
.kids-sign:hover { background: rgb(255 196 119 / .1); }
.free-chair { width: 64px; height: 70px; border-radius: 10px 10px 6px 6px; border: 3px dashed var(--lamp); transform: rotate(14deg) translateX(10px); box-shadow: 0 0 24px rgb(255 196 119 / .35); animation: invite 3s ease-in-out infinite; }
@keyframes invite { 50% { transform: rotate(18deg) translateX(16px); } }
.you-btn { display: inline-block; margin-top: 4px; padding: 7px 12px; border-radius: 999px; background: #5865f2; color: #fff; font: 700 .85rem Rubik, sans-serif; }
/* scheda della persona */
.card {
    margin: 46px auto 0; max-width: 760px; min-height: 210px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start;
    background: var(--wall); border: 1px solid #2d2640; border-radius: 18px; padding: 26px; position: relative;
    box-shadow: 0 30px 60px rgb(0 0 0 / .4);
  }
.card::before { content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; background: var(--card-c, #3a3150); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.card__avatar { width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; font: 900 2.6rem Rubik, sans-serif; color: #fff; background: var(--card-c, #3a3150); box-shadow: 0 0 40px var(--card-c, transparent); }
.card__role { font: .75rem "JetBrains Mono", monospace; color: var(--lamp); text-transform: uppercase; letter-spacing: .08em; }
.card h2 { margin: 2px 0 6px; font-size: 2rem; line-height: 1.1; }
.card__plays { font-size: .92rem; color: var(--dim); margin: 0 0 12px; }
.card__plays b { color: var(--text); font-weight: 600; }
.card p.txt { margin: 0 0 10px; color: #d6d0e4; }
.card .quote { font: 1.1rem Kalam, cursive; color: var(--paper); border-left: 3px solid var(--card-c, var(--lamp)); padding-left: 12px; margin: 12px 0 0; }
.card--empty { grid-template-columns: 1fr; text-align: center; place-items: center; color: var(--dim); }
.card--empty p { margin: 0; font: 1.3rem Kalam, cursive; }
.card.pop { animation: pop .35s ease; }
@keyframes pop { from { transform: translateY(8px); opacity: .4; } }
.others { text-align: center; color: var(--dim); font: 1.15rem Kalam, cursive; margin: 34px 0 0; }
.next { text-align: center; padding: 70px 0 110px; }
.next h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 8px; }
.next p { color: var(--dim); margin: 0 0 24px; }
.next .links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.next a { text-decoration: none; padding: 12px 20px; border-radius: 999px; border: 1px solid #3a3150; font-weight: 700; }
.next a.main { background: #5865f2; border-color: #5865f2; }
/* mobile: la tavola diventa verticale */
@media (max-width: 820px) {
.scene { grid-template-columns: 1fr 84px 1fr; gap: 12px 0; }
.end--kids { grid-column: 1 / -1; grid-row: 1; }
.end--you { grid-column: 1 / -1; grid-row: 3; }
.table { grid-column: 2; grid-row: 2; height: 100%; min-height: 480px; border-radius: 42px; box-shadow: 0 30px 60px rgb(0 0 0 / .55), 0 0 0 7px #2d1f16; }
.table::after { left: 50%; right: auto; top: 10%; bottom: 10%; width: 26px; height: auto; transform: translateX(-50%); }
.candle { left: 50% !important; }
.candle:nth-child(1) { top: 30%; }
.candle:nth-child(3) { top: 70%; }
.seats { grid-row: 2; flex-direction: column; justify-content: space-around; gap: 2px; }
.seats--top { grid-column: 1; align-items: flex-end; }
.seats--bottom { grid-column: 3; align-items: flex-start; }
.seat, .seats--top .seat, .seats--bottom .seat { display: flex; align-items: center; gap: 2px; width: auto; max-width: none; margin: 0; padding: 2px 0; }
.seats--top .seat { margin-right: -16px; }
.seats--bottom .seat { margin-left: -16px; }
.seats--top .placecard { order: 1; }
.seats--top .plate { order: 2; }
.seats--top .chair { order: 3; }
.seats--bottom .chair { order: 1; }
.seats--bottom .plate { order: 2; }
.seats--bottom .placecard { order: 3; }
.chair, .seats--bottom .chair { width: 14px; height: 44px; border-radius: 6px; }
.plate { width: 50px; height: 50px; font-size: 1.25rem; }
.plate b { font-size: 1.3rem; }
.placecard { font-size: .82rem; padding: 0 7px; }
.card { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 22px 18px; }
.card .quote { text-align: left; }
}