/* =============================================================
   Thème sombre — Maxyoo28.fr
   Actif via la classe .mx-dark posée sur <html> par theme.js :
   - aucun choix enregistré  -> suit prefers-color-scheme (système)
   - choix "dark" / "light"  -> forcé (localStorage 'mx:theme')
   Les règles ci-dessous sont préfixées .mx-dark et priment donc
   sur le thème clair du template (Alpha by HTML5 UP).
   ============================================================= */

/* ---------- Sélecteur de thème : bouton rond qui déploie 3 choix au survol ---------- */
#mx-theme{
	position:fixed; right:16px; bottom:16px; z-index:9999;
	font-family:"Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#mx-theme *{ box-sizing:border-box; }

.mx-theme-current{
	width:44px; height:44px; padding:0; margin:0; border:0; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background:#444; color:#fff; cursor:pointer; line-height:1;
	box-shadow:0 2px 12px rgba(0,0,0,.28);
	transition:background-color .2s ease, transform .12s ease;
}
.mx-theme-current:hover{ background:#5a5a5a; }
.mx-theme-current:active{ transform:scale(.92); }
.mx-theme-current svg{ width:20px; height:20px; fill:currentColor; display:block; }

.mx-theme-menu{
	position:absolute; right:0; bottom:calc(100% + 10px);
	display:flex; flex-direction:column; gap:2px;
	min-width:170px; padding:6px; margin:0;
	background:#fff; border-radius:10px;
	box-shadow:0 6px 24px rgba(0,0,0,.20);
	opacity:0; transform:translateY(6px); pointer-events:none;
	transition:opacity .16s ease, transform .16s ease;
}
.mx-theme-menu::after{ /* pont invisible pour ne pas perdre le survol entre menu et bouton */
	content:''; position:absolute; left:0; right:0; top:100%; height:12px;
}
#mx-theme:hover .mx-theme-menu,
#mx-theme:focus-within .mx-theme-menu,
#mx-theme.is-open .mx-theme-menu{
	opacity:1; transform:none; pointer-events:auto;
}

