:root { --color-black: #000; --color-white: #fff; --color-primary: #6ec1a9; --color-light-grey: #ddd; --color-dark-grey: #555; --color-grey: #c0c0c0; --color-yellow: #ff0; --color-red: #be0000; --color-transparent-black: rgba(0,0,0,0.8); --color-border-grey: #ccc; }
body { margin: 0; }
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template { display: none; }
body { font-family: Arial, sans-serif; background-color: var(--color-black); color: var(--color-white); }
html, body { overflow-x: hidden; }
a { background-color: transparent; color: var(--color-primary); text-decoration: none; }
a:active, a:hover { outline: 0; }
a:hover { text-decoration: underline; }
abbr[title] { border-bottom: 0; text-decoration: none; }
b, strong { font-weight: bold; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
dfn { font-style: italic; }
fieldset { border: 1px solid var(--color-grey); margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
figure { margin: 1em 40px; }
form { color: var(--color-black); }
h1 { margin-bottom: 20px; font-size: 24px; }
hr { box-sizing: content-box; height: 0; }
ul { text-align: left;padding: 30px 0 30px 15px;margin: 0; }
li { padding: 5px 0; }
ul.list { text-align: left;padding: 10px;margin: 0;list-style: none; }
ul.list li { background: var(--color-black);padding: 15px;border-radius:5px;margin-bottom: 5px; }
img { border: 0; }
input { line-height: normal; width: 100%; padding: 12px; margin-bottom: 15px; border-radius: 6px; border: 1px solid var(--color-border-grey); box-sizing: border-box; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: border-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

input::placeholder { color:var(--color-black); opacity: 1; }
input:-ms-input-placeholder { color:var(--color-black); opacity: 1; }
input::-ms-input-placeholder { color:var(--color-black); opacity: 1; }

legend { border: 0; padding: 0; }
mark { background: var(--color-yellow); color: var(--color-black); }
optgroup { font-weight: bold; }
pre { overflow: auto; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
svg:not(:root) { overflow: hidden; }
table { border-collapse: collapse; border-spacing: 0; margin: 30px 0; width: 100%; }
table td, table th { padding: 15px 5px; text-align: left; vertical-align: middle; border-radius: 2px; border: 1px solid var(--color-primary); }
table th { text-align: center; }
table, th, td { border: none; }
textarea { overflow: auto; }
td, th { padding: 0; }
:focus { outline: none; }
::-moz-focus-inner { border: 0; }
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-image: url('armenia-bg.jpg'); background-position: center top; background-repeat: no-repeat; background-size: cover; }
.game-container { width: 500px; padding: 40px 20px; background-color: var(--color-transparent-black); border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; max-width: calc(100% - 20px); max-height: calc(100dvh - 20px); overflow: auto; }
.game-container h1 { padding: 0 0 15px 0; margin: 0; }
.game-container h2 { padding: 0 0 15px 0; margin: 0; }
.game-container p { padding: 0; margin: 0; padding-bottom: 30px; }
.logo { margin-bottom: 15px; width: 160px; }
@media only screen and (max-width: 600px) {
    .logo { width: 100px; }
  }

.btn { width: 100%; padding: 12px; background-color: var(--color-primary); color: var(--color-white); border: 2px solid var(--color-primary); font-size: 16px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; font-weight: 600; text-decoration: none; }
.btn:hover { background-color: var(--color-black); color: var(--color-primary); border: 2px solid var(--color-primary); text-decoration: none; }

.btn-w { width: 100%; padding: 12px; background-color: var(--color-white); color: var(--color-primary); border: 2px solid var(--color-white); font-size: 16px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; font-weight: 600; text-decoration: none; }
.btn-w:hover { background-color: var(--color-black); color: var(--color-white); border: 2px solid var(--color-white); text-decoration: none; }

.btn-alert { width: 100%; padding: 12px; background-color: var(--color-red); color: var(--color-white); border: 2px solid var(--color-red); font-size: 16px; border-radius: 6px; cursor: pointer; transition: background-color 0.3s; font-weight: 600; text-decoration: none; }
.btn-alert:hover { background-color: var(--color-black); color: var(--color-red); border: 2px solid var(--color-red); text-decoration: none; }

#scratch-area { width: 100%; padding: 50px 0; margin: 15px auto; background-color: var(--color-light-grey); cursor: pointer; user-select: none; font-weight: bold; color: var(--color-dark-grey); border-radius: 6px; }
#result { display: none; font-size: 18px; margin-top: 20px; }
.message, .result { margin-top: 15px; font-size: 18px; font-weight: bold; }
.sign p { margin: 0; padding: 30px 0 0 0; }

@media only screen and (max-width: 600px) {
  .sign p { font-size: 0.8em; }
}

.win { font-size: 2em; }
table thead { border-bottom: 1px solid inherit; border-bottom: 1px solid var(--color-primary); background-color: var(--color-black); font-weight: bold; color: var(--color-primary); }
table tfoot { border-bottom: 1px solid inherit; border-top: 1px solid var(--color-primary); background-color: var(--color-black); }
table tbody, table thead, table tfoot { width: 100%; }
table tbody tr:first-child td, table tbody tr:first-child th, table thead tr:first-child td, table thead tr:first-child th, table tfoot tr:first-child td, table tfoot tr:first-child th { border-top: 0; }
table tbody tr:last-child td, table tbody tr:last-child th, table thead tr:last-child td, table thead tr:last-child th, table tfoot tr:last-child td, table tfoot tr:last-child th { border-bottom: 0; }
table tbody tr td:first-child, table tbody tr th:first-child, table thead tr td:first-child, table thead tr th:first-child, table tfoot tr td:first-child, table tfoot tr th:first-child { border-left: 0; }
table tbody tr td:last-child, table tbody tr th:last-child, table thead tr td:last-child, table thead tr th:last-child, table tfoot tr td:last-child, table tfoot tr th:last-child { border-right: 0; }
.action { width: 100%; }
.action form { padding: 10px; }
.big { font-size: 1.2em; }
.fg-p { color: var(--color-primary); }
.fg-alert { color: var(--color-red);}