/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.2.0
build: 2676
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

/* ===== Theme ===== */
:root {
	--glass: rgba(8, 28, 36, 0.55);
	--glass-strong: rgba(8, 28, 36, 0.78);
	--glass-border: rgba(160, 245, 235, 0.16);
	--accent: #7ff5dc;
	--accent-2: #ffd75a;
	--text: #e8f6f4;
	--muted: #8fb3b0;
	--radius: 16px;
	--font: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

html {
	-webkit-user-select: none;
	user-select: none;
	overflow: hidden; /* the game never scrolls */
	background: #03100f;
}

body {
	font-family: var(--font);
	margin: 0;
	padding: 0;
	overflow: hidden;
	font-size: 14px;
	color: var(--text);
	background: #03100f;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }
b, strong { font-weight: 700; }

#canvas { display: block; }

#fps { position: absolute; top: 0; left: 0; z-index: 2; }


/* Glass panel */
.panel {
	background: var(--glass);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
}

/* Non-interactive HUD lets the mouse through to the game */
#hud-left, #chat-area, #minimap-wrap { pointer-events: none; }
.hud-interactive { pointer-events: auto; }

/* ===== Chat input (center) ===== */
#chatText { display: inline-block; position: absolute; visibility: hidden; white-space: pre; }
#chatText, #chat {
	font-size: 28px;
	font-weight: 700;
	max-width: 70%;
}
#chat {
	display: block;
	position: absolute;
	top: 62%;
	left: 50%;
	padding: 12px 22px;
	background: var(--glass-strong);
	border: 1px solid var(--glass-border);
	border-radius: 999px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(127, 245, 220, 0.08);
	color: #fff;
	text-align: center;
	outline-style: none;
	height: 34px;
	width: 30px;        /* real width is set by formControls.js */
	margin-left: -15px;
	opacity: 0;
	transition: opacity .2s linear;
	z-index: 4;
}

/* ===== Top left ===== */
#hud-left {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 230px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 3;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
}
.brand-icon {
	font-size: 30px;
	filter: drop-shadow(0 0 10px rgba(127, 245, 220, 0.5));
	animation: float 3s ease-in-out infinite;
}
.brand-text {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.5px;
	background: linear-gradient(90deg, #b8fff0, #7ff5dc 40%, #6cc9ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.brand-sub { opacity: 0.7; font-weight: 600; }

.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	padding: 10px 6px;
}
.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-right: 1px solid var(--glass-border);
}
.stat:last-child { border-right: 0; }
.stat-value {
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
#stat-score { color: var(--accent); }
#stat-best { color: var(--accent-2); }
.stat-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--muted);
}
.bump { animation: bump .35s ease-out; }

.leaderboard { padding: 12px 14px; }
.panel h3 {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--muted);
	margin-bottom: 8px;
}
#leaderboard-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px;
	border-radius: 8px;
	font-size: 13px;
}
#leaderboard-list li.me { background: rgba(127, 245, 220, 0.1); }
#leaderboard-list li.clickable { pointer-events: auto; cursor: pointer; transition: background .15s; }
#leaderboard-list li.clickable:hover { background: rgba(200, 150, 255, 0.15); }
#leaderboard-list li.clickable:hover .lb-score:after { content: ' 🔒'; font-size: 10px; }

