/* Controles, marcas y geometría de WhatPiece, dentro del panel de DragonWhatZ. */
/* Misma Roboto local que WhatPiece; solo la usan las letras de este juego. */
@font-face {
    font-family: 'Roboto'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/roboto/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto'; font-style: normal; font-weight: 400 700; font-display: swap;
    src: url('../fonts/roboto/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.db-sopa-page { padding-top: 23px; }
.db-sopa { width: min(620px, 100%); margin: 0 auto 28px; padding: 0 20px 18px; background: var(--db-surface); color: var(--db-text); border: 2px solid #233f4b; border-top: 4px solid var(--db-orange); border-radius: 13px; box-shadow: var(--db-shadow); }
.db-sopa-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 0; }
.db-sopa-bar img { width: 175px; height: auto; max-width: 55%; }
.db-sopa-timer { border: 1px solid #c7ad79; border-radius: 6px; padding: 5px 13px; background: #fff8e7; font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; }
/* Mantiene el mínimo legible en pantallas bajas, sin superar el ancho disponible. */
#sopa-board { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); grid-template-rows: repeat(14, minmax(0, 1fr)); width: 100%; max-width: min(530px, max(300px, calc(100svh - var(--sopa-extra, 240px))));
    aspect-ratio: 1; gap: 0; margin: auto; padding: 15px; position: relative; background: #fff9e8; border: 1px solid #cbb986; border-radius: 5px; user-select: none; touch-action: none; container-type: inline-size; }
#sopa-board[aria-busy="true"] { background: #eee4cc; }
#lines-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; border-radius: 4px; }
.highlight-pill { position: absolute; border-radius: 999px; transform-origin: center; pointer-events: none; }
.highlight-pill.found { background: var(--word-color); opacity: .8; }
.highlight-pill.current { background: #ffac4699; box-shadow: inset 0 0 0 1px #b75919; }
#sopa-board .cell { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; padding: 0; border: 0; background: transparent; border-radius: 50%; color: #263f4b; font-family: 'Roboto', sans-serif; font-size: clamp(9px, 5.6cqw, 24px); font-weight: 900; line-height: 1; cursor: pointer; position: relative; z-index: 2; }
#sopa-board .cell::before { content: attr(data-letter); }
#sopa-board .cell.selected-start { box-shadow: inset 0 0 0 2px #ae541a; }
#sopa-board .cell:focus-visible { outline: 2px solid var(--db-blue); outline-offset: -2px; }
.word-list-container { margin-top: 15px; padding-top: 12px; border-top: 1px solid #c7b988; text-align: center; }
.word-list-container h2 { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 0 10px; font-size: 18px; }
#sopaProgress { font-family: Arial, sans-serif; font-size: 12px; font-weight: 800; color: #6b7466; }
.word-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; list-style: none; padding: 0; margin: 0; }
.word-item { padding: 5px 11px; background: #fffcf3; border: 1px solid #c2b78e; border-radius: 20px; font-size: 12px; font-weight: 800; }
.word-item.found { text-decoration: line-through; }
.db-sopa-error { padding: 15px; text-align: center; }
.db-sopa-error[hidden], .db-sopa-page [hidden] { display: none !important; }
.db-sopa-victory .db-dragon-ball { width: 65px; height: 65px; }
.db-sopa-sync { text-align: center; font-size: 12px; }
/* Ranking: tarjeta propia bajo el resultado (db-paper-card), filas como en las páginas sociales. */
/* Resultado y ranking con el mismo ancho que el tablero (.db-sopa). */
.db-sopa-page :is(#winMsg, .db-sopa-ranking) { width: min(620px, 100%); max-width: none; }
.db-sopa-ranking .db-card-title { justify-content: center; margin-bottom: 4px; }
.db-sopa-ranking-note { margin: 0 0 12px; color: var(--db-muted); font-size: 12px; font-weight: 800; text-align: center; }
.db-sopa-ranking-rows { margin: 0; padding: 0; list-style: none; }
.db-sopa-ranking-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid #d8c9a3; font-size: 13px; font-weight: 800; }
.db-sopa-ranking-row:last-child { border-bottom: 0; }
.db-sopa-ranking-row.is-me { border-radius: 8px; background: #fbe3bd; }
.db-sopa-ranking-own { margin-top: 6px; border-top: 1px dashed #c4ad7c; }
.db-sopa-ranking-pos { flex: 0 0 30px; text-align: center; font-size: 18px; font-weight: 900; color: var(--db-orange-dark); }
.db-sopa-ranking .db-row-avatar { width: 30px; height: 30px; font-size: 16px; }
.db-sopa-ranking-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-sopa-ranking-streak { font-size: 12px; font-weight: 900; color: #b54a16; }
.db-sopa-ranking time { font-variant-numeric: tabular-nums; font-weight: 900; }
.db-sopa-ranking-empty { padding: 8px; text-align: center; color: var(--db-muted); }
.db-sopa-tutorial > h2 { margin: 0 32px 22px; color: var(--db-text); font-size: 30px; }
.db-sopa-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.db-sopa-help-card { text-align: center; padding: 12px 8px; border: 1px solid var(--tut-line); border-radius: 9px; background: var(--tut-card); color: var(--tut-text); }
.db-sopa-help-card h3 { margin: 12px 0 6px; font-size: 23px; color: var(--tut-gold); text-shadow: 1px 2px 0 var(--tut-title-shadow); }
.db-sopa-help-card p { margin: 0; font-size: 13px; line-height: 1.45; }
/* Demos del tutorial: la mano y la píldora se miden sobre la fila de letras, así cuadran con cualquier palabra y tamaño. */
.db-sopa-help-demo { display: grid; place-items: center; height: 88px; container-type: inline-size; border: 1px solid var(--tut-demo-line); border-radius: 8px; background: var(--tut-demo); }
.db-sopa-help-letters { --cell: min(28px, calc((100cqw - 22px) / 5)); position: relative; display: flex; gap: 3px; padding: 4px; background: #fff9e8; color: #263f4b; border: 1px solid #cbb986; border-radius: 6px; }
.db-sopa-help-letters > span { position: relative; z-index: 2; display: grid; place-items: center; width: var(--cell); height: calc(var(--cell) + 4px); border-radius: 999px; font: 900 calc(var(--cell) * .64)/1 Arial, sans-serif; }
.db-sopa-help-letters::before { content: ""; position: absolute; z-index: 1; top: 4px; left: 4px; width: var(--cell); height: calc(var(--cell) + 4px); border-radius: 999px; background: #ffac4699; box-shadow: inset 0 0 0 1px #b75919; opacity: 0; }
.db-sopa-help-hand { position: absolute; z-index: 3; font-style: normal; top: 58%; left: calc(4px + var(--cell) / 2); font-size: 25px; line-height: 1; transform: translateX(-42%); opacity: 0; pointer-events: none; filter: drop-shadow(1px 2px 1px #0000004d); }
.db-sopa-help-demo--drag .db-sopa-help-hand { animation: db-sopa-drag-hand 2.9s linear infinite; }
.db-sopa-help-demo--drag .db-sopa-help-letters::before { animation: db-sopa-drag-pill 2.9s linear infinite; }
.db-sopa-help-demo--tap .db-sopa-help-hand { animation: db-sopa-tap-hand 3.2s ease-in-out infinite; }
.db-sopa-help-demo--tap .db-sopa-help-letters::before { width: calc(100% - 8px); animation: db-sopa-tap-pill 3.2s linear infinite; }
.db-sopa-help-demo--tap .db-sopa-help-letters > span:first-child { animation: db-sopa-tap-start 3.2s linear infinite; }
.db-tut-section .db-sopa-help { max-width: 620px; margin: auto; }
@keyframes db-sopa-drag-hand {
    0% { left: calc(4px + var(--cell) / 2); opacity: 0; scale: 1; }
    8% { opacity: 1; scale: 1; }
    15% { left: calc(4px + var(--cell) / 2); scale: .85; }
    65% { left: calc(100% - 4px - var(--cell) / 2); scale: .85; }
    75% { left: calc(100% - 4px - var(--cell) / 2); scale: 1; opacity: 1; }
    90%, 100% { left: calc(100% - 4px - var(--cell) / 2); scale: 1; opacity: 0; }
}
@keyframes db-sopa-drag-pill {
    0%, 14% { width: var(--cell); opacity: 0; background: #ffac4699; box-shadow: inset 0 0 0 1px #b75919; }
    15% { width: var(--cell); opacity: 1; background: #ffac4699; box-shadow: inset 0 0 0 1px #b75919; }
    65%, 74% { width: calc(100% - 8px); opacity: 1; background: #ffac4699; box-shadow: inset 0 0 0 1px #b75919; }
    75%, 88% { width: calc(100% - 8px); opacity: .8; background: #7ccf7a; box-shadow: none; }
    96%, 100% { width: calc(100% - 8px); opacity: 0; background: #7ccf7a; box-shadow: none; }
}
@keyframes db-sopa-tap-hand {
    0% { left: calc(4px + var(--cell) / 2); opacity: 0; scale: 1; }
    8% { opacity: 1; scale: 1; }
    14% { left: calc(4px + var(--cell) / 2); scale: .85; }
    20% { left: calc(4px + var(--cell) / 2); scale: 1; translate: 0 0; }
    38% { translate: 0 -8px; }
    50% { left: calc(100% - 4px - var(--cell) / 2); scale: 1; translate: 0 0; }
    56% { left: calc(100% - 4px - var(--cell) / 2); scale: .85; }
    62% { left: calc(100% - 4px - var(--cell) / 2); scale: 1; opacity: 1; }
    80%, 100% { left: calc(100% - 4px - var(--cell) / 2); scale: 1; opacity: 0; }
}
@keyframes db-sopa-tap-start { 0%, 13% { box-shadow: none; } 14%, 55% { box-shadow: inset 0 0 0 2px #ae541a; } 56%, 100% { box-shadow: none; } }
@keyframes db-sopa-tap-pill { 0%, 55% { opacity: 0; } 56%, 88% { opacity: .8; background: #7ccf7a; } 96%, 100% { opacity: 0; background: #7ccf7a; } }
/* Como el resto de tutoriales, solo el ajuste del sitio detiene las demos: con la preferencia del
   sistema, common.css las acorta a 0,01 ms y aquí se les devuelve su duración. */
@media (prefers-reduced-motion: reduce) {
    html:not(.motion-reduce) :is(.db-sopa-help-hand, .db-sopa-help-letters > span), html:not(.motion-reduce) .db-sopa-help-letters::before { animation-duration: 3.2s !important; }
    html:not(.motion-reduce) .db-sopa-help-demo--drag .db-sopa-help-hand, html:not(.motion-reduce) .db-sopa-help-demo--drag .db-sopa-help-letters::before { animation-duration: 2.9s !important; }
}
html.motion-reduce .db-sopa-help * { animation: none !important; }
html.motion-reduce .db-sopa-help-letters::before { animation: none !important; opacity: .8; width: calc(100% - 8px); background: #7ccf7a; box-shadow: none; }
@media (max-width: 370px) {
    .db-sopa-help { gap: 8px; }
    .db-sopa-help-card h3 { font-size: 19px; }
    .db-sopa-help-card p { font-size: 11px; }
}
@media (max-width: 500px) {
    .db-sopa { --sopa-extra: 270px; padding: 0 12px 20px; }
    #sopa-board { padding: 8px; }
    #sopa-board .cell { font-size: clamp(9px, 5.4cqw, 16px); }
    .db-sopa-bar { padding: 9px 2px; }
    .word-list-container { margin-top: 10px; padding-top: 8px; }
    .word-list-container h2 { font-size: 16px; }
    .word-list { gap: 5px; }
    .word-item { font-size: 11px; padding: 4px 9px; }
}