:root{
	--bg:#fff;
	--fg:#000;
	--muted:#444;
	--line:#000;
    /* Unified scrollable area height for chat and playlists */
    --scroll-area-h: clamp(140px, 55vh, 70vh);
}
*{
	box-sizing:border-box
}
body{
	margin:0;
	background:var(--bg);
	color:var(--fg);
	font-family: Arial Black, Impact, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
h1{
	margin:0;
	font-size:clamp(20px,4vw,28px);
	text-transform:uppercase;
	text-align:center
}
h2{
	margin:0 0 8px;
	font-size:clamp(14px,3vw,20px);
	text-transform:uppercase
}

.header{
	padding:12px;
	background:var(--bg);
	display:flex;
	align-items:center;
	justify-content:center;
	gap:12px
}
.header img{
	width:72px;
	height:72px;
	object-fit:contain;
	display:block;
	margin:0
}
/* Ensure header title aligns naturally next to the logo */
.header h1{
	text-align:left
}
.schedule{
    border-top:2px dashed var(--line);
    border-bottom:2px dashed var(--line);
    padding:10px 12px;
    text-align:center;
    font-weight:800;
    max-width:1200px;
    margin:0 auto
}
.wrap{
    padding:12px;
    max-width:1200px;
    margin:0 auto
}
.columns{
	display:grid;
	grid-auto-flow:column;
	grid-auto-columns:92%;
	gap:12px;
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;
	width:100%;
	max-width:1200px;
	margin:0 auto
}
.col{
	scroll-snap-align:start;
	display:grid;
	gap:12px;
}
@media(min-width:760px){
	.columns{
		grid-auto-flow:initial;
		grid-auto-columns:initial;
		grid-template-columns:1fr 1fr;
		gap:16px;
		overflow:visible;
		scroll-snap-type:none;
		align-items:stretch;
	}
	/* Flatten column wrappers so children share the same grid */
	.col{ display:contents }
	/* Place items into a 2x2 grid so row heights match */
	#player{ grid-column:1; grid-row:1 }
	#chat{ grid-column:1; grid-row:2 }
	#community{ grid-column:2; grid-row:1 }
	#playlists{ grid-column:2; grid-row:2 }
}

/* Mobile hint above pager dots */
.mobile-hint{
    text-align:center;
    font-weight:800;
    font-size:12px;
    padding:6px 0 4px;
    color:var(--muted);
}
@media(min-width:760px){ .mobile-hint{ display:none } }

/* (removed mobile-hint styles) */

/* Pager dots for mobile swipe */
.pager{
    display:flex;
    gap:8px;
    justify-content:center;
    align-items:center;
    padding:10px 0 0;
}
.pager .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    border:2px solid var(--fg);
    background:transparent;
    cursor:pointer;
    padding:0;
}
.pager .dot.active{
    background:var(--fg);
}
@media(min-width:760px){
    .pager{ display:none }
}
.panel{
	border:2px solid var(--line);
	padding:12px;
	background:var(--bg)
}
.controls{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:10px;
	align-items:center
}
.btn{
    background:var(--fg);
    color:var(--bg);
    border:none;
    padding:10px 14px;
    font-weight:900;
    text-transform:uppercase;
    cursor:pointer;
    font-size:14px
}
.btn:disabled{
    opacity:.5;
    cursor:not-allowed
}
.row{
	display:flex;
	justify-content:space-between;
	gap:8px;
	color:var(--muted);
	font-weight:700;
	font-family:monospace;
	font-size:12px
}
.nowplaying{ font-weight:900 }
.bar{
	-webkit-appearance:none;
	appearance:none;
	width:100%;
	height:6px;
	background:#eee;
	border:1px solid var(--line)
}
.bar::-webkit-slider-thumb{
	-webkit-appearance:none;
	width:14px;
	height:14px;
	background:var(--fg);
	border:1px solid var(--bg)
}
.bar::-moz-range-thumb{
	width:14px;
	height:14px;
	background:var(--fg);
	border:1px solid var(--bg)
}
.chatlog{
    /* Scale with viewport using unified variable */
    height:var(--scroll-area-h);
    max-height:none;
    overflow:auto;
    border:0;
    padding:0;
    background:var(--bg);
    color:var(--fg);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:13px
}
/* Make embedded chat iframe fill the chatlog container */
.chat{
    width:100%;
    height:100%;
    border:0
}

/* Let the chat panel stretch and the chat iframe fill it */
#chat{
    display:flex;
    flex-direction:column;
}
#chat .chatlog{
    flex:1 1 auto;
}

/* Community CTA link */
.panel#community{
    padding:0; /* Let the CTA fill the panel */
    height:var(--player-h, auto);
    max-height:var(--player-h, none);
    overflow:hidden;
}


/* Playlists scales like chat log area */
.playlistlog{
    /* Ensure it also shrinks with viewport and never goes below a usable minimum */
    height:clamp(120px, calc(var(--scroll-area-h) - var(--playlist-title-h, 0px)), 100vh);
    max-height:none;
    overflow:auto;
    border:0;
    padding:0;
    background:var(--bg);
}

/* Prefer dynamic viewport units when supported */
@supports(height: 1svh){
  :root{ --scroll-area-h: clamp(140px, 55svh, 70svh) }
}
@supports(height: 1dvh){
  :root{ --scroll-area-h: clamp(140px, 55dvh, 70dvh) }
}
.cta{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    background:var(--bg);
    color:var(--fg);
    text-decoration:none;
    text-align:center;
    padding:16px 18px;
    font-weight:900;
    text-transform:uppercase;
    border:0; /* Avoid double border inside panel */
    transition:background-color .15s ease, color .15s ease;
}

.cta:hover,
.cta:focus-visible{
    background:var(--fg);
    color:var(--bg);
}

/* Playlists list template styling */
.section-title{
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:8px;
}
.playlists{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.playlists li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
}
.playlists .show{
    font-weight:900;
}
.playlists .links{
    display:flex;
    gap:8px;
}
.playlists a{
    text-decoration:none;
    color:var(--fg);
    border:1px solid var(--line);
    padding:6px 10px;
    font-weight:800;
    text-transform:uppercase;
    font-size:12px;
}
.msg{
	margin-bottom:6px
}
.nick{
	font-weight:900
}
.chatinput{
	display:grid;
	grid-template-columns:1fr auto;
	gap:8px;
	margin-top:8px
}
input[type="text"]{
	background:var(--bg);
	color:var(--fg);
	border:1px solid var(--line);
	padding:8px;
	width:100%;
	font-size:13px
}
.foot{
	text-align:center;
	color:var(--muted);
	border-top:1px solid var(--line);
	padding:10px 0;
	margin-top:12px;
	font-size:12px
}