/* Whole UI switches to venom green while you are the snake */
body.snake-mode {
	--accent: #8dff6a;
	--glass: rgba(10, 40, 14, 0.6);
	--glass-strong: rgba(10, 40, 14, 0.82);
	--glass-border: rgba(140, 255, 110, 0.35);
	--muted: #a8d79a;
}
body.snake-mode .brand-text { background: linear-gradient(90deg, #eaffc4, #8dff6a 40%, #2fd35a); -webkit-background-clip: text; background-clip: text; }
body.snake-mode .brand-icon { filter: drop-shadow(0 0 12px rgba(120, 255, 100, 0.8)); animation: slither 1s ease-in-out infinite; }
body.snake-mode .panel { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 0 18px rgba(110, 255, 90, 0.15); }
body.snake-mode #stat-score { color: #b6ff8a; }
body.snake-mode #dash-btn { background: radial-gradient(circle, rgba(10, 40, 14, 1) 58%, transparent 60%), conic-gradient(#8dff6a var(--cd), rgba(255, 255, 255, 0.12) 0); }
body.snake-mode #chat { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(120, 255, 100, 0.2); }

/* Center announcement */
#banner {
	position: absolute;
	top: 90px;
	left: 50%;
	transform: translate(-50%, -20px) scale(0.9);
	padding: 12px 26px;
	border-radius: 999px;
	font-size: 22px;
	font-weight: 800;
	white-space: nowrap;
	color: #fff;
	background: var(--glass-strong);
	border: 1px solid var(--glass-border);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s, transform .3s cubic-bezier(.2, 1.6, .4, 1);
	z-index: 6;
}
#banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
#banner.announce { background: linear-gradient(90deg, rgba(40, 110, 200, 0.9), rgba(30, 160, 170, 0.9)); border-color: rgba(160, 230, 255, 0.6); white-space: normal; max-width: 80vw; text-align: center; }
#banner.bump { background: rgba(140, 30, 30, 0.85); border-color: rgba(255, 140, 120, 0.6); }
#banner.show.bump { animation: shake .4s; }
#leaderboard-list .rank { width: 20px; text-align: center; font-size: 13px; color: var(--muted); font-weight: 700; }
#leaderboard-list .lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#leaderboard-list .lb-score { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ===== Top right ===== */
#hud-right {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	z-index: 3;
}
.top-buttons { display: flex; gap: 8px; }
.icon-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid var(--glass-border);
	background: var(--glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--text);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s, background .15s, border-color .15s;
}
.icon-btn:hover { background: rgba(127, 245, 220, 0.15); border-color: rgba(127, 245, 220, 0.45); transform: translateY(-1px); }
.lang-btn { color: var(--accent); letter-spacing: 1px; }
#help-btn.active { background: rgba(127, 245, 220, 0.2); border-color: rgba(127, 245, 220, 0.6); color: var(--accent); }

#instructions {
	width: 270px;
	padding: 14px 16px;
	transition: opacity .25s, transform .25s;
}
.help-hidden #instructions { opacity: 0; transform: translateY(-8px); pointer-events: none; }
#instructions li {
	position: relative;
	padding-left: 14px;
	margin-bottom: 7px;
	font-size: 13px;
	line-height: 1.45;
	color: #c9dedb;
}
#instructions li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
}
kbd {
	display: inline-block;
	padding: 0 6px;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom-width: 2px;
	background: rgba(255, 255, 255, 0.07);
	font-family: var(--font);
	font-size: 11px;
	font-weight: 700;
	color: #fff;
}
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.dot-n { background: #78ffdc; box-shadow: 0 0 8px #78ffdc; }
.dot-g { background: #ffd75a; box-shadow: 0 0 8px #ffaa28; }

/* ===== Bottom left: chat log ===== */
#chat-area {
	position: absolute;
	left: 20px;
	bottom: 100px;
	width: 340px;
	z-index: 3;
}
#chat-log {
	display: flex;
	flex-direction: column;
	gap: 4px;
	z-index: 3;
}
.log-row {
	align-self: flex-start;
	max-width: 100%;
	padding: 5px 11px;
	border-radius: 12px;
	background: rgba(6, 22, 28, 0.6);
	font-size: 13px;
	line-height: 1.35;
	word-wrap: break-word;
	animation: slideIn .25s ease-out;
	transition: opacity 1s;
}
.log-row.old { opacity: 0.35; }
.log-name { font-weight: 700; margin-right: 6px; }
.log-system { color: var(--muted); font-style: italic; background: rgba(6, 22, 28, 0.35); }
.log-event { color: #ffe3a3; background: rgba(60, 40, 10, 0.55); font-weight: 600; }
.log-whisper { background: rgba(60, 20, 80, 0.7); border: 1px solid rgba(220, 160, 255, 0.35); color: #f0d7ff; }
.log-whisper .log-name { font-size: 12px; }

/* ===== Bottom right: minimap ===== */
#minimap-wrap {
	position: absolute;
	right: 20px;
	bottom: 46px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	overflow: hidden;
	z-index: 3;
}
#minimap { display: block; width: 150px; height: 150px; } /* backing store is scaled for Retina in Hud.js */

/* ===== Bottom center: toolbar ===== */
#toolbar {
	position: absolute;
	left: 50%;
	bottom: 40px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 999px;
	z-index: 3;
}
.tool-group { display: flex; align-items: center; gap: 2px; }
#chat-btn {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: rgba(127, 245, 220, 0.12);
	font-size: 18px;
	cursor: pointer;
	transition: transform .12s, background .12s;
}
#chat-btn:hover { background: rgba(127, 245, 220, 0.25); transform: scale(1.1); }
.chat-open #chat-btn { background: rgba(127, 245, 220, 0.35); box-shadow: 0 0 12px rgba(127, 245, 220, 0.5); }
#chat::placeholder { color: rgba(232, 246, 244, 0.4); font-weight: 600; }
.tool-sep { width: 1px; height: 24px; background: var(--glass-border); margin: 0 2px; }
.emote {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	font-size: 18px;
	cursor: pointer;
	transition: transform .12s, background .12s;
}
.emote:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.25) translateY(-2px); }
.emote:active { transform: scale(0.9); }
.swatch {
	width: 18px;
	height: 18px;
	margin: 0 2px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .12s;
}
.swatch:hover { transform: scale(1.2); }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(127, 245, 220, 0.4); }

