#escena { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.flash { perspective: 1000px; width: min(100%, 360px); aspect-ratio: 3 / 4; cursor: pointer; outline: none; }
.flash-inner { position: relative; width: 100%; height: 100%; transition: transform 0.5s; transform-style: preserve-3d; }
.flash.flipped .flash-inner { transform: rotateY(180deg); }
.flash .face { border-radius: 18px; gap: 14px; padding: 16px; }
.flash .front-face { background: var(--front); }
.flash .back-face { background: var(--back); transform: rotateY(180deg); }
.flash .hanzi { font-size: 96px; }
.flash .hanzi.long { font-size: 64px; }
.flash .pinyin { font-size: 28px; }
.flash .meaning-text { font-size: 28px; line-height: 1.3; }
.answer { display: flex; gap: 12px; width: min(100%, 360px); }
.answer button { flex: 1; font-weight: 700; border: 0; }
.answer .bad { background: #e63946; color: #fff; }
.answer .good { background: var(--ok); color: #14213d; }
.range { display: flex; gap: 12px; }
.range label { flex: 1; }
input[type=number] { font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid #3a4a78; background: #14213d; color: var(--text); width: 100%; }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--text); }
@media (max-width: 480px) { .flash .hanzi { font-size: 80px; } }
.ad { width: min(100%, 360px); margin-top: 36px; text-align: center; min-height: 0; }
.ad small { display: block; color: var(--muted); font-size: 11px; margin-bottom: 4px; }
#escena .ad { width: min(100%, 728px); }
.consent { position: fixed; left: 0; right: 0; bottom: 0; background: #0d1730; border-top: 1px solid #3a4a78; padding: 14px 16px; z-index: 100; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; }
.consent p { margin: 0; max-width: 640px; font-size: 14px; color: var(--muted); }
.consent a { color: var(--accent); }
.consent div { display: flex; gap: 8px; flex-wrap: wrap; }