/* Baloo Paaji, served locally from /fonts (archived copies of the Google Fonts v21 files) */
@font-face { font-family: 'Baloo Paaji'; font-style: normal; font-weight: 400; src: url(/fonts/baloo-paaji-gurmukhi.woff2) format('woff2'); unicode-range: U+0964-0965, U+0A01-0A75, U+200C-200D, U+20B9, U+25CC, U+262C, U+A830-A839; }
@font-face { font-family: 'Baloo Paaji'; font-style: normal; font-weight: 400; src: url(/fonts/baloo-paaji-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Baloo Paaji'; font-style: normal; font-weight: 400; src: url(/fonts/baloo-paaji-latin-ext.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Baloo Paaji'; font-style: normal; font-weight: 400; src: url(/fonts/baloo-paaji-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

body,html {
    font-family: baloo-paaji-regular,sans-serif;
    overflow: hidden;
    overflow-x: hidden;
    overflow-y: hidden
}

body,canvas,html {
    margin: 0!important;
    padding: 0!important
}

html,body {
    background: #013220;   /* no white sliver behind the canvas at odd zoom levels */
    overflow: hidden
}

/* NO SELECTION GESTURES (2026-10-08, mobile): a long press or a drag over the game never selects text or opens the
   callout menu - the fields you type in (chat, names, friends, messages) still can */
html,body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent
}
input,textarea,select,[contenteditable],[contenteditable] * {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
    -webkit-touch-callout: default
}

canvas {
    background-color: #013220;
    height: 100%;
    width: 100%
}

#playButton,canvas {
    font-family: Baloo Paaji;
    position: absolute
}

#playButton {
    background-color: #b38a03;
    border: none;
    color: #fff;
    font-size: 25px;
    left: 50%;
    padding: 15px 50px;
    text-align: center;
    top: 40%
}

#totem {
    background-color: #4f3818;
    display: none;
    font-family: Baloo Paaji;
    position: absolute
}

#totem:hover {
    -webkit-transform: translateY(2px);
    transform: translateY(2px)
}

#totem:active {
    -webkit-transform: translateY(4px);
    transform: translateY(4px)
}

div#chat_block {
    display: none;
    position: absolute;
    width: 300px
}

footer,label {
    font-family: sans-serif
}

label {
    font-size: 1rem;
    padding-right: 10px
}

select {
    background-color: #dedede;
    border: none;
    border-radius: 20px;
    color: #4a4a4a;
    display: "inline-block";
    font-family: Baloo Paaji;
    font-size: .9rem;
    font-size: 20px;
    height: 30px;
    opacity: 1;
    text-align: center;
    width: 150px
}

footer,select {
    position: absolute
}

footer {
    bottom: 30px;
    font-size: .8rem;
    left: 30px
}

#nameInput {
    display: "inline-block";
    position: absolute;
    width: 300px
}

#chat_input,#nameInput {
    background-color: #dedede;
    border: none;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4a4a4a;
    font-family: Baloo Paaji;
    font-size: 20px;
    height: 30px;
    opacity: .8;
    outline: none;
    text-align: center
}

#chat_input {
    width: 100%
}

div#team_box {
    background-color: #4c3a15;
    border: 4px solid #1f773d;
    border-radius: 15px;
    color: #fff;
    display: none;
    font-family: Baloo Paaji;
    padding: 5px 5px 10px;
    position: absolute;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 250px
}

div#leader {
    font-size: 20px
}

div.nicknames {
    background-color: #4c3a15;
    border-radius: 7px;
    color: #fff;
    font-family: Baloo Paaji;
    margin: 5px 10px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center
}

