/* Météo Match — thème autonome BaroLand, sans dépendance externe. */
:root { font-family:Arial,Helvetica,sans-serif; color:#23384a; background:#fffcf4; }
* { box-sizing:border-box; }
body { margin:0; min-width:300px; }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.63; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
.app-shell { min-height:100vh; background:radial-gradient(ellipse at 50% 90px,#fff2d4 0,transparent 37%),#fffcf4; }
.top-accent { height:6px; background:linear-gradient(90deg,#ed7109,#ffa91c 43%,#ffcc40 70%,#ec7b13); }
.main-header { min-height:86px; display:flex; align-items:center; justify-content:space-between; gap:15px; padding:0 max(26px,calc((100vw - 1240px)/2)); background:#fffc; border-bottom:1px solid #f0e7d6; }
.brand { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.brand-emblem { width:47px; height:47px; display:grid; place-items:center; color:white; font-size:30px; border-radius:15px; background:linear-gradient(145deg,#ffb327,#ed750e); box-shadow:0 5px 0 #dc680e,0 8px 15px #ed80052c; }
.brand-text { font-weight:900; font-size:29px; color:#e27a0b; letter-spacing:-1.3px; line-height:1; }
.brand-text span { color:#263f57; }
.brand-text small { display:block; font-size:8px; color:#6b7b88; letter-spacing:1.1px; margin-top:7px; font-weight:800; }
.header-back { display:inline-flex; padding:11px 16px; border-radius:12px; background:white; border:1px solid #ece4d7; color:#637485; font-weight:800; font-size:13px; }
.header-back:hover { color:#d76b04; border-color:#f6c27b; }
.main-content { max-width:1170px; margin:auto; padding:36px 20px 30px; }
.hero-head { text-align:center; margin-bottom:28px; }
.eyebrow { display:inline-flex; color:#a96113; font-size:10px; font-weight:900; letter-spacing:1.5px; background:#fff4d9; border:1px solid #ffe0a5; border-radius:30px; padding:8px 15px; }
.hero-head h1 { font-size:clamp(42px,5.2vw,64px); font-weight:900; line-height:1.08; letter-spacing:-2.6px; margin:13px 0 7px; color:#233e56; }
.hero-head h1 span { color:#f18b12; }
.hero-head p { font-size:15px; color:#6c7c8b; }
.hero-michou .eyebrow { background:#fff1c3; border-color:#f5c765; color:#99560b; }
.hero-michou h1 { font-size:clamp(39px,5vw,61px); }
.michou-note { width:min(100%,610px); margin:20px auto 4px; padding:13px 19px; border:1px solid #f8cf82; border-radius:17px; background:linear-gradient(130deg,#fff9e5,#ffefc4); box-shadow:0 7px 22px #ed9a2420; color:#9b6122; font-size:13px; line-height:1.55; }
.michou-note strong { color:#795019; }
.game-layout { display:grid; grid-template-columns:minmax(0,690px) 330px; justify-content:center; align-items:start; gap:25px; }
.game-card,.ranking-card,.how-card,.shop-card { border:1px solid #f0e6d4; background:white; box-shadow:0 10px 40px #896a3920; }
.game-card { border-radius:23px; overflow:hidden; padding:24px 28px 18px; }
.score-strip { display:grid; grid-template-columns:1fr 1px 1.5fr 1px 1.2fr; align-items:center; padding:9px 10px 21px; gap:10px; }
.score-item { text-align:center; min-width:0; }
.score-item > span { display:block; color:#8d9aa3; font-size:10px; font-weight:900; letter-spacing:1.25px; margin-bottom:5px; }
.score-item strong { display:block; font-size:30px; font-weight:900; letter-spacing:-1px; color:#253e54; }
.score-item.primary strong { color:#ed8412; font-size:35px; }
.score-divider { height:38px; background:#e9edf0; }
.level-target { background:#faf8f3; border:1px solid #f3eee6; border-radius:13px; margin-bottom:19px; padding:14px 17px 16px; }
.target-copy { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:#506479; }
.target-copy span { font-weight:800; }
.target-copy strong { white-space:nowrap; color:#314b63; }
.progress-track { height:9px; border-radius:9px; background:#e5e9e9; overflow:hidden; margin-top:12px; }
.progress-fill { width:0; height:100%; border-radius:9px; background:linear-gradient(90deg,#ffbe38,#fa8c18); transition:width .3s ease; }
.play-guide { display:flex; align-items:center; gap:11px; margin:-3px 0 14px; padding:12px 13px; border:1px solid #f5c270; border-radius:13px; background:linear-gradient(110deg,#fff7df,#fff1c9); }
.guide-icon { font-size:22px; flex-shrink:0; }
.guide-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.guide-text strong { color:#6d4a18; font-size:13px; }
.guide-text span { color:#8b6429; font-size:12px; line-height:1.45; }
.hint-button { border:0; color:white; background:#eb870f; border-radius:9px; padding:10px 12px; font-size:12px; font-weight:900; flex-shrink:0; box-shadow:0 3px 0 #b86b11; }
.hint-button:hover { background:#d6790c; }
.board-wrap { width:min(100%,530px); margin:auto; position:relative; }
.board { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; padding:11px; border-radius:19px; background:#ffedd2; border:3px solid #f6d7a1; box-shadow:inset 0 3px 10px #d28b1a21,0 5px 0 #edcb94; aspect-ratio:1; }
.tile { position:relative; display:flex; justify-content:center; align-items:center; border:1px solid var(--tile-edge); background:linear-gradient(155deg,#fff,var(--tile-bg)); border-radius:12px; box-shadow:0 3px 0 var(--tile-edge),inset 0 2px 4px #fff8; min-width:0; min-height:0; padding:6%; touch-action:none; transition:transform .14s ease,box-shadow .14s ease; }
.tile:not(:disabled):hover { transform:translateY(-1px); filter:saturate(1.14); }
.tile.selected { outline:3px solid #ff9a0b; z-index:2; transform:scale(1.08); box-shadow:0 0 0 5px #fff0c7,0 6px 0 var(--tile-edge); }
.tile.dragging { z-index:7!important; cursor:grabbing; transition:none; outline:3px solid #f78c0a; box-shadow:0 8px 17px #5f3d2266,0 0 0 4px #fff1cf; filter:brightness(1.09); }
.tile.drag-target { z-index:5; outline:3px dashed #259d7f; box-shadow:inset 0 0 0 4px #b5ffdf,0 0 0 4px #78ddb2aa; filter:brightness(1.14); }
.tile.drag-neighbor { z-index:4; }
.tile-0 { --tile-bg:#c9eee8; --tile-edge:#9ad7ce; }
.tile-1 { --tile-bg:#ffe2db; --tile-edge:#f3beb2; }
.tile-2 { --tile-bg:#f4e3c7; --tile-edge:#dcc198; }
.tile-3 { --tile-bg:#d1edfc; --tile-edge:#acd8ed; }
.tile-4 { --tile-bg:#e7dcfb; --tile-edge:#cbb8ef; }
.tile-5 { --tile-bg:#e1f2d7; --tile-edge:#bfdcad; }
.tile-content { display:grid; place-items:center; width:100%; height:100%; animation:tile-pop .24s ease-out both; }
.tile svg { width:95%; height:95%; max-width:66px; max-height:66px; pointer-events:none; }
@keyframes tile-pop { from { transform:scale(.76); opacity:.65; } to { transform:scale(1); opacity:1; } }
.tile.hint-start,.tile.hint-end { z-index:1; outline:3px solid #ef8200; box-shadow:0 0 0 5px #ffcf76,0 4px 10px #bd710077; animation:hint-pulse 1.5s ease-in-out infinite; }
.tile.hint-start::after,.tile.hint-end::after { content:"1"; position:absolute; top:-7px; right:-7px; z-index:3; width:25px; height:25px; display:grid; place-items:center; border:2px solid white; border-radius:50%; background:#ef7800; color:white; font-weight:900; font-size:13px; }
.tile.hint-end::after { content:"2"; background:#d25f06; }
.tile.selected.hint-start,.tile.selected.hint-end { outline-color:#21876c; animation:none; box-shadow:0 0 0 5px #c2f9e2,0 6px 0 #68bc9a; }
.tile.invalid { z-index:2; animation:invalid-shake .32s ease 2; outline:3px solid #d13a35; box-shadow:0 0 0 4px #ffaaa9; }
.tile.match-burst { z-index:2; animation:match-glow .78s ease-in-out both; }
.tile.match-burst::before { content:"✦"; position:absolute; inset:-6px; z-index:3; color:#ffad12; text-align:center; font-size:33px; font-weight:900; text-shadow:0 0 5px white,0 0 15px #ffdb57; pointer-events:none; animation:match-star .85s ease-out both; }
@keyframes hint-pulse { 50% { box-shadow:0 0 0 7px #ffe4b4,0 5px 14px #dd7a1588; } }
@keyframes invalid-shake { 25% { transform:translateX(-3px); } 75% { transform:translateX(3px); } }
@keyframes match-glow { 35% { transform:scale(1.14) rotate(-3deg); filter:brightness(1.8); box-shadow:0 0 0 6px #ffdf70,0 0 22px 8px #ffba4280; } }
@keyframes match-star { 0% { opacity:0; transform:translateY(10px) scale(.25) rotate(-70deg); } 35% { opacity:1; transform:translateY(-5px) scale(1.3) rotate(15deg); } 100% { opacity:0; transform:translateY(-27px) scale(.65) rotate(70deg); } }
.board-inactive { filter:blur(3px) saturate(.7); pointer-events:none; }
.board-overlay { position:absolute; z-index:3; inset:0; border-radius:18px; background:#172f43d2; backdrop-filter:blur(4px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 28px; color:white; }
.board-overlay h2 { font-size:clamp(24px,3.2vw,35px); font-weight:900; margin:17px 0 9px; }
.board-overlay p { max-width:310px; font-size:14px; color:#eff5f4; line-height:1.55; }
.overlay-icon { width:80px; height:80px; border-radius:24px; display:grid; place-items:center; background:linear-gradient(145deg,#ffbf48,#ed8819); color:white; font-size:45px; box-shadow:0 8px 0 #cf6a0f,0 18px 20px #192f4544; transform:rotate(-8deg); }
.btn-primary { display:inline-flex; justify-content:center; align-items:center; gap:8px; border:0; border-radius:12px; background:linear-gradient(180deg,#ffb439,#ef8511); color:white; box-shadow:0 4px 0 #c96d08,0 10px 24px #f68b1f4a; font-size:14px; font-weight:900; padding:13px 20px; }
.btn-primary:hover { filter:brightness(1.07); }
.btn-primary.big { padding:16px 24px; margin-top:22px; font-size:15px; }
.text-action { margin-top:18px; color:white; background:transparent; border:0; text-decoration:underline; }
.score-celebration { position:absolute; left:50%; top:46%; width:min(82%,350px); z-index:5; pointer-events:none; transform:translate(-50%,-50%); animation:celebration-rise 1.92s both; isolation:isolate; }
.celebration-inner { position:relative; z-index:1; text-align:center; padding:16px 13px 17px; border-radius:21px; border:3px solid #fff7d0; background:linear-gradient(125deg,#fff6d2,#ffe39c); color:#ad5b06; box-shadow:0 9px 0 #dc8a22,0 19px 38px #7c40016e,0 0 0 7px #fff5bb80; }
.celebration-praise { display:block; color:#a85604; font-size:clamp(13px,2.5vw,19px); font-weight:900; }
.celebration-inner strong { display:block; font-size:clamp(35px,7vw,58px); font-weight:900; letter-spacing:-2px; line-height:1.2; color:#ed7d09; text-shadow:0 3px 0 white; margin:6px 0 2px; }
.celebration-inner strong small { font-size:19px; letter-spacing:0; }
.celebration-detail { display:block; font-weight:900; font-size:12px; color:#a56823; }
.celebration-great .celebration-inner { background:linear-gradient(125deg,#e6fcf5,#93e8cb); border-color:#f3fffb; box-shadow:0 9px 0 #31ac83,0 19px 38px #10553d66,0 0 0 7px #cdffec9c; }
.celebration-great .celebration-praise,.celebration-great .celebration-detail { color:#146d52; }
.celebration-great .celebration-inner strong { color:#079c75; }
.celebration-epic .celebration-inner { background:linear-gradient(125deg,#fce4ff,#d5b5ff); border-color:#fff5ff; box-shadow:0 9px 0 #9954d4,0 19px 38px #4d257566,0 0 0 7px #ecd4ffb5; }
.celebration-epic .celebration-praise,.celebration-epic .celebration-detail { color:#652c9f; }
.celebration-epic .celebration-inner strong { color:#9843de; }
.celebration-confetti { position:absolute; inset:0; z-index:0; }
.celebration-confetti i { position:absolute; width:12px; height:17px; top:50%; left:50%; border-radius:3px; background:#ffc52a; animation:celebration-confetti .95s .06s ease-out both; }
.celebration-confetti i:nth-child(3n) { background:#ff7c43; border-radius:50%; }
.celebration-confetti i:nth-child(3n + 1) { background:#45cfaf; }
.celebration-confetti i:nth-child(1) { --angle:0deg; }.celebration-confetti i:nth-child(2) { --angle:30deg; }.celebration-confetti i:nth-child(3) { --angle:60deg; }.celebration-confetti i:nth-child(4) { --angle:90deg; }.celebration-confetti i:nth-child(5) { --angle:120deg; }.celebration-confetti i:nth-child(6) { --angle:150deg; }.celebration-confetti i:nth-child(7) { --angle:180deg; }.celebration-confetti i:nth-child(8) { --angle:210deg; }.celebration-confetti i:nth-child(9) { --angle:240deg; }.celebration-confetti i:nth-child(10) { --angle:270deg; }.celebration-confetti i:nth-child(11) { --angle:300deg; }.celebration-confetti i:nth-child(12) { --angle:330deg; }
@keyframes celebration-rise { 0% { opacity:0; transform:translate(-50%,-39%) scale(.48) rotate(-6deg); } 12% { opacity:1; transform:translate(-50%,-50%) scale(1.11) rotate(2deg); } 22% { transform:translate(-50%,-50%) scale(1); } 76% { opacity:1; transform:translate(-50%,-54%) scale(1); } 100% { opacity:0; transform:translate(-50%,-70%) scale(.9); } }
@keyframes celebration-confetti { 0% { opacity:0; transform:rotate(var(--angle)) translateY(-10px) scale(.2); } 10% { opacity:1; } 100% { opacity:0; transform:rotate(var(--angle)) translateY(-190px) scale(.8); } }
.bottom-actions { margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tips { font-size:11px; color:#7a8a98; line-height:1.45; }
.tips b { color:#617282; }
.tool-actions { display:flex; gap:6px; }
.icon-button { width:35px; height:35px; border:1px solid #eee9df; background:#fbf9f4; border-radius:9px; color:#778695; font-weight:900; }
.icon-button:hover { color:#ed8412; }
.game-notice { background:#fff7e4; color:#a06116; text-align:center; font-size:12px; padding:9px 12px; border-radius:9px; margin-top:13px; font-weight:700; }
.save-row { margin-top:15px; padding-top:14px; border-top:1px dashed #e4e8e7; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:11px; color:#7d8d97; }
.save-row button { border:0; background:#fff3df; color:#dc7b0e; padding:9px 11px; border-radius:8px; white-space:nowrap; font-size:11px; font-weight:900; }
.sidebar { display:flex; flex-direction:column; gap:19px; }
.ranking-card,.how-card,.shop-card { border-radius:18px; overflow:hidden; }
.ranking-head { background:linear-gradient(115deg,#25445d,#173148); padding:23px 22px; color:white; display:flex; align-items:center; gap:13px; }
.ranking-crown { display:grid; place-items:center; width:47px; height:47px; border-radius:14px; background:#ffffff21; font-size:25px; }
.ranking-head div > span { color:#ffcf83; font-size:10px; letter-spacing:1.1px; font-weight:900; }
.ranking-head h2 { font-size:25px; margin:4px 0 0; line-height:1.1; }
.rank-list { padding:9px 19px 11px; }
.rank-list > div { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #f0f0ed; }
.rank-list > div:last-child { border:0; }
.rank-number { width:35px; text-align:center; font-size:23px; flex-shrink:0; }
.rank-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:800; color:#3a4e5e; }
.rank-name small { display:block; color:#a1aeb5; font-size:10px; font-weight:500; margin-top:4px; }
.rank-list b { font-size:13px; color:#d98115; }
.empty-rank { min-height:180px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; gap:9px; }
.empty-rank strong { color:#3d5365; font-size:13px; }
.empty-rank span { color:#92a0ad; font-size:12px; line-height:1.5; }
.ranking-foot { padding:13px 20px; border-top:1px solid #f0eee9; background:#fdfcf8; color:#8999a3; font-size:10px; display:flex; align-items:center; justify-content:space-between; }
.ranking-foot button { border:0; background:transparent; color:#e59c35; font-size:20px; }
.how-card { padding:20px 22px 17px; }
.how-card h2 { font-size:17px; color:#294356; margin:0 0 17px; }
.how-step { display:flex; gap:12px; padding-bottom:14px; }
.how-step > b { display:grid; place-items:center; width:27px; height:27px; flex-shrink:0; border-radius:9px; background:#fff2db; color:#e4911b; font-size:11px; }
.how-step p { margin:0; color:#748696; font-size:12px; line-height:1.55; }
.how-step p strong { color:#435a6e; }
.rules-link { border:0; background:transparent; font-size:12px; font-weight:900; color:#e48613; }
.shop-card { padding:24px 23px; background:linear-gradient(145deg,#fff6d9,#ffe3a6); border-color:#ffdfa0; }
.shop-card > span { font-size:10px; letter-spacing:1.1px; font-weight:900; color:#b57920; }
.shop-card h2 { font-size:22px; line-height:1.2; color:#634421; margin:12px 0 9px; }
.shop-card p { font-size:12px; color:#9d7138; line-height:1.6; }
.shop-card a { display:inline-block; color:white; background:#e9861a; border-radius:10px; font-size:12px; font-weight:900; margin-top:17px; padding:12px 14px; }
.instrument-key { margin:30px auto 0; text-align:center; }
.instrument-key > span { font-size:10px; font-weight:900; letter-spacing:1.5px; color:#b0a18b; }
.instrument-key > div { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:26px; margin-top:14px; }
.instrument-key > div > div { display:flex; align-items:center; gap:8px; }
.legend-symbol { width:39px; height:39px; display:grid; place-items:center; border:1px solid var(--tile-edge); border-radius:10px; background:var(--tile-bg); padding:3px; }
.legend-symbol svg { width:100%; height:100%; }
.instrument-key small { color:#798999; font-size:11px; font-weight:700; }
.site-footer { border-top:1px solid #eee6d9; background:white; padding:22px max(25px,calc((100vw - 1170px)/2)); display:flex; justify-content:space-between; gap:12px; color:#9a9fa6; font-size:11px; }
.site-footer a { color:#e88b19; font-weight:700; }
.modal { width:min(94vw,450px); max-height:92vh; overflow:auto; border:0; border-radius:24px; padding:28px; box-shadow:0 35px 80px #051c2a77; color:#253f55; }
.modal::backdrop { background:#142a3bd9; }
.modal-close { float:right; border:0; border-radius:9px; background:#f4f6f6; width:34px; height:34px; color:#7b8a94; font-size:25px; }
.modal-badge { display:grid; place-items:center; margin:0 auto 14px; width:53px; height:53px; border-radius:15px; background:#fff0cc; font-size:28px; }
.modal h2 { text-align:center; font-size:24px; line-height:1.15; }
.modal-intro { text-align:center; color:#8795a0; font-size:12px; line-height:1.5; }
.modal-score { display:flex; flex-direction:column; align-items:center; gap:4px; padding:15px; background:linear-gradient(125deg,#fff3da,#ffe0a7); border-radius:13px; color:#ac7625; margin:20px 0; }
.modal-score span { font-size:10px; letter-spacing:1px; font-weight:900; }
.modal-score strong { color:#db8315; font-size:30px; }
.modal form > label:not(.checkbox-line) { display:block; margin:15px 0 7px; font-size:12px; font-weight:800; }
.modal input[type=text],.modal input[type=email],.modal input:not([type]) { display:block; width:100%; height:44px; padding:0 13px; border:1px solid #dce3e5; border-radius:10px; outline:none; font-size:14px; }
.modal input:focus { border-color:#f3a94c; box-shadow:0 0 0 3px #fff1d9; }
.checkbox-line { display:flex; gap:11px; font-size:11px; line-height:1.55; color:#7b8b97; margin-top:18px; cursor:pointer; }
.checkbox-line input { width:16px; height:16px; flex-shrink:0; accent-color:#ef971b; }
.save-submit { width:100%; margin-top:22px; }
.privacy-note { margin-top:20px; color:#9aa6ae; font-size:10px; line-height:1.55; }
.rules-modal p,.rules-modal li { color:#698093; font-size:12px; line-height:1.65; }
.rules-modal ol { padding-left:20px; }
.rules-modal li { margin-bottom:7px; }
@media(max-width:930px) { .game-layout { grid-template-columns:minmax(0,590px); } .sidebar { display:grid; grid-template-columns:1fr 1fr; align-items:start; } .shop-card { grid-column:span 2; } }
@media(max-width:600px) {
  .main-header { padding:0 15px; min-height:70px; }
  .brand-emblem { width:39px; height:39px; font-size:23px; }
  .brand-text { font-size:23px; }
  .brand-text small { font-size:6.5px; letter-spacing:.6px; }
  .header-back { font-size:0; padding:10px; }
  .header-back::first-letter { font-size:17px; }
  .main-content { padding:27px 10px 25px; }
  .hero-head { margin-bottom:20px; }
  .hero-head h1 { font-size:43px; letter-spacing:-1.7px; }
  .hero-head p { max-width:310px; font-size:12px; line-height:1.5; margin:auto; }
  .hero-michou h1 { font-size:clamp(35px,9vw,43px); }
  .michou-note { max-width:350px; padding:11px 14px; font-size:12px; }
  .eyebrow { font-size:9px; letter-spacing:.8px; }
  .game-card { padding:13px 10px 17px; border-radius:16px; }
  .score-strip { gap:6px; padding:10px 0 18px; }
  .score-item > span { font-size:8px; letter-spacing:.6px; }
  .score-item strong,.score-item.primary strong { font-size:26px; }
  .level-target { margin-bottom:12px; padding:11px; }
  .target-copy { font-size:10px; gap:4px; }
  .target-copy strong { font-size:10px; }
  .play-guide { gap:7px; padding:9px 8px; margin-bottom:13px; }
  .guide-text strong { font-size:12px; }
  .guide-text span { font-size:10px; }
  .hint-button { padding:8px; font-size:11px; }
  .board { gap:4px; padding:6px; border-width:2px; border-radius:13px; }
  .tile { border-radius:7px; box-shadow:0 2px 0 var(--tile-edge),inset 0 1px 4px #fff8; padding:3%; }
  .tile.hint-start::after,.tile.hint-end::after { width:20px; height:20px; right:-5px; top:-5px; font-size:11px; }
  .tile.match-burst::before { font-size:22px; }
  .score-celebration { width:min(86%,290px); }
  .celebration-inner { padding:12px 10px 14px; border-radius:15px; }
  .celebration-praise { font-size:13px; }
  .celebration-inner strong { font-size:40px; }
  .celebration-inner strong small { font-size:15px; }
  .celebration-detail { font-size:10px; }
  .bottom-actions { margin-top:17px; }
  .tips { font-size:10px; }
  .save-row { flex-direction:column; align-items:stretch; text-align:center; }
  .sidebar { display:flex; }
  .instrument-key > div { gap:11px 17px; }
  .legend-symbol { width:32px; height:32px; }
  .site-footer { flex-direction:column; align-items:center; text-align:center; padding:19px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }