:root {
  --bg: #f6f3ee;
  --paper: #fffdf9;
  --ink: #232330;
  --muted: #777482;
  --line: #e7e1d8;
  --primary: #6f78e8;
  --primary-dark: #5962cf;
  --secondary: #f0edff;
  --good: #4ca879;
  --danger: #e66c72;
  --shadow: 0 18px 60px rgba(45, 40, 70, .10);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { background-image: radial-gradient(circle at 15% 10%, rgba(111,120,232,.09), transparent 30%), radial-gradient(circle at 90% 85%, rgba(255,184,107,.10), transparent 28%); }
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
.hidden { display: none !important; }
.topbar { height: 74px; padding: 0 clamp(16px, 3vw, 44px); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(231,225,216,.8); background: rgba(246,243,238,.82); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.brand { border: 0; background: none; display: flex; align-items: center; gap: 12px; color: var(--ink); padding: 0; text-align: left; }
.brand-die { width: 43px; height: 43px; border-radius: 14px; background: var(--ink); display: grid; place-items: center; font-size: 22px; box-shadow: 0 8px 20px rgba(35,35,48,.18); }
.brand strong { display: block; font-size: 15px; }
.brand small { display: block; margin-top: 2px; color: var(--muted); letter-spacing: .12em; font-size: 9px; }
.top-actions { display: flex; gap: 9px; align-items: center; }
.status-pill, .ghost-btn { border: 1px solid var(--line); background: rgba(255,253,249,.75); border-radius: 999px; padding: 9px 12px; font-size: 12px; color: var(--muted); }
.status-pill { display: flex; gap: 7px; align-items: center; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
.status-pill.online i { background: var(--good); box-shadow: 0 0 0 4px rgba(76,168,121,.12); }
.screen { min-height: calc(100vh - 74px); }
.home-screen { width: min(1160px, calc(100% - 32px)); margin: 0 auto; display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(36px, 7vw, 90px); align-items: center; padding: 56px 0 80px; }
.hero-copy { max-width: 680px; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .17em; color: var(--primary); }
h1 { font-size: clamp(44px, 6vw, 78px); line-height: .98; letter-spacing: -.055em; margin: 16px 0 24px; }
h1 em { font-style: normal; color: var(--primary); }
.hero-copy > p { font-size: clamp(16px, 2vw, 20px); line-height: 1.65; color: var(--muted); max-width: 620px; }
.feature-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.feature-row span { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.5); font-size: 12px; font-weight: 650; }
.entry-card, .side-panel { background: rgba(255,253,249,.94); border: 1px solid rgba(231,225,216,.9); box-shadow: var(--shadow); }
.entry-card { border-radius: 28px; padding: 28px; }
.form-group { margin-bottom: 20px; }
.form-group label, .label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .14em; color: var(--muted); margin-bottom: 8px; }
input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 14px 15px; color: var(--ink); outline: none; transition: .2s; }
input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(111,120,232,.10); }
.avatar-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar-btn { border: 1px solid var(--line); background: #fff; border-radius: 14px; aspect-ratio: 1; font-size: 24px; transition: .2s; }
.avatar-btn:hover { transform: translateY(-2px); }
.avatar-btn.selected { border-color: var(--primary); background: var(--secondary); box-shadow: inset 0 0 0 1px var(--primary); }
.primary-btn, .secondary-btn { border: 0; border-radius: 14px; padding: 14px 17px; font-weight: 800; transition: .18s; }
.primary-btn { background: var(--primary); color: #fff; box-shadow: 0 8px 22px rgba(111,120,232,.22); }
.primary-btn:hover:not(:disabled) { background: var(--primary-dark); transform: translateY(-1px); }
.secondary-btn { background: var(--secondary); color: #555dc3; }
.primary-btn span { float: right; }
.wide { width: 100%; }
.divider { display: flex; align-items: center; gap: 10px; color: #aaa4ad; font-size: 11px; margin: 17px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
#roomCode { text-transform: uppercase; letter-spacing: .20em; font-weight: 800; }
.microcopy, .hint { color: var(--muted); font-size: 11px; text-align: center; line-height: 1.45; }
.game-screen { padding: 20px clamp(14px, 2vw, 28px) 30px; }
.room-strip { max-width: 1500px; margin: 0 auto 14px; min-height: 52px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,253,249,.78); display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; }
.room-strip .label { margin: 0 0 2px; font-size: 8px; }
.room-code { border: 0; background: none; font-weight: 900; letter-spacing: .12em; padding: 0; color: var(--ink); }
.room-meta { display: flex; gap: 7px; font-size: 12px; color: var(--muted); }
.game-layout { max-width: 1500px; margin: auto; display: grid; grid-template-columns: 250px minmax(440px, 1fr) 270px; gap: 14px; align-items: start; }
.side-panel { border-radius: 20px; padding: 16px; box-shadow: 0 12px 40px rgba(45,40,70,.07); }
.panel-title { display: flex; align-items: center; justify-content: space-between; font-weight: 850; margin-bottom: 12px; }
.panel-title small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.players-list { display: flex; flex-direction: column; gap: 7px; }
.player-row { border: 1px solid var(--line); border-radius: 13px; padding: 9px; display: flex; align-items: center; gap: 9px; background: #fff; }
.player-avatar { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #f5f2ed; font-size: 20px; position: relative; }
.player-online { position: absolute; width: 8px; height: 8px; right: -1px; bottom: -1px; background: var(--good); border: 2px solid #fff; border-radius: 50%; }
.player-info { min-width: 0; flex: 1; }
.player-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.player-info small { color: var(--muted); font-size: 9px; }
.ready-dot { font-size: 13px; }
.lobby-actions { margin-top: 14px; display: grid; gap: 8px; }
.board-wrap { min-width: 0; }
.turn-banner { margin-bottom: 10px; text-align: center; padding: 11px 14px; background: #fffdf9; border: 1px solid var(--line); border-radius: 14px; font-weight: 800; font-size: 13px; }
.board { --gap: 7px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); background: rgba(255,253,249,.88); border: 1px solid var(--line); border-radius: 26px; padding: 14px; box-shadow: var(--shadow); }
.tile { min-height: 82px; aspect-ratio: 1.14; border-radius: 15px; background: #fff; border: 1px solid #e9e3db; position: relative; padding: 7px; overflow: hidden; transition: .22s; }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(145deg, rgba(255,255,255,.35), transparent 55%); }
.tile-number { font-size: 9px; font-weight: 900; color: #aaa3a7; position: relative; z-index: 2; }
.tile-event { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(17px, 2vw, 28px); opacity: .92; }
.tile.start { background: #edf8f2; }
.tile.finish { background: #fff4d8; }
.tile.boost { background: #eef7ec; }
.tile.back { background: #fff0ee; }
.tile.extra { background: #f2eeff; }
.tile.teleport { background: #eaf3ff; }
.tokens { position: absolute; left: 6px; right: 6px; bottom: 6px; display: flex; flex-wrap: wrap; gap: 3px; z-index: 5; }
.token { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: 0 3px 8px rgba(0,0,0,.12); font-size: 14px; animation: pop .28s ease; }
.token.me { box-shadow: 0 0 0 3px rgba(111,120,232,.18), 0 4px 10px rgba(0,0,0,.12); }
@keyframes pop { from { transform: scale(.65); } to { transform: scale(1); } }
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; color: var(--muted); font-size: 10px; padding: 10px; }
.dice-area { text-align: center; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.dice-area .label { text-align: left; }
.dice { width: 92px; height: 92px; border-radius: 24px; margin: 8px auto 14px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 44px; font-weight: 900; box-shadow: 0 14px 26px rgba(35,35,48,.20); }
.dice.rolling { animation: shake .58s ease; }
@keyframes shake { 0%,100%{ transform: rotate(0) scale(1)} 20%{transform:rotate(-8deg) scale(1.06)} 40%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 80%{transform:rotate(4deg)} }
.log-section { margin-top: 16px; }
.game-log { max-height: 305px; overflow: auto; display: flex; flex-direction: column; gap: 9px; padding-right: 3px; }
.log-item { display: grid; grid-template-columns: 24px 1fr; gap: 7px; align-items: start; font-size: 10px; color: var(--muted); line-height: 1.4; }
.log-icon { width: 24px; height: 24px; border-radius: 8px; background: #f5f2ed; display: grid; place-items: center; }
.winner-card { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.winner-crown { font-size: 50px; }
.winner-card h3 { margin: 4px 0; }
.winner-card p { color: var(--muted); font-size: 11px; }
.toast { position: fixed; top: 86px; left: 50%; transform: translate(-50%, -16px); background: #232330; color: #fff; padding: 10px 14px; border-radius: 999px; font-size: 12px; opacity: 0; pointer-events: none; z-index: 100; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.event-dialog { border: 0; border-radius: 25px; padding: 26px; width: min(390px, calc(100% - 30px)); text-align: center; box-shadow: 0 30px 90px rgba(20,18,35,.28); }
.event-dialog::backdrop { background: rgba(30,28,45,.38); backdrop-filter: blur(5px); }
.event-icon { font-size: 54px; margin-bottom: 5px; }
.event-dialog h2 { margin: 8px 0; }
.event-dialog p { color: var(--muted); line-height: 1.5; font-size: 13px; margin-bottom: 18px; }
@media (max-width: 1050px) {
  .game-layout { grid-template-columns: 210px 1fr; }
  .action-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
  .log-section { margin: 0; }
  .game-log { max-height: 140px; }
}
@media (max-width: 780px) {
  .topbar { height: 64px; padding: 0 14px; }
  .brand small, #connectionBadge span { display: none; }
  .brand-die { width: 38px; height: 38px; }
  .screen { min-height: calc(100vh - 64px); }
  .home-screen { grid-template-columns: 1fr; padding: 34px 0 54px; gap: 28px; }
  h1 { font-size: clamp(41px, 13vw, 64px); }
  .game-screen { padding: 10px 8px 24px; }
  .game-layout { display: flex; flex-direction: column; }
  .players-panel { width: 100%; order: 2; }
  .board-wrap { width: 100%; order: 1; }
  .action-panel { width: 100%; order: 3; display: block; }
  .players-list { display: grid; grid-template-columns: repeat(2, 1fr); }
  .board { --gap: 4px; padding: 7px; border-radius: 18px; }
  .tile { min-height: 52px; padding: 4px; border-radius: 10px; }
  .tile-number { font-size: 7px; }
  .token { width: 18px; height: 18px; font-size: 11px; border-width: 1px; }
  .tokens { left: 3px; right: 3px; bottom: 3px; gap: 1px; }
  .action-panel { margin-top: 0; }
  .dice-area { display: grid; grid-template-columns: 80px 1fr; column-gap: 12px; align-items: center; text-align: left; }
  .dice-area .label { grid-column: 1 / -1; }
  .dice { width: 72px; height: 72px; margin: 0; font-size: 34px; border-radius: 20px; }
  .dice-area .primary-btn { align-self: end; }
  .dice-area .hint { grid-column: 2; margin: -18px 0 0; text-align: left; }
  .log-section { margin-top: 15px; }
}
@media (max-width: 470px) {
  .brand strong { font-size: 12px; }
  .ghost-btn { padding: 8px 9px; }
  .entry-card { padding: 20px; border-radius: 22px; }
  .avatar-picker { gap: 5px; }
  .avatar-btn { font-size: 20px; }
  .players-list { grid-template-columns: 1fr; }
  .room-meta { font-size: 10px; }
  .tile { aspect-ratio: 1; min-height: 45px; }
  .legend { gap: 7px; }
}

/* FASE 2 */
.character-picker { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.character-picker .avatar-btn { aspect-ratio: auto; min-height: 56px; display: flex; align-items: center; justify-content: center; font-size: 25px; }
.character-preview { min-height: 58px; margin-top: 8px; border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 10px 12px; display: grid; grid-template-columns: 34px 1fr; gap: 9px; align-items: center; }
.character-preview .preview-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--secondary); font-size: 19px; }
.character-preview strong { display: block; font-size: 11px; }
.character-preview small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.tile.coin { background: #fff8dc; }
.tile.card { background: #f6efff; }
.tile.treasure { background: #fff1df; }
.tile.minigame { background: #eaf8f6; }
.player-row.current { border-color: rgba(111,120,232,.42); background: #faf9ff; }
.player-stats { display: flex; gap: 5px; margin-top: 3px; flex-wrap: wrap; }
.player-stats b { font-size: 8px; font-weight: 800; padding: 2px 5px; border-radius: 999px; background: #f5f2ed; color: var(--muted); }
.player-kit { padding: 15px 0; border-bottom: 1px solid var(--line); }
.kit-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.kit-heading .label { margin: 0; }
.resource-pills { display: flex; gap: 5px; }
.resource-pills span { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 4px 7px; font-size: 9px; font-weight: 850; }
.ability-card { width: 100%; border: 1px solid #dcd9ff; background: linear-gradient(135deg,#f8f6ff,#fff); border-radius: 14px; padding: 9px; display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; text-align: left; color: var(--ink); }
.ability-card:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(111,120,232,.10); }
.ability-card.used { opacity: .58; }
.ability-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--secondary); display: grid; place-items: center; font-size: 18px; }
.ability-copy strong { display: block; font-size: 10px; }
.ability-copy small { display: block; color: var(--muted); font-size: 8px; line-height: 1.35; margin-top: 2px; }
.ability-state { font-size: 8px; letter-spacing: .1em; font-weight: 900; color: var(--primary); }
.inventory-head { display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 850; margin: 12px 1px 7px; }
.inventory-head small { color: var(--muted); }
.inventory { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-height: 48px; }
.inventory-empty { grid-column: 1/-1; min-height: 45px; border: 1px dashed var(--line); border-radius: 12px; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 8px; padding: 8px; }
.item-btn { min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 7px 3px; display: grid; place-items: center; gap: 2px; color: var(--ink); }
.item-btn .item-icon { font-size: 19px; }
.item-btn small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 7px; }
.item-btn:not(:disabled):hover { border-color: var(--primary); background: #faf9ff; }
.active-effect { margin: 8px 0 0; border-radius: 10px; background: #eff9f3; color: #39825e; font-size: 8px; font-weight: 800; padding: 7px 8px; text-align: center; }
.minigame-choices { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 15px 0; }
.minigame-choice { border: 1px solid var(--line); background: #fff; border-radius: 15px; padding: 16px 8px; font-size: 24px; font-weight: 850; color: var(--ink); }
.minigame-choice small { display: block; font-size: 8px; color: var(--muted); margin-top: 3px; }
.minigame-choice:hover { border-color: var(--primary); background: var(--secondary); transform: translateY(-1px); }
.minigame-dialog .microcopy { margin: 10px 0 0; }
.event-dialog.card-event { background: linear-gradient(160deg,#fbf6ff,#fff); }
.event-dialog.reward-event { background: linear-gradient(160deg,#fff9e9,#fff); }
.tile.token-step { outline: 3px solid rgba(111,120,232,.18); transform: translateY(-1px); }
@media (max-width: 1050px) and (min-width: 781px) {
  .action-panel { grid-template-columns: 205px 1fr 1fr; }
  .player-kit { padding: 0 14px; border-bottom: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}
@media (max-width: 780px) {
  .player-kit { padding: 14px 0; }
  .character-picker { grid-template-columns: repeat(6,1fr); }
  .character-picker .avatar-btn { min-height: 48px; }
}
@media (max-width: 470px) {
  .character-picker { grid-template-columns: repeat(3,1fr); }
  .inventory { grid-template-columns: repeat(3,1fr); }
  .minigame-choices { grid-template-columns: 1fr; }
  .minigame-choice { padding: 12px; font-size: 20px; }
}

/* FASE 3 */
.global-event { max-width: 1500px; margin: 0 auto 14px; border: 1px solid #dcd8fb; background: linear-gradient(115deg, #f6f4ff, rgba(255,253,249,.96)); border-radius: 17px; padding: 10px 14px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; box-shadow: 0 8px 26px rgba(111,120,232,.08); }
.global-event.event-pop { animation: globalPop .55s ease; }
@keyframes globalPop { 0% { transform: scale(.97); opacity: .6; } 55% { transform: scale(1.015); } 100% { transform: scale(1); opacity: 1; } }
.global-event-icon { width: 42px; height: 42px; border-radius: 13px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; font-size: 22px; }
.global-event-copy { min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; }
.global-event-copy small { grid-column: 1; color: var(--primary); font-size: 8px; letter-spacing: .14em; font-weight: 900; }
.global-event-copy strong { grid-column: 2; font-size: 12px; }
.global-event-copy span { grid-column: 1 / -1; color: var(--muted); font-size: 9px; margin-top: 2px; line-height: 1.35; }
.tile.shop { background: #eef8ff; }
.tile.route { background: #f2f7ee; }
.player-row-actions { display: grid; justify-items: center; gap: 4px; }
.trade-mini-btn { border: 1px solid var(--line); background: #fff; width: 27px; height: 24px; border-radius: 8px; padding: 0; font-size: 12px; }
.trade-mini-btn:hover { border-color: var(--primary); background: var(--secondary); }
.mission-done-pill { background: #edf8f2 !important; color: #32805b !important; }
.mission-card { margin: 14px 0; border: 1px dashed #d7cdfd; background: linear-gradient(135deg,#fbf9ff,#fff); border-radius: 15px; padding: 10px; display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; }
.mission-card.completed { border-style: solid; border-color: #bfe3cf; background: linear-gradient(135deg,#f0faf4,#fff); }
.mission-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--secondary); font-size: 18px; }
.mission-card > div small { display: block; color: var(--primary); font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.mission-card > div strong { display: block; font-size: 10px; margin-top: 1px; }
.mission-card > div p { margin: 2px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.mission-card > b { font-size: 7px; color: var(--primary); text-align: right; max-width: 64px; }
.mission-card.completed > b { color: var(--good); }
.trade-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.trade-title { margin-bottom: 8px; }
.trade-list { display: grid; gap: 7px; }
.trade-empty { border: 1px dashed var(--line); border-radius: 11px; padding: 9px; color: var(--muted); font-size: 8px; line-height: 1.4; text-align: center; }
.trade-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 8px; }
.trade-card.incoming { border-color: #d9d5ff; background: #fbfaff; }
.trade-card-head { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.trade-card-head strong { font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-card-head span { font-size: 6px; letter-spacing: .1em; color: var(--primary); font-weight: 900; }
.trade-equation { display: grid; grid-template-columns: 1fr auto 1fr; gap: 5px; align-items: center; margin: 7px 0; text-align: center; }
.trade-equation b { font-size: 7px; background: #f7f4ef; border-radius: 8px; padding: 5px 3px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.trade-equation i { font-style: normal; color: var(--muted); font-size: 10px; }
.trade-actions { display: flex; gap: 5px; }
.trade-actions button { flex: 1; border: 0; border-radius: 8px; padding: 6px; font-size: 7px; font-weight: 850; }
.trade-accept { background: #eaf7ef; color: #2d7b56; }
.trade-reject { background: #f6f2ee; color: var(--muted); }
.shop-coins { margin-bottom: 10px !important; font-weight: 800; color: var(--ink) !important; }
.shop-items { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 0 14px; }
.shop-item { min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 15px; padding: 12px 8px; display: grid; gap: 3px; justify-items: center; color: var(--ink); }
.shop-item > span { font-size: 28px; }
.shop-item strong { font-size: 9px; }
.shop-item small { font-size: 7px; line-height: 1.3; color: var(--muted); min-height: 28px; }
.shop-item b { font-size: 9px; color: #9a6e14; margin-top: 4px; }
.shop-item:hover:not(:disabled) { border-color: var(--primary); background: #faf9ff; transform: translateY(-1px); }
.ghost-dialog-btn { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 13px; padding: 12px 14px; font-weight: 800; }
.route-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.route-choice { border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); padding: 14px 10px; display: grid; gap: 3px; justify-items: center; }
.route-choice > span { font-size: 30px; }
.route-choice strong { font-size: 10px; }
.route-choice small { color: var(--muted); font-size: 7px; }
.route-choice.safe:hover { border-color: #9dd0b4; background: #f2faf5; }
.route-choice.risky:hover { border-color: #e9c482; background: #fff9ed; }
.trade-builder { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; margin: 14px 0; text-align: left; }
.trade-builder label span { display: block; font-size: 8px; font-weight: 850; color: var(--muted); margin: 0 0 5px 2px; }
.trade-builder select { width: 100%; min-width: 0; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 12px; padding: 11px 9px; font: inherit; font-size: 10px; outline: none; }
.trade-builder select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(111,120,232,.09); }
.trade-arrow { padding-bottom: 12px; color: var(--primary); font-weight: 900; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@media (max-width: 1050px) and (min-width: 781px) {
  .trade-section { grid-column: 1 / -1; }
  .action-panel .mission-card { margin: 0; border-left: 1px dashed #d7cdfd; }
}
@media (max-width: 780px) {
  .global-event { margin: 0 8px 10px; }
  .global-event-copy { grid-template-columns: 1fr; }
  .global-event-copy small, .global-event-copy strong, .global-event-copy span { grid-column: 1; }
  .shop-items { grid-template-columns: 1fr; }
  .shop-item { grid-template-columns: 42px 1fr auto; text-align: left; align-items: center; justify-items: start; }
  .shop-item > span { grid-row: 1 / 4; }
  .shop-item small { min-height: 0; }
  .route-choices { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  .trade-builder { grid-template-columns: 1fr; }
  .trade-arrow { padding: 0; transform: rotate(90deg); justify-self: center; }
  .dialog-actions { grid-template-columns: 1fr; }
  .global-event { grid-template-columns: 34px 1fr; padding: 8px 10px; }
  .global-event-icon { width: 34px; height: 34px; font-size: 18px; }
}

/* FASE 4 · DUO + PODIO + UPDATE MANUALE */
.update-btn { white-space: nowrap; }
.update-btn:disabled { opacity: .58; cursor: wait; }
.tile.duo { background: linear-gradient(145deg,#fff2f7,#f7f3ff); }
.duo-content { margin: 14px 0; }
.duo-partners { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.duo-partner { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 15px; padding: 11px 8px; display: grid; justify-items: center; gap: 2px; }
.duo-partner span { font-size: 28px; }
.duo-partner strong { font-size: 10px; }
.duo-partner small { font-size: 7px; color: var(--muted); }
.duo-partner:hover:not(:disabled) { border-color: #d8a7c4; background: #fff8fc; transform: translateY(-1px); }
.duo-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.duo-choices button { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 18px; padding: 18px 10px; display: grid; justify-items: center; gap: 4px; }
.duo-choices button span { font-size: 38px; }
.duo-choices button strong { font-size: 11px; }
.duo-choices button:hover:not(:disabled) { border-color: var(--primary); background: var(--secondary); transform: translateY(-1px); }
.duo-waiting { border: 1px dashed #d7cdfd; background: #fbfaff; border-radius: 16px; padding: 18px; display: grid; justify-items: center; gap: 4px; text-align: center; }
.duo-waiting span { font-size: 30px; }
.duo-waiting strong { font-size: 11px; }
.duo-waiting small { color: var(--muted); font-size: 8px; }
.podium-list { display: grid; gap: 6px; margin: 12px 0 14px; text-align: left; }
.podium-row { display: grid; grid-template-columns: 28px 30px 1fr auto; gap: 6px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 7px 8px; background: #fff; }
.podium-row.champion { border-color: #ead69f; background: linear-gradient(120deg,#fff9e8,#fff); }
.podium-rank { font-size: 17px; text-align: center; }
.podium-avatar { font-size: 20px; text-align: center; }
.podium-name { min-width: 0; }
.podium-name strong { display: block; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium-name small { display: block; font-size: 7px; color: var(--muted); margin-top: 1px; line-height: 1.3; }
.podium-row > b { font-size: 9px; color: var(--primary); white-space: nowrap; }
@media (max-width: 780px) {
  .top-actions { gap: 5px; }
  .update-btn { font-size: 8px; padding-left: 9px; padding-right: 9px; }
  .duo-partners { grid-template-columns: 1fr; }
}
@media (max-width: 470px) {
  .update-btn { max-width: 118px; overflow: hidden; text-overflow: ellipsis; }
  .duo-choices { grid-template-columns: 1fr; }
  .podium-row { grid-template-columns: 25px 28px 1fr auto; }
}


/* CIOCCOLATA & COZY GAMES · THEME 4.1 */
:root {
  --bg: #f7eee4;
  --paper: #fffaf4;
  --ink: #3b261f;
  --muted: #806b61;
  --line: #e6d3c2;
  --primary: #a8643d;
  --primary-dark: #7a432c;
  --secondary: #f3e1ce;
  --good: #718e69;
  --danger: #c66d5b;
  --shadow: 0 20px 58px rgba(76, 43, 31, .12);
}
html, body { background: var(--bg); color: var(--ink); }
body {
  background-image:
    radial-gradient(circle at 10% 8%, rgba(171,104,63,.13), transparent 25%),
    radial-gradient(circle at 86% 16%, rgba(222,174,133,.16), transparent 24%),
    radial-gradient(circle at 72% 88%, rgba(112,73,52,.08), transparent 30%);
}
.topbar { border-bottom-color: rgba(121,78,54,.12); background: rgba(247,238,228,.88); }
.brand-die { background: linear-gradient(145deg,#5a3426,#321e18); box-shadow: 0 9px 22px rgba(67,39,28,.22); }
.brand strong { color: #4c2e24; }
.status-pill, .ghost-btn { background: rgba(255,250,244,.85); }
.update-btn { color: #6f402b; border-color: #d7bda7; }
.update-btn:hover { background: #fff5ea; }
h1 em, .eyebrow { color: #9a5735; }
.feature-row span { background: rgba(255,250,244,.74); border-color: #e2cdbb; }
.entry-card, .side-panel { background: rgba(255,250,244,.96); border-color: rgba(218,195,175,.92); }
.entry-card { box-shadow: 0 26px 70px rgba(82,48,33,.13); }
input { background: #fffdf9; border-color: #e5d2c1; }
input:focus { border-color: #ad724f; box-shadow: 0 0 0 4px rgba(168,100,61,.11); }
.avatar-btn, .character-preview { background: #fffdf9; }
.avatar-btn.selected { border-color: #a8643d; background: #f5e5d5; box-shadow: inset 0 0 0 1px #a8643d; }
.character-preview .preview-icon, .ability-icon, .mission-icon { background: #f2dfcc; }
.primary-btn { background: linear-gradient(180deg,#aa6943,#8c4e31); box-shadow: 0 9px 22px rgba(137,76,47,.23); }
.primary-btn:hover:not(:disabled) { background: linear-gradient(180deg,#965638,#733c28); }
.secondary-btn { background: #f1dfcd; color: #74432e; }
.room-strip, .turn-banner { background: rgba(255,250,244,.9); border-color: #e4cfbd; }
.global-event { border-color: #d8b99f; background: linear-gradient(115deg,#f3dfca,rgba(255,250,244,.98)); box-shadow: 0 9px 27px rgba(116,65,41,.09); }
.global-event-icon { background: #fff9f1; border-color: #e5d0bf; }
.board { background: rgba(111,67,46,.09); border-color: #d9c0aa; box-shadow: 0 22px 60px rgba(75,42,30,.14); }
.tile { background: #fffaf4; border-color: #e8d5c4; }
.tile.start { background: #edf0df; }
.tile.finish { background: #f7dfb8; }
.tile.boost { background: #f7ead8; }
.tile.back { background: #f3ded9; }
.tile.extra { background: #f1dfd0; }
.tile.teleport { background: #e9e0d6; }
.tile.coin { background: #f8e7bf; }
.tile.card { background: #f4e1dc; }
.tile.treasure { background: #f6dfc6; }
.tile.minigame { background: #efe6d9; }
.tile.shop { background: #f4e3cf; }
.tile.route { background: #eee9d7; }
.tile.duo { background: linear-gradient(145deg,#f3ddd8,#f8eadc); }
.token { border-color: #8f5034; background: #fffaf4; }
.token.me { box-shadow: 0 0 0 3px rgba(168,100,61,.18),0 4px 10px rgba(0,0,0,.12); }
.dice { background: linear-gradient(145deg,#5a3426,#321e18); box-shadow: 0 16px 30px rgba(65,37,27,.23); }
.player-avatar, .log-icon { background: #f0e3d7; }
.player-row { background: #fffdf9; }
.player-row.current { border-color: rgba(168,100,61,.43); background: #fff7ef; }
.player-stats b { background: #f0e4d9; }
.resource-pills span, .item-btn, .shop-item, .route-choice, .trade-card, .trade-mini-btn, .duo-partner, .duo-choices button, .podium-row { background: #fffdf9; }
.ability-card { border-color: #dfc2aa; background: linear-gradient(135deg,#f8e8d7,#fffdf9); }
.ability-card:not(:disabled):hover { box-shadow: 0 8px 20px rgba(153,88,54,.12); }
.active-effect { background: #edf2e5; color: #5e7459; }
.mission-card { border-color: #d8b99e; background: linear-gradient(135deg,#f7e7d7,#fffdf9); }
.mission-card.completed { border-color: #b7cfad; background: linear-gradient(135deg,#eff5e9,#fffdf9); }
.trade-card.incoming { border-color: #d4af93; background: #fff6ed; }
.trade-equation b { background: #f2e5da; }
.shop-item b { color: #8b542b; }
.shop-item:hover:not(:disabled), .item-btn:not(:disabled):hover, .duo-choices button:hover:not(:disabled) { border-color: #a8643d; background: #fff3e7; }
.route-choice.safe:hover { border-color: #abc19c; background: #f4f7ee; }
.route-choice.risky:hover { border-color: #d9a779; background: #fff3e4; }
.duo-partner:hover:not(:disabled) { border-color: #c99478; background: #fff3e9; }
.duo-waiting { border-color: #d5b99f; background: #fff6ed; }
.podium-row.champion { border-color: #dcae6f; background: linear-gradient(120deg,#f8e4bd,#fffaf4); }
.event-dialog { border-color: #dbc0aa !important; background: #fffaf4 !important; box-shadow: 0 28px 90px rgba(65,37,27,.23) !important; }
.event-dialog.card-event { background: linear-gradient(160deg,#f5e2db,#fffaf4) !important; }
.event-dialog.reward-event { background: linear-gradient(160deg,#f8e3c7,#fffaf4) !important; }
.toast { background: #3a241d; }
@media (max-width: 780px) {
  .board { background: rgba(111,67,46,.08); }
}

/* FASE 5 · COLLEZIONE DOLCETTI + PAUSE COZY */
.tile.treat { background: linear-gradient(145deg,#fff0dc,#f6dfc9); }
.tile.treat .tile-event { filter: drop-shadow(0 3px 5px rgba(104,61,39,.12)); }

.cozy-break {
  max-width: 1500px;
  margin: 0 auto 14px;
  border: 1px solid #d5b092;
  background: linear-gradient(120deg,rgba(255,246,233,.98),rgba(244,220,195,.96));
  border-radius: 19px;
  padding: 11px 13px;
  box-shadow: 0 12px 34px rgba(97,54,35,.10);
  display: grid;
  grid-template-columns: minmax(260px,1fr) minmax(260px,1.3fr);
  gap: 10px 18px;
  align-items: center;
}
.cozy-break-head { display: grid; grid-template-columns: 42px 1fr; gap: 9px; align-items: center; min-width: 0; }
.cozy-break-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: #fffaf4; border: 1px solid #dfc5ad; font-size: 22px; }
.cozy-break-head > span:last-child { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: baseline; min-width: 0; }
.cozy-break-head small { color: var(--primary); font-size: 7px; font-weight: 950; letter-spacing: .12em; }
.cozy-break-head strong { font-size: 11px; }
.cozy-break-head em { grid-column: 1 / -1; font-style: normal; color: var(--muted); font-size: 8px; margin-top: 2px; }
.cozy-break > p { grid-column: 1; margin: -3px 0 0 51px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.cozy-break-choices { grid-column: 2; grid-row: 1 / span 2; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.cozy-break-choices button { border: 1px solid #dfc7b1; background: rgba(255,253,249,.91); color: var(--ink); border-radius: 13px; padding: 8px 5px; display: grid; justify-items: center; gap: 2px; transition: .18s ease; }
.cozy-break-choices button span { font-size: 21px; }
.cozy-break-choices button b { font-size: 7px; }
.cozy-break-choices button:hover:not(:disabled) { border-color: var(--primary); background: #fff5ea; transform: translateY(-1px); }
.cozy-break-choices button.selected { border-color: #9f6b4c; background: #f1dfce; box-shadow: inset 0 0 0 1px rgba(126,75,48,.15); }
.cozy-break-choices button:disabled:not(.selected) { opacity: .43; }
.cozy-break-active .turn-banner { box-shadow: 0 8px 26px rgba(125,77,49,.08); }

.treat-head { margin: 11px 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.treat-head span { font-size: 8px; font-weight: 900; letter-spacing: .03em; }
.treat-head small { color: var(--primary); font-size: 7px; font-weight: 900; }
.treat-collection { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.treat-slot { min-width: 0; position: relative; border: 1px solid var(--line); border-radius: 11px; padding: 7px 4px 5px; display: grid; justify-items: center; gap: 2px; background: #fffdf9; transition: .18s ease; }
.treat-slot > span { height: 23px; display: grid; place-items: center; font-size: 19px; }
.treat-slot small { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; font-size: 6px; color: var(--muted); }
.treat-slot b { position: absolute; top: 3px; right: 4px; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; border-radius: 8px; background: #6f402b; color: #fff; font-size: 6px; }
.treat-slot.owned { border-color: #dab795; background: linear-gradient(145deg,#fff9f0,#f9e8d5); }
.treat-slot.locked { border-style: dashed; opacity: .58; }
.treat-slot.locked > span { color: #c3a996; font-size: 18px; }
.treat-note { margin: 5px 0 0; color: var(--muted); font-size: 6.5px; line-height: 1.35; }

/* Atmosfera dinamica: solo CSS, nessuna immagine. */
body[data-cozy-mood="moon"] { --bg:#eee5de; background-image: radial-gradient(circle at 14% 10%,rgba(100,72,91,.12),transparent 27%),radial-gradient(circle at 82% 16%,rgba(210,175,136,.12),transparent 25%),linear-gradient(180deg,#eee5de,#f7eee4); }
body[data-cozy-mood="rain"] { --bg:#eee9e4; background-image: radial-gradient(circle at 12% 8%,rgba(91,105,116,.10),transparent 26%),radial-gradient(circle at 85% 18%,rgba(158,121,94,.09),transparent 25%); }
body[data-cozy-mood="festival"] { background-image: radial-gradient(circle at 10% 8%,rgba(198,134,72,.17),transparent 26%),radial-gradient(circle at 86% 16%,rgba(222,174,133,.22),transparent 25%),radial-gradient(circle at 65% 88%,rgba(141,88,53,.10),transparent 28%); }
body[data-cozy-mood="sunny"] { --bg:#fbf0df; }
body[data-cozy-mood="tailwind"] { --bg:#f0eee3; background-image: radial-gradient(circle at 9% 8%,rgba(113,142,105,.10),transparent 26%),radial-gradient(circle at 88% 15%,rgba(181,135,93,.12),transparent 25%); }
body[data-cozy-mood="treasure_day"] { --bg:#f8ead9; }

@media (max-width: 900px) {
  .cozy-break { margin: 0 8px 10px; grid-template-columns: 1fr; gap: 8px; }
  .cozy-break > p { grid-column: 1; margin-left: 51px; }
  .cozy-break-choices { grid-column: 1; grid-row: auto; }
}
@media (max-width: 470px) {
  .cozy-break { padding: 9px; }
  .cozy-break-head { grid-template-columns: 36px 1fr; }
  .cozy-break-icon { width: 36px; height: 36px; font-size: 19px; }
  .cozy-break > p { margin-left: 45px; }
  .cozy-break-choices { gap: 5px; }
  .cozy-break-choices button { padding: 7px 3px; }
  .cozy-break-choices button span { font-size: 19px; }
  .treat-collection { grid-template-columns: repeat(2,1fr); }
}

/* FASE 6 · COMPUTER / IA */
.bot-home-btn { margin-top: 10px; }
.bot-controls {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(122,67,44,.18);
  border-radius: 16px;
  background: rgba(255,248,238,.72);
  display: grid;
  gap: 9px;
}
.bot-controls.hidden { display: none; }
.bot-control-copy { display: grid; gap: 2px; }
.bot-control-copy strong { font-size: .92rem; }
.bot-control-copy small { color: var(--muted, #7d695f); line-height: 1.25; }
.bot-controls select {
  width: 100%;
  border: 1px solid rgba(122,67,44,.22);
  border-radius: 12px;
  background: #fffaf4;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
}
.cpu-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(122,67,44,.11);
  color: #70412f;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .03em;
  vertical-align: middle;
}
.bot-remove-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(122,67,44,.10);
  color: #70412f;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.bot-remove-btn:hover { background: rgba(122,67,44,.18); }
.player-row:has(.cpu-badge) { background: rgba(255,244,229,.62); }
@media (max-width: 780px) {
  .bot-controls { padding: 10px; }
}

/* FASE 7 · durata e multi-tabellone */
.duration-controls { border: 1px solid #dfc6af; background: linear-gradient(145deg,#fff9f1,#f7eadf); border-radius: 16px; padding: 10px; display: grid; gap: 9px; }
.duration-copy strong { display: block; font-size: 11px; }
.duration-copy small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.duration-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.duration-btn { border: 1px solid #e3d2c3; background: rgba(255,255,255,.8); border-radius: 12px; padding: 8px 5px; min-width: 0; color: #6d4635; transition: .18s; }
.duration-btn span { display: block; font-size: 17px; margin-bottom: 2px; }
.duration-btn b { display: block; font-size: 9px; }
.duration-btn small { display: block; margin-top: 2px; color: var(--muted); font-size: 6.5px; line-height: 1.25; }
.duration-btn.selected { border-color: #9b633f; background: #f3dfcc; box-shadow: inset 0 0 0 1px #9b633f; transform: translateY(-1px); }
.duration-btn:disabled:not(.selected) { opacity: .58; }

.board-nav { margin: 0 0 8px; display: grid; grid-template-columns: 42px 1fr 42px; gap: 8px; align-items: center; border: 1px solid #dfc7b2; background: rgba(255,250,243,.9); border-radius: 15px; padding: 7px; box-shadow: 0 8px 24px rgba(92,58,39,.07); }
.board-nav > div { text-align: center; min-width: 0; }
.board-nav strong { display: block; font-size: 12px; color: #6c432e; }
.board-nav small { display: block; margin-top: 1px; color: var(--muted); font-size: 8px; }
.board-nav-btn { width: 38px; height: 38px; border: 1px solid #dfc7b2; border-radius: 11px; background: #fffdf9; color: #7a432c; font-weight: 900; font-size: 16px; }
.board-nav-btn:hover:not(:disabled) { transform: translateY(-1px); background: #f7eadc; }
.tile.checkpoint { background: linear-gradient(145deg,#fff0ce,#f6d8a8); border-color: #d9a65d; }
.tile.tile-disabled { opacity: .18; border-style: dashed; background: transparent; }

.board[data-board-mood="salotto"] { background: linear-gradient(145deg,rgba(255,249,240,.96),rgba(246,226,207,.92)); }
.board[data-board-mood="salotto"] .tile:not(.boost):not(.back):not(.extra):not(.teleport):not(.coin):not(.card):not(.treasure):not(.minigame):not(.shop):not(.route):not(.duo):not(.treat):not(.start):not(.finish):not(.checkpoint) { background:#fffaf4; }
.board[data-board-mood="bosco"] { border-color:#cbd5b9; background: radial-gradient(circle at 15% 12%,rgba(174,197,151,.25),transparent 28%),linear-gradient(145deg,#f3f3df,#e8e4c9); }
.board[data-board-mood="bosco"] .tile { border-color:#d6d7bc; }
.board[data-board-mood="bosco"] .tile:not(.boost):not(.back):not(.extra):not(.teleport):not(.coin):not(.card):not(.treasure):not(.minigame):not(.shop):not(.route):not(.duo):not(.treat):not(.start):not(.finish):not(.checkpoint) { background:#fbf8e9; }
.board[data-board-mood="bosco"] .tile.start { background:#e7f0da; }
.board[data-board-mood="borgo"] { border-color:#d8c6bf; background: radial-gradient(circle at 80% 10%,rgba(255,216,134,.22),transparent 25%),linear-gradient(145deg,#efe4e3,#e6d8d9); }
.board[data-board-mood="borgo"] .tile { border-color:#dfd0ca; }
.board[data-board-mood="borgo"] .tile:not(.boost):not(.back):not(.extra):not(.teleport):not(.coin):not(.card):not(.treasure):not(.minigame):not(.shop):not(.route):not(.duo):not(.treat):not(.start):not(.finish):not(.checkpoint) { background:#fff7f1; }
.board[data-board-mood="borgo"] .tile.start { background:#f5e7d3; }

@media (max-width: 780px) {
  .duration-grid { grid-template-columns: 1fr; }
  .duration-btn { display: grid; grid-template-columns: 28px 1fr; text-align: left; padding: 7px 9px; }
  .duration-btn span { grid-row: 1 / 3; align-self: center; margin: 0; }
  .duration-btn b, .duration-btn small { grid-column: 2; }
  .board-nav { grid-template-columns: 36px 1fr 36px; }
  .board-nav-btn { width: 32px; height: 32px; }
}


/* FASE 8 · SUONI + ANIMAZIONI PER CASELLE SPECIALI */
.sound-btn { min-width: 92px; }
.special-fx-layer { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; contain: layout paint; }
.special-fx-burst { position: absolute; left: 50%; top: 47%; width: min(78vw,420px); transform: translate(-50%,-50%); display: grid; justify-items: center; gap: 8px; text-align: center; animation: specialFxBurst 1.05s cubic-bezier(.2,.9,.2,1) both; filter: drop-shadow(0 12px 26px rgba(75,43,28,.22)); }
.special-fx-burst::before { content:""; position:absolute; inset:50% auto auto 50%; width:170px; height:170px; border-radius:50%; transform:translate(-50%,-50%); background:radial-gradient(circle,rgba(255,250,233,.96) 0 28%,rgba(239,201,158,.5) 47%,rgba(255,255,255,0) 72%); z-index:-1; animation: specialFxHalo .9s ease-out both; }
.special-fx-main { font-size: clamp(58px,11vw,96px); line-height:1; animation: specialFxIcon .9s cubic-bezier(.16,1.2,.3,1) both; }
.special-fx-burst strong { max-width: 90vw; padding:7px 13px; border:1px solid rgba(126,75,48,.18); border-radius:999px; background:rgba(255,250,243,.94); color:#6f402b; font-size:clamp(13px,2.8vw,20px); box-shadow:0 8px 28px rgba(83,45,28,.12); }
.special-fx-particle { position:absolute; left:0; top:0; transform:translate(var(--fx-x),var(--fx-y)); font-size:var(--fx-size); opacity:0; animation:specialFxParticle 1.3s cubic-bezier(.18,.82,.25,1) var(--fx-delay) both; filter:drop-shadow(0 4px 6px rgba(78,44,29,.15)); }
.fx-back .special-fx-main { animation-name:specialFxBadIcon; }
.fx-teleport .special-fx-main { animation-name:specialFxWarpIcon; }
.fx-duo .special-fx-main { animation-name:specialFxHeartIcon; }
.fx-card .special-fx-main { animation-name:specialFxCardIcon; }
.fx-checkpoint::before { width:230px; height:230px; background:radial-gradient(circle,rgba(255,244,206,.98),rgba(213,170,111,.45) 45%,transparent 72%); }
.special-screen-shake .game-screen { animation:specialScreenShake .48s ease both; }
.event-dialog[open] { animation: dialogSpecialIn .24s ease-out; }
@keyframes specialFxBurst { 0%{opacity:0;transform:translate(-50%,-44%) scale(.45)} 18%{opacity:1;transform:translate(-50%,-50%) scale(1.08)} 72%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-55%) scale(.92)} }
@keyframes specialFxHalo { from{opacity:0;transform:translate(-50%,-50%) scale(.35)} 32%{opacity:1} to{opacity:0;transform:translate(-50%,-50%) scale(1.65)} }
@keyframes specialFxIcon { 0%{transform:scale(.35) rotate(-14deg)} 45%{transform:scale(1.15) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes specialFxBadIcon { 0%{transform:scale(.5)} 28%{transform:scale(1.12) rotate(-12deg)} 43%{transform:rotate(11deg)} 57%{transform:rotate(-7deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes specialFxWarpIcon { 0%{transform:scale(.2) rotate(-140deg);filter:blur(6px)} 55%{transform:scale(1.25) rotate(18deg);filter:blur(0)} 100%{transform:scale(1) rotate(0)} }
@keyframes specialFxHeartIcon { 0%{transform:scale(.3)} 34%{transform:scale(1.25)} 50%{transform:scale(.92)} 68%{transform:scale(1.14)} 100%{transform:scale(1)} }
@keyframes specialFxCardIcon { 0%{transform:perspective(300px) rotateY(90deg) scale(.6)} 55%{transform:perspective(300px) rotateY(-10deg) scale(1.08)} 100%{transform:perspective(300px) rotateY(0) scale(1)} }
@keyframes specialFxParticle { 0%{opacity:0;transform:translate(var(--fx-x),var(--fx-y)) scale(.3) rotate(0)} 18%{opacity:1} 100%{opacity:0;transform:translate(calc(var(--fx-x) + var(--fx-drift)),calc(var(--fx-y) - 150px)) scale(1.1) rotate(260deg)} }
@keyframes specialScreenShake { 0%,100%{transform:translate(0,0)} 16%{transform:translate(-7px,2px)} 32%{transform:translate(6px,-3px)} 48%{transform:translate(-5px,-1px)} 64%{transform:translate(4px,2px)} 82%{transform:translate(-2px,0)} }
@keyframes dialogSpecialIn { from{opacity:.4;transform:translateY(8px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@media (max-width:700px){ .sound-btn{min-width:auto}.special-fx-burst{top:42%}.special-fx-main{font-size:64px}.special-fx-burst strong{font-size:13px} }
@media (prefers-reduced-motion: reduce){ .special-fx-particle{display:none}.special-fx-burst,.special-fx-main,.special-fx-burst::before,.special-screen-shake .game-screen{animation-duration:.18s!important;animation-iteration-count:1!important}.special-screen-shake .game-screen{transform:none!important} }

/* FASE 9 · minigiochi evoluti */
.minigame-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  margin: 2px auto 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(110,72,47,.09);
  border: 1px solid rgba(110,72,47,.18);
  font-weight: 900;
  letter-spacing: .03em;
}
.minigame-timer[hidden] { display: none !important; }
.reaction-button { grid-column: 1 / -1; min-height: 108px; transition: transform .14s ease, box-shadow .14s ease, background .14s ease; }
.reaction-button.reaction-ready {
  transform: scale(1.04);
  background: linear-gradient(145deg,#fff8d8,#fff0b7);
  box-shadow: 0 0 0 5px rgba(255,210,80,.18), 0 14px 36px rgba(89,57,35,.16);
  animation: reactionPulse .48s ease-in-out infinite alternate;
}
.memory-cover {
  grid-column: 1 / -1;
  padding: 22px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.68);
  border: 1px dashed rgba(110,72,47,.24);
  font-weight: 850;
}
.memory-progress {
  grid-column: 1 / -1;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(110,72,47,.07);
  font-size: 25px;
  letter-spacing: .18em;
  font-weight: 900;
}
@keyframes reactionPulse { from { transform: scale(1.02); } to { transform: scale(1.075); } }
@media (prefers-reduced-motion: reduce) { .reaction-button.reaction-ready { animation: none; } }


/* FASE 10 · Grandi Sfide e Sigilli Cozy */
.sigil-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-weight:800;color:var(--ink)}
.sigil-head small{font-size:.72rem;color:var(--muted);font-weight:800}
.sigil-collection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.sigil-slot{position:relative;min-height:72px;border:1px solid rgba(112,70,50,.16);border-radius:16px;background:rgba(255,250,241,.78);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;padding:8px;overflow:hidden}
.sigil-slot span{font-size:1.6rem;filter:grayscale(.85);opacity:.45}
.sigil-slot small{font-size:.68rem;line-height:1.05;color:var(--muted);font-weight:800}
.sigil-slot.owned{background:linear-gradient(145deg,rgba(255,246,218,.98),rgba(242,222,190,.96));border-color:rgba(158,103,57,.34);box-shadow:0 8px 22px rgba(102,61,39,.10)}
.sigil-slot.owned span{filter:none;opacity:1;animation:sigilGlow 2.4s ease-in-out infinite}
.sigil-slot.owned small{color:var(--ink)}
.sigil-slot.owned::after{content:"✓";position:absolute;right:6px;top:5px;width:18px;height:18px;border-radius:999px;background:rgba(92,115,65,.16);display:grid;place-items:center;font-size:.65rem;font-weight:900;color:#536a3d}
.sigil-note{font-size:.68rem;line-height:1.35;color:var(--muted);margin:7px 0 0}
@keyframes sigilGlow{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.06)}}
.player-stats .sigil-pill{background:rgba(183,126,65,.12);border-color:rgba(183,126,65,.22)}
.milestone-dialog{max-width:560px;background:radial-gradient(circle at top,rgba(255,244,206,.98),rgba(255,250,242,.99) 46%,rgba(249,237,222,.99))}
.milestone-dialog::backdrop{background:rgba(46,28,22,.55);backdrop-filter:blur(5px)}
.milestone-summary{margin:12px 0;padding:12px 14px;border-radius:16px;background:rgba(122,67,44,.075);font-size:.82rem;line-height:1.4;color:var(--muted)}
.milestone-summary strong{display:block;color:var(--ink);font-size:.88rem;margin-bottom:2px}
.milestone-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.milestone-choice{border:1px solid rgba(120,74,48,.18);border-radius:18px;background:rgba(255,255,255,.76);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:5px;min-height:122px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.milestone-choice:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 12px 28px rgba(92,55,34,.14);border-color:rgba(147,88,50,.34)}
.milestone-choice:disabled{opacity:.58;cursor:wait}
.milestone-choice>span{font-size:2rem}.milestone-choice strong{font-size:.82rem;color:var(--ink)}.milestone-choice small{font-size:.67rem;line-height:1.25;color:var(--muted)}
.special-fx-burst.fx-milestone .special-fx-main{animation:sigilBurst .85s cubic-bezier(.2,.8,.2,1)}
@keyframes sigilBurst{0%{transform:scale(.35) rotate(-16deg);opacity:.2}55%{transform:scale(1.28) rotate(7deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@media(max-width:640px){.milestone-choices{grid-template-columns:1fr}.milestone-choice{min-height:88px;display:grid;grid-template-columns:48px 1fr;grid-template-rows:auto auto;text-align:left}.milestone-choice>span{grid-row:1/3;font-size:1.8rem}.sigil-slot{min-height:64px;padding:6px}.sigil-slot small{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){.sigil-slot.owned span{animation:none}.milestone-choice{transition:none}}

/* FASE 11 · PROFILO PARTITA + PUNTEGGIO LIVE */
.live-profile{position:relative;padding:0 0 15px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.profile-topline{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.profile-topline .label{margin:0}
.profile-rank{display:inline-flex;align-items:center;justify-content:center;min-width:54px;padding:5px 8px;border-radius:999px;background:rgba(122,67,44,.08);border:1px solid rgba(122,67,44,.14);font-size:.68rem;font-weight:900;color:var(--primary)}
.live-profile.leader .profile-rank{background:rgba(229,180,87,.18);border-color:rgba(183,126,65,.30);color:#7a4d17}
.profile-hero{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid rgba(122,67,44,.13);border-radius:18px;background:linear-gradient(145deg,rgba(255,251,245,.98),rgba(247,234,219,.88));box-shadow:0 9px 24px rgba(76,43,30,.06)}
.live-profile.leader .profile-hero{border-color:rgba(188,132,59,.32);box-shadow:0 10px 28px rgba(161,107,49,.11)}
.profile-avatar{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;font-size:2rem;background:linear-gradient(145deg,#fff9ef,#eed5bb);border:1px solid rgba(122,67,44,.13);box-shadow:inset 0 1px 0 #fff}
.profile-identity{min-width:0}.profile-identity strong{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-identity small{display:block;color:var(--muted);font-size:.7rem;font-weight:750;margin-top:1px}.profile-identity span{display:block;color:var(--primary);font-size:.66rem;font-weight:850;margin-top:5px;line-height:1.25}
.profile-score{text-align:right;min-width:60px;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:end;justify-content:end;column-gap:3px}.profile-score small{grid-column:1/3;display:block;font-size:.52rem;letter-spacing:.07em;font-weight:900;color:var(--muted);white-space:nowrap}.profile-score b{font-size:1.75rem;line-height:1;color:var(--primary);letter-spacing:-.06em}.profile-score em{font-style:normal;font-size:.63rem;font-weight:900;color:var(--muted);padding-bottom:2px}
.live-profile.finished .profile-score b{font-size:1.9rem}.live-profile.finished .profile-hero{background:linear-gradient(145deg,#fff7db,#f2dfbf)}
.profile-progress{height:6px;background:rgba(122,67,44,.08);border-radius:999px;overflow:hidden;margin:8px 4px 0}.profile-progress i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#a8643d,#d19a61);transition:width .45s ease}
.profile-breakdown{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:9px}.profile-breakdown div{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:6px 7px;border-radius:10px;background:rgba(122,67,44,.045);border:1px solid rgba(122,67,44,.07);font-size:.61rem}.profile-breakdown span{color:var(--muted);font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-breakdown b{color:var(--ink);font-size:.66rem}
.profile-score-hint{margin:7px 2px 0;font-size:.62rem;line-height:1.35;color:var(--muted)}
.player-stats .live-score-mini{background:rgba(222,173,86,.15);border-color:rgba(183,126,65,.22);color:#80531c}
@media(max-width:1080px){.live-profile{grid-column:1/-1;padding:0 0 14px;margin:0 0 14px}.profile-breakdown{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.profile-hero{grid-template-columns:48px minmax(0,1fr) auto;padding:9px}.profile-avatar{width:48px;height:48px;font-size:1.75rem}.profile-score b{font-size:1.48rem}.profile-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-breakdown div{padding:6px;font-size:.58rem}.profile-position{font-size:.6rem}}
@media(prefers-reduced-motion:reduce){.profile-progress i{transition:none}}

/* FASE 12 · STABILITÀ, SYNC E RIENTRO SICURO */
.sync-btn{white-space:nowrap}
.resume-card{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:14px;padding:16px 18px;border:1px solid rgba(122,67,44,.18);border-radius:20px;background:linear-gradient(145deg,rgba(255,249,237,.99),rgba(239,223,204,.96));box-shadow:0 12px 30px rgba(76,43,30,.08)}
.resume-card.hidden{display:none!important}.resume-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:1.7rem;background:rgba(255,255,255,.75);border:1px solid rgba(122,67,44,.12)}
.resume-copy{min-width:0}.resume-copy small{display:block;font-size:.62rem;font-weight:900;letter-spacing:.08em;color:var(--muted)}.resume-copy strong{display:block;margin-top:2px;font-size:.96rem;color:var(--ink)}.resume-copy p{margin:4px 0 0;font-size:.72rem;line-height:1.4;color:var(--muted)}
.entry-card.resume-locked{opacity:.48;pointer-events:none;filter:saturate(.75)}
.trade-section.temporarily-blocked{opacity:.72}.trade-section.temporarily-blocked .trade-empty{border-style:dashed}
.status-pill.offline span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){.resume-card{grid-template-columns:44px 1fr}.resume-card .primary-btn{grid-column:1/-1}.resume-icon{width:44px;height:44px}.top-actions{gap:6px}.sync-btn,.update-btn,.sound-btn{font-size:.72rem;padding-left:9px;padding-right:9px}}
@media(max-width:520px){.sync-btn{font-size:0}.sync-btn::before{content:"↻";font-size:1rem}.update-btn{font-size:0}.update-btn::before{content:"🔄";font-size:1rem}.sound-btn{font-size:0}.sound-btn::first-letter{font-size:1rem}}

/* FASE 12.1 · uscita/abbandono sicuro */
.danger-btn{border-color:rgba(198,109,91,.35)!important;color:#9d493c!important;background:rgba(255,244,240,.92)!important}
.danger-btn:hover{background:rgba(255,234,227,.98)!important}
.resume-actions{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}.resume-actions .primary-btn,.resume-actions .secondary-btn{white-space:nowrap}
.danger-secondary{border-color:rgba(198,109,91,.34)!important;color:#9d493c!important;background:rgba(255,250,247,.72)!important}
@media(max-width:760px){.resume-actions{grid-column:1/-1;width:100%}.resume-actions>*{flex:1 1 180px}.resume-card .resume-actions .primary-btn{grid-column:auto}}


/* FASE 12.2 · eventi dinamici a ogni turno */
.board.events-shuffled{animation:boardEventShuffle .58s cubic-bezier(.2,.8,.2,1)}
.board.events-shuffled .tile-event{animation:eventIconShuffle .62s cubic-bezier(.2,.8,.2,1)}
@keyframes boardEventShuffle{0%{transform:scale(.992);filter:brightness(.97)}45%{transform:scale(1.008);filter:brightness(1.04)}100%{transform:scale(1);filter:none}}
@keyframes eventIconShuffle{0%{opacity:.18;transform:translateY(8px) rotate(-9deg) scale(.72)}55%{opacity:1;transform:translateY(-2px) rotate(4deg) scale(1.12)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.board.events-shuffled,.board.events-shuffled .tile-event{animation:none}}

/* FASE 12.3 · Fix Riflessi al Marshmallow */
.reaction-button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.reaction-button:active { transform: scale(.98); }
.reaction-button.reaction-ready { cursor: pointer; }
.reaction-skip { grid-column: 1 / -1; cursor: pointer; }