div.nicknames:hover {
    background-color: #3d2d10;
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAgCAYAAADqgqNBAAADX0lEQVR4nM1XS09TQRT+Znrb0gu0pJSHqIUmJjwWrlBMXLgwgY0LYpSEuCH+ARcaE8OaP+DShWFHjAuJGhNJjDFilEg0GoJBIRSUV2mvpU/a3tsxZ0jLI21pGyh+SR935tx7vpkz5zvnMpSA4cEu9+J6ZKnFZcuOrfrj8DTXtI6MzS6jRLBina4E4t7GOiu71tOC7nZndm56TsPLqVX4gglxut7WVgoJVozjNS3uHer1sAvtTnDGoEWSiG0bUKtMcNZYkBYCn+c0jE4silPO4gkohxkEo8k3/ZfPsJ7OemihJLRwEqFYCrohoJgYNDUJZ60FNE+Lefx60QuAF+OcF2Fz7sr5BoRjOpZ8UemcHBPol669GzvjFA6Xw1JUKItybrOaYFY4tqIppPQdpwdBJCgMpYLjBMH/W+fDg11uOt07Qcy95bsQ0o7s6b6ynA8PdrmHej3pezfbRcpIL1Fe0wO3k+mCD6J5siP7QDjhvXuj/c5hzlkhIcmsxB9KYNkXy57yXKC0czeqcDms0nb8wx9sBLfh30rmFR9WWEh0uaJMXh8GItBYZ0Wz0waFMxhCSAV8+v43TX+128z9e0lI57TNt/s8OYWkVDAGqXzVVQrsqlkq4HbKwLvvm7Qb+xSQ3x/oGHA3quxiRz0CoV3BKMcxQQggGjfg+5uAdz2K+bWI1Ie+7mZaJKMdzhxINtTrEQ8GO+FuUPFzJYxQVMdRw6wwnG3YOQ9TPwLZGqC4HBY5sbmVkBJ6HKCV0yEkUGgFwEYnFhf4XgPasuMChZEIUEjpUNfbLQonh4Yh4KhW5PYcJw7WAB6O6Wtvv/lQazPLTyXBGxzWS5Mzm7IhoLpMuVox5yNjs8vUAlEn4rRbpEpVioBCXyR/oxOyA5FCQzhMTo8CnL5o9ZR3lH+Uh5SPldgBnvlzEgT43otKE+AHBypJgOcaPC4CdD9VvILO8xFoa6ouWwuqLBytTaq8f3pOk69ZZb+xROI6YgldFqN8NcFq5qhVFVjNJtJyVFlM+6oaK4Z1rhaLSAghZDXM18/X1ZhRY1NgpIUk+/zjCiZn/Nm2qqT9y5CgtxLVquDW1VZZjvOBCtaLT6v4Mq/JgqKY2LOH47+uZ+bLPkHUAfmCiSfUD+QDhYMK16NXCy255v8Bw8D2Pa1XnIIAAAAASUVORK5CYII=),auto
}

div.eject_member {
    background-color: transparent;
    border-radius: 7px;
    float: right;
    margin-top: 5px
}

div.eject_member:hover {
    background-color: #2b1f0a
}

div#join {
    background-color: #1f773d;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px #14572a;
    box-shadow: 0 5px #14572a;
    color: #fff;
    font-family: Baloo Paaji;
    font-size: 25px;
    line-height: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px 15px;
    text-align: center;
    text-shadow: 0 3px #9ab3a0;
    width: 90px
}

div#join:hover {
    background-color: #278f4b;
    -webkit-box-shadow: 0 5px #186231;
    box-shadow: 0 5px #186231
}

div#join:active {
    background-color: #176331;
    -webkit-box-shadow: 0 0 #14572a;
    box-shadow: 0 0 #14572a;
    margin-bottom: 5px;
    margin-top: 15px
}

div#lock_team {
    background-color: #1f773d;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px #14572a;
    box-shadow: 0 5px #14572a;
    color: #fff;
    font-family: Baloo Paaji;
    font-size: 25px;
    line-height: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px 15px;
    text-align: center;
    text-shadow: 0 3px #9ab3a0;
    width: 90px
}

div#lock_team:hover {
    background-color: #278f4b;
    -webkit-box-shadow: 0 5px #186231;
    box-shadow: 0 5px #186231
}

div#lock_team:active {
    background-color: #176331;
    -webkit-box-shadow: 0 0 #14572a;
    box-shadow: 0 0 #14572a;
    margin-bottom: 5px;
    margin-top: 15px
}

div#leave {
    background-color: #1f773d;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px #14572a;
    box-shadow: 0 5px #14572a;
    color: #fff;
    font-family: Baloo Paaji;
    font-size: 25px;
    line-height: 15px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 10px 15px;
    text-align: center;
    text-shadow: 0 3px #9ab3a0;
    width: 90px
}

div#leave:hover {
    background-color: #278f4b;
    -webkit-box-shadow: 0 5px #186231;
    box-shadow: 0 5px #186231
}

div#leave:active {
    background-color: #176331;
    -webkit-box-shadow: 0 0 #14572a;
    box-shadow: 0 0 #14572a;
    margin-bottom: 5px;
    margin-top: 15px
}

/* THEMED SCROLLBARS (2026-10-02, the user: "any scrollbar for that matter in our theme"): every scrolling panel on the page - the account card,
   friends, the admin panel, in-game settings - gets a wooden scrollbar instead of the browser's grey one: a dark recessed track like the panels'
   insets, a wooden thumb with a light top edge and the dark outline, gold when held. No arrow buttons. Chrome, Edge and Safari read the
   ::-webkit-scrollbar rules; Firefox only has two colours, given below (only to Firefox: in Chrome the standard properties would switch the
   wooden one off). */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #1a0f06; border-radius: 8px; box-shadow: inset 0 0 0 2px #120a04, inset 0 2px 4px rgba(0, 0, 0, 0.6); }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #8a5a2e, #6b4423); border: 3px solid #1a0f06; border-radius: 8px; box-shadow: inset 1px 1px 0 rgba(255, 214, 150, 0.35), inset -1px -1px 0 rgba(0, 0, 0, 0.35); min-height: 36px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #a8703a, #83552c); }
::-webkit-scrollbar-thumb:active { background: linear-gradient(90deg, #e2b25f, #b07a3c); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }
@supports (-moz-appearance: none) { * { scrollbar-width: thin; scrollbar-color: #8a5a2e #1a0f06; } }