/* Aligne 4 (js/arcade/c4-ui.js) : jouet en bois scandinave. Plateau en bois clair, jetons peints corail et menthe,
   fond vert sauge, police Fredoka. Hors direction YourName : tout est sous .ag-c4 (écran du jeu) ou .ag-c4-* (salon). */
@font-face { font-family: 'C4'; src: url('../fonts/c4.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'C4 Body'; src: url('../fonts/c4-body.woff2') format('woff2'); font-weight: 100 500; font-display: swap; }

/* ---------- Salon : tuile, avatar de Bjørn, pastille de couleur ---------- */
.ag-c4-art .ag-c4-art-drop { animation: agC4Bob 1.6s ease-in-out infinite; }
@keyframes agC4Bob { 50% { transform: translateY(3px); } }
.ag-c4-bear { display: inline-block; }
.ag-c4-bear svg { display: block; width: 100%; height: 100%; }
.ag-c4-dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; background: #ff7f6e; border: 2px solid var(--ink, #3a2a22); }
.ag-c4-dot.is-p2 { background: #7fd6b6; }

/* ---------- Univers ---------- */
.ag-c4 {
  --fun-font: 'C4', 'C4 Body', sans-serif;
  --fun-bg: radial-gradient(#ffffff2e 1.3px, #0000 1.8px) 0 0 / 22px 22px, radial-gradient(130% 75% at 50% -5%, #d6e6cd 0%, #b3cca9 48%, #96b38e 100%);
  --fun-ink: #34473b; --fun-line: #5b4636; --fun-accent: #ff7f6e; --fun-card: #fbf5e8;
  --fun-btn: #ff8a78; --fun-btn-ink: #3a2a22; --fun-title: #fffaf0; --fun-shadow: #5b4636; --fun-good: #7fd6b6; --fun-bad: #ff7f6e;
  --coral: #ff7f6e; --coral-2: #e0574a; --coral-3: #ffb1a3; --mint: #7fd6b6; --mint-2: #48ad8b; --mint-3: #b8f0da;
  font-family: 'C4 Body', 'C4', sans-serif; font-synthesis: none;
}
.ag-c4 .ag-title { font-weight: 600; letter-spacing: .01em; }
.ag-c4 b, .ag-c4 strong { font-family: 'C4', sans-serif; font-weight: 600; }
.ag-c4 .fun-btn { font-weight: 600; font-size: 1rem; padding: 8px 16px; border-radius: 16px; }
.ag-c4 .fun-dialog { border-radius: 26px; background: linear-gradient(#fbf5e8, #f2e3c6); box-shadow: 0 7px 0 var(--fun-line), 0 18px 40px #2f45304d; }
.ag-c4 .fun-title { font-weight: 600; color: var(--coral); text-shadow: 2px 2px 0 var(--fun-line); }
.ag-c4 .fun-sub { font-weight: 400; }

.c4-wrap { position: relative; height: 100%; max-width: 860px; margin: 0 auto; padding: 2px 12px 14px; display: grid; gap: 8px;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: 'players' 'banner' 'stage' 'actions'; }
.c4-wrap > :not(.c4-deco) { position: relative; z-index: 1; }

/* Petits sapins en bois découpé, dans le fond */
.c4-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.c4-tree { position: absolute; bottom: 0; width: 46px; height: 74px; background: #6f9268; opacity: .45;
  clip-path: polygon(50% 0, 72% 30%, 62% 30%, 86% 58%, 74% 58%, 100% 82%, 56% 82%, 56% 100%, 44% 100%, 44% 82%, 0 82%, 26% 58%, 14% 58%, 38% 30%, 28% 30%); }
.c4-tree.a { left: 1%; }
.c4-tree.b { left: calc(1% + 36px); width: 32px; height: 52px; opacity: .32; }
.c4-tree.c { right: 2%; width: 40px; height: 62px; }

/* ---------- Joueurs ---------- */
.c4-players { grid-area: players; justify-self: center; width: min(100%, 620px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; padding-top: 14px; }
.c4-vs { font-family: var(--fun-font); font-weight: 600; font-size: .9rem; color: var(--fun-line); opacity: .65; }
.c4-pl { --ring: #ff7f6e99; position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 12px 5px 5px; border-radius: 999px;
  background: var(--fun-card); border: 3px solid var(--fun-line); box-shadow: 0 4px 0 var(--fun-line); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), box-shadow .3s, background .3s; }
.c4-pl.is-p2 { --ring: #7fd6b699; flex-direction: row-reverse; text-align: right; padding: 5px 5px 5px 12px; }
.c4-pl.is-turn { transform: translateY(-3px); background: #fff; box-shadow: 0 7px 0 var(--fun-line), 0 0 0 5px var(--ring); }
.c4-pl-av { position: relative; flex: none; display: grid; }
.c4-pl-av .fav-img { border-color: var(--fun-line); }
.c4-pl.is-p1 .c4-pl-av .c4-mini { right: auto; left: -5px; } /* côté extérieur : ne mord pas sur le texte */
.c4-pl-txt { display: grid; min-width: 0; line-height: 1.15; }
.c4-pl-txt > b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c4-pl-txt small { font-size: .74rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c4-pl-txt small b { font-size: .8rem; }
.c4-pl-txt .up { color: #2b8f6a; } .c4-pl-txt .down { color: #c9473a; }
.c4-pl-turn { position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(-3deg); padding: 1px 10px; border-radius: 999px; white-space: nowrap;
  font-family: var(--fun-font); font-weight: 600; font-style: normal; font-size: .72rem; color: #3a2a22; background: var(--coral); border: 2px solid var(--fun-line); animation: c4Tag 1.4s ease-in-out infinite; }
.c4-pl.is-p2 .c4-pl-turn { background: var(--mint); }

/* ---------- Bandeau : à qui le tour ---------- */
.c4-banner { grid-area: banner; justify-self: center; display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 5px 16px; border-radius: 16px;
  background: var(--fun-card); border: 3px solid var(--fun-line); box-shadow: 0 4px 0 var(--fun-line); font-family: var(--fun-font); font-weight: 600; font-size: clamp(1rem, 4.4vw, 1.25rem); white-space: nowrap; }
.c4-banner > span { overflow: hidden; text-overflow: ellipsis; }
.c4-banner.is-mine { animation: c4Nudge 1.8s ease-in-out infinite; }
.c4-banner.is-mine.is-p1 { background: #ffe0d9; } .c4-banner.is-mine.is-p2 { background: #d6f5e8; }
.c4-banner.is-wait { color: #34473bcc; }
.c4-banner.is-win { background: #fff0b3; } .c4-banner.is-loss { background: #eadfd2; } .c4-banner.is-draw { background: #e5eee0; }
.c4-dots { min-width: 1.2em; margin-left: -8px; }
.c4-dots::after { content: ''; animation: c4Dots 1.2s steps(1) infinite; }

/* ---------- Plateau ---------- */
.c4-stage { grid-area: stage; align-self: stretch; min-height: 0; display: grid; place-items: center; }
.c4-rig { --f: calc(var(--cell) * .2); position: relative; width: calc(var(--cell) * 7.4); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.c4-rig.is-wait { cursor: default; }
.c4-lane { position: relative; height: var(--cell); margin: 0 var(--f); }
.c4-board { position: relative; height: calc(var(--cell) * 6.4); border-radius: calc(var(--cell) * .44);
  box-shadow: 0 calc(var(--cell) * .09) 0 #6b4a3347, 0 calc(var(--cell) * .3) calc(var(--cell) * .5) #2f45302e; }
.c4-back { position: absolute; z-index: 0; inset: var(--f); border-radius: 8px; background: radial-gradient(circle at 50% 40%, #b88b59 0 24%, #8d6440 72%) 0 0 / var(--cell) var(--cell); }
.c4-toks { position: absolute; z-index: 1; inset: var(--f); }
.c4-face { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; will-change: transform; }
.c4-glow { position: absolute; z-index: 4; inset: var(--f); pointer-events: none; }
.c4-feet { display: flex; justify-content: space-between; height: calc(var(--cell) * .35); padding: 0 calc(var(--cell) * .55); }
.c4-feet i { width: calc(var(--cell) * 1.3); height: 100%; border-radius: 0 0 calc(var(--cell) * .2) calc(var(--cell) * .2); background: linear-gradient(#d9b47e, #c79b63); border: 3px solid #7a5536; border-top: 0; }

/* Jetons peints : sillon, brillance, ombre du bas */
.c4-tok { --tc: var(--coral); --tc2: var(--coral-2); --tc3: var(--coral-3);
  position: absolute; left: calc(var(--c, 0) * var(--cell) + var(--cell) * .08); top: calc(var(--r, 0) * var(--cell) + var(--cell) * .08);
  width: calc(var(--cell) * .84); height: calc(var(--cell) * .84); border-radius: 50%; font-style: normal;
  background:
    radial-gradient(circle at 33% 29%, #fffffff2 0 6%, #fff0 12%),
    radial-gradient(ellipse 30% 14% at 62% 80%, #ffffff47, #fff0),
    radial-gradient(circle, #0000 0 46%, var(--tc2) 48% 53%, #0000 55%),
    radial-gradient(circle at 42% 36%, var(--tc3), var(--tc) 52%, var(--tc2) 100%);
  box-shadow: inset 0 calc(var(--cell) * -.035) 0 #0000001f; }
.c4-tok.is-p2 { --tc: var(--mint); --tc2: var(--mint-2); --tc3: var(--mint-3); }
.c4-tok.is-drop { animation: c4Drop var(--dur, 500ms) both; }
.c4-board.is-over .c4-toks .c4-tok:not(.is-win) { filter: saturate(.5) brightness(.9); transition: filter .6s; }

/* Petit jeton (joueurs, bandeau) */
.c4-tok.c4-mini { --cell: 20px; position: relative; left: auto; top: auto; flex: none; width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--fun-line); }
.c4-pl-av .c4-mini { position: absolute; right: -5px; bottom: -4px; z-index: 1; width: 17px; height: 17px; box-shadow: 0 0 0 2px var(--fun-card), 0 0 0 4px var(--fun-line); }

/* Visée : jeton fantôme au-dessus de la colonne et lumière douce sur la colonne */
.c4-ghost { left: calc(var(--hc, 3) * var(--cell) + var(--cell) * .08); top: calc(var(--cell) * .08); opacity: 0; transform: translateY(-8px) scale(.9); pointer-events: none;
  transition: left .14s cubic-bezier(.3, 1.4, .5, 1), opacity .15s, transform .2s; }
.c4-rig.is-aiming .c4-ghost { opacity: .8; transform: none; animation: c4Bob 1.1s ease-in-out infinite; }
.c4-rig .c4-ghost.is-full { filter: grayscale(.85); opacity: .4; }
.c4-rig .c4-ghost.is-shake { animation: c4Shake .35s; }
.c4-hint { position: absolute; z-index: 3; top: calc(var(--f) * .5); bottom: calc(var(--f) * .5); left: calc(var(--f) + var(--hc, 3) * var(--cell) + var(--cell) * .05); width: calc(var(--cell) * .9);
  border-radius: calc(var(--cell) * .45); background: linear-gradient(#fff0, #fff8ee 25%, #fff8ee 75%, #fff0); mix-blend-mode: soft-light; opacity: 0; pointer-events: none;
  transition: opacity .15s, left .14s cubic-bezier(.3, 1.4, .5, 1); }
.c4-rig.is-aiming .c4-hint { opacity: .7; }

/* Victoire : les jetons gagnants s'illuminent, un trait de lumière les relie */
.c4-tok.c4-shine { box-shadow: 0 0 0 calc(var(--cell) * .045) #fff6d8, 0 0 0 calc(var(--cell) * .1) #ffc94a, 0 0 calc(var(--cell) * .45) calc(var(--cell) * .12) #ffd75ad9;
  animation: c4Pop .45s cubic-bezier(.3, 1.6, .5, 1) calc(var(--i) * .1s) both, c4Shine .8s ease-in-out calc(.45s + var(--i) * .1s) infinite alternate; }
.c4-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c4-line line { stroke: #fffbe9; stroke-width: 7; stroke-linecap: round; opacity: .9; stroke-dasharray: 1; stroke-dashoffset: 1; animation: c4Line .6s .5s ease-out forwards; }

/* ---------- Boutons et fin de partie ---------- */
.c4-actions { grid-area: actions; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 44px; }
.c4-end { display: grid; place-items: center; height: 74px; }
.c4-end .c4-tok { --cell: 76px; position: relative; left: auto; top: auto; animation: c4Hop 1.1s ease-in-out infinite; }
.c4-end.is-loss .c4-tok { animation: none; filter: saturate(.55); transform: rotate(14deg); }
.c4-end.is-draw .c4-tok { animation: c4Rock 1.6s ease-in-out infinite; }

/* Paysage peu haut (téléphone couché) : le plateau à gauche, le reste à droite */
@media (orientation: landscape) and (max-height: 600px) {
  .c4-wrap { grid-template-columns: minmax(0, 1fr) minmax(170px, 32%); grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: 'stage players' 'stage banner' 'stage actions'; align-items: start; }
  .c4-players { grid-template-columns: minmax(0, 1fr); padding-top: 12px; gap: 14px; }
  .c4-pl.is-p2 { flex-direction: row; text-align: left; padding: 5px 12px 5px 5px; }
  .c4-vs { display: none; }
  .c4-banner { font-size: 1rem; white-space: normal; }
  .c4-actions { justify-content: flex-start; }
}

@keyframes c4Drop {
  0% { transform: translateY(calc(var(--cell) * var(--fall) * -1)); animation-timing-function: cubic-bezier(.45, 0, 1, .9); }
  60% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, .35, 1); }
  76% { transform: translateY(calc(var(--cell) * -.15)); animation-timing-function: cubic-bezier(.6, 0, 1, 1); }
  88% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, .4, 1); }
  94% { transform: translateY(calc(var(--cell) * -.04)); animation-timing-function: ease-in; }
  100% { transform: translateY(0); }
}
@keyframes c4Bob { 50% { transform: translateY(calc(var(--cell) * -.08)); } }
@keyframes c4Shake { 25% { transform: translateX(-7px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-3px); } }
@keyframes c4Nudge { 50% { transform: translateY(-2px) rotate(-.6deg); } }
@keyframes c4Tag { 50% { transform: translateX(-50%) rotate(2deg) translateY(-2px); } }
@keyframes c4Dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
@keyframes c4Pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1.04); opacity: 1; } }
@keyframes c4Shine { from { transform: scale(1.04); filter: brightness(1); } to { transform: scale(1.12); filter: brightness(1.15); } }
@keyframes c4Line { to { stroke-dashoffset: 0; } }
@keyframes c4Hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-8deg); } 60% { transform: translateY(0); } }
@keyframes c4Rock { 50% { transform: rotate(-12deg); } }