[hidden]{display:none!important}
body{background:#10151b}
main{max-width:1120px}
.title-screen{min-height:calc(100vh - 48px);position:relative;display:flex;align-items:center;isolation:isolate;overflow:hidden;border:1px solid #97724a55;background:radial-gradient(ellipse at 78% 45%,#465d6933,transparent 50%),linear-gradient(120deg,#111922,#1b252b 60%,#11171e)}
.title-screen::after{content:"";position:absolute;inset:14px;z-index:-1;border:1px solid #bd915b33;pointer-events:none}
.title-content{padding:65px clamp(24px,5vw,70px);position:relative;z-index:2;width:58%}
.title-content .eyebrow{font-size:.64rem;letter-spacing:.24em}
#home-title{font-size:clamp(3rem,6.7vw,5.9rem);font-weight:400;line-height:.91;letter-spacing:-.045em;margin:30px 0;color:#f1e3c4;text-shadow:0 4px 35px #0007}
#home-title span,#home-title em{display:block}
#home-title em{font-weight:400;color:#c7a16b;white-space:nowrap;font-size:.74em;margin-top:12px}
.title-tagline{font:1rem/1.7 Georgia,serif;color:#aaada8;margin:32px 0}
.title-actions{width:min(260px,100%);display:grid;gap:12px}
.menu-primary,.menu-secondary,.menu-back{font:inherit;cursor:pointer}
.menu-primary,.menu-secondary{padding:15px 20px;font-size:.94rem;text-align:left;border:1px solid #c49b64}
.menu-primary{background:#d3af76;color:#171a1d;font-weight:650;display:flex;justify-content:space-between;gap:20px}
.menu-primary:hover{background:#efd29f}
.menu-secondary{background:#111a22aa;color:#d9c8a6}
.menu-secondary:hover{background:#263039}
button:disabled{opacity:.4;cursor:default}
.menu-back{background:transparent;border:0;color:#c7b697;padding:10px 0}
.menu-back:hover{color:#ffe5b7}
.cover-footer{font-size:.59rem;letter-spacing:.22em;margin-top:50px;color:#7e8a8c}
.mode-screen{max-width:900px;margin:30px auto}
.mode-screen>.eyebrow{margin-top:40px}
.mode-screen h2{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:400;margin:12px 0 35px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mode-card{padding:30px;border:1px solid #97724a;background:linear-gradient(145deg,#263039,#171f27);display:flex;flex-direction:column;align-items:stretch;gap:10px}
.mode-symbol{font:52px "Segoe UI Symbol",serif;color:#dfc18f}
.mode-card .eyebrow{font-size:.6rem;margin-bottom:0}
.mode-card h3{font:1.9rem Georgia,serif;margin:5px 0}
.mode-card p{color:#a9b0b1;font-size:.9rem;line-height:1.7}
.mode-card label{font-size:.8rem;color:#c0b69e}
select{background:#182029;color:#f1e3c4;border:1px solid #8b7353;padding:10px;font:inherit}
.mode-card .menu-primary,.mode-card .menu-secondary{margin-top:auto}
.mode-card select{margin-bottom:14px}
.unavailable{border-color:#7c7e7e44;background:#1a2026}
.unavailable .mode-symbol{color:#6d787d}
.soon{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#a5a69b;margin-bottom:30px}
#game-screen{max-width:960px;margin:auto}
.game-toolbar{display:flex;justify-content:space-between;margin:0 0 24px}
.game-title{font:2.5rem Georgia,serif;margin:12px 0 28px}
.options-dialog{width:min(94vw,540px);max-height:90vh;background:#1b232b;padding:26px}
.options-heading{display:flex;justify-content:space-between;align-items:start}
.options-heading .eyebrow{font-size:.6rem;margin-top:0}
.options-heading h2{font-size:2.2rem;font-weight:400;margin:10px 0}
.options-dialog h3{font:1rem Georgia,serif;color:#dec28f;margin:24px 0 12px}
.setting-row{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #9c784b33;padding:14px 0;font-size:.85rem}
.setting-row small{display:block;color:#929fa5;font-size:.72rem;line-height:1.5;margin-top:5px}
.setting-row select{min-width:110px}
.setting-row input{accent-color:#d3af76;width:18px;height:18px;flex-shrink:0}
.settings-note{color:#8f9b9f;font-size:.72rem;margin:24px 0 0}
.audio-controls{margin-bottom:0}
.no-idle .cell .character:not([data-travel]) .rig,.no-idle .cell .character:not([data-travel]) .weapon-arm{animation:none}
.no-coordinates .coord{display:none}
body[data-quality="low"] .character,body[data-quality="low"] .choreographed .character{filter:none}
body[data-quality="low"] .duel-prop:not(.essential){display:none}
body[data-quality="medium"] .duel-prop{filter:none}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #f1d29b;outline-offset:3px}
h1:focus,h2:focus{outline:none}
@media(max-width:690px){main{padding:12px}.title-screen{min-height:calc(100svh - 24px);align-items:flex-start}.title-content{width:100%;padding:40px 28px}.title-content h1{font-size:3.9rem!important}.title-tagline{margin:24px 0}.title-actions{width:200px}.cover-art{inset:0;opacity:.55;z-index:-1}.cover-footer{max-width:145px;line-height:1.8}.mode-grid{grid-template-columns:1fr}.mode-card{padding:24px}.mode-screen{margin:10px auto}.game-title{font-size:2rem}}



/* Portada ilustrada. La escena ocupa el encuadre completo. */
body:has(#home-screen:not([hidden])){background:#0b1323}
body:has(#home-screen:not([hidden])) main{max-width:none;padding:0}
.title-screen{min-height:100svh;border:0;background:#0b1323;align-items:center}
.title-screen::after{inset:22px;z-index:1;border-color:#d4b16a35}
.cover-art{inset:0;z-index:0;opacity:1}
.cover-illustration{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 46%;animation:war-pan 24s ease-in-out infinite alternate;transform-origin:67% 42%}
.cover-shade{position:absolute;inset:0;background:linear-gradient(90deg,#080f1ff0 0%,#0c1425ca 24%,#0d152b45 48%,transparent 73%),linear-gradient(0deg,#070d1ee6,transparent 28%,transparent 75%,#0b102044)}
.cover-mist{position:absolute;inset:25% -15% -15%;background:radial-gradient(ellipse at 35% 75%,#bcd1e51a,transparent 45%),radial-gradient(ellipse at 80% 90%,#fac68d17,transparent 40%);animation:war-mist 15s ease-in-out infinite alternate}
.title-content{width:53%;max-width:770px;padding:80px clamp(28px,6.8vw,120px);z-index:2}
.title-content>.eyebrow{font-size:.68rem;letter-spacing:.3em;color:#cbb88c;line-height:1.8}
#home-title{font-size:clamp(4.1rem,7.3vw,8.8rem);text-shadow:0 3px 24px #0009;letter-spacing:-.055em;margin:28px 0 24px;color:#fff3d9}
#home-title span{font-variant:small-caps}
#home-title em{font-size:.67em;letter-spacing:-.04em;color:#e9c792;margin-top:14px}
.title-tagline{font:clamp(.95rem,1.2vw,1.12rem)/1.8 Georgia,serif;color:#d5d5d3;text-shadow:0 1px 5px #000}
.title-actions{width:min(290px,100%);margin-top:34px}
.title-actions .menu-primary{background:linear-gradient(110deg,#f3d9a6,#c9a36b);border-color:#f5d9a3;padding:17px 22px;box-shadow:0 4px 30px #05091066;transition:transform .2s,box-shadow .2s}
.title-actions .menu-primary:hover{transform:translateX(5px);box-shadow:0 4px 30px #d8b47a33}
.title-actions .menu-secondary{background:#0d1726ab;backdrop-filter:blur(7px);border-color:#bda37580;padding:15px 22px;color:#ecdec5}
.title-actions .menu-secondary:hover{background:#344055b3}
.cover-footer{color:#b3b1a5;margin-top:45px;font-size:.6rem;letter-spacing:.26em}
.cover-crest{display:block;width:66px;height:40px;margin-bottom:32px;color:#e8c98d;filter:drop-shadow(0 2px 8px #03070f)}
.cover-embers{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cover-embers i{position:absolute;bottom:-10px;left:var(--x);width:3px;height:3px;border-radius:50%;background:#ffca79;box-shadow:0 0 9px 2px #ef924755;animation:war-ember var(--duration) var(--delay) linear infinite}
.cover-embers i:nth-child(3n){background:#c2eaff;box-shadow:0 0 10px #8ccfff}
@keyframes war-pan{from{transform:scale(1.025) translateX(.3%)}to{transform:scale(1.075) translateX(-.6%)}}
@keyframes war-mist{from{transform:translate(-3%,1%);opacity:.5}to{transform:translate(4%,-3%);opacity:1}}
@keyframes war-ember{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}75%{opacity:.5}100%{transform:translate(var(--drift),-78vh);opacity:0}}
body[data-quality="low"] .cover-illustration,body[data-quality="low"] .cover-mist,body[data-quality="low"] .cover-embers i{animation:none}
body[data-quality="low"] .cover-embers{display:none}
@media(max-width:900px) and (min-width:691px){.title-content{width:58%;padding-left:7vw;padding-right:0}.cover-illustration{object-position:62% center}.cover-shade{background:linear-gradient(90deg,#080f1ff0,#0a1328aa 35%,transparent 78%)}}
@media(max-width:690px){
 .title-screen{align-items:flex-end;min-height:100svh}
 .title-screen::after{inset:12px}
 .cover-art{inset:0;z-index:0;opacity:1}
 .cover-illustration{object-position:69% 0;object-fit:cover}
 .cover-shade{background:linear-gradient(0deg,#080f20 0%,#0b1424f2 27%,#0c16269c 53%,transparent 82%)}
 .title-content{width:100%;padding:240px 30px 35px;max-width:none}
 .cover-crest{width:48px;height:30px;margin-bottom:16px}
 .title-content>.eyebrow{font-size:.57rem}
 .title-content #home-title{font-size:clamp(3.45rem,12vw,5rem)!important;margin:16px 0 18px}
 #home-title em{margin-top:8px}
 .title-tagline{font-size:.9rem;margin:18px 0}
 .title-actions{width:min(320px,100%);margin-top:24px}
 .cover-footer{max-width:none;margin:28px 0 0;font-size:.53rem}
}
@media(prefers-reduced-motion:reduce){.cover-illustration,.cover-mist,.cover-embers i{animation:none}.cover-embers{display:none}}

@media(max-width:690px){.cover-illustration{width:180%;height:auto;left:-65%;right:auto;bottom:auto;object-fit:contain;transform-origin:65% 30%}}
.music-panel{border-top:1px solid #9c784b44;border-bottom:1px solid #9c784b44;padding:18px 0;margin:20px 0}
.music-panel>label{font-size:.8rem;color:#d3c4a4}
#music-track{display:block;width:100%;margin:8px 0 12px}
.music-actions{display:flex;flex-wrap:wrap;gap:4px}
.music-actions button.action{font-size:.75rem;padding:8px 10px;margin:0}
.music-level{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:.75rem}
#music-volume{width:95px;accent-color:#e5b873}
.music-panel .settings-note{margin:10px 0 0;font-size:.65rem}
/* La notación del ajedrez mantiene su orientación en todos los idiomas. */
#board{direction:ltr}
#log{unicode-bidi:plaintext}
#language-select{max-width:210px;min-width:140px}
html[dir="rtl"] .title-screen{direction:ltr}
html[dir="rtl"] .title-content{direction:rtl;text-align:right}
html[dir="rtl"] .title-actions .menu-primary:hover{transform:translateX(-5px)}
html[lang="ar"] #home-title,html[lang="hi"] #home-title{line-height:1.25;font-family:"Nirmala UI","Segoe UI",serif}
html[lang="ar"] #home-title{letter-spacing:0}
html[lang="fr"] #home-title{font-size:clamp(3.2rem,6vw,7.2rem)}
html[lang="zh"] #home-title{line-height:1.12}
html[lang="hi"] .cover-footer,html[lang="ar"] .cover-footer{letter-spacing:0;line-height:1.7}
.music-actions button.action,.menu-primary,.menu-secondary{overflow-wrap:anywhere}
@media(max-width:690px){html[lang="fr"] .title-content #home-title{font-size:clamp(2.8rem,10.2vw,4.3rem)!important}.setting-row{gap:12px}#language-select{min-width:125px;max-width:165px}}
.mobile-turn{display:none}
@media(pointer:coarse){
 button,select{touch-action:manipulation}
 .menu-back,.action,.menu-primary,.menu-secondary,select{min-height:48px}
 input[type="range"]{min-height:40px}
 .cell{min-height:0;min-width:0;-webkit-tap-highlight-color:transparent}
 .title-actions{gap:14px}
 .options-dialog{max-height:calc(100svh - 32px);overflow-y:auto}
 .setting-row{min-height:54px}
}
@media(max-width:690px){
 .mobile-turn{display:block;margin:0 0 12px;padding:11px 14px;border:1px solid #9c784b66;background:#1b232b;color:#e9d5af;font-size:.9rem}
 .game-toolbar{position:sticky;top:0;z-index:5;margin-bottom:12px;background:#10151bf5;gap:18px}
 .game-title{font-size:1.65rem;margin:10px 0 16px}
 #board{width:100%;aspect-ratio:1}
 .layout{gap:14px}
 .music-panel .music-actions{gap:8px}
 .music-actions button.action{min-height:44px;font-size:.8rem}
}
@media(orientation:landscape) and (max-height:500px){
 #game-screen .game-title,#game-screen>.eyebrow{display:none}
 .game-toolbar{margin-bottom:8px}
 .mobile-turn{padding:6px 10px;margin-bottom:8px}
 #game-screen .layout{display:grid;grid-template-columns:minmax(220px,calc(100svh - 115px)) minmax(200px,1fr);gap:14px}
 #game-screen .panel{max-height:calc(100svh - 100px);overflow:auto;padding:12px}
}
.cover-art{position:absolute;overflow:hidden;pointer-events:none}
#undo-dialog{width:min(94vw,480px)}
#undo-dialog h2{font:2rem Georgia,serif;margin:14px 0}
#undo-dialog p{font-size:.9rem;line-height:1.7}
#undo-status{color:#e4c38d}
.undo-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.profile-badge{font-size:.7rem;color:#dec797;display:grid;gap:7px;max-width:240px;margin:18px 0}
.profile-badge progress{width:100%;height:5px;border:0;accent-color:#d5af6e}
.profile-badge progress::-webkit-progress-bar{background:#35404a;border-radius:5px}
.profile-badge progress::-webkit-progress-value{background:linear-gradient(90deg,#9f7847,#ecd29b);border-radius:5px}
#game-screen>.profile-badge{max-width:100%;display:flex;align-items:center;gap:14px}
#game-screen>.profile-badge progress{max-width:150px}
.shop-dialog{width:min(96vw,1000px);max-height:92svh;overflow:auto;padding:0 26px 26px;background:#171f29}
.shop-header{display:flex;justify-content:space-between;align-items:center;gap:15px;position:sticky;top:0;z-index:6;background:#171f29f5;padding:20px 0;border-bottom:1px solid #947d5544}
.shop-header .eyebrow{margin:0;font-size:.6rem}
.shop-header h2{font:clamp(1.6rem,4vw,2.5rem) Georgia,serif;margin:8px 0}
.shop-header button{font-size:.8rem;max-width:100px;text-align:end}
.shop-account{display:flex;align-items:center;justify-content:space-between;gap:20px}
#wallet-balance{font-size:1.2rem;color:#ade0ec}
.shop-tabs{display:flex;gap:12px;padding:10px 0}
.shop-tabs button{font:inherit;padding:12px 20px;border:1px solid #827357;background:transparent;color:#dccba7;cursor:pointer}
.shop-tabs button[aria-pressed="true"]{background:#cfad76;color:#151b22}
#collection-status{font-size:.85rem;color:#e6c889;min-height:1em}
.shop-note,.billing-notice{font-size:.8rem;color:#aebbc1;line-height:1.7}
.billing-notice{border:1px solid #8c704a;padding:14px}
.skin-preview{padding:20px;border:1px solid #7d704f55;background:linear-gradient(120deg,#273644,#20262e);margin:18px 0}
.skin-preview h3{font:1.6rem Georgia,serif;margin:0 0 8px;color:#eddbba}
.skin-preview p{font-size:.8rem;color:#bac6ca;line-height:1.6;margin:0 0 18px}
.skin-roster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:690px;margin:auto}
.skin-roster figure{margin:0;text-align:center}
.skin-roster figcaption{font-size:.65rem;color:#c5c8c0;margin-top:6px}
.skin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.skin-card{border:1px solid #57707a55;background:#202b35;padding:14px;display:flex;flex-direction:column;align-items:stretch}
.premium-card{border-color:#bc935d88;background:radial-gradient(ellipse at 50% 10%,#675b4233,transparent 70%),#202731}
.skin-card-art{display:flex;justify-content:center;align-items:end;background:none;border:0;padding:0;cursor:pointer;min-height:100px}
.skin-card-art .character{width:48%;max-width:110px}
.skin-card h4{font:1.04rem Georgia,serif;color:#e7d2ae;margin:14px 0 7px}
.skin-card p{font-size:.75rem;color:#aebec7;min-height:2.2em;line-height:1.5}
.skin-card .action{margin:auto 0 0;font-size:.74rem}
.collection-skin.premium{filter:drop-shadow(0 0 4px #d0d5e338)}
.sculpted.crystal{filter:drop-shadow(0 0 5px #96c9ec66)}
.diamond-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.diamond-card{border:1px solid #6e7d8c66;background:linear-gradient(140deg,#253745,#1a2630);padding:22px}
.diamond-card h4{font-size:1.9rem;color:#bae8f0;margin:0}
.diamond-card p{font-size:.8rem;line-height:1.6;color:#b5c4cc}
.diamond-card .diamond-price{font-size:1.2rem;color:#f0dbb8}
.diamond-card .action{font-size:.8rem;width:100%;margin:15px 0 0}
.welcome-pack{border-color:#e1bc7a}
.game-toolbar{flex-wrap:wrap}
@media(max-width:690px){
 .shop-dialog{padding:0 16px 20px}
 .shop-header{padding:14px 0}
 .shop-header button{font-size:.7rem}
 .skin-grid,.diamond-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .skin-card{padding:10px}
 .skin-card-art{min-height:75px}
 .skin-card-art .character{width:50%}
 .skin-card h4{font-size:.92rem}
 .skin-card .action{font-size:.65rem;padding:9px 6px}
 .skin-roster{gap:4px}
 .skin-roster figcaption{font-size:.5rem}
 .skin-preview{padding:14px 8px}
 .diamond-card{padding:15px}
 .diamond-card h4{font-size:1.5rem}
 .title-content{padding-top:190px}
 .cover-crest{display:none}
 .title-actions{gap:10px}
 .title-content .profile-badge{margin:14px 0}
 .game-toolbar .menu-back{font-size:.8rem}
}


.skin-preview{scroll-margin-top:130px}

.profile-progress{font-size:.62rem;line-height:1.4;color:#b8c6cc}
#game-screen>.profile-badge{flex-wrap:wrap}

/* Online: un único selector de reglas y búsqueda compartida. */
.online-screen{max-width:920px;min-height:80svh;padding:clamp(26px,6vw,72px)}
.online-screen>h2{font:clamp(2.2rem,6vw,4.3rem) Georgia,serif;color:#efdab5;margin:24px 0}
.online-intro{max-width:620px;color:#b6c2cc;line-height:1.8;font-size:1rem}
.online-rules{margin:36px 0;padding:26px;border:1px solid #9c784b66;background:linear-gradient(120deg,#26333f,#18212b)}
.online-rules label{display:block;font-size:.8rem;color:#ddc89f;letter-spacing:.05em;margin-bottom:16px}
.online-rules select{width:100%;font-size:1.05rem;min-height:56px;padding:10px 14px;border:1px solid #ac925f;background:#15202c;color:#f3dfbd}
.online-rules .menu-primary{width:100%;margin-top:22px}
#online-error{font-size:.9rem;color:#efc38f;line-height:1.7}
.queue-panel{text-align:center;padding:30px 20px}
.queue-panel h3{font:2rem Georgia,serif;color:#efd9b4}
.queue-panel>p{color:#b9c7ce;line-height:1.8}
.queue-panel .menu-secondary{width:100%;max-width:350px;margin:24px auto 0}
.search-orbit{width:150px;height:150px;margin:20px auto 40px;position:relative;display:grid;place-items:center;border:1px solid #b8985d44;border-radius:50%;box-shadow:0 0 70px #c49a5522}
.search-orbit span{font-size:4.2rem;color:#edd39c}
.search-orbit i{position:absolute;inset:-6px;border:2px solid transparent;border-top-color:#e9c78a;border-radius:50%;animation:search-spin 2.7s linear infinite}
@keyframes search-spin{to{transform:rotate(360deg)}}
.online-clocks{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:20px;padding:16px 20px;margin-bottom:18px;border:1px solid #ac8c5955;background:#17232e}
.online-clocks>div{display:grid;gap:7px}
.online-clocks>div:last-child{text-align:end}
.online-clocks span{font-size:.72rem;color:#b9c6c9}
.online-clocks strong{font-size:2rem;font-variant-numeric:tabular-nums;color:#ecd6ae;font-weight:500}
.clock-meta{text-align:center;font-size:.72rem;color:#b8c8cc;line-height:1.6}
.clock-meta p{margin:0}
#board.flipped{transform:rotate(180deg)}
#board.flipped .cell{transform:rotate(180deg)}
#online-clocks[hidden],#queue-panel[hidden],#online-rules[hidden]{display:none}
@media(max-width:690px){
 .online-screen{padding:20px 16px}.online-rules{padding:20px 16px}
 .online-screen>h2{font-size:2.4rem}.online-intro{font-size:.88rem}
 .online-clocks{gap:10px;padding:12px;grid-template-columns:1fr 1fr}
 .clock-meta{grid-column:1/-1;grid-row:2}
 .online-clocks>div:last-child{grid-column:2;grid-row:1}
 .online-clocks strong{font-size:1.7rem}
}
@media(prefers-reduced-motion:reduce){.search-orbit i{animation:none}}

.local-connection{border:1px solid #88714e;padding:20px;margin:20px 0;background:#17212a}
.local-connection h3{margin-top:0}
.local-connection label{display:block;margin:12px 0 6px}
#local-address{display:block;width:100%;min-height:48px;padding:12px;background:#101920;border:1px solid #a2865d;color:#f5e9d0;font:inherit}
#local-connect{margin-top:12px}
#local-address:focus-visible{outline:2px solid #e5b873}

.online-rules .clock-choice{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px;border:1px solid #ac925f;background:#15202c;font-size:1.05rem;letter-spacing:0;cursor:pointer}
#online-clock{appearance:none;position:relative;flex:0 0 52px;width:52px;height:28px;margin:0;border:1px solid #8f9ca7;border-radius:20px;background:#394452;cursor:pointer}
#online-clock::before{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#e1e6ea;transition:transform .18s ease}
#online-clock:checked{background:#c3a269;border-color:#dfc18c}
#online-clock:checked::before{transform:translateX(24px);background:#15202c}
#online-clock:focus-visible{outline:3px solid #ffe179;outline-offset:4px}
#online-clock:disabled{opacity:.6;cursor:wait}
.online-clocks.untimed{grid-template-columns:1fr}
.online-clocks.untimed>div:first-child,.online-clocks.untimed>div:last-child{display:none}
.online-clocks.untimed .clock-meta{grid-column:1;grid-row:1}
@media(prefers-reduced-motion:reduce){#online-clock::before{transition:none}}