#dash-btn {
	--cd: 100%;
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	font-size: 18px;
	cursor: pointer;
	color: #fff;
	background:
		radial-gradient(circle, rgba(8, 28, 36, 1) 58%, transparent 60%),
		conic-gradient(var(--accent-2) var(--cd), rgba(255, 255, 255, 0.12) 0);
	opacity: 0.6;
	transition: opacity .2s, transform .12s;
}
#dash-btn.ready { opacity: 1; box-shadow: 0 0 14px rgba(255, 215, 90, 0.45); }
#dash-btn.ready:hover { transform: scale(1.1); }
#dash-btn.active { transform: scale(1.15); box-shadow: 0 0 24px rgba(255, 215, 90, 0.8); }

/* ===== Rooms ===== */
.room-btn {
	max-width: 190px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
}

.modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 6, 12, 0.6);
	z-index: 20;
	animation: fadeIn .2s ease-out;
}
.modal.hidden { display: none; }
.modal-card {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 22px 22px 18px;
	background: var(--glass-strong);
	animation: popIn .25s cubic-bezier(.2, 1.4, .4, 1);
}
.modal-card.small { max-width: 340px; }
.modal-card h2 {
	font-size: 20px;
	font-weight: 800;
	margin-bottom: 12px;
	color: #fff;
}
.modal-card h3 { margin: 16px 0 8px; }
.modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.18); }
.modal-text { color: #c9dedb; font-size: 13px; margin-bottom: 10px; }

.modal-card input[type=text], .modal-card input[type=password] {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid var(--glass-border);
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	font-family: var(--font);
	font-size: 14px;
	outline: none;
	-webkit-user-select: text;
	user-select: text;
}
.modal-card input:focus { border-color: rgba(127, 245, 220, 0.6); box-shadow: 0 0 0 3px rgba(127, 245, 220, 0.12); }
.modal-card input::placeholder { color: rgba(232, 246, 244, 0.4); }

.primary-btn, .ghost-btn, .room-join, #room-copy {
	padding: 9px 16px;
	border-radius: 10px;
	border: 0;
	font-family: var(--font);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .12s, background .12s, opacity .12s;
}
.primary-btn { background: linear-gradient(90deg, #7ff5dc, #5ccfff); color: #04201c; }
.primary-btn:hover { transform: translateY(-1px); }
.ghost-btn { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.ghost-btn:hover { background: rgba(255, 255, 255, 0.15); }

.room-current { font-size: 14px; color: #c9dedb; }
.room-current b { color: #fff; }
.room-invite { display: flex; gap: 8px; margin-top: 10px; }
.room-invite.hidden { display: none; }
.room-invite input { flex: 1; min-width: 0; font-size: 12px !important; color: var(--accent) !important; }
#room-copy { background: rgba(127, 245, 220, 0.15); color: var(--accent); }
#room-copy:hover { background: rgba(127, 245, 220, 0.28); }

.room-section-head { display: flex; align-items: center; justify-content: space-between; }
.room-refresh {
	margin-top: 8px;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text);
	font-size: 15px;
	cursor: pointer;
}
.room-refresh:hover { background: rgba(255, 255, 255, 0.18); }

#room-list {
	max-height: 210px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
#room-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid transparent;
}
#room-list li.official .room-name { color: #ffe08a; }
.room-off { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 180, 90, 0.08); color: #ffd7a0; font-size: 13px; }
.room-off.hidden, .room-form.hidden { display: none; }
#room-list li.here { border-color: rgba(127, 245, 220, 0.35); background: rgba(127, 245, 220, 0.07); }
#room-list .room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 14px; }
#room-list .room-count { font-size: 11px; color: var(--muted); white-space: nowrap; }
.room-join { padding: 6px 12px; background: rgba(127, 245, 220, 0.18); color: var(--accent); }
.room-join:hover:not(:disabled) { background: rgba(127, 245, 220, 0.32); }
.room-join:disabled { opacity: 0.55; cursor: default; background: transparent; }

.room-form { display: flex; flex-direction: column; gap: 8px; }
.room-error { min-height: 18px; margin-top: 8px; font-size: 13px; font-weight: 600; color: #ff9d8f; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ===== Disconnected ===== */
#cant-connect {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 18px 28px;
	max-width: 420px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	color: #ffb3a7;
	background: rgba(40, 10, 14, 0.75);
	border: 1px solid rgba(255, 140, 120, 0.35);
	border-radius: var(--radius);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index: 5;
}

/* ===== Animations ===== */
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes snakePulse { 0%, 100% { box-shadow: 0 0 0 rgba(110, 255, 120, 0); } 50% { box-shadow: 0 0 18px rgba(110, 255, 120, 0.7); } }
@keyframes dangerPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 70, 90, 0); } 50% { box-shadow: 0 0 20px rgba(255, 70, 90, 0.8); } }
@keyframes slither { 0%, 100% { transform: rotate(-10deg) translateX(-2px); } 50% { transform: rotate(10deg) translateX(2px); } }
@keyframes glowPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 120, 220, 0); } 50% { box-shadow: 0 0 18px rgba(255, 120, 220, 0.6); } }
@keyframes shake { 0%, 100% { margin-left: 0; } 20% { margin-left: -8px; } 40% { margin-left: 8px; } 60% { margin-left: -5px; } 80% { margin-left: 5px; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* ===== Small screens / mobile ===== */
@media (max-width: 760px) {
	#hud-left { top: 10px; left: 10px; width: 170px; gap: 6px; }
	.brand-text { font-size: 20px; }
	.brand-icon { font-size: 22px; }
	.stat-value { font-size: 16px; }
	.leaderboard { padding: 8px 10px; }
	#leaderboard-list li { font-size: 11px; padding: 2px 4px; }
	#hud-right { top: 10px; right: 10px; }
	#instructions { width: min(270px, calc(100vw - 20px)); }
	#instructions li { font-size: 12px; }
	#chat-area { left: 10px; bottom: 64px; width: calc(100% - 130px); }
	.log-row { font-size: 11px; }
	#minimap-wrap { right: 10px; bottom: 70px; width: 96px; height: 96px; }
	#minimap { width: 96px; height: 96px; }
	#toolbar { bottom: 10px; max-width: calc(100% - 20px); overflow-x: auto; }
	#color-bar, #color-bar + .tool-sep { display: none; }
	.emote { width: 28px; height: 28px; font-size: 15px; }
	#chat { font-size: 20px; }
	.room-btn { max-width: 120px; font-size: 12px; }
	/* Phones: when open, the chat box sits near the top so the keyboard does not cover it */
	.chat-open #chat {
		top: 64px;
		left: 10px !important;
		right: 10px;
		width: auto !important;
		max-width: none;
		margin-left: 0 !important;
		font-size: 18px;
	}
	#banner { font-size: 15px; top: 150px; padding: 9px 18px; }
}

/* ===== Unsupported browser dialog ===== */
#unsupported-browser {
  display: none;  
	position: absolute;
	z-index:2;	
	background-color: #fff;
	background-image: linear-gradient(top, #fff, #e2e2e2);
	background-image: -o-linear-gradient(top, #fff, #e2e2e2);
	background-image: -moz-linear-gradient(top, #fff, #e2e2e2);
	background-image: -ms-linear-gradient(top, #fff, #e2e2e2);
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #fff),color-stop(1, #e2e2e2));

	border-radius: 10px;
	box-shadow: 1px 1px 5px #000;
	
	top: 55%;
	left: 50%;
	width:420px;
	margin:-200px;
	padding:35px;
	font-size: 1.5em;
	border: 1px solid #fff;
}

#unsupported-browser p {
	color: #000;
	text-shadow: white 1px 1px 0;
	line-height: 1.4em;
}

a#force-init-button {
	font-size: .6em;
	color: #e47c6c;
	text-align: center;
	font-weight: bold;
	text-decoration: underline;
}
a#force-init-button:hover {
  color: #999;  
}


#unsupported-browser ul li  {
	display: inline;
	list-style-type: none;
	padding-right: 10px;
	font-weight: bold;
	padding: 4px 10px 4px 10px;
	background-color: #606061;
	border-radius: 100px;
	box-shadow:inset -1px -1px -5px #000;
	text-shadow: none;
	font-size: .8em;
}

#unsupported-browser ul   {
	margin: 20px 0px 20px 0px;
}