.mx-theme-opt{
	display:flex; align-items:center; gap:10px;
	width:100%; padding:8px 10px; margin:0; border:0; border-radius:7px;
	background:transparent; color:#444; cursor:pointer;
	font:inherit; font-size:14px; line-height:1; text-align:left; white-space:nowrap;
}
.mx-theme-opt svg{ width:17px; height:17px; fill:currentColor; flex:none; }
.mx-theme-opt:hover{ background:#f0f0f0; }
.mx-theme-opt[aria-checked="true"]{ background:#eef4fb; color:#1f6f9c; font-weight:600; }

@media screen and (max-width:736px){
	#mx-theme{ right:12px; bottom:12px; }
	.mx-theme-current{ width:40px; height:40px; }
}

/* ============================ Palette sombre ============================ */
html.mx-dark{ color-scheme:dark; }

.mx-dark body{ background:#15171b; }
.mx-dark body,
.mx-dark input,
.mx-dark select,
.mx-dark textarea{ color:#b9bec7; }

.mx-dark h1, .mx-dark h2, .mx-dark h3,
.mx-dark h4, .mx-dark h5, .mx-dark h6,
.mx-dark strong, .mx-dark b{ color:#e8eaef; }

.mx-dark hr{ border-bottom-color:#2b2f37; }
.mx-dark blockquote{ border-left-color:#2b2f37; }
.mx-dark pre,
.mx-dark code{ background:#20232a; border-color:#333844; }

/* Boîtes / cartes */
.mx-dark .box{ background:#1c1f25; box-shadow:0 2px 0 0 #2b2f37; }
.mx-dark .box.features .features-row{ border-top-color:#2b2f37; }
.mx-dark .box.features .features-row section:nth-child(2n):before{ background:#2b2f37; }

/* Formulaires */
.mx-dark input[type="text"],
.mx-dark input[type="password"],
.mx-dark input[type="email"],
.mx-dark input[type="search"],
.mx-dark select,
.mx-dark textarea{ background-color:#20232a; border-color:#333844; }
.mx-dark select option{ background-color:#20232a; color:#b9bec7; }

/* Tableaux */
.mx-dark table tbody tr{ border-color:#2b2f37; }
.mx-dark table tbody tr:nth-child(2n + 1){ background-color:#1c1f25; }
.mx-dark table th{ color:#e8eaef; }
.mx-dark table thead{ border-bottom-color:#3a3f4a; }
.mx-dark table tfoot{ border-top-color:#3a3f4a; }
.mx-dark table.alt tbody tr td{ border-color:#2b2f37; }

/* Entête / pied */
.mx-dark #header{ background:#101216; color:#aeb4bd; }
.mx-dark #footer{ background:#101216; }
.mx-dark #footer .copyright{ color:#8b909a; }
.mx-dark #footer .copyright li{ border-left-color:#333844; }
.mx-dark #main > header p{ border-top-color:#2b2f37; color:#b9bec7; }

/* Bannière d'accueil : voile sombre appliqué directement en couche de
   background (pas de pseudo-élément positionné, pour ne pas casser le
   chevauchement de #main sur la bannière). */
.mx-dark #banner{
	background-color:#101216;
	background-image:
		linear-gradient(rgba(12,14,18,.5), rgba(12,14,18,.5)),
		url("./images/banner-bg.jpg");
}

/* Sélecteur de thème en sombre */
.mx-dark .mx-theme-current{ background:#2b2f37; color:#e8eaef; }
.mx-dark .mx-theme-current:hover{ background:#3a3f4a; }
.mx-dark .mx-theme-menu{ background:#20232a; box-shadow:0 6px 24px rgba(0,0,0,.5); }
.mx-dark .mx-theme-opt{ color:#c7ccd4; }
.mx-dark .mx-theme-opt:hover{ background:#2b3038; }
.mx-dark .mx-theme-opt[aria-checked="true"]{ background:#22303f; color:#7fc4ec; }

/* ---------- Lecteur vidéo + playlist (styles maison index / videos) ---------- */
.mx-dark .playlist-sidebar,
.mx-dark .vp-list{ background:#1c1f25; border-color:#2b2f37; }
.mx-dark .playlist-sidebar::-webkit-scrollbar-thumb,
.mx-dark .vp-list::-webkit-scrollbar-thumb{ background:#3a3f4a; border-color:#1c1f25; }
.mx-dark .vp-list-head{ background:#20232a; border-bottom-color:#333844; }
.mx-dark .vp-list-title{ color:#e8eaef; }
.mx-dark .vp-list-count{ color:#8b909a; }

.mx-dark .video-item,
.mx-dark .video-item1,
.mx-dark .video-item2,
.mx-dark .video-item3,
.mx-dark .video-item4,
.mx-dark .vp-item{ color:#c7ccd4; }
.mx-dark .video-item:hover,
.mx-dark .video-item1:hover,
.mx-dark .video-item2:hover,
.mx-dark .video-item3:hover,
.mx-dark .video-item4:hover,
.mx-dark .vp-item:hover{ background:#22303f; color:#7fc4ec; }
.mx-dark .vp-thumb{ background:#2b2f37; }

/* Bannière "Reprendre la lecture" */
.mx-dark .mx-resume{ background:#1b2a38; border-color:#274b63; color:#c7ccd4; }
.mx-dark .mx-resume-at{ color:#8b909a; }
.mx-dark .mx-resume-x{ color:#9aa4ae; }
.mx-dark .mx-resume-x:hover{ background:#2b3a48; color:#e8eaef; }

/* ---------- Sélecteur de séries (#vidsearch / #vs-list, page videos) ---------- */
.mx-dark #vs-input,
.mx-dark #vs-status{ color:#c7ccd4; background-color:#20232a; border-color:#333844; box-shadow:none; }
.mx-dark #vs-input::placeholder{ color:#7c848f; }
.mx-dark #vs-status.vs-on{ color:#7fc4ec; }
.mx-dark #vs-count{ color:#8b909a; }

.mx-dark #vs-list{ background:#1c1f25; border-color:#2b2f37; }
.mx-dark #vs-list a{ color:#c7ccd4; background:#20232a; border-color:#2b2f37; }
.mx-dark #vs-list a:hover,
.mx-dark #vs-list a.vs-hl{ border-color:#3f7fa0; color:#7fc4ec; box-shadow:0 3px 10px rgba(51,136,187,.28); }
.mx-dark #vs-list::-webkit-scrollbar-thumb{ background:#3a3f4a; border-color:#1c1f25; }

.mx-dark #vidsearch #vs-empty{ color:#f0c674; background:#332b1a; border-color:#5c4a25; }

/* ---------- Champ de recherche (#url, page ytimg.php) ---------- */
.mx-dark #url{ color:#c7ccd4; background-color:#20232a; border-color:#333844; box-shadow:none; }
.mx-dark #url::placeholder{ color:#7c848f; }
.mx-dark .ytimg-error{ color:#ff6b6b; }

/* ---------- Galerie de clips CS2 (page cs2-clips.php) ---------- */
.cs2-toolbar{display:flex;flex-direction:column;align-items:stretch;gap:.5em;margin:0 0 1em}
.cs2-count{font-size:.85em;color:#8a97a1}
.cs2-toolbar-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8em}
.cs2-toolbar-selects{display:flex;flex-wrap:wrap;align-items:center;gap:.8em}
.cs2-toolbar-filters{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.6em;min-width:0}
.cs2-toolbar-label{display:flex;align-items:center;gap:.4em;font-size:.85em;color:#8a97a1;white-space:nowrap}
#cs2-sort,#cs2-per-page,.cs2-filter-select{box-sizing:border-box;padding:.5em 2em .5em .9em;border-radius:999px;border:1px solid #d5dde3;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%233a4750' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 2l5 4 5-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9em center;background-size:11px 7px;font-size:.9em;color:#3a4750;appearance:none;-webkit-appearance:none;-moz-appearance:none}
#cs2-per-page{min-width:4.5em}
#cs2-sort{width:10em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.cs2-filter-select{flex:0 0 11em;width:11em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.cs2-filter-empty{text-align:center;color:#8a97a1;margin:2em 0}

@media (max-width:600px){
	.cs2-toolbar-row{flex-direction:column;align-items:stretch}
	.cs2-toolbar-selects{justify-content:space-between}
	#cs2-sort{width:auto;flex:1 1 auto}
	.cs2-toolbar-filters{justify-content:flex-start}
	.cs2-filter-select{flex:1 1 calc(50% - .3em);width:auto}
}

.cs2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin:0 0 1.5em}
.cs2-card{display:flex;flex-direction:column;height:100%;text-decoration:none;color:#3a4750;background:#f6f8fa;border:1px solid #e6ebef;border-radius:14px;overflow:hidden;transition:transform .12s,box-shadow .12s}
.cs2-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,20,30,.16)}
.cs2-card.active{box-shadow:0 0 0 3px #3388BB}
.cs2-card[hidden]{display:none}

.cs2-card-ace{border-color:#f0c04e;box-shadow:0 0 0 2px #f0c04e,0 0 20px rgba(240,196,78,.7);animation:cs2-ace-glow-pulse 2.6s ease-in-out infinite}
.cs2-card-ace:hover{transform:translateY(-2px);animation-duration:1.4s}
@keyframes cs2-ace-glow-pulse{
	0%,100%{ box-shadow:0 0 0 2px #f0c04e,0 0 16px rgba(240,196,78,.55) }
	50%{ box-shadow:0 0 0 3px #ffd76b,0 0 34px rgba(255,215,107,1) }
}
@media (prefers-reduced-motion: reduce){
	.cs2-card-ace{ animation:none }
}

.cs2-card-quad{border-color:#e0453c;box-shadow:0 0 0 2px #e0453c,0 0 14px rgba(224,69,60,.55);animation:cs2-quad-glow-pulse 2.6s ease-in-out infinite}
.cs2-card-quad:hover{transform:translateY(-2px);animation-duration:1.4s}
@keyframes cs2-quad-glow-pulse{
	0%,100%{ box-shadow:0 0 0 2px #e0453c,0 0 12px rgba(224,69,60,.43) }
	50%{ box-shadow:0 0 0 3px #ff5050,0 0 24px rgba(255, 100, 80, 0.78) }
}
@media (prefers-reduced-motion: reduce){
	.cs2-card-quad{ animation:none }
}

.cs2-card-triple{border-color:#8b3fd6;box-shadow:0 0 0 2px #8b3fd6,0 0 9px rgba(139,63,214,.4);animation:cs2-triple-glow-pulse 2.6s ease-in-out infinite}
.cs2-card-triple:hover{transform:translateY(-2px);animation-duration:1.4s}
@keyframes cs2-triple-glow-pulse{
	0%,100%{ box-shadow:0 0 0 2px #8b3fd6,0 0 7px rgba(139,63,214,.3) }
	50%{ box-shadow:0 0 0 2px #c98aff,0 0 13px rgba(201,138,255,.55) }
}
@media (prefers-reduced-motion: reduce){
	.cs2-card-triple{ animation:none }
}

.cs2-card-double{border-color:#2f6feb;box-shadow:0 0 0 2px #2f6feb,0 0 9px rgba(47,111,235,.4);animation:cs2-double-glow-pulse 2.6s ease-in-out infinite}
.cs2-card-double:hover{transform:translateY(-2px);animation-duration:1.4s}
@keyframes cs2-double-glow-pulse{
	0%,100%{ box-shadow:0 0 0 2px #2f6feb,0 0 7px rgba(47,111,235,.3) }
	50%{ box-shadow:0 0 0 2px #6fa8ff,0 0 13px rgba(111,168,255,.55) }
}
@media (prefers-reduced-motion: reduce){
	.cs2-card-double{ animation:none }
}

.cs2-thumb{position:relative;display:block;flex:none;width:100%;aspect-ratio:16/9;background:#dfe6ea;overflow:hidden}
.cs2-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cs2-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8em;text-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .12s}
.cs2-card:hover .cs2-play,.cs2-card.active .cs2-play{opacity:1}
.cs2-duration{position:absolute;right:6px;bottom:6px;display:flex;align-items:center;padding:.12em .45em .18em;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font-size:.75em;font-weight:600;line-height:1;letter-spacing:.02em}
.cs2-card-date{position:absolute;left:6px;top:6px;display:flex;align-items:center;padding:.12em .45em .18em;border-radius:4px;background:rgba(0,0,0,.55);color:#fff;font-size:.75em;font-weight:600;line-height:1;letter-spacing:.02em}

.cs2-card-sub{display:block;padding:.7em .9em;font-size:.85em;font-weight:600;line-height:1.3}

.cs2-card-tags{display:flex;flex-wrap:wrap-reverse;gap:.35em;padding:.3em .9em .8em;margin-top:auto}
.cs2-tag{display:inline-flex;align-items:center;padding:.2em .6em;border-radius:999px;font-size:.72em;font-weight:600;line-height:1.4;white-space:nowrap}
.cs2-tag-player{background:#eee7f7;color:#6a3fb5}
.cs2-tag-map{background:#e3f0f9;color:#1f6f9c}
.cs2-tag-weapon{background:#fdf0e3;color:#b5651d}
.cs2-tag-kills{background:#e8f3e8;color:#2f7d32}
.cs2-tag-ace{background:#fbecc0;color:#8a6a12;font-weight:700}

.cs2-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4em;margin:1em 0}
.cs2-page-link{padding:.45em .8em;border-radius:8px;border:1px solid #e6ebef;background:#f6f8fa;color:#3a4750;text-decoration:none;font-size:.9em}
.cs2-page-link:hover{background:#eaf4fb;color:#1f6f9c}
.cs2-page-current{background:#3388BB;color:#fff;border-color:#3388BB;font-weight:700}
.cs2-page-jump{box-sizing:border-box;width:3.2em;padding:.45em .3em;border-radius:8px;border:1px solid #e6ebef;background:#f6f8fa;color:#3a4750;font-size:.9em;text-align:center;appearance:textfield;-moz-appearance:textfield}
.cs2-page-jump::-webkit-outer-spin-button,.cs2-page-jump::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}
.cs2-page-jump:focus{border-color:#3388BB;outline:none}

.cs2-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.cs2-modal[hidden]{display:none}
.cs2-modal-backdrop{position:absolute;inset:0;background:rgba(10,14,18,.82)}
.cs2-modal-box{position:relative;width:100%;max-width:1280px;z-index:1}
.cs2-modal-close{position:absolute;top:-42px;right:0;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.4em;line-height:1;cursor:pointer}
.cs2-modal-close:hover{background:rgba(255,255,255,.22)}
.cs2-player-row{display:flex;align-items:center;gap:14px}
.cs2-player-wrap{position:relative;flex:1;min-width:0;z-index:0}
.cs2-player{position:relative;z-index:1;display:block;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;box-shadow:0 12px 34px rgba(10,20,30,.30)}
.cs2-ambient{position:absolute;top:50%;left:50%;width:102%;height:102%;transform:translate(-50%,-50%);z-index:-1;border-radius:26px;filter:blur(46px) saturate(1.6) brightness(.85);opacity:0;transition:opacity .6s ease;pointer-events:none}
.cs2-ambient.cs2-ambient-on{opacity:.9}
@media (prefers-reduced-motion: reduce){
	.cs2-ambient{display:none}
}
.cs2-modal-nav{flex:none;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.3em;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .12s,opacity .12s}
.cs2-modal-nav:hover{background:rgba(255,255,255,.22)}
.cs2-modal-nav:disabled{opacity:0;pointer-events:none}
@media (max-width:640px){
	.cs2-player-row{flex-wrap:wrap;justify-content:center;gap:10px}
	.cs2-player-wrap{order:1;flex:1 1 100%;width:100%}
	.cs2-modal-nav{order:2;width:34px;height:34px;font-size:1em}
	#cs2-pip{display:none}
}
.cs2-player-status{min-height:1.4em;margin:.5em 0 0;text-align:center;font-size:.9em;color:#c7ccd4}
.cs2-modal-subtitle{margin:.6em 0 0;text-align:center;font-size:.85em;font-weight:600;color:#9aa4ae}
.cs2-modal-subtitle:empty{display:none}
.cs2-modal-title{margin:.2em 0 0;text-align:center;font-size:1em;font-weight:600;color:#fff}
.cs2-modal-title:empty{display:none}

.cs2-modal-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6em;margin-top:.6em}
.cs2-tool-speed{display:flex;align-items:center;height:34px;gap:.4em;font-size:.85em;color:#c7ccd4}
.cs2-tool-speed-label{line-height:34px}
.cs2-tool-speed select{box-sizing:border-box;height:34px;margin:0;padding:0 1.8em 0 .6em;border-radius:8px;border:1px solid rgba(255,255,255,.18);background-color:rgba(255,255,255,.08);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 2l5 4 5-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .65em center;background-size:11px 7px;color:#fff;font-size:.85em;line-height:normal;appearance:none;-webkit-appearance:none;-moz-appearance:none}
.cs2-tool-btn{display:inline-flex;align-items:center;gap:.45em;box-sizing:border-box;height:34px;appearance:none;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0 1em;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:.85em;text-decoration:none;cursor:pointer;line-height:normal}
.cs2-tool-btn:hover{background:rgba(255,255,255,.16)}
.cs2-tool-btn .fa{font-size:1em}

.mx-dark #cs2-sort,.mx-dark #cs2-per-page,.mx-dark .cs2-filter-select{background-color:#20232a;border-color:#333844;color:#c7ccd4;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23c7ccd4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 2l5 4 5-4'/%3E%3C/svg%3E")}
.mx-dark .cs2-toolbar-label{color:#8b909a}
.mx-dark .cs2-filter-empty{color:#8b909a}
.mx-dark .cs2-card{background:#1c1f25;border-color:#2b2f37;color:#c7ccd4}
.mx-dark .cs2-card.active{box-shadow:0 0 0 3px #3388BB}
.mx-dark .cs2-thumb{background:#2b2f37}
.mx-dark .cs2-count{color:#8b909a}
.mx-dark .cs2-tag-player{background:#2a2038;color:#c3a4f0}
.mx-dark .cs2-tag-map{background:#1b2a38;color:#7fc4ec}
.mx-dark .cs2-tag-weapon{background:#332615;color:#e0a45c}
.mx-dark .cs2-tag-kills{background:#1c2e1c;color:#7fcf83}
.mx-dark .cs2-tag-ace{background:#3a2e0e;color:#f0c674}
.mx-dark .cs2-page-link{background:#1c1f25;border-color:#2b2f37;color:#c7ccd4}
.mx-dark .cs2-page-link:hover{background:#22303f;color:#7fc4ec}
.mx-dark .cs2-page-jump{background:#1c1f25;border-color:#2b2f37;color:#c7ccd4}
.mx-dark .cs2-page-current{background:#3388BB;border-color:#3388BB;color:#fff}

/* ---------- Intégration Twitch (page stream.html) ---------- */
.twitch-live-row{display:flex;align-items:flex-start;gap:1.25em;--twitch-h:520px}
.twitch-player-col{flex:1 1 640px;min-width:0}
.twitch-player-frame{position:relative;width:100%;height:var(--twitch-h);background:#000;border-radius:6px;overflow:hidden;box-shadow:0 8px 26px rgba(10,20,30,.20)}
.twitch-player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.twitch-actions{display:flex;flex-wrap:wrap;gap:.6em;margin-top:.9em}
.twitch-chat-col{flex:0 0 340px;display:flex;min-width:0}
.twitch-chat-col iframe{width:100%;height:var(--twitch-h);border:0;border-radius:6px;background:#18181b;box-shadow:0 8px 26px rgba(10,20,30,.20)}
@media screen and (max-width:840px){
	.twitch-live-row{flex-direction:column}
	.twitch-player-col{flex-basis:auto;width:100%}
	.twitch-player-frame{height:auto;aspect-ratio:16/9}
	.twitch-chat-col{flex-basis:auto;width:100%}
	.twitch-chat-col iframe{height:420px}
}
@media screen and (max-width:736px){
	.twitch-player-frame{border-radius:0;margin-left:-2em;margin-right:-2em;width:calc(100% + 4em)}
	.twitch-actions{flex-direction:column;gap:.5em}
	.twitch-actions .button{width:100%;font-size:1em;height:3em;line-height:3em}
	.twitch-chat-col iframe{height:380px}
}
@media screen and (max-width:480px){
	.twitch-player-frame{margin-left:-1em;margin-right:-1em;width:calc(100% + 2em)}
}